Merge pull request 'lighthouse' (#5) from lighthouse into main

Reviewed-on: mrwyndham/fastpocket#5

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

@@ -53,7 +53,7 @@ export default async function About() {
         </p>
 
         <Image
-          src={"/images/sam.jpeg"}
+          src={"/images/sam.webp"}
           alt={"samuel wyndham"}
           width={1200}
           height={1200}

Frontend/app/layout.tsx

@@ -10,6 +10,7 @@ import { isAuthenticated } from "@/lib/auth";
 import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
 import Script from "next/script";
 import dynamic from "next/dynamic";
+import Link from "next/link";
 
 const raleway = Arimo({
   variable: "--body-font",
@@ -59,6 +60,12 @@ export default async function RootLayout({
               theme="colored"
             />
           </ThemeProvider>
+          {/* <Link 
+            rel="preload" 
+            href={"/images/fastpocket-diagram_352x316.webp"} 
+            as={"image"} 
+            type="image/webp"
+            prefetch={true}/> */}
           <Script
             id="promotekit-jq"
             src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"

Frontend/app/page.tsx

@@ -13,6 +13,7 @@ import FAQ from "@/sections/FAQ/RightAlignedBorderBottomFAQ";
 import VerticalTabsFeature from "@/sections/Features/VerticalTabsFeature";
 
 import { Metadata } from "next";
+import Head from "next/head";
 
 export const metadata: Metadata = {
   title: "Pocketbase, Stripe, Next.js, Boilerplate | FastPocket",

Frontend/app/providers.js

@@ -5,7 +5,7 @@ import GoogleAnalytics from "@/components/GoogleAnalytics";
 import { ThemeProvider as NTThemeProvider } from 'next-themes'
 
 
-if (typeof window !== 'undefined') {
+if (typeof window !== 'undefined' && !!process.env.NEXT_PUBLIC_POSTHOG_KEY && !!process.env.NEXT_PUBLIC_POSTHOG_HOST) {
   posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
     api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST
   })

Frontend/components/Footer.tsx

@@ -22,14 +22,15 @@ function Footer() {
         </div>
         {/* End Col */}
         <div>
-          <h4 className="text-xs font-semibold text-primary uppercase">
+          <h2 className="text-xs font-semibold text-primary uppercase">
             Product
-          </h4>
+          </h2>
           <div className="mt-3 grid space-y-3 text-sm">
             <p>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="/pricing"
+                aria-label="pricing"
               >
                 Pricing
               </Link>
@@ -39,6 +40,7 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="https://docs.fastpocket.dev"
+                aria-label="documentation"
               >
                 Docs
               </Link>
@@ -47,14 +49,15 @@ function Footer() {
         </div>
         {/* End Col */}
         <div>
-          <h4 className="text-xs font-semibold text-primary uppercase">
+          <h2 className="text-xs font-semibold text-primary uppercase">
             Company
-          </h4>
+          </h2>
           <div className="mt-3 grid space-y-3 text-sm">
             <p>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="/blogs"
+                aria-label="blog"
               >
                 Blog
               </Link>
@@ -63,6 +66,7 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="customers"
               >
                 Customers
               </Link>
@@ -74,14 +78,15 @@ function Footer() {
         </div>
         {/* End Col */}
         <div>
-          <h4 className="text-xs font-semibold text-primary uppercase">
+          <h2 className="text-xs font-semibold text-primary uppercase">
             Resources
-          </h4>
+          </h2>
           <div className="mt-3 grid space-y-3 text-sm">
             <p>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="https://discord.gg/YpR5QVAa3Z"
+                aria-label="community"
               >
                 Community
               </Link>
@@ -90,6 +95,7 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="support"
               >
                 Help &amp; Support
               </Link>
@@ -102,6 +108,7 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="/whatsnew"
+                aria-label="what's new"
               >
                 What&apos;s New
               </Link>
@@ -110,14 +117,15 @@ function Footer() {
         </div>
         {/* End Col */}
         <div>
-          <h4 className="text-xs font-semibold text-primary uppercase">
+          <h2 className="text-xs font-semibold text-primary uppercase">
             Developers
-          </h4>
+          </h2>
           <div className="mt-3 grid space-y-3 text-sm">
             <p>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="roadmap"
               >
                 Roadmap
               </Link>
@@ -129,14 +137,15 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="https://github.com/mrwyndham/pocketbase-stripe"
+                aria-label="github"
               >
                 GitHub
               </Link>{" "}
             </p>
           </div>
-          {/* <h4 className="mt-7 text-xs font-semibold text-primary uppercase">
+          {/* <h2 className="mt-7 text-xs font-semibold text-primary uppercase">
             Industries
-          </h4>
+          </h2>
           <div className="mt-3 grid space-y-3 text-sm">
             <p>
               <Link
@@ -166,18 +175,21 @@ function Footer() {
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="terms"
               >
                 Terms
               </Link>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="privacy"
               >
                 Privacy
               </Link>
               <Link
                 className="inline-flex gap-x-2 text-base-content hover:text-base-content/80"
                 href="#"
+                aria-label="status"
               >
                 Status
               </Link>
@@ -201,6 +213,7 @@ function Footer() {
               <Link
                 className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2  focus:ring-offset-2 focus:ring-offset-white transition "
                 href="https://discord.gg/YpR5QVAa3Z"
+                aria-label="discord"
               >
                 <svg
                   width={16}
@@ -218,6 +231,7 @@ function Footer() {
               <Link
                 className="inline-flex justify-center items-center size-10 text-center text-base-content hover:bg-base-content/80 rounded-full focus:outline-none focus:ring-2  focus:ring-offset-2 focus:ring-offset-white transition "
                 href="https://github.com/mrwyndham/pocketbase-stripe"
+                aria-label="github"
               >
                 <svg
                   className="flex-shrink-0 size-3.5"

Frontend/components/Logo.tsx

@@ -19,7 +19,6 @@ function Logo({ imageProps, ...props }: LogoProps) {
       {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
 
       <Image
-        priority
         src={"/icons/combination-logo.svg"}
         alt="Follow us on Twitter"
         width={200}

Frontend/components/Navigation.tsx

@@ -25,7 +25,6 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           <div className="flex-none lg:hidden">
             <label
               htmlFor="my-drawer-3"
-              aria-label="menu-icon"
               className="items-center"
             >
               <Icon name="Navigation24Filled" size="medium" />
@@ -35,12 +34,12 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           <div className="flex-none hidden lg:block">
             <ul className="menu menu-horizontal items-center text-base-content font-medium">
               {/* Site branding */}
-              <div className="shrink-0 mr-4">
+              <li className="shrink-0 mr-4">
                 {/* Logo */}
                 <Link href="/">
                   <Logo className="group relative cursor-pointer" />
                 </Link>
-              </div>
+              </li>
               {/* Navbar menu content here */}
               <li>
                 <Link href="/pricing" onClick={handleClick}>
@@ -77,7 +76,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           aria-label="drawer-navigation"
         ></label>
 
-        <ul className="menu w-80 h-full bg-base-100 text-base-content">
+        <div className="menu w-80 h-full bg-base-100 text-base-content">
           {/* Sidebar content here */}
           <div className="shrink-0 m-3">
             {/* Logo */}
@@ -85,13 +84,14 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
               <Logo className="group relative cursor-pointer" />
             </Link>
           </div>
-          <li>
+          <ul>
-            <Link href="/pricing">Get Your FastPocket</Link>
+            <li>
-          </li>
+              <Link href="/pricing">Get Your FastPocket</Link>
-          <li>
+            </li>
-            <Link href="/about">Meet Sam</Link>
+            <li>
-          </li>
+              <Link href="/about">Meet Sam</Link>
-
+            </li>
+          </ul>
           {/* <li>
             <Link href="/contact">Contact</Link>
           </li> */}
@@ -104,7 +104,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           ) : (
             <></>
           )}
-        </ul>
+        </div>
       </div>
     </div>
   );

Frontend/components/PriceCard.tsx

@@ -76,9 +76,9 @@ export default function PriceCard({
           <h1 className="text-center text-3xl font-inter font-bold pt-12 text-base-content ">
             {product?.name}
           </h1>
-          <h3 className="text-center pt-4 text-base-content ">
+          <h2 className="text-center pt-4 text-base-content ">
             {product?.description}
-          </h3>
+          </h2>
         </div>
         <div className="pb-12">
           <ul className="flex flex-col gap-y-3 mx-12">

Frontend/components/Utilities/Background.tsx

@@ -3,6 +3,7 @@
 import colors, { hexToRgb } from "@/utils/colors";
 import { useTheme } from "next-themes";
 import React, { ReactNode, useEffect, useState } from "react";
+import Image from "next/image";
 
 const Background = ({
   children,
@@ -21,23 +22,28 @@ const Background = ({
   if (!mounted) {
     return (
       <div
-        className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse`}
+        className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col animation-pulse " + className}
       ></div>
     );
   }
 
-  const backgroundColor = hexToRgb(colors[theme!]["base-100"]);
+  const backgroundColor = hexToRgb(colors[theme!]["neutral"]);
 
   return (
     <div
-      className={`${className} h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col`}
+      className={"h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed  flex flex-col " + className}
-      style={{
-        backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
-      }}
     >
-      {children}
+      <Image
+        src="/images/gradient.webp"
+        alt="background"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+        priority
+      />
+      <div className="z-10">{children}</div>
     </div>
   );
 };
 
-export default Background;
+export default Background;

Frontend/next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  productionBrowserSourceMaps: true,
+
   compiler: {
     // Enables the styled-components SWC transform
     styledComponents: true

Frontend/package.json

@@ -5,8 +5,9 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next build && next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@fluentui/react-icons": "2.0.227",
@@ -27,16 +28,18 @@
     "next-qrcode": "^2.5.1",
     "next-themes": "^0.2.1",
     "node-fetch-commonjs": "^3.3.2",
+    "patch-package": "^8.0.0",
     "pocketbase": "^0.18.0",
     "postcss": "^8.4.33",
     "posthog-js": "^1.105.0",
+    "postinstall-postinstall": "^2.1.0",
     "preline": "^2.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.11.0",
     "react-toastify": "^9.1.3",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.3",
     "tailwindcss": "3.3.3",
     "theme-change": "^2.5.0",
     "typescript": "5.1.6",

Frontend/public/docs/404.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current" data-has-hydrated="false">
-<head>
-<meta charset="UTF-8">
-<meta name="generator" content="Docusaurus v3.1.1">
-<title data-rh="true">FastPocket</title><meta data-rh="true" property="og:title" content="FastPocket"><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://fastpocket.dev/docs/img/docusaurus-social-card.jpg"><meta data-rh="true" name="twitter:image" content="https://fastpocket.dev/docs/img/docusaurus-social-card.jpg"><meta data-rh="true" property="og:url" content="https://fastpocket.dev/docs/404.html"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><link data-rh="true" rel="icon" href="/docs/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://fastpocket.dev/docs/404.html"><link data-rh="true" rel="alternate" href="https://fastpocket.dev/docs/404.html" hreflang="en"><link data-rh="true" rel="alternate" href="https://fastpocket.dev/docs/404.html" hreflang="x-default"><link rel="stylesheet" href="/docs/assets/css/styles.57153543.css">
-<script src="/docs/assets/js/runtime~main.baf16f9f.js" defer="defer"></script>
-<script src="/docs/assets/js/main.bf0f2e3c.js" defer="defer"></script>
-</head>
-<body class="navigation-with-keyboard">
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="https://fastpocket.dev/images/combination-icon.png" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="https://fastpocket.dev/images/combination-icon.png" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><a class="navbar__item navbar__link" href="/docs/">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">FastPocket.dev<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div></div>
-</body>
-</html>

Frontend/public/docs/markdown-page/index.html

@@ -8,7 +8,7 @@
 <script src="/docs/assets/js/main.bf0f2e3c.js" defer="defer"></script>
 </head>
 <body class="navigation-with-keyboard">
-<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="https://fastpocket.dev/images/combination-icon.png" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="https://fastpocket.dev/images/combination-icon.png" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><a class="navbar__item navbar__link" href="/docs/">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">FastPocket.dev<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><main class="container container--fluid margin-vert--lg"><div class="row mdxPageWrapper_j9I6"><div class="col col--8"><article><h1>Markdown page example</h1>
+<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__brand"><div class="navbar__logo"><img src="https://fastpocket.dev/images/combination-icon.webp" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="https://fastpocket.dev/images/combination-icon.webp" alt="FastPocket logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><a class="navbar__item navbar__link" href="/docs/">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://fastpocket.dev/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">FastPocket.dev<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><main class="container container--fluid margin-vert--lg"><div class="row mdxPageWrapper_j9I6"><div class="col col--8"><article><h1>Markdown page example</h1>
 <p>You don&#x27;t need React to write simple standalone pages.</p></article></div></div></main></div></div>
 </body>
 </html>

Frontend/sections/BlogContent.tsx

@@ -21,7 +21,6 @@ function BlogContent({ post }: { post: any }) {
       <article className="prose prose-img:rounded-xl max-w-none prose-p:text-base-content prose-a:text-primary prose-h2:text-base-content prose-li:text-base-content prose-strong:text-base-content prose-blockquote:pr-2 prose-blockquote:font-normal">
         <div className="h-full w-full">
           <Image
-            priority
             src={post.imageUrl}
             alt="post-image"
             width={0}

Frontend/sections/FAQ/RightAlignedBorderBottomFAQ.tsx

@@ -26,13 +26,14 @@ function RightAlignedBorderBottomFAQ() {
             <div className="collapse collapse-plus bg-base-300">
               <input
                 type="radio"
+                id="my-tech-stack-is"
                 name="my-accordion-3"
                 className="w-auto h-auto"
                 defaultChecked
               />
-              <div className="collapse-title text-xl font-medium">
+              <label htmlFor="my-tech-stack-is" className="collapse-title text-xl font-medium">
                 My tech stack is different can I still use it?
-              </div>
+              </label>
               <div className="collapse-content">
                 <p>
                   Yes, as long as you&apos;re comfortable with React & NextJS.
@@ -46,12 +47,13 @@ function RightAlignedBorderBottomFAQ() {
             <div className="collapse collapse-plus bg-base-300">
               <input
                 type="radio"
+                id="what-do-i-get"
                 name="my-accordion-3"
                 className="w-auto h-auto"
               />
-              <div className="collapse-title text-xl font-medium">
+              <label htmlFor="what-do-i-get" className="collapse-title text-xl font-medium">
                 What do I get exactly?
-              </div>
+              </label>
               <div className="collapse-content">
                 <p>
                   1.The NextJS starter with all the boilerplate code you need to
@@ -71,12 +73,13 @@ function RightAlignedBorderBottomFAQ() {
             <div className="collapse collapse-plus bg-base-300">
               <input
                 type="radio"
+                id="is-it-a-website"
                 name="my-accordion-3"
                 className="w-auto h-auto"
               />
-              <div className="collapse-title text-xl font-medium">
+              <label htmlFor="is-it-a-website" className="collapse-title text-xl font-medium">
                 Is it a website template?
-              </div>
+              </label>
               <div className="collapse-content">
                 <p>
                   It&apos;s more than just a template. You can copy/paste
@@ -92,12 +95,13 @@ function RightAlignedBorderBottomFAQ() {
             <div className="collapse collapse-plus bg-base-300">
               <input
                 type="radio"
+                id="are-there-any-other"
                 name="my-accordion-3"
                 className="w-auto h-auto"
               />
-              <div className="collapse-title text-xl font-medium">
+              <label htmlFor="are-there-any-other" className="collapse-title text-xl font-medium">
                 Are there any other costs associated
-              </div>
+              </label>
               <div className="collapse-content">
                 <p>
                   Many hosting platforms, like Vercel, let you host a project
@@ -111,12 +115,13 @@ function RightAlignedBorderBottomFAQ() {
             <div className="collapse collapse-plus bg-base-300">
               <input
                 type="radio"
+                id="how-is-fastpocket-different"
                 name="my-accordion-3"
                 className="w-auto h-auto"
               />
-              <div className="collapse-title text-xl font-medium">
+              <label htmlFor="how-is-fastpocket-different" className="collapse-title text-xl font-medium">
                 How is FastPocket different from other boilerplates
-              </div>
+              </label>
               <div className="collapse-content">
                 <p>
                   FastPocket is all about giving you control over how you host

Frontend/sections/Features/CardsFeature.tsx

@@ -30,9 +30,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You Like Useless Features
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">
@@ -63,9 +63,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You Like Debugging
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">
@@ -98,9 +98,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You love solving solved problems
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">
@@ -132,9 +132,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You hate shipping fast
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">
@@ -165,9 +165,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You love process more than dev
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">
@@ -197,9 +197,9 @@ function CardsFeature() {
                 </svg>
               </div>
               <div className="flex-shrink-0">
-                <h3 className="block text-lg font-semibold capitalize text-primary-content">
+                <h2 className="block text-lg font-semibold capitalize text-primary-content">
                   You hate fast profits
-                </h3>
+                </h2>
               </div>
             </div>
             <p className="text-primary-content/80">

Frontend/sections/Features/ContainerImageIconBlocksFeature.tsx

@@ -12,7 +12,7 @@ function ContainerImageIconBlocksFeature() {
             className="w-full object-contain max-h-[40rem] rounded-xl"
             width="1000"
             height="1000"
-            src="/images/fastpocket-diagram.png"
+            src="/images/fastpocket-diagram_713x640.webp"
             alt="Image Description"
           />
         </div>

Frontend/sections/Features/SolidBackgrondIconFeature.tsx

@@ -15,7 +15,7 @@ function SolidBackgrondIconFeature() {
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
-                src={"/images/stripe-icon.png"}
+                src={"/images/stripe-icon.webp"}
                 alt={""}
                 width={32}
                 height={32}
@@ -38,7 +38,7 @@ function SolidBackgrondIconFeature() {
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
-                src={"/images/daisyui-icon.png"}
+                src={"/images/daisyui-icon.webp"}
                 alt={""}
                 width={32}
                 height={32}
@@ -80,7 +80,7 @@ function SolidBackgrondIconFeature() {
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
-                src={"/images/pocketbase-icon.png"}
+                src={"/images/pocketbase-icon.webp"}
                 alt={""}
                 width={32}
                 height={32}
@@ -128,7 +128,7 @@ function SolidBackgrondIconFeature() {
           >
             <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
               <Image
-                src={"/images/nextjs-icon.png"}
+                src={"/images/nextjs-icon.webp"}
                 alt={""}
                 width={32}
                 height={32}

Frontend/sections/Features/VerticalTabsFeature.tsx

@@ -12,7 +12,7 @@ function VerticalTabsFeature() {
           {/* Grid */}
           <div className="relative z-10 lg:grid lg:grid-cols-12 lg:gap-16 lg:items-center">
             <div className="mb-10 lg:mb-0 lg:col-span-6 lg:col-start-8 lg:order-2">
-              <h2 className="text-2xl text-base-content font-bold sm:text-3xl ">
+              <h2 className="text-2xl text-secondary-content font-bold sm:text-3xl ">
                 Save 20+ hours of app development with FastPocket
               </h2>
               {/* Tab Navs */}
@@ -27,13 +27,13 @@ function VerticalTabsFeature() {
                     tab === "1" && "bg-base-300 shadow-lg hover:bg-base-300"
                   } text-start p-4 md:p-5 rounded-xl`}
                   id="tabs-with-card-item-1"
-                  aria-controls="tabs-with-card-1"
+                  aria-controls="tabs-with-card-item-1"
                   role="tab"
                   onClick={() => setTab("1")}
                 >
                   <span className="flex">
                     <svg
-                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content  "
+                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -51,10 +51,10 @@ function VerticalTabsFeature() {
                       <path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
                     </svg>
                     <span className="grow ms-6">
-                      <span className="block text-lg font-semibold text-base-content  ">
+                      <span className="block text-lg font-semibold text-secondary-content  ">
                         Simple Setup
                       </span>
-                      <span className="block mt-1 text-base-content ">
+                      <span className="block mt-1 text-secondary-content ">
                         FastPocket already has a codebase with all of the
                         necessary integrations to start an online business out
                         of the box AND excellent documentation
@@ -68,13 +68,13 @@ function VerticalTabsFeature() {
                     tab === "2" && "bg-base-300 shadow-lg hover:bg-base-300"
                   } text-start p-4 md:p-5 rounded-xl     `}
                   id="tabs-with-card-item-2"
-                  aria-controls="tabs-with-card-2"
+                  aria-controls="tabs-with-card-item-2"
                   role="tab"
                   onClick={() => setTab("2")}
                 >
                   <span className="flex">
                     <svg
-                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content  "
+                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -89,10 +89,10 @@ function VerticalTabsFeature() {
                       <path d="M3.34 19a10 10 0 1 1 17.32 0" />
                     </svg>
                     <span className="grow ms-6">
-                      <span className="block text-lg font-semibold text-base-content  ">
+                      <span className="block text-lg font-semibold text-secondary-content  ">
                         Copy Paste Components
                       </span>
-                      <span className="block mt-1 text-base-content ">
+                      <span className="block mt-1 text-secondary-content ">
                         We give you cookie cutter copy paste setup for your SaaS
                         with unopinionated SaaS styling that can be modified to
                         suite whatever app you are building
@@ -106,13 +106,13 @@ function VerticalTabsFeature() {
                     tab === "3" && "bg-base-300 shadow-lg hover:bg-base-300"
                   } text-start p-4 md:p-5 rounded-xl     `}
                   id="tabs-with-card-item-3"
-                  aria-controls="tabs-with-card-3"
+                  aria-controls="tabs-with-card-item-3"
                   role="tab"
                   onClick={() => setTab("3")}
                 >
                   <span className="flex">
                     <svg
-                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-base-content  "
+                      className="flex-shrink-0 mt-2 size-6 md:size-7 text-secondary-content  "
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -130,10 +130,10 @@ function VerticalTabsFeature() {
                       <path d="M17 19h4" />
                     </svg>
                     <span className="grow ms-6">
-                      <span className="block text-lg font-semibold text-base-content  ">
+                      <span className="block text-lg font-semibold text-secondary-content  ">
                         Simple Bring Your Own Backend
                       </span>
-                      <span className="block mt-1 text-base-content ">
+                      <span className="block mt-1 text-secondary-content ">
                         We offer deployment templates that allow you to deploy
                         to Digital Ocean, Fly.io, Pockethost or any other
                         backend you want to use. You have the control over your
@@ -157,8 +157,8 @@ function VerticalTabsFeature() {
                       aria-labelledby="tabs-with-card-item-1"
                     >
                       <Image
-                        className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
+                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
-                        src="/images/vertical-tabs-feature-1.png"
+                        src="/images/vertical-tabs-feature-1_520x643.webp"
                         alt="Image Description"
                         width="987"
                         height="1220"
@@ -172,8 +172,8 @@ function VerticalTabsFeature() {
                       aria-labelledby="tabs-with-card-item-2"
                     >
                       <Image
-                        className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
+                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
-                        src="/images/vertical-tabs-feature-2.png"
+                        src="/images/vertical-tabs-feature-2.webp"
                         alt="Image Description"
                         width="987"
                         height="1220"
@@ -187,8 +187,8 @@ function VerticalTabsFeature() {
                       aria-labelledby="tabs-with-card-item-3"
                     >
                       <Image
-                        className="shadow-xl shadow-gray-200 rounded-xl dark:shadow-gray-900/[.2] bg-base-300"
+                        className="shadow-xl shadow-base-200 rounded-xl bg-base-300"
-                        src="/images/vertical-tabs-feature-3.png"
+                        src="/images/vertical-tabs-feature-3.webp"
                         alt="Image Description"
                         width="987"
                         height="1220"
@@ -235,7 +235,7 @@ function VerticalTabsFeature() {
           {/* End Grid */}
           {/* Background Color */}
           <div className="absolute inset-0 grid grid-cols-12 size-full">
-            <div className="col-span-full lg:col-span-7 lg:col-start-6 bg-gray-100 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full dark:bg-base-300/[.075]" />
+            <div className="col-span-full lg:col-span-7 lg:col-start-6 bg-base-300 w-full h-5/6 rounded-xl sm:h-3/4 lg:h-full" />
           </div>
           {/* End Background Color */}
         </div>

Frontend/sections/Hero/SquaredBackgroundHero.tsx

@@ -29,7 +29,7 @@ const SquaredBackgroundHero = () => {
                   >
                     <Image
                       alt="fastpocket-icon"
-                      src="/images/icon.png"
+                      src="/images/icon.webp"
                       width="32"
                       height="32"
                     />
@@ -271,10 +271,11 @@ const SquaredBackgroundHero = () => {
               {/* End Col */}
               <div className="-order-1 relative mr-4 sm:mr-0 sm:ms-4 sm:order-1">
                 <Image
-                  className="w-full rounded-md"
+                  priority
+                  // className="w-full rounded-md"
                   width="700"
                   height="800"
-                  src="/images/fastpocket-diagram.png"
+                  src="/images/fastpocket-diagram_352x316.webp"
                   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" />

Frontend/tailwind.config.ts

@@ -70,7 +70,7 @@ const config: Config = {
       {
         light: {
           primary: "#FD5469",
-          "primary-content": "#fff",
+          "primary-content": "#F5F5F5",
           secondary: "#7082FF",
           "secondary-content": "#000",
           accent: "#fd0000",
@@ -86,7 +86,7 @@ const config: Config = {
         },
         dark: {
           primary: "#FD5469",
-          "primary-content": "#fff",
+          "primary-content": "#F5F5F5",
           secondary: "#7082FF",
           "secondary-content": "#fff",
           accent: "#006cff",