Update testimonials and improve code readability

Refactored the image URL in testimonials and reduced redundancy in the FeaturesStats and accordion components, enhancing code readability. Also, implemented dynamic id generation in the FAQ component, improving scalability and maintainability. Added new pages to the website and updated the meta information, improving SEO.

src/components/FAQ.astro

@@ -1,55 +1,42 @@
 ---
-// import necessary dependencies
+
 import AccordionItem from "./ui/blocks/AccordionItem.astro";
 
-/* `subTitle` variable used to customise the sub-heading text. */
+
 const subTitle: string =
   "Ask us anything about our brand and products, and get factual responses.";
 
-/*
+// Define a helper function to generate ids
-  In the above, the subTitle attribute is a variables part of the FAQ component.
+const makeId = (base, index) => `${base}${index + 1}`;
-*/
 
 const faqs = [
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-one",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-one",
     heading: "What types of tools are included in the Starter Kit?",
     content:
       "The Starter Kit features essential hand and power tools for diverse DIY projects, including hammers, drills, screwdrivers, and a variety of fasteners. It's a curated selection to help beginners and experienced DIYers alike tackle most home improvement tasks.",
   },
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-two",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-two",
     heading: "Can I upgrade from the Starter Kit to the Professional Toolbox?",
     content:
       "Absolutely! You can upgrade to the Professional Toolbox at any time to access a wider range of high-quality tools, enjoy priority customer support, and receive exclusive content. Contact our support team for a seamless transition.",
   },
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-three",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-three",
     heading:
       "What discounts are available for bulk orders through the Professional Toolbox plan?",
     content:
       "Professional Toolbox members are entitled to exclusive discounts on bulk orders, the percentage of which may vary depending on the order volume. Get in touch with us to discuss your needs, and we'll provide a tailored discount structure.",
   },
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-four",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-four",
     heading: "What kind of customer support can I expect?",
     content:
       "All our customers receive dedicated email support. With the Starter Kit, you'll receive our standard support, while the Professional Toolbox plan upgrades you to priority support, meaning faster response times and specialized assistance.",
   },
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-five",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-five",
     heading: "How current are the online resources and tutorials?",
     content:
       "We regularly update our online resources and tutorials to reflect the latest trends in DIY and construction, as well as introductions to new tools and techniques. Our material aims to be comprehensive and user-friendly for all skill levels.",
   },
   {
-    id: "hs-basic-with-title-and-arrow-stretched-heading-six",
-    collapseId: "hs-basic-with-title-and-arrow-stretched-collapse-six",
     heading:
       "Does ScrewFast offer services for large-scale construction projects?",
     content:
@@ -77,7 +64,13 @@ const faqs = [
       <div
         class="hs-accordion-group divide-y divide-neutral-200 dark:divide-neutral-700"
       >
-        {faqs.map((faq, i) => <AccordionItem {...faq} first={i === 0} />)}
+        {faqs.map((question, i) => {
+          // Generate ids dynamically
+          let id = makeId("hs-basic-with-title-and-arrow-stretched-heading-", i);
+          let collapseId = makeId("hs-basic-with-title-and-arrow-stretched-collapse", i);
+
+          return <AccordionItem {...question} id={id} collapseId={collapseId} first={i === 0} />
+        })}
       </div>
     </div>
   </div>

src/components/FeaturesStats.astro

@@ -53,19 +53,18 @@ const stats: Stat[] = [
         title="96%"
         subTitle="of our clients rate their experience with ScrewFast as exceptional"
       />
-
+    </div>
+    <div
+      class="relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-neutral-300 lg:before:dark:bg-neutral-700"
+    >
       <div
-        class="relative lg:col-span-8 lg:before:absolute lg:before:-start-12 lg:before:top-0 lg:before:h-full lg:before:w-px lg:before:bg-neutral-300 lg:before:dark:bg-neutral-700"
+        class="grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3"
       >
-        <div
+        {
-          class="grid grid-cols-2 gap-6 sm:gap-8 md:grid-cols-4 lg:grid-cols-3"
+          stats.map((stat) => (
-        >
+            <StatsSmall title={stat.stat} subTitle={stat.description} />
-          {
+          ))
-            stats.map((stat) => (
+        }
-              <StatsSmall title={stat.stat} subTitle={stat.description} />
-            ))
-          }
-        </div>
       </div>
     </div>
   </div>

src/components/HeroSection2.astro

@@ -9,11 +9,12 @@ const title: string = "Let's Build Together";
 // Sub-heading text
 const subTitle: string =
   "ScrewFast is an open-source template, meticulously crafted with Astro, Tailwind CSS, and Preline UI frameworks.";
-
 ---
 
 <div class="relative mx-auto max-w-[85rem] px-4 pb-24 pt-10 sm:px-6 lg:px-8">
-  <div class="absolute top-[55%] left-0 md:top-[20%] xl:left-[10%] xl:top-[25%] scale-90">
+  <div
+    class="absolute left-0 top-[55%] scale-90 md:top-[20%] xl:left-[10%] xl:top-[25%]"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="64"
@@ -85,7 +86,9 @@ const subTitle: string =
         d="M10.5 19H9M15 19h-1.5"></path>
     </svg>
   </div>
-  <div class="absolute bottom-[5%] left-[60%] xl:bottom-[15%] xl:left-[35%] scale-[.6]">
+  <div
+    class="absolute bottom-[5%] left-[60%] scale-[.6] xl:bottom-[15%] xl:left-[35%]"
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="64"
@@ -119,7 +122,9 @@ const subTitle: string =
   </div>
 
   <div class="mx-auto mt-5 max-w-3xl text-center">
-    <p class="text-lg text-neutral-600 dark:text-neutral-400">{subTitle}</p>
+    <p class="text-pretty text-lg text-neutral-600 dark:text-neutral-400">
+      {subTitle}
+    </p>
   </div>
 
   <div class="mt-8 flex justify-center gap-3">

src/components/Meta.astro

@@ -1,10 +1,18 @@
 ---
+// Assign a description using the `meta` prop passed from the parent component,
+// `meta` is used as a variable on each individual page by passing it as a prop to this component.
+// For example, you can pass a meta description to the MainLayout component like this: <MainLayout title="Page title" meta="Page description"/>
+const { meta: description } = Astro.props;
+
+interface Props {
+    meta?: string;
+}
+
 // Customize the following metadata for your landing page
 
 const title: string = "ScrewFast"; // Replace with your website title
 const ogTitle: string = "ScrewFast: Hardware Tools & Construction Services"; // Replace with your Open Graph title
 const author:string = "Emil Gulamov" // Replace with the author's name
-const description:string = "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."; // Replace with your site description
 const ogDescription: string = "Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!"; // Replace with your site description for social media
 const URL:string = "https://screw-fast.vercel.app"; // Replace with your website URL
 const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replace with the URL to your social media image

src/components/TestimonialsSection.astro

@@ -23,7 +23,7 @@ const testimonials: Testimonial[] = [
     author: "Samantha Ruiz",
     role: "Chief Operating Officer | ConstructIt Inc.",
     avatarSrc:
-      "https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
+      "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",
   },
 ];
 

src/components/ui/avatars/Avatar.astro

@@ -1,9 +1,9 @@
 ---
-const { src, alt = "Image Description" } = Astro.props;
+const { src, alt } = Astro.props;
 
 interface Props {
-  src?: string;
+  src: string;
-  alt?: string;
+  alt: string;
 }
 ---
 

src/components/ui/blocks/AccordionItem.astro

@@ -8,11 +8,18 @@ interface Props {
   content: string;
   first?: boolean;
 }
+const ACCORDION_CLASS_DEFAULT = "hs-accordion pb-3 active";
+const ACCORDION_CLASS_COLLAPSED = "hs-accordion pt-6 pb-3";
+const ACCORDION_CONTENT_CLASS = "hs-accordion-content w-full overflow-hidden transition-[height] duration-300";
+function getAccordionClass(first: boolean) {
+  return first ? ACCORDION_CLASS_DEFAULT : ACCORDION_CLASS_COLLAPSED;
+}
+const SVG_PARAMS = { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "stroke": "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" };
 ---
 
 <div
-  class=`${first ? "hs-accordion pb-3 active" : "hs-accordion pt-6 pb-3"}`
+    class={getAccordionClass(first)}
-  id={id}
+    id={id}
 >
   <button
     class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-bold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
@@ -21,35 +28,19 @@ interface Props {
     {heading}
     <svg
       class="block h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:hidden dark:text-neutral-400"
-      width="24"
+      {...SVG_PARAMS}
-      height="24"
+    ><path d="m6 9 6 6 6-6"></path></svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
     >
     <svg
       class="hidden h-5 w-5 flex-shrink-0 text-neutral-600 group-hover:text-neutral-500 hs-accordion-active:block dark:text-neutral-400"
-      width="24"
+      {...SVG_PARAMS}
-      height="24"
+    ><path d="m18 15-6-6-6 6"></path></svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg
     >
   </button>
   <div
-    aria-labelledby={id}
+      aria-labelledby={id}
-    class=`${first
+      class={`${first ? ACCORDION_CONTENT_CLASS : 'hidden ' + ACCORDION_CONTENT_CLASS}`}
-      ? "hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
+      id={collapseId}
-      : "hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"}`
-    id={collapseId}
-    class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
-    aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
   >
     <p class="text-pretty text-neutral-600 dark:text-neutral-400">
       {content}

src/components/ui/blocks/LeftSection.astro

@@ -20,9 +20,10 @@ interface Props {
   class="mx-auto max-w-[85rem] items-center gap-8 px-4 py-10 sm:px-6 sm:py-16 md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 lg:px-8 lg:py-14 xl:gap-16 2xl:max-w-full"
 >
   <Image
-    class="w-full rounded-lg"
+    class="w-full rounded-xl"
     src={img}
     alt={imgAlt}
+    draggable={"false"}
     format={"avif"}
   />
   <div class="mt-4 md:mt-0">

src/components/ui/blocks/RightSection.astro

@@ -58,15 +58,17 @@ interface Props {
     ) : (
       <div class="mt-8 grid grid-cols-2 gap-4">
         <Image
-          class="w-full rounded-lg"
+          class="w-full rounded-xl"
           src={imgOne}
           alt={imgOneAlt}
+          draggable={"false"}
           format={"avif"}
         />
         <Image
-          class="mt-4 w-full rounded-lg lg:mt-10"
+          class="mt-4 w-full rounded-xl lg:mt-10"
           src={imgTwo}
           alt={imgTwoAlt}
+          draggable={"false"}
           format={"avif"}
         />
       </div>

src/components/ui/blocks/StatsBig.astro

@@ -9,7 +9,6 @@ interface Props {
 <div class="lg:pe-6 xl:pe-12">
     <p class="text-6xl font-bold leading-10 text-[#fa5a15] dark:text-[#fb713b]">
       {title}
-      
     </p>
     <p class="mt-2 sm:mt-3 text-neutral-600 dark:text-neutral-400">{subTitle}</p>
-  </div>
+</div>

src/components/ui/blocks/StatsSmall.astro

@@ -6,7 +6,6 @@ interface Props {
   subTitle: string;
 }
 ---
-
 <div>
   <p class="text-3xl font-bold text-[#fa5a15] dark:text-[#fb713b]">{title}</p>
   <p class="mt-1 text-neutral-600 dark:text-neutral-400">{subTitle}</p>

src/components/ui/buttons/GithubBtn.astro

@@ -11,6 +11,7 @@ interface Props {
   class="group inline-flex items-center justify-center gap-x-3 rounded-full border border-transparent bg-yellow-400 px-4 py-3 text-center text-sm font-medium text-neutral-700 outline-none ring-zinc-500 transition duration-300 hover:shadow-2xl hover:shadow-yellow-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
   href={url}
   target="_blank"
+  rel="noopener noreferrer"
 >
   <svg
     class="w-4.5 h-4.5 tarnsition flex-shrink-0 text-neutral-700 duration-300 group-hover:-translate-y-1"

src/components/ui/buttons/PrimaryCTA.astro

@@ -1,9 +1,10 @@
 ---
-const { title, url } = Astro.props;
+const { title, url, noArrow } = Astro.props;
 
 interface Props {
   title?: string;
   url?: string;
+  noArrow?: boolean;
 }
 ---
 
@@ -12,15 +13,16 @@ interface Props {
   href={url}
 >
   {title}
-  <svg
+  {noArrow ? null : (
-    class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
+    <svg
-    width="24"
+      class="h-4 w-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
-    height="24"
+      width="24"
-    viewBox="0 0 24 24"
+      height="24"
-    fill="none"
+      viewBox="0 0 24 24"
-    stroke="currentColor"
+      fill="none"
-    stroke-width="2"
+      stroke="currentColor"
-    stroke-linecap="round"
+      stroke-width="2"
-    stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
+      stroke-linecap="round"
-  >
+      stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
+    >) }
 </a>

src/components/ui/links/FooterSocialLink.astro

@@ -10,6 +10,7 @@ interface Props {
   class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
   href={url}
   target="_blank"
+  rel="noopener noreferrer"
 >
   <slot />
 </a>

src/layouts/MainLayout.astro

@@ -3,16 +3,17 @@ import Meta from "../components/Meta.astro";
 import Navbar from "../components/Navbar.astro";
 import FooterSection from "../components/FooterSection.astro";
 
-const { title = "ScrewFast" } = Astro.props;
+const { title = "ScrewFast", meta } = Astro.props;
 
 interface Props {
   title?: string;
+  meta?: string;
 }
 ---
 
-<html lang="en" class="scrollbar-hide">
+<html lang="en" class="scrollbar-hide scroll-pt-16">
   <head>
-    <Meta />
+    <Meta meta={meta} />
     <title>{title}</title>
     <script is:inline>
       // This script is to handle theme according to user preference

src/pages/blog.astro

@@ -0,0 +1,7 @@
+---
+// Import section components
+import MainLayout from "../layouts/MainLayout.astro";
+---
+
+<MainLayout title="Blog | ScrewFast">
+</MainLayout>

src/pages/contact.astro

@@ -5,6 +5,6 @@ import MainLayout from "../layouts/MainLayout.astro";
 import ContactSection from "../components/ContactSection.astro";
 ---
 
-<MainLayout>
+<MainLayout title="Contact | ScrewFast" meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.">
   <ContactSection />
 </MainLayout>

src/pages/index.astro

@@ -11,7 +11,7 @@ import PricingSection from "../components/PricingSection.astro";
 import FAQ from "../components/FAQ.astro";
 ---
 
-<MainLayout>
+<MainLayout meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.">
 
   <HeroSection />
   <ClientsSection />

src/pages/products.astro

@@ -0,0 +1,72 @@
+---
+// Import section components
+import MainLayout from "../layouts/MainLayout.astro";
+import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
+import ImgSmall from "../components/ui/images/ImgSmall.astro";
+import ImgWide from "../components/ui/images/ImgWide.astro";
+import FeaturesStats2 from "../components/FeaturesStats2.astro";
+import TestimonialsSection2 from "../components/TestimonialsSection2.astro";
+
+import product1 from "../images/product-image-1.avif";
+import product2 from "../images/product-image-2.avif";
+import product3 from "../images/product-image-3.avif";
+import product4 from "../images/product-image-4.avif";
+
+const title: string = "Products";
+
+const subTitle: string =
+  "Explore the durability and precision of ScrewFast tools, designed for both professionals and enthusiasts. Each of our products is crafted with precision and built to last, ensuring you have the right tool for every job.";
+---
+
+<MainLayout title="Products | ScrewFast" meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.">
+  <div
+    class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
+    <div class="mb-4 flex items-center justify-between gap-8 sm:mb-8 md:mb-12">
+      <div class="flex items-center gap-12">
+        <h1
+          class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+        >
+          {title}
+        </h1>
+
+        <p
+          class="hidden max-w-screen-sm text-pretty text-neutral-600 dark:text-neutral-400 md:block"
+        >
+          {subTitle}
+        </p>
+      </div>
+      <PrimaryCTA title="Customer Stories" url="#testimonials" noArrow={true} />
+    </div>
+
+    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:gap-6 xl:gap-8">
+      <ImgSmall
+        url="#"
+        title="Machine Screws"
+        src={product1}
+        alt="Mockup box of machine screws"
+      />
+      <ImgWide
+        url="#"
+        title="Assorted Screw Set"
+        src={product2}
+        alt="Mockup box of assorted screw set"
+      />
+      <ImgWide
+        url="#"
+        title="Tap Bolts and Nuts"
+        src={product3}
+        alt="Mockup box of tap bolts and nuts"
+      />
+      <ImgSmall
+        url="#"
+        title="Hex Bolts"
+        src={product4}
+        alt="Mockup box of hex bolts"
+      />
+    </div>
+  </div>
+
+  <FeaturesStats2 />
+  <TestimonialsSection2 />
+</MainLayout>

src/pages/services.astro

@@ -16,7 +16,7 @@ import progressBuilding from "../images/progress-building.avif";
 import underConstruction from "../images/under-construction.avif";
 ---
 
-<MainLayout>
+<MainLayout title="Services | ScrewFast" meta="ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability.">
   <MainSection
     title="Uniting Expertise with Your Vision"
     subTitle="At ScrewFast, we take pride in providing comprehensive solutions and exceptional service in the hardware and construction industry. Our experienced team is dedicated to supporting your project from inception to completion with a range of specialized services."