feat: Add 5-star review tag to hero section

Merge version_5_1778224353789 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;
@@ -27,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"
@@ -37,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"
@@ -49,6 +64,8 @@ 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>
 
       <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",
+          "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" : "h-20 bg-background/0 backdrop-blur-0"
+          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
+          <div
             ref={menuRef}
-            initial={{ y: "-135%" }}
+            
-            animate={{ y: 0 }}
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
-            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"
           >
             <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>
     </>
   );
 };