Update src/app/styles/variables.css

Merge version_2 into main

src/app/contact/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import React from 'react';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="ArborPro"
+          button={{ text: "Get Quote", href: "/contact" }}
+        />
+      </div>
+      <main>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Get in Touch"
+            title="Contact Us For Your Tree Care Needs"
+            description="Reach out to our professional team today for expert arboricultural services."
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
+            buttons={[{ text: "Submit", href: "#" }]}
+          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          logoText="ArborPro"
+          videoSrc="https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-356-large.mp4"
+          columns={[
+            { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Reviews", href: "/reviews" }] },
+            { title: "Services", items: [{ label: "Pruning", href: "/services" }, { label: "Removal", href: "/services" }] },
+            { title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "Privacy", href: "/privacy" }] },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -12,9 +12,14 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
-import { Award, Clock, ShieldCheck } from "lucide-react";
+import { Award, Clock, ShieldCheck, Languages } from "lucide-react";
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [lang, setLang] = useState('en');
+  
+  const t = (en: string, es: string) => lang === 'es' ? es : en;
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -32,69 +37,34 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Services",
-          id: "#features",
-        },
-        {
-          name: "Why Us",
-          id: "#about",
-        },
-        {
-          name: "Reviews",
-          id: "#testimonials",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
+        { name: t("Services", "Servicios"), id: "/services" },
+        { name: t("Why Us", "Por qué nosotros"), id: "/about" },
+        { name: t("Reviews", "Reseñas"), id: "/reviews" },
+        { name: t("Contact", "Contacto"), id: "/contact" },
+        { name: "ES/EN", id: "lang-switch" },
       ]}
       brandName="ArborPro"
       button={{
-        text: "Get Quote",
-        href: "#contact",
-      }}
+        text: t("Get Quote", "Obtener Presupuesto"), href: "/contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
       background={{
-        variant: "gradient-bars",
-      }}
-      title="Professional Tree Trimming, Safely Done Right"
-      description="Certified arborists protecting your property and landscape. Free estimates, fully insured, same-week service available."
+        variant: "gradient-bars"}}
+      title={t("Professional Tree Trimming, Safely Done Right", "Poda Profesional de Árboles, Realizada de Forma Segura")}
+      description={t("Certified arborists protecting your property and landscape. Free estimates, fully insured, same-week service available.", "Arboristas certificados protegiendo su propiedad y paisaje. Presupuestos gratuitos, totalmente asegurados, servicio disponible en la misma semana.")}
       buttons={[
-        {
-          text: "Request Free Estimate",
-          href: "#contact",
-        },
+        { text: t("Request Free Estimate", "Solicitar Presupuesto Gratuito"), href: "/contact" },
       ]}
       mediaItems={[
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-kxh2doap.png?_wi=1",
-          imageAlt: "Trimming service 1",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-shllb02o.png",
-          imageAlt: "Trimming service 2",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-au8ffj43.png",
-          imageAlt: "Trimming service 3",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-ovpoqe87.png",
-          imageAlt: "Trimming service 4",
-        },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404679-gxcczyl5.png",
-          imageAlt: "Trimming service 5",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-prepares-climb-ropes-park_1304-4997.jpg?_wi=1",
-          imageAlt: "Trimming service 6",
-        },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-kxh2doap.png?_wi=1", imageAlt: "Trimming service 1" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-shllb02o.png", imageAlt: "Trimming service 2" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-au8ffj43.png", imageAlt: "Trimming service 3" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-ovpoqe87.png", imageAlt: "Trimming service 4" },
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404679-gxcczyl5.png", imageAlt: "Trimming service 5" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/man-prepares-climb-ropes-park_1304-4997.jpg?_wi=1", imageAlt: "Trimming service 6" },
       ]}
     />
   </div>
@@ -102,23 +72,11 @@ export default function LandingPage() {
   <div id="about" data-section="about">
       <AboutMetric
       useInvertedBackground={true}
-      title="Why Property Owners Choose Us"
+      title={t("Why Property Owners Choose Us", "Por qué los dueños de propiedades nos eligen")}
       metrics={[
-        {
-          icon: ShieldCheck,
-          label: "Fully Insured",
-          value: "100%",
-        },
-        {
-          icon: Award,
-          label: "Certified Arborists",
-          value: "15+",
-        },
-        {
-          icon: Clock,
-          label: "Years Experience",
-          value: "20+",
-        },
+        { icon: ShieldCheck, label: t("Fully Insured", "Totalmente Asegurado"), value: "100%" },
+        { icon: Award, label: t("Certified Arborists", "Arboristas Certificados"), value: "15+" },
+        { icon: Clock, label: t("Years Experience", "Años de Experiencia"), value: "20+" },
       ]}
       metricsAnimation="slide-up"
     />
@@ -130,63 +88,24 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "1",
-          title: "Tree Pruning",
-          author: "Pro Team",
-          description: "Expert canopy management to enhance health and property aesthetics.",
-          tags: [
-            "Maintenance",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-prepares-climb-ropes-park_1304-4997.jpg?_wi=2",
-        },
-        {
-          id: "2",
-          title: "Hazardous Removal",
-          author: "Removal Team",
-          description: "Safe, efficient removal of dead or dangerous trees by specialists.",
-          tags: [
-            "Safety",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/pile-logs-green-forest_181624-42990.jpg",
-        },
-        {
-          id: "3",
-          title: "Stump Grinding",
-          author: "Cleanup Team",
-          description: "Complete removal of stumps to reclaim your landscape space.",
-          tags: [
-            "Cleanup",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/faceless-lumberman-chopping-log-forest_23-2148253379.jpg",
-        },
+        { id: "1", title: t("Tree Pruning", "Poda de Árboles"), author: "Pro Team", description: t("Expert canopy management to enhance health and property aesthetics.", "Gestión experta de copas para mejorar la salud y estética de la propiedad."), tags: [t("Maintenance", "Mantenimiento")], imageSrc: "http://img.b2bpic.net/free-photo/man-prepares-climb-ropes-park_1304-4997.jpg?_wi=2" },
+        { id: "2", title: t("Hazardous Removal", "Eliminación de Peligros"), author: "Removal Team", description: t("Safe, efficient removal of dead or dangerous trees by specialists.", "Eliminación segura y eficiente de árboles muertos o peligrosos por especialistas."), tags: [t("Safety", "Seguridad")], imageSrc: "http://img.b2bpic.net/free-photo/pile-logs-green-forest_181624-42990.jpg" },
+        { id: "3", title: t("Stump Grinding", "Trituración de Tocones"), author: "Cleanup Team", description: t("Complete removal of stumps to reclaim your landscape space.", "Eliminación completa de tocones para recuperar el espacio de su paisaje."), tags: [t("Cleanup", "Limpieza")], imageSrc: "http://img.b2bpic.net/free-photo/faceless-lumberman-chopping-log-forest_23-2148253379.jpg" },
       ]}
-      title="Our Specialized Tree Services"
-      description="Precision care for every tree on your property, ensuring health and safety."
+      title={t("Our Specialized Tree Services", "Nuestros Servicios Especializados")}
+      description={t("Precision care for every tree on your property, ensuring health and safety.", "Cuidado de precisión para cada árbol en su propiedad, garantizando salud y seguridad.")}
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
       useInvertedBackground={true}
-      title="Safety & Performance Stats"
-      tag="Trusted Quality"
+      title={t("Safety & Performance Stats", "Estadísticas de Seguridad y Rendimiento")}
+      tag={t("Trusted Quality", "Calidad de Confianza")}
       metrics={[
-        {
-          id: "m1",
-          value: "5000+",
-          description: "Trees Safely Trimmed",
-        },
-        {
-          id: "m2",
-          value: "98%",
-          description: "Customer Satisfaction",
-        },
-        {
-          id: "m3",
-          value: "24/7",
-          description: "Emergency Availability",
-        },
+        { id: "m1", value: "5000+", description: t("Trees Safely Trimmed", "Árboles Podados de Forma Segura") },
+        { id: "m2", value: "98%", description: t("Customer Satisfaction", "Satisfacción del Cliente") },
+        { id: "m3", value: "24/7", description: t("Emergency Availability", "Disponibilidad de Emergencia") },
       ]}
       metricsAnimation="blur-reveal"
     />
@@ -198,81 +117,17 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Sarah Miller",
-          role: "Homeowner",
-          company: "Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-browsing-tablet-table_23-2147895027.jpg",
-        },
-        {
-          id: "2",
-          name: "David Chen",
-          role: "Property Manager",
-          company: "Management",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-smiling-woman_171337-4171.jpg",
-        },
-        {
-          id: "3",
-          name: "Robert Smith",
-          role: "Homeowner",
-          company: "Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/gardening-mid-aged-man-working-garden-with-gtareden-inventory_259150-58928.jpg",
-        },
-        {
-          id: "4",
-          name: "Maria Garcia",
-          role: "Landowner",
-          company: "Resident",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-university-student-girl-sits-park-lawn-leans-tree-smiles-resting-outdoors_1258-137859.jpg",
-        },
-        {
-          id: "5",
-          name: "Tom Baker",
-          role: "Manager",
-          company: "Commercial",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/group-friends-restaurant_23-2148395357.jpg",
-        },
+        { id: "1", name: "Sarah Miller", role: t("Homeowner", "Propietario"), company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-browsing-tablet-table_23-2147895027.jpg" },
+        { id: "2", name: "David Chen", role: t("Property Manager", "Gestor de Propiedades"), company: "Management", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-smiling-woman_171337-4171.jpg" },
+        { id: "3", name: "Robert Smith", role: t("Homeowner", "Propietario"), company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/gardening-mid-aged-man-working-garden-with-gtareden-inventory_259150-58928.jpg" },
       ]}
       kpiItems={[
-        {
-          value: "4.9/5",
-          label: "Avg Rating",
-        },
-        {
-          value: "100%",
-          label: "Reliability",
-        },
-        {
-          value: "500+",
-          label: "Reviews",
-        },
+        { value: "4.9/5", label: t("Avg Rating", "Calificación Promedio") },
+        { value: "100%", label: t("Reliability", "Confiabilidad") },
+        { value: "500+", label: t("Reviews", "Reseñas") },
       ]}
-      title="What Our Clients Say"
-      description="Hear from the homeowners and property managers we've helped."
-    />
-  </div>
-
-  <div id="socialProof" data-section="socialProof">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "Evergreen Management",
-        "Oakland HOA",
-        "Maple Grove Realty",
-        "Pine Valley Estates",
-        "Cedar Crest Services",
-        "Willow Creek Prop",
-        "Birch Grove Association",
-      ]}
-      title="We Work With The Best"
-      description="Trusted by leading property management firms and local associations."
+      title={t("What Our Clients Say", "Lo que Dicen Nuestros Clientes")}
+      description={t("Hear from the homeowners and property managers we've helped.", "Escuche a los propietarios y gestores de propiedades a los que hemos ayudado.")}
     />
   </div>
 
@@ -280,23 +135,10 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Are you fully insured?",
-          content: "Yes, we are fully licensed and insured for your protection and property safety.",
-        },
-        {
-          id: "q2",
-          title: "Do you offer emergency service?",
-          content: "We offer 24/7 emergency response for storm damage and dangerous tree hazards.",
-        },
-        {
-          id: "q3",
-          title: "How long until you can start?",
-          content: "We pride ourselves on responsive service and can often schedule same-week assessments.",
-        },
+        { id: "q1", title: t("Are you fully insured?", "¿Están totalmente asegurados?"), content: t("Yes, we are fully licensed and insured for your protection and property safety.", "Sí, estamos totalmente licenciados y asegurados para su protección y seguridad de la propiedad.") },
+        { id: "q2", title: t("Do you offer emergency service?", "¿Ofrecen servicio de emergencia?"), content: t("We offer 24/7 emergency response for storm damage and dangerous tree hazards.", "Ofrecemos respuesta de emergencia 24/7 para daños por tormenta y peligros de árboles peligrosos.") },
       ]}
-      sideTitle="Frequently Asked Questions"
+      sideTitle={t("Frequently Asked Questions", "Preguntas Frecuentes")}
       faqsAnimation="slide-up"
     />
   </div>
@@ -304,17 +146,12 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
-        variant: "plain",
-      }}
-      tag="Ready to get started?"
-      title="Schedule Your Free Estimate"
-      description="Fill out our form or call us to discuss your tree care needs today."
+      background={{ variant: "plain" }}
+      tag={t("Ready to get started?", "¿Listo para comenzar?")}
+      title={t("Schedule Your Free Estimate", "Programe su Presupuesto Gratuito")}
+      description={t("Fill out our form or call us to discuss your tree care needs today.", "Complete nuestro formulario o llámenos para discutir sus necesidades de cuidado de árboles hoy mismo.")}
       buttons={[
-        {
-          text: "Contact Us Now",
-          href: "#",
-        },
+        { text: t("Contact Us Now", "Contáctenos Ahora"), href: "/contact" },
       ]}
     />
   </div>
@@ -324,45 +161,7 @@ export default function LandingPage() {
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-kxh2doap.png?_wi=2"
       logoText="ArborPro"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Reviews",
-              href: "#testimonials",
-            },
-          ],
-        },
-        {
-          title: "Services",
-          items: [
-            {
-              label: "Pruning",
-              href: "#features",
-            },
-            {
-              label: "Removal",
-              href: "#features",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
+        { title: t("Company", "Empresa"), items: [{ label: t("About Us", "Sobre Nosotros"), href: "/about" }, { label: t("Reviews", "Reseñas"), href: "/reviews" }] },
       ]}
     />
   </div>

src/app/styles/variables.css

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