{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-split-phone",
  "title": "Phone split hero",
  "description": "App launch hero with an email capture on the left and an app screen in an iPhone frame.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "button",
    "input",
    "label",
    "https://velora.colorlib.com/r/blur-fade.json",
    "https://velora.colorlib.com/r/iphone-mockup.json",
    "https://velora.colorlib.com/r/ripple.json"
  ],
  "files": [
    {
      "path": "src/components/blocks/hero-split-phone.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\nimport {\n  ArrowRightIcon,\n  BatteryFullIcon,\n  CheckIcon,\n  CoffeeIcon,\n  HomeIcon,\n  LockIcon,\n  PieChartIcon,\n  PiggyBankIcon,\n  PlaneIcon,\n  RepeatIcon,\n  SignalIcon,\n  SmartphoneIcon,\n  SparklesIcon,\n  UserIcon,\n  WalletIcon,\n  WifiIcon,\n} from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { BlurFade } from \"@/components/velora/blur-fade\";\nimport { IphoneMockup } from \"@/components/velora/iphone-mockup\";\nimport { Ripple } from \"@/components/velora/ripple\";\n\nconst PERKS = [\n  { icon: LockIcon, text: \"Bank-grade encryption\" },\n  { icon: RepeatIcon, text: \"Rules that run themselves\" },\n  { icon: SmartphoneIcon, text: \"iOS and Android\" },\n];\n\nconst RULES = [\n  {\n    icon: SparklesIcon,\n    name: \"Round up purchases\",\n    detail: \"+$84.20 this month\",\n    on: true,\n  },\n  {\n    icon: PiggyBankIcon,\n    name: \"Save 10% of payday\",\n    detail: \"Next: Friday\",\n    on: true,\n  },\n  {\n    icon: CoffeeIcon,\n    name: \"Cap dining at $300\",\n    detail: \"$212 spent\",\n    on: false,\n  },\n];\n\nconst RECENT = [\n  { icon: PlaneIcon, name: \"Japan trip fund\", amount: \"+$150.00\" },\n  { icon: CoffeeIcon, name: \"Blue Door Café\", amount: \"−$4.80\" },\n];\n\n/** The app screen, drawn with Tailwind so it follows your theme. */\nfunction AppScreen() {\n  return (\n    <div\n      role=\"img\"\n      aria-label=\"Halcyon app home screen: a $12,480 balance and three autopilot savings rules\"\n      className=\"flex h-full flex-col bg-background text-[11px] text-foreground\"\n    >\n      <div className=\"flex items-center justify-between px-6 pt-3.5 text-[11px] font-semibold\">\n        <span>9:41</span>\n        <span className=\"flex items-center gap-1\">\n          <SignalIcon className=\"size-3\" />\n          <WifiIcon className=\"size-3\" />\n          <BatteryFullIcon className=\"size-3.5\" />\n        </span>\n      </div>\n\n      <div className=\"flex items-center justify-between px-4 pt-6\">\n        <div>\n          <div className=\"text-muted-foreground\">Good morning</div>\n          <div className=\"text-sm font-semibold\">Maya Lindqvist</div>\n        </div>\n        <span className=\"grid size-8 place-items-center rounded-full bg-muted font-semibold\">\n          ML\n        </span>\n      </div>\n\n      <div className=\"mx-4 mt-4 rounded-2xl bg-gradient-to-br from-brand-from via-brand-via to-brand-to p-4 text-brand-foreground shadow-lg shadow-brand/25\">\n        <div className=\"opacity-80\">Total balance</div>\n        <div className=\"mt-1 text-2xl font-semibold tracking-tight\">\n          $12,480.52\n        </div>\n        <div className=\"mt-3 flex items-end justify-between\">\n          <span className=\"rounded-full bg-white/20 px-2 py-0.5 font-medium\">\n            +$1,240 this month\n          </span>\n          <svg\n            viewBox=\"0 0 64 24\"\n            className=\"h-6 w-16\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <path d=\"M1 20 12 15l8 3 11-9 9 4L52 5l11 1\" />\n          </svg>\n        </div>\n      </div>\n\n      <div className=\"mt-5 flex items-center justify-between px-4\">\n        <span className=\"text-xs font-semibold\">Autopilot</span>\n        <span className=\"text-brand\">Edit</span>\n      </div>\n      <div className=\"mx-4 mt-2 divide-y rounded-xl border bg-card\">\n        {RULES.map(({ icon: Icon, name, detail, on }) => (\n          <div key={name} className=\"flex items-center gap-2.5 px-3 py-2.5\">\n            <span className=\"grid size-7 shrink-0 place-items-center rounded-lg bg-brand/10 text-brand\">\n              <Icon className=\"size-3.5\" />\n            </span>\n            <span className=\"min-w-0 flex-1\">\n              <span className=\"block truncate font-medium\">{name}</span>\n              <span className=\"block text-[10px] text-muted-foreground\">\n                {detail}\n              </span>\n            </span>\n            <span\n              className={`flex h-4 w-7 shrink-0 items-center rounded-full p-0.5 ${on ? \"justify-end bg-brand\" : \"bg-muted\"}`}\n            >\n              <span className=\"size-3 rounded-full bg-background shadow-sm\" />\n            </span>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"mt-5 px-4 text-xs font-semibold\">Recent</div>\n      <div className=\"mt-2 space-y-2.5 px-4\">\n        {RECENT.map(({ icon: Icon, name, amount }) => (\n          <div key={name} className=\"flex items-center gap-2.5\">\n            <span className=\"grid size-7 place-items-center rounded-full bg-muted\">\n              <Icon className=\"size-3.5\" />\n            </span>\n            <span className=\"flex-1 font-medium\">{name}</span>\n            <span className=\"font-medium tabular-nums\">{amount}</span>\n          </div>\n        ))}\n      </div>\n\n      <div className=\"mt-auto border-t bg-card/80 px-6 pt-2.5 pb-5\">\n        <div className=\"flex justify-between text-muted-foreground\">\n          <HomeIcon className=\"size-4 text-brand\" />\n          <PieChartIcon className=\"size-4\" />\n          <WalletIcon className=\"size-4\" />\n          <UserIcon className=\"size-4\" />\n        </div>\n        <div className=\"mx-auto mt-3 h-1 w-24 rounded-full bg-foreground/80\" />\n      </div>\n    </div>\n  );\n}\n\n/**\n * Mobile-app launch hero: copy and an email waitlist on the left, the app in\n * an iPhone frame on the right with two floating highlight cards. Wire the\n * form's submit handler to your list provider.\n */\nexport function HeroSplitPhone() {\n  const id = useId();\n  const [joined, setJoined] = useState(false);\n\n  return (\n    <section className=\"relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8\">\n      <div className=\"mx-auto grid max-w-7xl items-center gap-16 lg:grid-cols-2 lg:gap-12\">\n        <div className=\"max-w-xl\">\n          <BlurFade>\n            <p className=\"inline-flex items-center gap-2 rounded-full border bg-background/60 px-3 py-1 text-sm text-muted-foreground backdrop-blur\">\n              <span className=\"size-1.5 rounded-full bg-brand\" />\n              Early access opens in June\n            </p>\n          </BlurFade>\n\n          <h1 className=\"mt-8 text-4xl font-semibold tracking-tight text-balance sm:text-6xl\">\n            Your savings, <span className=\"text-brand\">on autopilot.</span>\n          </h1>\n\n          <p className=\"mt-6 text-lg text-pretty text-muted-foreground\">\n            Halcyon rounds up every purchase, sets aside part of each payday\n            and nudges you before you overspend. Set your rules once — the app\n            does the rest.\n          </p>\n\n          <BlurFade delay={0.3}>\n            <form\n              className=\"mt-10 max-w-md\"\n              onSubmit={(e) => {\n                e.preventDefault();\n                setJoined(true);\n              }}\n            >\n              <div className=\"flex flex-col gap-2 sm:flex-row\">\n                <Label htmlFor={`${id}-email`} className=\"sr-only\">\n                  Email address\n                </Label>\n                <Input\n                  id={`${id}-email`}\n                  type=\"email\"\n                  name=\"email\"\n                  required\n                  autoComplete=\"email\"\n                  placeholder=\"you@example.com\"\n                  aria-describedby={`${id}-hint`}\n                  className=\"h-11 rounded-full bg-background px-4\"\n                />\n                <Button\n                  type=\"submit\"\n                  size=\"lg\"\n                  className=\"h-11 shrink-0 rounded-full px-5\"\n                >\n                  {joined ? (\n                    <>\n                      <CheckIcon /> You&apos;re in\n                    </>\n                  ) : (\n                    <>\n                      Join the waitlist <ArrowRightIcon />\n                    </>\n                  )}\n                </Button>\n              </div>\n              <p\n                id={`${id}-hint`}\n                className=\"mt-3 px-1 text-sm text-muted-foreground\"\n              >\n                Join 18,000 people on the list. No spam — one email when your\n                invite is ready.\n              </p>\n              <p\n                role=\"status\"\n                className=\"mt-2 px-1 text-sm font-medium text-brand\"\n              >\n                {joined ? \"Thanks! Check your inbox to confirm your spot.\" : \"\"}\n              </p>\n            </form>\n          </BlurFade>\n\n          <BlurFade delay={0.4}>\n            <ul className=\"mt-10 flex flex-wrap gap-x-6 gap-y-3 text-sm text-muted-foreground\">\n              {PERKS.map(({ icon: Icon, text }) => (\n                <li key={text} className=\"flex items-center gap-2\">\n                  <Icon className=\"size-4 text-foreground\" />\n                  {text}\n                </li>\n              ))}\n            </ul>\n          </BlurFade>\n        </div>\n\n        <div className=\"relative flex justify-center py-6\">\n          <Ripple circles={5} baseSize={340} />\n\n          <BlurFade delay={0.2} offset={40}>\n            <IphoneMockup>\n              <AppScreen />\n            </IphoneMockup>\n          </BlurFade>\n\n          {/* Floating highlights — hidden on narrow screens where they would crowd the phone */}\n          <div className=\"absolute bottom-32 left-1/2 hidden -translate-x-[calc(100%+8rem)] md:block\">\n            <BlurFade delay={0.6} direction=\"right\">\n              <div\n                aria-hidden\n                className=\"w-52 rounded-2xl border bg-card/90 p-3.5 text-sm shadow-xl backdrop-blur\"\n              >\n                <div className=\"flex items-center gap-2 font-medium\">\n                  <PlaneIcon className=\"size-4 text-brand\" /> Japan trip\n                </div>\n                <div className=\"mt-1 text-xs text-muted-foreground\">\n                  $3,600 of $4,000 saved\n                </div>\n                <div className=\"mt-2.5 h-1.5 rounded-full bg-muted\">\n                  <div className=\"h-full w-[90%] rounded-full bg-gradient-to-r from-brand-from to-brand-to\" />\n                </div>\n              </div>\n            </BlurFade>\n          </div>\n          <div className=\"absolute top-20 left-1/2 hidden translate-x-14 md:block\">\n            <BlurFade delay={0.8} direction=\"left\">\n              <div\n                aria-hidden\n                className=\"flex w-56 items-center gap-3 rounded-2xl border bg-card/90 p-3.5 shadow-xl backdrop-blur\"\n              >\n                <span className=\"grid size-9 shrink-0 place-items-center rounded-xl bg-brand text-brand-foreground\">\n                  <SparklesIcon className=\"size-4\" />\n                </span>\n                <div className=\"text-sm\">\n                  <div className=\"font-medium\">+$2.40 rounded up</div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    Blue Door Café · just now\n                  </div>\n                </div>\n              </div>\n            </BlurFade>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/hero-split-phone.tsx"
    }
  ],
  "categories": [
    "hero-sections"
  ],
  "type": "registry:block"
}