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 the necessary dependencies
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import heroImage from "../../../images/hero-image.avif";
import PrimaryCTA from "../../ui/buttons/PrimaryCTA.astro"; import PrimaryCTA from "../../ui/buttons/PrimaryCTA.astro";
import SecondaryCTA from "../../ui/buttons/SecondaryCTA.astro"; import SecondaryCTA from "../../ui/buttons/SecondaryCTA.astro";
import ReviewComponent from "../../ui/blocks/ReviewComponent.astro"; import ReviewComponent from "../../ui/blocks/ReviewComponent.astro";
@ -18,7 +17,9 @@ const {
avatars, avatars,
starCount, starCount,
rating, rating,
reviews reviews,
src,
alt
} = Astro.props; } = Astro.props;
// Define TypeScript interface for props // Define TypeScript interface for props
@ -34,6 +35,8 @@ interface Props {
starCount?: number; starCount?: number;
rating?: string; rating?: string;
reviews?: string; reviews?: string;
src?: any;
alt?: string;
} }
--- ---
@ -75,15 +78,17 @@ interface Props {
</div> </div>
<!-- Hero Image Section --> <!-- Hero Image Section -->
<div class="flex w-full"> <div class="flex w-full">
<div class="top-12 overflow-hidden"> <div class="top-12 overflow-hidden">
<Image {src && alt &&
src={heroImage} <Image
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" class="h-full w-full scale-110 object-cover object-center"
draggable={"false"} draggable={"false"}
loading={"eager"} loading={"eager"}
format={"avif"} format={"avif"}
/> />
}
</div> </div>
</div> </div>
</section> </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 PricingSection from "../components/sections/pricing/PricingSection.astro";
import FAQ from "../components/sections/FAQ.astro"; import FAQ from "../components/sections/FAQ.astro";
import AnnouncementBanner from "../components/ui/banners/AnnouncementBanner.astro"; import AnnouncementBanner from "../components/ui/banners/AnnouncementBanner.astro";
import heroImage from "../images/hero-image.avif";
const avatarSrcs: Array<string> = [ 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", "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` rating=`<span class="font-bold">4.8</span> / 5`
starCount={4} starCount={4}
reviews=`From Over <span class="font-bold">12.8k</span> Reviews` reviews=`From Over <span class="font-bold">12.8k</span> Reviews`
src={heroImage}
alt="Stack of ScrewFast product boxes containing assorted hardware tools"
/> />
<ClientsSection <ClientsSection