Ferrari Showroom Dubai - Landing Page

A premium, fully-responsive landing page for a Ferrari showroom in Dubai, built with Next.js, FastAPI, and modern web technologies.

🎯 Features

Frontend (Next.js)

• Hero Section: Full-screen video background with gradient overlay and animated CTAs
• Featured Models Grid: Responsive grid showcasing 4 Ferrari models with specs and images
• Virtual Tour CTA: Immersive section promoting 360° showroom experience
• Contact Form: Elegant form with validation and backend integration
• Navigation: Sticky header with smooth scroll behavior and mobile menu
• Premium Design: Ferrari red (#DC0000) and black color scheme with sophisticated typography
• Animations: Smooth transitions and scroll-triggered animations using Framer Motion
• Responsive: Fully optimized for mobile, tablet, and desktop devices

Backend (FastAPI)

• RESTful API: Clean endpoints for models and contact submissions
• CORS Enabled: Configured for frontend communication
• Data Validation: Pydantic models for request validation
• Contact Management: Store and retrieve contact form submissions

📁 Project Structure

ferrari/
├── frontend/                 # Next.js application
│   ├── app/
│   │   ├── page.tsx         # Main landing page
│   │   ├── layout.tsx       # Root layout
│   │   └── globals.css      # Global styles
│   ├── components/
│   │   ├── Navigation.tsx
│   │   ├── HeroSection.tsx
│   │   ├── FeaturedModels.tsx
│   │   ├── VirtualTourCTA.tsx
│   │   └── ContactForm.tsx
│   ├── package.json
│   └── tsconfig.json
│
└── backend/                 # FastAPI application
    ├── main.py             # FastAPI app entry point
    ├── requirements.txt    # Python dependencies
    └── .env               # Environment variables

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• Python 3.8+
• Git

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

The frontend will be available at http://localhost:3000

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Create a virtual environment:

python -m venv venv

3. Activate the virtual environment:

   • Windows: venv\Scripts\activate
   • macOS/Linux: source venv/bin/activate

4. Install dependencies:

pip install -r requirements.txt

5. Run the FastAPI server:

python main.py

The backend API will be available at http://localhost:8000

📡 API Endpoints

Get All Models

GET /api/models

Returns a list of all featured Ferrari models with specifications.

Get Specific Model

GET /api/models/{model_id}

Returns details for a specific model by ID.

Submit Contact Form

POST /api/contact

Submits a contact form inquiry.

Request Body:

{
  "name": "John Doe",
  "email": "[email protected]",
  "phone": "+971 50 XXX XXXX",
  "message": "I'm interested in the F8 Tributo",
  "preferred_model": "F8 Tributo"
}

Get Contact Submissions

GET /api/contact/submissions

Retrieves all contact form submissions (admin endpoint).

Health Check

GET /health

Returns API health status.

🎨 Design System

Colors

• Primary Red: #DC0000 (Ferrari Red)
• Secondary Black: #1A1A1A
• Accent Gold: #D4AF37
• Light Gray: #F5F5F5

Typography

• Headlines: Playfair Display (serif)
• Body: Inter (sans-serif)

Spacing & Layout

• Generous whitespace for premium feel
• Max-width container: 1280px (7xl)
• Responsive padding and margins

🔧 Configuration

Environment Variables

Create a .env file in the backend directory:

FASTAPI_ENV=development
CORS_ORIGINS=http://localhost:3000,http://localhost:5173

📦 Dependencies

Frontend

• next: 14.0+
• react: 18.0+
• framer-motion: 10.0+ (animations)
• axios: 1.0+ (HTTP client)
• tailwindcss: 3.0+ (styling)

Backend

• fastapi: 0.104.1
• uvicorn: 0.24.0
• pydantic: 2.5.0
• python-multipart: 0.0.6
• python-dotenv: 1.0.0

🚢 Deployment

Frontend Deployment (Vercel)

1. Push code to GitHub
2. Connect repository to Vercel
3. Set environment variables
4. Deploy with one click

Backend Deployment (Heroku/Railway)

1. Create account on Heroku or Railway
2. Connect GitHub repository
3. Set environment variables
4. Deploy

Docker Deployment

Create Dockerfile for backend:

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

📱 Responsive Design

The landing page is fully responsive with breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

♿ Accessibility

• Semantic HTML structure
• ARIA labels where needed
• Keyboard navigation support
• Color contrast compliance
• Alt text for images

🔒 Security

• CORS properly configured
• Input validation on frontend and backend
• No sensitive data in client-side code
• Environment variables for secrets

📊 Performance

• Image optimization with Next.js Image component
• Lazy loading for components
• Code splitting and bundling
• CSS minification
• API response caching

🐛 Troubleshooting

Frontend won't connect to backend

• Ensure backend is running on http://localhost:8000
• Check CORS configuration in main.py
• Verify firewall settings

Components not rendering

• Clear .next cache: rm -rf .next
• Reinstall dependencies: npm install
• Restart development server

API errors

• Check backend logs for error messages
• Verify request format matches API schema
• Test endpoints with Postman or curl

📝 License

This project is proprietary and confidential.

👨‍💻 Support

For issues or questions, contact the development team.

Built with ❤️ for Ferrari Showroom Dubai