Update src/app/styles/variables.css

Merge version_2 into main

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,18 +37,15 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
+        { name: t("Services", "Servicios"), id: "/services" },
-          name: "Services",          id: "/services"},
+        { name: t("Why Us", "Por qué nosotros"), id: "/about" },
-        {
+        { name: t("Reviews", "Reseñas"), id: "/reviews" },
-          name: "Why Us",          id: "/about"},
+        { name: t("Contact", "Contacto"), id: "/contact" },
-        {
+        { name: "ES/EN", id: "lang-switch" },
-          name: "Reviews",          id: "/reviews"},
-        {
-          name: "Contact",          id: "/contact"},
       ]}
       brandName="ArborPro"
       button={{
-        text: "Get Quote",        href: "/contact"}}
+        text: t("Get Quote", "Obtener Presupuesto"), href: "/contact"}}
     />
   </div>
 
@@ -51,25 +53,18 @@ export default function LandingPage() {
       <HeroBillboardCarousel
       background={{
         variant: "gradient-bars"}}
-      title="Professional Tree Trimming, Safely Done Right"
+      title={t("Professional Tree Trimming, Safely Done Right", "Poda Profesional de Árboles, Realizada de Forma Segura")}
-      description="Certified arborists protecting your property and landscape. Free estimates, fully insured, same-week service available."
+      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: t("Request Free Estimate", "Solicitar Presupuesto Gratuito"), href: "/contact" },
-          text: "Request Free Estimate",          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-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-shllb02o.png",          imageAlt: "Trimming service 2"},
+        { 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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CpR37lvekQ9JMF0P8rxVBCmgJD/uploaded-1777080404678-au8ffj43.png",          imageAlt: "Trimming service 3"},
+        { 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-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>
@@ -77,17 +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: t("Fully Insured", "Totalmente Asegurado"), value: "100%" },
-          icon: ShieldCheck,
+        { icon: Award, label: t("Certified Arborists", "Arboristas Certificados"), value: "15+" },
-          label: "Fully Insured",          value: "100%"},
+        { icon: Clock, label: t("Years Experience", "Años de Experiencia"), value: "20+" },
-        {
-          icon: Award,
-          label: "Certified Arborists",          value: "15+"},
-        {
-          icon: Clock,
-          label: "Years Experience",          value: "20+"},
       ]}
       metricsAnimation="slide-up"
     />
@@ -99,36 +88,24 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
+        { 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: "1",          title: "Tree Pruning",          author: "Pro Team",          description: "Expert canopy management to enhance health and property aesthetics.",          tags: [
+        { 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" },
-            "Maintenance"],
+        { 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" },
-          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"},
       ]}
-      title="Our Specialized Tree Services"
+      title={t("Our Specialized Tree Services", "Nuestros Servicios Especializados")}
-      description="Precision care for every tree on your property, ensuring health and safety."
+      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"
+      title={t("Safety & Performance Stats", "Estadísticas de Seguridad y Rendimiento")}
-      tag="Trusted Quality"
+      tag={t("Trusted Quality", "Calidad de Confianza")}
       metrics={[
-        {
+        { id: "m1", value: "5000+", description: t("Trees Safely Trimmed", "Árboles Podados de Forma Segura") },
-          id: "m1",          value: "5000+",          description: "Trees Safely Trimmed"},
+        { id: "m2", value: "98%", description: t("Customer Satisfaction", "Satisfacción del Cliente") },
-        {
+        { id: "m3", value: "24/7", description: t("Emergency Availability", "Disponibilidad de Emergencia") },
-          id: "m2",          value: "98%",          description: "Customer Satisfaction"},
-        {
-          id: "m3",          value: "24/7",          description: "Emergency Availability"},
       ]}
       metricsAnimation="blur-reveal"
     />
@@ -140,43 +117,17 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { 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: "1",          name: "Sarah Miller",          role: "Homeowner",          company: "Resident",          rating: 5,
+        { 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" },
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-browsing-tablet-table_23-2147895027.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" },
-        {
-          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"},
       ]}
       kpiItems={[
-        {
+        { value: "4.9/5", label: t("Avg Rating", "Calificación Promedio") },
-          value: "4.9/5",          label: "Avg Rating"},
+        { value: "100%", label: t("Reliability", "Confiabilidad") },
-        {
+        { value: "500+", label: t("Reviews", "Reseñas") },
-          value: "100%",          label: "Reliability"},
-        {
-          value: "500+",          label: "Reviews"},
       ]}
-      title="What Our Clients Say"
+      title={t("What Our Clients Say", "Lo que Dicen Nuestros Clientes")}
-      description="Hear from the homeowners and property managers we've helped."
+      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>
-
-  <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."
     />
   </div>
 
@@ -184,14 +135,10 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
+        { 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: "q1",          title: "Are you fully insured?",          content: "Yes, we are fully licensed and insured for your protection and property safety."},
+        { 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.") },
-        {
-          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."},
       ]}
-      sideTitle="Frequently Asked Questions"
+      sideTitle={t("Frequently Asked Questions", "Preguntas Frecuentes")}
       faqsAnimation="slide-up"
     />
   </div>
@@ -199,14 +146,12 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain"}}
+      tag={t("Ready to get started?", "¿Listo para comenzar?")}
-      tag="Ready to get started?"
+      title={t("Schedule Your Free Estimate", "Programe su Presupuesto Gratuito")}
-      title="Schedule Your Free Estimate"
+      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.")}
-      description="Fill out our form or call us to discuss your tree care needs today."
       buttons={[
-        {
+        { text: t("Contact Us Now", "Contáctenos Ahora"), href: "/contact" },
-          text: "Contact Us Now",          href: "/contact"},
       ]}
     />
   </div>
@@ -216,30 +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: t("Company", "Empresa"), items: [{ label: t("About Us", "Sobre Nosotros"), href: "/about" }, { label: t("Reviews", "Reseñas"), href: "/reviews" }] },
-          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>

src/app/styles/variables.css

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