jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Add image source and alt to HeroSection
This commit is contained in:
Emil Gulamov 2024-03-20 18:36:56 +04:00 • committed by GitHub
commit 2009ed542c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/sections/landing/HeroSection.astro
View file

@ -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 {
</div>
<!-- Hero Image Section -->
<div class="flex w-full">
<div class="top-12 overflow-hidden">
<Image
src={heroImage}
alt="Stack of ScrewFast product boxes containing assorted hardware tools"
<div class="top-12 overflow-hidden">
{src && alt &&
<Image
src={src}
alt={alt}
class="h-full w-full scale-110 object-cover object-center"
draggable={"false"}
loading={"eager"}
format={"avif"}
/>
/>
}
</div>
</div>
</section>

3
src/pages/index.astro
View file

@ -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