From a611bc5e1b5bb820074300310d95ee119ec6ae39 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Tue, 19 May 2026 11:44:41 +0000
Subject: [PATCH] Add 5-star rating review to hero section

---
 src/components/custom/FiveStarRating.tsx      | 22 +++++++++++++++++++
 .../sections/hero/HeroBillboardBrand.tsx      |  8 +++++++
 src/pages/HomePage.tsx                        |  3 +++
 3 files changed, 33 insertions(+)
 create mode 100644 src/components/custom/FiveStarRating.tsx

diff --git a/src/components/custom/FiveStarRating.tsx b/src/components/custom/FiveStarRating.tsx
new file mode 100644
index 0000000..c823e40
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/sections/hero/HeroBillboardBrand.tsx b/src/components/sections/hero/HeroBillboardBrand.tsx
index 5ab48c2..bbb1d9e 100644
--- a/src/components/sections/hero/HeroBillboardBrand.tsx
+++ b/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}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3216bc5..006c89d 100644
--- a/src/pages/HomePage.tsx
+++ b/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"}}