Docs
Landing Page Shadcn

Landing Page Shadcn

Un motor de búsqueda potenciado por IA con una interfaz de usuario generativa.

Guía Completa de Landing Page con Shadcn/UI

Tabla de Contenidos

Introducción

Esta landing page moderna está construida utilizando:

  • ⚛️ React 18
  • 🔷 TypeScript
  • 🎨 Tailwind CSS
  • 🎯 Shadcn/UI
  • 📱 Diseño 100% Responsive

Características Principales

  • ✨ Diseño moderno y minimalista
  • 🌓 Modo oscuro/claro
  • 📱 Totalmente responsive
  • ⚡ Optimizado para rendimiento
  • 🎨 Fácilmente personalizable

Requisitos Previos

Node.js >= 18.0.0
npm >= 8.0.0
Git

Instalación

1. Abre Carpeta

cd landingpagetemplate

2. Instalar Dependencias

npm install

3. Configurar Variables de Entorno

cp .env.example .env.local

4. Iniciar Desarrollo

npm run dev

Estructura del Proyecto

shadcn-landing-page/
├── src/
│   ├── components/     # Componentes reutilizables
│   ├── lib/           # Utilidades y configuraciones
│   ├── styles/        # Estilos globales
│   └── app/           # Componentes principales
├── public/            # Archivos estáticos
└── config/           # Configuraciones del proyecto

Secciones Detalladas

1. Navbar (components/Navbar.tsx)

- Características:
  - Navegación responsive
  - Menú hamburguesa en móvil
  - Cambio de tema
  - Links personalizables
  
- Personalización:
  - Logo modificable
  - Links configurables
  - Estilos ajustables

2. Hero Section (components/Hero.tsx)

- Elementos:
  - Título principal
  - Subtítulo
  - CTA Buttons
  - Imagen/Animación
  
- Características:
  - Animaciones suaves
  - Fondos dinámicos
  - Responsive layout

3. Features (components/Features.tsx)

- Estructura:
  - Grid de características
  - Iconos personalizados
  - Descripciones
  
- Personalización:
  - Iconos modificables
  - Layout ajustable
  - Contenido editable

4. Pricing (components/Pricing.tsx)

- Planes Incluidos:
  - Free
  - Premium
  - Enterprise
  
- Características:
  - Badges destacados
  - Lista de funciones
  - Botones CTA

5. Testimonials (components/Testimonials.tsx)

- Elementos:
  - Avatar
  - Nombre/Cargo
  - Comentario
  - Rating
  
- Funcionalidades:
  - Carousel automático
  - Responsive grid
  - Lazy loading

Personalización

1. Temas y Colores

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          // Personaliza tus colores aquí
          50: '#f8fafc',
          900: '#0f172a',
        }
      }
    }
  }
}

2. Componentes UI

// Ejemplo de Button personalizado
export const Button = {
  variants: {
    primary: 'bg-primary-500 hover:bg-primary-600',
    secondary: 'bg-secondary-500 hover:bg-secondary-600'
  },
  sizes: {
    sm: 'px-4 py-2 text-sm',
    lg: 'px-6 py-3 text-lg'
  }
}

3. Tipografía

/* Configura fuentes personalizadas */
@font-face {
  font-family: 'TuFuente';
  src: url('/fonts/tu-fuente.woff2');
}

Componentes Principales

1. Button

Variantes disponibles:
- Default
- Secondary
- Outline
- Ghost
- Link
 
Propiedades:
- size: "sm" | "md" | "lg"
- variant: "default" | "secondary" | "outline"
- disabled: boolean

2. Card

Subcomponentes:
- Card.Header
- Card.Title
- Card.Description
- Card.Content
- Card.Footer
 
Personalización:
- Bordes
- Sombras
- Padding

3. Navigation Menu

Características:
- Dropdowns
- Submenus
- Links
- Indicadores
 
Configuración:
- Animaciones
- Posicionamiento
- Estilos

Despliegue

1. Preparación

# Compilar para producción
npm run build
 
# Previsualizar build
npm run preview

2. Plataformas Soportadas

  • Vercel
  • Netlify
  • GitHub Pages
  • Firebase Hosting

3. Optimizaciones

  • Imágenes optimizadas
  • Code splitting
  • Tree shaking
  • Minificación

FAQ

Preguntas Comunes

  1. ¿Cómo añado nuevas secciones?
// 1. Crea el componente
// 2. Añádelo a App.tsx
// 3. Estiliza con Tailwind
  1. ¿Cómo modifico el tema?
// Edita theme-config.ts
// Modifica variables CSS
// Actualiza Tailwind config
  1. ¿Cómo añado animaciones?
// Usa Tailwind animations
// Implementa Framer Motion
// Personaliza transiciones

Soporte y Recursos

Enlaces Útiles

Comunidad

  • GitHub Issues
  • Discord
  • Twitter

Esta guía se actualiza regularmente. Para contribuir, visita el repositorio en GitHub.

Startup Landing PageTemplate Directorio