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

Merge version_2 into main

src/app/page.tsx

@@ -9,9 +9,43 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
-import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3 } from 'lucide-react';
+import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3, Plus } from 'lucide-react';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [products, setProducts] = useState([
+    {
+      id: "1",      name: "Elegance Dress",      price: "$89.99",      imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg",      imageAlt: "Stylish women's dress"
+    },
+    {
+      id: "2",      name: "Classic Oxford Shirt",      price: "$64.99",      imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg",      imageAlt: "Men's button-up shirt"
+    },
+    {
+      id: "3",      name: "Premium Denim Jeans",      price: "$79.99",      imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg",      imageAlt: "Classic denim jeans"
+    }
+  ]);
+
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newProduct, setNewProduct] = useState({
+    name: '',
+    price: '',
+    imageSrc: ''
+  });
+
+  const handleAddProduct = () => {
+    if (newProduct.name && newProduct.price && newProduct.imageSrc) {
+      setProducts([...products, {
+        id: String(products.length + 1),
+        name: newProduct.name,
+        price: newProduct.price,
+        imageSrc: newProduct.imageSrc,
+        imageAlt: newProduct.name
+      }]);
+      setNewProduct({ name: '', price: '', imageSrc: '' });
+      setShowAddForm(false);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="expand-hover"
@@ -19,7 +53,7 @@ export default function LandingPage() {
       borderRadius="rounded"
       contentWidth="small"
       sizing="largeSmallSizeLargeTitles"
-      background="noise"
+      background="circleGradient"
       cardStyle="gradient-mesh"
       primaryButtonStyle="primary-glow"
       secondaryButtonStyle="radial-glow"
@@ -45,7 +79,7 @@ export default function LandingPage() {
         <HeroSplitKpi
           title="Discover Premium Fashion for Every Occasion"
           description="Elevate your wardrobe with our curated collection of high-quality clothing. From casual essentials to elegant statements, find pieces that express your unique style and confidence."
-          background={{ variant: "noise" }}
+          background={{ variant: "sparkles-gradient" }}
           kpis={[
             { value: "10K+", label: "Happy Customers" },
             { value: "500+", label: "Premium Items" },
@@ -73,35 +107,89 @@ export default function LandingPage() {
       </div>
 
       <div id="products" data-section="products">
-        <ProductCardOne
+        <div className="w-full">
-          title="Featured Products"
+          <ProductCardOne
-          description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
+            title="Featured Products"
-          tag="Best Sellers"
+            description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
-          tagIcon={TrendingUp}
+            tag="Best Sellers"
-          tagAnimation="slide-up"
+            tagIcon={TrendingUp}
-          products={[
+            tagAnimation="slide-up"
-            {
+            products={products}
-              id: "1",              name: "Elegance Dress",              price: "$89.99",              imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg",              imageAlt: "Stylish women's dress"
+            gridVariant="uniform-all-items-equal"
-            },
+            animationType="slide-up"
-            {
+            textboxLayout="default"
-              id: "2",              name: "Classic Oxford Shirt",              price: "$64.99",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg",              imageAlt: "Men's button-up shirt"
+            useInvertedBackground={false}
-            },
+            buttons={[
-            {
+              { text: "View All Products", href: "#products" }
-              id: "3",              name: "Premium Denim Jeans",              price: "$79.99",              imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg",              imageAlt: "Classic denim jeans"
+            ]}
-            }
+            buttonAnimation="slide-up"
-          ]}
+            containerClassName="w-full"
-          gridVariant="uniform-all-items-equal"
+            textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
-          animationType="slide-up"
+            textBoxDescriptionClassName="text-lg text-foreground/70"
-          textboxLayout="default"
+          />
-          useInvertedBackground={false}
+
-          buttons={[
+          <div className="w-full flex justify-center py-8">
-            { text: "View All Products", href: "#products" }
+            <button
-          ]}
+              onClick={() => setShowAddForm(!showAddForm)}
-          buttonAnimation="slide-up"
+              className="flex items-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
-          containerClassName="w-full"
+            >
-          textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
+              <Plus size={20} />
-          textBoxDescriptionClassName="text-lg text-foreground/70"
+              Add New Clothing
-        />
+            </button>
+          </div>
+
+          {showAddForm && (
+            <div className="w-full max-w-md mx-auto p-6 bg-card rounded-lg shadow-lg mb-8">
+              <h3 className="text-xl font-semibold mb-4 text-foreground">Add New Clothing Item</h3>
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">Product Name</label>
+                  <input
+                    type="text"
+                    value={newProduct.name}
+                    onChange={(e) => setNewProduct({...newProduct, name: e.target.value})}
+                    placeholder="Enter product name"
+                    className="w-full px-3 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-foreground/50"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">Price</label>
+                  <input
+                    type="text"
+                    value={newProduct.price}
+                    onChange={(e) => setNewProduct({...newProduct, price: e.target.value})}
+                    placeholder="Enter price (e.g., $99.99)"
+                    className="w-full px-3 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-foreground/50"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-foreground mb-1">Image URL</label>
+                  <input
+                    type="text"
+                    value={newProduct.imageSrc}
+                    onChange={(e) => setNewProduct({...newProduct, imageSrc: e.target.value})}
+                    placeholder="Enter image URL"
+                    className="w-full px-3 py-2 border border-accent rounded-lg bg-background text-foreground placeholder-foreground/50"
+                  />
+                </div>
+                <div className="flex gap-2 pt-4">
+                  <button
+                    onClick={handleAddProduct}
+                    className="flex-1 px-4 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity font-medium"
+                  >
+                    Add Item
+                  </button>
+                  <button
+                    onClick={() => setShowAddForm(false)}
+                    className="flex-1 px-4 py-2 bg-secondary-cta text-secondary-cta-text border border-accent rounded-lg hover:opacity-90 transition-opacity font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
 
       <div id="about" data-section="about">
@@ -206,7 +294,7 @@ export default function LandingPage() {
           tagAnimation="slide-up"
           title="Stay Updated with Fashion Trends"
           description="Subscribe to our newsletter and receive exclusive offers, styling tips, and first access to new collections delivered straight to your inbox."
-          background={{ variant: "noise" }}
+          background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543701.jpg"
           imageAlt="Fashion creative workspace"
@@ -257,4 +345,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

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