Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,8 @@ import BlogCardOne from '@/components/sections/blog/BlogCardOne';
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -30,54 +31,32 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Inicio", id: "hero" },
-          name: "Inicio",          id: "hero"},
+        { name: "Cursos", id: "products" },
-        {
+        { name: "Testimonios", id: "testimonials" },
-          name: "Cursos",          id: "products"},
+        { name: "Contacto", id: "contact" },
-        {
-          name: "Testimonios",          id: "testimonials"},
-        {
-          name: "Contacto",          id: "contact"},
       ]}
       brandName="EduLearn"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroOverlayTestimonial
+    <HeroBillboardCarousel
-      title="Aprende las Habilidades del Futuro"
+      title="Transforma tu Carrera"
-      description="Plataforma de e-learning profesional diseñada para impulsar tu carrera con cursos interactivos, mentoría y certificación."
+      description="Plataforma líder en e-learning para dominar habilidades del mañana."
-      testimonials={[
+      background={{ variant: "plain" }}
-        {
+      mediaItems={[
-          name: "Elena Martinez",          handle: "@elena",          testimonial: "La mejor plataforma para aprender programación.",          rating: 5,
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D6Za7qwMwYWBWOwRCubzJdQbq4/uploaded-1777605198660-fdg3n7np.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-asian-girl-with-tablet-drinks-coffee-street-walking-city-centre_1258-193190.jpg"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D6Za7qwMwYWBWOwRCubzJdQbq4/uploaded-1777605198660-k37zmy7r.jpg" }
-        {
-          name: "Carlos Ruiz",          handle: "@carlos",          testimonial: "Cursos muy estructurados y prácticos.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-student-black-jacket-wearing-backpack-holding-yellow-files-blue-desk-school-college-university_140725-43380.jpg"},
-        {
-          name: "Ana Sofia",          handle: "@ana",          testimonial: "Impulsó mi carrera profesional en 3 meses.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-enthusiastic-young-woman-makes-fist-pump-celebrating-triumphing-holding-laptop_1258-205198.jpg"},
-        {
-          name: "David Leon",          handle: "@david",          testimonial: "Excelente soporte y calidad de contenido.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-outdoors-showing-super-smiling_651396-3635.jpg"},
-        {
-          name: "Lucia Vazquez",          handle: "@lucia",          testimonial: "La mejor experiencia de aprendizaje.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/super-hero-businessman-red-cape-glasses-looking-front-smiling-broadly-happy-positive-standing-orange-wall_141793-53770.jpg"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/girl-student-is-talking-phone-home-conversation-phone_169016-67694.jpg"
+    />
-      avatars={[
+    <HeroSplit
-        {
+      title="Aprendizaje sin Límites"
-          src: "http://img.b2bpic.net/free-photo/vertical-portrait-young-successful-woman-employee-entrepreneur-office-hall-tutor-carry-laptop-notebooks-looking-away-with-satisfied-pleased-smile-like-her-job_197531-30584.jpg",          alt: "estudiante 1"},
+      description="Metodología práctica, mentoría personalizada y certificación reconocida."
-        {
+      background={{ variant: "plain" }}
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-african-female-student-smiling-holding-books-college_176420-12452.jpg",          alt: "estudiante 2"},
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D6Za7qwMwYWBWOwRCubzJdQbq4/uploaded-1777605198660-ez9erdxr.png"
-        {
+      imagePosition="left"
-          src: "http://img.b2bpic.net/free-photo/girl-resting-steps-attractive-fashionable-cheerful-trendy-hipster-girl-walking-city-streets_1153-5866.jpg",          alt: "estudiante 3"},
+      buttons={[{ text: "Empezar Ahora", href: "#products" }]}
-        {
-          src: "http://img.b2bpic.net/free-photo/cheerful-brunette-man-eyeglasses-smiles-widely-outside-happy-guy-black-jacket-white-tshirt-poses-near-airport_197531-27123.jpg",          alt: "estudiante 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-female-student-black-jacket-wearing-backpack-holding-yellow-files-rejoicing-blue-wall-school-college-university_140725-43373.jpg",          alt: "estudiante 5"},
-      ]}
-      avatarText="Más de 15,000 estudiantes ya confían en nosotros."
     />
   </div>
 
@@ -87,18 +66,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { id: "f1", title: "Certificados Validados", tags: ["Profesional"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-event-elements-with-text_23-2148675066.jpg" },
-          id: "f1",          title: "Certificados Validados",          tags: [
+        { id: "f2", title: "Acceso 24/7", tags: ["Flexible"], imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443520.jpg" },
-            "Profesional"],
+        { id: "f3", title: "Mentoría Experta", tags: ["Premium"], imageSrc: "http://img.b2bpic.net/free-photo/paper-balls-with-paper-bulb-formulas_1232-580.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-event-elements-with-text_23-2148675066.jpg"},
-        {
-          id: "f2",          title: "Acceso 24/7",          tags: [
-            "Flexible"],
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-career-guidance-items-designers_23-2149443520.jpg"},
-        {
-          id: "f3",          title: "Mentoría Experta",          tags: [
-            "Premium"],
-          imageSrc: "http://img.b2bpic.net/free-photo/paper-balls-with-paper-bulb-formulas_1232-580.jpg"},
       ]}
       title="Por qué elegirnos"
       description="Nuestros cursos combinan teoría profunda con práctica real del mundo industrial."
@@ -112,18 +82,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "p1", name: "Desarrollo Web Fullstack", price: "$49.99", imageSrc: "http://img.b2bpic.net/free-photo/surprised-girl-with-laptop-girl-laptop-technology-concept_169016-64377.jpg" },
-          id: "p1",          name: "Desarrollo Web Fullstack",          price: "$49.99",          imageSrc: "http://img.b2bpic.net/free-photo/surprised-girl-with-laptop-girl-laptop-technology-concept_169016-64377.jpg"},
+        { id: "p2", name: "Diseño UI/UX Avanzado", price: "$59.99", imageSrc: "http://img.b2bpic.net/full-shot-man-painting-indoors_23-2150182592.jpg" },
-        {
+        { id: "p3", name: "Marketing Digital Avanzado", price: "$39.99", imageSrc: "http://img.b2bpic.net/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg" },
-          id: "p2",          name: "Diseño UI/UX Avanzado",          price: "$59.99",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-painting-indoors_23-2150182592.jpg"},
-        {
-          id: "p3",          name: "Marketing Digital Avanzado",          price: "$39.99",          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-analysing-charts-laptop-start-up-business-meeting-room_482257-5026.jpg"},
-        {
-          id: "p4",          name: "Ciencia de Datos con Python",          price: "$79.99",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169840.jpg"},
-        {
-          id: "p5",          name: "Escritura Creativa",          price: "$29.99",          imageSrc: "http://img.b2bpic.net/free-photo/desk-office_23-2148006566.jpg"},
-        {
-          id: "p6",          name: "Finanzas Personales",          price: "$34.99",          imageSrc: "http://img.b2bpic.net/free-photo/middle-age-executive-female-reading-charst-conference-room-young-businesswoman-background_482257-31194.jpg"},
       ]}
       title="Cursos Destacados"
       description="Explora nuestro catálogo seleccionado por expertos para tu desarrollo continuo."
@@ -137,12 +98,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", value: "15k+", description: "Estudiantes activos" },
-          id: "m1",          value: "15k+",          description: "Estudiantes activos"},
+        { id: "m2", value: "500+", description: "Cursos disponibles" },
-        {
+        { id: "m3", value: "98%", description: "Tasa de satisfacción" },
-          id: "m2",          value: "500+",          description: "Cursos disponibles"},
-        {
-          id: "m3",          value: "98%",          description: "Tasa de satisfacción"},
       ]}
       title="Nuestro Impacto"
       description="Miles de estudiantes confían en nosotros para cambiar su futuro laboral."
@@ -155,16 +113,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "t1", name: "Sara", handle: "@sara", testimonial: "Increíble experiencia educativa.", imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-65454.jpg" },
-          id: "t1",          name: "Sara",          handle: "@sara",          testimonial: "Increíble experiencia educativa.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-is-working-laptop-girl-with-laptop-emotion-concept_169016-65454.jpg"},
+        { id: "t2", name: "Juan", handle: "@juan", testimonial: "Muy buen contenido y apoyo.", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg" },
-        {
+        { id: "t3", name: "Sofia", handle: "@sofia", testimonial: "Aprendí mucho en poco tiempo.", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-having-best-moments-office-desk_114579-28352.jpg" },
-          id: "t2",          name: "Juan",          handle: "@juan",          testimonial: "Muy buen contenido y apoyo.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-library-couch_273609-12733.jpg"},
-        {
-          id: "t3",          name: "Sofia",          handle: "@sofia",          testimonial: "Aprendí mucho en poco tiempo.",          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-having-best-moments-office-desk_114579-28352.jpg"},
-        {
-          id: "t4",          name: "Mateo",          handle: "@mateo",          testimonial: "Cursos totalmente recomendados.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-sitting-table-park-using-laptop_651396-3649.jpg"},
-        {
-          id: "t5",          name: "Lucia",          handle: "@lucia",          testimonial: "La mejor inversión en mi carrera.",          imageSrc: "http://img.b2bpic.net/free-photo/blond-female-dressed-white-shirt-eyeglasses-holds-tablet-pc-grey-background_613910-11913.jpg"},
       ]}
       title="Lo que dicen nuestros alumnos"
       description="Transformaciones reales de personas que han potenciado su carrera."
@@ -179,12 +130,7 @@ export default function LandingPage() {
       title="Últimas Noticias"
       description="Mantente actualizado con tendencias en educación y tecnología."
       blogs={[
-        {
+        { id: "b1", category: "Tech", title: "Futuro del E-Learning", excerpt: "Cómo la IA está transformando la educación.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3D6Za7qwMwYWBWOwRCubzJdQbq4/uploaded-1777605198660-o7456uh7.jpg", authorName: "Admin", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg", date: "12 Ene 2024" },
-          id: "b1",          category: "Tech",          title: "Futuro del E-Learning",          excerpt: "Cómo la IA está transformando la educación.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=94aktf",          authorName: "Admin",          authorAvatar: "http://img.b2bpic.net/free-photo/portrait-beautiful-afro-american-woman_23-2148332136.jpg",          date: "12 Ene 2024"},
-        {
-          id: "b2",          category: "Diseño",          title: "Diseño y UX",          excerpt: "Tendencias modernas en interfaces digitales.",          imageSrc: "http://img.b2bpic.net/free-photo/creative-woman-working-with-fabric_23-2148372143.jpg",          authorName: "Admin",          authorAvatar: "http://img.b2bpic.net/free-photo/female-student-sitting-with-different-books-white-floor-reading-book-worm-school-student-library_140725-44820.jpg",          date: "15 Ene 2024"},
-        {
-          id: "b3",          category: "Marketing",          title: "Estrategias 2024",          excerpt: "Dominando el marketing digital moderno.",          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-concept-elements-characters-mentoring-coaching-skills-development-set-isolated-vector-illustration_98292-3362.jpg",          authorName: "Admin",          authorAvatar: "http://img.b2bpic.net/free-photo/student-girl-business-woman-sit-wood-bench-city-park-autumn_231208-6546.jpg",          date: "20 Ene 2024"},
       ]}
     />
   </div>
@@ -192,15 +138,11 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain"}}
       tag="Contacto"
       title="Comienza hoy mismo"
       description="Únete a nuestra comunidad y desbloquea tu potencial ahora."
-      buttons={[
+      buttons={[{ text: "Regístrate ahora", href: "#" }]}
-        {
-          text: "Regístrate ahora",          href: "#"},
-      ]}
     />
   </div>
 
@@ -208,26 +150,12 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="EduLearn"
       columns={[
-        {
+        { title: "Plataforma", items: [{ label: "Inicio", href: "#" }, { label: "Cursos", href: "#" }] },
-          title: "Plataforma",          items: [
+        { title: "Legal", items: [{ label: "Privacidad", href: "#" }, { label: "Términos", href: "#" }] },
-            {
-              label: "Inicio",              href: "#"},
-            {
-              label: "Cursos",              href: "#"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacidad",              href: "#"},
-            {
-              label: "Términos",              href: "#"},
-          ],
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #ffffff;
-  --card: #ffffff;
+  --card: #f9f9f9;
-  --foreground: #25190c;
+  --foreground: #000612e6;
-  --primary-cta: #ff6207;
+  --primary-cta: #15479c;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #25190c;
+  --secondary-cta-text: #000612e6;
-  --accent: #ffce93;
+  --accent: #e2e2e2;
-  --background-accent: #e8cfa8;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);