2ec0e1975f
This commit refactors several components to improve data handling and flexibility. It primarily modifies the way data is passed as props to the components. By taking advantage of the flexibility that comes with the use of props, components such as HeroSection, FeaturesStatsAlt, and TestimonialsSectionAlt have been enhanced to adjust and render content dynamically. This creates an improvement in code reusability and maintainability across the application. Additionally, optional rendering has been added for secondary elements such as subtitles and buttons.
133 lines
4.3 KiB
Text
133 lines
4.3 KiB
Text
---
|
|
// 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 Avatar from "../../ui/avatars/Avatar.astro";
|
|
import FullStar from "../../ui/stars/FullStar.astro";
|
|
import HalfStar from "../../ui/stars/HalfStar.astro";
|
|
|
|
// Define props from Astro
|
|
const {
|
|
title,
|
|
subTitle,
|
|
primaryBtn,
|
|
primaryBtnURL,
|
|
secondaryBtn,
|
|
secondaryBtnURL,
|
|
withReview,
|
|
avatars,
|
|
starCount = 0,
|
|
rating,
|
|
reviews
|
|
} = Astro.props;
|
|
|
|
// Define TypeScript interface for props
|
|
interface Props {
|
|
title: string;
|
|
subTitle?: string;
|
|
primaryBtn?: string;
|
|
primaryBtnURL?: string;
|
|
secondaryBtn?: string;
|
|
secondaryBtnURL?: string;
|
|
withReview?: boolean;
|
|
avatars?: Array<string>;
|
|
starCount?: number;
|
|
rating?: string;
|
|
reviews?: string;
|
|
}
|
|
---
|
|
|
|
<!-- Defining a grid container that holds all the content -->
|
|
<section
|
|
class="mx-auto grid max-w-[85rem] gap-4 px-4 py-14 sm:px-6 md:grid-cols-2 md:items-center md:gap-8 lg:px-8 2xl:max-w-full"
|
|
>
|
|
<!-- Title and description -->
|
|
<div>
|
|
<!-- Each h1 and p tag renders a portion of the title and subTitle defined above -->
|
|
<h1
|
|
class="block text-balance text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight"
|
|
>
|
|
<!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
|
|
<Fragment set:html={title} />
|
|
</h1>
|
|
{subTitle &&
|
|
<p
|
|
class="mt-3 text-pretty text-lg leading-relaxed text-neutral-700 dark:text-neutral-400 lg:w-4/5"
|
|
>
|
|
{subTitle}
|
|
</p>
|
|
}
|
|
<!-- Action Button Section: This section includes two CTAs with their own styles and URL -->
|
|
<div class="mt-7 grid w-full gap-3 sm:inline-flex">
|
|
{primaryBtn &&
|
|
<PrimaryCTA title={primaryBtn} url={primaryBtnURL} />
|
|
}
|
|
{secondaryBtn &&
|
|
<SecondaryCTA title={secondaryBtn} url={secondaryBtnURL} />
|
|
}
|
|
</div>
|
|
|
|
<!-- Review Section: This section presents avatars, review ratings and the number of reviews -->
|
|
{ withReview ? (
|
|
<div class="mt-6 lg:mt-10">
|
|
<div class="py-5">
|
|
<div class="text-center sm:flex sm:items-center sm:text-start">
|
|
<div class="flex-shrink-0 pb-5 sm:flex sm:pb-0 sm:pe-5">
|
|
<!-- Avatar Group -->
|
|
<div class="flex justify-center -space-x-3">
|
|
{ avatars?.map(src => <Avatar src={src} alt="Avatar Description" />) }
|
|
<span
|
|
class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-zinc-800 ring-2 ring-white dark:bg-zinc-900 dark:ring-zinc-800"
|
|
>
|
|
<span
|
|
class="text-xs font-medium uppercase leading-none text-white"
|
|
>7k+</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mx-auto h-px w-32 border-t border-neutral-400 dark:border-neutral-500 sm:mx-0 sm:h-8 sm:w-auto sm:border-s sm:border-t-0"
|
|
>
|
|
</div>
|
|
<!-- Review Ratings -->
|
|
<div class="flex flex-col items-center sm:items-start">
|
|
<div class="flex items-baseline space-x-1 pt-5 sm:ps-5 sm:pt-0">
|
|
<div class="flex space-x-1">
|
|
<!-- Your star ratings -->
|
|
{
|
|
Array(starCount).fill(0).map((_, i) => <FullStar key={i} />)
|
|
}
|
|
<!-- Adding additional half-star -->
|
|
<HalfStar />
|
|
</div>
|
|
<p class="text-neutral-800 dark:text-neutral-200">
|
|
<Fragment set:html={rating} />
|
|
</p>
|
|
</div>
|
|
<div class="text-sm text-neutral-800 dark:text-neutral-200 sm:ps-5">
|
|
<p>
|
|
<Fragment set:html={reviews} />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> ) : "" }
|
|
</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"
|
|
class="h-full w-full scale-110 object-cover object-center"
|
|
draggable={"false"}
|
|
loading={"eager"}
|
|
format={"avif"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|