From db7affb3a0668d03853973713943b76923f28f9a Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 21 May 2026 00:29:04 +0000
Subject: [PATCH] Add testimonial card to HeroBillboardBrand component

---
 .../sections/hero/HeroBillboardBrand.tsx      | 21 +++++++++++++++++++
 src/pages/HomePage.tsx                        |  6 ++++++
 2 files changed, 27 insertions(+)

diff --git a/src/components/sections/hero/HeroBillboardBrand.tsx b/src/components/sections/hero/HeroBillboardBrand.tsx
index 2fdf408..0e6bc80 100644
--- a/src/components/sections/hero/HeroBillboardBrand.tsx
+++ b/src/components/sections/hero/HeroBillboardBrand.tsx
@@ -10,6 +10,12 @@ type HeroBillboardBrandProps = {
   description: string;
   primaryButton: { text: string; href: string };
   secondaryButton: { text: string; href: string };
+  testimonial?: {
+    quote: string;
+    author: string;
+    authorTitle: string;
+    imageSrc: string;
+  };
 } & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
 
 const HeroBillboardBrand = ({
@@ -19,6 +25,7 @@ const HeroBillboardBrand = ({
   secondaryButton,
   imageSrc,
   videoSrc,
+  testimonial,
 }: HeroBillboardBrandProps) => {
   return (
     <section aria-label="Hero section" className="relative pt-25 pb-20 md:py-30 mb-20">
@@ -39,6 +46,20 @@ const HeroBillboardBrand = ({
             <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
             <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
           </div>
+          {testimonial && (
+            <div className="w-full md:w-1/2 mt-8 p-6 bg-background/80 backdrop-blur-md rounded-lg shadow-lg text-right">
+              <p className="text-lg italic text-foreground">"{testimonial.quote}"</p>
+              <div className="mt-4 flex items-center justify-end gap-3">
+                <div className="text-sm">
+                  <p className="font-semibold text-foreground">{testimonial.author}</p>
+                  <p className="text-muted-foreground">{testimonial.authorTitle}</p>
+                </div>
+                {testimonial.imageSrc && (
+                  <img src={testimonial.imageSrc} alt={testimonial.author} className="h-12 w-12 rounded-full object-cover" />
+                )}
+              </div>
+            </div>
+          )}
         </div>
 
         <ScrollReveal variant="slide-up" delay={0.2} className="w-full p-3 xl:p-4 2xl:p-5 card rounded overflow-hidden">
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 3e20026..06627f6 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -27,6 +27,12 @@ export default function HomePage() {
         href: "#contact",
       }}
       imageSrc="http://img.b2bpic.net/free-photo/luxury-hotel-reception-hall-office-with-decor-shelf_105762-1676.jpg"
+      testimonial={{
+        quote: "Apex Legal Group provided exceptional guidance and support throughout our complex case. Their expertise and dedication were instrumental in achieving a favorable outcome.",
+        author: "Jane Doe",
+        authorTitle: "CEO, Tech Solutions Inc.",
+        imageSrc: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+      }}
     >
       <div className="mt-8 flex items-center gap-4">
         <div className="flex -space-x-2 overflow-hidden">
-- 
2.49.1