Merge version_1 into main

Merge version_1 into main

src/app/about/page.tsx

@@ -1,142 +1,166 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroOverlay from "@/components/sections/hero/HeroOverlay";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Twitter } from "lucide-react";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Mail, Sparkles } from "lucide-react";
 
 export default function AboutPage() {
-  const navItems = [
-    { name: "Collection", id: "collection" },
-    { name: "Customize", id: "customize" },
-    { name: "For Retailers", id: "retailers" },
-    { name: "For Hotels", id: "hospitality" },
-    { name: "About", id: "about" },
-  ];
-
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="icon-arrow"
       defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="grid"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="GRRR FLOAT"
-          navItems={navItems}
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Collection", id: "collection" },
+            { name: "Custom Floats", id: "custom-floats" },
+            { name: "For Retailers", id: "retailers" },
+            { name: "For Hotels", id: "hospitality" },
+            { name: "About", id: "about" },
+          ]}
           button={{
-            text: "Contact",
-            href: "/contact",
-          }}
-          animateOnLoad={true}
+            text: "Inquire",            href: "/contact"}}
+          brandName="GRRR FLOAT"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
-          title="About GRRR FLOAT"
-          description="Luxury designer pool floats inspired by high-end fashion and minimalist design philosophy. Crafted for those who appreciate editorial excellence in summer lifestyle."
-          tag="Our Story"
-          imageSrc="http://img.b2bpic.net/free-photo/discussing-text-message_1098-17030.jpg"
-          imageAlt="GRRR FLOAT Brand Story"
-          showBlur={true}
-          showDimOverlay={false}
-          buttons={[
-            {
-              text: "Our Mission",
-              href: "#about-brand",
-            },
-            {
-              text: "Shop Now",
-              href: "/",
-            },
-          ]}
-        />
-      </div>
-
-      <div id="about-brand" data-section="about-brand">
-        <TextSplitAbout
-          title="The GRRR Story"
-          description={[
-            "GRRR FLOAT began with a simple obsession: making the most beautiful pool floats in the world. We were inspired by luxury fashion houses like Jacquemus and the minimalist design philosophy of Apple.",
-            "Each float is designed to be an object of desire. We obsess over materials, proportions, and details. No compromise on quality. No excess in design. Just pure, editorial excellence.",
-            "From private collections to premium hospitality, GRRR FLOAT floats live the summer lifestyle.",
-          ]}
-          useInvertedBackground={false}
-          showBorder={true}
-          buttons={[
-            {
-              text: "Shop Collection",
-              href: "/",
-            },
-          ]}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
-          cardTitle="Trusted by over 2,000 luxury travelers and hospitality professionals worldwide"
-          cardTag="What our community says"
-          testimonials={[
-            {
-              id: "1",
-              name: "Sofia Rossi",
-              imageSrc: "/placeholders/placeholder1.webp?_wi=7",
-              imageAlt: "Sofia Rossi",
-            },
-            {
-              id: "2",
-              name: "Marco Santini",
-              imageSrc: "/placeholders/placeholder1.webp?_wi=8",
-              imageAlt: "Marco Santini",
-            },
-            {
-              id: "3",
-              name: "Isabelle Dubois",
-              imageSrc: "/placeholders/placeholder1.webp?_wi=9",
-              imageAlt: "Isabelle Dubois",
-            },
-            {
-              id: "4",
-              name: "Antonio Moretti",
-              imageSrc: "/placeholders/placeholder1.webp?_wi=10",
-              imageAlt: "Antonio Moretti",
-            },
-          ]}
-          cardAnimation="blur-reveal"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <footer id="footer" data-section="footer">
-        <FooterCard
+        <HeroLogoBillboard
           logoText="GRRR FLOAT"
-          copyrightText="© 2025 GRRR FLOAT. All rights reserved. Minimal design, maximum impact."
-          socialLinks={[
+          description="Luxury designer inflatable pool floats for the discerning swimmer. Handcrafted with premium materials and bold aesthetic vision."
+          buttons={[
             {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
+              text: "Shop Collection",              href: "/collection"},
+            {
+              text: "Customize Float",              href: "/custom-floats"},
+          ]}
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-lifeline_23-2150872162.jpg"
+          imageAlt="Premium designer inflatable pool float in luxury resort setting"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
+        />
+      </div>
+
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="About the Brand"
+          tagIcon={Sparkles}
+          title="Designed for the luxury lifestyle"
+          description="GRRR FLOAT transforms pool culture through thoughtfully designed, premium inflatable products. Inspired by Mediterranean beach clubs, Japanese minimalism, and European luxury brands, we create pieces that are as beautiful displayed as they are functional in the water."
+          metrics={[
+            {
+              value: "100%",              title: "Premium Materials"},
+            {
+              value: "10+",              title: "Signature Designs"},
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-beautiful-bouquet-spring-flowers_23-2148826787.jpg"
+          imageAlt="GRRR FLOAT design studio workspace"
+          useInvertedBackground={true}
+          mediaAnimation="slide-up"
+          metricsAnimation="opacity"
+          tagAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="retail-section" data-section="retail-section">
+        <ProductCardFour
+          title="For Retailers & Boutiques"
+          description="Premium packaging and wholesale pricing for concept stores, beach shops, and lifestyle boutiques. Curate your inventory with designer pool floats."
+          tag="Wholesale"
+          textboxLayout="default"
+          products={[
+            {
+              id: "1",              name: "Retail Display Set",              price: "POA",              variant: "Mixed Assortment",              imageSrc:
+                "http://img.b2bpic.net/free-vector/colorful-summer-sale-label-collection_52683-12393.jpg",              imageAlt: "Luxury retail packaging for designer pool floats",              isFavorited: false,
             },
             {
-              icon: Twitter,
-              href: "https://twitter.com",
-              ariaLabel: "Twitter",
+              id: "2",              name: "Boutique Bundle",              price: "POA",              variant: "Curated Selection",              imageSrc:
+                "http://img.b2bpic.net/free-photo/students-posing-library_23-2147678877.jpg",              imageAlt: "Premium pool float retail merchandising display",              isFavorited: false,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="scale-rotate"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            {
+              text: "Start Conversation",              href: "/contact"},
+            {
+              text: "View Wholesale",              href: "/retailers"},
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
+          logoText="GRRR FLOAT"
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={[
+            {
+              title: "Shop",              items: [
+                {
+                  label: "Summer Collection",                  href: "/collection"},
+                {
+                  label: "Custom Floats",                  href: "/custom-floats"},
+                {
+                  label: "Gift Cards",                  href: "#"},
+              ],
+            },
+            {
+              title: "Business",              items: [
+                {
+                  label: "For Retailers",                  href: "/retailers"},
+                {
+                  label: "For Hotels & Clubs",                  href: "/hospitality"},
+                {
+                  label: "Wholesale Inquiry",                  href: "/contact"},
+              ],
+            },
+            {
+              title: "Company",              items: [
+                {
+                  label: "About",                  href: "/about"},
+                {
+                  label: "Contact",                  href: "/contact"},
+                {
+                  label: "Privacy Policy",                  href: "#"},
+                {
+                  label: "Terms of Service",                  href: "#"},
+              ],
             },
           ]}
         />
-      </footer>
+      </div>
     </ThemeProvider>
   );
 }

src/app/collection/page.tsx

@@ -1,147 +1,138 @@
 "use client";
 
+import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { Instagram, Twitter } from "lucide-react";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { ShoppingBag, Mail } from "lucide-react";
 
 export default function CollectionPage() {
+  const navItems = [
+    { name: "Collection", id: "collection" },
+    { name: "Custom Floats", id: "custom-floats" },
+    { name: "For Retailers", id: "retailers" },
+    { name: "For Hotels", id: "hospitality" },
+    { name: "About", id: "about" },
+  ];
+
+  const navButton = {
+    text: "Inquire",    href: "/contact"};
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "Summer Collection", href: "/collection" },
+        { label: "Custom Floats", href: "/custom-floats" },
+        { label: "Gift Cards", href: "#" },
+      ],
+    },
+    {
+      title: "Business",      items: [
+        { label: "For Retailers", href: "/retailers" },
+        { label: "For Hotels & Clubs", href: "/hospitality" },
+        { label: "Wholesale Inquiry", href: "/contact" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ];
+
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="icon-arrow"
       defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="grid"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
-      {/* Navbar */}
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
+        <NavbarStyleCentered
+          navItems={navItems}
+          button={navButton}
           brandName="GRRR FLOAT"
-          navItems={[
-            { name: "Collection", id: "collection" },
-            { name: "Customize", id: "customize" },
-            { name: "For Retailers", id: "retailers" },
-            { name: "For Hotels", id: "hospitality" },
-            { name: "About", id: "about" },
-          ]}
-          button={{
-            text: "Contact",
-            href: "/contact",
-          }}
-          animateOnLoad={true}
         />
       </div>
 
-      {/* Full Collection */}
-      <div id="full-collection" data-section="full-collection">
-        <ProductCardTwo
-          title="Complete Summer Collection 2025"
-          description="Explore our entire range of designer pool floats, each meticulously crafted for luxury and performance. From statement pieces to everyday essentials, find your perfect float."
-          tag="All Products"
+      <div id="collection-hero" data-section="collection-hero">
+        <ProductCardFour
+          title="Summer Collection"
+          description="Our handpicked selection of designer pool floats for the 2025 season. Each piece combines artistic vision with functional luxury."
+          tag="Retail"
+          tagIcon={ShoppingBag}
+          textboxLayout="default"
           products={[
             {
-              id: "1",
-              brand: "GRRR FLOAT",
-              name: "The Aurora Float",
-              price: "$450",
-              rating: 5,
-              reviewCount: "127",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-swimming-cap_23-2148977951.jpg?_wi=2",
-              imageAlt: "The Aurora Float - Designer Pool Float",
+              id: "1",              name: "Waves Pool Float",              price: "$289",              variant: "Seafoam  2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-cocktail-by-pool_1303-27958.jpg",              imageAlt: "Waves designer pool float in seafoam green",              isFavorited: false,
             },
             {
-              id: "2",
-              brand: "GRRR FLOAT",
-              name: "The Minimal Lounger",
-              price: "$520",
-              rating: 5,
-              reviewCount: "94",
-              imageSrc: "http://img.b2bpic.net/free-photo/view-from-top-young-caucasian-male-with-attractive-muscular-body-relaxing-shirtless-big-inflatable-mattress-floating-swimming-pool-with-blue-water-having-nap-getting-suntan-hot-day_273609-1780.jpg?_wi=2",
-              imageAlt: "The Minimal Lounger - Premium Pool Float",
+              id: "2",              name: "Solaris Float",              price: "$349",              variant: "Golden  3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cheerful-girl-bright-swimsuit-with-air-mattress-yellow-wall_231208-3969.jpg",              imageAlt: "Solaris designer pool float in golden hue",              isFavorited: false,
             },
             {
-              id: "3",
-              brand: "GRRR FLOAT",
-              name: "The Statement Ring",
-              price: "$380",
-              rating: 5,
-              reviewCount: "156",
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-pink-lifesaver_23-2148164986.jpg?_wi=2",
-              imageAlt: "The Statement Ring - Luxury Pool Float",
+              id: "3",              name: "Drift Float",              price: "$299",              variant: "Pearl  2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-relaxing-calm-woman-yellow-summer-dress-lies-edge-blue-swimming-pool-wearing-trendy-sea-shell-necklace_343596-3586.jpg",              imageAlt: "Drift designer pool float in pearl white",              isFavorited: false,
             },
           ]}
           gridVariant="three-columns-all-equal-width"
-          animationType="blur-reveal"
-          textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={false}
         />
       </div>
 
-      {/* Social Proof */}
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Trusted by Premium Hotels & Beach Clubs"
-          description="From Mediterranean resorts to exclusive beach clubs, premium hospitality venues choose GRRR FLOAT for branded pool experiences."
-          tag="Hospitality Partners"
-          names={[
-            "Côte d'Azur Resort",
-            "Mykonos Beach Club",
-            "Amalfi Luxury Hotels",
-            "Bali Premium Resorts",
-            "Miami Beach Club",
-            "Ibiza Sunset Club",
-            "Capri Hospitality",
-            "Costa Brava Retreats",
+      <div id="collection-lifestyle" data-section="collection-lifestyle">
+        <MetricSplitMediaAbout
+          tag="Craftsmanship"
+          title="Premium materials, artistic vision"
+          description="Each GRRR FLOAT piece is designed with meticulous attention to detail. We source premium materials, employ skilled artisans, and test every float to ensure it meets our exacting standards for both aesthetics and durability."
+          metrics={[
+            { value: "12", title: "Signature Designs" },
+            { value: "3+", title: "Material Grades" },
           ]}
-          textboxLayout="default"
+          imageSrc="http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5890.jpg"
+          imageAlt="Premium designer pool float in use at luxury resort"
           useInvertedBackground={false}
-          speed={40}
-          showCard={true}
+          mediaAnimation="slide-up"
+          metricsAnimation="opacity"
+          tagAnimation="blur-reveal"
         />
       </div>
 
-      {/* Contact Section */}
-      <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get in Touch"
-          title="Ready to Make a Splash?"
-          description="Have questions about our collection? Need wholesale pricing? Want to customize floats for your venue? Reach out to our team."
-          background={{
-            variant: "rotated-rays-animated-grid",
-          }}
-          useInvertedBackground={false}
-          inputPlaceholder="your@email.com"
-          buttonText="Send"
-          termsText="We respect your privacy. Unsubscribe anytime."
+      <div id="collection-cta" data-section="collection-cta">
+        <ContactCTA
+          tag="Ready to Make a Statement"
+          tagIcon={Mail}
+          title="Bring GRRR FLOAT into Your World"
+          description="Whether you want to add to your collection, customize floats for your business, or partner with us, let's talk about your vision."
+          buttons={[
+            { text: "Shop More", href: "/" },
+            { text: "Custom Inquiries", href: "/contact" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
         />
       </div>
 
-      {/* Footer */}
       <div id="footer" data-section="footer">
-        <FooterCard
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
           logoText="GRRR FLOAT"
-          copyrightText="© 2025 GRRR FLOAT. All rights reserved. Minimal design, maximum impact."
-          socialLinks={[
-            {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
-            {
-              icon: Twitter,
-              href: "https://twitter.com",
-              ariaLabel: "Twitter",
-            },
-          ]}
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>

src/app/contact/page.tsx

@@ -1,78 +1,94 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FooterCard from '@/components/sections/footer/FooterCard';
-import Link from "next/link";
-import { Instagram, Twitter } from "lucide-react";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Mail } from "lucide-react";
 
 export default function ContactPage() {
+  const navItems = [
+    { name: "Collection", id: "collection" },
+    { name: "Custom Floats", id: "custom-floats" },
+    { name: "For Retailers", id: "retailers" },
+    { name: "For Hotels", id: "hospitality" },
+    { name: "About", id: "about" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "Summer Collection", href: "/collection" },
+        { label: "Custom Floats", href: "/custom-floats" },
+        { label: "Gift Cards", href: "#" },
+      ],
+    },
+    {
+      title: "Business",      items: [
+        { label: "For Retailers", href: "/retailers" },
+        { label: "For Hotels & Clubs", href: "/hospitality" },
+        { label: "Wholesale Inquiry", href: "/contact" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ];
+
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="icon-arrow"
       defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="grid"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
-      {/* Navbar */}
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="GRRR FLOAT"
-          navItems={[
-            { name: "Collection", id: "collection" },
-            { name: "Customize", id: "customize" },
-            { name: "For Retailers", id: "retailers" },
-            { name: "For Hotels", id: "hospitality" },
-            { name: "About", id: "about" },
-          ]}
+        <NavbarStyleCentered
+          navItems={navItems}
           button={{
-            text: "Contact",
-            href: "/contact",
-          }}
-          animateOnLoad={true}
+            text: "Inquire",            href: "/contact"}}
+          brandName="GRRR FLOAT"
         />
       </div>
 
-      {/* Contact Section */}
       <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get in Touch"
-          title="Let's Create Something Beautiful"
-          description="Whether you're looking to shop, wholesale, or customize branded floats for your hospitality venue—we'd love to hear from you."
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            {
+              text: "Start Conversation",              href: "/contact"},
+            {
+              text: "View Wholesale",              href: "/retailers"},
+          ]}
           background={{
-            variant: "rotated-rays-animated-grid",
-          }}
-          useInvertedBackground={false}
-          inputPlaceholder="your@email.com"
-          buttonText="Send"
-          termsText="We respect your privacy. Unsubscribe anytime."
+            variant: "plain"}}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
         />
       </div>
 
-      {/* Footer */}
       <div id="footer" data-section="footer">
-        <FooterCard
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
           logoText="GRRR FLOAT"
-          copyrightText="© 2025 GRRR FLOAT. All rights reserved. Minimal design, maximum impact."
-          socialLinks={[
-            {
-              icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
-            {
-              icon: Twitter,
-              href: "https://twitter.com",
-              ariaLabel: "Twitter",
-            },
-          ]}
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={footerColumns}
         />
       </div>
     </ThemeProvider>

src/app/custom-floats/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import Link from "next/link";
+import { Mail, Zap } from "lucide-react";
+
+export default function CustomFloatsPage() {
+  const navItems = [
+    { name: "Collection", id: "collection" },
+    { name: "Custom Floats", id: "custom-floats" },
+    { name: "For Retailers", id: "retailers" },
+    { name: "For Hotels", id: "hospitality" },
+    { name: "About", id: "about" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "Summer Collection", href: "/collection" },
+        { label: "Custom Floats", href: "/custom-floats" },
+        { label: "Gift Cards", href: "#" },
+      ],
+    },
+    {
+      title: "Business",      items: [
+        { label: "For Retailers", href: "/retailers" },
+        { label: "For Hotels & Clubs", href: "/hospitality" },
+        { label: "Wholesale Inquiry", href: "/contact" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="GRRR FLOAT"
+          navItems={navItems}
+          button={{
+            text: "Inquire",            href: "/contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="GRRR FLOAT"
+          description="Create custom branded floats that embody your brand identity. Premium materials, professional specifications, and personalized design for hospitality, retail, and lifestyle brands."
+          buttons={[
+            { text: "Request Quote", href: "/contact" },
+            { text: "View Process", href: "#custom-section" },
+          ]}
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5890.jpg?_wi=2"
+          imageAlt="Custom branded pool float with luxury resort logo"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
+        />
+      </div>
+
+      <div id="custom-section" data-section="custom-section">
+        <FeatureCardSix
+          title="Custom Floats for Hospitality"
+          description="Professional-grade branded floats designed for hotels, resorts, and beach clubs seeking premium pool experiences."
+          tag="B2B Solutions"
+          tagIcon={Zap}
+          textboxLayout="default"
+          features={[
+            {
+              id: 1,
+              title: "Logo Personalization",              description: "Embed your brand identity with custom logo printing and color matching on premium thicker floats.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5890.jpg?_wi=3",              imageAlt: "Custom branded pool float with luxury resort logo"
+            },
+            {
+              id: 2,
+              title: "Professional Specifications",              description: "Enhanced durability designed for high-volume hospitality use with reinforced seams and premium material grades.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-closeup-shot-tray-with-grapefruit-cocktails-near-swimming-pool_181624-7967.jpg?_wi=2",              imageAlt: "Premium pool floats in luxury resort setting"
+            },
+          ]}
+          useInvertedBackground={false}
+          tagAnimation="opacity"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            { text: "Start Conversation", href: "/contact" },
+            { text: "View Wholesale", href: "/retailers" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg?_wi=2"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
+          logoText="GRRR FLOAT"
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/hospitality/page.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { Zap, Mail, ShoppingBag } from "lucide-react";
+
+export default function HospitalityPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Collection", id: "collection" },
+            { name: "Custom Floats", id: "custom-floats" },
+            { name: "For Retailers", id: "retailers" },
+            { name: "For Hotels", id: "hospitality" },
+            { name: "About", id: "about" },
+          ]}
+          button={{
+            text: "Inquire",            href: "/contact"}}
+          brandName="GRRR FLOAT"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="GRRR FLOAT"
+          description="Luxury designer inflatable pool floats for the discerning swimmer. Handcrafted with premium materials and bold aesthetic vision."
+          buttons={[
+            {
+              text: "Shop Collection",              href: "/"},
+            {
+              text: "Customize Float",              href: "/"},
+          ]}
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-lifeline_23-2150872162.jpg?_wi=2"
+          imageAlt="Premium designer inflatable pool float in luxury resort setting"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
+        />
+      </div>
+
+      <div id="custom-section" data-section="custom-section">
+        <FeatureCardSix
+          title="Custom Floats for Hospitality"
+          description="Professional-grade branded floats designed for hotels, resorts, and beach clubs seeking premium pool experiences."
+          tag="B2B Solutions"
+          tagIcon={Zap}
+          textboxLayout="default"
+          features={[
+            {
+              id: 1,
+              title: "Logo Personalization",              description:
+                "Embed your brand identity with custom logo printing and color matching on premium thicker floats.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5890.jpg?_wi=4",              imageAlt: "Custom branded pool float with luxury resort logo"
+            },
+            {
+              id: 2,
+              title: "Professional Specifications",              description:
+                "Enhanced durability designed for high-volume hospitality use with reinforced seams and premium material grades.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/high-angle-closeup-shot-tray-with-grapefruit-cocktails-near-swimming-pool_181624-7967.jpg?_wi=3",              imageAlt: "Premium pool floats in luxury resort setting"
+            },
+          ]}
+          useInvertedBackground={false}
+          tagAnimation="opacity"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="lifestyle" data-section="lifestyle">
+        <MetricSplitMediaAbout
+          tag="Pool Lifestyle"
+          title="Mediterranean summer meets modern design"
+          description="GRRR FLOAT floats are more than pool accessories—they're lifestyle statements. Captured in luxury resort settings, beach clubs, and private pools across Europe, our collections embody the aspirational summer aesthetic."
+          metrics={[
+            {
+              value: "50+",              title: "Resort Partners"},
+            {
+              value: "15",              title: "Countries"},
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-women-pool_23-2149144901.jpg?_wi=2"
+          imageAlt="Luxury Mediterranean beach resort with designer pool floats"
+          useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="opacity"
+          tagAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            {
+              text: "Start Conversation",              href: "/contact"},
+            {
+              text: "View Wholesale",              href: "/retailers"},
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg?_wi=3"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
+          logoText="GRRR FLOAT"
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={[
+            {
+              title: "Shop",              items: [
+                {
+                  label: "Summer Collection",                  href: "/collection"},
+                {
+                  label: "Custom Floats",                  href: "/custom-floats"},
+                {
+                  label: "Gift Cards",                  href: "#"},
+              ],
+            },
+            {
+              title: "Business",              items: [
+                {
+                  label: "For Retailers",                  href: "/retailers"},
+                {
+                  label: "For Hotels & Clubs",                  href: "/hospitality"},
+                {
+                  label: "Wholesale Inquiry",                  href: "/contact"},
+              ],
+            },
+            {
+              title: "Company",              items: [
+                {
+                  label: "About",                  href: "/about"},
+                {
+                  label: "Contact",                  href: "/contact"},
+                {
+                  label: "Privacy Policy",                  href: "#"},
+                {
+                  label: "Terms of Service",                  href: "#"},
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,215 +2,220 @@
 
 import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroOverlay from "@/components/sections/hero/HeroOverlay";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterCard from "@/components/sections/footer/FooterCard";
-import { ArrowRight, Instagram, Twitter } from "lucide-react";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
+import ProductCardFour from "@/components/sections/product/ProductCardFour";
+import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
+import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
+import ContactCTA from "@/components/sections/contact/ContactCTA";
+import FooterMedia from "@/components/sections/footer/FooterMedia";
+import { ShoppingBag, Sparkles, Zap, Mail } from "lucide-react";
 
 export default function HomePage() {
   const navItems = [
-    { name: "Collection", id: "summer-collection" },
-    { name: "Customize", id: "custom-floats" },
-    { name: "For Retailers", id: "retail-section" },
-    { name: "For Hotels", id: "social-proof" },
-    { name: "About", id: "about-brand" },
+    { name: "Collection", id: "collection" },
+    { name: "Custom Floats", id: "custom-floats" },
+    { name: "For Retailers", id: "retailers" },
+    { name: "For Hotels", id: "hospitality" },
+    { name: "About", id: "about" },
+  ];
+
+  const navButton = {
+    text: "Inquire",    href: "/contact"};
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "Summer Collection", href: "/collection" },
+        { label: "Custom Floats", href: "/custom-floats" },
+        { label: "Gift Cards", href: "#" },
+      ],
+    },
+    {
+      title: "Business",      items: [
+        { label: "For Retailers", href: "/retailers" },
+        { label: "For Hotels & Clubs", href: "/hospitality" },
+        { label: "Wholesale Inquiry", href: "/contact" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
   ];
 
   return (
     <ThemeProvider
-      defaultButtonVariant="shift-hover"
+      defaultButtonVariant="icon-arrow"
       defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="grid"
-      cardStyle="gradient-mesh"
-      primaryButtonStyle="shadow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="GRRR FLOAT"
+        <NavbarStyleCentered
           navItems={navItems}
-          button={{
-            text: "Contact",            href: "/contact"}}
-          animateOnLoad={true}
+          button={navButton}
+          brandName="GRRR FLOAT"
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroOverlay
-          title="Summer Floats Reimagined"
-          description="Designer inflatable pool floats that blur the line between luxury fashion and summer lifestyle. Minimal. Premium. Unforgettable."
-          tag="New Collection"
-          imageSrc="http://img.b2bpic.net/free-photo/beautiful-young-woman-with-swimming-cap_23-2148977946.jpg"
-          imageAlt="GRRR FLOAT Premium Designer Pool Float"
-          showBlur={true}
-          showDimOverlay={false}
+        <HeroLogoBillboard
+          logoText="GRRR FLOAT"
+          description="Luxury designer inflatable pool floats for the discerning swimmer. Handcrafted with premium materials and bold aesthetic vision."
           buttons={[
-            {
-              text: "Shop Collection",              href: "#summer-collection"},
-            {
-              text: "Customize Float",              href: "#custom-floats"},
+            { text: "Shop Collection", href: "/collection" },
+            { text: "Customize Float", href: "/custom-floats" },
           ]}
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-lifeline_23-2150872162.jpg?_wi=1"
+          imageAlt="Premium designer inflatable pool float in luxury resort setting"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
         />
       </div>
 
-      <div id="summer-collection" data-section="summer-collection">
-        <ProductCardTwo
-          title="Summer Collection 2025"
-          description="Trusted by 50+ luxury resorts. Curated designer pool floats crafted for the discerning beach enthusiast. Each piece combines minimalist aesthetics with premium comfort."
-          tag="B2C Retail"
+      <div id="collection" data-section="collection">
+        <ProductCardFour
+          title="Summer Collection"
+          description="Our handpicked selection of designer pool floats for the 2025 season. Each piece combines artistic vision with functional luxury."
+          tag="Retail"
+          tagIcon={ShoppingBag}
+          textboxLayout="default"
           products={[
             {
-              id: "1",              brand: "GRRR FLOAT",              name: "The Aurora Float",              price: "$450",              rating: 5,
-              reviewCount: "127",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-with-swimming-cap_23-2148977951.jpg?_wi=1",              imageAlt: "The Aurora Float - Designer Pool Float"},
+              id: "1",              name: "Waves Pool Float",              price: "$289",              variant: "Seafoam  2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-drinking-cocktail-by-pool_1303-27958.jpg",              imageAlt: "Waves designer pool float in seafoam green",              isFavorited: false,
+            },
             {
-              id: "2",              brand: "GRRR FLOAT",              name: "The Minimal Lounger",              price: "$520",              rating: 5,
-              reviewCount: "94",              imageSrc: "http://img.b2bpic.net/free-photo/view-from-top-young-caucasian-male-with-attractive-muscular-body-relaxing-shirtless-big-inflatable-mattress-floating-swimming-pool-with-blue-water-having-nap-getting-suntan-hot-day_273609-1780.jpg?_wi=1",              imageAlt: "The Minimal Lounger - Premium Pool Float"},
+              id: "2",              name: "Solaris Float",              price: "$349",              variant: "Golden  3 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-cheerful-girl-bright-swimsuit-with-air-mattress-yellow-wall_231208-3969.jpg",              imageAlt: "Solaris designer pool float in golden hue",              isFavorited: false,
+            },
             {
-              id: "3",              brand: "GRRR FLOAT",              name: "The Statement Ring",              price: "$380",              rating: 5,
-              reviewCount: "156",              imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-with-pink-lifesaver_23-2148164986.jpg?_wi=1",              imageAlt: "The Statement Ring - Luxury Pool Float"},
+              id: "3",              name: "Drift Float",              price: "$299",              variant: "Pearl  2 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-relaxing-calm-woman-yellow-summer-dress-lies-edge-blue-swimming-pool-wearing-trendy-sea-shell-necklace_343596-3586.jpg",              imageAlt: "Drift designer pool float in pearl white",              isFavorited: false,
+            },
           ]}
           gridVariant="three-columns-all-equal-width"
-          animationType="blur-reveal"
-          textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={false}
-          buttons={[
-            {
-              text: "View All",              href: "#summer-collection"},
-          ]}
         />
       </div>
 
-      <div id="custom-floats" data-section="custom-floats">
-        <FeatureCardTwentySix
-          title="Custom Floats for Beach Clubs"
-          description="White-label, professionally branded inflatable floats with your logo. Premium quality, full customization, hospitality-grade durability."
-          tag="B2B Hospitality"
+      <div id="about" data-section="about">
+        <MetricSplitMediaAbout
+          tag="About the Brand"
+          tagIcon={Sparkles}
+          title="Designed for the luxury lifestyle"
+          description="GRRR FLOAT transforms pool culture through thoughtfully designed, premium inflatable products. Inspired by Mediterranean beach clubs, Japanese minimalism, and European luxury brands, we create pieces that are as beautiful displayed as they are functional in the water."
+          metrics={[
+            { value: "100%", title: "Premium Materials" },
+            { value: "10+", title: "Signature Designs" },
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/front-view-woman-posing-with-beautiful-bouquet-spring-flowers_23-2148826787.jpg"
+          imageAlt="GRRR FLOAT design studio workspace"
+          useInvertedBackground={true}
+          mediaAnimation="slide-up"
+          metricsAnimation="opacity"
+          tagAnimation="blur-reveal"
+        />
+      </div>
+
+      <div id="custom-section" data-section="custom-section">
+        <FeatureCardSix
+          title="Custom Floats for Hospitality"
+          description="Professional-grade branded floats designed for hotels, resorts, and beach clubs seeking premium pool experiences."
+          tag="B2B Solutions"
+          tagIcon={Zap}
+          textboxLayout="default"
           features={[
             {
-              title: "Upload Your Logo",              description: "Personalize floats with your brand logo and custom colors. Visualize in real-time.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5892.jpg?_wi=1",              imageAlt: "Custom Float Logo Visualization",              buttonIcon: ArrowRight,
-              buttonHref: "#custom-floats"},
+              id: 1,
+              title: "Logo Personalization",              description: "Embed your brand identity with custom logo printing and color matching on premium thicker floats.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5890.jpg?_wi=1",              imageAlt: "Custom branded pool float with luxury resort logo"
+            },
             {
-              title: "Professional Branding",              description: "High-quality logo printing. Waterproof, UV-resistant, hotel-grade durability.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5892.jpg?_wi=2",              imageAlt: "Professional Branded Pool Float",              buttonIcon: ArrowRight,
-              buttonHref: "/for-hotels-beach-clubs"},
-            {
-              title: "Hospitality-Grade Quality",              description: "Thicker materials, reinforced seams. Built for professional pool environments.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5892.jpg?_wi=3",              imageAlt: "Hospitality Grade Pool Float Equipment",              buttonIcon: ArrowRight,
-              buttonHref: "/for-hotels-beach-clubs"},
-            {
-              title: "Bulk Ordering",              description: "Wholesale pricing for resorts, hotels, and pool clubs. Dedicated account support.",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-asian-woman-having-fun-pool-tropical-villa-summer-vacation-thailand-playing-with-big-orca-wearinng-black-swimsuit-sunglasses-sexy-body-fashion-accessories_285396-5892.jpg?_wi=4",              imageAlt: "Bulk Float Order Management",              buttonIcon: ArrowRight,
-              buttonHref: "/for-hotels-beach-clubs"},
-          ]}
-          textboxLayout="default"
-          useInvertedBackground={true}
-          buttons={[
-            {
-              text: "Start Customizing",              href: "#custom-floats"},
+              id: 2,
+              title: "Professional Specifications",              description: "Enhanced durability designed for high-volume hospitality use with reinforced seams and premium material grades.",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-closeup-shot-tray-with-grapefruit-cocktails-near-swimming-pool_181624-7967.jpg?_wi=1",              imageAlt: "Premium pool floats in luxury resort setting"
+            },
           ]}
+          useInvertedBackground={false}
+          tagAnimation="opacity"
+          buttonAnimation="slide-up"
         />
       </div>
 
       <div id="retail-section" data-section="retail-section">
-        <TextSplitAbout
-          title="For Retailers"
-          description={[
-            "Stock GRRR FLOAT in your concept store, beach boutique, or lifestyle shop. Our packaged retail collection features premium presentation and strong margins.",            "Wholesale pricing, point-of-sale materials, and marketing support included. Minimal order quantities. Direct wholesale inquiries welcome."]}
-          useInvertedBackground={false}
-          showBorder={true}
-          buttons={[
-            {
-              text: "Wholesale Inquiry",              href: "/contact"},
-          ]}
-        />
-      </div>
-
-      <div id="social-proof" data-section="social-proof">
-        <SocialProofOne
-          title="Trusted by Premium Hotels & Beach Clubs"
-          description="From Mediterranean resorts to exclusive beach clubs, premium hospitality venues choose GRRR FLOAT for branded pool experiences."
-          tag="Hospitality Partners"
-          names={[
-            "Côte d'Azur Resort",            "Mykonos Beach Club",            "Amalfi Luxury Hotels",            "Bali Premium Resorts",            "Miami Beach Club",            "Ibiza Sunset Club",            "Capri Hospitality",            "Costa Brava Retreats"]}
+        <ProductCardFour
+          title="For Retailers & Boutiques"
+          description="Premium packaging and wholesale pricing for concept stores, beach shops, and lifestyle boutiques. Curate your inventory with designer pool floats."
+          tag="Wholesale"
           textboxLayout="default"
-          useInvertedBackground={false}
-          speed={40}
-          showCard={true}
-        />
-      </div>
-
-      <div id="about-brand" data-section="about-brand">
-        <TextSplitAbout
-          title="The GRRR Story"
-          description={[
-            "GRRR FLOAT began with a simple obsession: making the most beautiful pool floats in the world. We were inspired by luxury fashion houses like Jacquemus and the minimalist design philosophy of Apple.",            "Each float is designed to be an object of desire. We obsess over materials, proportions, and details. No compromise on quality. No excess in design. Just pure, editorial excellence.",            "From private collections to premium hospitality, GRRR FLOAT floats live the summer lifestyle."]}
+          products={[
+            {
+              id: "1",              name: "Retail Display Set",              price: "POA",              variant: "Mixed Assortment",              imageSrc: "http://img.b2bpic.net/free-vector/colorful-summer-sale-label-collection_52683-12393.jpg",              imageAlt: "Luxury retail packaging for designer pool floats",              isFavorited: false,
+            },
+            {
+              id: "2",              name: "Boutique Bundle",              price: "POA",              variant: "Curated Selection",              imageSrc: "http://img.b2bpic.net/free-photo/students-posing-library_23-2147678877.jpg",              imageAlt: "Premium pool float retail merchandising display",              isFavorited: false,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="scale-rotate"
           useInvertedBackground={true}
-          showBorder={false}
-          buttons={[
-            {
-              text: "Our Floats",              href: "#summer-collection"},
-          ]}
         />
       </div>
 
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardTwelve
-          cardTitle="Over 2,000 luxury travelers and hospitality professionals love GRRR FLOAT"
-          cardTag="See what they say"
-          testimonials={[
-            {
-              id: "1",              name: "Sofia Rossi",              imageSrc: "/placeholders/placeholder1.webp?_wi=1",              imageAlt: "Sofia Rossi"},
-            {
-              id: "2",              name: "Marco Santini",              imageSrc: "/placeholders/placeholder1.webp?_wi=2",              imageAlt: "Marco Santini"},
-            {
-              id: "3",              name: "Isabelle Dubois",              imageSrc: "/placeholders/placeholder1.webp?_wi=3",              imageAlt: "Isabelle Dubois"},
-            {
-              id: "4",              name: "Antonio Moretti",              imageSrc: "/placeholders/placeholder1.webp?_wi=4",              imageAlt: "Antonio Moretti"},
-            {
-              id: "5",              name: "Elena Costa",              imageSrc: "/placeholders/placeholder1.webp?_wi=5",              imageAlt: "Elena Costa"},
-            {
-              id: "6",              name: "Lucas Perez",              imageSrc: "/placeholders/placeholder1.webp?_wi=6",              imageAlt: "Lucas Perez"},
+      <div id="lifestyle" data-section="lifestyle">
+        <MetricSplitMediaAbout
+          tag="Pool Lifestyle"
+          title="Mediterranean summer meets modern design"
+          description="GRRR FLOAT floats are more than pool accessories—they're lifestyle statements. Captured in luxury resort settings, beach clubs, and private pools across Europe, our collections embody the aspirational summer aesthetic."
+          metrics={[
+            { value: "50+", title: "Resort Partners" },
+            { value: "15", title: "Countries" },
           ]}
-          cardAnimation="blur-reveal"
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-women-pool_23-2149144901.jpg?_wi=1"
+          imageAlt="Luxury Mediterranean beach resort with designer pool floats"
           useInvertedBackground={false}
+          mediaAnimation="slide-up"
+          metricsAnimation="opacity"
+          tagAnimation="blur-reveal"
         />
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCenter
-          tag="Get in Touch"
-          title="Let's Create Something Beautiful"
-          description="Whether you're looking to shop, wholesale, or customize branded floats for your hospitality venue—we'd love to hear from you."
-          background={{
-            variant: "rotated-rays-animated-grid"}}
-          useInvertedBackground={false}
-          inputPlaceholder="your@email.com"
-          buttonText="Send"
-          termsText="We respect your privacy. Unsubscribe anytime."
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            { text: "Start Conversation", href: "/contact" },
+            { text: "View Wholesale", href: "/retailers" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
         />
       </div>
 
-      <footer id="footer" data-section="footer">
-        <FooterCard
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg?_wi=1"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
           logoText="GRRR FLOAT"
-          copyrightText="© 2025 GRRR FLOAT. All rights reserved. Minimal design, maximum impact."
-          socialLinks={[
-            {
-              icon: Instagram,
-              href: "https://instagram.com",              ariaLabel: "Instagram"},
-            {
-              icon: Twitter,
-              href: "https://twitter.com",              ariaLabel: "Twitter"},
-          ]}
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={footerColumns}
         />
-      </footer>
+      </div>
     </ThemeProvider>
   );
 }

src/app/retailers/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import Link from "next/link";
+import { Mail, ShoppingBag } from "lucide-react";
+
+export default function RetailersPage() {
+  const navItems = [
+    { name: "Collection", id: "collection" },
+    { name: "Custom Floats", id: "custom-floats" },
+    { name: "For Retailers", id: "retailers" },
+    { name: "For Hotels", id: "hospitality" },
+    { name: "About", id: "about" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Shop",      items: [
+        { label: "Summer Collection", href: "/collection" },
+        { label: "Custom Floats", href: "/custom-floats" },
+        { label: "Gift Cards", href: "#" },
+      ],
+    },
+    {
+      title: "Business",      items: [
+        { label: "For Retailers", href: "/retailers" },
+        { label: "For Hotels & Clubs", href: "/hospitality" },
+        { label: "Wholesale Inquiry", href: "/contact" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "/contact" },
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="largeSmallSizeLargeTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="primary-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="GRRR FLOAT"
+          navItems={navItems}
+          button={{
+            text: "Inquire",            href: "/contact"}}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboard
+          logoText="GRRR FLOAT"
+          description="Premium wholesale solutions for concept stores, beach shops, and lifestyle boutiques. Curate your inventory with designer pool floats that elevate your retail offering."
+          buttons={[
+            { text: "Wholesale Pricing", href: "#retail-section" },
+            { text: "Request Catalog", href: "/contact" },
+          ]}
+          background={{ variant: "plain" }}
+          imageSrc="http://img.b2bpic.net/free-vector/colorful-summer-sale-label-collection_52683-12393.jpg"
+          imageAlt="Luxury retail packaging for designer pool floats"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
+        />
+      </div>
+
+      <div id="retail-section" data-section="retail-section">
+        <ProductCardFour
+          title="For Retailers & Boutiques"
+          description="Premium packaging and wholesale pricing for concept stores, beach shops, and lifestyle boutiques. Curate your inventory with designer pool floats."
+          tag="Wholesale"
+          tagIcon={ShoppingBag}
+          textboxLayout="default"
+          products={[
+            {
+              id: "1",              name: "Retail Display Set",              price: "POA",              variant: "Mixed Assortment",              imageSrc: "http://img.b2bpic.net/free-vector/colorful-summer-sale-label-collection_52683-12393.jpg",              imageAlt: "Luxury retail packaging for designer pool floats",              isFavorited: false,
+            },
+            {
+              id: "2",              name: "Boutique Bundle",              price: "POA",              variant: "Curated Selection",              imageSrc: "http://img.b2bpic.net/free-photo/students-posing-library_23-2147678877.jpg",              imageAlt: "Premium pool float retail merchandising display",              isFavorited: false,
+            },
+          ]}
+          gridVariant="two-columns-alternating-heights"
+          animationType="scale-rotate"
+          useInvertedBackground={true}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCTA
+          tag="Let's Connect"
+          tagIcon={Mail}
+          title="Ready to elevate your pool experience?"
+          description="Whether you're a retailer, hospitality partner, or consumer, we'd love to discuss how GRRR FLOAT can enhance your offering."
+          buttons={[
+            { text: "Start Conversation", href: "/contact" },
+            { text: "View Custom Floats", href: "/custom-floats" },
+          ]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={true}
+          tagAnimation="blur-reveal"
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterMedia
+          imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-woman-sitting-bar-stand-daytime_181624-19076.jpg"
+          imageAlt="Luxury beach resort pool with GRRR FLOAT design aesthetic"
+          logoText="GRRR FLOAT"
+          copyrightText="© 2025 GRRR FLOAT. All rights reserved."
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -4,32 +4,33 @@ interface SvgTextLogoProps {
   text: string;
   className?: string;
   fontSize?: number;
-  fontWeight?: number | string;
-  letterSpacing?: number;
+  fontWeight?: string | number;
+  fill?: string;
+  dominantBaseline?: 'auto' | 'inherit' | 'alphabetic' | 'hanging' | 'ideographic' | 'mathematical' | 'text-before-edge' | 'middle' | 'central' | 'text-after-edge' | 'use-script' | 'no-change' | 'reset-size';
 }
 
-const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
+export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
   text,
   className = '',
   fontSize = 24,
-  fontWeight = 700,
-  letterSpacing = 0,
+  fontWeight = 'bold',
+  fill = 'currentColor',
+  dominantBaseline = 'middle',
 }) => {
   return (
     <svg
-      viewBox={`0 0 ${text.length * fontSize} ${fontSize * 1.5}`}
+      viewBox="0 0 200 60"
       className={className}
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
+      aria-label={text}
     >
       <text
-        x="0"
-        y={fontSize}
+        x="50%"
+        y="50%"
+        textAnchor="middle"
+        dominantBaseline={dominantBaseline}
         fontSize={fontSize}
         fontWeight={fontWeight}
-        letterSpacing={letterSpacing}
-        fill="currentColor"
-        dominantBaseline="hanging"
+        fill={fill}
       >
         {text}
       </text>
@@ -37,4 +38,4 @@ const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
   );
 };
 
-export default SvgTextLogo;
+export default SvgTextLogo;