Update code comments and enhance README documentation

This commit improves the clarity of code comments in several Astro components for better understanding of their functionality. Changes were also made to the 'rounded' class in UI cards for improved visual appearance. In the README file, detailed explanations of project structure, customization process, key features, tools and technologies used, and their roles are provided to enhance project documentation.

README.md

@@ -1,49 +1,48 @@
 # ScrewFast: Simplified Landing & Blog Template
 
-![ScrewFast](https://github.com/mearashadowfax/ScrewFast/assets/125820963/5c6ef8aa-b859-49ce-9468-cf548c33c8fc)
+![ScrewFast](https://github.com/mearashadowfax/ScrewFast/assets/125820963/5c6ef8aa-b859-49ce-9468-cf548c33c8fc.png)
 
-ScrewFast is a landing and blog template crafted with simplicity and ease of use in mind. Designed for small to medium-sized projects, ScrewFast provides a seamless setup experience for developers and content creators alike. It combines the power of [Astro](https://astro.build/), [Tailwind CSS](https://tailwindcss.com/), and [Preline UI](https://preline.co/) to deliver a less complex, yet functional and visually appealing web presence.
+ScrewFast is a landing and blog template crafted with simplicity and ease of use in mind. Designed for small to medium-sized projects, ScrewFast provides a seamless setup experience for developers and content creators alike. This template combines [Astro](https://astro.build/), [Tailwind CSS](https://tailwindcss.com/), and [Preline UI](https://preline.co/) for a functional and aesthetically pleasing web presence.
 
 ## Why Choose ScrewFast?
 
-- **Simplified Architecture:** Whether you're building a portfolio, a company landing page, or a simple blog, ScrewFast's architecture is straightforward and easy to navigate, helping you get your project off the ground quickly.
+- **Simplified Architecture**: Ideal for portfolios, company landing pages, or blogs, ScrewFast offers an easy-to-navigate structure that accelerates project deployment.
-- **Tailored for Smaller Projects:** With a focus on performance and minimal overhead, ScrewFast is ideal for projects that require a clean and professional online presence without the complexity of larger-scale solutions.
+- **Tailored for Smaller Projects**: Prioritizing performance and minimal overhead, this template is perfect for a clean, professional online presence without the complexity.
-- **Customizable and Extensible:** While the core structure of the template prioritizes simplicity, it doesn't compromise on customizability. Tap into the potential of Astro's component-based architecture and Tailwind's utility-first styling to expand the template as needed.
+- **Customizable and Extensible**: Offers the perfect balance between simplicity and customization using Astro's component model and Tailwind's utility styling.
 
 ## Features
 
 - **Astro Framework:** A web framework for building content-driven websites efficiently.
 - **Tailwind CSS:** A utility-first CSS framework for rapid UI development.
-- **Preline UI:** A set of accessible and reusable components that are both attractive and functional.
+- **Preline UI:** An open-source set of prebuilt UI components that enhance aesthetics and functionality.
 - **GSAP Integration:** Smooth, professional-grade animations to captivate your audience.
-- **Markdown Content Collections:** Manage your product and blog content effortlessly with markdown.
+- **Markdown Content Collections:** Easily organize and manage content using Markdown.
-- **SEO-Friendly:** Pages structured for optimal search engine performance.
+- **SEO-Friendly:** Structured for optimal search engine discoverability.
 - **Responsive Design:** Fully responsive layout to ensure your site looks great on all devices.
 
 ## Getting Started
 
-This guide will help you set up the Astro project on your local machine and introduce you to some essential commands for development and deployment.
+This guide will provide you with the necessary steps to set up and familiarize yourself with the Astro project on your local development machine.
 
 ### Installation
 
-To begin, you'll need to install all the dependencies required for the project. Open your terminal, navigate to the project's root directory, and run the following command:
+Start by installing the project dependencies. Open your terminal, navigate to the project's root directory, and execute:
 
 ```bash
 npm install
 ```
 
-This command will install all the dependencies listed in the project's `package.json` file.
+This command will install all the necessary dependencies defined in the `package.json` file.
 
 ### Development Commands
 
-After installing the dependencies, you can use these npm scripts for the development lifecycle of your project:
+With dependencies installed, you can utilize the following npm scripts to manage your project's development lifecycle:
 
-- `npm run dev`: Launches a local server with hot reloading.
+- `npm run dev`: Starts a local development server with hot reloading enabled.
-- `npm run preview`: Previews the build locally.
+- `npm run preview`: Serves your build output locally for preview before deployment.
-- `npm run astro`: Executes Astro CLI commands.
+- `npm run build`: Bundles your site into static files for production.
-- `npm run astro --help`: Provides help information for Astro commands.
 
-Learn more about Astro's CLI by referring to [Astro's documentation](https://docs.astro.build/).
+For detailed help with Astro CLI commands, visit [Astro's documentation](https://docs.astro.build/en/reference/cli-reference/).
 
 ## Deployment
 
@@ -62,42 +61,42 @@ This creates a `dist/` directory with your built site (configurable via [outDir
 To deploy ScrewFast to Vercel, follow these steps:
 
 1. Clone this repository to your GitHub account.
-2. Click the button below to start deploying your forked copy on Vercel:
+2. Click the button below to start deploying your project on Vercel:
 
 ## Project Structure
 
 <details>
 <summary>
-ScrewFast is organized into modular components, content, and layout systems, making development and content management a breeze. Here's a quick overview of the project's directory structure:
+ScrewFast organizes modular components, content, and layouts to streamline development and content management. Expand for a detailed overview of the directory structure:
 </summary>
-<br>
+<br />
 
 ```md
 
 src/
 ├── components/           # Reusable components
 │   ├── Meta.astro        # Meta component for SEO
-│   ├── sections/         # Sectional components for various parts of the website
+│   ├── sections/         # Components for various sections of the website
-│   ├── ThemeIcon.astro   # Theme switcher icon component
+│   ├── ThemeIcon.astro   # Component for toggling light/dark themes
-│   └── ui/               # UI components categorized by their functionality
+│   └── ui/               # UI components categorized by functionality
-├── content/              # Content files in markdown for blog posts, insights, and products
+├── content/              # Markdown files for blog posts, insights, products, and site configuration
-│   ├── blog/             # Blog posts written in markdown
+│   ├── blog/             
-│   ├── insights/         # Insights articles
+│   ├── insights/         
-│   ├── products/         # Product details
+│   ├── products/         
-│   └── config.ts         # Site configuration
+│   └── config.ts         # Contains site-wide configuration options
-├── images/               # Image assets for the website
+├── images/               # Static image assets for use across the website
-├── layouts/              # Layout components
+├── layouts/              # Components defining layout templates
-│   └── MainLayout.astro  # Main layout component
+│   └── MainLayout.astro  # The main wrapping layout for all pages
-├── pages/                # Astro pages representing each website section or view
+├── pages/                # Astro files representing individual pages and website sections
 │   ├── 404.astro         # Custom 404 page
-│   ├── blog/             # Blog listing and post pages
+│   ├── blog/             
-│   ├── contact.astro     # Contact page
+│   ├── contact.astro     
-│   ├── index.astro       # Home page
+│   ├── index.astro       # The landing/home page
-│   ├── insights/         # Insights listing and detail pages
+│   ├── insights/         
-│   ├── products/         # Product listing and detail pages
+│   ├── products/         
-│   ├── robots.txt.ts     # Dynamic generation of robots.txt
+│   ├── robots.txt.ts     # Dynamically generates robots.txt
-│   └── services.astro    # Services offered
+│   └── services.astro    
-└── utils/                # Utility functions
+└── utils/                # Shared utility functions and helpers
 
 ```
 
@@ -107,18 +106,9 @@ src/
 
 <details>
 <summary>
-The `public` directory contains all the static files that your project can serve directly to the browser. Here's a breakdown of the contents within the `public` folder:
+Static files served directly to the browser are within the `public` directory at the root of the project. Expand for the layout:
 </summary>
-<br>
+<br />
-- Favicons and device icons (e.g., `favicon.ico`, `apple-touch-icon.png`)
-- PWA (Progressive Web App) manifest and icons for improved mobile support (e.g., `manifest.webmanifest`, `icon-512.png`)
-- `social.png`: An image for social media sharing previews
-- `scripts`: Third-party libraries and scripts
-  - `gsap`: GreenSock Animation Platform files for creating high-performance animations
-  - `lenis`: Smooth scrolling library for improved scroll interactions
-  - `preline`: Set of UI component scripts from Preline UI
-
-Here's the layout of the `public` directory:
 
 ```md
 
@@ -133,31 +123,145 @@ public/
 ├── maskable_icon_x512.png
 ├── scripts/
 │   └── vendor/
-│       ├── gsap/
+│       ├── gsap/ # Animations powered by GSAP (GreenSock Animation Platform)
 │       │   └── gsap.min.js 
-│       ├── lenis/
+│       ├── lenis/ # Lenis script for smooth scrolling effects
 │       │   └── lenis.js
-│       └── preline/
+│       └── preline/   # Preline UI plugins
 │           ├── accordion/
 │           ├── collapse/
 │           ├── overlay/
 │           └── tabs/
-└── social.png
+└── social.png # Image used for social media sharing previews
 
 ```
 
-When adding or updating icons and favicons, ensure that they match the sizes expected by various devices and that they're referenced correctly in the head of your HTML document.
-
 The scripts in the `public/scripts/vendor` directory are essential for the interactivity and aesthetic features of the website. Do not remove these unless you plan to replace their functionality.
 </details>
 
+## Customization
+
+<details>
+<summary>
+ScrewFast allows for easy customization to suit your specific needs. Here are a couple of ways you can configure components and content:
+</summary>
+
+### Editing Component Variables
+
+Some components have properties defined as TypeScript variables within the component file. Here's an example of customizing the `FeaturesGeneral` component:
+
+```typescript
+// Define the string variables title and subTitle for the main heading and sub-heading text.
+const title: string = "Meeting Industry Demands";
+const subTitle: string =
+  "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";
+```
+
+For collections of content like testimonials or statistics, edit the corresponding array of objects:
+
+```typescript
+// An array of testimonials
+const testimonials: Testimonial[] = [...];
+
+// An array of statistics
+const statistics: StatProps[] = [...];
+```
+
+Modify the content within these arrays to reflect your data.
+
+### Props in Component Instances
+
+You can pass values to props directly in the page files for components used across pages. Here's an example of a `HeroSection` and `ClientsSection` component with inline props:
+
+```html
+<HeroSection
+  subTitle="Top-quality hardware tools and expert construction services for every project need."
+  primaryBtn="Start Exploring"
+  primaryBtnURL="/explore"
+/>
+
+<ClientsSection
+  title="Trusted by Industry Leaders"
+  subTitle="Experience the reliability chosen by industry giants."
+/>
+```
+
+Edit the props such as `title`, `subTitle`, `primaryBtn`, etc., to personalize these sections. Ensure that you maintain the structure and data types of the props.
+
+### Customizing Navigation and Footer Links
+
+Edit the `navigation.ts` file within the `utils` directory to manage navigation bar and footer links:
+
+#### Navigation Bar Links
+
+Edit the `navBarLinks` array to adjust navigation bar links:
+
+```typescript
+// An array of links for the navigation bar
+export const navBarLinks: NavLink[] = [
+  { name: "Home", url: "/" },
+  { name: "Products", url: "/products" },
+  { name: "Services", url: "/services" },
+  { name: "Blog", url: "/blog" },
+  { name: "Contact", url: "/contact" },
+];
+```
+
+Replace `name` with the display text and `url` with the appropriate path to pages on your site.
+
+#### Footer Links
+
+Similarly, adjust the links displayed in the footer by editing the `footerLinks` array:
+
+```typescript
+// An array of links for the footer
+export const footerLinks: FooterLinkSection[] = [
+  {
+    section: "Product",
+    links: [
+      { name: "Tools & Equipment", url: "/tools-equipment" },
+      { name: "Construction Services", url: "/construction-services" },
+      { name: "Pricing", url: "/pricing" },
+    ],
+  },
+  {
+    section: "Company",
+    links: [
+      { name: "About us", url: "/about" },
+      { name: "Blog", url: "/blog" },
+      { name: "Careers", url: "/careers" },
+      { name: "Customers", url: "/customers" },
+    ],
+  },
+];
+```
+
+Each section within the `footerLinks` array represents a group of links. Update the `section` value for the group heading and modify each link's `name` and `url` as needed.
+
+#### Social Media Links
+
+Replace the placeholder URLs in the `socialLinks` object with your social media profiles:
+
+```typescript
+// An object of links for social icons
+export const socialLinks: SocialLinks = {
+  facebook: "#",
+  twitter: "#",
+  github: "#",
+  linkedin: "#",
+  instagram: "#",
+};
+```
+
+Remember to add complete and valid URLs for the navigation to function properly. These customizations will reflect throughout your Astro site, promoting consistency across all pages.
+</details>
+
 ## Integrations and Enhancements
 
 <details>
 <summary>
-ScrewFast leverages the power of Astro and associated integrations to deliver exceptional site performance and a seamless user experience. Here are some notable integrations and enhancements included in the project:
+ScrewFast leverages the power of Astro — a modern, cutting-edge site building framework — and integrates it seamlessly with the utility-first CSS framework TailwindCSS, to deliver exceptional site performance and a seamless user experience. Here are some notable integrations and enhancements included in the project:
 </summary>
-<br>
 
 ### Lenis for Smooth Scrolling
 
@@ -165,7 +269,7 @@ Experience buttery smooth scrolling with [Lenis](https://lenis.studiofreight.com
 
 Here's how we set up Lenis in `src/layouts/MainLayout.astro`:
 
-```html
+```astro
 <script is:inline src="/scripts/vendor/lenis/lenis.js"></script>
 <script is:inline>
   // Script to handle Lenis library settings for smooth scrolling
@@ -201,13 +305,13 @@ html.lenis {
 
 Please note that smooth scrolling can affect accessibility and performance on some devices, so be sure to test it comprehensively across different environments.
 
-If you would like to remove Lenis, just comment out or delete these lines, and the scrolling will return to the default behavior.
+If you would like to remove Lenis and return to the browser's default scrolling behavior, simply comment out or delete these lines from the `MainLayout.astro` file.
 
 ### GSAP Integration
 
  For individual product pages, [GSAP](https://gsap.com/) has been integrated to add engaging animations that execute as soon as the product page loads. You can find and modify the GSAP configuration in the script sections of the product page file located at `src/pages/products/[...slug].astro`:
 
-```html
+```astro
 <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
 <script>
   window.addEventListener("load", (event) => {
@@ -225,12 +329,10 @@ Please tailor the GSAP animations within this script to fit your project's look
 
 **Modifying or Removing Animations:**
 
-This integration is designed for flexibility:
+- To modify an animation, update the properties and parameters within the `gsap.from()` method, or add new GSAP animation calls as required.
+- Should GSAP not be needed, or if you prefer a different animation method, simply remove the aforementioned script segment.
 
-- To adjust an animation, modify the properties and parameters within the `gsap.from` method or add new GSAP calls as needed.
+We've chosen to keep the integration lean and focused, but GSAP's comprehensive documentation can be referred to for more complex animations: [GSAP Documentation](https://gsap.com/docs/v3/).
-- If GSAP is not required or you wish to rely on a different methodology, remove the the relevant code.
-
-We've chosen to keep the integration lean and focused, but GSAP's comprehensive documentation can be referred to for more intricate animation work: [GSAP Documentation](https://gsap.com/docs/v3/).
 
 ### Hiding Scrollbar
 
@@ -260,42 +362,44 @@ Additionally, update the `<html>` tag to remove the `scrollbar-hide` class, resu
 
 ### SEO Configuration
 
-The ScrewFast template includes a flexible SEO configuration that allows you to optimize each page for search engines and social media platforms effectively. By utilizing the `Meta.astro` component, you can easily customize important metadata such as page titles, descriptions, author information, and social media images.
+The ScrewFast template incorporates a flexible SEO configuration that empowers you to effectively optimize each page for search engines as well as social media platforms. By utilizing the `Meta.astro` component, you can easily customize important metadata such as page titles, descriptions, author information, and social media images to improve your site's visibility and engagement.
-
-The `Meta.astro` component is designed with default properties. However, you have the option to override these defaults by passing custom props. Furthermore, you can extend the metadata by adding additional properties as needed.
 
 #### Customizing Metadata with Meta.astro
 
-The `Meta.astro` component comes preset with default metadata, but you can override these defaults per page:
+The `Meta.astro` component is pre-configured with default metadata values that should be defined to align with your website's content, ensuring out-of-the-box SEO readiness. These defaults can be overridden on a per-page basis:
 
 ```astro
-// Extract props with our default values
+// In Meta.astro component
-const { meta = "ScrewFast offers top-tier hardware tools and expert construction services.", structuredData } = Astro.props;
+const defaultDescription = "ScrewFast offers top-tier hardware tools and expert construction services.";
+const { meta = defaultDescription } = Astro.props;
 ```
 
+By setting the `defaultDescription` to a value that accurately reflects the content of your website, you ensure that all pages will have a relevant default meta description unless otherwise specified.
+
 #### Applying Metadata in Layouts
 
-In your `MainLayout.astro` (or other layout files), you'd set up the props that you want to pass to the `Meta` component:
+When applying metadata within your layouts, such as `MainLayout.astro`, you can pass the desired metadata values as props to the `Meta` component:
 
 ```astro
 ---
-const { meta, structuredData } = Astro.props;
+// In MainLayout.astro file
+const { meta } = Astro.props;
 
 interface Props {
   meta?: string;
-  structuredData?: object;
 }
 ---
 
-<Meta meta={meta} structuredData={structuredData} />
+<Meta meta={meta} />
 ```
 
 #### Customizing Metadata on Individual Pages
 
-Finally, for each page, you can pass custom metadata through the layout:
+Finally, custom metadata can be passed to your layout component within individual page files, allowing for page-specific overrides:
 
 ```astro
 ---
+// In your individual page file
 import MainLayout from '../layouts/MainLayout.astro';
 ---
 
@@ -312,11 +416,23 @@ For a more robust SEO strategy, you can create additional properties in the `Met
 
 #### Structured Data and Rich Snippets
 
-The `Meta.astro` component also handles structured data using JSON-LD format, enhancing how search engines interpret the content of your pages. This can improve how your content appears in search results with rich snippets. You can configure the structured data by modifying the `structuredData` property with relevant schema.org types and properties.
+Structured data in JSON-LD format can be managed by the `Meta.astro` component, improving how search engines understand your page content and potentially enhancing search results with rich snippets. Modify the `structuredData` property with relevant [schema.org](https://schema.org) types and properties:
+
+```astro
+<MainLayout
+  structuredData={{
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "ScrewFast",
+    "url": "https://screwfast.uk",",
+    "description": "Discover top-quality hardware tools and services"
+  }}
+>
+```
 
 #### Using Astro SEO Integrations
 
-While the template provides a custom SEO solution, you may choose to utilize an Astro integration such as [Astro SEO](https://github.com/jonasmerlin/astro-seo#readme) for additional SEO features and optimizations. Integrating such a package might provide more automated metadata management or additional SEO-focused functionality.
+While the template provides a custom SEO solution, you may choose to utilize an Astro integration such as [Astro SEO](https://github.com/jonasmerlin/astro-seo#readme) for additional SEO features and optimizations. Integrating such a package might provide more automated metadata management and additional SEO-focused functionality.
 
 ### Robots.txt
 
@@ -345,8 +461,8 @@ export const GET: APIRoute = () => {
 
 Maximize your website's efficiency with these built-in Astro integrations:
 
-- [Astro Compressor](https://github.com/sondr3/astro-compressor#readme): Automatically compresses your Astro-generated site using gzip or brotli, ensuring faster load times for your users.
+- [Astro Compressor](https://github.com/sondr3/astro-compressor#readme): Automatically compresses Astro-generated site using gzip or brotli, ensuring faster load times.
-Configure the compressor in your `astro.config.mjs` file:
+Configure the compressor in `astro.config.mjs` file:
 
 ```mjs
    export default defineConfig({
@@ -355,7 +471,7 @@ Configure the compressor in your `astro.config.mjs` file:
    });
 ```
 
-- [Astro Sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/): Automatically generates a sitemap for your website, which is vital for SEO and helping search engine bots crawl your pages effectively. Add the sitemap configuration to your astro.config.mjs, specifying your site's base URL and any additional options:
+- [Astro Sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/): Automatically generates a sitemap for a website, which is vital for SEO and helping search engine bots crawl pages effectively. To set up the Astro Sitemap, be sure to specify your site's base URL and any additional options in `astro.config.mjs` file:
 
 ```mjs
    export default defineConfig({
@@ -376,19 +492,19 @@ The great thing about Astro is its rich ecosystem of integrations, allowing you
 <summary>
 This project is built using a variety of tools and technologies that enhance its performance, maintainability, and developer experience. Below is a list of the key tools and their roles in the project:
 </summary>
-<br>
 
 ### Preline UI
 
-Interactive components such as navbars, modals, and accordions are based on Preline UI, a popular open-source component library.
+Interactive components like navbars, modals, and accordions are built using [Preline UI](https://preline.co), a comprehensive open-source component library.
 
 ### Tailwind CSS
 
-Our project's styling is completely powered by Tailwind CSS's utility-first classes. This approach provides us with the flexibility to design custom layouts and components directly in our markup.
+Styling across our project leverages the utility-first classes offered by [Tailwind CSS](https://tailwindcss.com). This methodology allows us to create custom layouts and components with speed and efficiency.
 
-In our project configuration, we use `prettier-plugin-tailwindcss` in `.prettierrc` to ensure consistent styling:
+In our project configuration, we use `prettier-plugin-tailwindcss` [plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) that automatically sorts classes:
 
 ```json
+/.prettierrc
 {
   "plugins": ["prettier-plugin-tailwindcss"]
 }
@@ -396,7 +512,7 @@ In our project configuration, we use `prettier-plugin-tailwindcss` in `.prettier
 
 ### Deployment and Security
 
-The project is deployed on `Vercel`, leveraging the platform's capabilities for seamless CI/CD. Security headers and caching behavior are configured in `vercel.json` to ensure best practices in security and performance:
+We deploy our project on [Vercel](https://vercel.com), capitalizing on their robust platform for seamless CI/CD workflows. Using `vercel.json`, we set stringent security headers and caching policies, ensuring adherence to security and performance best practices:
 
 ```json
 {
@@ -417,19 +533,22 @@ The project is deployed on `Vercel`, leveraging the platform's capabilities for
 
 ### HTML Minification
 
-To further enhance the site's performance, we use `process-html.mjs`, a [custom script](https://straffesites.com/en/blog/optimize-astro-html-post-build) that minifies HTML files after the build process.
+For optimal site performance, we post-process our HTML files with `process-html.mjs`, a [custom script](https://straffesites.com/en/blog/optimize-astro-html-post-build) that minifies HTML after the build phase to reduce file size and improve load times.
+
+Here is a snippet from our HTML minification script in `process-html.mjs`:
 
 ```mjs
+/process-html.mjs
 // Post-build HTML minification script snippet
 // ...
 await Promise.all(
   files.map(async (file) => {
-    // Processing and minification logic here
+    // File processing and minification logic
   })
 );
 ```
 
-Please refer to the respective documentations for each tool:
+We encourage you to refer to the detailed documentation for each tool to fully understand their capabilities and how they contribute to the project:
 
 - [Preline UI Documentation](https://preline.co/docs)
 - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
@@ -437,3 +556,15 @@ Please refer to the respective documentations for each tool:
 - [html-minifier Documentation](https://github.com/kangax/html-minifier)
 
 </details>
+
+## Contributing
+
+If you're interested in helping, you can contribute in several ways:
+
+1. Reporting Issues: Feel free to use the issue tracker to report bugs or request features.
+2. Submitting Pull Requests: If you've fixed a bug or added a new feature, submit a pull request with a clear description of your changes.
+3. Providing Feedback: Share your thoughts on the project's current features and suggest improvements.
+
+## License
+
+This project is released under the MIT License. Please read the [LICENSE](LICENSE) file for more details.

src/components/sections/FooterSection.astro

@@ -4,11 +4,9 @@ import FooterSocialLink from "../ui/links/FooterSocialLink.astro";
 import EmailFooterInput from "../ui/forms/input/EmailFooterInput.astro";
 import { footerLinks, socialLinks } from "../../utils/navigation.ts";
 
-// Footer Section Names
-const sectionThree: string = "Stay up to date";
-
 // Define the variables that will be used in this component
-const content: string =
+const sectionThreeTitle: string = "Stay up to date";
+const sectionThreeContent: string =
   "Stay updated with the latest tools and exclusive deals.";
 ---
 
@@ -103,13 +101,13 @@ const content: string =
 
       <div class="col-span-2">
         <h3 class="font-bold text-neutral-800 dark:text-neutral-200">
-          {sectionThree}
+          {sectionThreeTitle}
         </h3>
 
         <form>
           <EmailFooterInput />
           <p class="mt-3 text-sm text-neutral-600 dark:text-neutral-400">
-            {content}
+            {sectionThreeContent}
           </p>
         </form>
       </div>
@@ -122,7 +120,7 @@ const content: string =
         <p class="text-sm text-neutral-600 dark:text-neutral-400">
           © <span id="current-year"></span> ScrewFast. Crafted by
           <a
-            class="font-medium underline underline-offset-2 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-700 hover:decoration-dashed focus:outline-none focus-visible:ring dark:ring-zinc-200 dark:hover:text-neutral-300"
+            class="font-medium underline underline-offset-2 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-700 hover:decoration-dashed focus:outline-none rounded-lg focus-visible:ring dark:ring-zinc-200 dark:hover:text-neutral-300"
             href="https://sobstvennoai.dev"
             target="_blank"
             rel="noopener noreferrer">sobstvennoAI</a

src/components/sections/features/FeaturesGeneral.astro

@@ -4,7 +4,7 @@ import { Image } from "astro:assets";
 import featureImage from "../../../images/features-image.avif";
 import IconBlock from "../../ui/blocks/IconBlock.astro";
 
-// Define the string variables `title` and `subTitle` for the main heading and sub-heading text respectively.
+// Define the string variables `title` and `subTitle` for the main heading and sub-heading text
 const title: string = "Meeting Industry Demands";
 const subTitle: string =
   "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";

src/components/sections/features/FeaturesStatsAlt.astro

@@ -3,6 +3,7 @@ import { Image } from "astro:assets";
 
 import product5 from "../../../images/features-image.avif";
 
+// Define the variables to be used in the component
 const title: string = "Why Choose ScrewFast?";
 
 const subTitle: string =

src/components/ui/cards/CardInsight.astro

@@ -12,7 +12,7 @@ interface Props {
 
 <!-- The anchor tag is the root container for the "Insight" card. It links to the insight detail page. -->
 <a
-  class="group outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
+  class="group outline-none rounded-xl ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
   href={`/insights/${insightEntry.slug}/`}
 >
   <!-- This is the container for the insight's cover image. -->

src/layouts/MainLayout.astro

@@ -65,7 +65,7 @@ We set the language of the page to English and add classes for scrollbar and scr
     </div>
     <FooterSection />
     <style>
-      // CSS rules for the page scrollbar and scrolling experience with lenis library
+      /* CSS rules for the page scrollbar and scrolling experience with lenis library */
       .scrollbar-hide::-webkit-scrollbar {
         display: none;
       }