Refactor code for dynamic content generation

This commit refactors the code to enable dynamic content generation for three components: FeaturesStats, Meta, and services pages. The FeaturesStats component now receives statistics data through its props, enabling easier content updates. Similar changes have been made in Meta to use site URL from Astro configuration file and dynamically generate image URLs. The services pages code has been refactored to generate articles using an array, making it more maintainable and reusable. This improves the flexibility and scalability of the codebase.

src/components/Meta.astro

@@ -25,8 +25,8 @@ const ogTitle: string = "ScrewFast: Hardware Tools & Construction Services"; //
 const author: string = "Emil Gulamov"; // Set the author's name
 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!"; // Set the Open Graph description
-const URL: string = "https://screwfast.uk"; // Set the website URL
+const URL: string = `${Astro.site}`; // Set the website URL in astro.config.mjs
-const socialImage: string = "https://screwfast.uk/social.png"; // Set the URL for the social media image
+const socialImage: string = `${Astro.site}/social.png`; // Set the path for the social media image
 ---
 
 <!-- Inject structured data into the page if provided. This data is formatted as JSON-LD, a method recommended by Google for structured data pass:

src/components/sections/features/FeaturesStats.astro

@@ -3,11 +3,15 @@
 import StatsBig from "../../ui/blocks/StatsBig.astro";
 import StatsSmall from "../../ui/blocks/StatsSmall.astro";
 // Get values from Astro's builtin props
-const { title, subTitle } = Astro.props;
+const { title, subTitle, stats, mainStatTitle, mainStatSubTitle } = Astro.props;
+
 // TypeScript interface for the properties
 interface Props {
   title: string;
-  subTitle: string;
+  subTitle?: string;
+  mainStatTitle: string;
+  mainStatSubTitle: string;
+  stats?: Stat[];
 }
 
 // TypeScript type for the statistics
@@ -15,22 +19,6 @@ type Stat = {
   stat: string;
   description: string;
 };
-
-// An array of statistics, each being an object that conforms to the above `Stat` type
-const stats: Stat[] = [
-  {
-    stat: "99.8%",
-    description: "project completion rate",
-  },
-  {
-    stat: "5,000+",
-    description: "successful installations",
-  },
-  {
-    stat: "85%",
-    description: "client growth year-over-year",
-  },
-];
 ---
 
 <section
@@ -44,22 +32,25 @@ const stats: Stat[] = [
       {title}
     </h2>
     <!-- Subtitle -->
+    {subTitle &&
     <p
       class="mb-16 max-w-prose text-pretty font-light text-neutral-600 dark:text-neutral-400 sm:text-xl"
     >
       {subTitle}
     </p>
+    }
   </div>
   <!-- Grid container for statistics -->
   <div class="grid items-center gap-6 lg:grid-cols-12 lg:gap-12">
     <!-- First grid item, showing a big statistics -->
     <div class="lg:col-span-4">
       <StatsBig
-        title="96%"
+        title={mainStatTitle}
-        subTitle="of our clients rate their experience with ScrewFast as exceptional"
+        subTitle={mainStatSubTitle}
       />
     </div>
     <!-- Second grid item, showing multiple small statistics -->
+    {stats &&
     <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"
     >
@@ -74,5 +65,6 @@ const stats: Stat[] = [
         }
       </div>
     </div>
+    }
   </div>
 </section>

src/pages/services.astro

@@ -15,6 +15,81 @@ import aerialView from "../images/aerial-view.avif";
 import usingTools from "../images/using-tools.avif";
 import progressBuilding from "../images/progress-building.avif";
 import underConstruction from "../images/under-construction.avif";
+
+interface Article {
+  isRightSection: boolean;
+  title: string;
+  subTitle: string;
+  btnExists?: boolean;
+  btnTitle?: string;
+  btnURL?: string;
+  single?: boolean;
+  img?: any;
+  imgAlt?: string;
+  imgOne?: any;
+  imgOneAlt?: string;
+  imgTwo?: any;
+  imgTwoAlt?: string;
+}
+
+const articles: Article[] = [
+  {
+    isRightSection: true,
+    title: "Delivering Expert Guidance",
+    subTitle:
+      "Embarking on a construction project can be overwhelming. With our professional consultation services, we guide you through every stage, ensuring you make informed decisions. Whether you are a DIY enthusiast or a skilled contractor, our experts are on hand to offer tailored advice on product selection, project scope, and compliance with local regulations.",
+    single: false,
+    imgOne: blueprints,
+    imgOneAlt: "Blueprints and digital tablet with construction plans.",
+    imgTwo: personWorking,
+    imgTwoAlt: "Person working in the office",
+  },
+  {
+    isRightSection: false,
+    title: "Transforming Designs into Reality",
+    subTitle:
+      "Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory.",
+    img: beforeAfter,
+    imgAlt: "Construction site before and after",
+    btnExists: true,
+    btnTitle: "Learn More",
+    btnURL: "#",
+  },
+  {
+    isRightSection: true,
+    title: "Navigating Projects with Professional Oversight",
+    subTitle:
+      "Effective project management is at the heart of any successful build. ScrewFast provides thorough planning and robust management services that keep your project on time and within budget. Let us handle the complexities of workflow coordination, resource allocation, and stakeholder communication while you focus on your vision.",
+    single: false,
+    imgOne: constructionWorkers,
+    imgOneAlt: "Construction workers orchestrating a project",
+    imgTwo: aerialView,
+    imgTwoAlt: "Aerial view of managed construction",
+  },
+  {
+    isRightSection: false,
+    title: "Ensuring Long-lasting Performance",
+    subTitle:
+      "Our commitment to your project doesn't end at completion. ScrewFast offers ongoing maintenance and support services to ensure your construction's longevity and performance. From regular check-ups to emergency assistance, our responsive team is there to provide seamless support.",
+    img: usingTools,
+    imgAlt:
+      "Man in orange and black vest wearing white helmet holding yellow and black power tool",
+  },
+  {
+    isRightSection: true,
+    title: "Crafting Bespoke Strategies for Unique Challenges",
+    subTitle:
+      "For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward.",
+    single: false,
+    imgOne: progressBuilding,
+    imgOneAlt: "In progress building structure",
+    imgTwo: underConstruction,
+    imgTwoAlt: "Brown and gray building under construction",
+    btnExists: true,
+    btnTitle: "Read more",
+    btnURL: "#",
+  },
+];
 ---
 
 <MainLayout title="Services | ScrewFast">
@@ -34,51 +109,53 @@ import underConstruction from "../images/under-construction.avif";
   RightSection can also conditionally render one or two images based on the 'single' property.
   If 'single' is true, it displays one image, otherwise it displays two.
   -->
+  {
+    articles.map((article, index) => {
+      return article.isRightSection ? (
         <RightSection
-    title="Delivering Expert Guidance"
+          title={article.title}
-    subTitle="Embarking on a construction project can be overwhelming. With our professional consultation services, we guide you through every stage, ensuring you make informed decisions. Whether you are a DIY enthusiast or a skilled contractor, our experts are on hand to offer tailored advice on product selection, project scope, and compliance with local regulations."
+          subTitle={article.subTitle}
-    imgOne={blueprints}
+          single={article.single}
-    imgOneAlt={"Blueprints and digital tablet with construction plans."}
+          imgOne={article.imgOne}
-    imgTwo={personWorking}
+          imgOneAlt={article.imgOneAlt}
-    imgTwoAlt={"Person working in the office"}
+          imgTwo={article.imgTwo}
+          imgTwoAlt={article.imgTwoAlt}
+          btnExists={article.btnExists}
+          btnTitle={article.btnTitle}
+          btnURL={article.btnURL}
         />
+      ) : (
         <LeftSection
-    title="Transforming Designs into Reality"
+          title={article.title}
-    subTitle="Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory."
+          subTitle={article.subTitle}
-    btnExists={true}
+          img={article.img}
-    btnTitle="Learn More"
+          imgAlt={article.imgAlt}
-    btnURL="#"
+          btnExists={article.btnExists}
-    img={beforeAfter}
+          btnTitle={article.btnTitle}
-    imgAlt={"Construction site before and after"}
+          btnURL={article.btnURL}
-  />
-  <RightSection
-    title="Navigating Projects with Professional Oversight"
-    subTitle="Effective project management is at the heart of any successful build. ScrewFast provides thorough planning and robust management services that keep your project on time and within budget. Let us handle the complexities of workflow coordination, resource allocation, and stakeholder communication while you focus on your vision."
-    imgOne={constructionWorkers}
-    imgOneAlt={"Construction workers orchestrating a project"}
-    imgTwo={aerialView}
-    imgTwoAlt={"Aerial view of managed construction"}
-  />
-  <LeftSection
-    title="Ensuring Long-lasting Performance"
-    subTitle="Our commitment to your project doesn't end at completion. ScrewFast offers ongoing maintenance and support services to ensure your construction's longevity and performance. From regular check-ups to emergency assistance, our responsive team is there to provide seamless support."
-    img={usingTools}
-    imgAlt={"Man in orange and black vest wearing white helmet holding yellow and black power tool"}
-  />
-  <RightSection
-    title="Crafting Bespoke Strategies for Unique Challenges"
-    subTitle="For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward."
-    btnExists={true}
-    btnTitle="Read more"
-    btnURL="#"
-    imgOne={progressBuilding}
-    imgOneAlt={"In progress building structure"}
-    imgTwo={underConstruction}
-    imgTwoAlt={"Brown and gray building under construction"}
         />
+      );
+    })
+  }
   <!--FeaturesStats section showcases essential stats valuable to users-->
   <FeaturesStats
     title="By the Numbers"
     subTitle="Our commitment to quality and reliability is evident in every project we undertake. At ScrewFast, we are dedicated to delivering industry-leading services that ensure your construction projects are built to last."
+    mainStatTitle="96%"
+    mainStatSubTitle="of our clients rate their experience with ScrewFast as exceptional"
+    stats={[
+      {
+        stat: "99.8%",
+        description: "project completion rate",
+      },
+      {
+        stat: "5,000+",
+        description: "successful installations",
+      },
+      {
+        stat: "85%",
+        description: "client growth year-over-year",
+      },
+    ]}
   />
 </MainLayout>