@ugurdemirel/landcraft 0.1.0

package/src/index.ts

@@ -0,0 +1,111 @@
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./components/Button";
+export { Badge, type BadgeProps, type BadgeVariant, type BadgeSize } from "./components/Badge";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  type CardProps,
+  type CardHeaderProps,
+  type CardVariant,
+} from "./components/Card";
+export {
+  Section,
+  SectionHeader,
+  type SectionProps,
+  type SectionHeaderProps,
+  type EyebrowStyle,
+} from "./components/Section";
+export { Hero, type HeroProps, type HeroMeta } from "./components/Hero";
+export { Navbar, type NavbarProps, type NavLink } from "./components/Navbar";
+export {
+  MegaMenu,
+  type MegaMenuProps,
+  type MegaMenuItem,
+  type MegaMenuColumn,
+  type MegaMenuLink,
+  type MegaMenuFeatured,
+} from "./components/MegaMenu";
+export { LogoCloud, type LogoCloudProps, type LogoItem } from "./components/LogoCloud";
+export {
+  FeatureCard,
+  FeatureGrid,
+  type FeatureCardProps,
+  type FeatureGridProps,
+  type FeatureItem,
+} from "./components/Features";
+export { Stats, type StatsProps, type Stat } from "./components/Stats";
+export { Pricing, type PricingProps, type Plan } from "./components/Pricing";
+export {
+  Testimonials,
+  TestimonialCard,
+  type TestimonialsProps,
+  type TestimonialCardProps,
+  type Testimonial,
+} from "./components/Testimonials";
+export { CTA, type CTAProps } from "./components/CTA";
+export { FAQ, type FAQProps, type FaqItem } from "./components/FAQ";
+export { Footer, type FooterProps, type FooterColumn, type FooterLink } from "./components/Footer";
+export { Newsletter, type NewsletterProps } from "./components/Newsletter";
+export { Prose, ProseLead, type ProseProps, type ProseSize } from "./components/Prose";
+export {
+  BlogCard,
+  BlogSection,
+  type BlogCardProps,
+  type BlogPost,
+  type BlogAuthor,
+  type BlogSectionProps,
+} from "./components/Blog";
+export {
+  Container,
+  Stack,
+  type ContainerProps,
+  type ContainerSize,
+  type StackProps,
+  type StackGap,
+} from "./components/Container";
+
+export { cn } from "./utils/cn";
+export { getContrastText, type ColorInput } from "./utils/contrast";
+export { useTokenForeground } from "./utils/useTokenForeground";
+
+export {
+  ArrowRight,
+  ArrowUpRight,
+  ArrowDown,
+  ArrowUp,
+  Check,
+  Plus,
+  X,
+  Menu,
+  ChevronDown,
+  ChevronRight,
+  ChevronLeft,
+  Zap,
+  ShieldCheck,
+  Layers,
+  Smartphone,
+  Gauge,
+  BarChart,
+  Users,
+  Star,
+  Quote,
+  Globe,
+  Mail,
+  Lock,
+  Clock,
+  DollarSign,
+  Code,
+  Terminal,
+  Send,
+  Play,
+  ExternalLink,
+  Sliders,
+  Database,
+  Box,
+  Cpu,
+  Palette,
+  Rocket,
+} from "./icons";

package/src/styles/index.css

@@ -0,0 +1,87 @@
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* ── Brand ─────────────────────────────────────────────── */
+    --color-primary: 79 70 229;        /* indigo-600 */
+    --color-primary-hover: 67 56 202;  /* indigo-700 */
+    --color-primary-soft: 238 242 255; /* indigo-50 */
+    --color-on-primary: 255 255 255;
+
+    --color-secondary: 15 15 15;       /* ink */
+    --color-secondary-hover: 38 38 38;
+    --color-on-secondary: 250 250 250;
+
+    --color-accent: 5 150 105;         /* emerald-600 */
+    --color-accent-hover: 4 120 87;
+    --color-on-accent: 255 255 255;
+
+    /* ── Surfaces & text (warm paper, not pure white) ──────── */
+    --color-background: 250 250 250;
+    --color-foreground: 17 17 17;
+    --color-muted-foreground: 97 97 97;
+    --color-surface: 255 255 255;
+    --color-surface-strong: 244 244 242;
+    --color-border: 229 229 228;
+    --color-ring: 79 70 229;
+    --color-danger: 217 45 32;
+    --color-danger-soft: 255 241 242;
+
+    /* ── Type & shape ──────────────────────────────────────── */
+    --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+    --radius-sm: 0.375rem;
+    --radius-md: 0.625rem;
+    --radius-lg: 0.875rem;
+    --radius-xl: 1.125rem;
+    --radius-2xl: 1.5rem;
+    --radius-3xl: 2rem;
+
+    /* ── Elevation ─────────────────────────────────────────── */
+    --shadow-soft: 0 1px 2px rgb(17 17 17 / 0.04), 0 2px 8px rgb(17 17 17 / 0.04);
+    --shadow-raised: 0 2px 4px rgb(17 17 17 / 0.05), 0 12px 32px rgb(17 17 17 / 0.08);
+    --shadow-overlay: 0 24px 64px -12px rgb(17 17 17 / 0.18);
+  }
+
+  html {
+    -webkit-tap-highlight-color: transparent;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+
+  ::selection {
+    background-color: rgb(var(--color-primary) / 0.18);
+  }
+}
+
+@layer utilities {
+  /* Subtle film grain for dark/statement surfaces */
+  .grain {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
+  }
+
+  .animate-marquee {
+    animation: marquee 38s linear infinite;
+  }
+
+  .mask-fade-x {
+    mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
+  }
+}
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/contrast.ts

@@ -0,0 +1,107 @@
+/**
+ * Contrast utilities.
+ *
+ * The library ships paired semantic tokens (e.g. --color-primary /
+ * --color-on-primary) so explicit pairings stay safe. For the few places where
+ * a *dynamic* color paints a background (a `customColor` prop, a token-based
+ * highlight card...) we pick the text color that yields the **best WCAG
+ * contrast ratio** at runtime.
+ *
+ * Inputs may be hex colors, bare RGB channels ("21 128 61"), rgb() functions
+ * (`rgb(21 128 61 / 0.95)`) or CSS variable references
+ * (`rgb(var(--color-primary) / 0.85)`). Variable references are resolved
+ * against the live stylesheet before computing luminance, so a re-themed
+ * palette never produces a low-contrast combination.
+ */
+
+export type ColorInput = string;
+
+function readVariable(name: string): string {
+  if (typeof window === "undefined") return "";
+  return window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(name)
+    .trim();
+}
+
+/** Resolve `var(--x)` references against the live stylesheet. */
+function resolveVars(input: string): string {
+  let str = input;
+  const refs = str.match(/var\(--[\w-]+/g) ?? [];
+  for (const ref of refs) {
+    const name = ref.replace(/^var\(/, "");
+    const resolved = readVariable(name);
+    if (resolved) str = str.split(ref).join(resolved);
+  }
+  return str;
+}
+
+interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+function channels(color: ColorInput): RGB | null {
+  let str = color.trim();
+
+  if (/^#([0-9a-f]{3}){1,2}$/i.test(str)) {
+    if (str.length === 4) {
+      str =
+        "#" +
+        str
+          .slice(1)
+          .split("")
+          .map((c) => c + c)
+          .join("");
+    }
+    return {
+      r: parseInt(str.slice(1, 3), 16),
+      g: parseInt(str.slice(3, 5), 16),
+      b: parseInt(str.slice(5, 7), 16),
+    };
+  }
+
+  const resolved = resolveVars(str);
+
+  // Normalize rgb()/rgba() separators ("r g b / a", "r, g, b") and bare channels.
+  const normalized = resolved.replace(/[()/;,]/g, " ");
+  const parts = normalized.match(/-?\d+(\.\d+)?/g)?.map(Number) ?? [];
+  if (parts.length < 3) return null;
+  // Alpha (4th component) is ignored: these colors paint opaque surfaces and
+  // mixing against an unknown backdrop can't be modelled reliably.
+  const [r, g, b] = parts;
+  return {
+    r: Math.max(0, Math.min(255, Math.round(r))),
+    g: Math.max(0, Math.min(255, Math.round(g))),
+    b: Math.max(0, Math.min(255, Math.round(b))),
+  };
+}
+
+function relativeLuminance(color: ColorInput): number {
+  const c = channels(color);
+  if (!c) return 0;
+  const lin = [c.r, c.g, c.b]
+    .map((v) => v / 255)
+    .map((v) => (v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)));
+  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+}
+
+function contrastRatio(lumA: number, lumB: number): number {
+  const [hi, lo] = lumA > lumB ? [lumA, lumB] : [lumB, lumA];
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+/**
+ * Returns the more readable of the two candidate text colors for a given
+ * background. Both candidates are evaluated with the WCAG contrast formula and
+ * the winning (highest ratio) color is returned — not a fixed luminance
+ * breakpoint — so mid-luminance backgrounds (amber, pastels, light violet…)
+ * always fall on the correct side.
+ */
+export function getContrastText(bg: ColorInput, light = "#ffffff", dark = "#0f172a"): string {
+  const lumBg = relativeLuminance(bg);
+  const lumLight = relativeLuminance(light);
+  const lumDark = relativeLuminance(dark);
+  return contrastRatio(lumBg, lumLight) >= contrastRatio(lumBg, lumDark) ? light : dark;
+}

package/src/utils/useTokenForeground.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { getContrastText } from "./contrast";
+
+function readChannel(variable: string): string {
+  if (typeof window === "undefined") return "";
+  return window
+    .getComputedStyle(document.documentElement)
+    .getPropertyValue(variable)
+    .trim();
+}
+
+/**
+ * Reads a `--color-*` token from the live stylesheet and returns a text color
+ * that is always readable against it. Recomputes whenever the palette changes
+ * at runtime (e.g. the Storybook theme switcher or an app-level theme swap).
+ */
+export function useTokenForeground(variable: string, fallback = "#ffffff"): string {
+  const [text, setText] = useState<string>(() => {
+    const value = readChannel(variable);
+    return value ? getContrastText(value) : fallback;
+  });
+
+  useEffect(() => {
+    const update = () => {
+      const value = readChannel(variable);
+      setText(value ? getContrastText(value) : fallback);
+    };
+    update();
+    const observer = new MutationObserver(update);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style", "class"],
+    });
+    return () => observer.disconnect();
+  }, [variable, fallback]);
+
+  return text;
+}

package/tailwind.preset.cjs

@@ -0,0 +1,121 @@
+/**
+ * Tailwind preset for @ugurdemirel/landcraft.
+ *
+ * Every design decision (color, type, radius, shadow) is driven by CSS custom
+ * properties so consumers can re-skin the whole library from outside without
+ * touching a single component.
+ *
+ * Colors store space-separated RGB channels so Tailwind's `<alpha-value>`
+ * opacity syntax keeps working (e.g. `text-primary/60`).
+ */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        primary: "rgb(var(--color-primary) / <alpha-value>)",
+        "primary-hover": "rgb(var(--color-primary-hover) / <alpha-value>)",
+        "primary-soft": "rgb(var(--color-primary-soft) / <alpha-value>)",
+        "on-primary": "rgb(var(--color-on-primary) / <alpha-value>)",
+        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
+        "secondary-hover": "rgb(var(--color-secondary-hover) / <alpha-value>)",
+        "on-secondary": "rgb(var(--color-on-secondary) / <alpha-value>)",
+        accent: "rgb(var(--color-accent) / <alpha-value>)",
+        "accent-hover": "rgb(var(--color-accent-hover) / <alpha-value>)",
+        "on-accent": "rgb(var(--color-on-accent) / <alpha-value>)",
+        background: "rgb(var(--color-background) / <alpha-value>)",
+        foreground: "rgb(var(--color-foreground) / <alpha-value>)",
+        "muted-foreground": "rgb(var(--color-muted-foreground) / <alpha-value>)",
+        surface: "rgb(var(--color-surface) / <alpha-value>)",
+        "surface-strong": "rgb(var(--color-surface-strong) / <alpha-value>)",
+        border: "rgb(var(--color-border) / <alpha-value>)",
+        ring: "rgb(var(--color-ring) / <alpha-value>)",
+        danger: "rgb(var(--color-danger) / <alpha-value>)",
+        "danger-soft": "rgb(var(--color-danger-soft) / <alpha-value>)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        display: ["var(--font-display)"],
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+        "2xl": "var(--radius-2xl)",
+        "3xl": "var(--radius-3xl)",
+        full: "9999px",
+      },
+      boxShadow: {
+        soft: "var(--shadow-soft)",
+        raised: "var(--shadow-raised)",
+        overlay: "var(--shadow-overlay)",
+      },
+      borderColor: {
+        DEFAULT: "rgb(var(--color-border) / <alpha-value>)",
+      },
+      ringColor: {
+        DEFAULT: "rgb(var(--color-ring) / <alpha-value>)",
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            "--tw-prose-body": "rgb(var(--color-foreground))",
+            "--tw-prose-headings": "rgb(var(--color-foreground))",
+            "--tw-prose-lead": "rgb(var(--color-muted-foreground))",
+            "--tw-prose-links": "rgb(var(--color-primary))",
+            "--tw-prose-bold": "rgb(var(--color-foreground))",
+            "--tw-prose-counters": "rgb(var(--color-muted-foreground))",
+            "--tw-prose-bullets": "rgb(var(--color-muted-foreground))",
+            "--tw-prose-hr": "rgb(var(--color-border))",
+            "--tw-prose-quotes": "rgb(var(--color-foreground))",
+            "--tw-prose-quote-borders": "rgb(var(--color-primary))",
+            "--tw-prose-captions": "rgb(var(--color-muted-foreground))",
+            "--tw-prose-code": "rgb(var(--color-foreground))",
+            "--tw-prose-pre-code": "rgb(var(--color-on-secondary))",
+            "--tw-prose-pre-bg": "rgb(var(--color-secondary))",
+            "--tw-prose-th-borders": "rgb(var(--color-border))",
+            "--tw-prose-td-borders": "rgb(var(--color-border))",
+            "h1, h2, h3, h4, h5, h6": {
+              fontFamily: "var(--font-display)",
+              fontWeight: "600",
+              letterSpacing: "-0.02em",
+            },
+            a: {
+              textDecorationThickness: "1px",
+              textUnderlineOffset: "3px",
+              fontWeight: "500",
+            },
+            blockquote: {
+              fontStyle: "normal",
+            },
+            "figure figcaption": {
+              fontStyle: "normal",
+            },
+            "pre": {
+              border: "1px solid rgb(var(--color-border))",
+              borderRadius: "var(--radius-xl)",
+              backgroundColor: "rgb(var(--color-secondary))",
+              color: "rgb(var(--color-on-secondary))",
+            },
+            code: {
+              backgroundColor: "rgb(var(--color-surface-strong))",
+              borderRadius: "var(--radius-md)",
+              padding: "0.125rem 0.3125rem",
+              fontWeight: "500",
+              "&::before, &::after": {
+                content: "none",
+              },
+            },
+            "pre code": {
+              backgroundColor: "transparent",
+              padding: "0",
+              borderRadius: "0",
+            },
+          },
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};