Update src/components/shared/SvgTextLogo/SvgTextLogo.tsx

Merge version_1 into main

src/app/page.tsx

@@ -40,9 +40,7 @@ export default function HomePage() {
           brandName="GRRR FLOAT"
           navItems={navItems}
           button={{
-            text: "Contact",
-            href: "/contact",
-          }}
+            text: "Contact",            href: "/contact"}}
           animateOnLoad={true}
         />
       </div>
@@ -58,13 +56,9 @@ export default function HomePage() {
           showDimOverlay={false}
           buttons={[
             {
-              text: "Shop Collection",
-              href: "#summer-collection",
-            },
+              text: "Shop Collection",              href: "#summer-collection"},
             {
-              text: "Customize Float",
-              href: "#custom-floats",
-            },
+              text: "Customize Float",              href: "#custom-floats"},
           ]}
         />
       </div>
@@ -72,39 +66,18 @@ export default function HomePage() {
       <div id="summer-collection" data-section="summer-collection">
         <ProductCardTwo
           title="Summer Collection 2025"
-          description="Curated designer pool floats crafted for the discerning beach enthusiast. Each piece combines minimalist aesthetics with premium comfort."
+          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"
           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",              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: "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",              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: "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",              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"},
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="blur-reveal"
@@ -112,9 +85,7 @@ export default function HomePage() {
           useInvertedBackground={false}
           buttons={[
             {
-              text: "View All",
-              href: "#summer-collection",
-            },
+              text: "View All",              href: "#summer-collection"},
           ]}
         />
       </div>
@@ -126,45 +97,23 @@ export default function HomePage() {
           tag="B2B Hospitality"
           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",
-            },
+              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"},
             {
-              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: "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: "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",
-            },
+              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",
-            },
+              text: "Start Customizing",              href: "#custom-floats"},
           ]}
         />
       </div>
@@ -173,16 +122,12 @@ export default function HomePage() {
         <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.",
-          ]}
+            "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",
-            },
+              text: "Wholesale Inquiry",              href: "/contact"},
           ]}
         />
       </div>
@@ -193,15 +138,7 @@ export default function HomePage() {
           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",
-          ]}
+            "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"]}
           textboxLayout="default"
           useInvertedBackground={false}
           speed={40}
@@ -213,17 +150,12 @@ export default function HomePage() {
         <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.",
-          ]}
+            "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={true}
           showBorder={false}
           buttons={[
             {
-              text: "Our Floats",
-              href: "#summer-collection",
-            },
+              text: "Our Floats",              href: "#summer-collection"},
           ]}
         />
       </div>
@@ -234,41 +166,17 @@ export default function HomePage() {
           cardTag="See what they say"
           testimonials={[
             {
-              id: "1",
-              name: "Sofia Rossi",
-              imageSrc: "/placeholders/placeholder1.webp?_wi=1",
-              imageAlt: "Sofia Rossi",
-            },
+              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: "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: "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: "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: "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",
-            },
+              id: "6",              name: "Lucas Perez",              imageSrc: "/placeholders/placeholder1.webp?_wi=6",              imageAlt: "Lucas Perez"},
           ]}
           cardAnimation="blur-reveal"
           useInvertedBackground={false}
@@ -281,8 +189,7 @@ export default function HomePage() {
           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",
-          }}
+            variant: "rotated-rays-animated-grid"}}
           useInvertedBackground={false}
           inputPlaceholder="your@email.com"
           buttonText="Send"
@@ -297,14 +204,10 @@ export default function HomePage() {
           socialLinks={[
             {
               icon: Instagram,
-              href: "https://instagram.com",
-              ariaLabel: "Instagram",
-            },
+              href: "https://instagram.com",              ariaLabel: "Instagram"},
             {
               icon: Twitter,
-              href: "https://twitter.com",
-              ariaLabel: "Twitter",
-            },
+              href: "https://twitter.com",              ariaLabel: "Twitter"},
           ]}
         />
       </footer>

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,40 @@
-"use client";
-
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
+import React from 'react';
 
 interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+  text: string;
   className?: string;
+  fontSize?: number;
+  fontWeight?: number | string;
+  letterSpacing?: number;
 }
 
-const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
-  logoText,
-  adjustHeightFactor,
-  verticalAlign = "top",
-  className = "",
-}) {
-  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
-
+const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
+  text,
+  className = '',
+  fontSize = 24,
+  fontWeight = 700,
+  letterSpacing = 0,
+}) => {
   return (
     <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label={`${logoText} logo`}
+      viewBox={`0 0 ${text.length * fontSize} ${fontSize * 1.5}`}
+      className={className}
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <text
-        ref={textRef}
         x="0"
-        y={verticalAlign === "center" ? "50%" : "0"}
-        className="font-bold fill-current"
-        style={{
-          fontSize: "20px",
-          letterSpacing: "-0.02em",
-          dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
-        }}
+        y={fontSize}
+        fontSize={fontSize}
+        fontWeight={fontWeight}
+        letterSpacing={letterSpacing}
+        fill="currentColor"
+        dominantBaseline="hanging"
       >
-        {logoText}
+        {text}
       </text>
     </svg>
   );
-});
-
-SvgTextLogo.displayName = "SvgTextLogo";
+};
 
 export default SvgTextLogo;