@ugurdemirel/landcraft 0.1.5 → 0.1.9

package/src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -1,37 +0,0 @@
-"use client";
-import type { LanguageSwitcherProps } from "./types";
-import { useLanguageSwitcher } from "./useLanguageSwitcher";
-import { LanguageSwitcherDropdown } from "./variants/Dropdown";
-import { LanguageSwitcherModal } from "./variants/Modal";
-
-export const LanguageSwitcher = ({
-  option = "dropdown",
-  languages,
-  value,
-  defaultValue,
-  onChange,
-  ...props
-}: LanguageSwitcherProps) => {
-  const state = useLanguageSwitcher(languages, value, defaultValue, onChange);
-
-  if (languages.length === 0) return null;
-
-  const variantProps = {
-    languages,
-    value,
-    defaultValue,
-    onChange,
-    ...props,
-    open: state.open,
-    onOpenChange: state.setOpen,
-    current: state.current,
-    currentLang: state.currentLang,
-    setCurrent: state.setCurrent,
-  };
-
-  if (option === "modal") {
-    return <LanguageSwitcherModal {...variantProps} />;
-  }
-  return <LanguageSwitcherDropdown {...variantProps} />;
-};
-LanguageSwitcher.displayName = "LanguageSwitcher";

package/src/components/LanguageSwitcher/index.ts

@@ -1,6 +0,0 @@
-export { LanguageSwitcher } from "./LanguageSwitcher";
-export type {
-  LanguageSwitcherProps,
-  LanguageSwitcherOption,
-  LanguageOption,
-} from "./types";

package/src/components/LanguageSwitcher/parts.tsx

@@ -1,144 +0,0 @@
-"use client";
-import { useEffect } from "react";
-import { cn } from "../../utils/cn";
-import { iso2ToFlagEmoji } from "../../utils/iso2Flag";
-import { Check, ChevronDown, Globe } from "../../icons";
-import type { LanguageOption } from "./types";
-
-export function useOutsideClose(
-  open: boolean,
-  rootRef: { current: HTMLDivElement | null },
-  onClose: () => void,
-) {
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event: PointerEvent) => {
-      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
-        onClose();
-      }
-    };
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open, rootRef, onClose]);
-}
-
-export function renderFlagOrGlobe(
-  code: string,
-  { size = "text-sm", globeClass = "text-muted-foreground" }: { size?: string; globeClass?: string } = {},
-) {
-  const flag = iso2ToFlagEmoji(code);
-  return flag ? (
-    <span aria-hidden className={cn(size, "leading-none")}>
-      {flag}
-    </span>
-  ) : (
-    <Globe className={cn("h-4 w-4 shrink-0", globeClass)} />
-  );
-}
-
-export function LanguageTrigger({
-  inverse,
-  open,
-  showFlag,
-  currentLang,
-  onClick,
-  ariaProps,
-}: {
-  inverse?: boolean;
-  open: boolean;
-  showFlag?: boolean;
-  currentLang: LanguageOption;
-  onClick: () => void;
-  ariaProps: {
-    haspopup: "listbox" | "dialog";
-    expanded: boolean;
-    controls?: string;
-  };
-}) {
-  return (
-    <button
-      type="button"
-      aria-haspopup={ariaProps.haspopup}
-      aria-expanded={ariaProps.expanded}
-      aria-controls={ariaProps.controls}
-      onClick={onClick}
-      className={cn(
-        "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-lg border px-3 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        inverse
-          ? "border-white/10 text-on-secondary hover:bg-white/10"
-          : "border-border text-foreground hover:bg-surface",
-      )}
-    >
-      {showFlag ? (
-        renderFlagOrGlobe(currentLang.code, { globeClass: inverse ? "opacity-70" : "text-muted-foreground" })
-      ) : (
-        <Globe
-          className={cn("h-4 w-4", inverse ? "opacity-70" : "text-muted-foreground")}
-        />
-      )}
-      <span className="tracking-tight">{currentLang.label}</span>
-      <ChevronDown
-        className={cn(
-          "h-3.5 w-3.5 transition-transform duration-150",
-          open && "rotate-180",
-          inverse ? "opacity-70" : "text-muted-foreground",
-        )}
-      />
-    </button>
-  );
-}
-
-export function LanguageOptionRow({
-  lang,
-  active,
-  onSelect,
-  variant,
-  showFlag,
-}: {
-  lang: LanguageOption;
-  active: boolean;
-  onSelect: () => void;
-  variant: "dropdown" | "modal";
-  showFlag?: boolean;
-}) {
-  return (
-    <button
-      key={lang.code}
-      type="button"
-      role="option"
-      aria-selected={active}
-      onClick={onSelect}
-      className={
-        variant === "modal"
-          ? cn(
-              "flex w-full cursor-pointer items-center justify-between gap-3 rounded-lg border px-4 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              active
-                ? "border-primary/40 bg-primary-soft text-foreground"
-                : "border-border text-foreground hover:bg-surface-strong",
-            )
-          : cn(
-              "flex w-full cursor-pointer items-center justify-between gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              active
-                ? "bg-surface-strong text-foreground"
-                : "text-muted-foreground hover:bg-surface-strong hover:text-foreground",
-            )
-      }
-    >
-      <span className={variant === "modal" ? "flex items-center gap-3" : "flex items-center gap-2.5"}>
-        {showFlag ? renderFlagOrGlobe(lang.code, variant === "modal" ? { size: "text-base" } : {}) : null}
-        <span className="text-sm font-medium">{lang.label}</span>
-      </span>
-      <span className={variant === "modal" ? "flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground" : undefined}>
-        {variant === "modal" ? lang.code : null}
-        {active ? <Check className={variant === "modal" ? "h-4 w-4 text-primary" : "h-3.5 w-3.5 text-primary"} /> : null}
-      </span>
-    </button>
-  );
-}

package/src/components/LanguageSwitcher/types.ts

@@ -1,40 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export interface LanguageOption {
-  /** Language code (ISO 3166-1 alpha-2, e.g. `"tr"`) — this is the value passed to `onChange` and the flag source. */
-  code: string;
-  /** Native display name, e.g. `"Türkçe"`. */
-  label: string;
-}
-
-export type LanguageSwitcherOption = "dropdown" | "modal";
-
-export interface LanguageSwitcherProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-  /** `dropdown` opens the anchored menu; `modal` opens a full dialog via the Modal component. */
-  option?: LanguageSwitcherOption;
-  /** Languages to switch between. Required — no built-in default language list. */
-  languages: LanguageOption[];
-  /** Controlled current language code. */
-  value?: string;
-  /** Uncontrolled initial language code. Defaults to the first language. */
-  defaultValue?: string;
-  /** Called with the selected language code. */
-  onChange?: (code: string) => void;
-  /** Dropdown menu alignment relative to its trigger. Defaults to `end`. */
-  align?: "start" | "end";
-  /** Heading rendered inside the `modal` option. Optional — pass it to show a title. */
-  modalTitle?: ReactNode;
-  /** Replace the globe icon with the selected language's flag emoji (and show flags in options). */
-  showFlag?: boolean;
-  /** Adapts colors for dark surfaces (inverse Navbar, classic Footer). */
-  inverse?: boolean;
-}
-
-export interface LanguageSwitcherVariantProps
-  extends Omit<LanguageSwitcherProps, "option"> {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  current: string;
-  currentLang: LanguageOption;
-  setCurrent: (code: string) => void;
-}

package/src/components/LanguageSwitcher/useLanguageSwitcher.ts

@@ -1,23 +0,0 @@
-"use client";
-import { useState } from "react";
-import type { LanguageOption } from "./types";
-
-export function useLanguageSwitcher(
-  languages: LanguageOption[],
-  value?: string,
-  defaultValue?: string,
-  onChange?: (code: string) => void,
-) {
-  const [open, setOpen] = useState(false);
-  const [internal, setInternal] = useState(defaultValue ?? languages[0]?.code ?? "");
-  const current = value ?? internal;
-  const currentLang = languages.find((l) => l.code === current) ?? languages[0];
-
-  const setCurrent = (code: string) => {
-    setInternal(code);
-    setOpen(false);
-    onChange?.(code);
-  };
-
-  return { open, setOpen, current, currentLang, setCurrent };
-}

package/src/components/LanguageSwitcher/variants/Dropdown.tsx

@@ -1,88 +0,0 @@
-"use client";
-import { useId, useRef, type CSSProperties } from "react";
-import { cn } from "../../../utils/cn";
-import {
-  useOutsideClose,
-  LanguageTrigger,
-  LanguageOptionRow,
-} from "../parts";
-import type { LanguageSwitcherVariantProps } from "../types";
-
-export function LanguageSwitcherDropdown({
-  className,
-  languages,
-  open,
-  onOpenChange,
-  current,
-  currentLang,
-  setCurrent,
-  align = "end",
-  showFlag = false,
-  inverse = false,
-  modalTitle,
-  value,
-  defaultValue,
-  onChange,
-  ...props
-}: LanguageSwitcherVariantProps) {
-  const listboxId = useId();
-  const anchorName = `--ls-${listboxId.replace(/:/g, "")}`;
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  useOutsideClose(open, rootRef, () => onOpenChange(false));
-
-  return (
-    <div
-      ref={rootRef}
-      className={cn("relative inline-flex", className)}
-      {...props}
-    >
-      <button
-        type="button"
-        style={{ anchorName } as CSSProperties}
-        onClick={() => onOpenChange(!open)}
-      >
-        <LanguageTrigger
-          inverse={inverse}
-          open={open}
-          showFlag={showFlag}
-          currentLang={currentLang}
-          onClick={() => onOpenChange(!open)}
-          ariaProps={{ haspopup: "listbox", expanded: open, controls: listboxId }}
-        />
-      </button>
-
-      <div
-        id={listboxId}
-        role="listbox"
-        aria-label="Select language"
-        style={
-          {
-            positionAnchor: anchorName,
-            top: "anchor(bottom)",
-            ...(align === "start" ? { left: "anchor(left)" } : { right: "anchor(right)" }),
-          } as CSSProperties
-        }
-        className={cn(
-          "absolute top-full z-50 mt-2 min-w-[10rem] rounded-lg border border-border bg-surface p-1 shadow-raised transition-all duration-150",
-          align === "start" ? "left-0" : "right-0",
-          open
-            ? "visible translate-y-0 opacity-100"
-            : "pointer-events-none invisible -translate-y-1 opacity-0",
-        )}
-      >
-        {languages.map((lang) => (
-          <LanguageOptionRow
-            key={lang.code}
-            lang={lang}
-            active={lang.code === current}
-            onSelect={() => setCurrent(lang.code)}
-            variant="dropdown"
-            showFlag={showFlag}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-LanguageSwitcherDropdown.displayName = "LanguageSwitcherDropdown";

package/src/components/LanguageSwitcher/variants/Modal.tsx

@@ -1,56 +0,0 @@
-"use client";
-import { useRef } from "react";
-import { cn } from "../../../utils/cn";
-import { Modal } from "../../Modal";
-import { LanguageTrigger, LanguageOptionRow } from "../parts";
-import type { LanguageSwitcherVariantProps } from "../types";
-
-export function LanguageSwitcherModal({
-  className,
-  languages,
-  open,
-  onOpenChange,
-  current,
-  currentLang,
-  setCurrent,
-  modalTitle,
-  showFlag = false,
-  inverse = false,
-  align,
-  value,
-  defaultValue,
-  onChange,
-  ...props
-}: LanguageSwitcherVariantProps) {
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <>
-      <div ref={rootRef} className={cn("relative inline-flex", className)} {...props}>
-        <LanguageTrigger
-          inverse={inverse}
-          open={open}
-          showFlag={showFlag}
-          currentLang={currentLang}
-          onClick={() => onOpenChange(!open)}
-          ariaProps={{ haspopup: "dialog", expanded: open }}
-        />
-      </div>
-      <Modal open={open} onClose={() => onOpenChange(false)} title={modalTitle} size="sm">
-        <div role="listbox" aria-label="Select language" className="grid min-w-[19rem] gap-1.5">
-          {languages.map((lang) => (
-            <LanguageOptionRow
-              key={lang.code}
-              lang={lang}
-              active={lang.code === current}
-              onSelect={() => setCurrent(lang.code)}
-              variant="modal"
-              showFlag={showFlag}
-            />
-          ))}
-        </div>
-      </Modal>
-    </>
-  );
-}
-LanguageSwitcherModal.displayName = "LanguageSwitcherModal";

package/src/components/LogoCloud/LogoCloud.test.tsx

@@ -1,35 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { LogoCloud } from "./LogoCloud";
-
-const logos = [{ name: "Acme" }, { name: "Globex" }];
-
-describe("LogoCloud", () => {
-  it("renders the title and logo names (quiet by default)", () => {
-    render(<LogoCloud title="Teams" logos={logos} />);
-    expect(screen.getByText("Teams")).toBeInTheDocument();
-    expect(screen.getByText("Acme")).toBeInTheDocument();
-    expect(screen.getByText("Globex")).toBeInTheDocument();
-  });
-
-  it("does not render a title when none is provided", () => {
-    render(<LogoCloud logos={logos} />);
-    expect(screen.queryByText("Teams")).not.toBeInTheDocument();
-  });
-
-  it("renders the marquee option (items duplicated for the loop)", () => {
-    render(<LogoCloud logos={logos} option="marquee" />);
-    expect(screen.getAllByText("Acme").length).toBeGreaterThan(1);
-  });
-
-  it("renders the strip option", () => {
-    render(<LogoCloud logos={logos} option="strip" />);
-    expect(screen.getByText("Acme")).toBeInTheDocument();
-  });
-
-  it("renders a logo image when src is provided", () => {
-    render(<LogoCloud logos={[{ name: "Acme", src: "/acme.png" }]} />);
-    const img = screen.getByAltText("Acme");
-    expect(img).toHaveAttribute("src", "/acme.png");
-  });
-});

package/src/components/LogoCloud/LogoCloud.tsx

@@ -1,14 +0,0 @@
-import { forwardRef } from "react";
-import type { LogoCloudProps } from "./types";
-import { LogoCloudQuiet } from "./variants/Quiet";
-import { LogoCloudMarquee } from "./variants/Marquee";
-import { LogoCloudStrip } from "./variants/Strip";
-
-export const LogoCloud = forwardRef<HTMLDivElement, LogoCloudProps>(
-  ({ option = "quiet", ...props }, ref) => {
-    if (option === "marquee") return <LogoCloudMarquee ref={ref} {...props} />;
-    if (option === "strip") return <LogoCloudStrip ref={ref} {...props} />;
-    return <LogoCloudQuiet ref={ref} {...props} />;
-  },
-);
-LogoCloud.displayName = "LogoCloud";

package/src/components/LogoCloud/index.ts

@@ -1,2 +0,0 @@
-export { LogoCloud } from "./LogoCloud";
-export type { LogoCloudProps, LogoCloudOption, LogoItem } from "./types";

package/src/components/LogoCloud/parts.tsx

@@ -1,32 +0,0 @@
-import { cn } from "../../utils/cn";
-import type { LogoItem } from "./types";
-
-const LogoText = ({ name }: { name: string }) => (
-  <span className="text-lg font-semibold tracking-tight text-foreground/45 transition-colors duration-200 group-hover:text-foreground">
-    {name}
-  </span>
-);
-
-export const LogoMark = ({ logo }: { logo: LogoItem }) =>
-  logo.src ? (
-    <img
-      src={logo.src}
-      alt={logo.name}
-      loading="lazy"
-      className={cn(
-        "max-h-7 w-auto opacity-50 grayscale transition-all duration-200 group-hover:opacity-90 group-hover:grayscale-0",
-        "h-7",
-      )}
-    />
-  ) : (
-    <LogoText name={logo.name} />
-  );
-
-export function LogoCloudTitle({ title, className }: { title?: string; className?: string }) {
-  if (!title) return null;
-  return (
-    <p className={cn("mb-8 text-center text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground", className)}>
-      {title}
-    </p>
-  );
-}

package/src/components/LogoCloud/types.ts

@@ -1,16 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-export type LogoCloudOption = "quiet" | "marquee" | "strip";
-
-export interface LogoItem {
-  name: string;
-  src?: string;
-  href?: string;
-}
-
-export interface LogoCloudProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-  /** Visual option: quiet list · infinite marquee · hairline strip */
-  option?: LogoCloudOption;
-}

package/src/components/LogoCloud/variants/Marquee.tsx

@@ -1,30 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-export const LogoCloudMarquee = forwardRef<HTMLDivElement, MarqueeProps>(
-  ({ className, logos, title, ...props }, ref) => {
-    const doubled = [...logos, ...logos];
-    return (
-      <div ref={ref} className={cn("w-full overflow-hidden", className)} {...props}>
-        <LogoCloudTitle title={title} />
-        <div className="mask-fade-x">
-          <div className="flex w-max animate-marquee gap-14 pr-14 motion-reduce:animate-none">
-            {doubled.map((logo, i) => (
-              <div key={`${logo.name}-${i}`} className="group shrink-0">
-                <LogoMark logo={logo} />
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  },
-);
-LogoCloudMarquee.displayName = "LogoCloudMarquee";

package/src/components/LogoCloud/variants/Quiet.tsx

@@ -1,26 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface QuietProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-/** quiet — unbounded spread of wordmarks. */
-export const LogoCloudQuiet = forwardRef<HTMLDivElement, QuietProps>(
-  ({ className, logos, title, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full", className)} {...props}>
-      <LogoCloudTitle title={title} />
-      <ul className="flex flex-wrap items-center justify-center gap-x-12 gap-y-6">
-        {logos.map((logo) => (
-          <li key={logo.name} className="group">
-            <LogoMark logo={logo} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  ),
-);
-LogoCloudQuiet.displayName = "LogoCloudQuiet";

package/src/components/LogoCloud/variants/Strip.tsx

@@ -1,25 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { LogoMark, LogoCloudTitle } from "../parts";
-import type { LogoItem } from "../types";
-
-interface StripProps extends HTMLAttributes<HTMLDivElement> {
-  logos: LogoItem[];
-  title?: string;
-}
-
-export const LogoCloudStrip = forwardRef<HTMLDivElement, StripProps>(
-  ({ className, logos, title, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full", className)} {...props}>
-      <LogoCloudTitle title={title} />
-      <ul className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 rounded-2xl border border-border bg-surface px-6 py-7 sm:gap-x-14">
-        {logos.map((logo) => (
-          <li key={logo.name} className="group">
-            <LogoMark logo={logo} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  ),
-);
-LogoCloudStrip.displayName = "LogoCloudStrip";

package/src/components/MegaMenu/MegaMenu.test.tsx

@@ -1,89 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { MegaMenu } from "./MegaMenu";
-
-const items = [
-  {
-    label: "Product",
-    columns: [
-      {
-        title: "Build",
-        links: [
-          { label: "API Platform", description: "REST + GraphQL", href: "#api" },
-          { label: "Workflows", href: "#wf" },
-        ],
-      },
-    ],
-    featured: { title: "Get started", description: "See it live", cta: "Start", href: "#start" },
-  },
-  { label: "Pricing", href: "#pricing" },
-  { label: "Docs", href: "#docs" },
-];
-
-function desktopTrigger(container: HTMLElement): HTMLButtonElement {
-  // The desktop trigger is the one with aria-haspopup; the mobile accordion
-  // button does not set it, and it is hidden behind `lg:hidden` CSS.
-  return container.querySelector('button[aria-haspopup="true"]')!;
-}
-
-describe("MegaMenu", () => {
-  it("renders the brand and plain link items", () => {
-    render(<MegaMenu brand="Acurio" items={items} />);
-    expect(screen.getByText("Acurio")).toBeInTheDocument();
-    // Links render in both the desktop bar and the mobile panel.
-    const pricingLinks = screen.getAllByRole("link", { name: "Pricing" });
-    expect(pricingLinks.length).toBeGreaterThan(0);
-    expect(pricingLinks[0]).toHaveAttribute("href", "#pricing");
-    expect(screen.getAllByRole("link", { name: "Docs" }).length).toBeGreaterThan(0);
-  });
-
-  it("renders a trigger button for panel items (with columns/featured)", () => {
-    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
-    const trigger = desktopTrigger(container);
-    expect(trigger).toHaveAttribute("aria-haspopup", "true");
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("reveals the panel (column links + featured card) when the desktop trigger is clicked", () => {
-    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
-    fireEvent.click(desktopTrigger(container));
-
-    expect(container.querySelector('[role="region"][aria-label="Product menu"]')).toBeInTheDocument();
-    // The column and featured links are present in the panel markup.
-    expect(container.querySelector('a[href="#api"]')).toBeInTheDocument();
-    expect(container.querySelector('a[href="#wf"]')).toBeInTheDocument();
-    expect(container.querySelector('a[href="#start"]')).toBeInTheDocument();
-  });
-
-  it("sets aria-expanded while the panel is open and closes on Escape", () => {
-    const { container } = render(<MegaMenu brand="Acurio" items={items} />);
-    const trigger = desktopTrigger(container);
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    fireEvent.keyDown(screen.getByRole("banner"), { key: "Escape" });
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("applies the inverse variant to the header shell", () => {
-    render(<MegaMenu brand="Acurio" items={items} variant="inverse" />);
-    expect(screen.getByRole("banner")).toHaveClass("bg-[#101010]/85");
-  });
-
-  it("toggles the mobile menu via the hamburger", () => {
-    render(<MegaMenu brand="Acurio" items={items} />);
-    const openBtn = screen.getByRole("button", { name: "Open menu" });
-    expect(openBtn).toHaveAttribute("aria-expanded", "false");
-
-    fireEvent.click(openBtn);
-    expect(screen.getByRole("button", { name: "Close menu" })).toHaveAttribute(
-      "aria-expanded",
-      "true",
-    );
-  });
-
-  it("does not render sticky when sticky is disabled", () => {
-    render(<MegaMenu brand="Acurio" items={items} sticky={false} />);
-    expect(screen.getByRole("banner")).not.toHaveClass("sticky");
-  });
-});