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} />

src/components/ui/NavbarCentered.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
+
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -51,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -89,15 +89,11 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.div
+      {menuOpen && (
+          <div
             ref={menuRef}
-            initial={{ y: "-135%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "-135%" }}
-            transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
+            
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
           >
             <div className="flex items-center justify-between mb-6">
               <p className="text-xl text-foreground">Menu</p>
@@ -131,9 +127,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             <div className="mt-6">
               <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
             </div>
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
     </>
   );
 };