diff --git a/src/components/custom/HeroImage.tsx b/src/components/custom/HeroImage.tsx
new file mode 100644
index 0000000..44042c5
--- /dev/null
+++ b/src/components/custom/HeroImage.tsx
@@ -0,0 +1,83 @@
+import { motion } from "motion/react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar";
+import Button from "@/components/ui/Button";
+import { cn } from "@/lib/utils";
+
+const HeroImage = ({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  imageSrc,
+  avatars,
+  avatarsLabel,
+}: {
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  imageSrc: string;
+  avatars: { src: string }[];
+  avatarsLabel: string;
+}) => {
+  return (
+    <section className="relative overflow-hidden bg-background text-foreground">
+      <div className="container relative z-10 flex flex-col items-center justify-center min-h-svh text-center">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="flex flex-col items-center"
+        >
+          <div className="flex items-center mb-4">
+            <div className="flex -space-x-2 mr-2">
+              {avatars.map((avatar, index) => (
+                <Avatar key={index} className="w-8 h-8 border-2 border-background">
+                  <AvatarImage src={avatar.src} />
+                  <AvatarFallback>{index}</AvatarFallback>
+                </Avatar>
+              ))}
+            </div>
+            <span className="text-sm text-muted-foreground">{avatarsLabel}</span>
+          </div>
+          <h1 className="text-5xl md:text-7xl font-bold tracking-tighter mb-4">
+            {title}
+          </h1>
+          <p className="max-w-2xl text-lg text-muted-foreground mb-8">
+            {description}
+          </p>
+          <div className="flex gap-4">
+            <Button as="a" href={primaryButton.href} size="lg" variant="primary">
+              {primaryButton.text}
+            </Button>
+            <Button as="a" href={secondaryButton.href} size="lg" variant="secondary">
+              {secondaryButton.text}
+            </Button>
+          </div>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="mt-12"
+        >
+          <img
+            src={imageSrc}
+            alt="Hero Image"
+            className="rounded-lg shadow-2xl w-full max-w-4xl"
+          />
+        </motion.div>
+      </div>
+      <div
+        className="absolute inset-0 bg-gradient-to-b from-background to-transparent"
+        style={{
+          maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+        }}
+      />
+    </section>
+  );
+};
+
+export default HeroImage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 55f45ac..49cac50 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -2,7 +2,7 @@ import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
 import FeaturesProfileCards from '@/components/sections/features/FeaturesProfileCards';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroImage from '@/components/custom/HeroImage';
 import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
 import ProductVariantCards from '@/components/sections/product/ProductVariantCards';
 import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
@@ -13,8 +13,7 @@ export default function HomePage() {
     <>
   <div id="hero" data-section="hero">
     <SectionErrorBoundary name="hero">
-          <HeroBillboard
-      tag="Welcome"
+          <HeroImage
       title="Experience Unrivaled Luxury"
       description="Discover exquisite comfort and impeccable service at the Grand Lux Hotel, your perfect urban oasis."
       primaryButton={{
@@ -28,19 +27,16 @@ export default function HomePage() {
       imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-beautiful-comtemporary-luxury-bedroom-suite-hotel-with-tv_105762-2058.jpg"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/smiling-woman-holding-car-charger-electric-vehicle-charging-station_107420-94914.jpg",
+          src: "https://i.pravatar.cc/150?img=1",
         },
         {
-          src: "http://img.b2bpic.net/free-photo/portrait-stylish-young-man-beach-male-model-with-shaved-head-sunglasses-smiling-brightly-pointing-portrait-vacation-beauty-concept_74855-23367.jpg",
+          src: "https://i.pravatar.cc/150?img=2",
         },
         {
-          src: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3843.jpg",
+          src: "https://i.pravatar.cc/150?img=3",
         },
         {
-          src: "http://img.b2bpic.net/free-photo/happy-tennis-player-court_329181-14408.jpg",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-woman-posing-outdoors_23-2147636737.jpg",
+          src: "https://i.pravatar.cc/150?img=4",
         },
       ]}
       avatarsLabel="Trusted by over 10,000 delighted guests"