{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "waitlist-with-iphone",
  "type": "registry:block",
  "title": "Waitlist Section with Iphone",
  "description": "A waitlist section with an iPhone mockup.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": ["@scrollxui/iphone"],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/waitlist-sections/waitlist-with-iphone.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { Iphone } from '@/components/ui/iphone';\n\ninterface WaitlistWithIphoneProps {\n  headline?: string;\n  subheadline?: string;\n  emailPlaceholder?: string;\n  buttonText?: string;\n  iphoneImgUrl?: string;\n}\n\nexport default function WaitlistWithIphone({\n  headline = 'Join the waitlist',\n  subheadline = 'Be the first to experience our platform. Join our exclusive waitlist to get early access, special perks, and stay updated as we prepare to launch.',\n  emailPlaceholder = 'Email address',\n  buttonText = 'Join the waitlist',\n  iphoneImgUrl = 'https://cdn.pixabay.com/photo/2013/07/13/12/43/girl-160172_1280.png',\n}: WaitlistWithIphoneProps) {\n  return (\n    <div className='relative min-h-screen w-full bg-zinc-50 dark:bg-zinc-950'>\n      <div className='absolute inset-y-0 left-0 h-full w-px bg-zinc-200/80 dark:bg-zinc-800/80' />\n      <div className='absolute inset-y-0 right-0 h-full w-px bg-zinc-200/80 dark:bg-zinc-800/80' />\n      <div className='absolute inset-x-0 top-0 h-px w-full bg-zinc-200/80 dark:bg-zinc-800/80' />\n\n      <div className='relative z-10 mx-auto flex min-h-screen w-full max-w-7xl flex-col px-4 pt-12 md:pt-20'>\n        <div className='flex flex-1 flex-col items-center justify-center pb-0'>\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6 }}\n            className='mb-8 w-full max-w-4xl text-center'\n          >\n            <h1 className='mb-4 text-4xl font-black italic leading-tight text-zinc-900 md:text-6xl lg:text-7xl dark:text-zinc-100'>\n              {headline.split('\\n').map((line, index) => (\n                <React.Fragment key={index}>\n                  {line}\n                  {index < headline.split('\\n').length - 1 && <br />}\n                </React.Fragment>\n              ))}\n            </h1>\n            {subheadline && (\n              <p className='mx-auto max-w-3xl text-base text-zinc-600 md:text-lg dark:text-zinc-400'>\n                {subheadline}\n              </p>\n            )}\n          </motion.div>\n\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.2 }}\n            className='mb-12 flex w-full max-w-lg flex-col items-center gap-4 sm:flex-row'\n          >\n            <input\n              type='email'\n              name='email'\n              placeholder={emailPlaceholder}\n              className='w-full rounded-full border border-zinc-300 bg-white px-6 py-3 text-sm text-zinc-900 placeholder-zinc-500 transition-all focus:border-zinc-900 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder-zinc-400 dark:focus:border-zinc-100 dark:focus:ring-zinc-100'\n            />\n            <button\n              type='button'\n              className='w-full whitespace-nowrap rounded-full bg-zinc-900 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-zinc-800 sm:w-auto dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200'\n            >\n              {buttonText}\n            </button>\n          </motion.div>\n        </div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, delay: 0.6 }}\n          className='relative mx-auto w-full max-w-sm overflow-hidden'\n          style={{ height: '55vh', maxHeight: '300px' }}\n        >\n          <Iphone showHeader imgUrl={iphoneImgUrl} />\n        </motion.div>\n      </div>\n    </div>\n  );\n}"
    }
  ]
}