Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -15,16 +15,16 @@ import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="elastic-effect"
         defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
-        contentWidth="small"
-        sizing="largeSmall"
-        background="none"
-        cardStyle="subtle-shadow"
-        primaryButtonStyle="double-inset"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSizeMediumTitles"
+        background="aurora"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="bold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
@@ -43,7 +43,7 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{ variant: "radial-gradient" }}
+      background={{ variant: "sparkles-gradient" }}
       title="Luxury Island Escape in Bahrain"
       description="Discover exceptional beachfront elegance, private comfort, and unforgettable hospitality at The Grove Resort Bahrain."
       avatars={[
@@ -54,8 +54,8 @@ export default function LandingPage() {
         { src: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg", alt: "Guest" },
       ]}
       buttons={[
-        { text: "Book Your Stay", onClick: () => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' }) },
-        { text: "Explore Suites", onClick: () => document.getElementById('suites')?.scrollIntoView({ behavior: 'smooth' }) },
+        { text: "Book Your Stay", href: "#contact" },
+        { text: "Explore Suites", href: "#suites" },
       ]}
       buttonAnimation="slide-up"
       avatarText="Join 5,000+ happy travelers"
@@ -71,7 +71,7 @@ export default function LandingPage() {
 
   <div id="about" data-section="about">
       <TextSplitAbout
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Our Hospitality Promise"
       description={[
         "At The Grove Resort, we blend world-class luxury with the warm traditions of Bahraini hospitality.",        "Our philosophy is rooted in creating unforgettable memories through personalized service and exclusive beachfront amenities."]}
@@ -81,7 +81,7 @@ export default function LandingPage() {
   <div id="amenities" data-section="amenities">
       <FeatureCardNineteen
       textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       features={[
         { tag: "Relax", title: "Luxury Spa", subtitle: "Wellness", description: "Rejuvenate your senses in our world-class sanctuary.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-women-happy-smile-relax-outdoor-swimming-pool-resort_74190-9353.jpg" },
         { tag: "Dining", title: "Fine Dining", subtitle: "Culinary", description: "Experience exquisite flavors from our expert chefs.", imageSrc: "http://img.b2bpic.net/free-photo/luxury-infinity-pool-overlooking-ocean-sunset_23-2151993706.jpg" },
@@ -94,7 +94,7 @@ export default function LandingPage() {
 
   <div id="suites" data-section="suites">
       <ProductCardFour
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
@@ -114,8 +114,8 @@ export default function LandingPage() {
   <div id="reviews" data-section="reviews">
       <TestimonialCardThirteen
       textboxLayout="default"
-      useInvertedBackground={false}
-      animationType="slide-up"
+      useInvertedBackground={true}
+      animationType="depth-3d"
       testimonials={[
         { id: "t1", name: "Sarah J.", handle: "@sarah_j", testimonial: "An absolutely breathtaking experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg" },
         { id: "t2", name: "Michael C.", handle: "@m_chen", testimonial: "Perfect getaway.", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/seductive-lady-pink-silk-robe-holds-champagne-flute_8353-90.jpg" },
@@ -140,19 +140,19 @@ export default function LandingPage() {
       ]}
       title="Frequently Asked Questions"
       description="Common inquiries to help you prepare for your stay."
-      faqsAnimation="slide-up"
+      faqsAnimation="blur-reveal"
     />
   </div>
 
   <div id="contact" data-section="contact">
       <ContactSplit
-      useInvertedBackground={false}
-      background={{ variant: "plain" }}
+      useInvertedBackground={true}
+      background={{ variant: "rotated-rays-animated" }}
       tag="Get in Touch"
       title="Book Your Stay"
       description="Contact us to secure your suite or inquire about special offers."
       imageSrc="http://img.b2bpic.net/free-photo/sofa_1203-2905.jpg"
-      mediaAnimation="slide-up"
+      mediaAnimation="blur-reveal"
       onSubmit={(email) => alert(`Thank you! We will reach out to you at ${email} shortly.`)}
     />
   </div>
@@ -160,8 +160,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        { items: [{ label: "Rooms", onClick: () => document.getElementById('suites')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "About Us", onClick: () => document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }) }] },
-        { items: [{ label: "Contact", onClick: () => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' }) }, { label: "Privacy Policy" }] },
+        { items: [{ label: "Rooms", href: "#suites" }, { label: "About Us", href: "#about" }] },
+        { items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy" }] },
       ]}
       logoText="The Grove Resort Bahrain"
     />

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --background: #efebe5;
+  --card: #f7f2ea;
+  --foreground: #000000;
+  --primary-cta: #000000;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #ffffff;
+  --background-accent: #e1b875;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);