From 041ed7d55a948fd8da0627a56010b0b2d7cf7fb5 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Thu, 22 Feb 2024 08:43:19 +0400 Subject: [PATCH] Add TestimonialItem and StatsGrid components This commit introduces two new components (TestimonialItem and StatsGrid) to modularize the display of testimonial and statistics information. It also updates the TestimonialsSection to utilize these new components and receive parameters through its props. The MainPage's data source has been adjusted to send the required props for these changes. --- .../testimonials/TestimonialItem.astro | 52 +++++++ .../testimonials/TestimonialsSection.astro | 127 ++++-------------- src/components/ui/blocks/StatsGrid.astro | 38 ++++++ src/pages/index.astro | 45 ++++++- 4 files changed, 156 insertions(+), 106 deletions(-) create mode 100644 src/components/sections/testimonials/TestimonialItem.astro create mode 100644 src/components/ui/blocks/StatsGrid.astro diff --git a/src/components/sections/testimonials/TestimonialItem.astro b/src/components/sections/testimonials/TestimonialItem.astro new file mode 100644 index 0000000..3b29783 --- /dev/null +++ b/src/components/sections/testimonials/TestimonialItem.astro @@ -0,0 +1,52 @@ +--- +import { Image } from "astro:assets"; + +const { content, author, role, avatarSrc } = Astro.props; + +interface Props { + content: string; + author: string; + role: string; + avatarSrc: string; +} +--- + +
+ + +
+

+ {content} +

+
+ +
+
+
+ Avatar Description +
+
+
+ {author} +
+
{role}
+
+
+
+
diff --git a/src/components/sections/testimonials/TestimonialsSection.astro b/src/components/sections/testimonials/TestimonialsSection.astro index 5b36c34..9fe5e59 100644 --- a/src/components/sections/testimonials/TestimonialsSection.astro +++ b/src/components/sections/testimonials/TestimonialsSection.astro @@ -1,9 +1,20 @@ --- -import { Image } from "astro:assets"; -// Define constants for content -const title: string = "Fast-Track Your Projects"; -const subTitle: string = - "At ScrewFast, we ensure a swift start with instant account setup. Experience the speed of construction redefined."; +import TestimonialItem from "./TestimonialItem.astro"; +import StatsGrid from "../../ui/blocks/StatsGrid.astro"; + +const { + title, + subTitle, + testimonials, + statistics +} = Astro.props; + +interface Props { + title: string; + subTitle?: string; + testimonials?: Testimonial[]; + statistics?: StatProps[]; +} // TypeScript type for testimonials type Testimonial = { @@ -13,44 +24,11 @@ type Testimonial = { avatarSrc: string; }; -// An array of testimonials -const testimonials: Testimonial[] = [ - { - content: - "ScrewFast dramatically boosted our project efficiency. Setup was instant, and their rapid response times are phenomenal. Truly a game-changer in hardware and construction support!", - author: "Samantha Ruiz", - role: "Chief Operating Officer | ConstructIt Inc.", - avatarSrc: - "https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?q=80&w=1453&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80", - }, -]; - // TypeScript type for stats. type StatProps = { count: string; description: string; }; - -// An array of stats -const statistics: StatProps[] = [ - { - count: "70k+", - description: "customers equipped — from DIY to major construction firms", - }, - { - count: "35%", - description: - "uptick in project efficiency with ScrewFast tools and services", - }, - { - count: "15.3%", - description: "reduction in maintenance costs reported by long-term clients", - }, - { - count: "2x", - description: "quicker assembly using innovative fastening solutions", - }, -]; ---
{title} + {subTitle &&

{subTitle}

+ } - { + { testimonials && testimonials.map((testimonial) => ( -
- - -
-

- {testimonial.content} -

-
- -
-
-
- Avatar Description -
-
-
- {testimonial.author} -
-
{testimonial.role}
-
-
-
-
+ )) } - +{ statistics &&
    { statistics.map((stat, index) => ( -
  • -
    - {index === 1 || index === 2 ? ( - - - - - ) : null} - {stat.count} -
    -

    - {stat.description} -

    -
    • + )) }
+ }
diff --git a/src/components/ui/blocks/StatsGrid.astro b/src/components/ui/blocks/StatsGrid.astro new file mode 100644 index 0000000..4fb12ff --- /dev/null +++ b/src/components/ui/blocks/StatsGrid.astro @@ -0,0 +1,38 @@ +--- +const { count, description, index } = Astro.props; + +interface Props { + count: string; + description: string; + index: number; +} +--- + +
  • +
    + { + index === 1 || index === 2 ? ( + + + + + ) : null + } + {count} +
    +

    + {description} +

    +
    • diff --git a/src/pages/index.astro b/src/pages/index.astro index c4c9fac..d3dd9a6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -14,7 +14,7 @@ const avatarSrcs: Array = [ "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-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80", "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", - "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" + "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", ]; --- @@ -38,11 +38,52 @@ const avatarSrcs: Array = [ title="Trusted by Industry Leaders" subTitle="Experience the reliability chosen by industry giants." /> + + - + + + + +