• Pricing cards: middle tier 10% larger with "Most Popular" badge
• FAQ accordion (collapsed by default)
• All CTA buttons anchor scroll to pricing section
=== REFERENCE ===
• Design quality benchmark: https://v0-health-diagnostics-website.vercel.app/
• Use dark navy + electric blue color scheme
• Card-based layout with subtle shadows and glass effects
• Professional sports analytics aesthetic
Now I have a clear picture of both the content requirements and the reference design benchmark. Let me check what UI components are available.
Now let me set up the project. I'll create a todo list to track progress, then start building.
Let me start by updating the theme, fonts, and globals to match the dark navy + electric blue aesthetic, and then build all the components.
Good. Now let me move to the next task and build all the components.
Now let me build all the section components. I'll create them in parallel batches.
Now let me create the Pricing, FAQ, Final CTA, and Footer components.
Now let me wire everything together in the page.
The FilmRoom AI landing page is now fully built with all 16 sections assembled in order. Key implementation details: the Pricing section features the Season Tracker (middle tier) scaled 10% larger with a "Most Popular" badge using md:scale-[1.1] and a highlighted glass card effect; the FAQ uses the shadcn Accordion component with collapsible mode and no default value so all items start collapsed; and every CTA button (hero, navbar, final CTA) uses <a href="#pricing"> to smooth-scroll to the pricing section. The dark navy + electric blue theme is implemented via custom CSS tokens with glass-morphism card utilities, Inter/Montserrat/Geist Mono font stack, and subtle glow effects matching the reference site's premium sports-tech aesthetic.
Let me first study the reference website and understand the current codebase state.
Now let me read the existing components and the content attachments to understand what we're working with.
Now let me read the remaining existing components to fully understand the codebase before rewriting.
Now I have a thorough understanding of both the reference site (Metrica Sports) and the current FilmRoom AI codebase. The Metrica Sports site has a very specific design language - dark background, clean sections, logo marquee, product showcases with dual product focus (PlayBase/Nexus), feature tabs with icons, testimonial carousel, blog section, FAQ accordion, and a final CTA. I need to completely redesign this to match their aesthetic while keeping the FilmRoom AI content.
Let me set up a task list and start building.
Now let me update the theme and globals first. The Metrica Sports site uses a very dark background (#000/near-black), bright green/teal accents, clean white text, and a modern sans-serif font. It has a much more minimal, clean feel compared to what we have.
Now let me update the layout to match:
Good. Now let me move to task 2 and rebuild all the section components in the Metrica Sports style.
Now let me rebuild all components. I'll write them in batches, starting with the Navbar and Hero in Metrica Sports style.
Now let me build the Products section (replacing Problem), Features (with tab pills like Metrica), and Deep Dive sections:
Now let me rebuild the stats section, pricing, FAQ, final CTA, and footer:
Now let me move to the final task - wire up the page and remove unused components.
Now let me clean up the unused component files:
The site has been completely restructured to model the Metrica Sports website. The theme was shifted from dark navy + electric blue to a near-black (#050505) background with clean white text and blue/green accents, matching Metrica's ultra-dark, minimal aesthetic. The page now follows their section flow: a hero with a club logo marquee, dual product showcase cards (Pro Analysis / Quick Review mirroring PlayBase / Nexus), animated stats bar, features section with selectable pill tabs, step-by-step "How It Works" grid, testimonial carousel with navigation dots, pricing cards with the middle tier scaled 10% larger with a "Most Popular" badge, collapsible FAQ accordion, and a full CTA + structured footer with column links. All CTA buttons anchor-scroll to the pricing section, and 7 unused component files from the old layout were cleaned up.
You can send messages while the preview loads