Landing Page Components

Componentes utilizados en el landing page principal de TalentBricksAI.

Ubicación

Los componentes están en app/src/landing-page/components/.

Componentes Activos

Estos componentes se usan actualmente en el landing page:

Componente	Archivo	Descripción
Hero	Hero.tsx	Sección principal con título y CTAs
HeroStats	HeroStats.tsx	Barra de estadísticas (cursos, estudiantes, horas)
Testimonials	Testimonials.tsx	Grid de 6 testimoniales con avatares
FeaturedCourses	FeaturedCourses.tsx	Grid dinámico de cursos desde DB
WhyChooseUs	WhyChooseUs.tsx	4 tarjetas de beneficios con iconos Lucide
CapstoneProjects	CapstoneProjects.tsx	Carrusel de proyectos de estudiantes
Instructors	Instructors.tsx	3 tarjetas de instructores con redes sociales
PricingComparison	PricingComparison.tsx	Tabla comparativa Individual vs Suscripción
FAQ	FAQ.tsx	Accordion de preguntas frecuentes
CTASection	CTASection.tsx	Llamada a la acción final con gradiente
Footer	Footer.tsx	Footer con navegación y redes sociales
SectionTitle	SectionTitle.tsx	Título reutilizable para secciones

Orden de Secciones

El landing page (LandingPage.tsx) organiza las secciones así:

1. Hero - Título, subtítulo, CTAs, stats bar
2. Testimonials - 6 cards de estudiantes
3. FeaturedCourses - Cursos destacados desde DB
4. WhyChooseUs - 4 beneficios clave
5. CapstoneProjects - Carrusel de proyectos
6. Instructors - Perfil de instructores
7. PricingComparison - Tabla de precios
8. FAQ - Preguntas frecuentes
9. CTASection - CTA final
10. Footer - Navegación y redes

Content Sections

El archivo contentSections.tsx provee configuraciones estáticas (avatares, imágenes, iconos) que se combinan con las traducciones i18n.

Funciones Getter

// Obtener testimoniales con avatares
const testimonials = getTestimonials(t);

// Obtener FAQs con hrefs
const faqs = getFaqs(t);

// Obtener navegación del footer
const footerNavigation = getFooterNavigation(t);

// Obtener items de WhyChooseUs con iconos
const whyChooseUs = getWhyChooseUs(t);

// Obtener proyectos capstone con imágenes
const projects = getCapstoneProjects(t);

// Obtener instructores con avatares y social links
const instructors = getInstructors(t);

// Obtener comparación de precios
const pricing = getPricingComparison(t);

Traducciones

Las traducciones están en:

• app/src/shared/content/locales/es/landing.ts (español - fuente)
• app/src/shared/content/locales/en/landing.ts (inglés)

Dependencias

• embla-carousel-react: Para el carrusel de CapstoneProjects (via ShadCN Carousel)
• lucide-react: Iconos para WhyChooseUs, Instructors, Footer

Ver También

• Component Showcase - Componentes preservados para uso futuro