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"
@@ -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>
   );
-}
+}