added stylings

Backend/README.md

@@ -1,4 +1,4 @@
-# Fast Pocket - React + PocketBase Boiler Plate
+# FastPocket - React + PocketBase Boiler Plate
 
 The all-in-one starter kit for high-performance SaaS applications. That don't want a vendor buy in when it comes to backend and frontend. This is a front end agnostic template that you can use 100% with any SaaS application. If there are any issues please feel free to reach out to me on X - [@meinbiz](https://twitter.com/meinbiz)
 

Frontend/app/(admin)/blogs/page.tsx

@@ -2,6 +2,7 @@ import PageHeader from "@/sections/PageHeader";
 import BlogCard from "@/components/BlogCard";
 import getPostMetadata from "@/utils/getPostMetaData";
 import React from "react";
+import Background from "@/components/Utilities/Background";
 
 export default function BlogsPage() {
   const postMetadata = getPostMetadata();
@@ -15,6 +16,7 @@ export default function BlogsPage() {
       role="main"
       className="h-full flex-grow flex flex-col bg-white dark:bg-black"
     >
+      <Background>
         {/*  Page sections */}
         <PageHeader
           title="Blogs"
@@ -33,6 +35,7 @@ export default function BlogsPage() {
             {postPreviews}
           </div>
         </div>
+      </Background>
     </main>
   );
 }

Frontend/app/(admin)/contact/page.tsx

@@ -1,4 +1,5 @@
 import Footer from "@/components/Footer";
+import Background from "@/components/Utilities/Background";
 import Spacer from "@/components/Utilities/Spacer";
 import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
 import React from "react";
@@ -6,10 +7,12 @@ import React from "react";
 const page = () => {
   return (
     <div className="flex flex-col h-full w-full bg-white dark:bg-black">
+      <Background>
         <Spacer className="pt-28" />
         <FormLeftDescriptionRightContactUs />
         <Footer />
         <Spacer className="pt-16" />
+      </Background>
     </div>
   );
 };

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

@@ -10,6 +10,7 @@ import Newsletter from "@/sections/Newsletter/Newsletter";
 import { createCheckoutSession, isAuthenticated } from "@/app/(auth)/actions";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";
+import Background from "@/components/Utilities/Background";
 
 export default function PricingPage() {
   const [isAnnual, setIsAnnual] = useState(false);
@@ -31,14 +32,15 @@ export default function PricingPage() {
       role="main"
       className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-white dark:bg-black"
     >
+      <Background>
         <PageHeader
           title="Pricing"
           subtitle={
             <>
               {" "}
-            <h2 className="h3 text-base-content content text-center max-w-6xl mx-auto px-6">
+              <h2 className="h3 text-black dark:text-white content text-center max-w-6xl mx-auto px-6">
-              Are you ready for fresh South West produce to be delivered to your
+                Are you ready for fresh South West produce to be delivered to
-              door?
+                your door?
               </h2>
             </>
           }
@@ -56,6 +58,7 @@ export default function PricingPage() {
           </div>
         </div>
         <Newsletter />
+      </Background>
     </main>
   );
 }

Frontend/app/layout.tsx

@@ -22,9 +22,8 @@ const arimo = Arimo({
 });
 
 export const metadata: Metadata = {
-  title: "Sign365",
+  title: "FastPocket",
-  description:
+  description: "FastPocket",
-    "Sign365 is your window into freedom from paper work. Get the paper work to do itself",
 };
 
 export default async function RootLayout({

Frontend/components/BlogCard.tsx

@@ -9,7 +9,7 @@ function BlogCard({ title, slug, subtitle, image }: PostMetadata) {
     <>
       <Link
         href={`/blogs/${slug}`}
-        className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto"
+        className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto bg-white dark:bg-black p-10 rounded-xl"
       >
         <div className="w-full aspect-[4/3] bg-slate-400 rounded-lg overflow-hidden relative">
           <Image

Frontend/components/Header.tsx

@@ -67,7 +67,7 @@ function Header({ isUserLoggedIn }: HeaderProps) {
               ) : (
                 <button
                   onClick={() => logout()}
-                  className={`btn-sm cursor-pointer py-5 w-24 text-primary-content ml-3 bg-error hover:bg-error/70`}
+                  className={`btn-sm cursor-pointer py-5 w-24 text-white ml-3 bg-error hover:bg-error/70`}
                 >
                   Logout
                 </button>

Frontend/components/Logo.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import logo from "@/images/icon.svg";
-import Image from "next/image";
 import Icon from "./icon";
+import Link from "next/link";
 
 interface LogoProps {
   label?: string;
@@ -10,7 +9,7 @@ interface LogoProps {
 
 function Logo({ label, className }: LogoProps) {
   return (
-    <a
+    <Link
       href={
         label !== undefined
           ? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
@@ -28,7 +27,7 @@ function Logo({ label, className }: LogoProps) {
       ) : (
         <></>
       )}
-    </a>
+    </Link>
   );
 }
 

Frontend/components/Navigation.tsx

@@ -70,7 +70,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
       <div className="drawer-side">
         <label htmlFor="my-drawer-3" className="drawer-overlay"></label>
 
-        <ul className="menu w-80 h-full bg-base-200">
+        <ul className="menu w-80 h-full bg-white dark:bg-black">
           {/* Sidebar content here */}
           <div className="shrink-0 m-3">
             {/* Logo */}

Frontend/components/Utilities/Background.tsx

@@ -0,0 +1,23 @@
+"use client";
+import React, { ReactNode } from "react";
+
+const Background = ({ children }: { children: ReactNode }) => {
+  const isDarkMode = (() =>
+    typeof window !== "undefined" &&
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches)();
+  return (
+    <div
+      className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen"
+      style={{
+        backgroundImage: isDarkMode
+          ? "linear-gradient(rgba(0, 0, 0, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)"
+          : "linear-gradient(rgba(255, 255, 255, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Background;

Frontend/package-lock.json

@@ -16,6 +16,7 @@
         "@vidstack/react": "^1.9.8",
         "aos": "^2.3.4",
         "autoprefixer": "10.4.15",
+        "colorcolor": "^3.0.1",
         "crypto-js": "^4.2.0",
         "daisyui": "^3.5.1",
         "eslint": "8.47.0",
@@ -2415,6 +2416,14 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "node_modules/colorcolor": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/colorcolor/-/colorcolor-3.0.1.tgz",
+      "integrity": "sha512-DIGQgRENjBP+MTI5Ua9teyZs2E7+ismYFxVN1vb3It1u+7G93aZzmDsUeRgxyoSKIsAz9PzEa7mHCCc6bChfJw==",
+      "dependencies": {
+        "css-color-names": "^1.0.1"
+      }
+    },
     "node_modules/colord": {
       "version": "2.9.3",
       "license": "MIT"
@@ -2461,6 +2470,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/css-color-names": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
+      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/css-selector-tokenizer": {
       "version": "0.8.0",
       "license": "MIT",
@@ -7771,6 +7788,14 @@
         "simple-swizzle": "^0.2.2"
       }
     },
+    "colorcolor": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/colorcolor/-/colorcolor-3.0.1.tgz",
+      "integrity": "sha512-DIGQgRENjBP+MTI5Ua9teyZs2E7+ismYFxVN1vb3It1u+7G93aZzmDsUeRgxyoSKIsAz9PzEa7mHCCc6bChfJw==",
+      "requires": {
+        "css-color-names": "^1.0.1"
+      }
+    },
     "colord": {
       "version": "2.9.3"
     },
@@ -7803,6 +7828,11 @@
       "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
       "peer": true
     },
+    "css-color-names": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
+      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA=="
+    },
     "css-selector-tokenizer": {
       "version": "0.8.0",
       "requires": {

Frontend/package.json

@@ -17,6 +17,7 @@
     "@vidstack/react": "^1.9.8",
     "aos": "^2.3.4",
     "autoprefixer": "10.4.15",
+    "colorcolor": "^3.0.1",
     "crypto-js": "^4.2.0",
     "daisyui": "^3.5.1",
     "eslint": "8.47.0",

Frontend/sections/AccountContent.tsx

@@ -150,10 +150,10 @@ function AccountContent({ user }: ManageSubscriptionProps) {
           </h3>
           {subscription ? (
             <>
-              <h2 className="h2 text-3xl mb-3 text-base-content">
+              <h2 className="h2 text-3xl mb-3 text-black dark:text-white">
                 {subscription?.product?.name}
               </h2>
-              <p className="text-lg text-base-content mb-4">
+              <p className="text-lg text-black dark:text-white mb-4">
                 {subscription.product?.description}
               </p>
               <button
@@ -165,12 +165,12 @@ function AccountContent({ user }: ManageSubscriptionProps) {
             </>
           ) : (
             <>
-              <p className="text-lg text-base-content mb-4">
+              <p className="text-lg text-black dark:text-white mb-4">
                 {"You haven’t upgraded your workflow yet"}
               </p>
               <button
                 onClick={() => router.push("/pricing")}
-                className="px-10 py-2 text-base capitalize !rounded-3xl text-base-content bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
+                className="px-10 py-2 text-base capitalize !rounded-3xl text-black dark:text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
               >
                 Upgrade
               </button>

Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx

@@ -7,17 +7,17 @@ const FormLeftDescriptionRightContactUs = () => {
       <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
         <div className="max-w-2xl lg:max-w-5xl mx-auto">
           <div className="text-center">
-            <h1 className="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
+            <h1 className="text-3xl font-bold text-black sm:text-4xl dark:text-white">
               Contact us
             </h1>
-            <p className="mt-1 text-gray-600 dark:text-gray-400">
+            <p className="mt-1 text-black dark:text-white">
               We&apos;d love to talk about how we can help you.
             </p>
           </div>
           <div className="mt-12 grid items-center lg:grid-cols-2 gap-6 lg:gap-16">
             {/* Card */}
-            <div className="flex flex-col border rounded-xl p-4 sm:p-6 lg:p-8 dark:border-gray-700">
+            <div className="flex flex-col border rounded-xl p-4 sm:p-6 lg:p-8 dark:border-gray-700 ">
-              <h2 className="mb-8 text-xl font-semibold text-gray-800 dark:text-gray-200">
+              <h2 className="mb-8 text-xl font-semibold text-black dark:text-white">
                 Fill in the form
               </h2>
               <form>
@@ -105,7 +105,7 @@ const FormLeftDescriptionRightContactUs = () => {
                   </button>
                 </div>
                 <div className="mt-3 text-center">
-                  <p className="text-sm text-gray-500">
+                  <p className="text-sm text-black dark:text-white">
                     We&apos;ll get back to you in 1-2 business days.
                   </p>
                 </div>
@@ -135,7 +135,7 @@ const FormLeftDescriptionRightContactUs = () => {
                   <h3 className="font-semibold text-gray-800 dark:text-gray-200">
                     Knowledgebase
                   </h3>
-                  <p className="mt-1 text-sm text-gray-500">
+                  <p className="mt-1 text-sm text-black dark:text-white">
                     We&apos;re here to help with any questions or code.
                   </p>
                   <a
@@ -280,7 +280,7 @@ const FormLeftDescriptionRightContactUs = () => {
                   <h3 className="font-semibold text-gray-800 dark:text-gray-200">
                     Contact us by email
                   </h3>
-                  <p className="mt-1 text-sm text-gray-500">
+                  <p className="mt-1 text-sm text-black dark:text-white">
                     If you wish to write us an email instead please use
                   </p>
                   <a

Frontend/sections/Hero/SquaredBackgroundHero.tsx

@@ -11,7 +11,7 @@ const SquaredBackgroundHero = () => {
             <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>
+                <span className="text-primary">FastPocket</span>
               </h1>
               <p className="mt-3 text-lg text-secondary-content">
                 Hand-picked professionals and expertly crafted components,

Frontend/sections/Hero/WaitingListWithImageHero.tsx

@@ -3,21 +3,25 @@ import Icon from "@/components/icon";
 import React from "react";
 
 const WaitingListWithImageHero = () => {
+  const isDarkMode = () =>
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
   return (
     <div
       className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed"
       style={{
-        backgroundImage:
+        backgroundImage: isDarkMode()
-          "linear-gradient(rgba(0, 0, 0, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)",
+          ? "linear-gradient(rgba(0, 0, 0, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)"
+          : "linear-gradient(rgba(255, 255, 255, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)",
       }}
     >
       <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">
-          <h1 className="text-3xl text-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
+          <h1 className="text-3xl text-black dark:text-white sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
             <Icon name="LeafThree24Filled" size="xlarge" />
             Bethel Farms
           </h1>
-          <h2 className="text-2xl text-primary-content sm:text-4xl">
+          <h2 className="text-2xl text-black dark:text-white sm:text-4xl">
             Get notified when we launch
           </h2>
           <form>
@@ -33,12 +37,12 @@ const WaitingListWithImageHero = () => {
                   <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"
+                    className="  py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 placeholder:text-black dark:placeholder:text-white  placeholder:text-black dark:text-white 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-primary-content dark:text-white"
+                      className="flex-shrink-0 size-4 text-black  dark:text-white"
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -66,12 +70,12 @@ const WaitingListWithImageHero = () => {
                   <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"
+                    className=" py-3 ps-11 pe-4 block w-full bg-white/[.03] border-white/20 text-black  placeholder:text-black dark:placeholder:text-white dark:text-white 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-primary-content dark:text-white"
+                      className="flex-shrink-0 size-4 text-black  dark:text-white"
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -91,7 +95,7 @@ const WaitingListWithImageHero = () => {
               <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"
+                  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-black dark:text-white 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

Frontend/tailwind.config.ts

@@ -94,6 +94,17 @@ const config: Config = {
       },
     },
   },
+  daisyui: {
+    themes: [
+      {
+        light: {
+          ...require("daisyui/src/theming/themes")["light"],
+          "primary": '#c0df68',
+          "secondary": '#73d776'
+        },
+      },
+    ],
+  },
   plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"), require("daisyui"),  require('preline/plugin')],
 };
 export default config;