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

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"
@@ -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: "glowing-orb" }}
+          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
-          title="Featured Products"
-          description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
-          tag="Best Sellers"
-          tagIcon={TrendingUp}
-          tagAnimation="slide-up"
-          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"
-            },
-            {
-              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"
-            }
-          ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[
-            { text: "View All Products", href: "#products" }
-          ]}
-          buttonAnimation="slide-up"
-          containerClassName="w-full"
-          textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
-          textBoxDescriptionClassName="text-lg text-foreground/70"
-        />
+        <div className="w-full">
+          <ProductCardOne
+            title="Featured Products"
+            description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
+            tag="Best Sellers"
+            tagIcon={TrendingUp}
+            tagAnimation="slide-up"
+            products={products}
+            gridVariant="uniform-all-items-equal"
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            buttons={[
+              { text: "View All Products", href: "#products" }
+            ]}
+            buttonAnimation="slide-up"
+            containerClassName="w-full"
+            textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
+            textBoxDescriptionClassName="text-lg text-foreground/70"
+          />
+
+          <div className="w-full flex justify-center py-8">
+            <button
+              onClick={() => setShowAddForm(!showAddForm)}
+              className="flex items-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
+            >
+              <Plus size={20} />
+              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">
@@ -257,4 +345,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,40 +1,32 @@
-import React from 'react';
+import { FC, SVGProps } from "react";
 
-interface SvgTextLogoProps {
-  text?: string;
+interface SvgTextLogoProps extends SVGProps<SVGSVGElement> {
+  text: string;
   className?: string;
-  fontSize?: number;
-  fontFamily?: string;
-  fill?: string;
-  stroke?: string;
-  strokeWidth?: number;
 }
 
-const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
-  text = 'Logo',
-  className = '',
-  fontSize = 32,
-  fontFamily = 'Arial, sans-serif',
-  fill = '#000000',
-  stroke = 'none',
-  strokeWidth = 0,
-}) => {
+const SvgTextLogo: FC<SvgTextLogoProps> = ({ text, className = "", ...props }) => {
   return (
     <svg
-      viewBox={`0 0 ${text.length * fontSize * 0.6} ${fontSize * 1.5}`}
-      className={className}
-      preserveAspectRatio="xMidYMid meet"
+      viewBox={`0 0 ${text.length * 60} 100`}
+      className={`w-full h-auto ${className}`}
+      {...props}
     >
+      <defs>
+        <style>{`
+          .svg-text {
+            font-size: 72px;
+            font-weight: bold;
+            fill: currentColor;
+          }
+        `}</style>
+      </defs>
       <text
         x="50%"
         y="50%"
-        fontSize={fontSize}
-        fontFamily={fontFamily}
-        fill={fill}
-        stroke={stroke}
-        strokeWidth={strokeWidth}
         textAnchor="middle"
-        dominantBaseline="central"
+        dominantBaseline="middle"
+        className="svg-text"
       >
         {text}
       </text>
@@ -42,4 +34,4 @@ const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
   );
 };
 
-export default SvgTextLogo;
+export default SvgTextLogo;