From 5810cc112b5253fad328a99a80954e536815efca Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Thu, 29 Feb 2024 17:57:50 +0800
Subject: [PATCH] feature - added whatsnew

---
 Frontend/app/(public)/blogs/[slug]/page.tsx   |   2 +-
 Frontend/app/(public)/pricing/page.tsx        |   1 +
 Frontend/app/(public)/whatsnew/page.tsx       |  32 ++
 Frontend/components/Footer.tsx                | 243 ++++++++++++-
 Frontend/components/Header.tsx                |   2 +-
 Frontend/components/{Icon => Icons}/Icon.tsx  |   0
 .../{Icon => Icons}/IconContainer.tsx         |   0
 Frontend/components/{Icon => Icons}/types.ts  |   0
 Frontend/components/Logo.tsx                  |  24 +-
 Frontend/components/Modals/ModalSignIn.tsx    |   2 +-
 Frontend/components/Modals/ModalSignUp.tsx    |   2 +-
 Frontend/components/Navigation.tsx            |  14 +-
 Frontend/components/PriceCard.tsx             |   2 +-
 Frontend/components/Utilities/Background.tsx  |   2 +-
 .../sections/FAQ/RightAlignedBorderBottom.tsx | 342 ++++++++++++++++++
 .../VerticalTabsWithOverlappingBackground.tsx | 257 +++++++++++++
 Frontend/sections/FeaturesBlocks.tsx          | 258 -------------
 .../Hero/WaitingListWithImageHero.tsx         |   2 +-
 .../IconsSections/SolidBackgrondIcon.tsx      | 116 ++++++
 Frontend/sections/LoadingModal.tsx            |  27 --
 Frontend/sections/PageIllustration.tsx        |  18 -
 Frontend/sections/SuccessModal.tsx            |  16 -
 Frontend/tailwind.config.ts                   |   2 +-
 23 files changed, 999 insertions(+), 365 deletions(-)
 create mode 100644 Frontend/app/(public)/whatsnew/page.tsx
 rename Frontend/components/{Icon => Icons}/Icon.tsx (100%)
 rename Frontend/components/{Icon => Icons}/IconContainer.tsx (100%)
 rename Frontend/components/{Icon => Icons}/types.ts (100%)
 create mode 100644 Frontend/sections/FAQ/RightAlignedBorderBottom.tsx
 create mode 100644 Frontend/sections/Features/VerticalTabsWithOverlappingBackground.tsx
 delete mode 100644 Frontend/sections/FeaturesBlocks.tsx
 create mode 100644 Frontend/sections/IconsSections/SolidBackgrondIcon.tsx
 delete mode 100644 Frontend/sections/LoadingModal.tsx
 delete mode 100644 Frontend/sections/PageIllustration.tsx
 delete mode 100644 Frontend/sections/SuccessModal.tsx

diff --git a/Frontend/app/(public)/blogs/[slug]/page.tsx b/Frontend/app/(public)/blogs/[slug]/page.tsx
index 1e63e58..6d740ca 100644
--- a/Frontend/app/(public)/blogs/[slug]/page.tsx
+++ b/Frontend/app/(public)/blogs/[slug]/page.tsx
@@ -51,7 +51,7 @@ const PostPage = async (props: any) => {
       className="h-full flex-grow flex flex-col bg-base-100 max-w-screen"
     >
       <Background>
-        <div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen">
+        <div className="flex flex-col h-full w-full md:max-w-3xl md:mx-auto max-w-screen mb-8">
           <Spacer className="pt-32" />
           <BlogContent post={post} />
         </div>
diff --git a/Frontend/app/(public)/pricing/page.tsx b/Frontend/app/(public)/pricing/page.tsx
index ca13440..fe89671 100644
--- a/Frontend/app/(public)/pricing/page.tsx
+++ b/Frontend/app/(public)/pricing/page.tsx
@@ -30,6 +30,7 @@ export default function PricingPage() {
         <Payment type="one_time" />
         <Spacer className="mt-auto" />
         <Newsletter />
+        <Spacer className="mb-8" />
         <Footer />
       </Background>
     </main>
diff --git a/Frontend/app/(public)/whatsnew/page.tsx b/Frontend/app/(public)/whatsnew/page.tsx
new file mode 100644
index 0000000..bcd3060
--- /dev/null
+++ b/Frontend/app/(public)/whatsnew/page.tsx
@@ -0,0 +1,32 @@
+import Footer from "@/components/Footer";
+import Background from "@/components/Utilities/Background";
+import Spacer from "@/components/Utilities/Spacer";
+import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
+import SolidBackgrondIcon from "@/sections/IconsSections/SolidBackgrondIcon";
+import PageHeader from "@/sections/PageHeader";
+import React from "react";
+
+const page = () => {
+  return (
+    <div className="flex flex-col h-full w-full bg-base-100 ">
+      <Background>
+        <PageHeader
+          title="What's New"
+          subtitle={
+            <>
+              {" "}
+              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
+                Take a look at all the cool features we&apos;ve built.
+              </h2>
+            </>
+          }
+        />
+        <SolidBackgrondIcon />
+        <Spacer className="mt-auto" />
+        <Footer />
+      </Background>
+    </div>
+  );
+};
+
+export default page;
diff --git a/Frontend/components/Footer.tsx b/Frontend/components/Footer.tsx
index 9c88503..ec1f704 100644
--- a/Frontend/components/Footer.tsx
+++ b/Frontend/components/Footer.tsx
@@ -2,27 +2,240 @@
 import React from "react";
 import { title } from "@/constants";
 import Logo from "@/components/Logo";
+import Link from "next/link";
 
 function Footer() {
   return (
-    <footer>
-      <div className="py-12 mx-auto w-full from-base-100/70 bg-gradient-to-t">
-        <div className="max-w-6xl mx-auto px-4 sm:px-6" data-aos="fade-up">
-          {/* Bottom area */}
-          <div className="flex items-center justify-center">
-            {/* Social links */}
-            <ul className="flex md:order-1 md:mb-0 justify-center text-base-content fill-base-content">
-              <li>
-                <Logo />
-              </li>
-            </ul>
-          </div>
+    <footer className="w-full  py-10 px-4 sm:px-6 lg:px-8 mx-auto bg-base-100">
+      {/* Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
+        <div className="col-span-full hidden lg:col-span-1 lg:flex lg:flex-col lg:items-center">
+          <Link
+            className="flex-none text-xl font-semibold "
+            href="#"
+            aria-label="Brand"
+          >
+            <Logo href="#" />
+          </Link>
+          <p className="mt-3 text-xs sm:text-sm text-base-content">
+            &copy; {new Date().getFullYear()} {title + " "}
+          </p>
+        </div>
+        {/* End Col */}
+        <div>
+          <h4 className="text-xs font-semibold text-primary uppercase">
+            Product
+          </h4>
+          <div className="mt-3 grid space-y-3 text-sm">
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="/pricing"
+              >
+                Pricing
+              </Link>
+            </p>
 
-          {/* Copyrights note */}
-          <div className="text-base-content text-xs text-center  mt-2">
-            &copy; {new Date().getFullYear()} {title}
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="/blogs/documentation"
+              >
+                Docs
+              </Link>
+            </p>
           </div>
         </div>
+        {/* End Col */}
+        <div>
+          <h4 className="text-xs font-semibold text-primary uppercase">
+            Company
+          </h4>
+          <div className="mt-3 grid space-y-3 text-sm">
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="/blogs"
+              >
+                Blog
+              </Link>
+            </p>
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Customers
+              </Link>
+              <span className="inline text-secondary">
+                — Under Construction
+              </span>
+            </p>
+          </div>
+        </div>
+        {/* End Col */}
+        <div>
+          <h4 className="text-xs font-semibold text-primary uppercase">
+            Resources
+          </h4>
+          <div className="mt-3 grid space-y-3 text-sm">
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="https://discord.gg/YpR5QVAa3Z"
+              >
+                Community
+              </Link>
+            </p>
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Help &amp; Support
+              </Link>
+              <span className="inline text-secondary">
+                — Under Construction
+              </span>
+            </p>
+
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="/whatsnew"
+              >
+                What&apos;s New
+              </Link>
+            </p>
+          </div>
+        </div>
+        {/* End Col */}
+        <div>
+          <h4 className="text-xs font-semibold text-primary uppercase">
+            Developers
+          </h4>
+          <div className="mt-3 grid space-y-3 text-sm">
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Roadmap
+              </Link>
+              <span className="inline text-secondary">
+                — Under Construction
+              </span>
+            </p>
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="https://github.com/mrwyndham/pocketbase-stripe"
+              >
+                GitHub
+              </Link>{" "}
+            </p>
+          </div>
+          {/* <h4 className="mt-7 text-xs font-semibold text-primary uppercase">
+            Industries
+          </h4>
+          <div className="mt-3 grid space-y-3 text-sm">
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Financial Services
+              </Link>
+            </p>
+            <p>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Education
+              </Link>
+            </p>
+          </div> */}
+        </div>
+        {/* End Col */}
+      </div>
+      {/* End Grid */}
+      <div className="pt-5 mt-5 border-t border-base-content/40 ">
+        <div className="sm:flex sm:justify-between sm:items-center">
+          <div className="flex items-center gap-x-3">
+            <div className="space-x-4 text-sm ms-4">
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Terms
+              </Link>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Privacy
+              </Link>
+              <Link
+                className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
+                href="#"
+              >
+                Status
+              </Link>
+            </div>
+          </div>
+          <div className="flex justify-between items-center">
+            <div className="mt-3 sm:hidden">
+              <Link
+                className="flex-none text-xl font-semibold "
+                href="#"
+                aria-label="Brand"
+              >
+                <Logo href="#" />
+              </Link>
+              <p className="mt-1 text-xs sm:text-sm text-base-content">
+                &copy; {new Date().getFullYear()} {title + " "}
+              </p>
+            </div>
+            {/* Social Brands */}
+            <div className="space-x-4">
+              <Link
+                className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2  focus:ring-offset-2 focus:ring-offset-white transition "
+                href="https://discord.gg/YpR5QVAa3Z"
+              >
+                <svg
+                  width={16}
+                  height={16}
+                  viewBox="0 0 24 24"
+                  role="img"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
+                  />
+                </svg>
+              </Link>
+              <Link
+                className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2  focus:ring-offset-2 focus:ring-offset-white transition "
+                href="https://github.com/mrwyndham/pocketbase-stripe"
+              >
+                <svg
+                  className="flex-shrink-0 size-3.5"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={16}
+                  height={16}
+                  fill="currentColor"
+                  viewBox="0 0 16 16"
+                >
+                  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                </svg>
+              </Link>
+            </div>
+            {/* End Social Brands */}
+          </div>
+          {/* End Col */}
+        </div>
       </div>
     </footer>
   );
diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index 1d3bbcc..09265a0 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -10,7 +10,7 @@ import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.share
 import pb from "@/lib/pocketbase";
 import { useTheme } from "next-themes";
 import Link from "next/link";
-import Icon from "@/components/Icon/Icon";
+import Icon from "@/components/Icons/Icon";
 
 interface HeaderProps {
   isUserLoggedIn: boolean;
diff --git a/Frontend/components/Icon/Icon.tsx b/Frontend/components/Icons/Icon.tsx
similarity index 100%
rename from Frontend/components/Icon/Icon.tsx
rename to Frontend/components/Icons/Icon.tsx
diff --git a/Frontend/components/Icon/IconContainer.tsx b/Frontend/components/Icons/IconContainer.tsx
similarity index 100%
rename from Frontend/components/Icon/IconContainer.tsx
rename to Frontend/components/Icons/IconContainer.tsx
diff --git a/Frontend/components/Icon/types.ts b/Frontend/components/Icons/types.ts
similarity index 100%
rename from Frontend/components/Icon/types.ts
rename to Frontend/components/Icons/types.ts
diff --git a/Frontend/components/Logo.tsx b/Frontend/components/Logo.tsx
index b7b74f3..d027ea2 100644
--- a/Frontend/components/Logo.tsx
+++ b/Frontend/components/Logo.tsx
@@ -1,23 +1,21 @@
 import React from "react";
 
-import Link from "next/link";
-import Image from "next/image";
+import Link, { LinkProps } from "next/link";
+import Image, { ImageProps } from "next/image";
 
 interface LogoProps {
   label?: string;
   className?: string;
+  imageProps?: ImageProps;
 }
 
-function Logo({ label, className }: LogoProps) {
+function Logo({ imageProps, ...props }: LogoProps & LinkProps) {
   return (
     <Link
-      href={
-        label !== undefined
-          ? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
-          : "/"
+      className={
+        props.className ?? " flex flex-row items-center justify-center"
       }
-      className={className ?? "" + " flex flex-row items-center justify-center"}
-      target={label !== undefined ? "_blank" : ""}
+      {...props}
     >
       {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
 
@@ -27,14 +25,8 @@ function Logo({ label, className }: LogoProps) {
         alt="Follow us on Twitter"
         width={40}
         height={40}
+        {...imageProps}
       />
-      {label !== undefined ? (
-        <span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
-          {label}
-        </span>
-      ) : (
-        <></>
-      )}
     </Link>
   );
 }
diff --git a/Frontend/components/Modals/ModalSignIn.tsx b/Frontend/components/Modals/ModalSignIn.tsx
index 4483532..2d6c952 100644
--- a/Frontend/components/Modals/ModalSignIn.tsx
+++ b/Frontend/components/Modals/ModalSignIn.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "@/components/Icon/Icon";
+import Icon from "@/components/Icons/Icon";
 import { useTheme } from "next-themes";
 import colors from "@/utils/colors";
 import { useForm } from "react-hook-form";
diff --git a/Frontend/components/Modals/ModalSignUp.tsx b/Frontend/components/Modals/ModalSignUp.tsx
index f34db16..1753696 100644
--- a/Frontend/components/Modals/ModalSignUp.tsx
+++ b/Frontend/components/Modals/ModalSignUp.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, { Dispatch, SetStateAction } from "react";
-import Icon from "@/components/Icon/Icon";
+import Icon from "@/components/Icons/Icon";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { signUpValidationSchema } from "@/utils/form";
diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index 61596c3..6ff043f 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -3,7 +3,7 @@
 import Logo from "@/components/Logo";
 import React, { useState } from "react";
 import Link from "next/link";
-import Icon from "@/components/Icon/Icon";
+import Icon from "@/components/Icons/Icon";
 
 function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
   const [checked, setChecked] = useState<boolean>();
@@ -37,7 +37,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
               {/* Site branding */}
               <div className="shrink-0 mr-4">
                 {/* Logo */}
-                <Logo className="group relative cursor-pointer" />
+                <Logo href="/" className="group relative cursor-pointer" />
               </div>
               {/* Navbar menu content here */}
               <li>
@@ -50,11 +50,11 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
                   Blogs
                 </Link>
               </li>
-              <li>
+              {/* <li>
                 <Link href="/contact" onClick={handleClick}>
                   Contact
                 </Link>
-              </li>
+              </li> */}
               {isUserLoggedIn ? (
                 <li>
                   <Link href="/account" onClick={handleClick}>
@@ -80,7 +80,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           {/* Sidebar content here */}
           <div className="shrink-0 m-3">
             {/* Logo */}
-            <Logo className="group relative cursor-pointer" />
+            <Logo href="/" className="group relative cursor-pointer" />
           </div>
           <li>
             <Link href="/pricing">Pricing</Link>
@@ -88,9 +88,9 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           <li>
             <Link href="/blogs">Blogs</Link>
           </li>
-          <li>
+          {/* <li>
             <Link href="/contact">Contact</Link>
-          </li>
+          </li> */}
           {isUserLoggedIn ? (
             <li>
               <Link href="/account" onClick={handleClick}>
diff --git a/Frontend/components/PriceCard.tsx b/Frontend/components/PriceCard.tsx
index af7c782..cfe2b54 100644
--- a/Frontend/components/PriceCard.tsx
+++ b/Frontend/components/PriceCard.tsx
@@ -4,7 +4,7 @@ import { Price, Product, SourceModal } from "@/types";
 import { createCheckoutSession, isAuthenticated } from "@/app/actions";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";
-import Icon from "@/components/Icon/Icon";
+import Icon from "@/components/Icons/Icon";
 
 export default function PriceCard({
   product,
diff --git a/Frontend/components/Utilities/Background.tsx b/Frontend/components/Utilities/Background.tsx
index 95f5035..180251a 100644
--- a/Frontend/components/Utilities/Background.tsx
+++ b/Frontend/components/Utilities/Background.tsx
@@ -26,7 +26,7 @@ const Background = ({ children }: { children: ReactNode }) => {
     <div
       className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col"
       style={{
-        backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/circuit.svg)`,
+        backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.8), rgba(135, 80, 156, 0.05)), url(/images/circuit.svg)`,
       }}
     >
       {children}
diff --git a/Frontend/sections/FAQ/RightAlignedBorderBottom.tsx b/Frontend/sections/FAQ/RightAlignedBorderBottom.tsx
new file mode 100644
index 0000000..059440d
--- /dev/null
+++ b/Frontend/sections/FAQ/RightAlignedBorderBottom.tsx
@@ -0,0 +1,342 @@
+import React from "react";
+
+function RightAlignedBorderBottom() {
+  return (
+    <>
+      {/* FAQ */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        {/* Grid */}
+        <div className="grid md:grid-cols-5 gap-10">
+          <div className="md:col-span-2">
+            <div className="max-w-xs">
+              <h2 className="text-2xl font-bold md:text-4xl md:leading-tight dark:text-white">
+                Frequently
+                <br />
+                asked questions
+              </h2>
+              <p className="mt-1 hidden md:block text-gray-600 dark:text-gray-400">
+                Answers to the most frequently asked questions.
+              </p>
+            </div>
+          </div>
+          {/* End Col */}
+          <div className="md:col-span-3">
+            {/* Accordion */}
+            <div className="hs-accordion-group divide-y divide-gray-200 dark:divide-gray-700">
+              <div
+                className="hs-accordion pb-3 active"
+                id="hs-basic-with-title-and-arrow-stretched-heading-one"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one"
+                >
+                  Can I cancel at anytime?
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-one"
+                  className="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    Yes, you can cancel anytime no questions are asked while you
+                    cancel but we would highly appreciate if you will give us
+                    some feedback.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="hs-accordion pt-6 pb-3"
+                id="hs-basic-with-title-and-arrow-stretched-heading-two"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two"
+                >
+                  My team has credits. How do we use them?
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-two"
+                  className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    Once your team signs up for a subscription plan. This is
+                    where we sit down, grab a cup of coffee and dial in the
+                    details.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="hs-accordion pt-6 pb-3"
+                id="hs-basic-with-title-and-arrow-stretched-heading-three"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three"
+                >
+                  How does Preline&apos;s pricing work?
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-three"
+                  className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    Our subscriptions are tiered. Understanding the task at hand
+                    and ironing out the wrinkles is key.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="hs-accordion pt-6 pb-3"
+                id="hs-basic-with-title-and-arrow-stretched-heading-four"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four"
+                >
+                  How secure is Preline?
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-four"
+                  className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    Protecting the data you trust to Preline is our first
+                    priority. This part is really crucial in keeping the project
+                    in line to completion.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="hs-accordion pt-6 pb-3"
+                id="hs-basic-with-title-and-arrow-stretched-heading-five"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five"
+                >
+                  How do I get access to a theme I purchased?
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-five"
+                  className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    If you lose the link for a theme you purchased, don&apos;t
+                    panic! We&apos;ve got you covered. You can login to your
+                    account, tap your avatar in the upper right corner, and tap
+                    Purchases. If you didn&apos;t create a login or can&apos;t
+                    remember the information, you can use our handy Redownload
+                    page, just remember to use the same email you originally
+                    made your purchases with.
+                  </p>
+                </div>
+              </div>
+              <div
+                className="hs-accordion pt-6 pb-3"
+                id="hs-basic-with-title-and-arrow-stretched-heading-six"
+              >
+                <button
+                  className="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-gray-800 rounded-lg transition hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six"
+                >
+                  Upgrade License Type
+                  <svg
+                    className="hs-accordion-active:hidden block flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m6 9 6 6 6-6" />
+                  </svg>
+                  <svg
+                    className="hs-accordion-active:block hidden flex-shrink-0 size-5 text-gray-600 group-hover:text-gray-500 dark:text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m18 15-6-6-6 6" />
+                  </svg>
+                </button>
+                <div
+                  id="hs-basic-with-title-and-arrow-stretched-collapse-six"
+                  className="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
+                  aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six"
+                >
+                  <p className="text-gray-600 dark:text-gray-400">
+                    There may be times when you need to upgrade your license
+                    from the original type you purchased and we have a solution
+                    that ensures you can apply your original purchase cost to
+                    the new license purchase.
+                  </p>
+                </div>
+              </div>
+            </div>
+            {/* End Accordion */}
+          </div>
+          {/* End Col */}
+        </div>
+        {/* End Grid */}
+      </div>
+      {/* End FAQ */}
+    </>
+  );
+}
+
+export default RightAlignedBorderBottom;
diff --git a/Frontend/sections/Features/VerticalTabsWithOverlappingBackground.tsx b/Frontend/sections/Features/VerticalTabsWithOverlappingBackground.tsx
new file mode 100644
index 0000000..e6eff6b
--- /dev/null
+++ b/Frontend/sections/Features/VerticalTabsWithOverlappingBackground.tsx
@@ -0,0 +1,257 @@
+import React from "react";
+
+function VerticalTabsWithOverlappingBackground() {
+  return (
+    <>
+      {/* Features */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        {/* Tab Nav */}
+        <nav
+          className="max-w-6xl mx-auto grid sm:flex gap-y-px sm:gap-y-0 sm:gap-x-4"
+          aria-label="Tabs"
+          role="tablist"
+        >
+          <button
+            type="button"
+            className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active"
+            id="tabs-with-card-item-1"
+            data-hs-tab="#tabs-with-card-1"
+            aria-controls="tabs-with-card-1"
+            role="tab"
+          >
+            <svg
+              className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              width={24}
+              height={24}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
+              <path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
+              <path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
+              <path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
+              <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
+            </svg>
+            <span className="mt-5">
+              <span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
+                All-in-one workspace
+              </span>
+              <span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
+                Create a business, whether you’ve got a fresh idea.
+              </span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+            id="tabs-with-card-item-2"
+            data-hs-tab="#tabs-with-card-2"
+            aria-controls="tabs-with-card-2"
+            role="tab"
+          >
+            <svg
+              className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              width={24}
+              height={24}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="m12 14 4-4" />
+              <path d="M3.34 19a10 10 0 1 1 17.32 0" />
+            </svg>
+            <span className="mt-5">
+              <span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
+                Automation on a whole new level
+              </span>
+              <span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
+                Use automation to scale campaigns profitably and save time doing
+                it.
+              </span>
+            </span>
+          </button>
+          <button
+            type="button"
+            className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+            id="tabs-with-card-item-3"
+            data-hs-tab="#tabs-with-card-3"
+            aria-controls="tabs-with-card-3"
+            role="tab"
+          >
+            <svg
+              className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              width={24}
+              height={24}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+              <path d="M5 3v4" />
+              <path d="M19 17v4" />
+              <path d="M3 5h4" />
+              <path d="M17 19h4" />
+            </svg>
+            <span className="mt-5">
+              <span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
+                Solving problems for every team
+              </span>
+              <span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
+                One tool for your company to share knowledge and ship projects.
+              </span>
+            </span>
+          </button>
+        </nav>
+        {/* End Tab Nav */}
+        {/* Tab Content */}
+        <div className="mt-12 md:mt-16">
+          <div
+            id="tabs-with-card-1"
+            role="tabpanel"
+            aria-labelledby="tabs-with-card-item-1"
+          >
+            {/* Devices */}
+            <div className="max-w-[1140px] lg:pb-32 relative">
+              {/* Mobile Device */}
+              <figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
+                <div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
+                  <img
+                    className="max-w-full h-auto rounded-[1.25rem]"
+                    src="../assets/img/mockups/img9.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Mobile Device */}
+              {/* Browser Device */}
+              <figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
+                <div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
+                  <div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                  </div>
+                  <div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
+                    www.preline.co
+                  </div>
+                </div>
+                <div className="bg-gray-800 rounded-b-lg">
+                  <img
+                    className="max-w-full h-auto rounded-b-lg"
+                    src="../assets/img/mockups/img8.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Browser Device */}
+            </div>
+            {/* End Devices */}
+          </div>
+          <div
+            id="tabs-with-card-2"
+            className="hidden"
+            role="tabpanel"
+            aria-labelledby="tabs-with-card-item-2"
+          >
+            {/* Devices */}
+            <div className="max-w-[1140px] lg:pb-32 relative">
+              {/* Mobile Device */}
+              <figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
+                <div className="p-1.5 bg-gray-700 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
+                  <img
+                    className="max-w-full h-auto rounded-[1.25rem]"
+                    src="../assets/img/mockups/img11.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Mobile Device */}
+              {/* Browser Device */}
+              <figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
+                <div className="relative flex items-center max-w-[50rem] bg-gray-800 border-b border-gray-700 rounded-t-lg py-2 px-24">
+                  <div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
+                    <span className="size-2 bg-gray-700 rounded-full" />
+                    <span className="size-2 bg-gray-700 rounded-full" />
+                    <span className="size-2 bg-gray-700 rounded-full" />
+                  </div>
+                  <div className="flex justify-center items-center size-full bg-gray-700 text-[.25rem] text-gray-200 rounded-sm sm:text-[.5rem]">
+                    www.preline.co
+                  </div>
+                </div>
+                <div className="bg-gray-800 rounded-b-lg">
+                  <img
+                    className="max-w-full h-auto rounded-b-lg"
+                    src="../assets/img/mockups/img10.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Browser Device */}
+            </div>
+            {/* End Devices */}
+          </div>
+          <div
+            id="tabs-with-card-3"
+            className="hidden"
+            role="tabpanel"
+            aria-labelledby="tabs-with-card-item-3"
+          >
+            {/* Devices */}
+            <div className="max-w-[1140px] lg:pb-32 relative">
+              {/* Mobile Device */}
+              <figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
+                <div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
+                  <img
+                    className="max-w-full h-auto rounded-[1.25rem]"
+                    src="../assets/img/mockups/img13.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Mobile Device */}
+              {/* Browser Device */}
+              <figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
+                <div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
+                  <div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                    <span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
+                  </div>
+                  <div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
+                    www.preline.co
+                  </div>
+                </div>
+                <div className="bg-gray-800 rounded-b-lg">
+                  <img
+                    className="max-w-full h-auto rounded-b-lg"
+                    src="../assets/img/mockups/img12.jpg"
+                    alt="Image Description"
+                  />
+                </div>
+              </figure>
+              {/* End Browser Device */}
+            </div>
+            {/* End Devices */}
+          </div>
+        </div>
+        {/* End Tab Content */}
+      </div>
+      {/* End Features */}
+    </>
+  );
+}
+
+export default VerticalTabsWithOverlappingBackground;
diff --git a/Frontend/sections/FeaturesBlocks.tsx b/Frontend/sections/FeaturesBlocks.tsx
deleted file mode 100644
index 686a8a5..0000000
--- a/Frontend/sections/FeaturesBlocks.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-import React from "react";
-import iconClipboard from "@/images/icon-clipboard.svg";
-import iconClock from "@/images/icon-clock.svg";
-import iconLink from "@/images/icon-link.svg";
-import iconUsDollar from "@/images/icon-us-dollar.svg";
-import iconUser from "@/images/icon-user.svg";
-import iconVector from "@/images/icon-vector.svg";
-import Image from "next/image";
-
-const FeaturesBlocks = () => {
-  return (
-    <section>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6">
-        <div className="py-8 md:py-10">
-          {/* Section header */}
-          <div className="max-w-3xl mx-auto text-center pb-6 md:pb-8">
-            <h2 className="mb-4 text-black dark:text-white">
-              Say Goodbye To Manual Data Entry With Sign365.
-            </h2>
-          </div>
-
-          {/* Items */}
-          <div
-            className="max-w-sm mx-auto grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-16 items-start md:max-w-2xl lg:max-w-none"
-            data-aos-id-blocks
-          >
-            {/* 1st item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[50%]"
-                  src={iconClipboard}
-                  alt="Enter Data Once"
-                />
-              </div>
-              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
-                Enter Data Once
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                Say goodbye to manual data entry with Sign365&apos;s offline
-                forms. Enter data once and let our app do the rest. We&apos;ll
-                send the information to your business systems, saving you time
-                and effort.
-              </p>
-            </div>
-
-            {/* 2nd item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-delay="200"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[50%]"
-                  src={iconLink}
-                  alt="Connect To Over 1000 Apps"
-                />
-              </div>
-              <h3 className="text-xl text-black mb-2 text-center dark:text-white">
-                Connect To Over 1000 Apps
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                Sign365 can submit information to over 1000 apps. Whether you
-                use Salesforce, Hubspot, or any other business app, Sign365 has
-                got you covered.
-              </p>
-            </div>
-
-            {/* 3rd item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-delay="400"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[40%]"
-                  src={iconClock}
-                  alt="Start Time Saving"
-                />
-              </div>
-              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
-                Start Time Saving
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                With Sign365, you&apos;ll save valuable time that you can then
-                invest in other aspects of your business. Our offline forms
-                collect and send your data, so you can complete more tasks
-                faster.
-              </p>
-            </div>
-
-            {/* 4th item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-delay="600"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[40%]"
-                  src={iconUsDollar}
-                  alt="Start Saving Money"
-                />
-              </div>
-              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
-                Start Saving Money
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                Sign365&apos;s offline forms can help you save money on staffing
-                and data entry costs. By automating your data collection, you
-                can reduce labor costs and increase profits.
-              </p>
-            </div>
-
-            {/* 5th item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-delay="800"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[40%]"
-                  src={iconVector}
-                  alt="Your Forms Your Way"
-                />
-              </div>
-              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
-                Your Forms Your Way
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                With Sign365, you have full control over your offline forms.
-                Create forms that for your business needs and customise them to
-                match your brand. Get started with Sign365 today and start
-                collecting data the way you want.
-              </p>
-            </div>
-
-            {/* 6th item */}
-            <div
-              className="relative flex flex-col items-center"
-              data-aos="fade-up"
-              data-aos-delay="1000"
-              data-aos-anchor="[data-aos-id-blocks]"
-            >
-              <div className="relative flex items-center justify-center  mb-4">
-                <svg
-                  className="w-16 h-16"
-                  viewBox="0 0 64 64"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <rect
-                    className="fill-current text-pink-550"
-                    width="64"
-                    height="64"
-                    rx="32"
-                  />
-                </svg>
-                <Image
-                  className="absolute w-[40%]"
-                  src={iconUser}
-                  alt="Collect Customer Info"
-                />
-              </div>
-              <h3 className="text-2xl mb-2 text-center text-black dark:text-white">
-                Collect Customer Info
-              </h3>
-              <p className="text-lg text-black dark:text-gray-200 text-center">
-                Sign365&apos;s offline digital forms capture accurate and secure
-                customer information. You can customise your forms to send
-                information where you need it. Ensuring you have the insights to
-                make informed business decisions.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default FeaturesBlocks;
diff --git a/Frontend/sections/Hero/WaitingListWithImageHero.tsx b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
index 429ef34..fdc4323 100644
--- a/Frontend/sections/Hero/WaitingListWithImageHero.tsx
+++ b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
@@ -47,7 +47,7 @@ const WaitingListWithImageHero = () => {
       <div className="h-screen  w-full bg-clip flex items-center justify-center">
         <div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-100 rounded-xl shadow-lg">
           <h1 className=" text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
-            <Logo />
+            <Logo href="/" />
             {title}
           </h1>
           {typeof window !== "undefined" &&
diff --git a/Frontend/sections/IconsSections/SolidBackgrondIcon.tsx b/Frontend/sections/IconsSections/SolidBackgrondIcon.tsx
new file mode 100644
index 0000000..9093bdf
--- /dev/null
+++ b/Frontend/sections/IconsSections/SolidBackgrondIcon.tsx
@@ -0,0 +1,116 @@
+import React from "react";
+
+function SolidBackgrondIcon() {
+  return (
+    <>
+      {/* Icon Blocks */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
+              <svg
+                className="flex-shrink-0 size-6 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                width={24}
+                height={24}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect width={10} height={14} x={3} y={8} rx={2} />
+                <path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
+                <path d="M8 18h.01" />
+              </svg>
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Stripe Payments
+              </h3>
+              <p className="mt-1 text-base-content ">
+                We have built stripe payments for 1 off and reoccuring payments
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
+              <svg
+                className="flex-shrink-0 size-6 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                width={24}
+                height={24}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M20 7h-9" />
+                <path d="M14 17H5" />
+                <circle cx={17} cy={17} r={3} />
+                <circle cx={7} cy={7} r={3} />
+              </svg>
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Theming
+              </h3>
+              <p className="mt-1 text-base-content ">
+                All our components include intuative theming with a js utility
+                class that uses your themes colors programmatically
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
+              <svg
+                className="flex-shrink-0 size-6 text-white"
+                xmlns="http://www.w3.org/2000/svg"
+                width={24}
+                height={24}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
+              </svg>
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Documentation
+              </h3>
+              <p className="mt-1 text-base-content ">
+                Every component and plugin is well documented
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+        </div>
+      </div>
+      {/* End Icon Blocks */}
+    </>
+  );
+}
+
+export default SolidBackgrondIcon;
diff --git a/Frontend/sections/LoadingModal.tsx b/Frontend/sections/LoadingModal.tsx
deleted file mode 100644
index 3f4fd00..0000000
--- a/Frontend/sections/LoadingModal.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-function LoadingModal() {
-  return (
-    <div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
-      <svg
-        aria-hidden="true"
-        className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-      <p className="m-1">Loading...</p>
-    </div>
-  );
-}
-
-export default LoadingModal;
diff --git a/Frontend/sections/PageIllustration.tsx b/Frontend/sections/PageIllustration.tsx
deleted file mode 100644
index 85d7b8f..0000000
--- a/Frontend/sections/PageIllustration.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-function PageIllustration() {
-  return (
-    <svg className="absolute top-0 right-0 transform translate-x-1/2 -mr-16" width="722" height="320" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <defs>
-        <linearGradient id="illustration-01" x1="-4.14" y1="43.12" x2="303.145" y2="391.913" gradientUnits="userSpaceOnUse">
-          <stop stopColor="#5D5DFF" stopOpacity=".01" />
-          <stop offset=".538" stopColor="#5D5DFF" stopOpacity=".32" />
-          <stop offset="1" stopColor="#5D5DFF" stopOpacity=".01" />
-        </linearGradient>
-      </defs>
-      <path d="M292.512 0h-2.485c4.1 5.637 8.143 10.76 12.185 15.446 9.096 10.552 19.043 19.174 29.583 25.644l1.077.653c10.95 6.545 23.653 11.451 37.755 14.581 10.83 2.404 22.918 4.156 36.801 5.33 1.983.167 4.003.323 6.061.467l8.683.586 13.802.908c7.255.481 14.609.992 21.813 1.59 15.862 1.32 29.664 3.387 42.19 6.323 12.94 3.037 25.656 7.543 37.793 13.392 10.864 5.262 21.212 11.088 33.257 18.156l4.89 2.881 8.261 4.882 8.936 5.294c4.433 2.63 8.802 5.225 13.05 7.75l111.75 66.854-.302 17.311-119.133-71.27-8.026-4.755c-5.739-3.402-11.479-6.804-17.226-10.201l-8.627-5.093-2.22-1.304c-9.734-5.702-20.902-12.052-32.624-17.476-12.24-5.606-25.329-9.783-38.902-12.416-12.707-2.466-26.845-4.136-43.222-5.103-5.134-.304-10.349-.577-15.499-.837l-12.699-.634c-5.501-.278-11.071-.572-16.549-.903-16.278-.983-30.242-2.79-42.691-5.52-13.922-3.054-26.434-7.865-37.189-14.297l-.216-.13c-10.674-6.415-20.743-15.096-29.926-25.804-7.789-9.08-15.45-19.67-23.372-32.305h-2.375c8.231 13.22 16.162 24.228 24.215 33.613 9.087 10.589 19.033 19.232 29.585 25.71l1.05.638c10.95 6.546 23.663 11.436 37.786 14.533 12.543 2.753 26.61 4.574 43 5.565 6.569.396 13.266.739 19.819 1.066l9.412.47c5.157.26 10.38.533 15.519.837 16.294.964 30.346 2.622 42.959 5.07 13.438 2.609 26.375 6.737 38.446 12.27 11.344 5.25 22.063 11.267 34.668 18.686 11.234 6.623 22.437 13.273 33.62 19.911l.134.079L717.605 210.4l-.118 6.611-9.378 5.2-118.373-70.814-5.613-3.333c-6.164-3.66-12.333-7.322-18.511-10.98l-9.728-5.749c-10.269-6.053-22.289-12.98-34.985-18.587-12.052-5.285-25.318-9.17-39.43-11.549-12.67-2.137-26.94-3.58-43.621-4.412a2849 2849 0 00-9.384-.446l-12.33-.569c-7.68-.36-15.464-.752-23.091-1.24-16.073-1.029-29.986-2.919-42.533-5.775-13.463-3.07-25.643-7.76-36.221-13.946l-1.1-.652c-10.681-6.42-20.782-15.045-30.025-25.638-8.423-9.651-16.628-20.952-25.086-34.547-2.86-4.598-5.712-9.285-8.535-13.974h-2.353c3.03 5.04 6.097 10.089 9.174 15.034 8.522 13.69 16.789 25.075 25.276 34.805 9.117 10.456 19.078 19.029 29.623 25.503l1.107.67c10.957 6.551 23.633 11.496 37.678 14.698 12.632 2.88 26.648 4.784 42.85 5.822 7.628.488 15.41.88 23.084 1.24l8.893.411c4.29.197 8.577.395 12.857.607l2.743.143c15.419.84 28.74 2.232 40.645 4.241 13.952 2.352 27.06 6.192 38.957 11.41 11.732 5.179 22.905 11.511 32.637 17.221l2.138 1.258a8484.147 8484.147 0 0118.821 11.139l15.013 8.911 117.373 70.217-15.197 8.425-109.893-65.739a12699.359 12699.359 0 00-33.842-20.079l-2.513-1.48c-10.108-5.938-20.911-12.023-32.56-16.979-11.955-5.048-25.326-8.759-39.741-11.026-12.693-1.997-26.58-3.346-43.705-4.248l-14.663-.763c-9.945-.525-20.054-1.099-29.906-1.866-15.822-1.231-29.613-3.321-42.162-6.387-13.681-3.341-26.103-8.316-36.925-14.783l-.238-.142c-10.726-6.447-20.889-14.965-30.212-25.321-8.603-9.56-16.927-20.658-25.447-33.931-6.08-9.475-12.083-19.349-17.921-29.011h-2.336c1.509 2.496 3.032 5.009 4.56 7.525 2.933 4.83 5.897 9.678 8.894 14.474.465.745.933 1.48 1.401 2.217.278.438.556.875.833 1.315l1.922 3.046.968 1.52c8.573 13.361 16.963 24.544 25.646 34.19 9.188 10.206 19.186 18.655 29.736 25.131l1.174.712c10.991 6.569 23.6 11.619 37.474 15.009 12.661 3.092 26.556 5.198 42.483 6.437 9.865.768 19.977 1.343 29.925 1.868l14.695.766c17.014.891 30.836 2.234 43.498 4.225 14.254 2.242 27.468 5.907 39.272 10.892 12.491 5.314 24.059 11.973 34.838 18.339 11.306 6.68 22.581 13.381 33.836 20.076l108.895 65.144-15.191 8.432-135.199-80.881-3.428-1.983c-9.651-5.569-20.371-11.579-31.743-16.306-11.852-4.927-25.245-8.594-39.809-10.901l-1.755-.272c-11.757-1.794-24.735-3.133-40.57-4.187l-9.563-.627c-11.892-.788-24.004-1.646-35.753-2.81-15.522-1.538-29.148-3.901-41.66-7.223-13.481-3.58-25.829-8.692-36.702-15.191l-.258-.155c-10.768-6.471-21.01-14.855-30.446-24.92-8.819-9.41-17.308-20.236-25.953-33.101-6.81-10.136-13.402-20.596-19.809-30.87l-3.821-6.139A784.13 784.13 0 00213.574 0h-2.377a797.304 797.304 0 014.292 6.818l3.839 6.166c6.435 10.32 13.049 20.813 19.831 30.9 8.707 12.96 17.262 23.87 26.152 33.353 9.273 9.894 19.32 18.185 29.882 24.665l1.256.761c11.03 6.594 23.55 11.777 37.214 15.406 12.614 3.351 26.344 5.732 41.976 7.281 12.999 1.288 26.422 2.201 39.508 3.059l4.682.305 3.533.238c15.49 1.079 28.215 2.449 39.802 4.28 14.392 2.276 27.633 5.899 39.354 10.771 12.615 5.243 24.474 12.113 34.925 18.167l.004.002 134.169 80.265-15.194 8.418-126.705-75.799-3.424-1.993c-9.642-5.598-20.351-11.637-31.706-16.377-11.784-4.92-25.128-8.664-39.66-11.129l-1.632-.273c-11.217-1.848-23.778-3.36-39.208-4.72l-2.278-.198c-5.128-.438-10.212-.88-15.25-1.341l-2.682-.248c-2.236-.209-4.461-.424-6.679-.644a922.679 922.679 0 01-9.956-1.044 621.162 621.162 0 01-4.88-.56l-4.086-.492c-15.234-1.908-28.673-4.582-41.088-8.177-13.282-3.846-25.55-9.105-36.465-15.627-10.916-6.535-21.343-14.825-30.979-24.662-9.015-9.203-17.69-19.72-26.52-32.151a645.536 645.536 0 01-3.61-5.142c-5.904-8.495-11.711-17.27-17.283-25.798l-4.663-7.147c-4.16-6.357-8.022-12.084-11.691-17.333h-2.443c4.089 5.816 8.415 12.229 13.13 19.453l3.563 5.466c5.831 8.932 11.941 18.178 18.228 27.198 1.046 1.5 2.093 2.99 3.144 4.468 8.888 12.517 17.629 23.112 26.722 32.393 9.373 9.567 19.481 17.695 30.065 24.181l1.317.797c11.061 6.612 23.487 11.938 36.933 15.832 12.515 3.624 26.057 6.32 41.397 8.24l1.647.192a658.952 658.952 0 0011.469 1.303c1.956.208 3.919.409 5.89.604l3.27.32 4.723.446 1.443.133c3.766.343 7.545.681 11.352 1.012l6.086.526c16.116 1.42 29.094 3.007 40.683 4.973 14.384 2.439 27.58 6.14 39.227 11.002 12.623 5.268 24.453 12.169 34.883 18.253l.003.002 125.701 75.197-15.191 8.422-118.241-70.735-4.584-2.679c-9.331-5.431-19.619-11.216-30.431-15.858-11.836-5.081-24.695-8.904-39.315-11.688l-1.55-.292c-11.408-2.121-23.837-3.9-39.899-5.712l-5.712-.642c-11.977-1.355-25.348-2.954-38.236-4.945-14.942-2.308-28.187-5.309-40.496-9.175-13.07-4.103-25.259-9.506-36.226-16.063l-.274-.164-1.352-.84-.226-.139c-.759-.466-1.517-.932-2.272-1.416-7.736-4.973-15.239-10.75-22.381-17.235a45.03 45.03 0 00-.466-.418 45.818 45.818 0 01-.619-.558l-.245-.232a184.96 184.96 0 01-3.418-3.247c-9.21-8.984-18.082-19.176-27.125-31.162l-1.507-2.007c-7.269-9.72-14.35-19.8-22.529-31.663l-2.095-3.036C191.451 18.119 184.439 8.547 177.667 0h-2.657l.351.44c6.939 8.712 14.099 18.463 22.92 31.212l4.604 6.67c7.71 11.14 14.515 20.748 21.574 30.104 9.105 12.066 18.043 22.332 27.324 31.388a182.785 182.785 0 006.033 5.607c.197.175.393.352.589.53.294.266.588.532.886.791l.924.784c6.103 5.256 12.444 10.01 18.967 14.195a154.57 154.57 0 002.946 1.835l.107.065 1.171.728c11.104 6.637 23.436 12.104 36.656 16.252 12.403 3.897 25.745 6.921 40.788 9.244 11.799 1.824 23.991 3.318 35.153 4.597l9.965 1.126c16.237 1.849 28.714 3.668 40.21 5.857 14.466 2.752 27.19 6.533 38.9 11.561 12.537 5.383 24.361 12.314 34.787 18.427l117.21 70.118-15.191 8.421L512.24 204.3l-3.584-2.109c-10.661-6.26-20.553-11.929-31.029-17.158a246.546 246.546 0 00-39.045-12.038l-1.519-.33c-10.674-2.296-22.3-4.33-37.111-6.49l-8.817-1.268c-11.414-1.652-24.095-3.579-36.516-5.887-14.656-2.725-27.709-6.054-39.904-10.176-12.886-4.357-24.999-9.899-36.003-16.476l-.252-.152c-.387-.233-.773-.475-1.159-.716l-.612-.381-1.432-.881a77.05 77.05 0 01-.713-.449 185.943 185.943 0 01-17.595-12.766l-2.244-1.846a43.697 43.697 0 01-.657-.567c-.152-.133-.304-.266-.458-.398a196.7 196.7 0 01-6.393-5.701c-9.373-8.753-18.441-18.622-27.72-30.171-8.247-10.263-16.376-21.13-23.997-31.474l-1.625-2.207c-10.181-13.846-18.17-24.081-25.906-33.187A247.583 247.583 0 00157.567 0h-2.792c4.039 4.13 7.93 8.395 11.652 12.773l1.479 1.75c6.919 8.238 14.145 17.51 23.055 29.582l1.284 1.744c8.079 10.986 16.779 22.68 25.673 33.749 9.322 11.602 18.452 21.539 27.917 30.379 9.896 9.246 20.49 17.285 31.493 23.898l.36.215c11.126 6.65 23.368 12.253 36.39 16.654 12.285 4.153 25.427 7.505 40.177 10.246 12.72 2.362 25.519 4.317 40.669 6.488l1.523.217c17.103 2.446 29.966 4.684 41.708 7.257a244.644 244.644 0 0138.692 11.929c11.568 5.779 22.862 12.355 34.371 19.142l108.742 65.054-15.19 8.421-101.26-60.575-3.468-2.05a1552.578 1552.578 0 00-6.779-3.978l-2.69-1.566-1.575-.908-2.67-1.532c-5.735-3.273-11.4-6.398-17.219-9.413l-.066-.032c-12.547-5.416-25.459-9.837-38.379-13.139l-2.233-.563c-10.238-2.551-21.443-4.901-35.655-7.477l-9.452-1.694c-1.537-.277-3.051-.552-4.545-.825l-3.732-.687-2.514-.469-3.59-.676-1.796-.344-3.274-.636-1.95-.384-3.295-.658-1.788-.366-3.524-.728c-.949-.199-1.894-.405-2.84-.608l-.591-.126c-.539-.115-1.078-.229-1.615-.347-14.382-3.144-27.244-6.797-39.322-11.163a218.82 218.82 0 01-9.406-3.645c-9.169-3.803-17.92-8.182-26.125-13.066l-.279-.162c-9.917-5.981-19.604-12.98-28.777-20.894l-1.144-.994-.654-.57c-.389-.338-.778-.676-1.163-1.02-9.55-8.551-18.812-18.102-28.316-29.201-8.47-9.886-16.85-20.337-24.714-30.283l-3.029-3.833c-9.828-12.4-17.695-21.758-25.346-30.158-7.939-8.71-16.62-17.003-25.89-24.728h-3.138c9.865 8.07 19.126 16.835 27.547 26.073l1.013 1.116c7.109 7.86 14.507 16.678 23.615 28.146l5.354 6.767c7.38 9.31 15.181 18.996 23.065 28.2 9.568 11.168 18.891 20.782 28.501 29.389.324.29.652.575.98.86l.6.522.579.51c.552.486 1.104.973 1.662 1.45l.286.24c8.422 7.173 17.248 13.598 26.321 19.144l1.441.872.463.272c8.276 4.93 17.114 9.352 26.381 13.194a220.411 220.411 0 009.496 3.683c12.134 4.391 25.079 8.065 39.575 11.235l1.099.236 3.958.844 1.705.353c1.208.251 2.418.502 3.637.749l3.247.648 2.677.527 3.178.614 3.25.617 2.998.563 4.977.917 5.067.919 8.782 1.575c15.209 2.756 26.956 5.251 37.752 8.01 12.776 3.264 25.577 7.645 38.047 13.024l1.904 1 .789.414c.531.278 1.063.557 1.591.839l1.105.598c1.069.574 2.137 1.148 3.2 1.73l1.089.604.006.003c1.053.581 2.107 1.162 3.159 1.751l1.608.91c.877.493 1.753.986 2.628 1.485l3.042 1.748 2.079 1.202c4.012 2.329 8.022 4.698 12.057 7.091l100.266 59.981-15.19 8.422-92.779-55.501c-10.863-6.503-22.453-13.383-34.263-19.76-11.843-5.511-24.426-10.458-37.446-14.719-12.293-3.312-25.504-6.48-40.387-9.682l-4.924-1.062c-11.569-2.504-23.679-5.197-35.642-8.211-14.103-3.551-26.783-7.514-38.762-12.117-12.569-4.829-24.546-10.625-35.596-17.23-11.007-6.555-21.797-14.378-31.99-23.144-9.691-8.335-19.142-17.58-28.897-28.263-8.313-9.103-16.341-18.416-23.934-27.33l-5.251-6.169c-9.047-10.589-17.348-19.903-25.346-28.435-9.762-9.395-19.915-18.108-30.223-25.931-5.842-3.907-11.708-7.64-17.952-11.493h-3.842c7.293 4.462 13.996 8.696 20.624 13.13 10.231 7.766 20.324 16.427 29.962 25.706l1.775 1.9c7.715 8.294 15.754 17.361 24.482 27.613l5.88 6.91c7.932 9.29 15.017 17.432 22.341 25.455 9.833 10.764 19.341 20.065 29.07 28.432a240.266 240.266 0 0015.696 12.406c.753.545 1.51 1.077 2.268 1.61l.378.266 1.303.923c.887.614 1.779 1.213 2.671 1.811l.142.095 1.279.865.93.603.931.6.407.263c.673.437 1.347.873 2.024 1.299l.436.268c1.113.698 2.228 1.391 3.349 2.065l.453.271c11.169 6.669 23.249 12.517 35.904 17.38 12.032 4.626 24.787 8.613 38.991 12.187 12.789 3.22 26.028 6.14 37.738 8.667l2.894.624c14.849 3.194 28.027 6.353 40.236 9.643 12.907 4.223 25.405 9.136 37.149 14.602 11.083 5.989 21.888 12.372 32.07 18.466l93.812 56.122-15.191 8.421-84.3-50.429c-10.283-6.155-20.389-12.172-30.664-17.976l-3.474-1.95c-11.758-5.82-24.11-11.14-36.755-15.829-11.699-3.754-24.048-7.317-37.696-10.878l-8.257-2.141c-10.959-2.847-22.15-5.798-33.191-8.973-13.907-3.999-26.402-8.276-38.201-13.075-11.934-4.857-23.372-10.492-34.022-16.762l-1.878-1.116c-10.885-6.542-21.554-14.117-31.716-22.519-9.807-8.105-19.447-17.042-29.472-27.323l-1.878-1.931c-7.8-8.046-15.334-16.143-24.014-25.537l-2.106-2.28c-9.989-10.819-19.25-20.356-28.345-29.185-9.967-8.87-20.342-17.2-30.88-24.79-10.291-6.67-20.91-13.102-31.01-19.154L71.17 0h-3.91l12.012 7.186c10.623 6.356 21.932 13.164 33.066 20.378 10.437 7.52 20.76 15.807 30.647 24.604 9.031 8.771 18.267 18.282 28.237 29.077l4.565 4.94c7.373 7.969 15.399 16.577 23.471 24.848 10.079 10.334 19.771 19.32 29.627 27.469 10.238 8.463 20.983 16.092 31.947 22.682l.512.307c11.127 6.651 23.132 12.612 35.68 17.72 11.863 4.828 24.424 9.129 38.401 13.143 13.393 3.846 27.415 7.479 39.784 10.683l3.168.827c13.095 3.443 24.943 6.873 36.091 10.45 12.542 4.652 24.829 9.943 36.478 15.707 11.436 6.383 22.627 13.042 34.038 19.872l83.312 49.837-15.188 8.419-83.375-49.87c-8.949-5.339-17.01-10.109-25.31-14.885l-1.167-.669a445.552 445.552 0 00-36.095-16.888c-12.157-4.498-25.091-8.851-38.44-12.94l-12.683-3.877c-3.222-.987-6.465-1.985-9.711-2.992a1326.146 1326.146 0 01-16.497-5.223c-13.752-4.464-26.065-9.053-37.641-14.029-12.329-5.297-24.177-11.33-35.222-17.93-11.016-6.575-21.952-14.167-32.423-22.488l-.885-.709-.885-.715c-8.445-6.798-16.887-14.192-25.668-22.487l-1.74-1.647-.875-.833c-6.61-6.333-13.23-12.856-19.721-19.291l-9.127-9.06c-9.831-9.756-19.681-19.025-29.305-27.578a450.321 450.321 0 00-31.508-23.698l-1.346-.838c-9.307-5.829-18.72-11.514-28.315-17.26L37.99 0h-3.896l36.507 21.838c7.908 4.73 15.682 9.398 23.36 14.11l2.923 1.805 2.914 1.81c.417.26.836.52 1.254.778.894.554 1.789 1.109 2.679 1.668a448.243 448.243 0 0131.305 23.547c9.573 8.506 19.396 17.751 29.196 27.478l9.203 9.136c6.472 6.417 13.074 12.923 19.671 19.24l1.028.976 1.024.969c8.639 8.189 16.952 15.511 25.26 22.246l1.247 1.006.674.544c.32.258.639.517.959.771 10.037 7.981 20.471 15.299 31.122 21.728l1.526.914c11.118 6.645 23.049 12.719 35.457 18.052 11.634 5 24.004 9.611 37.814 14.094 2.744.89 5.505 1.773 8.274 2.649 1.479.467 2.962.927 4.443 1.389l1.234.387c.824.259 1.649.518 2.474.774 3.406 1.057 6.809 2.104 10.189 3.139l12.309 3.763c13.313 4.078 26.21 8.418 38.296 12.889a446.07 446.07 0 0135.864 16.78c9.992 5.735 19.775 11.549 30.386 17.895l78.389 46.892-15.194 8.425-77.43-46.317a3615.384 3615.384 0 00-23.849-14.143 535.697 535.697 0 00-35.491-17.853c-11.788-4.911-24.05-9.655-37.499-14.509l-13.016-4.542c-8.326-2.912-16.772-5.887-25.069-8.901-13.567-4.932-25.698-9.833-37.086-14.982-12.204-5.519-23.993-11.665-35.041-18.267a351.216 351.216 0 01-32.639-22.173c-9.931-7.588-19.948-15.916-30.627-25.458-8.047-7.191-16.135-14.595-24.017-21.83l-5.649-5.187c-10.488-9.436-20.367-17.939-30.228-26.016a533.817 533.817 0 00-32.08-22.7l-2.994-1.831C82.682 46.58 72.182 40.299 62.823 34.704L4.807 0H.912L72.92 43.08A2667.18 2667.18 0 0195.09 56.503a531.987 531.987 0 0131.911 22.578c9.808 8.036 19.665 16.519 30.123 25.928l2.765 2.54c8.788 8.069 17.874 16.411 26.914 24.489 10.716 9.576 20.773 17.935 30.744 25.556 9.896 7.563 20.119 14.569 30.425 20.849l2.402 1.451c11.113 6.641 22.97 12.822 35.243 18.372 11.435 5.17 23.613 10.091 37.228 15.04 8.306 3.017 16.758 5.995 25.089 8.908l13.009 4.54c13.408 4.839 25.642 9.572 37.368 14.457a533.965 533.965 0 0135.304 17.759l2.985 1.755a4160.789 4160.789 0 0122.852 13.576L535.843 320l17.217-9.546.008.005 19.242-10.667-.003-.002 17.213-9.543-.004-.002 17.241-9.558-.003-.002 17.212-9.543-.001-.001 15.193-8.424.015.009 19.243-10.669-.017-.011 15.2-8.423.012.007 19.242-10.679-.011-.007 15.214-8.434.015.009 11.395-6.319.158-8.949-.032-.019.302-17.325.02.012.384-21.951-.018-.01.304-17.347.017.011.383-21.951-.005-.003.302-17.333.004.002.382-21.95-.011-.007.344-19.635L602.072 0h-3.894L719.98 72.867l-.303 17.33-102.535-61.341-7.049-4.107-7.64-4.461c-4.239-2.476-8.479-4.953-12.725-7.424l-6.674-3.872-2.309-1.327A778.468 778.468 0 00567.066 0h-4.202c5.968 3.215 12.285 6.749 19.184 10.726a4181.24 4181.24 0 0113.15 7.649l7.533 4.4c4.465 2.608 8.928 5.216 13.385 7.806l103.532 61.937-.302 17.328-110.945-66.372-19.166-11.105a2476.893 2476.893 0 00-15.007-8.622c-12.604-7.122-24.165-13.031-35.347-18.067A373.292 373.292 0 00525.486 0h-5.465a376.339 376.339 0 0118.035 7.506c11.125 5.01 22.633 10.892 35.182 17.984A2660.44 2660.44 0 01590.989 35.7l12.877 7.464 3.517 2.034 111.918 66.953-.302 17.334-119.342-71.396-12.521-7.206c-7.176-4.127-14.49-8.302-21.782-12.332-12.421-6.827-24.185-12.421-35.962-17.105-1.516-.6-3.046-1.19-4.589-1.77-10.806-4.067-22.282-7.67-34.189-10.734-9.091-2.324-18.353-4.392-27.412-6.295-3.021-.635-6.02-1.253-8.982-1.854L450.3 0h-9.853c2.507.54 5.097 1.08 7.781 1.623l1.19.24c13.106 2.628 27.11 5.54 40.699 9.015a370.4 370.4 0 015.046 1.338c11.707 3.197 22.952 6.92 33.492 11.09 11.72 4.662 23.408 10.222 35.735 16.996 6.44 3.562 12.9 7.237 19.266 10.89l14.983 8.622 120.325 71.983-.302 17.335-93.969-56.217-10.422-6.176c-4.801-2.849-9.609-5.696-14.422-8.543-1.202-.711-2.402-1.423-3.602-2.135a2375.985 2375.985 0 00-5.41-3.203l-3.604-2.12c-9.694-5.69-20.038-11.642-30.765-17.346-12.322-6.525-24.316-11.757-36.67-15.989-12.4-4.23-25.9-7.693-40.126-10.298-13.015-2.383-26.346-4.282-39.321-6.094l-2.987-.417c-16.378-2.284-29.489-4.811-41.267-7.95C384.335 9.511 373.496 5.264 363.804 0h-4.102c10.613 6.161 22.673 11.065 35.873 14.583 11.859 3.16 25.047 5.7 41.505 7.996l5.978.835c12.006 1.685 24.268 3.47 36.248 5.662 14.127 2.587 27.533 6.027 39.839 10.223 12.25 4.2 24.15 9.388 36.378 15.866 12.032 6.395 23.592 13.114 34.293 19.42l9.022 5.336c4.807 2.844 9.613 5.69 14.41 8.537l9.203 5.462 96.153 57.517-.304 17.337-91.088-54.493-1.005-.6-10.289-6.156-.864-.513c-7.208-4.278-14.418-8.556-21.639-12.828l-11.341-6.697-3.644-2.139c-9.796-5.733-20.213-11.667-30.881-17.1-12.225-6.18-24.819-11.15-37.435-14.772-12.55-3.585-26.099-6.252-41.42-8.152-10.731-1.331-21.784-2.408-32.573-3.433l-10.945-1.038c-16.544-1.586-29.916-3.67-42.083-6.562-13.402-3.188-25.541-7.93-36.101-14.107l-1.089-.646C337.306 14.371 329.064 7.818 321.325 0h-2.798c7.986 8.28 16.517 15.224 25.435 20.699l1.109.672c10.943 6.546 23.582 11.549 37.567 14.87 12.256 2.912 25.714 5.011 42.354 6.606l14.532 1.381c9.629.922 19.412 1.904 28.931 3.085 15.215 1.886 28.665 4.534 41.116 8.09 12.489 3.584 24.966 8.509 37.081 14.633 10.619 5.409 21.008 11.325 30.779 17.044l3.696 2.17c10.23 6.033 20.434 12.084 30.622 18.128l106.529 63.712-.304 17.339-110.852-66.315c-4.859-2.885-9.723-5.77-14.591-8.654l-19.185-11.345-2.584-1.516c-11.514-6.739-21.542-12.354-32.112-17.48-12.288-5.92-25.144-10.475-38.208-13.537-12.624-2.959-26.519-5.042-42.481-6.368-7.233-.602-14.611-1.115-21.889-1.597l-13.793-.907-8.66-.584a425.314 425.314 0 01-6.015-.464c-13.793-1.166-25.794-2.905-36.536-5.29-13.526-3.002-25.737-7.657-36.307-13.84l-1.039-.616c-10.685-6.422-20.774-15.094-29.988-25.776-3.723-4.317-7.449-9.01-11.222-14.14z" fill="url(#illustration-01)" />
-    </svg>
-  );
-}
-
-export default PageIllustration;
\ No newline at end of file
diff --git a/Frontend/sections/SuccessModal.tsx b/Frontend/sections/SuccessModal.tsx
deleted file mode 100644
index bb552e5..0000000
--- a/Frontend/sections/SuccessModal.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import CheckBox from "@/images/check-box.svg";
-import Image from "next/image";
-
-function SuccessModal() {
-  return (
-    <div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
-      <Image className=" w-[90px] md:w-[130px] p-5" src={CheckBox} alt={""} />
-      <p>Thanks for Signing Up!</p>
-      <p>We Hope You Are Excited To See</p>
-      <p>Sign365 In Action</p>
-    </div>
-  );
-}
-
-export default SuccessModal;
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index 3902963..4e3e8dc 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -87,7 +87,7 @@ const config: Config = {
         dark: {
           primary: "#FD5469",
           "primary-content": "#fff",
-          secondary: "#002eff",
+          secondary: "#FD40FF",
           "secondary-content": "#fff",
           accent: "#006cff",
           neutral: "#060206",