Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import TimelineHorizontalCardStack from '@/components/cardStack/layouts/timelines/TimelineHorizontalCardStack';
 import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
@@ -34,6 +34,7 @@ export default function LandingPage() {
               { name: "Inicio", id: "hero" },
               { name: "Servicios", id: "servicios" },
               { name: "Ventas", id: "proyectos" },
+              { name: "Proceso", id: "proceso" },
               { name: "Contacto", id: "contacto" },
             ]}
           />
@@ -54,13 +55,17 @@ export default function LandingPage() {
 
         <div id="servicios" data-section="servicios">
           <FeatureCardNineteen
-            title="Nuestros Servicios"
+            title="¿Por qué trabajar con nosotros?"
-            description="Acompañamiento profesional desde el primer trazo hasta la entrega de llaves."
+            description="No somos una empresa enorme. Somos un equipo de arquitectos que trabaja de cerca con cada familia."
             textboxLayout="split"
             useInvertedBackground={false}
             features={[
-                { tag: "Diseño", title: "Proyecto Arquitectónico", subtitle: "Visión integral", description: "Diseñamos espacios pensando en tu comodidad y en el entorno natural de Canning y Bella Vista.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-architect-woman-her-working-desk-working-new-projects-architecture-design_482257-33107.jpg" },
+                { tag: "Canning", title: "Conocimiento Local", subtitle: "Nuestra zona", description: "Conocemos Canning y bella vista como nuestra propia casa.", imageSrc: "https://img.b2bpic.net/free-photo/close-up-architect-woman-her-working-desk-working-new-projects-architecture-design_482257-33107.jpg" },
-                { tag: "Construcción", title: "Ejecución de Obra", subtitle: "Calidad técnica", description: "Supervisamos cada fase con materiales de primera y mano de obra calificada.", imageSrc: "https://img.b2bpic.net/free-photo/examination-serious-young-adult-woman-business-gray-suit-heels-wearing-safety-helmet-looking-document-smiling-three-men-waiting-construction-site_259150-57759.jpg" }
+                { tag: "Transparencia", title: "Comunicación Clara", subtitle: "Sin términos técnicos", description: "Te explicamos todo sin términos técnicos ni vueltas.", imageSrc: "https://img.b2bpic.net/free-photo/examination-serious-young-adult-woman-business-gray-suit-heels-wearing-safety-helmet-looking-document-smiling-three-men-waiting-construction-site_259150-57759.jpg" },
+                { tag: "Presupuesto", title: "Transparencia Total", subtitle: "Sin sorpresas", description: "Presupuesto claro desde el primer día, sin sorpresas.", imageSrc: "https://img.b2bpic.net/free-photo/modern-house-exterior-design_23-2149457635.jpg" },
+                { tag: "Diseño", title: "Diseño y Construcción", subtitle: "Equipo integral", description: "El mismo equipo que diseña es el que construye.", imageSrc: "https://img.b2bpic.net/free-photo/young-architect-checking-house-blueprints-construction-site_23-2148780775.jpg?_wi=1" },
+                { tag: "Servicio", title: "Llave en Mano", subtitle: "Cero preocupaciones", description: "Entrega llave en mano — vos no coordinás nada.", imageSrc: "https://img.b2bpic.net/free-photo/happy-family-new-house_23-2148116544.jpg?_wi=1" },
+                { tag: "Flexibilidad", title: "Presupuestos Adaptables", subtitle: "Consultanos", description: "Trabajamos con distintos presupuestos, consultanos tu caso.", imageSrc: "https://img.b2bpic.net/free-photo/architect-holding-blueprint-with-client_23-2148780777.jpg?_wi=1" }
             ]}
           />
         </div>
@@ -81,18 +86,29 @@ export default function LandingPage() {
         </div>
 
         <div id="proceso" data-section="proceso">
-          <FaqSplitText
+          <TimelineHorizontalCardStack
-            sideTitle="¿Cómo trabajamos?"
+            title="Nuestro Proceso de Trabajo"
-            sideDescription="Un proceso simple y transparente para tu tranquilidad."
+            description="Seguimos una metodología clara para garantizar calidad en cada etapa de tu proyecto."
-            faqs={[
+            textboxLayout="split"
-                { id: "1", title: "1. Consulta inicial", content: "Charlamos sobre tus ideas y expectativas." },
-                { id: "2", title: "2. Diseño y presupuesto", content: "Creamos la propuesta técnica y el plan de inversión." },
-                { id: "3", title: "3. Construcción", content: "Ejecutamos la obra con seguimiento diario." },
-                { id: "4", title: "4. Entrega", content: "Llaves en mano con garantía de calidad." }
-            ]}
-            faqsAnimation="slide-up"
             useInvertedBackground={false}
-          />
+            mediaItems={[
+                { imageSrc: "https://img.b2bpic.net/free-photo/architect-holding-blueprint-with-client_23-2148780777.jpg?_wi=2", imageAlt: "Consulta" },
+                { imageSrc: "https://img.b2bpic.net/free-photo/architec-designer-working-with-3d-printed-models-buildings-modern-office_482257-27749.jpg", imageAlt: "Diseño" },
+                { imageSrc: "https://img.b2bpic.net/free-photo/young-architect-checking-house-blueprints-construction-site_23-2148780775.jpg?_wi=2", imageAlt: "Construcción" },
+                { imageSrc: "https://img.b2bpic.net/free-photo/happy-family-new-house_23-2148116544.jpg?_wi=2", imageAlt: "Entrega" }
+            ]}
+          >
+            <div />
+          </TimelineHorizontalCardStack>
+        </div>
+
+        <div id="ubicacion" data-section="ubicacion">
+          <div className="py-20 px-4 bg-card">
+              <h2 className="text-center text-3xl font-bold mb-10">¿Dónde encontrarnos?</h2>
+              <div className="w-full h-[400px] rounded-lg overflow-hidden">
+                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3278.435559868777!2d-58.5173167!3d-34.8236167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc7d04473859b%3A0x6b4c3e80e95a9e70!2sCanning%2C%20Buenos%20Aires!5e0!3m2!1ses-419!2sar!4v1700000000000!5m2!1ses-419!2sar" width="100%" height="100%" style={{border:0}} allowFullScreen={true} loading="lazy"></iframe>
+              </div>
+          </div>
         </div>
 
         <div id="testimonios" data-section="testimonios">
@@ -110,20 +126,22 @@ export default function LandingPage() {
         </div>
 
         <div id="contacto" data-section="contacto">
-            <ContactSplitForm
+            <ContactCenter
-                title="¿Listo para empezar?"
+                tag="Contacto"
-                description="Escribinos y coordinemos una visita a nuestras obras."
+                title="¿Listo para empezar tu proyecto?"
-                inputs={[{ name: "nombre", type: "text", placeholder: "Tu Nombre" }, { name: "email", type: "email", placeholder: "Tu Email" }]}
+                description="Dejanos tu email y nos pondremos en contacto a la brevedad."
-                buttonText="Enviar mensaje vía WhatsApp"
+                background={{ variant: "plain" }}
-                mediaPosition="right"
                 useInvertedBackground={false}
             />
         </div>
 
         <div id="footer" data-section="footer">
-            <FooterCard 
+            <FooterBaseCard 
                 logoText="ArchiCanning"
-                copyrightText="© 2025 ArchiCanning. Todos los derechos reservados."
+                columns={[
+                    { title: "Estudio", items: [{ label: "Sobre Nosotros", href: "#" }, { label: "Proyectos", href: "#proyectos" }] },
+                    { title: "Contacto", items: [{ label: "WhatsApp", href: "#" }, { label: "Email", href: "#" }] }
+                ]}
             />
         </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fcf6ec;
+  --background: #0a0a0a;
-  --card: #f3ede2;
+  --card: #1a1a1a;
-  --foreground: #2e2521;
+  --foreground: #ffffffe6;
-  --primary-cta: #2e2521;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #b2a28b;
+  --accent: #737373;
-  --background-accent: #b2a28b;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);