feature - changed payment on frontend

Frontend/app/layout.tsx

@@ -8,7 +8,6 @@ import Header from "@/components/Header";
 import { cookies } from "next/headers";
 import { isAuthenticated } from "@/lib/auth";
 import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
-import PrelineScript from "@/components/Utilities/PrelineScript";
 import { title } from "@/constants";
 
 const raleway = Arimo({
@@ -65,7 +64,6 @@ export default async function RootLayout({
             />
           </ThemeProvider>
         </body>
-        <PrelineScript />
       </PHProvider>
     </html>
   );

Frontend/app/page.tsx

@@ -1,6 +1,9 @@
 import "aos/dist/aos.css";
 import React from "react";
-import { WaitingListWithImageHero } from "@/sections/Hero";
+import {
+  SquaredBackgroundHero,
+  WaitingListWithImageHero,
+} from "@/sections/Hero";
 import PageWrapper from "@/components/Utilities/PageWrapper";
 import Footer from "@/components/Footer";
 import PageHeader from "@/sections/PageHeader";
@@ -16,7 +19,7 @@ export default function Home() {
   return (
     <>
       <PageWrapper>
-        <WaitingListWithImageHero />
+        <SquaredBackgroundHero />
         <VerticalTabsFeature />
         <div className="bg-primary/2">
           <ContainerImageIconBlocksFeature />

Frontend/components/PriceCard.tsx

@@ -66,7 +66,7 @@ export default function PriceCard({
     >
       <div className="flex flex-col h-full">
         <div className="mb-12 relative">
-          {false && (
+          {true && (
             <p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-primary text-center">
               Popular
             </p>

Frontend/components/Utilities/PrelineScript.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { useEffect } from "react";
-
-import { IStaticMethods } from "preline/preline";
-declare global {
-  interface Window {
-    HSStaticMethods: IStaticMethods;
-  }
-}
-
-export default function PrelineScript() {
-  const path = usePathname();
-
-  useEffect(() => {
-    import("preline/preline");
-  }, []);
-
-  useEffect(() => {
-    setTimeout(() => {
-      window?.HSStaticMethods?.autoInit();
-    }, 100);
-  }, [path]);
-
-  return null;
-}

Frontend/sections/Features/ContainerImageIconBlocksFeature.tsx

@@ -6,7 +6,8 @@ function ContainerImageIconBlocksFeature() {
     <>
       {/* 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">
+        {/* HIDDEN  */}
+        <div className="hidden aspect-w-16 aspect-h-7 rounded-xl">
           <Image
             className="w-full object-contain max-h-[40rem] rounded-xl"
             width="1000"

Frontend/sections/Hero/SquaredBackgroundHero.tsx

@@ -1,4 +1,5 @@
 import { title } from "@/constants";
+import Image from "next/image";
 import React from "react";
 
 const SquaredBackgroundHero = () => {
@@ -6,25 +7,25 @@ const SquaredBackgroundHero = () => {
     <>
       {/* Hero */}
       <div className="h-screen w-screen flex items-center">
-        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="md:max-w-[50rem] xl:max-w-[60rem] 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 className="grid md:grid-cols-2 gap-4 md:gap-0 xl:gap-20 md:items-center">
             <div>
-              <h1 className="block text-3xl font-bold bg-base-content sm:text-4xl lg:text-6xl lg:leading-tight">
+              <h1 className="block text-3xl font-bold sm:text-4xl lg:text-6xl lg:leading-tight">
-                Start your journey with{" "}
+                Build your app fast with{" "}
                 <span className="text-primary">{title}</span>
               </h1>
               <p className="mt-3 text-lg text-secondary-content">
-                Hand-picked professionals and expertly crafted components,
+                Join in a tight knit community of like minded makers as we build
-                designed for any kind of entrepreneur.
+                apps using Pocketbase and React
               </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 bg-base-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"
+                  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="#"
+                  href="https://buy.stripe.com/4gwaGQa9egxb5rO9AA"
                 >
-                  Get started
+                  Get FastPocket
                   <svg
                     className="flex-shrink-0 size-4"
                     xmlns="http://www.w3.org/2000/svg"
@@ -40,21 +41,15 @@ const SquaredBackgroundHero = () => {
                     <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 bg-base-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 */}
+              {/* HIDDEN Review */}
-              <div className="mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
+              <div className="hidden 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 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -67,7 +62,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -80,7 +75,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -93,7 +88,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -106,7 +101,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -119,13 +114,13 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                   </div>
-                  <p className="mt-3 text-sm bg-base-content">
+                  <p className="mt-3 text-sm">
                     <span className="font-bold">4.6</span> /5 - from 12k reviews
                   </p>
                   <div className="mt-5">
                     {/* Star */}
                     <svg
-                      className="h-auto w-16 bg-base-content"
+                      className="h-auto w-16"
                       width={80}
                       height={27}
                       viewBox="0 0 80 27"
@@ -165,7 +160,7 @@ const SquaredBackgroundHero = () => {
                 <div className="py-5">
                   <div className="flex space-x-1">
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -178,7 +173,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -191,7 +186,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -204,7 +199,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -217,7 +212,7 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                     <svg
-                      className="size-4 bg-base-content"
+                      className="size-4"
                       width={51}
                       height={51}
                       viewBox="0 0 51 51"
@@ -234,13 +229,13 @@ const SquaredBackgroundHero = () => {
                       />
                     </svg>
                   </div>
-                  <p className="mt-3 text-sm bg-base-content">
+                  <p className="mt-3 text-sm">
                     <span className="font-bold">4.8</span> /5 - from 5k reviews
                   </p>
                   <div className="mt-5">
                     {/* Star */}
                     <svg
-                      className="h-auto w-16 bg-base-content"
+                      className="h-auto w-16"
                       width={110}
                       height={28}
                       viewBox="0 0 110 28"
@@ -265,132 +260,14 @@ const SquaredBackgroundHero = () => {
             </div>
             {/* End Col */}
             <div className="relative ms-4">
-              <img
+              <Image
                 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"
+                width="700"
+                height="800"
+                src="/images/fastpocket-diagram.png"
                 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 bg-base-content 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>