diff --git a/src/components/Authentication.astro b/src/components/Authentication.astro
new file mode 100644
index 0000000..2bc2334
--- /dev/null
+++ b/src/components/Authentication.astro
@@ -0,0 +1,15 @@
+---
+// Import the necessary dependencies from individual component files
+import LoginModal from "./ui/authentication/LoginModal.astro";
+import RegisterModal from "./ui/authentication/RegisterModal.astro";
+import RecoverModal from "./ui/authentication/RecoverModal.astro";
+import LoginBtn from "./ui/buttons/LoginBtn.astro";
+---
+
+
+
+
+
+
+
+
diff --git a/src/components/FooterSection.astro b/src/components/FooterSection.astro
new file mode 100644
index 0000000..abc2ba5
--- /dev/null
+++ b/src/components/FooterSection.astro
@@ -0,0 +1,265 @@
+---
+// Import the necessary dependencies from individual component files
+import FooterSocialLink from "./ui/links/FooterSocialLink.astro";
+import EmailFooterInput from "./ui/authentication/input/EmailFooterInput.astro";
+
+// Footer Section Names
+const sectionOne: string = "Product";
+const sectionTwo: string = "Company";
+const sectionThree: string = "Stay up to date";
+
+/* `content` variable used to customise the email subscription content text. */
+const content: string =
+ "Stay updated with the latest tools and exclusive deals.";
+
+/* TypeScript type for links. */
+type Links = {
+ title: string;
+ url: string;
+};
+
+/* An array of links, each being an object that conforms to the above `Links` type. */
+const product: Links[] = [
+ {
+ title: "Tools & Equipment",
+ url: "#",
+ },
+ {
+ title: "Construction Services",
+ url: "/services",
+ },
+ {
+ title: "Pricing",
+ url: "#",
+ },
+];
+
+/* An array of links, each being an object that conforms to the above `Links` type. */
+const company: Links[] = [
+ {
+ title: "About us",
+ url: "#",
+ },
+ {
+ title: "Blog",
+ url: "/blog",
+ },
+ {
+ title: "Careers",
+ url: "#",
+ },
+ {
+ title: "Customers",
+ url: "#",
+ },
+];
+---
+
+
diff --git a/src/components/HeroSection2.astro b/src/components/HeroSection2.astro
new file mode 100644
index 0000000..0e22804
--- /dev/null
+++ b/src/components/HeroSection2.astro
@@ -0,0 +1,128 @@
+---
+// Import the necessary dependencies from individual component files
+import GithubBtn from "./ui/buttons/GithubBtn.astro";
+
+// Variables for customization of the LoginModal Component
+// Main heading
+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.";
+
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
{subTitle}
+
+
+
+
+
+
diff --git a/src/components/ui/authentication/LoginModal.astro b/src/components/ui/authentication/LoginModal.astro
new file mode 100644
index 0000000..2c7e70f
--- /dev/null
+++ b/src/components/ui/authentication/LoginModal.astro
@@ -0,0 +1,83 @@
+---
+// Import the necessary dependencies from individual component files
+import GoogleBtn from "../buttons/GoogleBtn.astro";
+import AuthBtn from "../buttons/AuthBtn.astro";
+import EmailInput from "./input/EmailInput.astro";
+import PasswordInput from "./input/PasswordInput.astro";
+import Checkbox from "./input/Checkbox.astro";
+
+// Variables for customization of the LoginModal Component
+// Modal identifier
+const id = "hs-toggle-between-modals-login-modal";
+
+// Main heading
+const title: string = "Sign in";
+
+// Sub-heading text
+const subTitle: string = "Don't have an account yet?";
+
+// Text for registration button
+const registerBtn: string = "Sign up here";
+
+// Target link for registration button
+const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
+---
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {subTitle}
+
+
+
+
+
+
+
+ Or
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ui/authentication/RecoverModal.astro b/src/components/ui/authentication/RecoverModal.astro
new file mode 100644
index 0000000..39288a6
--- /dev/null
+++ b/src/components/ui/authentication/RecoverModal.astro
@@ -0,0 +1,64 @@
+---
+// Import the necessary dependencies from individual component files
+import AuthBtn from "../buttons/AuthBtn.astro";
+import EmailInput from "./input/EmailInput.astro";
+
+// Variables to customize the RecoverModal Component
+
+// Modal identifier
+const id = "hs-toggle-between-modals-recover-modal";
+
+// Main heading
+const title: string = "Forgot password?";
+
+// Sub-heading text
+const subTitle: string = "Remember your password?";
+
+// Text and target link for the login button
+const loginBtn: string = "Sign in here";
+const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
+---
+
+
+
+
+
+
+
+
+ {title}
+
+
+ {subTitle}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/ui/authentication/RegisterModal.astro b/src/components/ui/authentication/RegisterModal.astro
new file mode 100644
index 0000000..9aa0ce0
--- /dev/null
+++ b/src/components/ui/authentication/RegisterModal.astro
@@ -0,0 +1,92 @@
+---
+// Import the necessary dependencies from individual component files
+import GoogleBtn from "../buttons/GoogleBtn.astro";
+import AuthBtn from "../buttons/AuthBtn.astro";
+import EmailInput from "./input/EmailInput.astro";
+import PasswordInput from "./input/PasswordInput.astro";
+import Checkbox from "./input/Checkbox.astro";
+
+// Variables to customize the RegisterModal Component
+
+// Modal identifier
+const id = "hs-toggle-between-modals-register-modal";
+
+// Main title
+const title: string = "Sign up";
+
+// Subtitle text
+const subTitle: string = "Already have an account?";
+
+// Text and target link for the login button
+const loginBtn: string = "Sign in here";
+const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
+---
+
+