Overview
Sedra is a complete landing page for an AI landscape design studio. It opens with a counting preloader and a light photographic hero with the word "Garden" in four languages and a live studio clock. Below it come product cards with a style carousel, a scroll-driven services story where a framed photo opens to full bleed and five service cards slide in, an impact section where a 3D vessel turns as you scroll while the figures count in, testimonials, and an animated footer. A notch header turns to frosted glass on scroll, and Lenis keeps the scroll smooth and in sync with every scene. It ships with a design-system page that renders every colour, type size, spacing step, motion curve and component from one tokens file that Tailwind also reads. Reduced-motion users see every section at rest. Included: the built site, ready to upload, plus the full React + Vite + TypeScript source with Tailwind CSS, Framer Motion and Lenis, all imagery, the design-system page, a buyer guide, credits, and AGENTS.md / CLAUDE.md for AI coding agents.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
