src/pages/HomePage/sections/TrustedBy.tsx

@@ -1,31 +1,38 @@
 import LoopCarousel from '@/components/ui/LoopCarousel';
+import { Award, ShieldCheck, Star, CheckCircle, Leaf, BadgeCheck } from 'lucide-react';
 
 export default function TrustedBySection() {
   const partners = [
-    "Local Farmers Market",
-    "City Coffee Roasters",
-    "Organic Wheat Co.",
-    "Downtown Cafe",
-    "Heritage Mills",
-    "Artisan Guild"
+    { name: "Certified Organic", icon: Leaf },
+    { name: "Local Farmers Market", icon: Star },
+    { name: "City Coffee Roasters", icon: Award },
+    { name: "Heritage Mills", icon: ShieldCheck },
+    { name: "Artisan Guild", icon: BadgeCheck },
+    { name: "Quality Assured", icon: CheckCircle }
   ];
 
   return (
     <section data-webild-section="trusted-by" id="trusted-by" className="w-full py-12 bg-background border-b border-foreground/5">
       <div className="w-content-width mx-auto flex flex-col items-center">
-        <p className="text-sm font-medium text-accent mb-8 uppercase tracking-widest">Trusted by our local partners</p>
+        <p className="text-sm font-medium text-accent mb-8 uppercase tracking-widest">Trusted Partners & Certifications</p>
         <div className="w-full overflow-hidden">
           <LoopCarousel>
             <div className="flex items-center gap-16 px-8">
-              {partners.map((partner, index) => (
-                <span key={index} className="text-xl font-bold text-foreground/40 whitespace-nowrap">
-                  {partner}
-                </span>
-              ))}
+              {partners.map((partner, index) => {
+                const Icon = partner.icon;
+                return (
+                  <div key={index} className="flex items-center gap-3 text-foreground/40">
+                    <Icon className="w-8 h-8" />
+                    <span className="text-xl font-bold whitespace-nowrap">
+                      {partner.name}
+                    </span>
+                  </div>
+                );
+              })}
             </div>
           </LoopCarousel>
         </div>
       </div>
     </section>
   );
-}
+}