Create HeroSection component
A new HeroSection component has been added for the project's landing page. It consists of sub-components and various elements including the header, sub-header, primary and secondary CTA buttons, rating system, review statistics, and a sleek hero image. All text and links within are defined as variables for easy customization.
This commit is contained in:
Emil Gulamov
parent
3174ed252e
commit
f877617735
1 changed files with 135 additions and 0 deletions
135
src/components/HeroSection.astro
Normal file
135
src/components/HeroSection.astro
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
---
|
||||||
|
// import 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";
|
||||||
|
|
||||||
|
/* `title` variable used to customise the main heading. */
|
||||||
|
const title = `Equip Your Projects with <span
|
||||||
|
class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`;
|
||||||
|
|
||||||
|
/* `subTitle` variable used to customise the sub-heading text. */
|
||||||
|
const subTitle =
|
||||||
|
"Top-quality hardware tools and expert construction services for every project need.";
|
||||||
|
|
||||||
|
/* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
|
||||||
|
const primaryBtn = "Start Exploring";
|
||||||
|
const primaryBtnURL = "#";
|
||||||
|
|
||||||
|
/* `secondaryBtn` and `secondaryBtnURL` variables used to customise the text and target link of the secondary button. */
|
||||||
|
const secondaryBtn = "Contact Sales Team";
|
||||||
|
const secondaryBtnURL = "#";
|
||||||
|
|
||||||
|
/* `rating` variable used to customise the rating. */
|
||||||
|
const rating = 4.8;
|
||||||
|
|
||||||
|
/* `starCount` variable used to customise the star rating with the full stars. */
|
||||||
|
const starCount = 4;
|
||||||
|
|
||||||
|
/* `reviews` variable used to customise the number of reviews. */
|
||||||
|
const reviews = "12.8k";
|
||||||
|
|
||||||
|
/*
|
||||||
|
In the above, the title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, rating, starCount, reviews, and imageSource attributes are variables part of the HeroSection component.
|
||||||
|
*/
|
||||||
|
---
|
||||||
|
|
||||||
|
<div
|
||||||
|
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>
|
||||||
|
<h1
|
||||||
|
class="text-balanced block 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 buttons -->
|
||||||
|
<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 -->
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
<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">
|
||||||
|
<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 -->
|
||||||
|
<div class="flex w-full">
|
||||||
|
<div class="top-12 overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={heroImage}
|
||||||
|
alt=""
|
||||||
|
class="h-full w-full scale-105 object-cover object-center"
|
||||||
|
draggable={"false"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Loading…
Add table
Reference in a new issue