Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -7,9 +7,9 @@ import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqBase from '@/components/sections/faq/FaqBase';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 
 export default function LandingPage() {
@@ -64,20 +64,22 @@ export default function LandingPage() {
   </div>
 
   <div id="about" data-section="about">
-      <MetricSplitMediaAbout
+      <SplitAbout
       useInvertedBackground={true}
+      textboxLayout="default"
       title="Sobre Nosotros"
       description="Con décadas de experiencia en el sector náutico, Iberian Marine combina tradición y tecnología para ofrecer las mejores soluciones de navegación."
-      metrics={[
+      bulletPoints={[
-        { value: "20+", title: "Años de Experiencia" },
+        { title: "Tradición", description: "Décadas de experiencia en la industria." },
-        { value: "500+", title: "Barcos Vendidos" },
+        { title: "Tecnología", description: "Innovación constante en diseño." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/sky-sea-april-01-2024_58702-17032.jpg"
+      mediaAnimation="none"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardFour
+      <ProductCardOne
       animationType="slide-up"
       textboxLayout="split"
       gridVariant="four-items-2x2-equal-grid"
@@ -151,4 +153,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f4f5f7;
+  --card: #f9f9f9;
-  --foreground: #0a1f44;
+  --foreground: #000612e6;
-  --primary-cta: #0a1f44;
+  --primary-cta: #15479c;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #8a9bb0;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #ffffff;
+  --secondary-cta-text: #000612e6;
-  --accent: #2c3e50;
+  --accent: #e2e2e2;
-  --background-accent: #f4f5f7;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);