feat: add 5-star review tag to hero section

Merge version_3_1778223685822 into main

src/components/sections/hero/HeroBillboardTiltedCarousel.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import TiltedCarousel from "@/components/ui/TiltedCarousel";
+import { Star } from "lucide-react";
 
 type HeroBillboardTiltedCarouselProps = {
   tag: string;
@@ -49,6 +50,21 @@ const HeroBillboardTiltedCarousel = ({
           <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
           <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
         </div>
+
+        <div className="flex flex-col items-center gap-2 mt-4">
+          <div className="flex items-center gap-1">
+            {[...Array(5)].map((_, i) => (
+              <Star key={i} className="w-5 h-5 text-yellow-400 fill-yellow-400" />
+            ))}
+          </div>
+          <div className="flex -space-x-2 overflow-hidden">
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-background" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User 1" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-background" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 2" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-background" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 3" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-background" src="https://randomuser.me/api/portraits/men/46.jpg" alt="User 4" />
+          </div>
+          <p className="text-sm text-muted-foreground">Loved by 10,000+ happy customers</p>
+        </div>
       </div>
 
       <TiltedCarousel items={items} />