Bob AI: Add persistent mobile-friendly call-to-action bar

src/pages/HomePage.tsx

@@ -15,10 +15,14 @@ import SocialProofSection from './HomePage/sections/SocialProof';
 import ContactSection from './HomePage/sections/Contact';
 
 
-import FaqSection from './HomePage/sections/Faq';export default function HomePage(): React.JSX.Element {
+import FaqSection from './HomePage/sections/Faq';
+import CertificationsSection from './HomePage/sections/Certifications';
+import ClientLogosSection from './HomePage/sections/ClientLogos';
+import FloatingCtaSection from './HomePage/sections/FloatingCta';export default function HomePage(): React.JSX.Element {
   return (
 <>
   <HeroSection />
+      <CertificationsSection />
 
   <AboutSection />
 
@@ -29,11 +33,13 @@ import FaqSection from './HomePage/sections/Faq';export default function HomePag
   <MetricsSection />
 
   <TestimonialsSection />
+      <ClientLogosSection />
 
   <SocialProofSection />
       <FaqSection />
 
   <ContactSection />
+          <FloatingCtaSection />
     </>
   );
 }

src/pages/HomePage/sections/Certifications.tsx

@@ -0,0 +1,35 @@
+import LoopCarousel from '@/components/ui/LoopCarousel';
+import { ShieldCheck, Award, Leaf, CheckCircle, Star } from 'lucide-react';
+
+export default function CertificationsSection() {
+  return (
+    <section data-webild-section="certifications" id="certifications" className="w-full py-8 bg-background border-b border-border/10">
+      <div className="w-content-width mx-auto">
+        <LoopCarousel>
+          <div className="flex items-center gap-12 py-4">
+            <div className="flex items-center gap-2 text-accent opacity-70 hover:opacity-100 transition-opacity">
+              <ShieldCheck className="w-6 h-6" />
+              <span className="font-medium text-sm uppercase tracking-wider">Food Safety Certified</span>
+            </div>
+            <div className="flex items-center gap-2 text-accent opacity-70 hover:opacity-100 transition-opacity">
+              <Leaf className="w-6 h-6" />
+              <span className="font-medium text-sm uppercase tracking-wider">100% Organic Grains</span>
+            </div>
+            <div className="flex items-center gap-2 text-accent opacity-70 hover:opacity-100 transition-opacity">
+              <Award className="w-6 h-6" />
+              <span className="font-medium text-sm uppercase tracking-wider">Artisan Bakers Guild</span>
+            </div>
+            <div className="flex items-center gap-2 text-accent opacity-70 hover:opacity-100 transition-opacity">
+              <CheckCircle className="w-6 h-6" />
+              <span className="font-medium text-sm uppercase tracking-wider">Non-GMO Verified</span>
+            </div>
+            <div className="flex items-center gap-2 text-accent opacity-70 hover:opacity-100 transition-opacity">
+              <Star className="w-6 h-6" />
+              <span className="font-medium text-sm uppercase tracking-wider">Top Rated Bakery 2024</span>
+            </div>
+          </div>
+        </LoopCarousel>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage/sections/ClientLogos.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import LoopCarousel from '@/components/ui/LoopCarousel';
+
+export default function ClientLogosSection() {
+  return (
+    <div data-webild-section="client-logos" id="client-logos">
+      <section className="w-full py-16 bg-background border-t border-black/5 dark:border-white/5">
+        <div className="w-content-width mx-auto flex flex-col items-center">
+          <p className="text-sm font-medium text-accent mb-10 uppercase tracking-widest text-center">
+            Proudly serving top restaurants & cafes
+          </p>
+          <div className="w-full overflow-hidden" style={{ maskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 10%, black 90%, transparent)' }}>
+            <LoopCarousel>
+              <div className="flex items-center gap-16 md:gap-24 px-8">
+                {[
+                  "The French Laundry",
+                  "Balthazar",
+                  "Tartine Bakery",
+                  "Blue Hill",
+                  "Le Bernardin",
+                  "Eleven Madison Park",
+                  "Alinea",
+                  "Per Se"
+                ].map((partner, i) => (
+                  <span key={i} className="text-xl md:text-2xl font-bold text-foreground/30 whitespace-nowrap hover:text-foreground/80 transition-colors duration-300">
+                    {partner}
+                  </span>
+                ))}
+              </div>
+            </LoopCarousel>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

src/pages/HomePage/sections/FloatingCta.tsx

@@ -0,0 +1,15 @@
+import Button from "@/components/ui/Button";
+
+export default function FloatingCta() {
+  return (
+    <div data-webild-section="floating-cta" className="fixed bottom-4 left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-md z-50 pointer-events-none">
+      <div className="card pointer-events-auto w-full p-4 flex items-center justify-between gap-4 shadow-2xl rounded-xl border border-black/5">
+        <div className="flex flex-col">
+          <span className="text-sm font-bold text-foreground">Ready to order?</span>
+          <span className="text-xs text-accent">Get in touch today</span>
+        </div>
+        <Button text="Contact Us" variant="primary" href="#contact" />
+      </div>
+    </div>
+  );
+}