From 08e4a77b5f0571a9f6c2a59c8504ebef8ec1354f Mon Sep 17 00:00:00 2001 From: newbeelearn Date: Tue, 19 Mar 2024 16:53:53 +0530 Subject: [PATCH] Add image source and alt to HeroSection Added image source and alt to HeroSection so that images can be passed to it. Right now it is hardcoded in HeroSection. This will improve reusability of HeroSection by theme users. --- .../sections/landing/HeroSection.astro | 19 ++++++++++++------- src/pages/index.astro | 3 +++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/components/sections/landing/HeroSection.astro b/src/components/sections/landing/HeroSection.astro index 61b4e25..5bb6c0b 100644 --- a/src/components/sections/landing/HeroSection.astro +++ b/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; } --- @@ -75,15 +78,17 @@ interface Props {
-
- Stack of ScrewFast product boxes containing assorted hardware tools + {src && alt && + {alt} + /> + }
diff --git a/src/pages/index.astro b/src/pages/index.astro index 353f738..2b93dc2 100644 --- a/src/pages/index.astro +++ b/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 = [ "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 = [ rating=`4.8 / 5` starCount={4} reviews=`From Over 12.8k Reviews` + src={heroImage} + alt="Stack of ScrewFast product boxes containing assorted hardware tools" />