Refactor file structure and enhance security headers

Removed blog and product pages and moved their contents to new blog and product directories, respectively. Added a new 404 error page for invalid routes. Updated server configurations in 'vercel.json' to leverage additional security by adding 'cdnjs.cloudflare.com' to Content-Security-Policy headers.

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/404.astro

@@ -0,0 +1,35 @@
+---
+// Import section components
+import MainLayout from "../layouts/MainLayout.astro";
+import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
+---
+
+<MainLayout
+  title="Page Not Found | 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."
+>
+  <section class="grid h-svh place-content-center">
+    <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
+      <div class="mx-auto max-w-screen-sm text-center">
+        <h1
+          class="text-dark mb-4 text-7xl font-extrabold text-yellow-500 dark:text-yellow-400 lg:text-9xl"
+        >
+          404
+        </h1>
+        <p
+          class="mb-4 text-balance text-3xl font-bold tracking-tight text-neutral-700 dark:text-neutral-300 md:text-4xl"
+        >
+          Oops, this isn't the tool you were looking for!
+        </p>
+
+        <p
+          class="mb-4 text-pretty text-lg text-neutral-600 dark:text-neutral-400"
+        >
+          Don't let this hiccup slow you down. Let's get you back to building
+          your masterpiece.
+        </p>
+        <PrimaryCTA title="Go Back" url="#" />
+      </div>
+    </div>
+  </section>
+</MainLayout>

src/pages/blog/index.astro

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

src/pages/prod.astro

@@ -28,7 +28,7 @@ import { Image } from "astro:assets";
         {productData.main.content}
       </p>
     </div>
-    <div class="flex items-center justify-between">
+    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 items-center justify-between">
       <div id="fadeInUp">
         <h1
           class="block text-4xl font-bold tracking-tighter text-neutral-800 dark:text-neutral-200 sm:text-5xl md:text-6xl lg:text-7xl"
@@ -197,7 +197,7 @@ import { Image } from "astro:assets";
   <!-- End Icon Blocks -->
 
   <div id="tabs-with-card-3" class="hidden" role="tabpanel">
-    <div class="mx-auto mb-12 flex w-full md:mb-28">
+    <div class="mx-auto flex w-full mb-20 md:mb-28">
       <div
         class="relative left-12 top-12 z-10 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
       >
@@ -245,13 +245,13 @@ import { Image } from "astro:assets";
         timeline.to(
           "#fadeInUp",
           { duration: 2, autoAlpha: 1, y: 0, ease: "power2.out" },
-          "-=1",
+          "-=1.2",
         );
 
         timeline.to(
           "#fadeInMoveRight",
           { duration: 2, autoAlpha: 1, x: 0, ease: "power2.out" },
-          "-=1.5",
+          "-=1.2",
         );
 
         timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.5 });
@@ -269,9 +269,9 @@ import { Image } from "astro:assets";
             "dark:bg-white/[.05]",
           );
 
-          const contentId = btn.getAttribute("data-tab-target");
+          const tabId = btn.getAttribute("data-tab-target");
-          if (contentId) {
+          if (tabId) {
-            const contentElement = document.querySelector(contentId);
+            const contentElement = document.querySelector(tabId);
             if (contentElement) {
               contentElement.classList.add("hidden");
             }

src/pages/products/index.astro

@@ -1,11 +1,11 @@
 ---
 // Import section components
-import MainLayout from "../layouts/MainLayout.astro";
+import MainLayout from "../../layouts/MainLayout.astro";
-import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
+import PrimaryCTA from "../../components/ui/buttons/PrimaryCTA.astro";
-import ImgSmall from "../components/ui/images/ImgSmall.astro";
+import ImgSmall from "../../components/ui/images/ImgSmall.astro";
-import ImgWide from "../components/ui/images/ImgWide.astro";
+import ImgWide from "../../components/ui/images/ImgWide.astro";
-import FeaturesStats2 from "../components/FeaturesStats2.astro";
+import FeaturesStats2 from "../../components/FeaturesStats2.astro";
-import TestimonialsSection2 from "../components/TestimonialsSection2.astro";
+import TestimonialsSection2 from "../../components/TestimonialsSection2.astro";
 
 import product1 from "../images/product-image-1.avif";
 import product2 from "../images/product-image-2.avif";

vercel.json

@@ -5,7 +5,7 @@
         "headers": [
           {
             "key": "Content-Security-Policy",
-            "value": "default-src 'self'; base-uri 'self'; form-action 'self'; frame-src 'self'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://images.unsplash.com; connect-src 'self'; object-src 'none'; upgrade-insecure-requests; block-all-mixed-content"
+            "value": "default-src 'self'; base-uri 'self'; form-action 'self'; frame-src 'self'; frame-ancestors 'self'; script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://images.unsplash.com; connect-src 'self'; object-src 'none'; upgrade-insecure-requests; block-all-mixed-content"
           },
           {
             "key": "Permissions-Policy",