Build a high-conversion, mobile-responsive landing page for a startup called 'Kavach AI'.
Design Vibe: Clean, modern, and trustworthy. Use a professional color palette: Deep Navy Blue (#1A2B4C) as the primary color and Emerald Green (#2ECC71) for action buttons and trust indicators. Use a sans-serif font like Inter.
Layout Sections:
Header: Minimalist logo on the left (Kavach AI) and a 'Join Waitlist' button on the right.
Hero Section: A bold headline: 'Stop Professional Fraud. Verify Anyone in 60 Seconds.' A sub-headline: 'Get the Digital Kundli and Trust Score of any Broker, Doctor, or CA instantly. Join 500+ early birds.'
Waitlist Form: A clean input field for 'Email Address' or 'Phone Number' with a prominent Emerald Green button saying 'Get Early Access'.
Feature Grid: Three cards with icons:
'Real-time Verification' (Fetching from GST, RERA, MCA).
'AI Trust Score' (0-100 scoring based on legal and compliance history).
'Certified Reports' (Downloadable PDF summaries).
Social Proof: A small section saying 'Trusted by 500+ beta testers' with a placeholder for 4-5 logos.
Footer: Simple links for 'Privacy Policy' and 'Contact Us'.
Interactive Element: Add a mock 'Search Bar' in the hero section that shows a sample 'Trust Score: 88/100' animation when clicked, to demonstrate the product's value."
Now let me check for existing UI components that might be useful and search for any example templates:
Good, I have a solid understanding of the codebase. The user provided very detailed design specs so I'll skip design inspiration and build directly. Let me now update the globals.css, layout.tsx, and create all the components.
Now let me create all the components:
Now let me create the main page that assembles everything:
Now let me update the tailwind.config.ts to ensure the custom colors from CSS variables work properly with Tailwind and set the Inter font:
The landing page for Kavach AI is now built with all the sections you requested. Here's what was implemented:
You can send messages while the preview loads