updated styling for site

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

@@ -7,27 +7,40 @@ import Background from "@/components/Utilities/Background";
 import Footer from "@/components/Footer";
 import Payment from "@/sections/Payment";
 import Spacer from "@/components/Utilities/Spacer";
+import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
 
 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 bg-base-100 "
+      className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100"
     >
       <Background>
         <PageHeader
-          title="Pricing"
+          title="Your Fast Pocket Application"
           subtitle={
             <>
               {" "}
-              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
+              <h2 className="text-base-content text-2xl font-medium content text-center max-w-4xl mx-auto px-6">
-                Are you ready to save 20 hours of coding? Start your Micro-SaaS
+                Apply now to join us as we build apps fast, together! Be among
-                today
+                the first to start using FastPocket and lock in your lifetime
+                discount.
               </h2>
             </>
           }
         />
+
+        <h2 className="text-base-content text-4xl mt-12 font-extrabold content text-center max-w-6xl mx-auto px-6">
+          What you will get!
+        </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/components/Header.tsx

@@ -105,10 +105,10 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
                         localStorage.removeItem("price");
                       document.getElementById("sign-up-modal")?.click();
                     }}
-                    className={`btn btn-primary btn-sm text-primary-content`}
+                    className={`btn btn-primary btn-sm text-primary-content `}
                     id="sign-up-modal-button"
                   >
-                    Sign Up
+                    Get First Access
                   </button>
                 </>
               ) : (

Frontend/components/Logo.tsx

@@ -21,9 +21,9 @@ function Logo({ imageProps, ...props }: LogoProps & LinkProps) {
 
       <Image
         priority
-        src={"/icons/logo.svg"}
+        src={"/icons/combination-logo.svg"}
         alt="Follow us on Twitter"
-        width={40}
+        width={200}
         height={40}
         {...imageProps}
       />

Frontend/components/Navigation.tsx

@@ -42,14 +42,13 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
               {/* Navbar menu content here */}
               <li>
                 <Link href="/pricing" onClick={handleClick}>
-                  Pricing
+                  Become A 10x Dev
                 </Link>
               </li>
               <li>
-                <Link href="/blogs" onClick={handleClick}>
+                <Link href="/blogs">Meet Sam</Link>
-                  Blogs
-                </Link>
               </li>
+
               {/* <li>
                 <Link href="/contact" onClick={handleClick}>
                   Contact
@@ -83,11 +82,12 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
             <Logo href="/" className="group relative cursor-pointer" />
           </div>
           <li>
-            <Link href="/pricing">Pricing</Link>
+            <Link href="/pricing">Get Your FastPocket</Link>
           </li>
           <li>
-            <Link href="/blogs">Blogs</Link>
+            <Link href="/blogs">Meet Sam</Link>
           </li>
+
           {/* <li>
             <Link href="/contact">Contact</Link>
           </li> */}

Frontend/components/PriceCard.tsx

@@ -117,7 +117,7 @@ export default function PriceCard({
               onClick={() => submitForm(product)}
               className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none"
             >
-              Try it!
+              Let's go!
             </button>
           )}
         </div>

Frontend/components/Utilities/Background.tsx

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

Frontend/sections/Feature/SolidBackgrondIconFeature.tsx

@@ -6,14 +6,14 @@ 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="max-w-5xl 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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
                 src={"/images/stripe-icon.png"}
                 alt={""}
@@ -36,7 +36,7 @@ function SolidBackgrondIconFeature() {
             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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
                 src={"/images/daisyui-icon.png"}
                 alt={""}
@@ -60,7 +60,7 @@ function SolidBackgrondIconFeature() {
             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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
             </div>
             <div className="mt-5">
@@ -78,7 +78,7 @@ function SolidBackgrondIconFeature() {
             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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
                 src={"/images/pocketbase-icon.png"}
                 alt={""}
@@ -102,7 +102,7 @@ function SolidBackgrondIconFeature() {
             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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
                 src={"/images/daisyui-icon.png"}
                 alt={""}
@@ -126,7 +126,7 @@ function SolidBackgrondIconFeature() {
             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">
+            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
                 src={"/images/nextjs-icon.png"}
                 alt={""}

Frontend/sections/Hero/WaitingListWithImageHero.tsx

@@ -48,15 +48,18 @@ const WaitingListWithImageHero = () => {
         <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}
           </h1>
           {typeof window !== "undefined" &&
           !localStorage.getItem("waitinglist") ? (
             <>
               <h2 className="text-2xl text-base-content font-heading font-black flex-wrap max-w-sm">
-                <span className="bg-primary p-1">Finish</span> Your React +
+                <span className="bg-primary p-1 text-primary-content">
-                PocketBase project, With A{" "}
+                  Finish
-                <span className="bg-primary p-1">Head Start</span>
+                </span>{" "}
+                Your React + PocketBase project, With A{" "}
+                <span className="bg-primary p-1 text-primary-content">
+                  Head Start
+                </span>
               </h2>
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="mt-8 space-y-0">

Frontend/sections/PageHeader.tsx

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

Frontend/sections/Payment.tsx

@@ -35,7 +35,7 @@ const Payment = ({
       )}
       <div className="max-w-6xl mx-auto  mb-24 h-full">
         <div
-          className={`w-screen lg: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 pb-4 flex gap-x-4 lg:justify-center gap-y-8 px-6  pt-12 overflow-x-scroll`}
         >
           {isLoading ? (
             <>