@ugurdemirel/landcraft 0.1.18 → 0.1.20

package/README.md

@@ -1,14 +1,31 @@
-# @ugurdemirel/landcraft
+# Landcraft
 
-Landing / marketing-focused React component library.
-One consistent design language — paper surfaces, ink text, a single accent — with
-multiple visual options per component.
+![Landcraft — a React marketing component library](https://raw.githubusercontent.com/ugurrdemirel/landcraft/main/docs/preview.png)
+
+A marketing / landing-page React component library — `@ugurdemirel/landcraft` —
+built on Tailwind CSS 4 with token-based theming and automatic WCAG contrast,
+plus a Storybook playground for previewing and customizing every component.
+
+## Structure
+
+```
+landcraft/
+├─ packages/ui/          @ugurdemirel/landcraft — component library
+│  ├─ src/components/    Button, Badge, Card, Section, Navbar, MegaMenu, Hero,
+│  │                     LogoCloud, FeatureGrid, FeatureShowcase, Stats, Pricing,
+│  │                     Testimonials, CTA, FAQ, AccordionShowcase, Footer,
+│  │                     Newsletter, Blog, Prose, Modal, LanguageSwitcher,
+│  │                     Container, Stack
+│  ├─ src/styles/        CSS variables (tokens) + Tailwind entry point
+│  └─ src/styles/theme.css  Tailwind v4 theme (CSS) for consumer projects
+└─ apps/storybook/       Storybook (React + Vite) — preview & customize
+```
 
 ## Install
 
 ```bash
 pnpm add @ugurdemirel/landcraft
-# peers: react >=18, tailwindcss ^4
+# peers: react >=18, react-dom >=18, tailwindcss ^4
 ```
 
 ```tsx
@@ -16,18 +33,17 @@ import { Button, Hero } from "@ugurdemirel/landcraft";
 import "@ugurdemirel/landcraft/styles.css";
 ```
 
-Add the theme to your own Tailwind v4 project by importing the CSS theme file
-(no JS config or preset needed):
+Or reuse the theme in your own Tailwind v4 project by importing the CSS theme
+file — no JS config or preset needed:
 
 ```css
-/* app.css */
+/* app.css — wire it up with @tailwindcss/vite, @tailwindcss/postcss or the CLI */
 @import "tailwindcss";
 @import "@ugurdemirel/landcraft/theme.css";
 ```
 
-Then use Tailwind v4 as usual (`@tailwindcss/vite`, `@tailwindcss/postcss`, or
-the CLI) — the theme registers every color/font/radius/shadow token and the
-typography plugin automatically.
+The theme registers every color/font/radius/shadow token and the typography
+plugin automatically.
 
 > Tailwind v4 auto-detects classes in your own source but skips `node_modules`.
 > If you build the library's components from your own CSS (instead of importing
@@ -43,25 +59,32 @@ Every component accepts an `option` / `variant` prop — same API, different loo
 
 | Component | Options |
 | --- | --- |
+| Button | `primary` · `dark` · `outline` · `ghost` · `link` |
+| Badge | `soft` · `solid` · `outline` · `dot` |
+| Card | `outlined` · `elevated` · `inset` |
 | Navbar | `classic` · `floating` · `inverse` |
-| Hero | `split` · `centered` · `statement` |
+| MegaMenu | `classic` · `floating` · `inverse` |
+| Hero | `split` · `centered` · `statement` · `parallax` |
 | LogoCloud | `quiet` · `marquee` · `strip` |
 | FeatureGrid | `columns` · `bento` · `editorialRows` |
+| FeatureShowcase | `mediaSide`: `left` · `right` |
 | Stats | `editorial` · `hairline` · `cells` · `ticker` |
 | Pricing | `cards` · `bento` · `compact` |
 | Testimonials | `grid` · `carousel` · `marquee` |
 | CTA | `panel` · `surface` · `inverse` |
-| FAQ | `accordion` · `split` · `cards` |
+| FAQ | `accordion` · `split` · `cards` (`allowMultiple`, `defaultOpen`) |
 | Footer | `classic` · `minimal` · `editorial` |
 | Newsletter | `inline` · `card` · `underline` |
 | Blog (BlogSection/BlogCard) | `card` · `row` (`limit` shows the latest N posts) |
+| Modal | `size`: `sm` · `md` · `lg` |
+| LanguageSwitcher | `dropdown` · `modal` |
 
-**Brand mark.** `Navbar` and `Footer` accept a custom logo in place of the
-wordmark: pass any node to `logo` (SVG, `<img>`, component…), or use
+**Brand mark.** `Navbar`, `MegaMenu` and `Footer` accept a custom logo in place
+of the wordmark: pass any node to `logo` (SVG, `<img>`, component…), or use
 `logoSrc`/`logoAlt` for a quick image (`logoClassName` tunes its size, defaults
 to `h-7 w-auto`).
 
-## Theme / Customization
+## Theme & customization
 
 Every design decision lives on CSS custom properties on `:root` and can be
 **overridden from outside** — color, type, radii and shadows. Override any token
@@ -154,22 +177,23 @@ dark-mode variants.
 
 ### Contrast guarantees
 
-1. **Paired tokens.** Every surface color ships with a matching `--color-on-*` value;
-   themes change together.
-2. **Dynamic surfaces.** Gradient CTA panels, statement heroes and `customColor` use
-   the CSS `contrast-color()` function to pick the most readable text color. When a
-   dark palette lightens the primary, text flips dark automatically.
+1. **Paired tokens.** Every surface color ships with a matching `--color-on-*`
+   text color, so readability is preserved as themes change together.
+2. **Dynamic surfaces.** `customColor` props, gradient Hero/CTA panels and
+   highlighted pricing cards use the CSS `contrast-color()` function to pick the
+   most readable text color. Switch to a dark palette and the text flips
+   automatically.
 
 ### Icons
 
 No emojis. The library ships one consistent 24×24 stroke icon set (Lucide-style):
-`ArrowRight`, `Check`, `Zap`, `ShieldCheck`, `Layers`, `Rocket`, `Mail`, … — import
-them from the package.
+`ArrowRight`, `Check`, `Zap`, `ShieldCheck`, `Layers`, `Rocket`, `Mail`, … —
+import them from the package.
 
 ## Layout
 
-`Container` and `Stack` are the single source of the container + gutter rules used
-across Section, Footer, CTA and BlogSection (`mx-auto w-full max-w-* px-5 sm:px-8`):
+`Container` and `Stack` are the single source of the container + gutter rules
+used across Section, Footer, CTA and BlogSection (`mx-auto w-full max-w-* px-5 sm:px-8`):
 
 ```tsx
 import { Container, Stack } from "@ugurdemirel/landcraft";
@@ -185,9 +209,9 @@ import { Container, Stack } from "@ugurdemirel/landcraft";
 
 ## Content
 
-`Prose` wraps `@tailwindcss/typography` and re-skins its colors and type through the
-same tokens (headings use `--font-display`, `<pre>` uses the ink surface, both `prose`
-and `prose-neutral` adapt to the palette):
+`Prose` wraps `@tailwindcss/typography` and re-skins its colors and type through
+the same tokens (headings use `--font-display`, `<pre>` uses the ink surface,
+both `prose` and `prose-neutral` adapt to the palette):
 
 ```bash
 pnpm add @ugurdemirel/landcraft @tailwindcss/typography
@@ -210,6 +234,60 @@ Projects using the theme need `@tailwindcss/typography` (optional peer; the
 
 ## Components
 
-Button, Badge, Card (+Header/Title/Content/Footer), Section (+Header), Navbar, Hero,
-LogoCloud, FeatureGrid/Card, Stats, Pricing, Testimonials, CTA, FAQ, Footer, Newsletter,
-Blog (BlogSection/BlogCard), Prose (+ProseLead), Container, Stack.
+Button, Badge, Card (+Header/Title/Description/Content/Footer), Section (+Header),
+Navbar, MegaMenu, Hero, LogoCloud, FeatureGrid/FeatureCard, FeatureShowcase,
+Stats, Pricing, Testimonials/TestimonialCard, CTA, FAQ, AccordionShowcase,
+Footer, Newsletter, Blog (BlogSection/BlogCard), Modal, LanguageSwitcher,
+Prose (+ProseLead), Container, Stack, Slot, plus the icon set.
+
+## What you can do in Storybook
+
+- **Preview** every component and its stories from the left panel.
+- **Customize** props live via the **Controls** panel (variant, size, customColor, text…).
+- **Re-theme** from the **Palette** toolbar (indigo / forest / crimson / midnight-dark).
+  Every component restyles instantly through `--color-*` tokens — a live demo of
+  "design from the outside".
+- **Audit accessibility** via the a11y panel (AA/AAA contrast results).
+
+## Framework-aware links
+
+Landcraft renders plain `<a>` tags by default so it works anywhere. When you use
+a router (Next.js, Remix, React Router…), pass your framework's `<Link>` so
+navigation stays client-side and server-side correct.
+
+**Single links — `asChild` on `Button`** (the button styles are applied to the
+child element instead of a `<button>`):
+
+```tsx
+import { Button } from "@ugurdemirel/landcraft";
+import Link from "next/link";
+
+<Button asChild>
+  <Link href="/pricing">Get started</Link>
+</Button>
+```
+
+**Link lists — `LinkComponent` prop** on `Navbar`, `MegaMenu`, `Footer`, and
+`BlogSection`/`BlogCard` (defaults to `<a>`):
+
+```tsx
+import { Navbar, Footer } from "@ugurdemirel/landcraft";
+import Link from "next/link";
+
+<Navbar links={links} LinkComponent={Link} />
+<Footer columns={columns} LinkComponent={Link} />
+```
+
+The low-level `Slot` used to implement `asChild` is also exported if you want to
+compose it yourself.
+
+## Commands
+
+```bash
+pnpm install                 # install dependencies
+pnpm build                   # builds @ugurdemirel/landcraft (JS + CSS + types)
+pnpm storybook               # starts Storybook (http://localhost:6006)
+pnpm build:storybook         # produces a static Storybook build (storybook-static/)
+pnpm typecheck               # typechecks all packages
+pnpm --filter @ugurdemirel/landcraft test   # run the component/unit tests
+```

package/dist/cjs/components/Hero/Hero.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("react"),s=require("./variants/Split.cjs"),u=require("./variants/Centered.cjs"),c=require("./variants/Statement.cjs"),o=i.forwardRef(({variant:n="split",...e},t)=>n==="centered"?r.jsx(u.HeroCentered,{ref:t,...e}):n==="statement"?r.jsx(c.HeroStatement,{ref:t,...e}):r.jsx(s.HeroSplit,{ref:t,...e}));o.displayName="Hero";exports.Hero=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react"),a=require("./variants/Split.cjs"),s=require("./variants/Centered.cjs"),u=require("./variants/Statement.cjs"),l=require("./variants/Parallax.cjs"),o=i.forwardRef(({variant:n="split",...e},r)=>n==="centered"?t.jsx(s.HeroCentered,{ref:r,...e}):n==="statement"?t.jsx(u.HeroStatement,{ref:r,...e}):n==="parallax"?t.jsx(l.HeroParallax,{ref:r,...e}):t.jsx(a.HeroSplit,{ref:r,...e}));o.displayName="Hero";exports.Hero=o;
 //# sourceMappingURL=Hero.cjs.map

package/dist/cjs/components/Hero/Hero.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.cjs","sources":["../../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HeroProps } from \"./types\";\nimport { HeroSplit } from \"./variants/Split\";\nimport { HeroCentered } from \"./variants/Centered\";\nimport { HeroStatement } from \"./variants/Statement\";\n\nexport const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = \"split\", ...props }, ref) => {\n  if (variant === \"centered\") return <HeroCentered ref={ref} {...props} />;\n  if (variant === \"statement\") return <HeroStatement ref={ref} {...props} />;\n  return <HeroSplit ref={ref} {...props} />;\n});\nHero.displayName = \"Hero\";"],"names":["Hero","forwardRef","variant","props","ref","HeroCentered","HeroStatement","jsx","HeroSplit"],"mappings":"qPAMaA,EAAOC,EAAAA,WAAmC,CAAC,CAAE,QAAAC,EAAU,QAAS,GAAGC,CAAA,EAASC,IACnFF,IAAY,iBAAoBG,EAAAA,aAAA,CAAa,IAAAD,EAAW,GAAGD,EAAO,EAClED,IAAY,kBAAqBI,EAAAA,cAAA,CAAc,IAAAF,EAAW,GAAGD,EAAO,EACjEI,EAAAA,IAACC,EAAAA,UAAA,CAAU,IAAAJ,EAAW,GAAGD,CAAA,CAAO,CACxC,EACDH,EAAK,YAAc"}
+{"version":3,"file":"Hero.cjs","sources":["../../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HeroProps } from \"./types\";\nimport { HeroSplit } from \"./variants/Split\";\nimport { HeroCentered } from \"./variants/Centered\";\nimport { HeroStatement } from \"./variants/Statement\";\nimport { HeroParallax } from \"./variants/Parallax\";\n\nexport const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = \"split\", ...props }, ref) => {\n  if (variant === \"centered\") return <HeroCentered ref={ref} {...props} />;\n  if (variant === \"statement\") return <HeroStatement ref={ref} {...props} />;\n  if (variant === \"parallax\") return <HeroParallax ref={ref} {...props} />;\n  return <HeroSplit ref={ref} {...props} />;\n});\nHero.displayName = \"Hero\";"],"names":["Hero","forwardRef","variant","props","ref","HeroCentered","HeroStatement","HeroParallax","jsx","HeroSplit"],"mappings":"0RAOaA,EAAOC,EAAAA,WAAmC,CAAC,CAAE,QAAAC,EAAU,QAAS,GAAGC,CAAA,EAASC,IACnFF,IAAY,iBAAoBG,EAAAA,aAAA,CAAa,IAAAD,EAAW,GAAGD,EAAO,EAClED,IAAY,kBAAqBI,EAAAA,cAAA,CAAc,IAAAF,EAAW,GAAGD,EAAO,EACpED,IAAY,iBAAoBK,EAAAA,aAAA,CAAa,IAAAH,EAAW,GAAGD,EAAO,EAC/DK,EAAAA,IAACC,EAAAA,UAAA,CAAU,IAAAL,EAAW,GAAGD,CAAA,CAAO,CACxC,EACDH,EAAK,YAAc"}

package/dist/cjs/components/Hero/variants/Parallax.cjs

@@ -0,0 +1,3 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),i=require("../../../utils/cn.cjs"),u=require("../parts.cjs"),D=18,F=5,P=.7;function C(r,d,l){d.current=r,typeof l=="function"?l(r):l&&(l.current=r)}function _(r){return{x:(r.x-50)*4,y:(r.y-50)*4}}const N=a.forwardRef(({className:r,eyebrow:d,title:l,description:x,primaryAction:f,secondaryAction:m,meta:h,media:p,logos:w=[],id:M,...T},E)=>{const y=a.useRef(null),[b,j]=a.useState({x:0,y:0}),[R,$]=a.useState(!1),[o,v]=a.useState(!1);a.useEffect(()=>{var s;if(typeof window.matchMedia!="function")return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),n=()=>v(e.matches);return v(e.matches),(s=e.addEventListener)==null||s.call(e,"change",n),()=>{var c;return(c=e.removeEventListener)==null?void 0:c.call(e,"change",n)}},[]),a.useEffect(()=>{if(o)return;const e=requestAnimationFrame(()=>$(!0));return()=>cancelAnimationFrame(e)},[o]);const L=e=>{if(o)return;const n=y.current;if(!n)return;const s=n.getBoundingClientRect();j({x:((e.clientX-s.left)/s.width-.5)*2,y:((e.clientY-s.top)/s.height-.5)*2})},S=()=>j({x:0,y:0}),g=R||o;return t.jsxs("section",{ref:e=>C(e,y,E),id:M,onMouseMove:L,onMouseLeave:S,className:i.cn("relative w-full overflow-hidden border-b border-border bg-background",r),...T,children:[w.map((e,n)=>{const s=e.depth??D,c=_(e),A=`translate(calc(-50% + ${c.x}px), calc(-50% + ${c.y}px)) scale(0.6)`,H="translate(-50%, -50%)",O=o?"translate(0px, 0px)":`translate(${b.x*s}px, ${b.y*s}px)`;return t.jsx("div",{"aria-hidden":!0,"data-logo":e.label,className:"pointer-events-none absolute z-10 hidden transition-[transform,opacity] duration-700 ease-out md:block",style:{left:`${e.x}%`,top:`${e.y}%`,transform:g?H:A,opacity:g?1:0,transitionDelay:`${n*90}ms`},children:t.jsx("div",{className:"transition-transform duration-200 ease-out",style:{transform:O},children:t.jsx("div",{className:"flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-surface shadow-raised",style:o?void 0:{animation:`hero-float ${F}s ease-in-out infinite`,animationDelay:`-${n*P}s`},children:e.icon})})},e.label)}),t.jsxs("div",{className:i.cn(u.heroContainer,"relative z-20 pt-24 pb-20 text-center sm:pt-32 sm:pb-24"),children:[t.jsx(u.HeroEyebrow,{eyebrow:d}),t.jsx("h1",{className:i.cn(u.heroTitleBase,"mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl"),children:l}),x?t.jsx("p",{className:"mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg",children:x}):null,f||m?t.jsx("div",{className:"mt-10 justify-center",children:t.jsx(u.HeroActions,{primaryAction:f,secondaryAction:m})}):null,h?t.jsx("ul",{className:"mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3",children:h.map((e,n)=>t.jsxs("li",{className:i.cn("flex items-center gap-2 text-sm text-muted-foreground",n>0&&"sm:border-l sm:border-border sm:pl-9"),children:[e.icon?t.jsx("span",{className:"text-foreground/35",children:e.icon}):null,e.label]},e.label))}):null,p?t.jsx("div",{className:"mt-16 w-full",children:p}):null]})]})});N.displayName="HeroParallax";exports.HeroParallax=N;
+//# sourceMappingURL=Parallax.cjs.map

package/dist/cjs/components/Hero/variants/Parallax.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.cjs","sources":["../../../../../src/components/Hero/variants/Parallax.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type MouseEvent,\n  type MutableRefObject,\n} from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from \"../parts\";\nimport type { HeroLogo, HeroProps } from \"../types\";\n\nconst DEFAULT_DEPTH = 18;\nconst FLOAT_DURATION = 5; // seconds per breathing cycle\nconst FLOAT_STAGGER = 0.7; // seconds of desync between consecutive tiles\n\nfunction setSectionRef(\n  node: HTMLElement | null,\n  localRef: MutableRefObject<HTMLElement | null>,\n  forwarded: ForwardedRef<HTMLElement>,\n) {\n  localRef.current = node;\n  if (typeof forwarded === \"function\") forwarded(node);\n  else if (forwarded) (forwarded as MutableRefObject<HTMLElement | null>).current = node;\n}\n\nfunction tileEntryOffset(logo: HeroLogo) {\n  // Push the tile further out from the centre along the line it already sits on,\n  // so it appears to fly in from off-screen.\n  return { x: (logo.x - 50) * 4, y: (logo.y - 50) * 4 };\n}\n\n/** Parallax — centred copy with floating logo tiles that react to the mouse. */\nexport const HeroParallax = forwardRef<HTMLElement, HeroProps>(\n  (\n    { className, eyebrow, title, description, primaryAction, secondaryAction, meta, media, logos = [], id, ...props },\n    ref,\n  ) => {\n    const sectionRef = useRef<HTMLElement | null>(null);\n    const [offset, setOffset] = useState({ x: 0, y: 0 });\n    const [entered, setEntered] = useState(false);\n    const [reduceMotion, setReduceMotion] = useState(false);\n\n    useEffect(() => {\n      if (typeof window.matchMedia !== \"function\") return;\n      const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n      const onChange = () => setReduceMotion(mq.matches);\n      setReduceMotion(mq.matches);\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, []);\n\n    useEffect(() => {\n      if (reduceMotion) return;\n      const raf = requestAnimationFrame(() => setEntered(true));\n      return () => cancelAnimationFrame(raf);\n    }, [reduceMotion]);\n\n    const handleMouseMove = (e: MouseEvent<HTMLElement>) => {\n      if (reduceMotion) return;\n      const el = sectionRef.current;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      setOffset({\n        x: ((e.clientX - rect.left) / rect.width - 0.5) * 2,\n        y: ((e.clientY - rect.top) / rect.height - 0.5) * 2,\n      });\n    };\n\n    const handleMouseLeave = () => setOffset({ x: 0, y: 0 });\n\n    const showResting = entered || reduceMotion;\n\n    return (\n      <section\n        ref={(node) => setSectionRef(node, sectionRef, ref)}\n        id={id}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        className={cn(\"relative w-full overflow-hidden border-b border-border bg-background\", className)}\n        {...props}\n      >\n        {logos.map((logo, i) => {\n          const depth = logo.depth ?? DEFAULT_DEPTH;\n          const entry = tileEntryOffset(logo);\n          const entryTransform = `translate(calc(-50% + ${entry.x}px), calc(-50% + ${entry.y}px)) scale(0.6)`;\n          const restingTransform = \"translate(-50%, -50%)\";\n          const parallaxTransform = reduceMotion\n            ? \"translate(0px, 0px)\"\n            : `translate(${offset.x * depth}px, ${offset.y * depth}px)`;\n\n          return (\n            <div\n              key={logo.label}\n              aria-hidden\n              data-logo={logo.label}\n              className=\"pointer-events-none absolute z-10 hidden transition-[transform,opacity] duration-700 ease-out md:block\"\n              style={{\n                left: `${logo.x}%`,\n                top: `${logo.y}%`,\n                transform: showResting ? restingTransform : entryTransform,\n                opacity: showResting ? 1 : 0,\n                transitionDelay: `${i * 90}ms`,\n              }}\n            >\n              <div\n                className=\"transition-transform duration-200 ease-out\"\n                style={{ transform: parallaxTransform }}\n              >\n                <div\n                  className=\"flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-surface shadow-raised\"\n                  style={\n                    reduceMotion\n                      ? undefined\n                      : {\n                          animation: `hero-float ${FLOAT_DURATION}s ease-in-out infinite`,\n                          animationDelay: `-${i * FLOAT_STAGGER}s`,\n                        }\n                  }\n                >\n                  {logo.icon}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n\n        <div className={cn(heroContainer, \"relative z-20 pt-24 pb-20 text-center sm:pt-32 sm:pb-24\")}>\n          <HeroEyebrow eyebrow={eyebrow} />\n          <h1 className={cn(heroTitleBase, \"mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl\")}>\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg\">\n              {description}\n            </p>\n          ) : null}\n          {primaryAction || secondaryAction ? (\n            <div className=\"mt-10 justify-center\">\n              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />\n            </div>\n          ) : null}\n          {meta ? (\n            <ul className=\"mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3\">\n              {meta.map((m, i) => (\n                <li\n                  key={m.label}\n                  className={cn(\n                    \"flex items-center gap-2 text-sm text-muted-foreground\",\n                    i > 0 && \"sm:border-l sm:border-border sm:pl-9\",\n                  )}\n                >\n                  {m.icon ? <span className=\"text-foreground/35\">{m.icon}</span> : null}\n                  {m.label}\n                </li>\n              ))}\n            </ul>\n          ) : null}\n          {media ? <div className=\"mt-16 w-full\">{media}</div> : null}\n        </div>\n      </section>\n    );\n  },\n);\nHeroParallax.displayName = \"HeroParallax\";\n"],"names":["DEFAULT_DEPTH","FLOAT_DURATION","FLOAT_STAGGER","setSectionRef","node","localRef","forwarded","tileEntryOffset","logo","HeroParallax","forwardRef","className","eyebrow","title","description","primaryAction","secondaryAction","meta","media","logos","id","props","ref","sectionRef","useRef","offset","setOffset","useState","entered","setEntered","reduceMotion","setReduceMotion","useEffect","mq","onChange","_a","raf","handleMouseMove","el","rect","handleMouseLeave","showResting","jsxs","cn","i","depth","entry","entryTransform","restingTransform","parallaxTransform","jsx","heroContainer","HeroEyebrow","heroTitleBase","HeroActions","m"],"mappings":"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"}

package/dist/es/components/Hero/Hero.js

@@ -2,10 +2,11 @@ import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { HeroSplit as i } from "./variants/Split.js";
 import { HeroCentered as f } from "./variants/Centered.js";
-import { HeroStatement as n } from "./variants/Statement.js";
-const p = m(({ variant: o = "split", ...r }, e) => o === "centered" ? /* @__PURE__ */ t(f, { ref: e, ...r }) : o === "statement" ? /* @__PURE__ */ t(n, { ref: e, ...r }) : /* @__PURE__ */ t(i, { ref: e, ...r }));
-p.displayName = "Hero";
+import { HeroStatement as a } from "./variants/Statement.js";
+import { HeroParallax as l } from "./variants/Parallax.js";
+const n = m(({ variant: o = "split", ...r }, e) => o === "centered" ? /* @__PURE__ */ t(f, { ref: e, ...r }) : o === "statement" ? /* @__PURE__ */ t(a, { ref: e, ...r }) : o === "parallax" ? /* @__PURE__ */ t(l, { ref: e, ...r }) : /* @__PURE__ */ t(i, { ref: e, ...r }));
+n.displayName = "Hero";
 export {
-  p as Hero
+  n as Hero
 };
 //# sourceMappingURL=Hero.js.map

package/dist/es/components/Hero/Hero.js.map

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","sources":["../../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HeroProps } from \"./types\";\nimport { HeroSplit } from \"./variants/Split\";\nimport { HeroCentered } from \"./variants/Centered\";\nimport { HeroStatement } from \"./variants/Statement\";\n\nexport const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = \"split\", ...props }, ref) => {\n  if (variant === \"centered\") return <HeroCentered ref={ref} {...props} />;\n  if (variant === \"statement\") return <HeroStatement ref={ref} {...props} />;\n  return <HeroSplit ref={ref} {...props} />;\n});\nHero.displayName = \"Hero\";"],"names":["Hero","forwardRef","variant","props","ref","HeroCentered","HeroStatement","jsx","HeroSplit"],"mappings":";;;;;AAMO,MAAMA,IAAOC,EAAmC,CAAC,EAAE,SAAAC,IAAU,SAAS,GAAGC,EAAA,GAASC,MACnFF,MAAY,+BAAoBG,GAAA,EAAa,KAAAD,GAAW,GAAGD,GAAO,IAClED,MAAY,gCAAqBI,GAAA,EAAc,KAAAF,GAAW,GAAGD,GAAO,IACjE,gBAAAI,EAACC,GAAA,EAAU,KAAAJ,GAAW,GAAGD,EAAA,CAAO,CACxC;AACDH,EAAK,cAAc;"}
+{"version":3,"file":"Hero.js","sources":["../../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HeroProps } from \"./types\";\nimport { HeroSplit } from \"./variants/Split\";\nimport { HeroCentered } from \"./variants/Centered\";\nimport { HeroStatement } from \"./variants/Statement\";\nimport { HeroParallax } from \"./variants/Parallax\";\n\nexport const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = \"split\", ...props }, ref) => {\n  if (variant === \"centered\") return <HeroCentered ref={ref} {...props} />;\n  if (variant === \"statement\") return <HeroStatement ref={ref} {...props} />;\n  if (variant === \"parallax\") return <HeroParallax ref={ref} {...props} />;\n  return <HeroSplit ref={ref} {...props} />;\n});\nHero.displayName = \"Hero\";"],"names":["Hero","forwardRef","variant","props","ref","HeroCentered","HeroStatement","HeroParallax","jsx","HeroSplit"],"mappings":";;;;;;AAOO,MAAMA,IAAOC,EAAmC,CAAC,EAAE,SAAAC,IAAU,SAAS,GAAGC,EAAA,GAASC,MACnFF,MAAY,+BAAoBG,GAAA,EAAa,KAAAD,GAAW,GAAGD,GAAO,IAClED,MAAY,gCAAqBI,GAAA,EAAc,KAAAF,GAAW,GAAGD,GAAO,IACpED,MAAY,+BAAoBK,GAAA,EAAa,KAAAH,GAAW,GAAGD,GAAO,IAC/D,gBAAAK,EAACC,GAAA,EAAU,KAAAL,GAAW,GAAGD,EAAA,CAAO,CACxC;AACDH,EAAK,cAAc;"}

package/dist/es/components/Hero/variants/Parallax.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { forwardRef as O, useRef as C, useState as u, useEffect as w } from "react";
+import { cn as i } from "../../../utils/cn.js";
+import { HeroEyebrow as P, heroTitleBase as S, HeroActions as _, heroContainer as k } from "../parts.js";
+const z = 18, B = 5, G = 0.7;
+function U(s, c, a) {
+  c.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
+}
+function I(s) {
+  return { x: (s.x - 50) * 4, y: (s.y - 50) * 4 };
+}
+const X = O(
+  ({ className: s, eyebrow: c, title: a, description: f, primaryAction: m, secondaryAction: x, meta: h, media: p, logos: M = [], id: T, ...E }, R) => {
+    const y = C(null), [b, v] = u({ x: 0, y: 0 }), [$, L] = u(!1), [o, g] = u(!1);
+    w(() => {
+      var r;
+      if (typeof window.matchMedia != "function") return;
+      const e = window.matchMedia("(prefers-reduced-motion: reduce)"), n = () => g(e.matches);
+      return g(e.matches), (r = e.addEventListener) == null || r.call(e, "change", n), () => {
+        var l;
+        return (l = e.removeEventListener) == null ? void 0 : l.call(e, "change", n);
+      };
+    }, []), w(() => {
+      if (o) return;
+      const e = requestAnimationFrame(() => L(!0));
+      return () => cancelAnimationFrame(e);
+    }, [o]);
+    const A = (e) => {
+      if (o) return;
+      const n = y.current;
+      if (!n) return;
+      const r = n.getBoundingClientRect();
+      v({
+        x: ((e.clientX - r.left) / r.width - 0.5) * 2,
+        y: ((e.clientY - r.top) / r.height - 0.5) * 2
+      });
+    }, j = () => v({ x: 0, y: 0 }), N = $ || o;
+    return /* @__PURE__ */ d(
+      "section",
+      {
+        ref: (e) => U(e, y, R),
+        id: T,
+        onMouseMove: A,
+        onMouseLeave: j,
+        className: i("relative w-full overflow-hidden border-b border-border bg-background", s),
+        ...E,
+        children: [
+          M.map((e, n) => {
+            const r = e.depth ?? z, l = I(e), D = `translate(calc(-50% + ${l.x}px), calc(-50% + ${l.y}px)) scale(0.6)`, F = "translate(-50%, -50%)", H = o ? "translate(0px, 0px)" : `translate(${b.x * r}px, ${b.y * r}px)`;
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                "aria-hidden": !0,
+                "data-logo": e.label,
+                className: "pointer-events-none absolute z-10 hidden transition-[transform,opacity] duration-700 ease-out md:block",
+                style: {
+                  left: `${e.x}%`,
+                  top: `${e.y}%`,
+                  transform: N ? F : D,
+                  opacity: N ? 1 : 0,
+                  transitionDelay: `${n * 90}ms`
+                },
+                children: /* @__PURE__ */ t(
+                  "div",
+                  {
+                    className: "transition-transform duration-200 ease-out",
+                    style: { transform: H },
+                    children: /* @__PURE__ */ t(
+                      "div",
+                      {
+                        className: "flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-surface shadow-raised",
+                        style: o ? void 0 : {
+                          animation: `hero-float ${B}s ease-in-out infinite`,
+                          animationDelay: `-${n * G}s`
+                        },
+                        children: e.icon
+                      }
+                    )
+                  }
+                )
+              },
+              e.label
+            );
+          }),
+          /* @__PURE__ */ d("div", { className: i(k, "relative z-20 pt-24 pb-20 text-center sm:pt-32 sm:pb-24"), children: [
+            /* @__PURE__ */ t(P, { eyebrow: c }),
+            /* @__PURE__ */ t("h1", { className: i(S, "mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl"), children: a }),
+            f ? /* @__PURE__ */ t("p", { className: "mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg", children: f }) : null,
+            m || x ? /* @__PURE__ */ t("div", { className: "mt-10 justify-center", children: /* @__PURE__ */ t(_, { primaryAction: m, secondaryAction: x }) }) : null,
+            h ? /* @__PURE__ */ t("ul", { className: "mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3", children: h.map((e, n) => /* @__PURE__ */ d(
+              "li",
+              {
+                className: i(
+                  "flex items-center gap-2 text-sm text-muted-foreground",
+                  n > 0 && "sm:border-l sm:border-border sm:pl-9"
+                ),
+                children: [
+                  e.icon ? /* @__PURE__ */ t("span", { className: "text-foreground/35", children: e.icon }) : null,
+                  e.label
+                ]
+              },
+              e.label
+            )) }) : null,
+            p ? /* @__PURE__ */ t("div", { className: "mt-16 w-full", children: p }) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+X.displayName = "HeroParallax";
+export {
+  X as HeroParallax
+};
+//# sourceMappingURL=Parallax.js.map

package/dist/es/components/Hero/variants/Parallax.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Parallax.js","sources":["../../../../../src/components/Hero/variants/Parallax.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type MouseEvent,\n  type MutableRefObject,\n} from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from \"../parts\";\nimport type { HeroLogo, HeroProps } from \"../types\";\n\nconst DEFAULT_DEPTH = 18;\nconst FLOAT_DURATION = 5; // seconds per breathing cycle\nconst FLOAT_STAGGER = 0.7; // seconds of desync between consecutive tiles\n\nfunction setSectionRef(\n  node: HTMLElement | null,\n  localRef: MutableRefObject<HTMLElement | null>,\n  forwarded: ForwardedRef<HTMLElement>,\n) {\n  localRef.current = node;\n  if (typeof forwarded === \"function\") forwarded(node);\n  else if (forwarded) (forwarded as MutableRefObject<HTMLElement | null>).current = node;\n}\n\nfunction tileEntryOffset(logo: HeroLogo) {\n  // Push the tile further out from the centre along the line it already sits on,\n  // so it appears to fly in from off-screen.\n  return { x: (logo.x - 50) * 4, y: (logo.y - 50) * 4 };\n}\n\n/** Parallax — centred copy with floating logo tiles that react to the mouse. */\nexport const HeroParallax = forwardRef<HTMLElement, HeroProps>(\n  (\n    { className, eyebrow, title, description, primaryAction, secondaryAction, meta, media, logos = [], id, ...props },\n    ref,\n  ) => {\n    const sectionRef = useRef<HTMLElement | null>(null);\n    const [offset, setOffset] = useState({ x: 0, y: 0 });\n    const [entered, setEntered] = useState(false);\n    const [reduceMotion, setReduceMotion] = useState(false);\n\n    useEffect(() => {\n      if (typeof window.matchMedia !== \"function\") return;\n      const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n      const onChange = () => setReduceMotion(mq.matches);\n      setReduceMotion(mq.matches);\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, []);\n\n    useEffect(() => {\n      if (reduceMotion) return;\n      const raf = requestAnimationFrame(() => setEntered(true));\n      return () => cancelAnimationFrame(raf);\n    }, [reduceMotion]);\n\n    const handleMouseMove = (e: MouseEvent<HTMLElement>) => {\n      if (reduceMotion) return;\n      const el = sectionRef.current;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      setOffset({\n        x: ((e.clientX - rect.left) / rect.width - 0.5) * 2,\n        y: ((e.clientY - rect.top) / rect.height - 0.5) * 2,\n      });\n    };\n\n    const handleMouseLeave = () => setOffset({ x: 0, y: 0 });\n\n    const showResting = entered || reduceMotion;\n\n    return (\n      <section\n        ref={(node) => setSectionRef(node, sectionRef, ref)}\n        id={id}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        className={cn(\"relative w-full overflow-hidden border-b border-border bg-background\", className)}\n        {...props}\n      >\n        {logos.map((logo, i) => {\n          const depth = logo.depth ?? DEFAULT_DEPTH;\n          const entry = tileEntryOffset(logo);\n          const entryTransform = `translate(calc(-50% + ${entry.x}px), calc(-50% + ${entry.y}px)) scale(0.6)`;\n          const restingTransform = \"translate(-50%, -50%)\";\n          const parallaxTransform = reduceMotion\n            ? \"translate(0px, 0px)\"\n            : `translate(${offset.x * depth}px, ${offset.y * depth}px)`;\n\n          return (\n            <div\n              key={logo.label}\n              aria-hidden\n              data-logo={logo.label}\n              className=\"pointer-events-none absolute z-10 hidden transition-[transform,opacity] duration-700 ease-out md:block\"\n              style={{\n                left: `${logo.x}%`,\n                top: `${logo.y}%`,\n                transform: showResting ? restingTransform : entryTransform,\n                opacity: showResting ? 1 : 0,\n                transitionDelay: `${i * 90}ms`,\n              }}\n            >\n              <div\n                className=\"transition-transform duration-200 ease-out\"\n                style={{ transform: parallaxTransform }}\n              >\n                <div\n                  className=\"flex h-16 w-16 items-center justify-center rounded-2xl border border-border bg-surface shadow-raised\"\n                  style={\n                    reduceMotion\n                      ? undefined\n                      : {\n                          animation: `hero-float ${FLOAT_DURATION}s ease-in-out infinite`,\n                          animationDelay: `-${i * FLOAT_STAGGER}s`,\n                        }\n                  }\n                >\n                  {logo.icon}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n\n        <div className={cn(heroContainer, \"relative z-20 pt-24 pb-20 text-center sm:pt-32 sm:pb-24\")}>\n          <HeroEyebrow eyebrow={eyebrow} />\n          <h1 className={cn(heroTitleBase, \"mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl\")}>\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg\">\n              {description}\n            </p>\n          ) : null}\n          {primaryAction || secondaryAction ? (\n            <div className=\"mt-10 justify-center\">\n              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />\n            </div>\n          ) : null}\n          {meta ? (\n            <ul className=\"mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3\">\n              {meta.map((m, i) => (\n                <li\n                  key={m.label}\n                  className={cn(\n                    \"flex items-center gap-2 text-sm text-muted-foreground\",\n                    i > 0 && \"sm:border-l sm:border-border sm:pl-9\",\n                  )}\n                >\n                  {m.icon ? <span className=\"text-foreground/35\">{m.icon}</span> : null}\n                  {m.label}\n                </li>\n              ))}\n            </ul>\n          ) : null}\n          {media ? <div className=\"mt-16 w-full\">{media}</div> : null}\n        </div>\n      </section>\n    );\n  },\n);\nHeroParallax.displayName = \"HeroParallax\";\n"],"names":["DEFAULT_DEPTH","FLOAT_DURATION","FLOAT_STAGGER","setSectionRef","node","localRef","forwarded","tileEntryOffset","logo","HeroParallax","forwardRef","className","eyebrow","title","description","primaryAction","secondaryAction","meta","media","logos","id","props","ref","sectionRef","useRef","offset","setOffset","useState","entered","setEntered","reduceMotion","setReduceMotion","useEffect","mq","onChange","_a","raf","handleMouseMove","el","rect","handleMouseLeave","showResting","jsxs","cn","i","depth","entry","entryTransform","restingTransform","parallaxTransform","jsx","heroContainer","HeroEyebrow","heroTitleBase","HeroActions","m"],"mappings":"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"}

package/dist/index.d.ts

@@ -328,6 +328,22 @@ export declare const Globe: (props: IconProps) => JSX_2.Element;
 
 export declare const Hero: ForwardRefExoticComponent<HeroProps & RefAttributes<HTMLElement>>;
 
+/** A floating logo tile for the `parallax` hero variant. */
+export declare interface HeroLogo {
+    /** Accessible name for the tile (used for the label/aria). */
+    label: string;
+    /** Logo/icon node rendered inside the tile. */
+    icon: ReactNode;
+    /** Horizontal position as a percentage (0–100) of the hero width. */
+    x: number;
+    /** Vertical position as a percentage (0–100) of the hero height. */
+    y: number;
+    /** Parallax travel in px per unit of mouse offset. Higher moves more. */
+    depth?: number;
+    /** Optional icon accent color. */
+    accent?: string;
+}
+
 export declare interface HeroMeta {
     label: string;
     icon?: ReactNode;
@@ -343,9 +359,11 @@ export declare interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "ti
     media?: ReactNode;
     /** Small trust/status row shown under the copy or CTAs. */
     meta?: HeroMeta[];
+    /** Floating logo tiles with a mouse parallax effect (`parallax` variant). */
+    logos?: HeroLogo[];
 }
 
-declare type HeroVariant = "split" | "centered" | "statement";
+declare type HeroVariant = "split" | "centered" | "statement" | "parallax";
 
 /**
  * Minimal 1.5px stroke icon set (Lucide/Heroicons inspired).

package/dist/styles.css

@@ -63,7 +63,8 @@
     --radius-lg: 0.875rem;
     --radius-xl: 1.125rem;
     --radius-2xl: 1.5rem;
-    --radius-3xl: 2rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --blur-md: 12px;
     --blur-2xl: 40px;
     --default-transition-duration: 150ms;
@@ -90,9 +91,6 @@
     --color-danger: rgb(var(--color-danger));
     --color-danger-soft: rgb(var(--color-danger-soft));
     --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-    --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);
     --animate-marquee: marquee 38s linear infinite;
   }
 }
@@ -319,6 +317,12 @@
   .left-7 {
     left: calc(var(--spacing) * 7);
   }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -1797,6 +1801,9 @@
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-28 {
     width: calc(var(--spacing) * 28);
   }
@@ -2227,12 +2234,6 @@
       background-color: color-mix(in oklab, rgb(var(--color-primary-soft)) 60%, transparent);
     }
   }
-  .bg-primary\/50 {
-    background-color: color-mix(in srgb, rgb(rgb(var(--color-primary))) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, rgb(var(--color-primary)) 50%, transparent);
-    }
-  }
   .bg-secondary {
     background-color: rgb(var(--color-secondary));
   }
@@ -2878,6 +2879,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[transform\,opacity\] {
+    transition-property: transform,opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2905,6 +2911,18 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-700 {
+    --tw-duration: 700ms;
+    transition-duration: 700ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .prose-neutral {
     --tw-prose-body: oklch(37.1% 0 none);
     --tw-prose-headings: oklch(20.5% 0 none);
@@ -3317,6 +3335,9 @@
     }
   }
   @media (width >= 48rem) {
+    .md\:block {
+      display: block;
+    }
     .md\:flex {
       display: flex;
     }
@@ -3529,6 +3550,14 @@
     transform: translateX(-50%);
   }
 }
+@keyframes hero-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-7px);
+  }
+}
 .modal-anim {
   transition: opacity 150ms ease, transform 150ms ease, overlay 150ms ease allow-discrete, display 150ms ease allow-discrete;
 }
@@ -3817,6 +3846,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -3877,6 +3910,7 @@
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
     }
   }
 }

package/dist/theme.css

@@ -199,6 +199,17 @@
   }
 }
 
+/* Gentle vertical "breathing" drift for floating hero logo tiles. */
+@keyframes hero-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-7px);
+  }
+}
+
 /* ── Popover-based Modal (dialog) ────────────────────────── */
 
 .modal-anim {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "publishConfig": {
     "access": "public"
   },
@@ -38,6 +38,7 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "clean": "rimraf dist",
+    "prepack": "cp ../../README.md ./README.md",
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {