feature - the initial landing page

Frontend/app/(public)/about/page.tsx

@@ -20,7 +20,7 @@ export default async function BlogsPage() {
     >
       {/*  Page sections */}
       <PageHeader title="Helping Developers Build" />
-      <div className="max-w-4xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8 flex flex-col gap-y-6 text-center items-center">
+      <div className="max-w-4xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8 flex flex-col gap-y-12 text-center items-center">
         <p className="text-lg text-base-content font-thin">
           In 2023 I built <b className="font-bold">Sign365</b> using pocketbase
           and setup an open source library to help people get setup with Stripe

Frontend/app/(public)/pricing/page.tsx

@@ -36,11 +36,7 @@ export default function PricingPage() {
         </h2>
 
         <SolidBackgrondIconFeature />
-        <h2 className="text-base-content text-4xl mt-12 font-extrabold content text-center max-w-6xl mx-auto px-6">
-          What you will give!
-        </h2>
 
-        <SolidBackgrondIconFeature />
         <Payment type="one_time" />
         <Spacer className="mt-auto" />
         <Newsletter />

Frontend/app/page.tsx

@@ -6,8 +6,11 @@ import React from "react";
 import { WaitingListWithImageHero } from "@/sections/Hero";
 import PageWrapper from "@/components/Utilities/PageWrapper";
 import Footer from "@/components/Footer";
-import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
 import PageHeader from "@/sections/PageHeader";
+import ContainerImageIconBlocksFeature from "@/sections/Feature/ContainerImageIconBlocksFeature";
+import Background from "@/components/Utilities/Background";
+import CardTestemonial from "@/sections/Testemonial/CardTestemonial";
+import Payment from "@/sections/Payment";
 
 export default function Home() {
   useEffect(() => {
@@ -24,19 +27,25 @@ export default function Home() {
       <PageWrapper>
         <WaitingListWithImageHero />
         <div className="bg-primary/2">
-          <PageHeader
+          <ContainerImageIconBlocksFeature />
-            title="What You Get"
-            subtitle={
-              <>
-                {" "}
-                <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
-                  Fastpocket gives you boilerplate to help you build.
-                </h2>
-              </>
-            }
-          />
-          <SolidBackgrondIconFeature />
         </div>
+        <Background>
+          <CardTestemonial />
+        </Background>
+        <PageHeader
+          title={"Want to start building your apps faster?"}
+          className="!pt-16"
+          subtitle={
+            <>
+              {" "}
+              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
+                Purchase now to get early access at a discounted price and start
+                building with fly.io and docker compose templates immediately!
+              </h2>
+            </>
+          }
+        />
+        <Payment />
         <Footer />
       </PageWrapper>
     </>

Frontend/components/PriceCard.tsx

@@ -60,7 +60,7 @@ export default function PriceCard({
   };
   return (
     <div
-      className={`relative w-64 sm:w-80 bg-base-200  rounded-lg p-6 shadow-lg ${
+      className={`relative w-64 sm:w-80 bg-base-200  rounded-lg p-6 shadow-lg border border-primary/40 ${
         loading ? "animate-pulse h-[20rem]" : ""
       }`}
     >
@@ -115,7 +115,7 @@ export default function PriceCard({
           {product && (
             <button
               onClick={() => submitForm(product)}
-              className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none"
+              className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none capitalize"
             >
               Let&apos;s go!
             </button>

Frontend/components/Utilities/Background.tsx

@@ -24,7 +24,7 @@ const Background = ({ children }: { children: ReactNode }) => {
 
   return (
     <div
-      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col"
+      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col"
       style={{
         backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
       }}

Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import Image from "next/image";
+
+function ContainerImageIconBlocksFeature() {
+  return (
+    <>
+      {/* Features */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        <div className="aspect-w-16 aspect-h-7 rounded-xl">
+          <Image
+            className="w-full object-contain rounded-xl h-[40rem]"
+            width="1000"
+            height="1000"
+            src="/images/fastpocket-diagram.png"
+            alt="Image Description"
+          />
+        </div>
+        {/* Grid */}
+        <div className="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
+          <div className="lg:col-span-1">
+            <h2 className="font-bold text-2xl md:text-3xl text-base-content ">
+              Want To Build Fast?
+            </h2>
+            <p className="mt-2 md:mt-4 text-base-content/80">
+              There is so much to do in order to get an application developed.
+              Just getting the essentials together like payments and emails is
+              an enormous undertaking. That&apos;s why FastPocket exists. To
+              give you the essentials so you can focus on what makes your app
+              unique.
+            </p>
+          </div>
+          {/* End Col */}
+          <div className="lg:col-span-2">
+            <div className="grid sm:grid-cols-2 gap-8 md:gap-12">
+              {/* Icon Block */}
+              <div className="flex gap-x-5">
+                <svg
+                  className="flex-shrink-0 mt-1 size-6 text-primary "
+                  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={18} height={10} x={3} y={11} rx={2} />
+                  <circle cx={12} cy={5} r={2} />
+                  <path d="M12 7v4" />
+                  <line x1={8} x2={8} y1={16} y2={16} />
+                  <line x1={16} x2={16} y1={16} y2={16} />
+                </svg>
+                <div className="grow">
+                  <h3 className="text-lg font-semibold text-base-content">
+                    Payments
+                  </h3>
+                  <p className="mt-1 text-base-content/80 ">
+                    FastPocket includes Stripe for simple payment so that you
+                    can get profitable quickly. All your products in Stripe
+                    automatically syncronize with Pocketbase meaning no
+                    additional work for you
+                  </p>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className="flex gap-x-5">
+                <svg
+                  className="flex-shrink-0 mt-1 size-6 text-primary "
+                  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="M7 10v12" />
+                  <path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
+                </svg>
+                <div className="grow">
+                  <h3 className="text-lg font-semibold text-base-content">
+                    Style
+                  </h3>
+                  <p className="mt-1 text-base-content/80 ">
+                    FastPocket includes components to help you get styling your
+                    codebase really quickly. We use TailwindCSS, DaisyUI and
+                    Modified Preline components in order to fit the look and
+                    feel of your brand
+                  </p>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className="flex gap-x-5">
+                <svg
+                  className="flex-shrink-0 mt-1 size-6 text-primary "
+                  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 className="grow">
+                  <h3 className="text-lg font-semibold text-base-content">
+                    Email
+                  </h3>
+                  <p className="mt-1 text-base-content/80 ">
+                    We know how annoying it is to setup email and that is why we
+                    provide email templates as well as frameworks for building
+                    your own emails for signup verifications and more
+                  </p>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className="flex gap-x-5">
+                <svg
+                  className="flex-shrink-0 mt-1 size-6 text-primary "
+                  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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                  <circle cx={9} cy={7} r={4} />
+                  <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+                  <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                </svg>
+                <div className="grow">
+                  <h3 className="text-lg font-semibold text-base-content">
+                    Backend
+                  </h3>
+                  <p className="mt-1 text-base-content/80 ">
+                    We provide Pocketbase + stripe build templates to ship your
+                    product with no hassle. This includes login and payment for
+                    reoccuring and one time transactions
+                  </p>
+                </div>
+              </div>
+              {/* End Icon Block */}
+            </div>
+          </div>
+          {/* End Col */}
+        </div>
+        {/* End Grid */}
+      </div>
+      {/* End Features */}
+    </>
+  );
+}
+
+export default ContainerImageIconBlocksFeature;

Frontend/sections/Feature/SolidBackgrondIconFeature.tsx

@@ -10,7 +10,7 @@ function SolidBackgrondIconFeature() {
         <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-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@@ -33,7 +33,7 @@ function SolidBackgrondIconFeature() {
           {/* End Icon Block */}
           {/* Icon Block */}
           <a
-            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@@ -57,7 +57,7 @@ function SolidBackgrondIconFeature() {
           {/* End Icon Block */}
           {/* Icon Block */}
           <a
-            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@@ -75,7 +75,7 @@ function SolidBackgrondIconFeature() {
           {/* End Icon Block */}
           {/* Icon Block */}
           <a
-            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@@ -99,7 +99,7 @@ function SolidBackgrondIconFeature() {
           {/* End Icon Block */}
           {/* Icon Block */}
           <a
-            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@@ -123,7 +123,7 @@ function SolidBackgrondIconFeature() {
           {/* End Icon Block */}
           {/* Icon Block */}
           <a
-            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
             href="#"
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">

Frontend/sections/Feature/VerticalTabsWithOverlappingBackgroundFeature.tsx

@@ -1,257 +0,0 @@
-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;

Frontend/sections/Hero/WaitingListWithImageHero.tsx

@@ -44,15 +44,12 @@ const WaitingListWithImageHero = () => {
   };
   return (
     <Background>
-      <div className="h-screen  w-full bg-clip flex items-center justify-center">
+      <div className="h-screen  w-full bg-clip flex items-center justify-center pt-20">
-        <div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-200 rounded-xl shadow-lg">
+        <div className="text-center py-8 px-4 m-4 border border-primary/40 sm:px-6 lg:px-8 bg-base-200 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 href="/" />
-          </h1>
           {typeof window !== "undefined" &&
           !localStorage.getItem("waitinglist") ? (
             <>
-              <h2 className="text-2xl text-base-content font-heading font-black flex-wrap max-w-sm">
+              <h2 className="text-4xl text-base-content font-heading font-black flex-wrap max-w-sm leading-[3.2rem] lg:leading-normal ">
                 <span className="bg-primary p-1 text-primary-content">
                   Finish
                 </span>{" "}

Frontend/sections/PageHeader.tsx

@@ -7,7 +7,7 @@ interface PageHeaderProps {
 }
 function PageHeader({ title, subtitle, className }: PageHeaderProps) {
   return (
-    <div className={`pt-48 max-w-screen flex flex-col ${className}`}>
+    <div className={` pt-48 max-w-screen flex flex-col ${className}`}>
       <h1 className="text-4xl md:text-5xl text-center font-bold text-base-content  mb-6 mx-auto">
         {title}
       </h1>

Frontend/sections/Testemonial/CardTestemonial.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import Image from "next/image";
+
+function CardTestemonial() {
+  return (
+    <>
+      {/* Testimonials */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        {/* Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
+          {/* Card */}
+          <div className="flex flex-col bg-base-100 /40  shadow-sm rounded-xl  ">
+            <div className="flex-auto p-4 md:p-6">
+              <Image
+                width="500"
+                height="500"
+                className="h-9 w-9 rounded-full"
+                src={
+                  "https://pbs.twimg.com/profile_images/1432517677864607745/spXCJfPY_400x400.jpg"
+                }
+                alt={"Timmy"}
+              />
+              <p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
+                <em>I think its a good idea</em>
+              </p>
+            </div>
+            <div className="p-4 rounded-b-xl md:px-6">
+              <h3 className="text-sm font-semibold text-base-content sm:text-base ">
+                Mustafa Hanif
+              </h3>
+              <p className="text-sm text-base-content/80">Indie Hacker</p>
+            </div>
+          </div>
+          {/* End Card */}
+          {/* Card */}
+          <div className="flex flex-col bg-base-100 border border-primary/40  shadow-sm rounded-xl  ">
+            <div className="flex-auto p-4 md:p-6">
+              <Image
+                width="500"
+                height="500"
+                className="h-9 w-9 rounded-full"
+                src={
+                  "https://pbs.twimg.com/profile_images/1647540692837597184/SyEB8Ehg_400x400.jpg"
+                }
+                alt={"Timmy"}
+              />
+              <p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
+                <em>I know it&apos;s worth it and very good</em>
+              </p>
+            </div>
+            <div className="p-4 rounded-b-xl md:px-6">
+              <h3 className="text-sm font-semibold text-base-content sm:text-base ">
+                Timmy D Turner
+              </h3>
+              <p className="text-sm text-base-content/80">Indie Hacker</p>
+            </div>
+          </div>
+          {/* End Card */}
+        </div>
+        {/* End Grid */}
+      </div>
+      {/* End Testimonials */}
+    </>
+  );
+}
+
+export default CardTestemonial;