STRUCTURE — Premium AI Logistics Landing Page

An insanely premium, visually aggressive, luxury enterprise website for STRUCTURE, an AI logistics company.

🎨 Design Philosophy

• Apple-level polish with automotive brand cinematics
• Fashion week minimalism with intentional pixels
• Luxury infrastructure software aesthetic
• 60fps smooth animations with cinematic easing
• Massive graphics (50-70% of screen per section)
• Unique animations for each section

✨ Features

• Premium Glass Header — Floating navigation with backdrop blur
• Hero Section — Massive 3D wireframe scene with animated cargo plane
• Chaos to Order — Visual transformation from tangled routes to structured flow
• Intelligent Core — Orbital animation showing 6-step process flow
• Route Optimization — 3D globe with learning route animations
• Load Matching — Physics-based capacity matching with geometric shapes
• Demand Forecasting — Elegant data visualization with predictive curves
• Document Intelligence — Paper-to-data transformation animation
• Enterprise Scale — Network expansion with 100+ animated nodes
• Metrics Section — Animated counters with unique visualizations
• Final CTA — Ambient animation with premium button effects

🚀 Tech Stack

• Next.js 14 — React framework
• TypeScript — Type safety
• Tailwind CSS — Utility-first styling
• Framer Motion — Smooth animations
• GSAP ScrollTrigger — Scroll-based animations
• Lenis — Smooth scroll library
• Canvas API — Custom animations

📦 Installation

1. Clone or navigate to the project directory:

   cd structurewebsite

2. Install dependencies:

   npm install

3. Run development server:

   npm run dev

4. Open in browser:

   http://localhost:3000
   

🏗️ Build for Production

npm run build
npm start

🎯 Animation Principles

Every section features:

• ✅ Unique motion system (no repeats)
• ✅ Smooth cinematic easing (cubic-bezier curves)
• ✅ Scroll-triggered reveals (intersection observer)
• ✅ Idle animations (subtle, always moving)
• ✅ Parallax depth where appropriate
• ✅ Particle effects for beauty
• ✅ Gradient animations with subtle shifts

🎨 Visual System

Colors:

• Deep charcoal black backgrounds (#0a0a0a)
• Pure white typography
• Silver-to-graphite gradients
• Soft glows and rim lighting

Typography:

• Font: Montserrat (300-900 weights)
• Headlines: MASSIVE (72px+), bold, dramatic
• Body: Restrained, elegant, readable

Effects:

• Gradients everywhere
• Blur effects and depth
• Glass morphism
• 3D transforms
• Luxury materials

📁 Project Structure

structurewebsite/
├── app/
│   ├── globals.css          # Global styles with noise texture
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Main landing page
├── components/
│   ├── Header.tsx            # Premium glass header
│   ├── Hero.tsx              # Hero with wireframe animation
│   ├── ChaosSection.tsx      # Chaos-to-order visualization
│   ├── IntelligenceSection.tsx  # Orbital core animation
│   ├── RouteSection.tsx      # 3D route optimization
│   ├── LoadSection.tsx       # Capacity matching
│   ├── ForecastSection.tsx   # Predictive data viz
│   ├── DocumentSection.tsx   # Document transformation
│   ├── ScaleSection.tsx      # Network expansion
│   ├── MetricsSection.tsx    # Animated metrics
│   └── FinalCTA.tsx          # Final call-to-action
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── next.config.js

🎬 What This Feels Like

• Opening a luxury car door
• Unboxing an iPhone
• Watching a Rolex commercial
• High-end architecture visualization
• Premium tech keynote

NOT:

• ❌ Startup landing page
• ❌ SaaS dashboard
• ❌ Corporate website
• ❌ UI toolkit demo

🔧 Customization

All animations are self-contained within their components. To customize:

1. Colors: Edit tailwind.config.js and component color values
2. Timing: Adjust animation durations in component files
3. Content: Update text in individual section components
4. Effects: Modify canvas animations in each component

📝 License

This is a custom project for STRUCTURE.

---

Built with luxury in mind. Every pixel is intentional.