{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "landing-page",
  "type": "registry:block",
  "title": "Landing Page",
  "description": "A comprehensive landing page with hero, pricing, about, and contact sections.",
  "dependencies": [
    "@icons-pack/react-simple-icons",
    "@number-flow/react",
    "media-chrome",
    "react-fast-marquee"
  ],
  "registryDependencies": [
    "button",
    "card",
    "badge",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/landing-page/landing-page.tsx",
      "content": "\"use client\"\n\nimport { cn } from '@/lib/utils';\nimport { Button } from '@/components/ui/button';\nimport { useEffect, useState } from 'react';\n\nimport {\n  SiApple,\n  SiFacebook,\n  SiGithub,\n  SiGoogle,\n  SiInstagram,\n  SiX,\n  SiYoutube,\n} from '@icons-pack/react-simple-icons';\nimport {\n  Announcement,\n  AnnouncementTag,\n  AnnouncementTitle,\n} from '@/components/ui/announcement';\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeFade,\n  MarqueeItem,\n} from '@/components/ui/marquee';\nimport {\n  VideoPlayer,\n  VideoPlayerContent,\n  VideoPlayerControlBar,\n  VideoPlayerMuteButton,\n  VideoPlayerPlayButton,\n  VideoPlayerSeekBackwardButton,\n  VideoPlayerSeekForwardButton,\n  VideoPlayerTimeDisplay,\n  VideoPlayerTimeRange,\n  VideoPlayerVolumeRange,\n} from '@/components/ui/video-player';\nimport NumberFlow from '@number-flow/react';\nimport { Badge } from '@/components/ui/badge';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { ArrowRight, BadgeCheck, Mail, Phone, MapPin, Send } from 'lucide-react';\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';\n\ninterface FloatingNavProps {\n  className?: string;\n}\n\nconst navItems = [\n  { label: 'Hero', href: '#hero' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'About', href: '#about' },\n  { label: 'Contact', href: '#contact' },\n];\n\nconst logos = [\n  {\n    name: 'GitHub',\n    icon: SiGithub,\n    url: 'https://github.com',\n  },\n  {\n    name: 'Facebook',\n    icon: SiFacebook,\n    url: 'https://facebook.com',\n  },\n  {\n    name: 'Google',\n    icon: SiGoogle,\n    url: 'https://google.com',\n  },\n  {\n    name: 'X',\n    icon: SiX,\n    url: 'https://x.com',\n  },\n  {\n    name: 'Apple',\n    icon: SiApple,\n    url: 'https://apple.com',\n  },\n  {\n    name: 'Instagram',\n    icon: SiInstagram,\n    url: 'https://instagram.com',\n  },\n  {\n    name: 'YouTube',\n    icon: SiYoutube,\n    url: 'https://youtube.com',\n  },\n];\n\nconst plans = [\n  {\n    id: 'hobby',\n    name: 'Hobby',\n    price: {\n      monthly: 'Free forever',\n      yearly: 'Free forever',\n    },\n    description:\n      'The perfect starting place for your web app or personal project.',\n    features: [\n      '50 API calls / month',\n      '60 second checks',\n      'Single-user account',\n      '5 monitors',\n      'Basic email support',\n    ],\n    cta: 'Get started for free',\n  },\n  {\n    id: 'pro',\n    name: 'Pro',\n    price: {\n      monthly: 90,\n      yearly: 75,\n    },\n    description: 'Everything you need to build and scale your business.',\n    features: [\n      'Unlimited API calls',\n      '30 second checks',\n      'Multi-user account',\n      '10 monitors',\n      'Priority email support',\n    ],\n    cta: 'Subscribe to Pro',\n    popular: true,\n  },\n  {\n    id: 'enterprise',\n    name: 'Enterprise',\n    price: {\n      monthly: 'Get in touch for pricing',\n      yearly: 'Get in touch for pricing',\n    },\n    description: 'Critical security, performance, observability and support.',\n    features: [\n      'You can DDOS our API.',\n      'Nano-second checks.',\n      'Invite your extended family.',\n      'Unlimited monitors.',\n      \"We'll sit on your desk.\",\n    ],\n    cta: 'Contact us',\n  },\n];\n\n\nconst FloatingNav = ({ className }: FloatingNavProps) => {\n  const [isScrolled, setIsScrolled] = useState(false);\n  const [activeSection, setActiveSection] = useState('hero');\n\n  useEffect(() => {\n    const handleScroll = () => {\n      setIsScrolled(window.scrollY > 50);\n      \n      // Determine active section based on scroll position\n      const sections = navItems.map(item => item.href.substring(1));\n      const scrollPosition = window.scrollY + 100;\n      \n      for (const section of sections) {\n        const element = document.getElementById(section);\n        if (element) {\n          const { offsetTop, offsetHeight } = element;\n          if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {\n            setActiveSection(section);\n            break;\n          }\n        }\n      }\n    };\n\n    window.addEventListener('scroll', handleScroll);\n    handleScroll(); // Call once to set initial state\n    \n    return () => window.removeEventListener('scroll', handleScroll);\n  }, []);\n\n  const scrollToSection = (href: string) => {\n    const element = document.getElementById(href.substring(1));\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth' });\n    }\n  };\n\n  return (\n    <nav\n      className={cn(\n        'fixed top-4 left-1/2 z-50 -translate-x-1/2 transition-all duration-300',\n        'rounded-full border px-6 py-3',\n        isScrolled\n          ? 'bg-background/80 backdrop-blur-md shadow-lg'\n          : 'bg-background/95 backdrop-blur-sm',\n        className\n      )}\n    >\n      <div className=\"flex items-center space-x-1\">\n        {navItems.map((item) => (\n          <Button\n            key={item.href}\n            variant={activeSection === item.href.substring(1) ? 'default' : 'ghost'}\n            size=\"sm\"\n            onClick={() => scrollToSection(item.href)}\n            className=\"text-sm font-medium transition-colors\"\n          >\n            {item.label}\n          </Button>\n        ))}\n      </div>\n    </nav>\n  );\n};\n\n// Hero Section Component\nconst HeroSection = () => (\n  <section id=\"hero\" className=\"min-h-screen flex flex-col gap-16 px-8 py-24 text-center\">\n    <div className=\"flex flex-col items-center justify-center gap-8\">\n      <a href=\"#pricing\">\n        <Announcement>\n          <AnnouncementTag>New</AnnouncementTag>\n          <AnnouncementTitle>Revolutionary SaaS Dashboard Platform</AnnouncementTitle>\n        </Announcement>\n      </a>\n      <h1 className=\"mb-0 text-balance font-medium text-6xl md:text-7xl xl:text-[5.25rem] bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent\">\n        Build. Scale. Succeed.\n      </h1>\n      <p className=\"mt-0 mb-0 text-balance text-xl text-muted-foreground max-w-3xl\">\n        Transform your business with our cutting-edge dashboard platform. \n        Streamline operations, analyze data, and accelerate growth with \n        beautiful, responsive components designed for the modern web.\n      </p>\n      <div className=\"flex flex-col sm:flex-row items-center gap-4 mt-4\">\n        <Button asChild size=\"lg\" className=\"text-lg px-8 py-4 h-14\">\n          <a href=\"#pricing\" className=\"flex items-center no-underline\">\n            Start Free Trial\n            <ArrowRight className=\"ml-2 h-5 w-5\" />\n          </a>\n        </Button>\n        <Button asChild size=\"lg\" variant=\"outline\" className=\"text-lg px-8 py-4 h-14\">\n          <a href=\"#about\" className=\"no-underline\">\n            Learn More\n          </a>\n        </Button>\n      </div>\n      <div className=\"flex items-center gap-8 mt-8 text-sm text-muted-foreground\">\n        <div className=\"flex items-center gap-2\">\n          <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n          <span>No credit card required</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n          <span>14-day free trial</span>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n          <span>Cancel anytime</span>\n        </div>\n      </div>\n    </div>\n    <section className=\"flex flex-col items-center justify-center gap-8 rounded-xl bg-secondary py-12 pb-18\">\n      <p className=\"mb-0 text-balance font-medium text-muted-foreground\">\n        Trusted by teams at leading companies worldwide\n      </p>\n      <div className=\"flex size-full items-center justify-center\">\n        <Marquee>\n          <MarqueeFade className=\"from-secondary\" side=\"left\" />\n          <MarqueeFade className=\"from-secondary\" side=\"right\" />\n          <MarqueeContent pauseOnHover={false}>\n            {logos.map((logo) => (\n              <MarqueeItem className=\"mx-16 size-12\" key={logo.name}>\n                <a href={logo.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                  <logo.icon className=\"size-full opacity-70 hover:opacity-100 transition-opacity\" />\n                </a>\n              </MarqueeItem>\n            ))}\n          </MarqueeContent>\n        </Marquee>\n      </div>\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 mt-8 max-w-4xl\">\n        <div className=\"text-center\">\n          <div className=\"text-3xl font-bold text-foreground\">10k+</div>\n          <div className=\"text-sm text-muted-foreground\">Active Users</div>\n        </div>\n        <div className=\"text-center\">\n          <div className=\"text-3xl font-bold text-foreground\">99.9%</div>\n          <div className=\"text-sm text-muted-foreground\">Uptime</div>\n        </div>\n        <div className=\"text-center\">\n          <div className=\"text-3xl font-bold text-foreground\">24/7</div>\n          <div className=\"text-sm text-muted-foreground\">Support</div>\n        </div>\n      </div>\n    </section>\n    <div className=\"relative\">\n      <div className=\"absolute inset-0 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-lg blur-3xl -z-10\"></div>\n      <VideoPlayer className=\"overflow-hidden rounded-lg border shadow-2xl\">\n        <VideoPlayerContent\n          key=\"video-content\"\n          crossOrigin=\"\"\n          muted\n          preload=\"metadata\"\n          poster=\"https://shadcn-elvinlari-registry.vercel.app/bunny.png\"\n          slot=\"media\"\n          src=\"http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4\"\n        />\n        <VideoPlayerControlBar key=\"control-bar\">\n          <VideoPlayerPlayButton key=\"play-button\" />\n          <VideoPlayerSeekBackwardButton key=\"seek-backward\" />\n          <VideoPlayerSeekForwardButton key=\"seek-forward\" />\n          <VideoPlayerTimeRange key=\"time-range\" />\n          <VideoPlayerTimeDisplay key=\"time-display\" showDuration />\n          <VideoPlayerMuteButton key=\"mute-button\" />\n          <VideoPlayerVolumeRange key=\"volume-range\" />\n        </VideoPlayerControlBar>\n      </VideoPlayer>\n    </div>\n  </section>\n);\n\n// Pricing Section Component\nconst PricingSection = () => {\n  const [frequency, setFrequency] = useState<string>('monthly');\n  \n  return (\n    <section id=\"pricing\" className=\"min-h-screen flex flex-col gap-16 px-8 py-24 text-center\">\n      <div className=\"flex flex-col items-center justify-center gap-8\">\n        <h1 className=\"mb-0 text-balance font-medium text-5xl tracking-tighter!\">\n          Simple, transparent pricing\n        </h1>\n        <p className=\"mx-auto mt-0 mb-0 max-w-2xl text-balance text-lg text-muted-foreground\">\n          Managing a business is hard enough, so why not make your life easier?\n          Our pricing plans are simple, transparent and scale with you.\n        </p>\n        <Tabs defaultValue={frequency} onValueChange={setFrequency}>\n          <TabsList>\n            <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\n            <TabsTrigger value=\"yearly\">\n              Yearly\n              <Badge variant=\"secondary\">20% off</Badge>\n            </TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <div className=\"mt-8 grid w-full max-w-4xl gap-4 lg:grid-cols-3\">\n          {plans.map((plan) => (\n            <Card\n              className={cn(\n                'relative w-full text-left',\n                plan.popular && 'ring-2 ring-primary'\n              )}\n              key={plan.id}\n            >\n              {plan.popular && (\n                <Badge className=\"-translate-x-1/2 -translate-y-1/2 absolute top-0 left-1/2 rounded-full\">\n                  Popular\n                </Badge>\n              )}\n              <CardHeader>\n                <CardTitle className=\"font-medium text-xl\">\n                  {plan.name}\n                </CardTitle>\n                <CardDescription>\n                  <p>{plan.description}</p>\n                  {typeof plan.price[frequency as keyof typeof plan.price] ===\n                  'number' ? (\n                    <NumberFlow\n                      className=\"font-medium text-foreground\"\n                      format={{\n                        style: 'currency',\n                        currency: 'USD',\n                        maximumFractionDigits: 0,\n                      }}\n                      suffix={`/month, billed ${frequency}.`}\n                      value={\n                        plan.price[\n                          frequency as keyof typeof plan.price\n                        ] as number\n                      }\n                    />\n                  ) : (\n                    <span className=\"font-medium text-foreground\">\n                      {plan.price[frequency as keyof typeof plan.price]}.\n                    </span>\n                  )}\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"grid gap-2\">\n                {plan.features.map((feature, index) => (\n                  <div\n                    className=\"flex items-center gap-2 text-muted-foreground text-sm\"\n                    key={index}\n                  >\n                    <BadgeCheck className=\"h-4 w-4\" />\n                    {feature}\n                  </div>\n                ))}\n              </CardContent>\n              <CardFooter>\n                <Button\n                  className=\"w-full\"\n                  variant={plan.popular ? 'default' : 'secondary'}\n                >\n                  {plan.cta}\n                  <ArrowRight className=\"ml-2 h-4 w-4\" />\n                </Button>\n              </CardFooter>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\n// About Section Component\nconst AboutSection = () => (\n  <section id=\"about\" className=\"min-h-screen flex flex-col justify-center items-center px-8 py-24 text-center\">\n    <div className=\"max-w-4xl mx-auto\">\n      <h1 className=\"mb-8 text-balance font-medium text-5xl tracking-tighter\">\n        About Our Platform\n      </h1>\n      <div className=\"grid md:grid-cols-2 gap-12 items-center\">\n        <div className=\"text-left\">\n          <h2 className=\"text-2xl font-semibold mb-4\">Our Mission</h2>\n          <p className=\"text-lg text-muted-foreground mb-6\">\n            We're dedicated to providing developers with the best tools and components\n            to build exceptional web applications. Our platform combines modern design\n            principles with cutting-edge technology.\n          </p>\n          <h2 className=\"text-2xl font-semibold mb-4\">Why Choose Us?</h2>\n          <ul className=\"space-y-3 text-muted-foreground\">\n            <li className=\"flex items-center gap-2\">\n              <BadgeCheck className=\"h-5 w-5 text-primary\" />\n              Modern, responsive design components\n            </li>\n            <li className=\"flex items-center gap-2\">\n              <BadgeCheck className=\"h-5 w-5 text-primary\" />\n              Comprehensive documentation\n            </li>\n            <li className=\"flex items-center gap-2\">\n              <BadgeCheck className=\"h-5 w-5 text-primary\" />\n              Active community support\n            </li>\n            <li className=\"flex items-center gap-2\">\n              <BadgeCheck className=\"h-5 w-5 text-primary\" />\n              Regular updates and improvements\n            </li>\n          </ul>\n        </div>\n        <div className=\"bg-secondary rounded-lg p-8\">\n          <h3 className=\"text-xl font-semibold mb-4\">Get Started Today</h3>\n          <p className=\"text-muted-foreground mb-6\">\n            Join thousands of developers who are already building amazing applications\n            with our platform.\n          </p>\n          <Button className=\"w-full\">\n            Start Building\n            <ArrowRight className=\"ml-2 h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n    </div>\n  </section>\n);\n\n// Contact Section Component\nconst ContactSection = () => (\n  <section id=\"contact\" className=\"min-h-screen flex flex-col justify-center items-center px-8 py-24 bg-gradient-to-br from-primary/5 to-secondary/10\">\n    <div className=\"max-w-6xl mx-auto w-full\">\n      <div className=\"text-center mb-16\">\n        <h1 className=\"mb-4 text-balance font-medium text-5xl tracking-tighter\">\n          Let's Build Something Amazing Together\n        </h1>\n        <p className=\"text-xl text-muted-foreground max-w-3xl mx-auto\">\n          Ready to transform your business? Get in touch with our team and let's discuss \n          how we can help you achieve your goals.\n        </p>\n      </div>\n      \n      <div className=\"grid lg:grid-cols-2 gap-12 items-start\">\n        {/* Contact Information */}\n        <div className=\"space-y-8\">\n          <div>\n            <h2 className=\"text-2xl font-semibold mb-6\">Get in Touch</h2>\n            <div className=\"space-y-6\">\n              <div className=\"flex items-start gap-4\">\n                <div className=\"bg-primary/10 p-3 rounded-full\">\n                  <Mail className=\"h-6 w-6 text-primary\" />\n                </div>\n                <div>\n                  <h3 className=\"font-semibold\">Email Us</h3>\n                  <p className=\"text-muted-foreground\">hello@yourcompany.com</p>\n                  <p className=\"text-sm text-muted-foreground\">We'll respond within 24 hours</p>\n                </div>\n              </div>\n              \n              <div className=\"flex items-start gap-4\">\n                <div className=\"bg-primary/10 p-3 rounded-full\">\n                  <Phone className=\"h-6 w-6 text-primary\" />\n                </div>\n                <div>\n                  <h3 className=\"font-semibold\">Call Us</h3>\n                  <p className=\"text-muted-foreground\">+1 (555) 123-4567</p>\n                  <p className=\"text-sm text-muted-foreground\">Mon-Fri 9AM-6PM EST</p>\n                </div>\n              </div>\n              \n              <div className=\"flex items-start gap-4\">\n                <div className=\"bg-primary/10 p-3 rounded-full\">\n                  <MapPin className=\"h-6 w-6 text-primary\" />\n                </div>\n                <div>\n                  <h3 className=\"font-semibold\">Visit Us</h3>\n                  <p className=\"text-muted-foreground\">123 Innovation Street<br />Tech Valley, CA 94000</p>\n                  <p className=\"text-sm text-muted-foreground\">Open office hours</p>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div className=\"bg-card border rounded-lg p-6\">\n            <h3 className=\"font-semibold mb-4\">Why Work With Us?</h3>\n            <ul className=\"space-y-3\">\n              <li className=\"flex items-center gap-2\">\n                <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n                <span className=\"text-sm\">Expert team with 10+ years experience</span>\n              </li>\n              <li className=\"flex items-center gap-2\">\n                <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n                <span className=\"text-sm\">Proven track record with 500+ projects</span>\n              </li>\n              <li className=\"flex items-center gap-2\">\n                <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n                <span className=\"text-sm\">24/7 dedicated support</span>\n              </li>\n              <li className=\"flex items-center gap-2\">\n                <BadgeCheck className=\"h-4 w-4 text-green-500\" />\n                <span className=\"text-sm\">Money-back guarantee</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n        \n        {/* Contact Form */}\n        <Card className=\"shadow-lg\">\n          <CardHeader>\n            <CardTitle className=\"text-2xl\">Send us a Message</CardTitle>\n            <CardDescription>\n              Fill out the form below and we'll get back to you as soon as possible.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid md:grid-cols-2 gap-4\">\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">First Name</label>\n                <input \n                  className=\"w-full px-3 py-2 border rounded-md bg-background\" \n                  placeholder=\"John\"\n                />\n              </div>\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">Last Name</label>\n                <input \n                  className=\"w-full px-3 py-2 border rounded-md bg-background\" \n                  placeholder=\"Doe\"\n                />\n              </div>\n            </div>\n            <div className=\"space-y-2\">\n              <label className=\"text-sm font-medium\">Email</label>\n              <input \n                type=\"email\"\n                className=\"w-full px-3 py-2 border rounded-md bg-background\" \n                placeholder=\"john@example.com\"\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <label className=\"text-sm font-medium\">Company</label>\n              <input \n                className=\"w-full px-3 py-2 border rounded-md bg-background\" \n                placeholder=\"Your Company\"\n              />\n            </div>\n            <div className=\"space-y-2\">\n              <label className=\"text-sm font-medium\">Message</label>\n              <textarea \n                className=\"w-full px-3 py-2 border rounded-md bg-background min-h-[120px]\" \n                placeholder=\"Tell us about your project...\"\n              />\n            </div>\n          </CardContent>\n          <CardFooter>\n            <Button className=\"w-full\" size=\"lg\">\n              Send Message\n              <Send className=\"ml-2 h-4 w-4\" />\n            </Button>\n          </CardFooter>\n        </Card>\n      </div>\n      \n      {/* CTA Section */}\n      <div className=\"mt-16 text-center bg-card border rounded-lg p-8\">\n        <h3 className=\"text-2xl font-semibold mb-4\">Ready to Get Started?</h3>\n        <p className=\"text-muted-foreground mb-6 max-w-2xl mx-auto\">\n          Don't wait! Join thousands of satisfied customers who have transformed \n          their businesses with our platform.\n        </p>\n        <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n          <Button size=\"lg\" className=\"px-8\">\n            Start Free Trial\n            <ArrowRight className=\"ml-2 h-4 w-4\" />\n          </Button>\n          <Button size=\"lg\" variant=\"outline\" className=\"px-8\">\n            Schedule Demo\n          </Button>\n        </div>\n      </div>\n    </div>\n  </section>\n);\n\nexport default function Index() {\n  return (\n    <div className=\"relative\">\n      <FloatingNav />\n      <HeroSection />\n      <PricingSection />\n      <AboutSection />\n      <ContactSection />\n    </div>\n  )\n}\n\n",
      "type": "registry:block"
    },
    {
      "path": "registry/new-york/blocks/landing-page/components/announcement.tsx",
      "content": "import type { ComponentProps, HTMLAttributes } from 'react';\nimport { Badge } from '@/components/ui/badge';\nimport { cn } from '@/lib/utils';\nexport type AnnouncementProps = ComponentProps<typeof Badge> & {\n  themed?: boolean;\n};\nexport const Announcement = ({\n  variant = 'outline',\n  themed = false,\n  className,\n  ...props\n}: AnnouncementProps) => (\n  <Badge\n    className={cn(\n      'group max-w-full gap-2 rounded-full bg-background px-3 py-0.5 font-medium shadow-sm transition-all',\n      'hover:shadow-md',\n      themed && 'announcement-themed border-foreground/5',\n      className\n    )}\n    variant={variant}\n    {...props}\n  />\n);\nexport type AnnouncementTagProps = HTMLAttributes<HTMLDivElement>;\nexport const AnnouncementTag = ({\n  className,\n  ...props\n}: AnnouncementTagProps) => (\n  <div\n    className={cn(\n      '-ml-2.5 shrink-0 truncate rounded-full bg-foreground/5 px-2.5 py-1 text-xs',\n      'group-[.announcement-themed]:bg-background/60',\n      className\n    )}\n    {...props}\n  />\n);\nexport type AnnouncementTitleProps = HTMLAttributes<HTMLDivElement>;\nexport const AnnouncementTitle = ({\n  className,\n  ...props\n}: AnnouncementTitleProps) => (\n  <div\n    className={cn('flex items-center gap-1 truncate py-1', className)}\n    {...props}\n  />\n);",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/blocks/landing-page/components/marquee.tsx",
      "content": "'use client';\nimport type { HTMLAttributes } from 'react';\nimport type { MarqueeProps as FastMarqueeProps } from 'react-fast-marquee';\nimport FastMarquee from 'react-fast-marquee';\nimport { cn } from '@/lib/utils';\nexport type MarqueeProps = HTMLAttributes<HTMLDivElement>;\nexport const Marquee = ({ className, ...props }: MarqueeProps) => (\n  <div\n    className={cn('relative w-full overflow-hidden', className)}\n    {...props}\n  />\n);\nexport type MarqueeContentProps = FastMarqueeProps;\nexport const MarqueeContent = ({\n  loop = 0,\n  autoFill = true,\n  pauseOnHover = true,\n  ...props\n}: MarqueeContentProps) => (\n  <FastMarquee\n    autoFill={autoFill}\n    loop={loop}\n    pauseOnHover={pauseOnHover}\n    {...props}\n  />\n);\nexport type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {\n  side: 'left' | 'right';\n};\nexport const MarqueeFade = ({\n  className,\n  side,\n  ...props\n}: MarqueeFadeProps) => (\n  <div\n    className={cn(\n      'absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent',\n      side === 'left' ? 'left-0 bg-gradient-to-r' : 'right-0 bg-gradient-to-l',\n      className\n    )}\n    {...props}\n  />\n);\nexport type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;\nexport const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (\n  <div\n    className={cn('mx-2 flex-shrink-0 object-contain', className)}\n    {...props}\n  />\n);",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/blocks/landing-page/components/video-player.tsx",
      "content": "'use client';\nimport {\n  MediaControlBar,\n  MediaController,\n  MediaMuteButton,\n  MediaPlayButton,\n  MediaSeekBackwardButton,\n  MediaSeekForwardButton,\n  MediaTimeDisplay,\n  MediaTimeRange,\n  MediaVolumeRange,\n} from 'media-chrome/react';\nimport type { ComponentProps, CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nexport type VideoPlayerProps = ComponentProps<typeof MediaController>;\nconst variables = {\n  '--media-primary-color': 'var(--primary)',\n  '--media-secondary-color': 'var(--background)',\n  '--media-text-color': 'var(--foreground)',\n  '--media-background-color': 'var(--background)',\n  '--media-control-hover-background': 'var(--accent)',\n  '--media-font-family': 'var(--font-sans)',\n  '--media-live-button-icon-color': 'var(--muted-foreground)',\n  '--media-live-button-indicator-color': 'var(--destructive)',\n  '--media-range-track-background': 'var(--border)',\n} as CSSProperties;\nexport const VideoPlayer = ({ style, ...props }: VideoPlayerProps) => (\n  <MediaController\n    suppressHydrationWarning={true}\n    style={{\n      ...variables,\n      ...style,\n    }}\n    {...props}\n  />\n);\nexport type VideoPlayerControlBarProps = ComponentProps<typeof MediaControlBar>;\nexport const VideoPlayerControlBar = (props: VideoPlayerControlBarProps) => (\n  <MediaControlBar {...props} />\n);\nexport type VideoPlayerTimeRangeProps = ComponentProps<typeof MediaTimeRange>;\nexport const VideoPlayerTimeRange = ({\n  className,\n  ...props\n}: VideoPlayerTimeRangeProps) => (\n  <MediaTimeRange className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerTimeDisplayProps = ComponentProps<\n  typeof MediaTimeDisplay\n>;\nexport const VideoPlayerTimeDisplay = ({\n  className,\n  ...props\n}: VideoPlayerTimeDisplayProps) => (\n  <MediaTimeDisplay className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerVolumeRangeProps = ComponentProps<\n  typeof MediaVolumeRange\n>;\nexport const VideoPlayerVolumeRange = ({\n  className,\n  ...props\n}: VideoPlayerVolumeRangeProps) => (\n  <MediaVolumeRange className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerPlayButtonProps = ComponentProps<typeof MediaPlayButton>;\nexport const VideoPlayerPlayButton = ({\n  className,\n  ...props\n}: VideoPlayerPlayButtonProps) => (\n  <MediaPlayButton className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerSeekBackwardButtonProps = ComponentProps<\n  typeof MediaSeekBackwardButton\n>;\nexport const VideoPlayerSeekBackwardButton = ({\n  className,\n  ...props\n}: VideoPlayerSeekBackwardButtonProps) => (\n  <MediaSeekBackwardButton className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerSeekForwardButtonProps = ComponentProps<\n  typeof MediaSeekForwardButton\n>;\nexport const VideoPlayerSeekForwardButton = ({\n  className,\n  ...props\n}: VideoPlayerSeekForwardButtonProps) => (\n  <MediaSeekForwardButton className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerMuteButtonProps = ComponentProps<typeof MediaMuteButton>;\nexport const VideoPlayerMuteButton = ({\n  className,\n  ...props\n}: VideoPlayerMuteButtonProps) => (\n  <MediaMuteButton className={cn('p-2.5', className)} {...props} />\n);\nexport type VideoPlayerContentProps = ComponentProps<'video'>;\nexport const VideoPlayerContent = ({\n  className,\n  ...props\n}: VideoPlayerContentProps) => (\n  <video \n    className={cn('mt-0 mb-0', className)} \n    suppressHydrationWarning={true}\n    {...props} \n  />\n);",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@layer base": {
      "html": {
        "scroll-behavior": "smooth"
      }
    }
  }
}