🚗 Tesla Landing Page Clone

Un clon de la página principal de Tesla construido con Astro y Tailwind CSS. Este proyecto recrea la experiencia visual y la estructura de la landing page oficial de Tesla, mostrando sus diferentes modelos de vehículos y productos.

✨ Características

• Diseño Responsivo: Adaptado para dispositivos móviles, tablets y desktop
• Componentes Modulares: Arquitectura basada en componentes Astro reutilizables
• Optimización de Imágenes: Uso de formato AVIF para carga rápida
• Estilizado con Tailwind CSS: Diseño moderno y personalizable
• Rendimiento Optimizado: Generación de sitios estáticos con Astro

🎨 Secciones Incluidas

• Model S: Vehículo sedan de lujo eléctrico
• Model 3: Vehículo eléctrico más accesible
• Model X: SUV eléctrico
• Model Y: SUV compacto eléctrico
• Powerwall: Sistema de almacenamiento de energía
• Accessories: Accesorios y productos Tesla

🚀 Estructura del Proyecto

tesla-landing/
├── public/
│   ├── accessories.avif
│   ├── model-3.avif
│   ├── model-s.avif
│   ├── model-x.avif
│   ├── model-y.avif
│   └── powerwall.avif
├── src/
│   ├── components/
│   │   ├── Accessories.astro
│   │   ├── FooterMenu.astro
│   │   ├── HeroSection.astro
│   │   ├── LandingHeader.astro
│   │   ├── Logo.astro
│   │   ├── ModelS.astro
│   │   ├── ModelThree.astro
│   │   ├── ModelX.astro
│   │   ├── ModelY.astro
│   │   ├── PowerWall.astro
│   │   └── Section.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

• public/: Contiene las imágenes optimizadas en formato AVIF de los productos Tesla
• src/components/: Componentes Astro modulares para cada sección de la página
• src/layouts/: Layout principal de la aplicación
• src/pages/: Página principal (index) que estructura toda la landing

🧞 Comandos

Todos los comandos se ejecutan desde la raíz del proyecto en la terminal:

Comando	Acción
npm install	Instala las dependencias
npm run dev	Inicia el servidor de desarrollo en localhost:4321
npm run build	Construye el sitio para producción en ./dist/
npm run preview	Previsualiza la build localmente antes de desplegar
npm run astro ...	Ejecuta comandos CLI como astro add, astro check
npm run astro -- --help	Obtén ayuda usando el CLI de Astro

�️ Tecnologías Utilizadas

• Astro: Framework web moderno para sitios estáticos rápidos
• Tailwind CSS: Framework de CSS utility-first
• TypeScript: Tipado estático para JavaScript

🚀 Instalación

1. Clona el repositorio:

git clone <url-del-repositorio>
cd tesla-landing

2. Instala las dependencias:

npm install

3. Inicia el servidor de desarrollo:

npm run dev

4. Abre tu navegador en http://localhost:4321

📝 Notas

Este es un proyecto educativo con fines de aprendizaje. Tesla y su logo son marcas registradas de Tesla, Inc.