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." /> + + - + + + + +