@ugurdemirel/landcraft 0.1.20 → 0.1.21

package/dist/es/index.js

@@ -1,51 +1,53 @@
 import { Button as e } from "./components/Button.js";
 import { Slot as a } from "./components/Slot.js";
-import { Badge as m } from "./components/Badge.js";
-import { Card as f, CardContent as n, CardDescription as i, CardFooter as l, CardHeader as C, CardTitle as d } from "./components/Card.js";
-import { Section as s, SectionHeader as S } from "./components/Section.js";
+import { Badge as p } from "./components/Badge.js";
+import { Card as f, CardContent as n, CardDescription as i, CardFooter as C, CardHeader as l, CardTitle as d } from "./components/Card.js";
+import { Section as s, SectionHeader as g } from "./components/Section.js";
 import { Modal as h } from "./components/Modal.js";
-import { Prose as w, ProseLead as k } from "./components/Prose.js";
+import { Prose as w, ProseLead as A } from "./components/Prose.js";
 import { Container as F, Stack as L } from "./components/Container.js";
-import { cn as P } from "./utils/cn.js";
-import { iso2ToFlagEmoji as D } from "./utils/iso2Flag.js";
-import { ArrowDown as v, ArrowRight as R, ArrowUp as b, ArrowUpRight as G, BarChart as H, Box as U, Check as y, ChevronDown as E, ChevronLeft as N, ChevronRight as Q, Clock as j, Code as X, Cpu as Z, Database as q, DollarSign as z, ExternalLink as I, Gauge as J, Globe as K, Layers as O, Lock as V, Mail as W, Menu as Y, Palette as _, Play as $, Plus as oo, Quote as ro, Rocket as eo, Send as to, ShieldCheck as ao, Sliders as po, Smartphone as mo, Star as xo, Terminal as fo, Users as no, X as io, Zap as lo } from "./icons.js";
-import { AccordionShowcase as co } from "./components/AccordionShowcase/AccordionShowcase.js";
-import { BlogCard as So } from "./components/Blog/BlogCard.js";
-import { BlogSection as ho } from "./components/Blog/BlogSection.js";
-import { CTA as wo } from "./components/CTA/CTA.js";
-import { FAQ as Ao } from "./components/FAQ/FAQ.js";
-import { FeatureCard as Lo } from "./components/Features/FeatureCard.js";
-import { FeatureGrid as Po } from "./components/Features/FeatureGrid.js";
-import { FeatureShowcase as Do } from "./components/FeatureShowcase/FeatureShowcase.js";
-import { Footer as vo } from "./components/Footer/Footer.js";
-import { Hero as bo } from "./components/Hero/Hero.js";
-import { LanguageSwitcher as Ho } from "./components/LanguageSwitcher/LanguageSwitcher.js";
-import { LogoCloud as yo } from "./components/LogoCloud/LogoCloud.js";
-import { MegaMenu as No } from "./components/MegaMenu/MegaMenu.js";
-import { Navbar as jo } from "./components/Navbar/Navbar.js";
-import { Newsletter as Zo } from "./components/Newsletter/Newsletter.js";
-import { Pricing as zo } from "./components/Pricing/Pricing.js";
-import { Stats as Jo } from "./components/Stats/Stats.js";
-import { TestimonialCard as Oo } from "./components/Testimonials/TestimonialCard.js";
-import { Testimonials as Wo } from "./components/Testimonials/Testimonials.js";
+import { cn as B } from "./utils/cn.js";
+import { iso2ToFlagEmoji as T } from "./utils/iso2Flag.js";
+import { ArrowDown as R, ArrowRight as v, ArrowUp as b, ArrowUpRight as G, BarChart as H, Box as U, Check as y, ChevronDown as E, ChevronLeft as N, ChevronRight as Q, Clock as j, Code as X, Cpu as Z, Database as q, DollarSign as z, ExternalLink as I, Gauge as J, Globe as K, Layers as O, Lock as V, Mail as W, Menu as Y, Palette as _, Pause as $, Play as oo, Plus as ro, Quote as eo, Rocket as to, RotateCcw as ao, Send as mo, ShieldCheck as po, Sliders as xo, Smartphone as fo, Star as no, Terminal as io, Users as Co, X as lo, Zap as co } from "./icons.js";
+import { AccordionShowcase as go } from "./components/AccordionShowcase/AccordionShowcase.js";
+import { AgentDemo as ho } from "./components/AgentDemo/AgentDemo.js";
+import { BlogCard as wo } from "./components/Blog/BlogCard.js";
+import { BlogSection as ko } from "./components/Blog/BlogSection.js";
+import { CTA as Lo } from "./components/CTA/CTA.js";
+import { FAQ as Bo } from "./components/FAQ/FAQ.js";
+import { FeatureCard as To } from "./components/Features/FeatureCard.js";
+import { FeatureGrid as Ro } from "./components/Features/FeatureGrid.js";
+import { FeatureShowcase as bo } from "./components/FeatureShowcase/FeatureShowcase.js";
+import { Footer as Ho } from "./components/Footer/Footer.js";
+import { Hero as yo } from "./components/Hero/Hero.js";
+import { LanguageSwitcher as No } from "./components/LanguageSwitcher/LanguageSwitcher.js";
+import { LogoCloud as jo } from "./components/LogoCloud/LogoCloud.js";
+import { MegaMenu as Zo } from "./components/MegaMenu/MegaMenu.js";
+import { Navbar as zo } from "./components/Navbar/Navbar.js";
+import { Newsletter as Jo } from "./components/Newsletter/Newsletter.js";
+import { Pricing as Oo } from "./components/Pricing/Pricing.js";
+import { Stats as Wo } from "./components/Stats/Stats.js";
+import { TestimonialCard as _o } from "./components/Testimonials/TestimonialCard.js";
+import { Testimonials as or } from "./components/Testimonials/Testimonials.js";
 export {
-  co as AccordionShowcase,
-  v as ArrowDown,
-  R as ArrowRight,
+  go as AccordionShowcase,
+  ho as AgentDemo,
+  R as ArrowDown,
+  v as ArrowRight,
   b as ArrowUp,
   G as ArrowUpRight,
-  m as Badge,
+  p as Badge,
   H as BarChart,
-  So as BlogCard,
-  ho as BlogSection,
+  wo as BlogCard,
+  ko as BlogSection,
   U as Box,
   e as Button,
-  wo as CTA,
+  Lo as CTA,
   f as Card,
   n as CardContent,
   i as CardDescription,
-  l as CardFooter,
-  C as CardHeader,
+  C as CardFooter,
+  l as CardHeader,
   d as CardTitle,
   y as Check,
   E as ChevronDown,
@@ -58,49 +60,51 @@ export {
   q as Database,
   z as DollarSign,
   I as ExternalLink,
-  Ao as FAQ,
-  Lo as FeatureCard,
-  Po as FeatureGrid,
-  Do as FeatureShowcase,
-  vo as Footer,
+  Bo as FAQ,
+  To as FeatureCard,
+  Ro as FeatureGrid,
+  bo as FeatureShowcase,
+  Ho as Footer,
   J as Gauge,
   K as Globe,
-  bo as Hero,
-  Ho as LanguageSwitcher,
+  yo as Hero,
+  No as LanguageSwitcher,
   O as Layers,
   V as Lock,
-  yo as LogoCloud,
+  jo as LogoCloud,
   W as Mail,
-  No as MegaMenu,
+  Zo as MegaMenu,
   Y as Menu,
   h as Modal,
-  jo as Navbar,
-  Zo as Newsletter,
+  zo as Navbar,
+  Jo as Newsletter,
   _ as Palette,
-  $ as Play,
-  oo as Plus,
-  zo as Pricing,
+  $ as Pause,
+  oo as Play,
+  ro as Plus,
+  Oo as Pricing,
   w as Prose,
-  k as ProseLead,
-  ro as Quote,
-  eo as Rocket,
+  A as ProseLead,
+  eo as Quote,
+  to as Rocket,
+  ao as RotateCcw,
   s as Section,
-  S as SectionHeader,
-  to as Send,
-  ao as ShieldCheck,
-  po as Sliders,
+  g as SectionHeader,
+  mo as Send,
+  po as ShieldCheck,
+  xo as Sliders,
   a as Slot,
-  mo as Smartphone,
+  fo as Smartphone,
   L as Stack,
-  xo as Star,
-  Jo as Stats,
-  fo as Terminal,
-  Oo as TestimonialCard,
-  Wo as Testimonials,
-  no as Users,
-  io as X,
-  lo as Zap,
-  P as cn,
-  D as iso2ToFlagEmoji
+  no as Star,
+  Wo as Stats,
+  io as Terminal,
+  _o as TestimonialCard,
+  or as Testimonials,
+  Co as Users,
+  lo as X,
+  co as Zap,
+  B as cn,
+  T as iso2ToFlagEmoji
 };
 //# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -28,6 +28,72 @@ export declare interface AccordionShowcaseProps extends Omit<HTMLAttributes<HTML
     defaultActive?: number;
 }
 
+/**
+ * Scripted agentic-chat demo for marketing pages.
+ *
+ * `player` (default) auto-plays the `script` — user messages type out, the
+ * agent "thinks", tool calls run and resolve, answers stream in — with
+ * pause/replay controls. `transcript` renders the whole script instantly
+ * (also used automatically under `prefers-reduced-motion`).
+ */
+export declare const AgentDemo: ForwardRefExoticComponent<AgentDemoProps & RefAttributes<HTMLDivElement>>;
+
+export declare type AgentDemoOption = "player" | "transcript";
+
+export declare interface AgentDemoProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** `player` auto-plays the script with typing + thinking + tool effects; `transcript` renders every step instantly. Defaults to `player`. */
+    option?: AgentDemoOption;
+    /** The scripted demo, played top to bottom. No backend — all content is static. */
+    script: AgentScriptStep[];
+    /** Window height as any CSS length (`px`, `rem`, `dvh`, …). Defaults to `70dvh`. */
+    height?: string;
+    /** Window header title. Rendered only when present. */
+    title?: ReactNode;
+    /** Custom brand logo node rendered next to the title. */
+    logo?: ReactNode;
+    /** Quick brand logo image source. */
+    logoSrc?: string;
+    logoAlt?: string;
+    /** Size tuning for logo images. Defaults to `h-8 w-8 rounded-lg`. */
+    logoClassName?: string;
+    /** Window header subtitle. Rendered only when present. */
+    subtitle?: ReactNode;
+    /** Start playing on mount. When `false`, the full script renders instantly. Defaults to `true`. */
+    autoplay?: boolean;
+    /** Hold the first frame instead of playing (e.g. resume on a keypress or on scroll into view). Defaults to `false`. */
+    paused?: boolean;
+    /** Restart automatically after finishing. Defaults to `false`. */
+    loop?: boolean;
+    /** Playback speed multiplier. Defaults to `1`. */
+    speed?: number;
+    /** Show the pause / play / replay buttons. Defaults to `true`. */
+    showControls?: boolean;
+    /** Show the step progress ("Step X of N"). Defaults to `true`. */
+    showSteps?: boolean;
+    /** Called once each time playback reaches the end. */
+    onDone?: () => void;
+}
+
+export declare type AgentScriptStep = {
+    type: "user";
+    text: string;
+} | {
+    type: "thinking";
+    label?: string;
+} | {
+    type: "tool";
+    /** Function/tool name, e.g. `search_docs`. */
+    name: string;
+    /** JSON-encoded arguments shown when the card is expanded. */
+    args?: string;
+    /** Short result summary shown when the card is expanded. */
+    result?: string;
+    status?: "running" | "success" | "error";
+} | {
+    type: "assistant";
+    text: string;
+};
+
 export declare const ArrowDown: (props: IconProps) => JSX_2.Element;
 
 export declare const ArrowRight: (props: IconProps) => JSX_2.Element;
@@ -579,6 +645,8 @@ export declare interface NewsletterProps extends Omit<HTMLAttributes<HTMLFormEle
 
 export declare const Palette: (props: IconProps) => JSX_2.Element;
 
+export declare const Pause: (props: IconProps) => JSX_2.Element;
+
 export declare interface Plan {
     name: string;
     description?: string;
@@ -637,6 +705,8 @@ export declare const Quote: (props: IconProps) => JSX_2.Element;
 
 export declare const Rocket: (props: IconProps) => JSX_2.Element;
 
+export declare const RotateCcw: (props: IconProps) => JSX_2.Element;
+
 export declare const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
 
 export declare const SectionHeader: ForwardRefExoticComponent<SectionHeaderProps & RefAttributes<HTMLDivElement>>;

package/dist/styles.css

@@ -9,6 +9,8 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-amber-500: oklch(76.9% 0.188 70.08);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -65,6 +67,9 @@
     --radius-2xl: 1.5rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --blur-md: 12px;
     --blur-2xl: 40px;
     --default-transition-duration: 150ms;
@@ -1624,6 +1629,9 @@
   .mt-16 {
     margin-top: calc(var(--spacing) * 16);
   }
+  .mb-1 {
+    margin-bottom: var(--spacing);
+  }
   .mb-1\.5 {
     margin-bottom: calc(var(--spacing) * 1.5);
   }
@@ -1651,9 +1659,15 @@
   .mb-14 {
     margin-bottom: calc(var(--spacing) * 14);
   }
+  .ml-0\.5 {
+    margin-left: calc(var(--spacing) * 0.5);
+  }
   .ml-1 {
     margin-left: var(--spacing);
   }
+  .ml-auto {
+    margin-left: auto;
+  }
   .line-clamp-2 {
     overflow: hidden;
     display: -webkit-box;
@@ -1810,6 +1824,9 @@
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
+  .w-\[2px\] {
+    width: 2px;
+  }
   .w-\[19rem\] {
     width: 19rem;
   }
@@ -1840,6 +1857,12 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
+  .max-w-\[85\%\] {
+    max-width: 85%;
+  }
+  .max-w-\[90\%\] {
+    max-width: 90%;
+  }
   .max-w-\[calc\(100vw-2rem\)\] {
     max-width: calc(100vw - 2rem);
   }
@@ -1892,6 +1915,10 @@
     --tw-translate-y: 0px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-y-\[3px\] {
+    --tw-translate-y: 3px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .rotate-45 {
     rotate: 45deg;
   }
@@ -1901,9 +1928,21 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
   .animate-marquee {
     animation: var(--animate-marquee);
   }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1961,6 +2000,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .justify-start {
+    justify-content: flex-start;
+  }
   .gap-0 {
     gap: 0px;
   }
@@ -2020,6 +2062,11 @@
     margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
   }
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
   :where(.space-y-2\.5 > :not(:last-child)) {
     --tw-space-y-reverse: 0;
     margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));
@@ -2116,10 +2163,20 @@
     border-bottom-right-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
   }
+  .rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -2147,6 +2204,9 @@
       border-color: color-mix(in oklab, rgb(var(--color-border)) 70%, transparent);
     }
   }
+  .border-current {
+    border-color: currentcolor;
+  }
   .border-foreground\/20 {
     border-color: color-mix(in srgb, rgb(rgb(var(--color-foreground))) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2162,12 +2222,21 @@
       border-color: color-mix(in oklab, rgb(var(--color-primary)) 40%, transparent);
     }
   }
+  .border-red-500\/40 {
+    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-500) 40%, transparent);
+    }
+  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
     }
   }
+  .border-t-transparent {
+    border-top-color: transparent;
+  }
   .bg-\[\#101010\] {
     background-color: #101010;
   }
@@ -2189,6 +2258,12 @@
   .bg-background {
     background-color: rgb(var(--color-background));
   }
+  .bg-background\/60 {
+    background-color: color-mix(in srgb, rgb(rgb(var(--color-background))) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgb(var(--color-background)) 60%, transparent);
+    }
+  }
   .bg-background\/85 {
     background-color: color-mix(in srgb, rgb(rgb(var(--color-background))) 85%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2213,12 +2288,27 @@
   .bg-foreground {
     background-color: rgb(var(--color-foreground));
   }
+  .bg-foreground\/8 {
+    background-color: color-mix(in srgb, rgb(rgb(var(--color-foreground))) 8%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgb(var(--color-foreground)) 8%, transparent);
+    }
+  }
+  .bg-foreground\/15 {
+    background-color: color-mix(in srgb, rgb(rgb(var(--color-foreground))) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgb(var(--color-foreground)) 15%, transparent);
+    }
+  }
   .bg-foreground\/25 {
     background-color: color-mix(in srgb, rgb(rgb(var(--color-foreground))) 25%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, rgb(var(--color-foreground)) 25%, transparent);
     }
   }
+  .bg-on-primary {
+    background-color: rgb(var(--color-on-primary));
+  }
   .bg-on-secondary {
     background-color: rgb(var(--color-on-secondary));
   }
@@ -2234,6 +2324,12 @@
       background-color: color-mix(in oklab, rgb(var(--color-primary-soft)) 60%, transparent);
     }
   }
+  .bg-red-500\/15 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 15%, transparent);
+    }
+  }
   .bg-secondary {
     background-color: rgb(var(--color-secondary));
   }
@@ -2243,6 +2339,12 @@
   .bg-surface-strong {
     background-color: rgb(var(--color-surface-strong));
   }
+  .bg-surface-strong\/40 {
+    background-color: color-mix(in srgb, rgb(rgb(var(--color-surface-strong))) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgb(var(--color-surface-strong)) 40%, transparent);
+    }
+  }
   .bg-surface\/90 {
     background-color: color-mix(in srgb, rgb(rgb(var(--color-surface))) 90%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2282,6 +2384,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -2315,6 +2420,9 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -2459,6 +2567,9 @@
   .font-display {
     font-family: var(--font-display);
   }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
   .font-sans {
     font-family: var(--font-sans);
   }
@@ -2664,6 +2775,9 @@
   .text-danger {
     color: rgb(var(--color-danger));
   }
+  .text-emerald-600 {
+    color: var(--color-emerald-600);
+  }
   .text-foreground {
     color: rgb(var(--color-foreground));
   }
@@ -2965,6 +3079,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .\[animation-delay\:-0\.3s\] {
+    animation-delay: -0.3s;
+  }
+  .\[animation-delay\:-0\.15s\] {
+    animation-delay: -0.15s;
+  }
   .ring-inset {
     --tw-ring-inset: inset;
   }
@@ -3145,6 +3265,9 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .focus-visible\:ring-inset:focus-visible {
+    --tw-ring-inset: inset;
+  }
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -3251,6 +3374,9 @@
     .sm\:p-14 {
       padding: calc(var(--spacing) * 14);
     }
+    .sm\:px-5 {
+      padding-inline: calc(var(--spacing) * 5);
+    }
     .sm\:px-6 {
       padding-inline: calc(var(--spacing) * 6);
     }
@@ -3454,6 +3580,11 @@
       line-height: var(--tw-leading, var(--text-8xl--line-height));
     }
   }
+  @media (prefers-color-scheme: dark) {
+    .dark\:text-emerald-400 {
+      color: var(--color-emerald-400);
+    }
+  }
 }
 @layer base {
   :root {
@@ -3850,6 +3981,26 @@
   syntax: "*";
   inherits: false;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ugurdemirel/landcraft",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "publishConfig": {
     "access": "public"
   },