achat-maison-albi-fr/src/components/HeroSection.astro

---
// 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 the variables that will be used in this component
const title: string = `Equip Your Projects with <span
        class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`;
const subTitle: string =
  "Top-quality hardware tools and expert construction services for every project need.";
const primaryBtn: string = "Start Exploring";
const primaryBtnURL: string = "/products";
const secondaryBtn: string = "Contact Sales Team";
const secondaryBtnURL: string = "/contact";
const rating: number = 4.8;
const starCount: number = 4;
const reviews: string = "12.8k";
---

<!-- 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>
    <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">
      <PrimaryCTA title={primaryBtn} url={primaryBtnURL} />
      <SecondaryCTA title={secondaryBtn} url={secondaryBtnURL} />
    </div>

    <!-- Review Section: This section presents avatars, review ratings and the number of reviews -->
    <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">
              <Avatar
                src="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"
                alt="Image Description"
              />
              <Avatar
                src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
                alt="Image Description"
              />
              <Avatar
                src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80"
                alt="Image Description"
              />
              <Avatar
                src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80"
                alt="Image 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">
                <!-- Replace with your star ratings -->
                {
                  Array(starCount)
                    .fill(0)
                    .map((_, i) => <FullStar key={i} />)
                }
                <HalfStar />
              </div>
              <p class="text-neutral-800 dark:text-neutral-200">
                <span class="font-bold">{rating}</span> / 5
              </p>
            </div>
            <div class="text-sm text-neutral-800 dark:text-neutral-200 sm:ps-5">
              <p>
                From Over <span class="font-bold">{reviews}</span> 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>