From 5d624512df3e6dbd215a422cb0564ddb56a0b9dd Mon Sep 17 00:00:00 2001
From: James Wyndham <samwyn@xam.com.au>
Date: Thu, 15 Feb 2024 15:53:22 +0800
Subject: [PATCH] feature - first pass genericizing FE

---
 Frontend/app/(admin)/blogs/page.tsx           |   4 +-
 Frontend/app/(admin)/pricing/page.tsx         |  14 +-
 Frontend/app/(admin)/signup/page.tsx          |   6 +-
 Frontend/app/layout.tsx                       |  25 +-
 Frontend/app/page.tsx                         |  18 +-
 Frontend/app/providers.js                     |  10 +-
 Frontend/components/Header.tsx                |  83 ++--
 Frontend/components/Spacer.tsx                |  12 +
 Frontend/package.json                         |   2 +-
 Frontend/pages/LandingPage.tsx                |  65 +++
 Frontend/pages/LandingPageWaitingList.tsx     | 159 +++++++
 .../CenterAllignedWithVideoHero.tsx           |  34 ++
 .../HeroSections/SquaredBackgroundHero.tsx    | 402 ++++++++++++++++++
 Frontend/sections/HeroSections/index.ts       |   6 +
 Frontend/sections/PageHeader.tsx              |   2 +-
 .../sections/{HeroVideo.tsx => Video.tsx}     |   4 +-
 Frontend/tailwind.config.ts                   |   2 +-
 17 files changed, 767 insertions(+), 81 deletions(-)
 create mode 100644 Frontend/components/Spacer.tsx
 create mode 100644 Frontend/pages/LandingPage.tsx
 create mode 100644 Frontend/pages/LandingPageWaitingList.tsx
 create mode 100644 Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx
 create mode 100644 Frontend/sections/HeroSections/SquaredBackgroundHero.tsx
 create mode 100644 Frontend/sections/HeroSections/index.ts
 rename Frontend/sections/{HeroVideo.tsx => Video.tsx} (91%)

diff --git a/Frontend/app/(admin)/blogs/page.tsx b/Frontend/app/(admin)/blogs/page.tsx
index 5ae41e7..cbe3e64 100644
--- a/Frontend/app/(admin)/blogs/page.tsx
+++ b/Frontend/app/(admin)/blogs/page.tsx
@@ -10,7 +10,7 @@ export default function BlogsPage() {
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
     .map((post) => <BlogCard key={post.slug} {...post} />);
   return (
-    <>
+    <main id="content" role="main" className="h-full flex-grow flex flex-col">
       {/*  Page sections */}
       <PageHeader
         title="Blogs"
@@ -29,6 +29,6 @@ export default function BlogsPage() {
           {postPreviews}
         </div>
       </div>
-    </>
+    </main>
   );
 }
diff --git a/Frontend/app/(admin)/pricing/page.tsx b/Frontend/app/(admin)/pricing/page.tsx
index ea8a1c1..52dde22 100644
--- a/Frontend/app/(admin)/pricing/page.tsx
+++ b/Frontend/app/(admin)/pricing/page.tsx
@@ -26,25 +26,29 @@ export default function PricingPage() {
   }, []);
 
   return (
-    <>
+    <main
+      id="content"
+      role="main"
+      className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden"
+    >
       <PageHeader
         title="Pricing"
         subtitle={
           <>
             {" "}
-            <h2 className="h3 text-white text-center max-w-6xl mx-auto px-6">
+            <h2 className="h3 text-primary-content content text-center max-w-6xl mx-auto px-6">
               Select a subscription plan for your team or try advanced
               functionality for free.
             </h2>
           </>
         }
       />
-      <div className="w-full flex items-center justify-center mt-10">
+      <div className="flex items-center justify-center mt-10">
         <PriceToggle isAnnual={isAnnual} onChange={handleToggle} />
       </div>
       <div className="max-w-6xl mx-auto  mb-24 h-full">
         <div
-          className={`w-full flex gap-x-4 lg:justify-center gap-y-8 px-6  pt-12 overflow-x-scroll`}
+          className={`w-screen lg:w-full flex gap-x-4 lg:justify-center gap-y-8 px-6  pt-12 overflow-x-scroll`}
         >
           {products.map((x, i) => (
             <PriceCard key={i} product={x} isAnnual={isAnnual} />
@@ -52,7 +56,7 @@ export default function PricingPage() {
         </div>
       </div>
       <Newsletter />
-    </>
+    </main>
   );
 }
 
diff --git a/Frontend/app/(admin)/signup/page.tsx b/Frontend/app/(admin)/signup/page.tsx
index 47e5da3..d791170 100644
--- a/Frontend/app/(admin)/signup/page.tsx
+++ b/Frontend/app/(admin)/signup/page.tsx
@@ -3,7 +3,7 @@ import HeroHome from "@/sections/HeroHome";
 import FeaturesBlocks from "@/sections/FeaturesBlocks";
 import FeaturesZigZag from "@/sections/FeaturesZigzag";
 import Newsletter from "@/sections/Newsletter/Newsletter";
-import HeroVideo from "@/sections/HeroVideo";
+import HeroVideo from "@/sections/Video";
 import Aos from "aos";
 import "aos/dist/aos.css";
 import { useEffect } from "react";
@@ -20,7 +20,9 @@ export default function Home() {
     });
   }, []);
   useEffect(() => {
-    document.getElementById("sign-up-modal")?.setAttribute("name", SourceModal.SignUp);
+    document
+      .getElementById("sign-up-modal")
+      ?.setAttribute("name", SourceModal.SignUp);
     document.getElementById("sign-up-modal")?.removeAttribute("price_id");
     document.getElementById("sign-up-modal")?.click();
   }, []);
diff --git a/Frontend/app/layout.tsx b/Frontend/app/layout.tsx
index 7476d5d..4d2a0b9 100644
--- a/Frontend/app/layout.tsx
+++ b/Frontend/app/layout.tsx
@@ -8,10 +8,7 @@ import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import { cookies } from "next/headers";
 import { isAuthenticated } from "@/lib/auth";
-import Script from "next/script";
-import React from "react";
-import { PHProvider } from "./providers";
-import GoogleAnalytics from "@/components/GoogleAnalytics";
+import { GTagProvider, PHProvider } from "./providers";
 import PrelineScript from "@/components/PrelineScript";
 
 const raleway = Raleway({
@@ -37,23 +34,20 @@ export default async function RootLayout({
 }) {
   const isUserLoggedIn = await isAuthenticated(cookies());
   return (
-    <html lang="en">
+    <html lang="en" className="h-full">
       <PHProvider>
-        <body className={`${arimo.className} bg-white dark:bg-black`}>
-          {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
-            <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
-          ) : null}
-          <main className="flex flex-col min-h-screen overflow-hidden h-full">
-            {/*  Page content */}
+        <GTagProvider />
+        <body className={`${arimo.className} bg-black flex`}>
+          <Header isUserLoggedIn={isUserLoggedIn} />
+          {/* <main className="flex flex-col min-h-screen overflow-hidden h-full">
             <div className="grow h-full">
-              {/*  Site header */}
               <div className="h-full md:h-auto ">
-                <Header isUserLoggedIn={isUserLoggedIn} />
 
                 {children}
               </div>
             </div>
-          </main>
+          </main> */}
+          {children}
           <ToastContainer
             position="bottom-left"
             autoClose={5000}
@@ -66,9 +60,6 @@ export default async function RootLayout({
             pauseOnHover
             theme="colored"
           />
-
-          {/*  Site footer */}
-          <Footer />
         </body>
         <PrelineScript />
       </PHProvider>
diff --git a/Frontend/app/page.tsx b/Frontend/app/page.tsx
index d07e0bc..80cc7b4 100644
--- a/Frontend/app/page.tsx
+++ b/Frontend/app/page.tsx
@@ -3,13 +3,19 @@ import HeroHome from "@/sections/HeroHome";
 import FeaturesBlocks from "@/sections/FeaturesBlocks";
 import FeaturesZigZag from "@/sections/FeaturesZigzag";
 import Newsletter from "@/sections/Newsletter/Newsletter";
-import HeroVideo from "@/sections/HeroVideo";
 import Aos from "aos";
 import "aos/dist/aos.css";
 import { useEffect } from "react";
 import React from "react";
 import { FrequentlyAsked } from "@/sections/FrequentlyAsked";
 import { Testimonial } from "@/sections/Testimonial";
+import {
+  CenterAllignedWithVideoHero,
+  SquaredBackgroundHero,
+} from "@/sections/HeroSections";
+import Spacer from "@/components/Spacer";
+import LandingPage from "@/pages/LandingPage";
+import LandingPageWaitingList from "@/pages/LandingPageWaitingList";
 
 export default function Home() {
   useEffect(() => {
@@ -24,13 +30,17 @@ export default function Home() {
   return (
     <>
       {/*  Page sections */}
-      <HeroHome />
-      <HeroVideo />
+      {/* <HeroHome /> */}
+      {/* <Spacer className="pt-32" /> */}
+      {/* <CenterAllignedWithVideoHero /> */}
+      {/* <SquaredBackgroundHero />
       <FeaturesBlocks />
       <FeaturesZigZag />
       <FrequentlyAsked />
       <Testimonial />
-      <Newsletter />
+      <Newsletter /> */}
+      <LandingPage />
+      {/* <LandingPageWaitingList /> */}
     </>
   );
 }
diff --git a/Frontend/app/providers.js b/Frontend/app/providers.js
index 19216f4..0d69412 100644
--- a/Frontend/app/providers.js
+++ b/Frontend/app/providers.js
@@ -1,6 +1,8 @@
-'use client'
+'use client';
 import posthog from 'posthog-js'
 import { PostHogProvider } from 'posthog-js/react'
+import GoogleAnalytics from "@/components/GoogleAnalytics";
+
 
 if (typeof window !== 'undefined') {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
@@ -10,4 +12,10 @@ if (typeof window !== 'undefined') {
 
 export function PHProvider({ children }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
+
+export function GTagProvider() {
+  return process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
+    <GoogleAnalytics ga_id={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
+  ) : <></>
 }
\ No newline at end of file
diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index a49eefd..beda630 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -15,42 +15,7 @@ interface HeaderProps {
   isUserLoggedIn: boolean;
 }
 
-const signUpButton = {
-  onClick: () => {
-    document
-      .getElementById("sign-up-modal")
-      ?.setAttribute("name", SourceModal.SignUp);
-    document.getElementById("sign-up-modal")?.removeAttribute("price_id");
-    document.getElementById("sign-up-modal")?.click();
-  },
-  text: "Sign Up",
-  buttonColor: "bg-pink-700",
-  buttonHover: "hover:bg-pink-700",
-};
-const signOutButton = {
-  onClick: () => logout(),
-  text: "Logout",
-  buttonColor: "bg-red-300",
-  buttonHover: "hover:bg-red-600",
-};
-const signInButton = {
-  onClick: async (router?: AppRouterInstance) => {
-    const authCookie = await getAuthCookie();
-    pb.authStore.loadFromCookie(authCookie || "");
-    if (!authCookie || !pb.authStore.isValid) {
-      document.getElementById("sign-in-modal")?.setAttribute("name", "signIn");
-      document.getElementById("sign-in-modal")?.click();
-    } else {
-      router?.push("/account");
-    }
-  },
-  text: "SignIn",
-  buttonColor: "text-pink-500",
-  buttonHover: "hover:text-pink-700",
-};
 function Header({ isUserLoggedIn }: HeaderProps) {
-  const router = useRouter();
-  const button = isUserLoggedIn ? signOutButton : signUpButton;
   return (
     <header className="absolute w-full z-30">
       <div className="max-w-5xl mx-auto px-4 sm:px-6 md:pt-6">
@@ -61,20 +26,48 @@ function Header({ isUserLoggedIn }: HeaderProps) {
           <nav className=" md:flex md:grow">
             {/* Desktop sign in links */}
             <div className="flex flex-row grow items-center pr-2">
-              {!isUserLoggedIn && (
+              {!isUserLoggedIn ? (
+                <>
+                  <button
+                    onClick={() => async (router?: AppRouterInstance) => {
+                      const authCookie = await getAuthCookie();
+                      pb.authStore.loadFromCookie(authCookie || "");
+                      if (!authCookie || !pb.authStore.isValid) {
+                        document
+                          .getElementById("sign-in-modal")
+                          ?.setAttribute("name", "signIn");
+                        document.getElementById("sign-in-modal")?.click();
+                      } else {
+                        router?.push("/account");
+                      }
+                    }}
+                    className={`btn-sm cursor-pointer rounded py-5 w-24 text-primary hover:text-primary/70`}
+                  >
+                    Sign In
+                  </button>
+                  <button
+                    onClick={() => {
+                      document
+                        .getElementById("sign-up-modal")
+                        ?.setAttribute("name", SourceModal.SignUp);
+                      document
+                        .getElementById("sign-up-modal")
+                        ?.removeAttribute("price_id");
+                      document.getElementById("sign-up-modal")?.click();
+                    }}
+                    className={`btn-sm cursor-pointer py-5 w-24 text-primary-content ml-3 bg-primary hover:bg-primary/70`}
+                  >
+                    Sign Up
+                  </button>
+                </>
+              ) : (
                 <button
-                  onClick={() => signInButton.onClick(router)}
-                  className={`btn-sm cursor-pointer rounded py-5 w-24 ${signInButton.buttonColor} ${signInButton.buttonHover}`}
+                  onClick={() => logout()}
+                  className={`btn-sm cursor-pointer py-5 w-24 text-primary-content ml-3 bg-error hover:bg-error/70`}
                 >
-                  {signInButton.text}
+                  Logout
                 </button>
               )}
-              <button
-                onClick={button.onClick}
-                className={`btn-sm cursor-pointer rounded py-5 w-24 text-white ml-3 ${button.buttonColor} ${button.buttonHover}`}
-              >
-                {button.text}
-              </button>
             </div>
           </nav>
         </div>
diff --git a/Frontend/components/Spacer.tsx b/Frontend/components/Spacer.tsx
new file mode 100644
index 0000000..36fbb16
--- /dev/null
+++ b/Frontend/components/Spacer.tsx
@@ -0,0 +1,12 @@
+import React, { ReactHTMLElement } from "react";
+
+const Spacer = (
+  props: React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  >
+) => {
+  return <div {...props}></div>;
+};
+
+export default Spacer;
diff --git a/Frontend/package.json b/Frontend/package.json
index c2afcfb..ab88b60 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "sign365website",
+  "name": "fastpocket",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/Frontend/pages/LandingPage.tsx b/Frontend/pages/LandingPage.tsx
new file mode 100644
index 0000000..4160bc0
--- /dev/null
+++ b/Frontend/pages/LandingPage.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+
+const LandingPage = () => {
+  return (
+    <div className="h-screen max-w-[50rem] flex flex-col my-auto mx-auto size-full flex-grow">
+      {/* ========== END HEADER ========== */}
+      {/* ========== MAIN CONTENT ========== */}
+      <main
+        id="content"
+        role="main"
+        className="h-full flex items-center justify-center"
+      >
+        <div className="text-center py-10 px-4 sm:px-6 lg:px-8">
+          <h1 className="block text-2xl font-bold text-white sm:text-4xl">
+            Cover Page
+          </h1>
+          <p className="mt-3 text-lg text-gray-300">
+            Cover is a one-page template for building simple and beautiful home
+            pages using Tailwind CSS.
+          </p>
+          <div className="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
+            <a
+              className="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+              href="#"
+            >
+              <svg
+                className="flex-shrink-0 size-4"
+                xmlns="http://www.w3.org/2000/svg"
+                width={24}
+                height={24}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="m15 18-6-6 6-6" />
+              </svg>
+              Back to examples
+            </a>
+          </div>
+        </div>
+      </main>
+      {/* ========== END MAIN CONTENT ========== */}
+      {/* ========== FOOTER ========== */}
+      <footer className="mt-auto text-center py-5">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-sm text-gray-400">
+            Cover template for{" "}
+            <a
+              className="text-white decoration-2 underline underline-offset-2 font-medium hover:text-gray-200 hover:decoration-gray-400"
+              href="../index.html"
+            >
+              Biz365
+            </a>
+          </p>
+        </div>
+      </footer>
+      {/* ========== END FOOTER ========== */}
+    </div>
+  );
+};
+
+export default LandingPage;
diff --git a/Frontend/pages/LandingPageWaitingList.tsx b/Frontend/pages/LandingPageWaitingList.tsx
new file mode 100644
index 0000000..3cd0cf3
--- /dev/null
+++ b/Frontend/pages/LandingPageWaitingList.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+
+const LandingPageWaitingList = () => {
+  return (
+    <>
+      {/* ========== MAIN CONTENT ========== */}
+      <main
+        id="content"
+        role="main"
+        className="relative max-w-3xl px-4 sm:px-6 lg:px-8 flex flex-col justify-center sm:items-center mx-auto size-full before:absolute before:top-0 before:start-1/2 before:bg-[url('https://preline.co/assets/svg/examples-dark/squared-bg-element.svg')] before:bg-no-repeat before:bg-top before:size-full before:-z-[1] before:transform before:-translate-x-1/2"
+      >
+        <div className="text-center py-8 px-4 sm:px-6 lg:px-8">
+          <svg
+            className="w-20 sm:w-28 h-auto mx-auto mb-4 sm:mb-8"
+            width={116}
+            height={41}
+            viewBox="0 0 116 41"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M33.5696 34.3182V14.8182H37.4474V17.2003H37.6229C37.7952 16.8187 38.0445 16.4309 38.3707 16.0369C38.7031 15.6368 39.134 15.3045 39.6634 15.0398C40.1989 14.7689 40.8636 14.6335 41.6577 14.6335C42.6918 14.6335 43.6458 14.9044 44.5199 15.446C45.3939 15.9815 46.0926 16.791 46.6158 17.8743C47.139 18.9515 47.4006 20.3026 47.4006 21.9276C47.4006 23.5095 47.1451 24.8452 46.6342 25.9347C46.1295 27.018 45.4401 27.8397 44.5661 28.3999C43.6982 28.9538 42.7256 29.2308 41.6484 29.2308C40.8852 29.2308 40.2358 29.1046 39.7003 28.8523C39.1709 28.5999 38.737 28.2829 38.3984 27.9013C38.0599 27.5135 37.8014 27.1226 37.6229 26.7287H37.5028V34.3182H33.5696ZM37.4197 21.9091C37.4197 22.7524 37.5367 23.4879 37.7706 24.1158C38.0045 24.7436 38.343 25.233 38.7862 25.5838C39.2294 25.9285 39.768 26.1009 40.402 26.1009C41.0421 26.1009 41.5838 25.9254 42.027 25.5746C42.4702 25.2176 42.8056 24.7251 43.0334 24.0973C43.2673 23.4633 43.3842 22.7339 43.3842 21.9091C43.3842 21.0904 43.2704 20.3703 43.0426 19.7486C42.8149 19.1269 42.4794 18.6406 42.0362 18.2898C41.593 17.9389 41.0483 17.7635 40.402 17.7635C39.7618 17.7635 39.2202 17.9328 38.777 18.2713C38.34 18.6098 38.0045 19.09 37.7706 19.7116C37.5367 20.3333 37.4197 21.0658 37.4197 21.9091ZM49.2427 29V14.8182H53.0559V17.2926H53.2037C53.4622 16.4124 53.8961 15.7476 54.5055 15.2983C55.1149 14.8428 55.8166 14.6151 56.6106 14.6151C56.8076 14.6151 57.02 14.6274 57.2477 14.652C57.4754 14.6766 57.6755 14.7105 57.8478 14.7536V18.2436C57.6632 18.1882 57.4077 18.139 57.0815 18.0959C56.7553 18.0528 56.4567 18.0312 56.1859 18.0312C55.6073 18.0312 55.0903 18.1574 54.6348 18.4098C54.1854 18.656 53.8284 19.0007 53.5638 19.4439C53.3052 19.8871 53.176 20.398 53.176 20.9766V29H49.2427ZM64.9043 29.277C63.4455 29.277 62.1898 28.9815 61.1373 28.3906C60.0909 27.7936 59.2845 26.9503 58.7182 25.8608C58.1519 24.7652 57.8688 23.4695 57.8688 21.9737C57.8688 20.5149 58.1519 19.2346 58.7182 18.1328C59.2845 17.031 60.0816 16.1723 61.1096 15.5568C62.1437 14.9413 63.3563 14.6335 64.7474 14.6335C65.683 14.6335 66.5539 14.7843 67.3603 15.0859C68.1728 15.3814 68.8806 15.8277 69.4839 16.4247C70.0932 17.0218 70.5672 17.7727 70.9057 18.6776C71.2443 19.5762 71.4135 20.6288 71.4135 21.8352V22.9155H59.4384V20.478H67.7111C67.7111 19.9117 67.588 19.41 67.3418 18.973C67.0956 18.536 66.754 18.1944 66.317 17.9482C65.8861 17.6958 65.3844 17.5696 64.812 17.5696C64.2149 17.5696 63.6856 17.7081 63.2239 17.9851C62.7684 18.2559 62.4114 18.6222 62.1529 19.0838C61.8944 19.5393 61.762 20.0471 61.7559 20.6072V22.9247C61.7559 23.6264 61.8851 24.2327 62.1437 24.7436C62.4083 25.2545 62.7807 25.6484 63.2608 25.9254C63.741 26.2024 64.3103 26.3409 64.9689 26.3409C65.406 26.3409 65.8061 26.2794 66.1692 26.1562C66.5324 26.0331 66.8432 25.8485 67.1018 25.6023C67.3603 25.3561 67.5572 25.0545 67.6927 24.6974L71.3304 24.9375C71.1458 25.8116 70.7672 26.5748 70.1948 27.2273C69.6285 27.8736 68.896 28.3783 67.9974 28.7415C67.1048 29.0985 66.0738 29.277 64.9043 29.277ZM77.1335 10.0909V29H73.2003V10.0909H77.1335ZM79.5043 29V14.8182H83.4375V29H79.5043ZM81.4801 12.9901C80.8954 12.9901 80.3937 12.7962 79.9752 12.4084C79.5628 12.0144 79.3566 11.5436 79.3566 10.9957C79.3566 10.4541 79.5628 9.98935 79.9752 9.60156C80.3937 9.20762 80.8954 9.01065 81.4801 9.01065C82.0649 9.01065 82.5635 9.20762 82.9759 9.60156C83.3944 9.98935 83.6037 10.4541 83.6037 10.9957C83.6037 11.5436 83.3944 12.0144 82.9759 12.4084C82.5635 12.7962 82.0649 12.9901 81.4801 12.9901ZM89.7415 20.8011V29H85.8083V14.8182H89.5569V17.3203H89.723C90.037 16.4955 90.5632 15.843 91.3019 15.3629C92.0405 14.8767 92.9361 14.6335 93.9887 14.6335C94.9735 14.6335 95.8322 14.849 96.5647 15.2798C97.2971 15.7107 97.8665 16.3262 98.2728 17.1264C98.679 17.9205 98.8821 18.8684 98.8821 19.9702V29H94.9489V20.6719C94.9551 19.804 94.7335 19.1269 94.2841 18.6406C93.8348 18.1482 93.2162 17.902 92.4283 17.902C91.8989 17.902 91.4311 18.0159 91.0249 18.2436C90.6248 18.4714 90.3109 18.8037 90.0831 19.2408C89.8615 19.6716 89.7477 20.1918 89.7415 20.8011ZM107.665 29.277C106.206 29.277 104.951 28.9815 103.898 28.3906C102.852 27.7936 102.045 26.9503 101.479 25.8608C100.913 24.7652 100.63 23.4695 100.63 21.9737C100.63 20.5149 100.913 19.2346 101.479 18.1328C102.045 17.031 102.842 16.1723 103.87 15.5568C104.905 14.9413 106.117 14.6335 107.508 14.6335C108.444 14.6335 109.315 14.7843 110.121 15.0859C110.934 15.3814 111.641 15.8277 112.245 16.4247C112.854 17.0218 113.328 17.7727 113.667 18.6776C114.005 19.5762 114.174 20.6288 114.174 21.8352V22.9155H102.199V20.478H110.472C110.472 19.9117 110.349 19.41 110.103 18.973C109.856 18.536 109.515 18.1944 109.078 17.9482C108.647 17.6958 108.145 17.5696 107.573 17.5696C106.976 17.5696 106.446 17.7081 105.985 17.9851C105.529 18.2559 105.172 18.6222 104.914 19.0838C104.655 19.5393 104.523 20.0471 104.517 20.6072V22.9247C104.517 23.6264 104.646 24.2327 104.905 24.7436C105.169 25.2545 105.542 25.6484 106.022 25.9254C106.502 26.2024 107.071 26.3409 107.73 26.3409C108.167 26.3409 108.567 26.2794 108.93 26.1562C109.293 26.0331 109.604 25.8485 109.863 25.6023C110.121 25.3561 110.318 25.0545 110.454 24.6974L114.091 24.9375C113.907 25.8116 113.528 26.5748 112.956 27.2273C112.389 27.8736 111.657 28.3783 110.758 28.7415C109.866 29.0985 108.835 29.277 107.665 29.277Z"
+              fill="white"
+            />
+            <path
+              d="M1 33V20C1 13.3726 6.37258 8 13 8C19.6274 8 25 13.3726 25 20C25 26.6274 19.6274 32 13 32H12"
+              stroke="white"
+              strokeWidth={2}
+            />
+            <path
+              d="M5 33V20.16C5 15.6534 8.58172 12 13 12C17.4183 12 21 15.6534 21 20.16C21 24.6666 17.4183 28.32 13 28.32H12"
+              stroke="white"
+              strokeWidth={2}
+            />
+            <circle cx={13} cy="20.0215" r={5} fill="white" />
+          </svg>
+          <h1 className="text-2xl text-primary-content sm:text-4xl">
+            Get notified when we launch
+          </h1>
+          <h2 className="mt-1 sm:mt-3 text-4xl font-bold text-primary-content sm:text-6xl">
+            <span className="bg-clip-text bg-gradient-to-tr from-primary to-secondary text-transparent">
+              Preline Pro
+            </span>
+          </h2>
+          <form>
+            <div className="mt-8 space-y-4">
+              <div>
+                <label
+                  htmlFor="hs-cover-with-gradient-form-name-1"
+                  className="sr-only"
+                >
+                  Full name
+                </label>
+                <div className="relative">
+                  <input
+                    type="text"
+                    id="hs-cover-with-gradient-form-name-1"
+                    className="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-primary-content placeholder:text-primary-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
+                    placeholder="Full name"
+                  />
+                  <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
+                    <svg
+                      className="flex-shrink-0 size-4 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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+                      <circle cx={12} cy={7} r={4} />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label
+                  htmlFor="hs-cover-with-gradient-form-email-1"
+                  className="sr-only"
+                >
+                  Email address
+                </label>
+                <div className="relative">
+                  <input
+                    type="email"
+                    id="hs-cover-with-gradient-form-email-1"
+                    className="py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-primary-content placeholder:text-primary-content rounded-lg text-sm focus:border-white/30 focus:ring-white/30 sm:p-4 sm:ps-11"
+                    placeholder="Email address"
+                  />
+                  <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
+                    <svg
+                      className="flex-shrink-0 size-4 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"
+                    >
+                      <rect width={20} height={16} x={2} y={4} rx={2} />
+                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div className="grid">
+                <button
+                  type="submit"
+                  className="sm:p-4 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white/10 text-primary-content hover:bg-white/20 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                >
+                  Join the waitlist
+                  <svg
+                    className="flex-shrink-0 size-4"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width={24}
+                    height={24}
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="m9 18 6-6-6-6" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </main>
+      {/* ========== END MAIN CONTENT ========== */}
+      {/* ========== FOOTER ========== */}
+      <footer className="absolute bottom-0 inset-x-0 text-center py-5">
+        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-sm text-primary-content/50">
+            © 2024 Fast Pocket. A product of{" "}
+            <a
+              className="text-primary-content font-medium hover:text-primary-content/80"
+              href="https://biz365.com.au"
+            >
+              Biz365
+            </a>
+          </p>
+        </div>
+      </footer>
+      {/* ========== END FOOTER ========== */}
+    </>
+  );
+};
+
+export default LandingPageWaitingList;
diff --git a/Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx b/Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx
new file mode 100644
index 0000000..dd0fd6b
--- /dev/null
+++ b/Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import Video from "../Video";
+
+const CenterAllignedWithVideoHero = () => {
+  return (
+    <>
+      {/* Hero */}
+      <div className="relative overflow-hidden">
+        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
+          <div className="max-w-2xl text-center mx-auto">
+            <h1 className="block text-3xl font-bold text-primary-content sm:text-4xl md:text-5xl">
+              Fast <span className="text-primary">Pocket</span>
+            </h1>
+            <p className="mt-3 text-lg text-primary-content">
+              Build your startup here. Launch it anywhere.
+            </p>
+          </div>
+          <div className="mt-10 relative max-w-5xl mx-auto">
+            <Video />
+            <div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-primary to-base-100 p-px rounded-lg">
+              <div className="bg-base-100 size-48 rounded-lg" />
+            </div>
+            <div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-secondary to-accent p-px rounded-full">
+              <div className="bg-base-100 size-48 rounded-full" />
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* End Hero */}
+    </>
+  );
+};
+
+export default CenterAllignedWithVideoHero;
diff --git a/Frontend/sections/HeroSections/SquaredBackgroundHero.tsx b/Frontend/sections/HeroSections/SquaredBackgroundHero.tsx
new file mode 100644
index 0000000..e2427de
--- /dev/null
+++ b/Frontend/sections/HeroSections/SquaredBackgroundHero.tsx
@@ -0,0 +1,402 @@
+import React from "react";
+
+const SquaredBackgroundHero = () => {
+  return (
+    <>
+      {/* Hero */}
+      <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Grid */}
+        <div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
+          <div>
+            <h1 className="block text-3xl font-bold text-primary-content sm:text-4xl lg:text-6xl lg:leading-tight">
+              Start your journey with{" "}
+              <span className="text-primary">Fast Pocket</span>
+            </h1>
+            <p className="mt-3 text-lg text-secondary-content">
+              Hand-picked professionals and expertly crafted components,
+              designed for any kind of entrepreneur.
+            </p>
+            {/* Buttons */}
+            <div className="mt-7 grid gap-3 w-full sm:inline-flex">
+              <a
+                className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                href="#"
+              >
+                Get started
+                <svg
+                  className="flex-shrink-0 size-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="m9 18 6-6-6-6" />
+                </svg>
+              </a>
+              <a
+                className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-base-100 bg-secondary text-primary-content shadow-sm hover:bg-opacity-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                href="#"
+              >
+                Contact sales team
+              </a>
+            </div>
+            {/* End Buttons */}
+            {/* Review */}
+            <div className="mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
+              {/* Review */}
+              <div className="py-5">
+                <div className="flex space-x-1">
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <p className="mt-3 text-sm text-primary-content">
+                  <span className="font-bold">4.6</span> /5 - from 12k reviews
+                </p>
+                <div className="mt-5">
+                  {/* Star */}
+                  <svg
+                    className="h-auto w-16 text-primary-content"
+                    width={80}
+                    height={27}
+                    viewBox="0 0 80 27"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M20.558 9.74046H11.576V12.3752H17.9632C17.6438 16.0878 14.5301 17.7245 11.6159 17.7245C7.86341 17.7245 4.58995 14.7704 4.58995 10.6586C4.58995 6.62669 7.70373 3.51291 11.6159 3.51291C14.6498 3.51291 16.4063 5.42908 16.4063 5.42908L18.2426 3.51291C18.2426 3.51291 15.8474 0.878184 11.4961 0.878184C5.94724 0.838264 1.67578 5.50892 1.67578 10.5788C1.67578 15.5289 5.70772 20.3592 11.6558 20.3592C16.8854 20.3592 20.7177 16.8063 20.7177 11.4969C20.7177 10.3792 20.558 9.74046 20.558 9.74046Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M27.8621 7.78442C24.1894 7.78442 21.5547 10.6587 21.5547 14.012C21.5547 17.4451 24.1096 20.3593 27.9419 20.3593C31.415 20.3593 34.2094 17.7645 34.2094 14.0918C34.1695 9.94011 30.896 7.78442 27.8621 7.78442ZM27.902 10.2994C29.6984 10.2994 31.415 11.7764 31.415 14.0918C31.415 16.4072 29.7383 17.8842 27.902 17.8842C25.906 17.8842 24.3491 16.2874 24.3491 14.0519C24.3092 11.8962 25.8661 10.2994 27.902 10.2994Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M41.5964 7.78442C37.9238 7.78442 35.2891 10.6587 35.2891 14.012C35.2891 17.4451 37.844 20.3593 41.6763 20.3593C45.1493 20.3593 47.9438 17.7645 47.9438 14.0918C47.9038 9.94011 44.6304 7.78442 41.5964 7.78442ZM41.6364 10.2994C43.4328 10.2994 45.1493 11.7764 45.1493 14.0918C45.1493 16.4072 43.4727 17.8842 41.6364 17.8842C39.6404 17.8842 38.0835 16.2874 38.0835 14.0519C38.0436 11.8962 39.6004 10.2994 41.6364 10.2994Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M55.0475 7.82434C51.6543 7.82434 49.0195 10.7784 49.0195 14.0918C49.0195 17.8443 52.0934 20.3992 54.9676 20.3992C56.764 20.3992 57.6822 19.7205 58.4407 18.8822V20.1198C58.4407 22.2754 57.1233 23.5928 55.1273 23.5928C53.2111 23.5928 52.2531 22.1557 51.8938 21.3573L49.4587 22.3553C50.297 24.1517 52.0135 26.0279 55.0874 26.0279C58.4407 26.0279 60.9956 23.9122 60.9956 19.481V8.18362H58.3608V9.26147C57.6423 8.38322 56.5245 7.82434 55.0475 7.82434ZM55.287 10.2994C56.9237 10.2994 58.6403 11.7365 58.6403 14.1317C58.6403 16.6068 56.9636 17.9241 55.2471 17.9241C53.4507 17.9241 51.774 16.4471 51.774 14.1716C51.8139 11.6966 53.5305 10.2994 55.287 10.2994Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M72.8136 7.78442C69.62 7.78442 66.9453 10.2994 66.9453 14.0519C66.9453 18.004 69.9393 20.3593 73.093 20.3593C75.7278 20.3593 77.4044 18.8822 78.3625 17.6048L76.1669 16.1277C75.608 17.006 74.6499 17.8443 73.093 17.8443C71.3365 17.8443 70.5381 16.8862 70.0192 15.9281L78.4423 12.4152L78.0032 11.3772C77.1649 9.46107 75.2886 7.78442 72.8136 7.78442ZM72.8934 10.2196C74.0511 10.2196 74.8495 10.8184 75.2487 11.5768L69.6599 13.9321C69.3405 12.0958 71.097 10.2196 72.8934 10.2196Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M62.9531 19.9999H65.7076V1.47693H62.9531V19.9999Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  {/* End Star */}
+                </div>
+              </div>
+              {/* End Review */}
+              {/* Review */}
+              <div className="py-5">
+                <div className="flex space-x-1">
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  <svg
+                    className="size-4 text-primary-content"
+                    width={51}
+                    height={51}
+                    viewBox="0 0 51 51"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z"
+                      fill="transparent"
+                    />
+                    <path
+                      d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <p className="mt-3 text-sm text-primary-content">
+                  <span className="font-bold">4.8</span> /5 - from 5k reviews
+                </p>
+                <div className="mt-5">
+                  {/* Star */}
+                  <svg
+                    className="h-auto w-16 text-primary-content"
+                    width={110}
+                    height={28}
+                    viewBox="0 0 110 28"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M66.6601 8.35107C64.8995 8.35107 63.5167 8.72875 62.1331 9.48265C62.1331 5.4582 62.1331 1.81143 62.2594 0.554199L53.8321 2.06273V2.81736L54.7124 2.94301C55.8433 3.19431 56.2224 3.82257 56.4715 5.33255C56.725 8.35107 56.5979 24.4496 56.4715 27.0912C58.7354 27.5945 61.1257 27.9722 63.5159 27.9722C70.1819 27.9722 74.2064 23.8213 74.2064 17.281C74.2064 12.1249 70.9366 8.35107 66.6601 8.35107ZM63.7672 26.5878C63.2639 26.5878 62.6342 26.5878 62.258 26.4629C62.1316 24.7023 62.0067 17.281 62.1316 10.7413C62.8862 10.4893 63.3888 10.3637 64.0185 10.3637C66.7872 10.3637 68.2965 13.6335 68.2965 17.6572C68.2957 22.6898 66.4088 26.5878 63.7672 26.5878ZM22.1363 1.0568H0V2.18838L1.25796 2.31403C2.89214 2.56533 3.52184 3.57127 3.77242 5.9608C4.15082 10.4886 4.02445 18.6646 3.77242 22.5619C3.52112 24.9522 2.89287 26.0845 1.25796 26.2087L0 26.4615V27.4674H14.2123V26.4615L12.703 26.2087C11.0681 26.0838 10.4392 24.9522 10.1879 22.5619C10.0615 20.9263 9.93583 18.2847 9.93583 15.0156L12.9543 15.1413C14.8413 15.1413 15.7208 16.6505 16.0985 18.7881H17.2308V9.86106H16.0985C15.7201 11.9993 14.8413 13.5078 12.9543 13.5078L9.93655 13.6342C9.93655 9.35773 10.0622 5.33328 10.1886 2.94374H14.59C17.9869 2.94374 19.7475 5.08125 21.0047 8.85513L22.2626 8.47745L22.1363 1.0568Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M29.3053 8.09998C35.5944 8.09998 38.7385 12.3764 38.7385 18.0358C38.7385 23.4439 35.2167 27.9731 28.9276 27.9731C22.6393 27.9731 19.4951 23.6959 19.4951 18.0358C19.4951 12.6277 23.0162 8.09998 29.3053 8.09998ZM28.9276 9.35793C26.1604 9.35793 25.4058 13.1311 25.4058 18.0358C25.4058 22.8149 26.6637 26.7137 29.1796 26.7137C32.0703 26.7137 32.8264 22.9405 32.8264 18.0358C32.8264 13.2567 31.5699 9.35793 28.9276 9.35793ZM75.8403 18.1622C75.8403 13.0054 79.1101 8.09998 85.5248 8.09998C90.8057 8.09998 93.3224 11.9995 93.3224 17.1555H81.6253C81.4989 21.8089 83.7628 25.2051 88.2913 25.2051C90.3038 25.2051 91.3098 24.7033 92.5685 23.8223L93.0703 24.4505C91.8124 26.2111 89.0459 27.9731 85.5248 27.9731C79.8647 27.9724 75.8403 23.9479 75.8403 18.1622ZM81.6253 15.7726L87.5366 15.6463C87.5366 13.1311 87.159 9.35793 85.0214 9.35793C82.8839 9.35793 81.7502 12.8791 81.6253 15.7726ZM108.291 9.10663C106.782 8.47693 104.77 8.09998 102.506 8.09998C97.8538 8.09998 94.9594 10.8665 94.9594 14.137C94.9594 17.4075 97.0955 18.7904 100.118 19.7971C103.261 20.9279 104.142 21.8089 104.142 23.3182C104.142 24.8275 103.01 26.2103 100.997 26.2103C98.6084 26.2103 96.8464 24.8275 95.4635 21.0536L94.5825 21.3063L94.7089 26.84C96.2181 27.4683 98.9846 27.9724 101.375 27.9724C106.28 27.9724 109.425 25.4557 109.425 21.5576C109.425 18.9161 108.041 17.4075 104.771 16.1489C101.249 14.766 99.992 13.8857 99.992 12.2501C99.992 10.6152 101.126 9.48286 102.635 9.48286C104.897 9.48286 106.407 10.8665 107.54 14.2627L108.42 14.0114L108.291 9.10663ZM55.0883 8.6033C52.9508 7.3468 49.1769 7.97433 47.1651 12.5028L47.29 8.1007L38.8642 9.73561V10.4902L39.7444 10.6159C40.8775 10.7423 41.3794 11.3705 41.5057 13.0062C41.757 16.0247 41.6314 21.3078 41.5057 23.9486C41.3794 25.4564 40.8775 26.2111 39.7444 26.3374L38.8642 26.4638V27.4697H50.5606V26.4638L49.0513 26.3374C47.7941 26.2111 47.4164 25.4564 47.29 23.9486C47.0387 21.5584 47.0387 16.7793 47.1651 13.7608C47.7933 12.8798 50.5606 12.1259 53.0757 13.7608L55.0883 8.6033Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                  {/* End Star */}
+                </div>
+              </div>
+              {/* End Review */}
+            </div>
+            {/* End Review */}
+          </div>
+          {/* End Col */}
+          <div className="relative ms-4">
+            <img
+              className="w-full rounded-md"
+              src="https://images.unsplash.com/photo-1665686377065-08ba896d16fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&h=800&q=80"
+              alt="Image Description"
+            />
+            <div className="absolute inset-0 -z-[1] bg-gradient-to-tr from-gray-200 via-white/0 to-white/0 size-full rounded-md mt-4 -mb-4 me-4 -ms-4 lg:mt-6 lg:-mb-6 lg:me-6 lg:-ms-6 dark:from-slate-800 dark:via-slate-900/0 dark:to-slate-900/0" />
+            {/* SVG*/}
+            <div className="absolute bottom-0 start-0">
+              <svg
+                className="w-2/3 ms-auto h-auto text-white dark:text-slate-900"
+                width={630}
+                height={451}
+                viewBox="0 0 630 451"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  x={531}
+                  y={352}
+                  width={99}
+                  height={99}
+                  fill="currentColor"
+                />
+                <rect
+                  x={140}
+                  y={352}
+                  width={106}
+                  height={99}
+                  fill="currentColor"
+                />
+                <rect
+                  x={482}
+                  y={402}
+                  width={64}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect
+                  x={433}
+                  y={402}
+                  width={63}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect
+                  x={384}
+                  y={352}
+                  width={49}
+                  height={50}
+                  fill="currentColor"
+                />
+                <rect
+                  x={531}
+                  y={328}
+                  width={50}
+                  height={50}
+                  fill="currentColor"
+                />
+                <rect
+                  x={99}
+                  y={303}
+                  width={49}
+                  height={58}
+                  fill="currentColor"
+                />
+                <rect
+                  x={99}
+                  y={352}
+                  width={49}
+                  height={50}
+                  fill="currentColor"
+                />
+                <rect
+                  x={99}
+                  y={392}
+                  width={49}
+                  height={59}
+                  fill="currentColor"
+                />
+                <rect
+                  x={44}
+                  y={402}
+                  width={66}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect
+                  x={234}
+                  y={402}
+                  width={62}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect
+                  x={334}
+                  y={303}
+                  width={50}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect x={581} width={49} height={49} fill="currentColor" />
+                <rect x={581} width={49} height={64} fill="currentColor" />
+                <rect
+                  x={482}
+                  y={123}
+                  width={49}
+                  height={49}
+                  fill="currentColor"
+                />
+                <rect
+                  x={507}
+                  y={124}
+                  width={49}
+                  height={24}
+                  fill="currentColor"
+                />
+                <rect
+                  x={531}
+                  y={49}
+                  width={99}
+                  height={99}
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            {/* End SVG*/}
+          </div>
+          {/* End Col */}
+        </div>
+        {/* End Grid */}
+      </div>
+      {/* End Hero */}
+    </>
+  );
+};
+
+export default SquaredBackgroundHero;
diff --git a/Frontend/sections/HeroSections/index.ts b/Frontend/sections/HeroSections/index.ts
new file mode 100644
index 0000000..823dad6
--- /dev/null
+++ b/Frontend/sections/HeroSections/index.ts
@@ -0,0 +1,6 @@
+import SquaredBackgroundHero from "./SquaredBackgroundHero";
+import CenterAllignedWithVideoHero from "./CenterAllignedWithVideoHero";
+export {
+    SquaredBackgroundHero,
+    CenterAllignedWithVideoHero
+};
\ No newline at end of file
diff --git a/Frontend/sections/PageHeader.tsx b/Frontend/sections/PageHeader.tsx
index a0b7577..852423f 100644
--- a/Frontend/sections/PageHeader.tsx
+++ b/Frontend/sections/PageHeader.tsx
@@ -6,7 +6,7 @@ interface PageHeaderProps {
 }
 function PageHeader({ title, subtitle }: PageHeaderProps) {
   return (
-    <div className="pt-28  w-full flex flex-col">
+    <div className="pt-28 max-w-screen flex flex-col">
       <h1 className="h1 text-black dark:text-white mb-12 mx-auto">{title}</h1>
       {subtitle}
     </div>
diff --git a/Frontend/sections/HeroVideo.tsx b/Frontend/sections/Video.tsx
similarity index 91%
rename from Frontend/sections/HeroVideo.tsx
rename to Frontend/sections/Video.tsx
index 7a0a0fe..cf1fe19 100644
--- a/Frontend/sections/HeroVideo.tsx
+++ b/Frontend/sections/Video.tsx
@@ -4,7 +4,7 @@ import YouTubeFrame from "@/components/YoutubeEmbed";
 import React from "react";
 import { useState, useEffect } from "react";
 
-function HeroVideo() {
+function Video() {
   const [windowWidth, setWindowWidth] = useState(0);
 
   useEffect(() => {
@@ -38,4 +38,4 @@ function HeroVideo() {
   );
 }
 
-export default HeroVideo;
+export default Video;
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index d032565..0e05f10 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -94,6 +94,6 @@ const config: Config = {
       },
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("daisyui"), require("@tailwindcss/typography"), require('preline/plugin')],
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("daisyui"),  require('preline/plugin')],
 };
 export default config;