Hero 14

import Balancer from 'react-wrap-balancer'

import { Button } from '@/components/ui/button'

import { Hero14BlockBuilder } from './hero-14-block-builder'

const logos = ['Northwind', 'Vertex Labs', 'Solstice', 'Anchorpoint', 'Lumen']

export function Hero14() {
  return (
    <section className="bg-background relative isolate w-full overflow-hidden">
      <div className="relative z-10 mx-auto flex max-w-6xl flex-col items-center gap-10 px-6 py-20 sm:gap-14 sm:py-28">
        <div className="flex w-full max-w-2xl flex-col items-center gap-5 sm:gap-6">
          <div className="flex flex-col items-center gap-3 text-center sm:gap-4">
            <h1 className="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl md:text-5xl">
              <Balancer>Describe the screen. Ship the block.</Balancer>
            </h1>
            <p className="text-muted-foreground max-w-xl text-sm sm:text-base">
              <Balancer>
                Turn a plain-language brief into a production-ready block you
                can copy into your app.
              </Balancer>
            </p>
          </div>

          <div className="flex flex-wrap items-center justify-center gap-3">
            <Button
              variant="outline"
              className="w-fit rounded-full px-4"
              nativeButton={false}
              render={<a href="#" />}
            >
              How It Works
            </Button>
            <Button
              className="w-fit rounded-full px-4"
              nativeButton={false}
              render={<a href="#" />}
            >
              Browse Blocks
            </Button>
          </div>
        </div>

        <div className="relative w-full overflow-hidden rounded-2xl outline outline-black/10 dark:outline-white/10">
          <img
            src="https://images.unsplash.com/photo-1673271044466-b23ea152130f?q=80&w=2070&auto=format&fit=crop"
            alt="Alt"
            decoding="async"
            className="absolute inset-0 size-full object-cover"
          />
          <div
            aria-hidden
            className="absolute inset-0 bg-gradient-to-t from-black/15 via-transparent to-black/5"
          />
          <div className="relative flex items-center justify-center px-6 py-10 sm:px-12 sm:py-16">
            <Hero14BlockBuilder />
          </div>
        </div>

        <div className="flex w-full flex-wrap items-center justify-center gap-x-10 gap-y-4 border-t pt-8 sm:pt-10">
          {logos.map((logo) => (
            <span
              key={logo}
              className="text-muted-foreground/70 text-sm font-semibold tracking-tight"
            >
              {logo}
            </span>
          ))}
        </div>
      </div>
    </section>
  )
}

import { CheckCircle2, Send, Sparkles } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'

const checklist = ['Three-tier layout', 'Monthly / yearly toggle']

export function Hero14BlockBuilder() {
  return (
    <div
      className={cn(
        'bg-card w-full max-w-md overflow-hidden rounded-xl border',
        'shadow-[0_20px_50px_-16px_rgba(0,0,0,0.25)]',
        'dark:shadow-[0_20px_50px_-16px_rgba(0,0,0,0.6)]',
      )}
    >
      <div className="border-b px-5 py-3">
        <span className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
          Block builder
        </span>
      </div>

      <div className="flex flex-col gap-3.5 px-5 py-5">
        <div className="flex items-end gap-2.5">
          <div className="bg-foreground text-background flex size-7 shrink-0 items-center justify-center rounded-md">
            <Sparkles className="size-4" />
          </div>
          <div className="bg-muted max-w-[80%] rounded-xl rounded-bl-sm px-3.5 py-2.5 text-[13px] leading-relaxed">
            Hi! Describe the block you want to build.
          </div>
        </div>

        <div className="flex justify-end">
          <div className="bg-foreground text-background max-w-[80%] rounded-xl rounded-br-sm px-3.5 py-2.5 text-[13px] leading-relaxed">
            A pricing section with three tiers
          </div>
        </div>

        <div className="bg-muted/60 space-y-2 rounded-xl p-3.5">
          <span className="text-sm font-medium tracking-tight">
            Pricing-03 block
          </span>
          <ul className="text-muted-foreground space-y-1 text-xs leading-relaxed">
            {checklist.map((entry) => (
              <li key={entry}>{entry}</li>
            ))}
          </ul>
          <div className="text-foreground flex items-center gap-1.5 pt-0.5 text-xs font-medium">
            <CheckCircle2 className="size-3.5 text-emerald-600 dark:text-emerald-400" />
            Ready to copy
          </div>
        </div>
      </div>

      <div className="border-t p-3">
        <div className="bg-muted/50 flex items-center gap-2 rounded-full py-2 pr-1.5 pl-4">
          <span className="text-muted-foreground min-w-0 flex-1 truncate text-[13px]">
            Describe your block…
          </span>
          <Button
            size="icon-xs"
            variant="default"
            className="size-8 shrink-0 rounded-full active:scale-[0.96]"
            aria-label="Send"
          >
            <Send className="size-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}