Merge version_6 into main

Merge version_6 into main

src/app/about/page.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardTwentyTwo from '@/components/sections/feature/FeatureCardTwentyTwo';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Sparkles } from "lucide-react";
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="medium"
+      background="floatingGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="solid"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingOverlay
+          brandName="Luxe Haven"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Rooms & Suites", id: "/#about" },
+            { name: "Amenities", id: "/#features" },
+            { name: "Guests Love Us", id: "/#testimonials" },
+            { name: "Booking", id: "/#pricing" },
+            { name: "About", id: "about" }
+          ]}
+          button={{
+            text: "Reserve Now",            href: "/#pricing"
+          }}
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MediaAbout
+          title="Our Story & Mission"
+          description="Luxe Haven was founded with a singular vision: to redefine luxury hospitality. For over two decades, we've been committed to providing world-class accommodations, impeccable service, and unforgettable experiences. Our journey began with a passion for excellence and has evolved into a beacon of luxury in the hospitality industry."
+          tag="Our Heritage"
+          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg?_wi=2"
+          imageAlt="Luxe Haven heritage and excellence"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Explore Our Rooms", href: "/#about" }
+          ]}
+        />
+      </div>
+
+      <div id="features" data-section="features">
+        <FeatureCardTwentyTwo
+          title="Our Commitment to Excellence"
+          description="Every aspect of Luxe Haven reflects our dedication to luxury, comfort, and exceptional service."
+          tag="Values"
+          features={[
+            {
+              id: "1",              category: ["Quality", "Service"],
+              title: "Uncompromising Quality Standards",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg?_wi=2",              imageAlt: "Premium quality and service standards"
+            },
+            {
+              id: "2",              category: ["Innovation", "Technology"],
+              title: "Cutting-Edge Technology",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg?_wi=2",              imageAlt: "Modern technology integration"
+            },
+            {
+              id: "3",              category: ["Sustainability", "Environment"],
+              title: "Environmental Responsibility",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg?_wi=2",              imageAlt: "Sustainable luxury practices"
+            },
+            {
+              id: "4",              category: ["Community", "Care"],
+              title: "Community Engagement",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg?_wi=2",              imageAlt: "Community and social responsibility"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="Luxe Haven"
+          columns={[
+            {
+              title: "Rooms",              items: [
+                { label: "Standard Room", href: "/#pricing" },
+                { label: "Deluxe Suite", href: "/#pricing" },
+                { label: "Presidential Suite", href: "/#pricing" }
+              ]
+            },
+            {
+              title: "Amenities",              items: [
+                { label: "Spa & Wellness", href: "/#features" },
+                { label: "Fine Dining", href: "/#features" },
+                { label: "Swimming Pool", href: "/#features" },
+                { label: "Concierge Service", href: "/#features" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/about" },
+                { label: "Guest Reviews", href: "/#testimonials" },
+                { label: "Contact", href: "/#contact" },
+                { label: "Careers", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms & Conditions", href: "#" },
+                { label: "Booking Policies", href: "#" },
+                { label: "Cancellation Policy", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 Luxe Haven Hotels. All rights reserved."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/layout.tsx

@@ -1413,4 +1413,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
@@ -34,7 +34,8 @@ export default function LandingPage() {
             { name: "Rooms & Suites", id: "about" },
             { name: "Amenities", id: "features" },
             { name: "Guests Love Us", id: "testimonials" },
-            { name: "Booking", id: "pricing" }
+            { name: "Booking", id: "pricing" },
+            { name: "About", id: "/about" }
           ]}
           button={{
             text: "Reserve Now",            href: "#pricing"
@@ -65,7 +66,7 @@ export default function LandingPage() {
           title="Rooms & Suites Beyond Compare"
           description="Each room is meticulously designed with premium furnishings, modern technology, and stunning views. From cozy standard rooms to lavish suites, we offer accommodations for every traveler."
           tag="Accommodations"
-          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg"
+          imageSrc="http://img.b2bpic.net/free-photo/luxury-bedroom-interior-with-rich-furniture-scenic-view-from-walkout-deck_1258-111483.jpg?_wi=1"
           imageAlt="Luxurious hotel room with premium amenities"
           useInvertedBackground={false}
           buttons={[
@@ -82,19 +83,19 @@ export default function LandingPage() {
           features={[
             {
               id: "1",              category: ["Wellness", "Relaxation"],
-              title: "Full-Service Spa & Wellness Center",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg",              imageAlt: "Premium spa and wellness center"
+              title: "Full-Service Spa & Wellness Center",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-is-relaxing-jacuzzi_169016-22940.jpg?_wi=1",              imageAlt: "Premium spa and wellness center"
             },
             {
               id: "2",              category: ["Dining", "Cuisine"],
-              title: "Fine Dining Restaurant & Bar",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg",              imageAlt: "Elegant restaurant and lounge area"
+              title: "Fine Dining Restaurant & Bar",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-table-with-cheese-plate-pate-it_140725-12866.jpg?_wi=1",              imageAlt: "Elegant restaurant and lounge area"
             },
             {
               id: "3",              category: ["Recreation", "Leisure"],
-              title: "Olympic-Size Swimming Pool",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg",              imageAlt: "Resort-style swimming pool"
+              title: "Olympic-Size Swimming Pool",              imageSrc: "http://img.b2bpic.net/free-photo/umbrella-deck-chair-around-outdoor-swimming-pool-hotel-resort-nearly-sea-beach-ocean_74190-14080.jpg?_wi=1",              imageAlt: "Resort-style swimming pool"
             },
             {
               id: "4",              category: ["Service", "Hospitality"],
-              title: "24/7 Concierge & Room Service",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg",              imageAlt: "Professional hotel staff providing service"
+              title: "24/7 Concierge & Room Service",              imageSrc: "http://img.b2bpic.net/free-photo/tourists-going-through-check-process-hotel-reception-desk_482257-82845.jpg?_wi=1",              imageAlt: "Professional hotel staff providing service"
             }
           ]}
           animationType="slide-up"
@@ -230,7 +231,7 @@ export default function LandingPage() {
             },
             {
               title: "Company",              items: [
-                { label: "About Us", href: "#about" },
+                { label: "About Us", href: "/about" },
                 { label: "Guest Reviews", href: "#testimonials" },
                 { label: "Contact", href: "#contact" },
                 { label: "Careers", href: "#" }
@@ -250,4 +251,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-open-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #f5f5f5;;
-  --primary-cta: #ff0000;;
-  --secondary-cta: #1a1a1a;;
-  --accent: #991b1b;;
-  --background-accent: #7f1d1d;; */
+  /* --background: #ffffff;;;;;;;;;;;;;;;;;;;
+  --card: #f9f9f9;;;;;;;;;;;;;;;;;;;
+  --foreground: #000f06e6;;;;;;;;;;;;;;;;;;;
+  --primary-cta: #0a7039;;;;;;;;;;;;;;;;;;;
+  --secondary-cta: #f9f9f9;;;;;;;;;;;;;;;;;;;
+  --accent: #e2e2e2;;;;;;;;;;;;;;;;;;;
+  --background-accent: #c4c4c4;;;;;;;;;;;;;;;;;;; */
 
-  --background: #0a0a0a;;
-  --card: #1a1a1a;;
-  --foreground: #f5f5f5;;
-  --primary-cta: #ff0000;;
-  --primary-cta-text: #fffafa;;
-  --secondary-cta: #1a1a1a;;
-  --secondary-cta-text: #1a0000;;
-  --accent: #991b1b;;
-  --background-accent: #7f1d1d;;
+  --background: #f6f0e9;;;;;;;;;;;;;;;;;;;
+  --card: #efe7dd;;;;;;;;;;;;;;;;;;;
+  --foreground: #2b180a;;;;;;;;;;;;;;;;;;;
+  --primary-cta: #2b180a;;;;;;;;;;;;;;;;;;;
+  --primary-cta-text: #f6f0e9;;;;;;;;;;;;;;;;;;;
+  --secondary-cta: #efe7dd;;;;;;;;;;;;;;;;;;;
+  --secondary-cta-text: #2b180a;;;;;;;;;;;;;;;;;;;
+  --accent: #94877c;;;;;;;;;;;;;;;;;;;
+  --background-accent: #afa094;;;;;;;;;;;;;;;;;;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);