Heritage - Luxury Vintage Automobile Landing Page

A premium editorial-style landing page for classic vintage automobiles, inspired by 1950s automotive advertisements, vintage magazine layouts, and luxury museum brochure aesthetics.

Design Philosophy

• Style: Retro editorial luxury + vintage automotive
• Mood: Sophisticated, nostalgic, premium, artistic
• Influences: 1950s automotive ads, Swiss editorial grids, vintage magazine layouts

Features

• Sophisticated retro editorial design
• Cinematic vintage car showcase
• Fully responsive layout
• Smooth animations with Framer Motion
• Film grain and paper texture effects
• Museum-grade visual presentation

Tech Stack

• Framework: Next.js 14 (React)
• Styling: Tailwind CSS
• Animations: Framer Motion
• Icons: Lucide React
• Typography: Playfair Display + Inter
• Language: TypeScript

Getting Started

Installation

npm install

Development

npm run dev

Open http://localhost:3000 to view the site.

Build

npm run build
npm start

Color Palette

• Vintage Paper: #ECE8DA - Primary background
• Midnight Navy: #161625 - Main dark color
• Burnt Orange: #D97A1D - Accent color
• Muted Gold: #C2A36A - Secondary accent
• Soft Gray: #8C877F - Text color
• Card Beige: #E2DDCF - Card backgrounds

Typography

• Display Font: Playfair Display (Black weight for headlines)
• Body Font: Inter (Clean, modern sans-serif)

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with fonts
│   ├── page.tsx            # Main page composition
│   └── globals.css         # Global styles & effects
├── components/
│   ├── Navigation.tsx      # Sticky navigation bar
│   ├── HeroSection.tsx     # Hero with massive typography
│   ├── UniqueSection.tsx   # Unique cars showcase
│   ├── EditorialColumns.tsx # Three-column editorial text
│   ├── HeritageSection.tsx # Heritage image card
│   ├── FeatureGrid.tsx     # Feature highlights
│   ├── FinalTypography.tsx # Large closing section
│   ├── Sidebar.tsx         # Sticky sidebar content
│   └── Footer.tsx          # Minimal footer
├── tailwind.config.js      # Custom colors & fonts
└── package.json

Key Design Elements

Visual Effects

• Grain overlay for vintage paper texture
• Film grain on images
• Subtle vignette effects
• Smooth hover animations
• Card elevation on hover

Typography Hierarchy

• Massive editorial headlines (up to 10rem)
• Tight line-height for impact
• Generous whitespace
• Small uppercase labels
• Elegant serif + sans-serif pairing

Layout Principles

• Asymmetric editorial composition
• Strong visual hierarchy
• Large negative space
• Rounded content cards (28-36px radius)
• Sticky sidebar on desktop

Customization

Changing Colors

Edit tailwind.config.js to modify the color palette:

colors: {
  'vintage-paper': '#ECE8DA',
  'midnight-navy': '#161625',
  // ... add your colors
}

Adjusting Typography

Modify font sizes in app/globals.css:

.text-editorial-huge {
  font-size: clamp(4rem, 12vw, 10rem);
}

Adding Images

Replace placeholder gradients in components with actual images:

<img 
  src="/images/vintage-car.jpg" 
  alt="Vintage car"
  className="w-full h-full object-cover"
/>

Performance

• Optimized with Next.js 14 App Router
• Framer Motion for smooth 60fps animations
• Lazy loading for images
• Minimal JavaScript bundle

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is for demonstration purposes. Customize as needed for your use case.

Credits

Design inspired by vintage automotive advertising and luxury editorial magazines.