Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -45,6 +45,7 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboard
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       background={{
         variant: "gradient-bars"}}
       title="Gestión y Representación Empresarial Integral"
@@ -53,7 +54,7 @@ export default function LandingPage() {
         {
           text: "Conozca más",          href: "#about"},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/business-people-walking-outside-office-building_107420-74359.jpg"
+      imageSrc="https://img.b2bpic.net/premium-photo/fund-managers-team-consultation-discuss-about-analysis-investment-stock-market-office_265022-104085.jpg?id=392388891"
       mediaAnimation="blur-reveal"
       avatars={[
         {
@@ -98,11 +99,13 @@ export default function LandingPage() {
           label: "Confianza",          value: "Segura"},
       ]}
       metricsAnimation="slide-up"
+      metricsContainerClassName="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardTwentyOne
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       useInvertedBackground={true}
       title="Servicios Estratégicos"
       description="Desarrollamos soluciones integrales para el crecimiento corporativo, asegurando cumplimiento y éxito operativo."
@@ -121,6 +124,7 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       animationType="slide-up"
       textboxLayout="split"
       useInvertedBackground={false}
@@ -140,11 +144,13 @@ export default function LandingPage() {
       ]}
       title="Resultados en Cifras"
       description="Compromiso inquebrantable con la excelencia y la eficiencia empresarial que su compañía necesita."
+      gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       useInvertedBackground={false}
       faqs={[
         {
@@ -161,6 +167,7 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCenter
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-md"
       useInvertedBackground={true}
       background={{
         variant: "rotated-rays-static"}}
@@ -172,6 +179,7 @@ export default function LandingPage() {
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
+      containerClassName="px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-xl"
       logoText="GREI"
       columns={[
         {
@@ -192,6 +200,7 @@ export default function LandingPage() {
         },
       ]}
       copyrightText="© 2024 GREI Gestión Empresarial."
+      columnsClassName="flex flex-col sm:flex-row justify-between gap-8"
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfbfb;
+  --background: #f5f5f5;
   --card: #ffffff;
-  --foreground: #0a1526;
+  --foreground: #333333;
-  --primary-cta: #0a1526;
+  --primary-cta: #6b7280;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #c5a059;
+  --secondary-cta: #d1d5db;
   --secondary-cta-text: #ffffff;
-  --accent: #c5a059;
+  --accent: #9ca3af;
-  --background-accent: #f3eee5;
+  --background-accent: #e5e7eb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);