feat: Add 5-star review tag to hero section

Merge version_5_1778224353789 into main

src/components/sections/hero/HeroBillboardTiltedCarousel.tsx

@@ -28,8 +28,6 @@ const HeroBillboardTiltedCarousel = ({
     >
       <HeroBackgroundSlot />
       <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
-        <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
-
         <TextAnimation
           text={title}
           variant="fade-blur"
@@ -38,6 +36,22 @@ const HeroBillboardTiltedCarousel = ({
           className="text-6xl font-medium text-balance"
         />
 
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex items-center gap-1">
+            {[...Array(5)].map((_, i) => (
+              <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+            ))}
+          </div>
+          <div className="flex -space-x-2">
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e58691053ba4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+          </div>
+        </div>
+
+        <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+
         <TextAnimation
           text={description}
           variant="fade-blur"
@@ -51,20 +65,7 @@ const HeroBillboardTiltedCarousel = ({
           <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} />