Merge pull request #16 from newbeelearn/feat-hreosection-reuse

Add image source and alt to HeroSection

src/components/sections/landing/HeroSection.astro

@@ -1,7 +1,6 @@
 ---
 // Import the necessary dependencies
 import { Image } from "astro:assets";
-import heroImage from "../../../images/hero-image.avif";
 import PrimaryCTA from "../../ui/buttons/PrimaryCTA.astro";
 import SecondaryCTA from "../../ui/buttons/SecondaryCTA.astro";
 import ReviewComponent from "../../ui/blocks/ReviewComponent.astro";
@@ -18,7 +17,9 @@ const {
   avatars,
   starCount,
   rating,
-  reviews
+  reviews,
+  src,
+  alt
 } = Astro.props;
 
 // Define TypeScript interface for props
@@ -34,6 +35,8 @@ interface Props {
   starCount?: number;
   rating?: string;
   reviews?: string;
+  src?: any;
+  alt?: string;
 }
 ---
 
@@ -76,14 +79,16 @@ interface Props {
   <!-- Hero Image Section -->
   <div class="flex w-full">
       <div class="top-12 overflow-hidden">
+	{src && alt &&
 	<Image
-        src={heroImage}
-        alt="Stack of ScrewFast product boxes containing assorted hardware tools"
+        src={src}
+        alt={alt}
         class="h-full w-full scale-110 object-cover object-center"
         draggable={"false"}
         loading={"eager"}
         format={"avif"}
 	 />
+	}
     </div>
   </div>
 </section>

src/pages/index.astro

@@ -10,6 +10,7 @@ import TestimonialsSection from "../components/sections/testimonials/Testimonial
 import PricingSection from "../components/sections/pricing/PricingSection.astro";
 import FAQ from "../components/sections/FAQ.astro";
 import AnnouncementBanner from "../components/ui/banners/AnnouncementBanner.astro";
+import heroImage from "../images/hero-image.avif";
 
 const avatarSrcs: Array<string> = [
   "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80",
@@ -39,6 +40,8 @@ const avatarSrcs: Array<string> = [
     rating=`<span class="font-bold">4.8</span> / 5`
     starCount={4}
     reviews=`From Over <span class="font-bold">12.8k</span> Reviews`
+    src={heroImage}
+    alt="Stack of ScrewFast product boxes containing assorted hardware tools"
   />
 
   <ClientsSection