@ugurdemirel/landcraft 0.1.4 → 0.1.9

package/src/components/Features/types.ts

@@ -1,25 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type FeatureGridOption = "columns" | "bento" | "editorialRows";
-
-export interface FeatureItem {
-  icon?: ReactNode;
-  title: string;
-  description?: string;
-  accent?: string;
-}
-
-export interface FeatureCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  /** Arbitrary CSS color for the icon chip; glyph color computed for contrast. */
-  accent?: string;
-  large?: boolean;
-}
-
-export interface FeatureGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  features: FeatureItem[];
-  option?: FeatureGridOption;
-  columns?: 2 | 3 | 4;
-}

package/src/components/Features/variants/Bento.tsx

@@ -1,32 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { FeatureCard } from "../FeatureCard";
-import { bentoSpans } from "../parts";
-import type { FeatureItem } from "../types";
-
-interface BentoProps extends HTMLAttributes<HTMLDivElement> {
-  features: FeatureItem[];
-}
-
-export const FeatureBento = forwardRef<HTMLDivElement, BentoProps>(
-  ({ className, features, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 lg:auto-rows-[minmax(9rem,auto)]",
-        "w-full",
-        className,
-      )}
-      {...props}
-    >
-      {features.map((feature, i) =>
-        feature ? (
-          <div key={i} className={cn(i < bentoSpans.length && bentoSpans[i])}>
-            <FeatureCard {...feature} large={i === 0} className="h-full" />
-          </div>
-        ) : null,
-      )}
-    </div>
-  ),
-);
-FeatureBento.displayName = "FeatureBento";

package/src/components/Features/variants/Columns.tsx

@@ -1,21 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import { FeatureCard } from "../FeatureCard";
-import { gridCols } from "../parts";
-import type { FeatureItem } from "../types";
-
-interface ColumnsProps extends HTMLAttributes<HTMLDivElement> {
-  features: FeatureItem[];
-  columns: 2 | 3 | 4;
-}
-
-export const FeatureColumns = forwardRef<HTMLDivElement, ColumnsProps>(
-  ({ className, features, columns, ...props }, ref) => (
-    <div ref={ref} className={cn("grid w-full grid-cols-1 gap-4", gridCols[columns], className)} {...props}>
-      {features.map((feature, i) => (
-        <FeatureCard key={i} {...feature} className="h-full" />
-      ))}
-    </div>
-  ),
-);
-FeatureColumns.displayName = "FeatureColumns";

package/src/components/Features/variants/EditorialRows.tsx

@@ -1,38 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-import { cn } from "../../../utils/cn";
-import type { FeatureItem } from "../types";
-
-interface EditorialRowsProps extends HTMLAttributes<HTMLDivElement> {
-  features: FeatureItem[];
-}
-
-export const FeatureEditorialRows = forwardRef<HTMLDivElement, EditorialRowsProps>(
-  ({ className, features, ...props }, ref) => (
-    <div ref={ref} className={cn("w-full", className)} {...props}>
-      <div className="divide-y divide-border border-t border-b border-border">
-        {features.map((feature, i) => (
-          <div
-            key={i}
-            className="group flex flex-col gap-3 py-6 transition-colors duration-200 sm:flex-row sm:items-baseline sm:gap-10"
-          >
-            <span className="text-sm font-medium tabular-nums text-muted-foreground/60 sm:w-12">
-              {String(i + 1).padStart(2, "0")}
-            </span>
-            <div className="flex-1 sm:flex sm:items-baseline sm:justify-between sm:gap-10">
-              <h3 className="font-display text-xl font-semibold tracking-tight text-foreground sm:w-2/5">
-                {feature.title}
-              </h3>
-              <p className="mt-1.5 text-sm leading-7 text-muted-foreground sm:mt-0 sm:w-1/2">
-                {feature.description}
-              </p>
-            </div>
-            {feature.icon ? (
-              <span className="hidden text-foreground/30 sm:inline-flex">{feature.icon}</span>
-            ) : null}
-          </div>
-        ))}
-      </div>
-    </div>
-  ),
-);
-FeatureEditorialRows.displayName = "FeatureEditorialRows";

package/src/components/Footer/Footer.tsx

@@ -1,11 +0,0 @@
-import type { FooterProps } from "./types";
-import { FooterClassic } from "./variants/Classic";
-import { FooterMinimal } from "./variants/Minimal";
-import { FooterEditorial } from "./variants/Editorial";
-
-export const Footer = ({ option = "classic", ...props }: FooterProps) => {
-  if (option === "minimal") return <FooterMinimal {...props} />;
-  if (option === "editorial") return <FooterEditorial {...props} />;
-  return <FooterClassic {...props} />;
-};
-Footer.displayName = "Footer";

package/src/components/Footer/index.ts

@@ -1,2 +0,0 @@
-export { Footer } from "./Footer";
-export type { FooterProps, FooterColumn, FooterLink } from "./types";

package/src/components/Footer/parts.tsx

@@ -1,101 +0,0 @@
-import type { ElementType, ReactNode } from "react";
-import { cn } from "../../utils/cn";
-import type { FooterColumn } from "./types";
-
-export function FooterLogoNode({
-  logo,
-  logoSrc,
-  logoAlt,
-  logoClassName,
-  brand,
-  imageClassName = "h-7 w-auto",
-}: {
-  logo?: ReactNode;
-  logoSrc?: string;
-  logoAlt?: string;
-  logoClassName?: string;
-  brand?: ReactNode;
-  imageClassName?: string;
-}) {
-  if (logo) return logo;
-  if (logoSrc) {
-    return (
-      <img
-        src={logoSrc}
-        alt={logoAlt ?? (typeof brand === "string" ? brand : "Logo")}
-        className={cn(imageClassName, logoClassName)}
-      />
-    );
-  }
-  return null;
-}
-
-export function FooterWordmark({ brand }: { brand?: ReactNode }) {
-  return (
-    <span className="flex items-center gap-2 font-display text-lg font-bold tracking-tight">
-      <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-sm bg-current" />
-      {brand}
-    </span>
-  );
-}
-
-export function FooterEditorialWordmark({ brand }: { brand?: ReactNode }) {
-  return (
-    <span className="font-display text-5xl font-bold tracking-[-0.03em] text-foreground sm:text-7xl">
-      {brand}
-    </span>
-  );
-}
-
-export function FooterColumnsBlock({
-  columns,
-  Link,
-  linkClassName,
-}: {
-  columns: FooterColumn[];
-  Link: ElementType;
-  linkClassName: string;
-}) {
-  return (
-    <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
-      {columns.map((column) => (
-        <div key={column.title}>
-          <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-            {column.title}
-          </h3>
-          <ul className="mt-4 space-y-2.5">
-            {column.links.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className={linkClassName}>
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function FooterBottomBar({
-  bottom,
-  languageSwitcher,
-  brand,
-  wrapperClassName,
-  textClassName,
-}: {
-  bottom?: ReactNode;
-  languageSwitcher?: ReactNode;
-  brand?: ReactNode;
-  wrapperClassName: string;
-  textClassName: string;
-}) {
-  return (
-    <div className={wrapperClassName}>
-      <span className={cn(textClassName)}>{bottom}</span>
-      {languageSwitcher ? <div>{languageSwitcher}</div> : null}
-      <span className={cn(textClassName)}>© {new Date().getFullYear()} {brand}. All rights reserved.</span>
-    </div>
-  );
-}

package/src/components/Footer/types.ts

@@ -1,32 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from "react";
-
-export interface FooterLink {
-  label: string;
-  href: string;
-}
-
-export interface FooterColumn {
-  title: string;
-  links: FooterLink[];
-}
-
-export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  brand?: ReactNode;
-  /** Custom logo node (component, <img>, inline SVG…). Replaces the wordmark. */
-  logo?: ReactNode;
-  /** Quick logo image source. */
-  logoSrc?: string;
-  logoAlt?: string;
-  /** Size / position tuning for logo images. Defaults to `h-7 w-auto`. */
-  logoClassName?: string;
-  description?: string;
-  columns: FooterColumn[];
-  socials?: ReactNode;
-  bottom?: ReactNode;
-  /** Optional language switcher rendered in the footer's bottom bar. */
-  languageSwitcher?: ReactNode;
-  option?: "classic" | "minimal" | "editorial";
-  badge?: ReactNode;
-  /** Component used to render footer links. Defaults to `<a>`. Pass your router's `<Link>` (Next.js, Remix, React Router…) for framework-aware navigation. */
-  LinkComponent?: ElementType;
-}

package/src/components/Footer/variants/Classic.tsx

@@ -1,59 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import type { FooterProps } from "../types";
-import {
-  FooterWordmark,
-  FooterLogoNode,
-  FooterBottomBar,
-} from "../parts";
-
-interface ClassicProps extends FooterProps {}
-
-export function FooterClassic({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, badge, LinkComponent, ...props }: ClassicProps) {
-  const Link = LinkComponent ?? "a";
-  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
-
-  return (
-    <footer className={cn("w-full bg-secondary text-on-secondary", className)} {...props}>
-      <Container className="py-16">
-        <div className="grid grid-cols-2 gap-10 md:grid-cols-4 lg:grid-cols-6">
-          <div className="col-span-2">
-            <span style={{ color: "rgb(var(--color-on-secondary))" }}>{brandNode}</span>
-            {description ? (
-              <p className="mt-4 max-w-xs text-sm leading-6 text-on-secondary/60">{description}</p>
-            ) : null}
-            {socials ? <div className="mt-6 flex items-center gap-3">{socials}</div> : null}
-            {badge ? <div className="mt-6">{badge}</div> : null}
-          </div>
-          {columns.map((column) => (
-            <div key={column.title}>
-              <h3 className="text-xs font-semibold uppercase tracking-[0.16em] text-on-secondary/50">
-                {column.title}
-              </h3>
-              <ul className="mt-4 space-y-2.5">
-                {column.links.map((link) => (
-                  <li key={link.href}>
-                    <Link
-                      href={link.href}
-                      className="text-sm text-on-secondary/70 transition-colors duration-150 hover:text-on-secondary"
-                    >
-                      {link.label}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-        <FooterBottomBar
-          bottom={bottom}
-          languageSwitcher={languageSwitcher}
-          brand={brand}
-          wrapperClassName="mt-14 flex flex-col items-center justify-between gap-4 border-t border-white/10 pt-8 text-sm text-on-secondary/50 sm:flex-row"
-          textClassName=""
-        />
-      </Container>
-    </footer>
-  );
-}
-FooterClassic.displayName = "FooterClassic";

package/src/components/Footer/variants/Editorial.tsx

@@ -1,47 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import type { FooterProps } from "../types";
-import {
-  FooterColumnsBlock,
-  FooterEditorialWordmark,
-  FooterLogoNode,
-  FooterBottomBar,
-} from "../parts";
-
-interface EditorialProps extends FooterProps {}
-
-export function FooterEditorial({ className, brand, logo, logoSrc, logoAlt, logoClassName, description, columns, socials, bottom, languageSwitcher, LinkComponent, ...props }: EditorialProps) {
-  const Link = LinkComponent ?? "a";
-  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand, imageClassName: "h-12 w-auto" }) ?? <FooterEditorialWordmark brand={brand} />;
-
-  return (
-    <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
-      <Container className="py-16 sm:py-20">
-        <div className="mb-14 flex flex-col justify-between gap-8 sm:flex-row sm:items-end">
-          <div>
-            {brandNode}
-            {description ? (
-              <p className="mt-3 max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-          {socials ? <div className="flex items-center gap-3">{socials}</div> : null}
-        </div>
-        <div className="border-t border-border pt-12">
-          <FooterColumnsBlock
-            columns={columns}
-            Link={Link}
-            linkClassName="text-[15px] text-foreground/80 transition-colors duration-150 hover:text-foreground"
-          />
-        </div>
-        <FooterBottomBar
-          bottom={bottom}
-          languageSwitcher={languageSwitcher}
-          brand={brand}
-          wrapperClassName="mt-12 flex flex-col items-center justify-between gap-4 border-t border-border pt-8 text-sm text-muted-foreground sm:flex-row"
-          textClassName=""
-        />
-      </Container>
-    </footer>
-  );
-}
-FooterEditorial.displayName = "FooterEditorial";

package/src/components/Footer/variants/Minimal.tsx

@@ -1,33 +0,0 @@
-import { cn } from "../../../utils/cn";
-import { Container } from "../../Container";
-import type { FooterProps } from "../types";
-import { FooterWordmark, FooterLogoNode } from "../parts";
-
-interface MinimalProps extends FooterProps {}
-
-export function FooterMinimal({ className, brand, logo, logoSrc, logoAlt, logoClassName, columns, languageSwitcher, bottom, LinkComponent, ...props }: MinimalProps) {
-  const Link = LinkComponent ?? "a";
-  const brandNode = FooterLogoNode({ logo, logoSrc, logoAlt, logoClassName, brand }) ?? <FooterWordmark brand={brand} />;
-
-  return (
-    <footer className={cn("w-full border-t border-border bg-background", className)} {...props}>
-      <Container className="flex flex-col items-center justify-between gap-6 py-10 sm:flex-row">
-        {brandNode}
-        <ul className="flex flex-wrap items-center justify-center gap-x-8 gap-y-3">
-          {columns.flatMap((c) => c.links).slice(0, 6).map((link) => (
-            <li key={link.href}>
-              <Link href={link.href} className="text-sm text-muted-foreground transition-colors duration-150 hover:text-foreground">
-                {link.label}
-              </Link>
-            </li>
-          ))}
-        </ul>
-        <div className="flex flex-col items-center gap-3">
-          {languageSwitcher ? <div>{languageSwitcher}</div> : null}
-          <div className="text-sm text-muted-foreground">{bottom}</div>
-        </div>
-      </Container>
-    </footer>
-  );
-}
-FooterMinimal.displayName = "FooterMinimal";

package/src/components/Hero/Hero.tsx

@@ -1,12 +0,0 @@
-import { forwardRef } from "react";
-import type { HeroProps } from "./types";
-import { HeroSplit } from "./variants/Split";
-import { HeroCentered } from "./variants/Centered";
-import { HeroStatement } from "./variants/Statement";
-
-export const Hero = forwardRef<HTMLElement, HeroProps>(({ variant = "split", ...props }, ref) => {
-  if (variant === "centered") return <HeroCentered ref={ref} {...props} />;
-  if (variant === "statement") return <HeroStatement ref={ref} {...props} />;
-  return <HeroSplit ref={ref} {...props} />;
-});
-Hero.displayName = "Hero";

package/src/components/Hero/index.ts

@@ -1,2 +0,0 @@
-export { Hero } from "./Hero";
-export type { HeroProps, HeroMeta, HeroVariant } from "./types";

package/src/components/Hero/parts.tsx

@@ -1,29 +0,0 @@
-import type { ReactNode } from "react";
-
-export const heroContainer =
-  "relative mx-auto flex w-full max-w-6xl flex-col items-center px-5 sm:px-8";
-
-export const heroTitleBase =
-  "font-display font-semibold tracking-[-0.03em] text-balance text-foreground";
-
-export function HeroEyebrow({ eyebrow }: { eyebrow?: ReactNode }) {
-  if (typeof eyebrow === "string") {
-    return (
-      <p className="text-xs font-semibold uppercase tracking-[0.2em] text-primary">
-        {eyebrow}
-      </p>
-    );
-  }
-  return eyebrow ? <div>{eyebrow}</div> : null;
-}
-
-export function HeroActions({
-  primaryAction,
-  secondaryAction,
-}: {
-  primaryAction?: ReactNode;
-  secondaryAction?: ReactNode;
-}) {
-  if (!primaryAction && !secondaryAction) return null;
-  return <div className="flex flex-wrap items-center gap-4">{primaryAction}{secondaryAction}</div>;
-}

package/src/components/Hero/types.ts

@@ -1,20 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-export type HeroVariant = "split" | "centered" | "statement";
-
-export interface HeroMeta {
-  label: string;
-  icon?: ReactNode;
-}
-
-export interface HeroProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  variant?: HeroVariant;
-  eyebrow?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  primaryAction?: ReactNode;
-  secondaryAction?: ReactNode;
-  media?: ReactNode;
-  /** Small trust/status row shown under the copy or CTAs. */
-  meta?: HeroMeta[];
-}

package/src/components/Hero/variants/Centered.tsx

@@ -1,54 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from "../parts";
-import type { HeroProps } from "../types";
-
-/** Centered — understated, one statement, generous white space. */
-export const HeroCentered = forwardRef<HTMLElement, HeroProps>(
-  (
-    { className, eyebrow, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
-    ref,
-  ) => (
-    <section
-      ref={ref}
-      id={id}
-      className={cn("relative w-full border-b border-border bg-background", className)}
-      {...props}
-    >
-      <div className={cn(heroContainer, "pt-24 pb-20 text-center sm:pt-32 sm:pb-24")}>
-        <HeroEyebrow eyebrow={eyebrow} />
-        <h1 className={cn(heroTitleBase, "mt-7 max-w-4xl text-5xl leading-[1.04] sm:text-6xl lg:text-7xl")}>
-          {title}
-        </h1>
-        {description ? (
-          <p className="mx-auto mt-7 max-w-xl text-pretty leading-relaxed text-muted-foreground sm:text-lg">
-            {description}
-          </p>
-        ) : null}
-        {primaryAction || secondaryAction ? (
-          <div className="mt-10 justify-center">
-            <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
-          </div>
-        ) : null}
-        {meta ? (
-          <ul className="mt-14 flex flex-wrap items-center justify-center gap-x-9 gap-y-3">
-            {meta.map((m, i) => (
-              <li
-                key={m.label}
-                className={cn(
-                  "flex items-center gap-2 text-sm text-muted-foreground",
-                  i > 0 && "sm:border-l sm:border-border sm:pl-9",
-                )}
-              >
-                {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
-                {m.label}
-              </li>
-            ))}
-          </ul>
-        ) : null}
-        {media ? <div className="mt-16 w-full">{media}</div> : null}
-      </div>
-    </section>
-  ),
-);
-HeroCentered.displayName = "HeroCentered";

package/src/components/Hero/variants/Split.tsx

@@ -1,53 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { HeroActions, HeroEyebrow, heroContainer, heroTitleBase } from "../parts";
-import type { HeroProps } from "../types";
-
-/** Split — editorial grid: huge type left, media right, meta rule under. */
-export const HeroSplit = forwardRef<HTMLElement, HeroProps>(
-  (
-    { className, eyebrow, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
-    ref,
-  ) => (
-    <section
-      ref={ref}
-      id={id}
-      className={cn("relative w-full border-b border-border bg-background", className)}
-      {...props}
-    >
-      <div className={cn(
-        heroContainer,
-        "items-start gap-14 pt-20 pb-20 sm:pt-28 sm:pb-28 lg:grid lg:grid-cols-[1.05fr_0.95fr] lg:gap-20",
-      )}>
-        <div className="max-w-xl">
-          <HeroEyebrow eyebrow={eyebrow} />
-          <h1 className={cn(heroTitleBase, "mt-6 text-5xl leading-[1.03] sm:text-6xl lg:text-7xl")}>
-            {title}
-          </h1>
-          {description ? (
-            <p className="mt-7 max-w-md text-pretty leading-relaxed text-muted-foreground sm:text-lg">
-              {description}
-            </p>
-          ) : null}
-          {primaryAction || secondaryAction ? (
-            <div className="mt-10">
-              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
-            </div>
-          ) : null}
-          {meta ? (
-            <ul className="mt-14 flex flex-wrap items-center gap-x-8 gap-y-3 border-t border-border pt-6">
-              {meta.map((m) => (
-                <li key={m.label} className="flex items-center gap-2 text-sm text-muted-foreground">
-                  {m.icon ? <span className="text-foreground/35">{m.icon}</span> : null}
-                  {m.label}
-                </li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
-        {media ? <div className="w-full self-center">{media}</div> : null}
-      </div>
-    </section>
-  ),
-);
-HeroSplit.displayName = "HeroSplit";

package/src/components/Hero/variants/Statement.tsx

@@ -1,60 +0,0 @@
-"use client";
-import { forwardRef } from "react";
-import { cn } from "../../../utils/cn";
-import { useTokenForeground } from "../../../utils/useTokenForeground";
-import { HeroActions, heroContainer } from "../parts";
-import type { HeroProps } from "../types";
-
-/** Statement — full-bleed ink band. No eyebrow, pure message. */
-export const HeroStatement = forwardRef<HTMLElement, HeroProps>(
-  (
-    { className, title, description, primaryAction, secondaryAction, media, meta, id, ...props },
-    ref,
-  ) => {
-    // Statement paints its own background from --color-secondary, so the
-    // readable text color must be derived from THAT token, not the brand.
-    const fg = useTokenForeground("--color-secondary");
-
-    return (
-      <section
-        ref={ref}
-        id={id}
-        className={cn("relative w-full overflow-hidden bg-secondary", className)}
-        style={{ color: fg }}
-        {...props}
-      >
-        <div aria-hidden className="pointer-events-none absolute inset-0 grain opacity-[0.07] mix-blend-overlay" />
-        <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 h-px bg-white/10" />
-        <div className={cn(heroContainer, "pt-28 pb-24 text-center sm:pt-36 sm:pb-32")}>
-          <h1
-            className="max-w-5xl font-display text-[2.9rem] font-semibold leading-[1.02] tracking-[-0.04em] text-balance sm:text-7xl lg:text-8xl"
-            style={{ color: fg }}
-          >
-            {title}
-          </h1>
-          {description ? (
-            <p className="mx-auto mt-8 max-w-xl text-pretty leading-relaxed sm:text-lg" style={{ color: fg, opacity: 0.72 }}>
-              {description}
-            </p>
-          ) : null}
-          {primaryAction || secondaryAction ? (
-            <div className="mt-11 justify-center">
-              <HeroActions primaryAction={primaryAction} secondaryAction={secondaryAction} />
-            </div>
-          ) : null}
-          {meta ? (
-            <ul className="mt-16 flex flex-wrap items-center justify-center gap-x-10 gap-y-3">
-              {meta.map((m) => (
-                <li key={m.label} className="flex items-center gap-2 text-sm font-medium" style={{ color: fg, opacity: 0.72 }}>
-                  {m.icon ? <span>{m.icon}</span> : null}
-                  {m.label}
-                </li>
-              ))}
-            </ul>
-          ) : null}
-        </div>
-      </section>
-    );
-  },
-);
-HeroStatement.displayName = "HeroStatement";