SEO

src/components/marketing/HomePageClient.tsx

@@ -17,7 +17,8 @@ import { ScrollToTop } from '@/components/ui/ScrollToTop';
 import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
 import { TestimonialsCarousel } from '@/components/marketing/TestimonialsCarousel';
 import { testimonials } from '@/lib/testimonial-data';
-import en from '@/i18n/en.json';
+import en from '@/i18n/en.json';
+import { allUseCases } from '@/lib/growth-pages';
 
 export default function HomePageClient() {
   // Always use English for marketing pages
@@ -120,6 +121,41 @@ export default function HomePageClient() {
         </div>
       </section>
 
+            {/* Popular Use Cases Section */}
+      <section className="bg-slate-50 py-16 border-y border-slate-200">
+        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="mb-8 max-w-3xl">
+            <h2 className="text-3xl font-bold text-slate-900">
+              Popular Use Cases
+            </h2>
+            <p className="mt-3 text-base leading-7 text-slate-600">
+              Discover how businesses across different industries use dynamic QR codes to track offline engagement and simplify customer journeys.
+            </p>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+            {allUseCases.slice(0, 8).map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="group rounded-lg border border-slate-200 bg-white p-5 shadow-sm transition-all hover:shadow-md hover:border-blue-300"
+              >
+                <h3 className="text-lg font-semibold text-slate-900 group-hover:text-blue-700">
+                  {item.title}
+                </h3>
+                <p className="mt-2 text-sm leading-6 text-slate-600 line-clamp-2">
+                  {item.summary}
+                </p>
+              </Link>
+            ))}
+          </div>
+          <div className="mt-8 text-center">
+            <Link href="/use-cases">
+              <Button variant="outline" className="font-semibold text-slate-700">View All Use Cases</Button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
       {/* Testimonials Carousel */}
       <TestimonialsCarousel testimonials={testimonials} />