https://github.com/com2pa/landingpage-tailwind
landing page- tailwind
https://github.com/com2pa/landingpage-tailwind
framer-motion reactjs tailwind vite
Last synced: 2 months ago
JSON representation
landing page- tailwind
- Host: GitHub
- URL: https://github.com/com2pa/landingpage-tailwind
- Owner: com2pa
- Created: 2025-03-04T16:43:03.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-04T17:03:11.000Z (over 1 year ago)
- Last Synced: 2025-03-04T18:20:05.740Z (over 1 year ago)
- Topics: framer-motion, reactjs, tailwind, vite
- Language: JavaScript
- Homepage: https://landing-s8uz.onrender.com
- Size: 1.69 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Landing Page con React, Tailwind CSS y Framer Motion
Este proyecto es una landing page moderna y responsive desarrollada utilizando **React** como biblioteca de JavaScript, **Tailwind CSS** para el diseño y estilos, y **Framer Motion** para animaciones fluidas e interactivas.
## Características
- **Diseño Responsive**: La página se adapta a diferentes dispositivos y tamaños de pantalla.
- **Animaciones Interactivas**: Uso de Framer Motion para animaciones suaves y atractivas.
- **Estilos con Tailwind CSS**: Utilización de clases utilitarias de Tailwind para un desarrollo rápido y consistente.
- **Componentes Reutilizables**: Estructura modular con componentes React reutilizables.
## Tecnologías Utilizadas
- **React**: Biblioteca de JavaScript para construir interfaces de usuario.
- **Tailwind CSS**: Framework de CSS utilitario para diseñar rápidamente.
- **Framer Motion**: Biblioteca de animación para React que permite crear animaciones fluidas.
- **Vite**: Herramienta de construcción rápida para proyectos modernos.
## Requisitos Previos
Antes de comenzar, asegúrate de tener instalado lo siguiente:
- [Node.js](https://nodejs.org/) (v16 o superior)
- [npm](https://www.npmjs.com/) o [Yarn](https://yarnpkg.com/) (gestores de paquetes)
## Configuración del Proyecto
Sigue estos pasos para configurar y ejecutar el proyecto en tu máquina local:
1. **Clonar el Repositorio**
```bash
git clone https://github.com/tuusuario/tu-repositorio.git
cd tu-repositorio
npm installInstalar Dependencias
bash
Copy
npm install
o si usas Yarn:
bash
Copy
yarn install
Ejecutar el Proyecto en Modo Desarrollo
bash
Copy
npm run dev
o con Yarn:
bash
Copy
yarn dev
Esto iniciará un servidor de desarrollo y abrirá la aplicación en tu navegador en http://localhost:3000.
Construir para Producción
Para generar una versión optimizada del proyecto, ejecuta:
bash
Copy
npm run build
o con Yarn:
bash
Copy
yarn build
Los archivos de producción se generarán en la carpeta dist.
Estructura del Proyecto
.
├── public/ # Archivos estáticos (imágenes, favicon, etc.)
├── src/ # Código fuente del proyecto
│ ├── components/ # Componentes reutilizables
│ ├── assets/ # Recursos como imágenes, fuentes, etc.
│ ├── styles/ # Archivos de estilos globales (si los hay)
│ ├── App.jsx # Componente principal de la aplicación
│ └── main.jsx # Punto de entrada de la aplicación
├── tailwind.config.js # Configuración de Tailwind CSS
├── vite.config.js # Configuración de Vite
├── package.json # Dependencias y scripts del proyecto
└── README.md # Este archivo