@ugurdemirel/landcraft 0.1.3 → 0.1.4

package/src/components/LogoCloud/types.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,25 @@
+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.tsx → MegaMenu/MegaMenu.tsx}

@@ -1,65 +1,83 @@
-import { useId, useState, type ElementType, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { getContrastText } from "../utils/contrast";
-import { ChevronDown, Menu, X } from "../icons";
+"use client";
+import { useId, useState } from "react";
+import { cn } from "../../utils/cn";
+import { getContrastText } from "../../utils/contrast";
+import { ChevronDown, Menu, X } from "../../icons";
+import type { MegaMenuProps, MegaMenuVariant, MegaMenuItem } from "./types";
 
-export interface MegaMenuLink {
-  label: string;
-  href: string;
-  description?: string;
+interface MegaMenuStyle {
+  shell: string;
+  bar: string;
+  header: string;
+  trigger: string;
+  triggerOpen: string;
+  badge: string;
+  panel: string;
+  columnTitle: string;
+  columnLink: string;
+  linkDescription: string;
+  mobilePanel: string;
+  mobileButton: string;
+  mobileLink: string;
+  brandText: string;
+  brandDot: string;
 }
 
-export interface MegaMenuColumn {
-  title?: string;
-  links: MegaMenuLink[];
-}
-
-export interface MegaMenuFeatured {
-  title: string;
-  description?: string;
-  href: string;
-  cta?: string;
-  /** Background color for the card; glyph text color is computed for contrast. */
-  accent?: string;
-}
-
-export interface MegaMenuItem {
-  label: string;
-  href?: string;
-  /** When set, the item becomes a trigger that opens a mega panel. */
-  columns?: MegaMenuColumn[];
-  /** Optional highlighted card pinned to the right side of the panel. */
-  featured?: MegaMenuFeatured;
-  /** Small pill rendered next to the trigger label. */
-  badge?: string;
-}
-
-export interface MegaMenuProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  variant?: "classic" | "floating" | "inverse";
-  /** Wordmark rendered when no logo is supplied. */
-  brand?: ReactNode;
-  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
-  logo?: ReactNode;
-  /** Quick logo image source. */
-  logoSrc?: string;
-  logoAlt?: string;
-  logoClassName?: string;
-  brandHref?: string;
-  items: MegaMenuItem[];
-  /** Rendered at the right side of the bar (desktop) and inside the mobile panel. */
-  actions?: ReactNode;
-  cta?: ReactNode;
-  /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
-  languageSwitcher?: ReactNode;
-  sticky?: boolean;
-  /** Component used to render brand, trigger and panel links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}
+const inverse = "text-on-secondary";
+const light = "text-foreground";
 
-const triggerStyles = {
-  classic: "text-muted-foreground hover:text-foreground hover:bg-surface",
-  floating: "text-muted-foreground hover:text-foreground hover:bg-surface",
-  inverse: "text-on-secondary/60 hover:text-on-secondary hover:bg-white/10",
+const styles: Record<MegaMenuVariant, MegaMenuStyle> = {
+  classic: {
+    shell: "border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",
+    bar: "mx-auto max-w-6xl px-5 sm:px-8",
+    header: "px-0",
+    trigger: "text-muted-foreground hover:text-foreground hover:bg-surface",
+    triggerOpen: "bg-surface text-foreground",
+    badge: "bg-primary-soft text-primary",
+    panel: "border-border bg-surface shadow-raised",
+    columnTitle: "text-muted-foreground/70",
+    columnLink: "hover:bg-surface-strong",
+    linkDescription: "text-muted-foreground",
+    mobilePanel: "border-t border-border bg-background",
+    mobileButton: `${light} hover:bg-surface`,
+    mobileLink: "text-muted-foreground hover:bg-surface hover:text-foreground",
+    brandText: light,
+    brandDot: "bg-foreground",
+  },
+  floating: {
+    shell: "px-0",
+    bar: "mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",
+    header: "px-3 sm:px-6",
+    trigger: "text-muted-foreground hover:text-foreground hover:bg-surface",
+    triggerOpen: "bg-surface text-foreground",
+    badge: "bg-primary-soft text-primary",
+    panel: "border-border bg-surface shadow-raised",
+    columnTitle: "text-muted-foreground/70",
+    columnLink: "hover:bg-surface-strong",
+    linkDescription: "text-muted-foreground",
+    mobilePanel: "mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface",
+    mobileButton: `${light} hover:bg-surface`,
+    mobileLink: "text-muted-foreground hover:bg-surface hover:text-foreground",
+    brandText: light,
+    brandDot: "bg-foreground",
+  },
+  inverse: {
+    shell: "border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",
+    bar: "mx-auto max-w-6xl px-5 sm:px-8",
+    header: "px-0",
+    trigger: "text-on-secondary/60 hover:text-on-secondary hover:bg-white/10",
+    triggerOpen: "bg-white/10 text-on-secondary",
+    badge: "bg-white/15 text-on-secondary",
+    panel: "border-white/10 bg-[#161616]",
+    columnTitle: "text-on-secondary/45",
+    columnLink: "hover:bg-white/10",
+    linkDescription: "text-on-secondary/50",
+    mobilePanel: "border-t border-white/10 bg-[#101010]",
+    mobileButton: `${inverse} hover:bg-white/10`,
+    mobileLink: "text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary",
+    brandText: inverse,
+    brandDot: "bg-on-secondary",
+  },
 };
 
 export const MegaMenu = ({
@@ -85,8 +103,7 @@ export const MegaMenu = ({
   const [openIndex, setOpenIndex] = useState<number | null>(null);
   const [mobileOpen, setMobileOpen] = useState(false);
   const [mobileExpanded, setMobileExpanded] = useState<number | null>(null);
-
-  const inverse = variant === "inverse";
+  const s = styles[variant];
 
   const closePanels = () => setOpenIndex(null);
   const closeAll = () => {
@@ -95,27 +112,8 @@ export const MegaMenu = ({
     setMobileExpanded(null);
   };
 
-  const panelBackground = inverse
-    ? "border-white/10 bg-[#161616]"
-    : "border-border bg-surface shadow-raised";
-
   const panelId = (i: number) => `${ids}-panel-${i}`;
 
-  const shell = cn(
-    "relative w-full transition-colors duration-200",
-    sticky && "sticky top-0 z-50",
-    variant === "classic" &&
-      "border-b border-border bg-background/85 backdrop-blur-md supports-[backdrop-filter]:bg-background/75",
-    variant === "inverse" && "border-b border-white/10 bg-[#101010]/85 backdrop-blur-md",
-  );
-
-  const bar = cn(
-    "relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200",
-    variant === "floating" &&
-      "mx-auto mt-3 max-w-5xl rounded-xl border border-border bg-surface/90 px-5 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-surface/70",
-    variant !== "floating" && "mx-auto max-w-6xl px-5 sm:px-8",
-  );
-
   const logoNode =
     logo ??
     (logoSrc ? (
@@ -129,26 +127,15 @@ export const MegaMenu = ({
   const brandNode = logoNode ? (
     <span className="flex items-center">{logoNode}</span>
   ) : (
-    <span
-      className={cn(
-        "flex items-center gap-2 font-display text-[17px] font-bold tracking-tight",
-        inverse ? "text-on-secondary" : "text-foreground",
-      )}
-    >
-      <span
-        aria-hidden
-        className={cn(
-          "inline-block h-2.5 w-2.5 rounded-sm",
-          inverse ? "bg-on-secondary" : "bg-foreground",
-        )}
-      />
+    <span className={cn("flex items-center gap-2 font-display text-[17px] font-bold tracking-tight", s.brandText)}>
+      <span aria-hidden className={cn("inline-block h-2.5 w-2.5 rounded-sm", s.brandDot)} />
       {brand}
     </span>
   );
 
   const triggerClasses = cn(
     "flex items-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",
-    triggerStyles[variant],
+    s.trigger,
   );
 
   const renderColumns = (item: MegaMenuItem) => (
@@ -164,7 +151,7 @@ export const MegaMenu = ({
             <h4
               className={cn(
                 "text-xs font-semibold uppercase tracking-[0.14em]",
-                inverse ? "text-on-secondary/45" : "text-muted-foreground/70",
+                s.columnTitle,
               )}
             >
               {column.title}
@@ -178,9 +165,7 @@ export const MegaMenu = ({
                   onClick={closeAll}
                   className={cn(
                     "-mx-2 block rounded-md px-2 py-2 transition-colors duration-150",
-                    inverse
-                      ? "hover:bg-white/10"
-                      : "hover:bg-surface-strong",
+                    s.columnLink,
                   )}
                 >
                   <span className="block text-sm font-medium text-foreground">
@@ -190,7 +175,7 @@ export const MegaMenu = ({
                     <span
                       className={cn(
                         "mt-0.5 block text-[13px] leading-snug",
-                        inverse ? "text-on-secondary/50" : "text-muted-foreground",
+                        s.linkDescription,
                       )}
                     >
                       {link.description}
@@ -257,11 +242,17 @@ export const MegaMenu = ({
 
   return (
     <header
-      className={cn(shell, variant === "floating" && "px-3 sm:px-6", className)}
+      className={cn(
+        "relative w-full transition-colors duration-200",
+        sticky && "sticky top-0 z-50",
+        s.shell,
+        s.header,
+        className,
+      )}
       onKeyDown={handleKeyDown}
       {...props}
     >
-      <nav className={bar} onMouseLeave={closePanels} aria-label="Mega menu">
+      <nav className={cn("relative flex h-16 w-full items-center justify-between gap-4 transition-colors duration-200", s.bar)} onMouseLeave={closePanels} aria-label="Mega menu">
         <Link href={brandHref} className="shrink-0">
           {brandNode}
         </Link>
@@ -280,13 +271,7 @@ export const MegaMenu = ({
                     aria-controls={panelId(i)}
                     onClick={() => setOpenIndex(open ? null : i)}
                     onMouseEnter={() => setOpenIndex(i)}
-                    className={cn(
-                      triggerClasses,
-                      open &&
-                        (inverse
-                          ? "bg-white/10 text-on-secondary"
-                          : "bg-surface text-foreground"),
-                    )}
+                    className={cn(triggerClasses, open && s.triggerOpen)}
                   >
                     <span className="flex items-center gap-1.5">
                       {item.label}
@@ -294,9 +279,7 @@ export const MegaMenu = ({
                         <span
                           className={cn(
                             "rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide",
-                            inverse
-                              ? "bg-white/15 text-on-secondary"
-                              : "bg-primary-soft text-primary",
+                            s.badge,
                           )}
                         >
                           {item.badge}
@@ -314,7 +297,7 @@ export const MegaMenu = ({
                   <Link href={item.href ?? "#"} className={triggerClasses}>
                     {item.label}
                     {item.badge ? (
-                      <span className="rounded-full bg-primary-soft px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-primary">
+                      <span className={cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", s.badge)}>
                         {item.badge}
                       </span>
                     ) : null}
@@ -343,14 +326,13 @@ export const MegaMenu = ({
           className={cn(
             "inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-md lg:hidden",
             "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            inverse ? "text-on-secondary hover:bg-white/10" : "text-foreground hover:bg-surface",
+            s.mobileButton,
           )}
         >
           {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </button>
       </nav>
 
-      {/* Desktop mega panels */}
       {items.map((item, i) => {
         if (!item.columns?.length && !item.featured) return null;
         const open = openIndex === i;
@@ -372,7 +354,7 @@ export const MegaMenu = ({
             <div
               className={cn(
                 "overflow-hidden rounded-xl border p-6 md:p-8",
-                panelBackground,
+                s.panel,
                 item.featured ? "lg:grid lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-12" : "",
               )}
             >
@@ -387,16 +369,11 @@ export const MegaMenu = ({
         );
       })}
 
-      {/* Mobile accordion panel */}
       <div
         className={cn(
           "grid transition-[grid-template-rows,opacity] duration-200 lg:hidden",
           mobileOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
-          inverse
-            ? "border-t border-white/10 bg-[#101010]"
-            : variant === "floating"
-              ? "mx-3 mb-3 max-w-5xl overflow-hidden rounded-b-xl border border-border bg-surface"
-              : "border-t border-border bg-background",
+          s.mobilePanel,
         )}
       >
         <div className="min-h-0 overflow-hidden">
@@ -412,15 +389,13 @@ export const MegaMenu = ({
                     }
                     className={cn(
                       "flex w-full items-center justify-between rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
-                      inverse
-                        ? "text-on-secondary hover:bg-white/10"
-                        : "text-foreground hover:bg-surface",
+                      s.mobileButton,
                     )}
                   >
                     <span className="flex items-center gap-2">
                       {item.label}
                       {item.badge ? (
-                        <span className="rounded-full bg-primary-soft px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-primary">
+                        <span className={cn("rounded-full px-1.5 py-0.5 text-[10px] font-semibold tracking-wide", s.badge)}>
                           {item.badge}
                         </span>
                       ) : null}
@@ -457,9 +432,7 @@ export const MegaMenu = ({
                     onClick={() => setMobileOpen(false)}
                     className={cn(
                       "block rounded-md px-2 py-2.5 text-sm font-medium transition-colors duration-150",
-                      inverse
-                        ? "text-on-secondary/70 hover:bg-white/10 hover:text-on-secondary"
-                        : "text-muted-foreground hover:bg-surface hover:text-foreground",
+                      s.mobileLink,
                     )}
                   >
                     {item.label}

package/src/components/MegaMenu/index.ts

@@ -0,0 +1,9 @@
+export { MegaMenu } from "./MegaMenu";
+export type {
+  MegaMenuProps,
+  MegaMenuVariant,
+  MegaMenuItem,
+  MegaMenuColumn,
+  MegaMenuLink,
+  MegaMenuFeatured,
+} from "./types";

package/src/components/MegaMenu/types.ts

@@ -0,0 +1,56 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+
+export interface MegaMenuLink {
+  label: string;
+  href: string;
+  description?: string;
+}
+
+export interface MegaMenuColumn {
+  title?: string;
+  links: MegaMenuLink[];
+}
+
+export interface MegaMenuFeatured {
+  title: string;
+  description?: string;
+  href: string;
+  cta?: string;
+  /** Background color for the card; glyph text color is computed for contrast. */
+  accent?: string;
+}
+
+export interface MegaMenuItem {
+  label: string;
+  href?: string;
+  /** When set, the item becomes a trigger that opens a mega panel. */
+  columns?: MegaMenuColumn[];
+  /** Optional highlighted card pinned to the right side of the panel. */
+  featured?: MegaMenuFeatured;
+  /** Small pill rendered next to the trigger label. */
+  badge?: string;
+}
+
+export type MegaMenuVariant = "classic" | "floating" | "inverse";
+
+export interface MegaMenuProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  variant?: MegaMenuVariant;
+  /** Wordmark rendered when no logo is supplied. */
+  brand?: ReactNode;
+  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
+  logo?: ReactNode;
+  /** Quick logo image source. */
+  logoSrc?: string;
+  logoAlt?: string;
+  logoClassName?: string;
+  brandHref?: string;
+  items: MegaMenuItem[];
+  /** Rendered at the right side of the bar (desktop) and inside the mobile panel. */
+  actions?: ReactNode;
+  cta?: ReactNode;
+  /** Optional language switcher rendered on the right (desktop) and beside the menu button (mobile). */
+  languageSwitcher?: ReactNode;
+  sticky?: boolean;
+  /** Component used to render brand, trigger and panel links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
+  LinkComponent?: ElementType;
+}

package/src/components/Modal.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "../utils/cn";
 import { X } from "../icons";