feature - added homepage with more components

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

@@ -22,7 +22,8 @@ export default function PricingPage() {
             <>
               {" "}
               <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
-                Are you ready to save 20 hours?
+                Are you ready to save 20 hours of coding? Start your Micro-SaaS
+                today
               </h2>
             </>
           }

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

@@ -1,8 +1,7 @@
 import Footer from "@/components/Footer";
 import Background from "@/components/Utilities/Background";
 import Spacer from "@/components/Utilities/Spacer";
-import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
+import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
-import SolidBackgrondIcon from "@/sections/IconsSections/SolidBackgrondIcon";
 import PageHeader from "@/sections/PageHeader";
 import React from "react";
 
@@ -16,12 +15,13 @@ const page = () => {
             <>
               {" "}
               <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
-                Take a look at all the cool features we&apos;ve built.
+                Fastpocket gives you boilerplate to help you build.
               </h2>
             </>
           }
         />
-        <SolidBackgrondIcon />
+
+        <SolidBackgrondIconFeature />
         <Spacer className="mt-auto" />
         <Footer />
       </Background>

Frontend/app/page.tsx

@@ -5,6 +5,9 @@ import { useEffect } from "react";
 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";
 
 export default function Home() {
   useEffect(() => {
@@ -20,6 +23,21 @@ export default function Home() {
     <>
       <PageWrapper>
         <WaitingListWithImageHero />
+        <div className="bg-primary/2">
+          <PageHeader
+            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>
+        <Footer />
       </PageWrapper>
     </>
   );

Frontend/components/Footer.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 
 function Footer() {
   return (
-    <footer className="w-full  py-10 px-4 sm:px-6 lg:px-8 mx-auto bg-base-100">
+    <footer className="w-full  pb-10 pt-14 px-4 sm:px-6 lg:px-8 mx-auto bg-base-200">
       {/* Grid */}
       <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
         <div className="col-span-full hidden lg:col-span-1 lg:flex lg:flex-col lg:items-center">

Frontend/components/Utilities/Background.tsx

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

Frontend/sections/Feature/SolidBackgrondIconFeature.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import Image from "next/image";
+import Icon from "@/components/Icons/Icon";
+
+function SolidBackgrondIconFeature() {
+  return (
+    <>
+      {/* Icon Blocks */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Image
+                src={"/images/stripe-icon.png"}
+                alt={""}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Stripe Payments
+              </h3>
+              <p className="mt-1 text-base-content ">
+                We have built stripe payments for 1 off and reoccuring payments
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Image
+                src={"/images/daisyui-icon.png"}
+                alt={""}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Theming
+              </h3>
+              <p className="mt-1 text-base-content ">
+                All our components include intuative theming with a js utility
+                class that uses your themes colors programmatically
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Documentation
+              </h3>
+              <p className="mt-1 text-base-content ">
+                Every component and plugin is well documented
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+          {/* Icon Block */}
+          <a
+            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Image
+                src={"/images/pocketbase-icon.png"}
+                alt={""}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Deployment Templates
+              </h3>
+              <p className="mt-1 text-base-content ">
+                For fly.io, raleway, and more so you can get running with
+                PocketBase as quickly as possible
+              </p>
+            </div>
+          </a>
+          {/* 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 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Image
+                src={"/images/daisyui-icon.png"}
+                alt={""}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Component Library
+              </h3>
+              <p className="mt-1 text-base-content ">
+                We provide fully customisable sections and components that you
+                can drop in
+              </p>
+            </div>
+          </a>
+          {/* 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 "
+            href="#"
+          >
+            <div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
+              <Image
+                src={"/images/nextjs-icon.png"}
+                alt={""}
+                width={32}
+                height={32}
+              />
+            </div>
+            <div className="mt-5">
+              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
+                Resources
+              </h3>
+              <p className="mt-1 text-base-content ">
+                A growing list of resources to help you build your products
+                faster
+              </p>
+            </div>
+          </a>
+          {/* End Icon Block */}
+        </div>
+      </div>
+      {/* End Icon Blocks */}
+    </>
+  );
+}
+
+export default SolidBackgrondIconFeature;

Frontend/sections/Hero/WaitingListWithImageHero.tsx

@@ -45,7 +45,7 @@ const WaitingListWithImageHero = () => {
   return (
     <Background>
       <div className="h-screen  w-full bg-clip flex items-center justify-center">
-        <div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-100 rounded-xl shadow-lg">
+        <div className="text-center py-8 px-4 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="/" />
             {title}
@@ -203,7 +203,6 @@ const WaitingListWithImageHero = () => {
           )}
         </div>
       </div>
-      <Footer />
     </Background>
   );
 };

Frontend/sections/IconsSections/SolidBackgrondIcon.tsx

@@ -1,116 +0,0 @@
-import React from "react";
-
-function SolidBackgrondIcon() {
-  return (
-    <>
-      {/* Icon Blocks */}
-      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
-        <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
-          {/* Icon Block */}
-          <a
-            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
-            href="#"
-          >
-            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
-              <svg
-                className="flex-shrink-0 size-6 text-white"
-                xmlns="http://www.w3.org/2000/svg"
-                width={24}
-                height={24}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <rect width={10} height={14} x={3} y={8} rx={2} />
-                <path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
-                <path d="M8 18h.01" />
-              </svg>
-            </div>
-            <div className="mt-5">
-              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
-                Stripe Payments
-              </h3>
-              <p className="mt-1 text-base-content ">
-                We have built stripe payments for 1 off and reoccuring payments
-              </p>
-            </div>
-          </a>
-          {/* End Icon Block */}
-          {/* Icon Block */}
-          <a
-            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
-            href="#"
-          >
-            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
-              <svg
-                className="flex-shrink-0 size-6 text-white"
-                xmlns="http://www.w3.org/2000/svg"
-                width={24}
-                height={24}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M20 7h-9" />
-                <path d="M14 17H5" />
-                <circle cx={17} cy={17} r={3} />
-                <circle cx={7} cy={7} r={3} />
-              </svg>
-            </div>
-            <div className="mt-5">
-              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
-                Theming
-              </h3>
-              <p className="mt-1 text-base-content ">
-                All our components include intuative theming with a js utility
-                class that uses your themes colors programmatically
-              </p>
-            </div>
-          </a>
-          {/* End Icon Block */}
-          {/* Icon Block */}
-          <a
-            className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
-            href="#"
-          >
-            <div className="flex justify-center items-center size-12 bg-primary rounded-xl">
-              <svg
-                className="flex-shrink-0 size-6 text-white"
-                xmlns="http://www.w3.org/2000/svg"
-                width={24}
-                height={24}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
-              </svg>
-            </div>
-            <div className="mt-5">
-              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
-                Documentation
-              </h3>
-              <p className="mt-1 text-base-content ">
-                Every component and plugin is well documented
-              </p>
-            </div>
-          </a>
-          {/* End Icon Block */}
-        </div>
-      </div>
-      {/* End Icon Blocks */}
-    </>
-  );
-}
-
-export default SolidBackgrondIcon;

Frontend/tailwind.config.ts

@@ -71,13 +71,13 @@ const config: Config = {
         light: {
           primary: "#FD5469",
           "primary-content": "#fff",
-          secondary: "#ff7400",
+          secondary: "#7082FF",
           "secondary-content": "#000",
           accent: "#fd0000",
           neutral: "#28282e",
-          "base-100": "#fefffd",
+          "base-100": "#FBFAFA",
-          "base-200": "#fcfeff",
+          "base-200": "#F9F8F8",
-          "base-300": "#fefaff",
+          "base-300": "#F4F3F4",
           "base-content": "#000",
           info: "#00f5ff",
           success: "#00ff8b",
@@ -87,7 +87,7 @@ const config: Config = {
         dark: {
           primary: "#FD5469",
           "primary-content": "#fff",
-          secondary: "#FD40FF",
+          secondary: "#7082FF",
           "secondary-content": "#fff",
           accent: "#006cff",
           neutral: "#060206",