🌟🌈 A flagship product launch experience for Verdant, engineered at the intersection of biological fluidity and mechanical precision. This project merges high-end "Quiet Luxury" aesthetics with legacy engineering specifications from the Gaia/Aether/Veloce series.
- Visual Identity: High-contrast "Neon Engineered" palette (#11D411) on deep forest textures.
- Typography: Editorial contrast pairing Playfair Display (Serif) with Inter (Sans).
- Motion Strategy: Organic Kinetic principles using Framer Motion springs and GSAP scroll-linked choreography.
- Glassmorphism: Hand-crafted glass panels with 12px backdrop blur and micro-neon border highlights.
- Engine: Vite + React + TypeScript
- Styling: Tailwind CSS v4 (Integrated with custom
@themetokens) - Animation: Framer Motion (Gestures & Physics) + GSAP (Scroll Storytelling)
- Icons: Lucide React + Custom SVG Brand Elements
- Cinematic Hero: Misty forest staging with parallax typography and floating centerpiece.
- Feature Discovery: Asymmetrical glass card grid with interaction-linked staggered entries.
- 3D Viewer Hybrid: 360° inspection module with reactive hotspots and state-linked morphing.
- Performance Metrics: Industrial-grade circular dials with precision animated stat counters.
- Purchase Engine: Sticky "Veloce Lab" module with serialized pre-order logic and confirmation states.
src/
├── components/
│ ├── primitives/ # Button, Card, Text (Atomic UI)
│ ├── motion/ # Loader, Reveal wrappers
│ └── ...
├── sections/ # Hero, Features, Viewer, Metrics, Purchase
├── lib/ # Core utilities (cn helper)
├── index.css # Design tokens & legacy specs
└── App.tsx # Assembly & Global Navigation
-
Clone the repository:
git clone https://github.com/pro-grammer-SD/verdant.git
-
Install dependencies:
npm install
-
Run development server:
npm run dev
-
Production Build:
npm run build
🌿 Designed & Engineered for the Planet.
© 2026 Verdant Engineered Dynamics