mrwyndham/fastpocket
1
2
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

added stylings

Browse Source
This commit is contained in:
James Wyndham 2024-02-16 16:33:55 +08:00
parent 8143fe009f
commit 15eaf62995
18 changed files with 153 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Backend/README.md
View File

@ -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)

37
Frontend/app/(admin)/blogs/page.tsx
View File

@ -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,24 +16,26 @@ export default function BlogsPage() {
role="main"
className="h-full flex-grow flex flex-col bg-white dark:bg-black"
>
{/* Page sections */}
<PageHeader
title="Blogs"
subtitle={
<>
{" "}
<h2 className="text-black dark:text-white font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
Join us for the journey as we make great food. Learn and grow
together
</h2>
</>
}
/>
<div className="max-w-6xl mx-auto mb-24 h-full w-full py-12 px-8">
<div className="w-full flex items-start justify-center flex-row flex-wrap gap-x-8 gap-y-8 md:gap-12 text-black dark:text-white">
{postPreviews}
<Background>
{/* Page sections */}
<PageHeader
title="Blogs"
subtitle={
<>
{" "}
<h2 className="text-black dark:text-white font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
Join us for the journey as we make great food. Learn and grow
together
</h2>
</>
}
/>
<div className="max-w-6xl mx-auto mb-24 h-full w-full py-12 px-8">
<div className="w-full flex items-start justify-center flex-row flex-wrap gap-x-8 gap-y-8 md:gap-12 text-black dark:text-white">
{postPreviews}
</div>
</div>
</div>
</Background>
</main>
);
}

11
Frontend/app/(admin)/contact/page.tsx
View File

@ -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">
<Spacer className="pt-28" />
<FormLeftDescriptionRightContactUs />
<Footer />
<Spacer className="pt-16" />
<Background>
<Spacer className="pt-28" />
<FormLeftDescriptionRightContactUs />
<Footer />
<Spacer className="pt-16" />
</Background>
</div>
);
};

51
Frontend/app/(admin)/pricing/page.tsx
View File

@ -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,31 +32,33 @@ 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"
>
<PageHeader
title="Pricing"
subtitle={
<>
{" "}
<h2 className="h3 text-base-content content text-center max-w-6xl mx-auto px-6">
Are you ready for fresh South West produce to be delivered to your
door?
</h2>
</>
}
/>
<div className="flex items-center justify-center mt-10">
<PriceToggle isAnnual={isAnnual} onChange={handleToggle} />
</div>
<div className="max-w-6xl mx-auto mb-24 h-full">
<div
className={`w-screen lg:w-full flex gap-x-4 lg:justify-center gap-y-8 px-6 pt-12 overflow-x-scroll`}
>
{products.map((x, i) => (
<PriceCard key={i} product={x} isAnnual={isAnnual} />
))}
<Background>
<PageHeader
title="Pricing"
subtitle={
<>
{" "}
<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 door?
</h2>
</>
}
/>
<div className="flex items-center justify-center mt-10">
<PriceToggle isAnnual={isAnnual} onChange={handleToggle} />
</div>
</div>
<Newsletter />
<div className="max-w-6xl mx-auto mb-24 h-full">
<div
className={`w-screen lg:w-full flex gap-x-4 lg:justify-center gap-y-8 px-6 pt-12 overflow-x-scroll`}
>
{products.map((x, i) => (
<PriceCard key={i} product={x} isAnnual={isAnnual} />
))}
</div>
</div>
<Newsletter />
</Background>
</main>
);
}

5
Frontend/app/layout.tsx
View File

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

2
Frontend/components/BlogCard.tsx
View File

@ -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

2
Frontend/components/Header.tsx
View File

@ -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>

7
Frontend/components/Logo.tsx
View File

@ -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>
);
}

2
Frontend/components/Navigation.tsx
View File

@ -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 */}

23
Frontend/components/Utilities/Background.tsx Normal file
View File

@ -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;

30
Frontend/package-lock.json generated
View File

@ -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": {

1
Frontend/package.json
View File

@ -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",

8
Frontend/sections/AccountContent.tsx
View File

@ -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>

14
Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
View File

@ -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">
<h2 className="mb-8 text-xl font-semibold text-gray-800 dark:text-gray-200">
<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-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

2
Frontend/sections/Hero/SquaredBackgroundHero.tsx
View File

@ -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,

22
Frontend/sections/Hero/WaitingListWithImageHero.tsx
View File

@ -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:
"linear-gradient(rgba(0, 0, 0, 0.7), rgba(135, 80, 156, 0.05)), url(/images/hero.jpg)",
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)",
}}
>
<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

11
Frontend/tailwind.config.ts
View File

@ -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;

0
Frontend/utils/colors.ts Normal file
View File