Bob AI: Fix the 5-star review element in the hero section so it displays correctly witho

Merge version_7_1781400938404 into main

src/pages/HomePage/sections/Hero.tsx

@@ -8,6 +8,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
+import RatingStars from "@/components/ui/RatingStars";
 import { useButtonClick } from "@/hooks/useButtonClick";
 
 const primaryButton = {
@@ -36,6 +37,7 @@ const items = [
     tag: "Interior Design"
   }
 ];
+const learnMoreButton = { text: "Learn more", href: "#services" };
 const secondaryButton = {
   text: "View all my projects",
   href: "#"
@@ -188,39 +190,57 @@ const HeroInline = () => {
                   </span>
                 </h1>
 
+                <div className="flex justify-center md:justify-start mt-2 mb-2">
+                  <div className="flex items-center gap-1 text-yellow-500">
+                    {[...Array(5)].map((_, i) => (
+                      <svg key={i} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5">
+                        <path fillRule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clipRule="evenodd" />
+                      </svg>
+                    ))}
+                  </div>
+                </div>
+
                 <p className="text-base md:text-lg font-medium leading-snug text-center md:text-left max-w-[95%]">
                   {"Design engineered for performance, not just aesthetics."}{" "}
                   <span className="text-foreground/50">{"I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."}</span>
                 </p>
 
-                <a
-                  href={primaryButton.href}
-                  onClick={handlePrimaryClick}
-                  className="group flex items-center gap-3 mt-2 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
-                >
-                  <div className="flex items-center">
-                    <div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
-                      <img
-                        src={primaryButton.avatarSrc}
-                        className="w-9 h-9 rounded-full object-cover"
-                        alt=""
-                      />
-                    </div>
-                    <div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
-                      <div className="overflow-hidden flex items-center">
-                        <span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
-                          +
-                        </span>
-                        <div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
-                          <span className="w-9 h-9 rounded-full flex items-center justify-center">
-                            <span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
+                <div className="flex flex-wrap items-center gap-4 mt-2">
+                  <a
+                    href={primaryButton.href}
+                    onClick={handlePrimaryClick}
+                    className="group flex items-center gap-3 text-primary-cta-text rounded-full pl-3 pr-6 py-3 w-fit primary-button transition-all duration-300"
+                  >
+                    <div className="flex items-center">
+                      <div className="card p-px rounded-full transition-transform duration-500 ease-out group-hover:-rotate-6">
+                        <img
+                          src={primaryButton.avatarSrc}
+                          className="w-9 h-9 rounded-full object-cover"
+                          alt=""
+                        />
+                      </div>
+                      <div className="grid grid-cols-[0fr] group-hover:grid-cols-[1fr] transition-all duration-500 ease-out">
+                        <div className="overflow-hidden flex items-center">
+                          <span className="text-primary-cta-text text-sm font-medium mx-2 transition-transform duration-500 ease-out -translate-x-3 group-hover:translate-x-0">
+                            +
                           </span>
+                          <div className="card p-px rounded-full shrink-0 transition-transform duration-500 ease-out -translate-x-5 group-hover:translate-x-0 group-hover:rotate-6">
+                            <span className="w-9 h-9 rounded-full flex items-center justify-center">
+                              <span className="text-foreground text-xs font-bold">{primaryButton.avatarLabel}</span>
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
-                </a>
+                    <span className="text-base font-medium whitespace-nowrap">{primaryButton.text}</span>
+                  </a>
+                  <a
+                    href="#services"
+                    className="secondary-button flex items-center gap-2 px-6 py-3 rounded-full transition-all duration-300"
+                  >
+                    {learnMoreButton.text}
+                  </a>
+                </div>
               </motion.div>
 
               <div ref={placeholderRef} className="w-full md:w-[54%] relative h-80 md:h-96">
@@ -246,6 +266,9 @@ const HeroInline = () => {
                 tag="h2"
                 className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
               />
+              <div className="flex justify-center mt-4">
+                <RatingStars rating={5} />
+              </div>
 
               <TextAnimation
                 text={"A curated selection of design work that drove real business results for ambitious brands."}