Update src/app/page.tsx

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #f8fcff;;
+  --background: #f7fffa;;
-  --card: #ffffff;;
+  --card: #f1fff8;;
-  --foreground: #00101f;;
+  --foreground: #001a0a;;
-  --primary-cta: #409fff;;
+  --primary-cta: #0a7039;;
   --secondary-cta: #ffffff;;
-  --accent: #c7e2fc;;
+  --accent: #a8d9be;;
-  --background-accent: #9bcfff;;
+  --background-accent: #6bbf8e;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -1,17 +1,17 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import MediaAbout from '@/components/sections/about/MediaAbout';
 import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
 import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import TeamCardThree from '@/components/sections/team/TeamCardThree';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
 import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
 import ContactInline from '@/components/sections/contact/ContactInline';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import { Star, Heart, Home, Mountain, Sparkles, Crown, Linkedin, Globe } from "lucide-react";
+import { Star, Heart, Home, Mountain, Sparkles, Crown } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -27,8 +27,8 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="extrabold"
     >
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" style={{ backgroundColor: '#f7fffa' }}>
-        <NavbarLayoutFloatingOverlay
+        <NavbarStyleCentered
           brandName="Alpine Luxury"
           navItems={[
             { name: "Rooms", id: "rooms" },
@@ -44,7 +44,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="hero" data-section="hero" style={{ backgroundColor: '#f1fff8' }}>
         <HeroBillboardCarousel
           title="Alpine Luxury in the Heart of Switzerland"
           description="Experience unparalleled elegance nestled among snow-capped peaks. World-class hospitality, stunning vistas, and unforgettable mountain moments await."
@@ -82,21 +82,19 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="about" data-section="about">
+      <div id="about" data-section="about" style={{ backgroundColor: '#f7fffa' }}>
-        <TestimonialAboutCard
+        <MediaAbout
+          title="A sanctuary where Alpine grandeur meets Swiss hospitality perfection."
+          description="Margaret & Thomas from London, United Kingdom share their unforgettable experience at our luxury alpine resort."
           tag="Guest Testimonial"
           tagIcon={Star}
-          title="A sanctuary where Alpine grandeur meets Swiss hospitality perfection."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556193442-etd1bm8w.jpg"
-          description="Margaret & Thomas"
-          subdescription="London, United Kingdom"
-          icon={Heart}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556190908-llv80fhw.jpg"
           imageAlt="Luxurious mountain resort setting"
           useInvertedBackground="noInvert"
         />
       </div>
 
-      <div id="amenities" data-section="amenities">
+      <div id="amenities" data-section="amenities" style={{ backgroundColor: '#f1fff8' }}>
         <FeatureCardTwentyOne
           title="World-Class Amenities"
           description="Discover an extensive range of premium facilities designed to elevate your Alpine escape. From rejuvenating wellness to culinary excellence."
@@ -130,7 +128,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="rooms" data-section="rooms">
+      <div id="rooms" data-section="rooms" style={{ backgroundColor: '#f7fffa' }}>
         <PricingCardTwo
           title="Room & Suite Collections"
           description="Choose from our exquisitely appointed accommodations, each offering panoramic mountain views and uncompromising luxury."
@@ -197,7 +195,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div id="metrics" data-section="metrics" style={{ backgroundColor: '#f1fff8' }}>
         <MetricCardEleven
           title="Our Alpine Legacy"
           description="Trusted by discerning travelers worldwide for exceptional mountain hospitality and service excellence."
@@ -234,52 +232,41 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="team" data-section="team">
+      <div id="team" data-section="team" style={{ backgroundColor: '#f7fffa' }}>
-        <TeamCardThree
+        <TeamCardFive
           title="Meet Our Hospitality Team"
           description="Dedicated professionals committed to creating your perfect Alpine experience."
           tag="Staff"
           textboxLayout="default"
           useInvertedBackground="noInvert"
           animationType="slide-up"
-          members={[
+          team={[
             {
               id: "1",
               name: "Samuel Eicher",
               role: "General Manager",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556199718-irvjkbto.jpg",
-              imageAlt: "General Manager Samuel Eicher",
+              imageAlt: "General Manager Samuel Eicher"
-              socialLinks: [
-                { icon: Linkedin, url: "https://linkedin.com" },
-                { icon: Globe, url: "https://example.com" }
-              ]
             },
             {
               id: "2",
               name: "Marta Rossi",
               role: "Head Concierge",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556198938-sapad5cn.jpg",
-              imageAlt: "Head Concierge Marta Rossi",
+              imageAlt: "Head Concierge Marta Rossi"
-              socialLinks: [
-                { icon: Linkedin, url: "https://linkedin.com" }
-              ]
             },
             {
               id: "3",
               name: "Chef Andreas Müller",
               role: "Executive Chef",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556200257-fw1n6fwc.jpg",
-              imageAlt: "Executive Chef Andreas Müller",
+              imageAlt: "Executive Chef Andreas Müller"
-              socialLinks: [
-                { icon: Linkedin, url: "https://linkedin.com" },
-                { icon: Globe, url: "https://example.com" }
-              ]
             }
           ]}
         />
       </div>
 
-      <div id="reviews" data-section="reviews">
+      <div id="reviews" data-section="reviews" style={{ backgroundColor: '#f1fff8' }}>
         <TestimonialCardEight
           title="Guest Testimonials"
           description="Hear from travelers who have experienced our Alpine luxury firsthand."
@@ -346,7 +333,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact" data-section="contact" style={{ backgroundColor: '#f7fffa' }}>
         <ContactInline
           text="Ready to escape to Alpine luxury?"
           inputPlaceholder="Your email address"
@@ -356,7 +343,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="footer" data-section="footer">
+      <div id="footer" data-section="footer" style={{ backgroundColor: '#f1fff8' }}>
         <FooterLogoEmphasis
           logoText="Alpine Luxury"
           columns={[