Now let me read the existing layout.tsx, globals.css, and tailwind.config.ts to understand the current setup:
Now I have a good understanding of the codebase. Let me install the lucide-react icons package (which I'll need for icons) and then build the school landing page. Let me first check if lucide-react is already installed:
Lucide-react is already installed. Now let me generate the hero image for the school campus and then build all the components. I'll start by updating the globals.css with the new navy blue, white, and gold theme, then create the components.
Now let me update the globals.css with the navy blue, white, and gold theme, then create all the components:
Now let me update the layout.tsx to use the Inter font and update the metadata for the school:
I've built a complete, professional landing page for Riverside Academy with all the requested sections. Here's what I created:
Components Built:
- Navbar - Sticky navigation with logo, nav links, "Apply Now" button, and mobile hamburger menu using Sheet component
- Hero Section - Full-width hero with campus background image, dark overlay, headline, subheadline, and two CTA buttons
- Stats Banner - Navy blue strip with 4 statistics and icons (50+ Years, 12:1 Ratio, 100% Acceptance, 200+ Awards)
- Academics Section - 3 cards for Primary, Middle, and High School programs with icons and "Learn More" links
- Campus Life Section - Grid of 5 images showcasing sports, arts, STEM clubs, music, and theater
- CTA Section - Soft blue background with admissions call-to-action and "Start Application" button
- Footer - 4-column layout with logo/bio, quick links, contact info, social icons, and copyright bar
Theme & Styling:
- Deep navy blue primary color (
oklch(0.25 0.06 250)) - Warm gold accent color (
oklch(0.78 0.15 85)) - Clean Inter font family
- Soft rounded corners, subtle shadows, and ample whitespace
- All buttons have hover states with color changes and subtle scale transitions
- Fully responsive design that works on mobile, tablet, and desktop