Update src/app/page.tsx

src/app/globals.css

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

src/app/page.tsx

@@ -1,9 +1,9 @@
 "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';
@@ -27,8 +27,8 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="extrabold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingOverlay
+      <div id="nav" data-section="nav" style={{ backgroundColor: '#f7fffa' }}>
+        <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">
-        <TestimonialAboutCard
+      <div id="about" data-section="about" style={{ backgroundColor: '#f7fffa' }}>
+        <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."
-          description="Margaret & Thomas"
-          subdescription="London, United Kingdom"
-          icon={Heart}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556190908-llv80fhw.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767556193442-etd1bm8w.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,7 +232,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="team" data-section="team">
+      <div id="team" data-section="team" style={{ backgroundColor: '#f7fffa' }}>
         <TeamCardFive
           title="Meet Our Hospitality Team"
           description="Dedicated professionals committed to creating your perfect Alpine experience."
@@ -268,7 +266,7 @@ export default function LandingPage() {
         />
       </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."
@@ -335,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"
@@ -345,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={[