feature - theming

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

@@ -25,8 +25,8 @@ export default async function BlogsPage() {
             <>
               {" "}
               <h2 className="text-base-content text-2xl font-medium text-center max-w-5xl mx-auto px-6">
-                Join us for the journey as we make great food. Learn and grow
+                Take a look as we show you how to make a great PocketBase +
-                together
+                React App
               </h2>
             </>
           }

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

@@ -22,8 +22,7 @@ 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 for fresh South West produce to be delivered to
+                Are you ready to save 20 hours?
-                your door?
               </h2>
             </>
           }

Frontend/app/layout.tsx

@@ -9,10 +9,10 @@ import { cookies } from "next/headers";
 import { isAuthenticated } from "@/lib/auth";
 import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
 import PrelineScript from "@/components/Utilities/PrelineScript";
-import pb from "@/lib/pocketbase";
+import { title } from "@/constants";
 
-const raleway = Raleway({
+const raleway = Arimo({
-  variable: "--heading-font",
+  variable: "--body-font",
   subsets: ["latin"],
 });
 
@@ -28,8 +28,8 @@ const indieFlower = Indie_Flower({
 });
 
 export const metadata: Metadata = {
-  title: "FastPocket",
+  title: title,
-  description: "FastPocket",
+  description: title,
 };
 
 export default async function RootLayout({

Frontend/components/BlogCard.tsx

@@ -19,7 +19,7 @@ function BlogCard({
     <>
       <Link
         href={`/blogs/${slug}`}
-        className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto bg-base-100  p-10 rounded-xl"
+        className="w-52 md:w-64 md:max-w-[300px] h-fit flex flex-col items-center flex-auto bg-base-200  p-10 rounded-xl shadow-lg"
       >
         <div className="w-full aspect-[4/3] rounded-lg overflow-hidden relative">
           <Image

Frontend/components/Footer.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React from "react";
-import Icon from "./Icon";
+import { title } from "@/constants";
+import Logo from "./Logo";
 
 function Footer() {
   return (
@@ -12,14 +13,14 @@ function Footer() {
             {/* Social links */}
             <ul className="flex md:order-1 md:mb-0 justify-center text-base-content fill-base-content">
               <li>
-                <Icon name="LeafThree24Filled" size="xlarge" />
+                <Logo />
               </li>
             </ul>
           </div>
 
           {/* Copyrights note */}
           <div className="text-base-content text-xs text-center  mt-2">
-            &copy; {new Date().getFullYear()} Bethel Farms
+            &copy; {new Date().getFullYear()} {title}
           </div>
         </div>
       </div>

Frontend/components/Logo.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import Icon from "./Icon";
+import Icon from "../images/icon.svg";
 import Link from "next/link";
+import Image from "next/image";
 
 interface LogoProps {
   label?: string;
@@ -15,11 +16,12 @@ function Logo({ label, className }: LogoProps) {
           ? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
           : "/"
       }
-      className={className}
+      className={className ?? "" + " flex flex-row items-center justify-center"}
       target={label !== undefined ? "_blank" : ""}
     >
       {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
-      <Icon name="LeafThree24Filled" size="xlarge" />
+
+      <Image priority src={Icon} alt="Follow us on Twitter" width={40} />
       {label !== undefined ? (
         <span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
           {label}

Frontend/components/PriceCard.tsx

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

Frontend/components/Utilities/Background.tsx

@@ -2,7 +2,7 @@
 
 import colors, { hexToRgb } from "@/utils/colors";
 import { useTheme } from "next-themes";
-import React, { ReactNode, useEffect, useMemo, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 
 const Background = ({ children }: { children: ReactNode }) => {
   const { theme } = useTheme();
@@ -25,7 +25,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/hero.jpg)`,
+        backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/circuit.svg)`,
       }}
     >
       {children}

Frontend/constants/index.ts

@@ -5,3 +5,5 @@ export const companySizeList = [
     "70-100 employees",
     "100+ employees"
 ]
+
+export const title = "FastPocket"

Frontend/sections/BlogContent.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 function BlogContent({ post }: { post: any }) {
   return (
-    <div className="bg-base-200 mx-4 lg:mx-0 px-8 py-12 rounded-lg">
+    <div className="bg-base-200 mx-4 lg:mx-0 px-8 py-12 rounded-lg shadow-lg">
       <h1 className="font-heading text-4xl font-bold text-base-content">
         {post.title}
       </h1>

Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx

@@ -48,7 +48,7 @@ const FormLeftDescriptionRightContactUs = () => {
         <div className="max-w-2xl lg:max-w-5xl mx-auto">
           <div className="mt-12 grid items-start lg:grid-cols-2 gap-6 lg:gap-16">
             {/* Card */}
-            <div className="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8  bg-base-100 min-h-[20rem]">
+            <div className="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8  bg-base-200 min-h-[20rem] shadow-lg">
               <h2 className="mb-8 text-xl font-semibold text-base-content ">
                 Fill in the form
               </h2>

Frontend/sections/Hero/SquaredBackgroundHero.tsx

@@ -1,3 +1,4 @@
+import { title } from "@/constants";
 import React from "react";
 
 const SquaredBackgroundHero = () => {
@@ -11,7 +12,7 @@ const SquaredBackgroundHero = () => {
             <div>
               <h1 className="block text-3xl font-bold bg-base-content sm:text-4xl lg:text-6xl lg:leading-tight">
                 Start your journey with{" "}
-                <span className="text-primary">FastPocket</span>
+                <span className="text-primary">{title}</span>
               </h1>
               <p className="mt-3 text-lg text-secondary-content">
                 Hand-picked professionals and expertly crafted components,

Frontend/sections/Hero/WaitingListWithImageHero.tsx

@@ -8,6 +8,8 @@ import Icon from "@/components/Icon";
 import Footer from "@/components/Footer";
 import Background from "@/components/Utilities/Background";
 import { toast } from "react-toastify";
+import { title } from "@/constants";
+import Logo from "@/components/Logo";
 
 const WaitingListWithImageHero = () => {
   const {
@@ -44,16 +46,18 @@ 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">
+        <div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-300 rounded-xl shadow-lg">
-          <h1 className="font-semibold text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
+          <h1 className=" text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
-            <Icon name="LeafThree24Filled" size="xlarge" />
+            <Logo />
-            Bethel Farms
+            {title}
           </h1>
           {typeof window !== "undefined" &&
           !localStorage.getItem("waitinglist") ? (
             <>
-              <h2 className="text-2xl text-base-content">
+              <h2 className="text-2xl text-base-content font-heading font-black flex-wrap max-w-sm">
-                Get notified when we launch
+                <span className="bg-primary p-1">Finish</span> Your React +
+                PocketBase project, With A{" "}
+                <span className="bg-primary p-1">Head Start</span>
               </h2>
               <form onSubmit={handleSubmit(onSubmit)}>
                 <div className="mt-8 space-y-0">
@@ -169,7 +173,10 @@ const WaitingListWithImageHero = () => {
                     </div>
                   </div>
                   <div className="grid">
-                    <button className="btn btn-neutral" type="submit">
+                    <button
+                      className="btn btn-primary text-primary-content"
+                      type="submit"
+                    >
                       Join the waitlist
                       <svg
                         className="flex-shrink-0 size-4"

Frontend/tailwind.config.ts

@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-const defaultTheme = require("tailwindcss/defaultTheme");
+// const defaultTheme = require("tailwindcss/defaultTheme");
 
 const config: Config = {
   content: [
@@ -69,15 +69,15 @@ const config: Config = {
     themes: [
       {
         light: {
-          primary: "#5700ff",
+          primary: "#FD5469",
           "primary-content": "#fff",
           secondary: "#ff7400",
           "secondary-content": "#000",
           accent: "#fd0000",
           neutral: "#28282e",
-          "base-100": "#fefaff",
+          "base-100": "#fefffd",
-          "base-200": "#e1e2e9",
+          "base-200": "#fcfeff",
-          "base-300": "#c5cad3",
+          "base-300": "#fefaff",
           "base-content": "#000",
           info: "#00f5ff",
           success: "#00ff8b",
@@ -85,15 +85,15 @@ const config: Config = {
           error: "#ff0051",
         },
         dark: {
-          primary: "#5900ff",
+          primary: "#FD5469",
           "primary-content": "#fff",
           secondary: "#002eff",
           "secondary-content": "#fff",
           accent: "#006cff",
           neutral: "#060206",
-          "base-100": "#292924",
+          "base-100": "#2a3130",
           "base-200": "#2a2d2a",
-          "base-300": "#2b3130",
+          "base-300": "#292924",
           "base-content": "#fff",
           info: "#009ae0",
           success: "#76e200",

Frontend/utils/getPostMetaData.ts

@@ -1,23 +1,6 @@
 import pb from '@/lib/pocketbase';
 
 const getPostMetadata = async () => {
-  // const folder = path.join(process.cwd(), '/blogs');
-  // const files = fs.readdirSync(folder);
-  // const markdownPosts = files.filter((file) => file.endsWith(".md"));
-
-  // Get gray-matter data from each file.
-  // const posts = markdownPosts.map((fileName) => {
-  //   const fileContents = fs.readFileSync(`blogs/${fileName}`, "utf8");
-  //   const matterResult = matter(fileContents);
-  //   return {
-  //     title: matterResult.data.title,
-  //     date: matterResult.data.date,
-  //     author: matterResult.data.author,
-  //     subtitle: matterResult.data.subtitle,
-  //     slug: fileName.replace(".md", ""),
-  //     image: matterResult.data.image,
-  //   };
-  // });
   try {
     return (await (pb.collection("blog").getList(1, 50))).items
   } catch (error) {