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

src/app/page.tsx

@@ -9,43 +9,9 @@ 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, Plus } from 'lucide-react';
-import { useState } from 'react';
+import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3 } from 'lucide-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"
@@ -79,7 +45,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: "sparkles-gradient" }}
+          background={{ variant: "glowing-orb" }}
           kpis={[
             { value: "10K+", label: "Happy Customers" },
             { value: "500+", label: "Premium Items" },
@@ -107,89 +73,35 @@ export default function LandingPage() {
       </div>
 
       <div id="products" data-section="products">
-        <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>
+        <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>
 
       <div id="about" data-section="about">
@@ -345,4 +257,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

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