npm package: @jackfrost25/ferrari-showroom
Description: A premium, fully-responsive Ferrari showroom landing page template built with Next.js, FastAPI, and modern web technologies
Author: jackfrost25
Latest version: 1.0.0

# 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:
```bash
cd frontend
```

2. Install dependencies:
```bash
npm install
```

3. Run the development server:
```bash
npm run dev
```

The frontend will be available at `http://localhost:3000`

### Backend Setup

1. Navigate to the backend directory:
```bash
cd backend
```

2. Create a virtual environment:
```bash
python -m venv venv
```

3. Activate the virtual environment:
   - **Windows**: `venv\Scripts\activate`
   - **macOS/Linux**: `source venv/bin/activate`

4. Install dependencies:
```bash
pip install -r requirements.txt
```

5. Run the FastAPI server:
```bash
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:**
```json
{
  "name": "John Doe",
  "email": "john@example.com",
  "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:
```dockerfile
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**