Add 5-star rating review to hero section

src/components/custom/FiveStarRating.tsx

@@ -0,0 +1,22 @@
+import { Star } from "lucide-react";
+
+interface FiveStarRatingProps {
+  rating: number;
+  reviewCount: number;
+}
+
+export default function FiveStarRating({ rating, reviewCount }: FiveStarRatingProps) {
+  return (
+    <div className="flex items-center gap-1 text-primary">
+      {[...Array(5)].map((_, i) => (
+        <Star
+          key={i}
+          className={`h-5 w-5 ${
+            i < rating ? "fill-current text-yellow-400" : "text-gray-300"
+          }`}
+        />
+      ))}
+      <span className="ml-2 text-sm text-gray-600">({reviewCount} reviews)</span>
+    </div>
+  );
+}

src/components/sections/hero/HeroBillboardBrand.tsx

@@ -3,10 +3,13 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AutoFillText from "@/components/ui/AutoFillText";
+import FiveStarRating from "@/components/custom/FiveStarRating";
 import ScrollReveal from "@/components/ui/ScrollReveal";
 
 type HeroBillboardBrandProps = {
   brand: string;
+  rating?: number;
+  reviewCount?: number;
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
@@ -26,6 +29,11 @@ const HeroBillboardBrand = ({
       <div className="flex flex-col gap-10 w-content-width mx-auto">
         <div className="flex flex-col items-end gap-5">
           <AutoFillText className="w-full font-semibold" paddingY="">{brand}</AutoFillText>
+          {rating && reviewCount && (
+            <div className="mt-2">
+              <FiveStarRating rating={rating} reviewCount={reviewCount} />
+            </div>
+          )}
 
           <TextAnimation
             text={description}

src/pages/HomePage.tsx

@@ -8,6 +8,7 @@ import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
 import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';
 import ImageBentoGallery from '@/components/custom/ImageBentoGallery';
 import { Cake, Timer, Users } from "lucide-react";
+import FiveStarRating from "@/components/custom/FiveStarRating";
 import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
 
 export default function HomePage() {
@@ -17,6 +18,8 @@ export default function HomePage() {
     <SectionErrorBoundary name="hero">
           <HeroBillboardBrand
       brand="Freshly Baked Goodness"
+      rating={5}
+      reviewCount={120}
       description="Handcrafted pastries, cakes, and bread made daily with premium ingredients. Order online for pickup or delivery."
       primaryButton={{
         text: "Order Now",        href: "#products"}}