From 4c434628e1cadf0fcdf63ece40461a6506375558 Mon Sep 17 00:00:00 2001 From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com> Date: Mon, 12 Feb 2024 04:13:57 +0400 Subject: [PATCH] Create Testimonials component with dynamic content This commit adds a new Testimonials component for the ScrewFast project. The component includes the implementation of `Testimonial` and `StatProps` data types, which are used to display dynamic content. Testimonials and statistics are provided through arrays, which are then mapped to generate respective page elements. --- src/components/Testimonials.astro | 158 ++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 src/components/Testimonials.astro diff --git a/src/components/Testimonials.astro b/src/components/Testimonials.astro new file mode 100644 index 0000000..c5c33fb --- /dev/null +++ b/src/components/Testimonials.astro @@ -0,0 +1,158 @@ +--- +/* `title` variable used to customise the main heading. */ +const title: string = "Fast-Track Your Projects"; + +/* `subTitle` variable used to customise the sub-heading text. */ +const subTitle: string = + "At ScrewFast, we ensure a swift start with instant account setup. Experience the speed of construction redefined."; + +/* TypeScript type for testimonials. */ +type Testimonial = { + content: string; + author: string; + role: string; + avatarSrc: string; +}; + +/* An array of testimonials, each being an object that conforms to the above `Testimonial` type. */ +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-1542206395-9feb3edaa68d?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + }, +]; + +/* TypeScript type for stats. */ +type StatProps = { + count: string; + description: string; +}; + +/* An array of stats, each being an object that conforms to the above `StatProps` type. */ +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} +

+
+ + + { + testimonials.map((testimonial) => ( +
+ + +
+

+ {testimonial.content} +

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

    + {stat.description} +

    +
    • + )) + } +
+
+
+
+