https://github.com/yanguadotdev/saas-landing-page

🧪 Landing page moderna para SaaS construida con Next.js, React, Tailwind CSS y Framer Motion. Proyecto de práctica para mejorar diseño, animaciones y frontend. 🚀💻
https://github.com/yanguadotdev/saas-landing-page

Last synced: 11 months ago
JSON representation

🧪 Landing page moderna para SaaS construida con Next.js, React, Tailwind CSS y Framer Motion. Proyecto de práctica para mejorar diseño, animaciones y frontend. 🚀💻

• Host: GitHub
• URL: https://github.com/yanguadotdev/saas-landing-page
• Owner: yanguadotdev
• Created: 2025-05-24T18:31:52.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-26T17:03:54.000Z (about 1 year ago)
• Last Synced: 2025-06-01T09:18:49.680Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://saas-landing-page-ten-nu.vercel.app
• Size: 749 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🧪 SaaS Landing Page — Diseño y Maquetación

Este proyecto es una landing page moderna para un producto SaaS, construida como ejercicio de práctica para mejorar mis habilidades en desarrollo web frontend. El diseño se inspira en interfaces limpias, atractivas y profesionales, con animaciones suaves e interacciones dinámicas.

![Preview](./public/preview.jpg)

## 🚀 Tech Stack

- **Next.js** – Framework React para renderizado híbrido y routing optimizado.

- **React** – Librería principal para construir la UI basada en componentes.

- **Tailwind CSS** – Utilizado para un diseño responsivo, rápido y elegante mediante clases utilitarias.

- **Framer Motion** – Librería para animaciones suaves y controladas en React.

## 🎯 Objetivo del Proyecto

- Mejorar mis habilidades en diseño UI/UX moderno y frontend.

- Aprender prácticas profesionales integrando tecnologías actuales.

- Reforzar el uso de Tailwind para layouts rápidos y mantenibles.

- Explorar animaciones con Framer Motion para mejorar la experiencia de usuario.

## 📂 Estructura del Proyecto

```

/app            → Estructura de páginas (Next.js App Router)

/components     → Componentes reutilizables como Navbar, Hero, Cards, etc.

/styles         → Estilos globales y personalizados

/src/assets     → Imágenes, íconos, SVGs

```

## 🎨 Funcionalidades del Diseño

- Layout responsivo para todas las resoluciones.

- Animaciones suaves al cargar, al hacer hover o al interactuar.

- Diseño oscuro con colores vivos para contraste y jerarquía visual.

- Componentes bien separados y reutilizables para escalabilidad.

## 🧠 Lo que aprendí

- Uso eficiente de `Tailwind CSS` para construir secciones complejas sin escribir CSS tradicional.

- Aplicación de animaciones con `Framer Motion` incluyendo `variants`, `transitions` y `layout`.

- Mejores prácticas en diseño web moderno con enfoque en experiencia de usuario.