db hanta ktr mnhadchi chne bghiti

frontend/src/pages/HomePage.tsx

@@ -16,39 +16,41 @@ export function HomePage() {
     return <StatusView title="Catalog unavailable" message={error} />;
   }
 
-  const featuredProducts = products.filter((product) => product.featured).slice(0, 3);
+  const featuredProducts = products.filter((product) => product.featured).slice(0, 4);
+  const bestSellers = products.filter((product) => product.bestSeller).slice(0, 4);
+  const newArrivals = products.filter((product) => product.newArrival).slice(0, 4);
 
   return (
     <div className="page-stack">
       <section className="hero-panel">
         <div className="hero-copy">
-          <span className="eyebrow">Fluxon storefront</span>
-          <h1>Build a demo-ready shop now, then swap in real APIs as the backend catches up.</h1>
+          <span className="eyebrow">Next-Gen Everyday Tech</span>
+          <h1>Smart products built for modern daily life.</h1>
           <p>
-            This frontend is structured for hybrid delivery: polished enough for presentation, flexible enough for
-            incomplete endpoints.
+            Discover a curated storefront across Audio, Smart Devices, Accessories, Home Tech, and Personal Care with
+            a presentation-ready shopping flow.
           </p>
           <div className="inline-actions">
             <Link to="/products" className="cta-button">
-              Explore Products
+              Shop Now
             </Link>
-            <Link to="/register" className="ghost-button">
-              Create Demo Account
+            <Link to="/products" className="ghost-button">
+              Explore Categories
             </Link>
           </div>
         </div>
         <div className="hero-card-grid">
           <div className="hero-stat">
             <strong>{products.length}</strong>
-            <span>Curated products</span>
+            <span>Store-ready products</span>
           </div>
           <div className="hero-stat">
             <strong>{categories.length}</strong>
-            <span>Shop categories</span>
+            <span>Core categories</span>
           </div>
           <div className="hero-stat accent">
-            <strong>Mock + API</strong>
-            <span>Safe for evolving backend</span>
+            <strong>Deep Navy + Orange</strong>
+            <span>Clean tech-commerce direction</span>
           </div>
         </div>
       </section>
@@ -57,14 +59,17 @@ export function HomePage() {
         <div className="section-heading">
           <div>
             <span className="eyebrow">Categories</span>
-            <h2>Shape the browsing experience around the backend data model</h2>
+            <h2>Shop the five storefront pillars of Fluxon</h2>
           </div>
         </div>
         <div className="category-grid">
           {categories.map((category) => (
             <article key={category.id} className="category-card">
               <h3>{category.name}</h3>
-              <p>Use this category as a filter, navigation cue, and featured-content block.</p>
+              <p>{category.description}</p>
+              <Link to={`/products`} className="category-link">
+                Explore
+              </Link>
             </article>
           ))}
         </div>
@@ -74,7 +79,7 @@ export function HomePage() {
         <div className="section-heading">
           <div>
             <span className="eyebrow">Featured</span>
-            <h2>Presentation-friendly products for your MVP demo flow</h2>
+            <h2>Featured picks for the homepage hero flow</h2>
           </div>
           <Link to="/products" className="ghost-button">
             View All
@@ -86,6 +91,72 @@ export function HomePage() {
           ))}
         </div>
       </section>
+
+      <section className="promo-band">
+        <article className="promo-card">
+          <span className="eyebrow">Promo</span>
+          <h3>Up to 30% off selected Audio and Accessories</h3>
+          <p>Use this section for discounts, launches, or your strongest weekly campaign.</p>
+          <Link to="/products" className="ghost-button">
+            See Offers
+          </Link>
+        </article>
+        <article className="promo-card promo-card-dark">
+          <span className="eyebrow">New Drop</span>
+          <h3>Fresh Smart Devices and Personal Care arrivals</h3>
+          <p>Keep the homepage feeling alive with fast-moving campaign blocks like this one.</p>
+          <Link to="/products" className="cta-button">
+            Browse New Arrivals
+          </Link>
+        </article>
+      </section>
+
+      <section className="panel">
+        <div className="section-heading">
+          <div>
+            <span className="eyebrow">Best Sellers</span>
+            <h2>Products that add social proof to your storefront</h2>
+          </div>
+        </div>
+        <div className="product-grid">
+          {bestSellers.map((product) => (
+            <ProductCard key={product.id} product={product} onAdd={addItem} />
+          ))}
+        </div>
+      </section>
+
+      <section className="panel">
+        <div className="section-heading">
+          <div>
+            <span className="eyebrow">New Arrivals</span>
+            <h2>Fresh additions to keep the shop feeling current</h2>
+          </div>
+        </div>
+        <div className="product-grid">
+          {newArrivals.map((product) => (
+            <ProductCard key={product.id} product={product} onAdd={addItem} />
+          ))}
+        </div>
+      </section>
+
+      <section className="trust-grid">
+        <article className="trust-card">
+          <h3>Secure Checkout</h3>
+          <p>Use this block to reassure users that payments and account actions are protected.</p>
+        </article>
+        <article className="trust-card">
+          <h3>Fast Delivery</h3>
+          <p>Highlight delivery expectations and shipping confidence early in the homepage flow.</p>
+        </article>
+        <article className="trust-card">
+          <h3>Curated Products</h3>
+          <p>Show that Fluxon is not random inventory, but a selected modern tech catalog.</p>
+        </article>
+        <article className="trust-card">
+          <h3>Helpful Support</h3>
+          <p>Good support messaging makes a student project feel more like a real commerce brand.</p>
+        </article>
+      </section>
     </div>
   );
 }