Add "Insights" category and related components

A new category called "Insights" has been added to the blog. New components such as individual insights page layout and individual insights card have been added. The new components also include astro content files for individual insight articles. This provides users with more in-depth information and can potentially increase user engagement.

src/components/ui/cards/CardInsight.astro

@@ -0,0 +1,33 @@
+---
+import { Image } from "astro:assets";
+
+import type { CollectionEntry } from "astro:content";
+
+const { insightEntry } = Astro.props;
+
+interface Props {
+    insightEntry: CollectionEntry<"insights">;
+}
+---
+
+ <a class="group outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none" href={`/insights/${insightEntry.slug}/`}>
+    <div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
+      <Image class="size-full absolute top-0 start-0 object-cover group-hover:scale-105 transition duration-500 ease-in-out rounded-xl" src={insightEntry.data.cardImage}
+    alt={insightEntry.data.cardImageAlt}
+    draggable={"false"}
+    format={"avif"} />
+    </div>
+
+    <div class="mt-7">
+      <h3 class="text-xl font-bold text-neutral-800 group-hover:text-neutral-600 dark:text-neutral-200 dark:group-hover:text-neutral-400">
+        {insightEntry.data.title}  
+      </h3>
+      <p class="mt-3 text-neutral-600 dark:text-neutral-400">
+      {insightEntry.data.description}
+      </p>
+      <p class="mt-5 inline-flex items-center gap-x-1 text-[#fa5a15] dark:text-[#fb713b] decoration-2 group-hover:underline font-medium">
+        Read more
+        <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      </p>
+    </div>
+  </a>

src/components/ui/cards/CardRelated.astro

@@ -0,0 +1,35 @@
+---
+import { Image } from "astro:assets";
+
+import { formatDate } from "../../../utils";
+import type { CollectionEntry } from "astro:content";
+
+const { blogEntry } = Astro.props;
+
+interface Props {
+  blogEntry: CollectionEntry<"blog">;
+}
+---
+
+<a
+  class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+  href="#"
+>
+  <div>
+    <Image
+      class="aspect-video rounded-xl"
+      src={blogEntry.data.cardImage}
+      alt={blogEntry.data.cardImageAlt}
+      draggable={"false"}
+      format={"avif"}
+    />
+    <h3
+      class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-[#fa5a15] dark:text-neutral-300 dark:group-hover:text-neutral-50"
+    >
+      {blogEntry.data.title}
+    </h3>
+    <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
+      {formatDate(blogEntry.data.pubDate)}
+    </p>
+  </div></a
+>

src/content/insights/insight-1.md

@@ -0,0 +1,12 @@
+---
+title: "The Future of Construction Technology"
+description: "Explore ScrewFast's pioneering role in revolutionizing construction through advanced technology and innovative solutions."
+cardImage: "../../images/insights/insight-1.avif"
+cardImageAlt: "Top view mechanical tools arrangement"
+contents: [
+        "As technology continues to evolve, so too does the construction industry. From advanced robotics to augmented reality, the possibilities for innovation are endless. At ScrewFast, we're at the forefront of this technological revolution, developing cutting-edge tools and solutions to drive the industry forward.",
+        "Our range of hardware tools combines precision engineering with user-centric design, ensuring maximum productivity on every job site. From power drills to advanced fastening solutions, ScrewFast's tools are built to withstand the rigors of construction while streamlining your workflow.",
+        "Another area of focus for us is in data analytics. By harnessing the power of data, we're able to provide valuable insights into project performance, resource utilization, and more. This allows our clients to make informed decisions that optimize efficiency and drive success.",
+        "Looking ahead, we see even greater opportunities for innovation in areas like sustainable construction and modular design. By embracing new technologies and pushing the boundaries of what's possible, ScrewFast is committed to shaping the future of the construction industry for the better."
+]
+---

src/content/insights/insight-2.md

@@ -0,0 +1,12 @@
+---
+title: "The Importance of Collaboration"
+description: "Explore how collaboration is central to ScrewFast's construction approach, driving effective communication and teamwork to achieve outstanding outcomes."
+cardImage: "../../images/insights/insight-2.avif"
+cardImageAlt: "Top view mechanical tools arrangement"
+contents: [
+        "Construction projects are complex undertakings that require collaboration and coordination among various stakeholders. From architects and engineers to contractors and suppliers, effective collaboration is essential for success.",
+        "At ScrewFast, we understand the importance of collaboration, which is why we prioritize communication and teamwork in everything we do. Whether it's working closely with our clients to understand their needs or partnering with other industry professionals to deliver comprehensive solutions, collaboration is at the heart of our approach.",
+        "But collaboration isn't just about working together—it's also about sharing knowledge and expertise. That's why we're committed to providing valuable resources and support to our clients, empowering them to make informed decisions and achieve their goals.",
+        "By fostering a culture of collaboration, we're able to tackle even the most complex challenges and deliver exceptional results. Together, we can build a better future for the construction industry."
+]
+---

src/content/insights/insight-3.md

@@ -0,0 +1,13 @@
+---
+title: "The Impact of Sustainable Practices"
+description: "Discover how ScrewFast is leading the charge in promoting sustainability within the construction industry"
+cardImage: "../../images/insights/insight-3.avif"
+cardImageAlt: "Top view mechanical tools arrangement"
+contents: [
+        "With growing concerns about climate change and environmental sustainability, the construction industry is facing increasing pressure to adopt more eco-friendly practices. At ScrewFast, we're committed to doing our part to minimize our environmental footprint and promote sustainability in everything we do.",
+        "One way we're addressing this is through our selection of materials and manufacturing processes. We prioritize sustainable materials and practices whenever possible, ensuring that our products are not only durable and reliable but also environmentally friendly.",
+        "Additionally, we're exploring innovative solutions for reducing waste and conserving resources on construction sites. From modular construction techniques to recycling and repurposing materials, we're constantly seeking ways to minimize our impact on the planet.",
+        "But perhaps most importantly, we're committed to raising awareness about the importance of sustainability in the construction industry. Through education and advocacy, we're working to inspire change and encourage others to join us in building a more sustainable future.",
+        "By embracing sustainable practices, we're not only protecting the planet for future generations but also creating healthier, more resilient communities for everyone."
+]
+---

src/pages/insights/[...slug].astro

@@ -0,0 +1,59 @@
+---
+// Import section components
+import MainLayout from "../../layouts/MainLayout.astro";
+import AvatarBlogLarge from "../../components/ui/avatars/AvatarBlogLarge.astro";
+import { Image } from "astro:assets";
+import { capitalize, formatDate } from "../../utils";
+import { getCollection } from "astro:content";
+
+
+export async function getStaticPaths() {
+  const insightPosts = await getCollection("insights");
+  return insightPosts.map((post) => ({
+    params: { slug: post.slug },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+
+---
+
+<MainLayout
+  title={post.data.title + " | 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="py-6 sm:py-8 lg:py-12">
+    <div class="mx-auto max-w-screen-xl px-4 md:px-8">
+      <div class="grid gap-8 md:grid-cols-2 lg:gap-12">
+        <div>
+          <div class="h-64 overflow-hidden rounded-lg shadow-lg md:h-auto">
+            <Image
+                  class="h-full w-full object-cover object-center"
+                  src={post.data.cardImage}
+                  alt={post.data.cardImageAlt}
+                  draggable={"false"}
+                  format={"avif"}
+                />
+          </div>
+        </div>
+  
+        <div class="md:pt-8">
+          
+          <h1 class="mb-4 text-center text-2xl font-bold text-neutral-800 dark:text-neutral-200 text-balance sm:text-3xl md:mb-6 md:text-left">{post.data.title}</h1>
+  <div class="space-y-8">
+          {
+            post.data.contents.map((content) =>
+              
+                  <p class="text-pretty text-lg text-neutral-700 dark:text-neutral-300">
+                    {content}
+                  </p>
+               )
+          }
+          </div>
+  </div>
+      </div>
+    </div>
+  </div>
+
+</MainLayout>