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

feature - theming

This commit is contained in:
James Wyndham 2024-02-26 17:37:09 +08:00
parent 4b2761b0d6
commit a2fd4e8756
17 changed files with 55 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
together
Take a look as we show you how to make a great PocketBase +
React App
</h2>
</>
}

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

@ -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
your door?
Are you ready to save 20 hours?
</h2>
</>
}

10
Frontend/app/layout.tsx
View File

@ -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({
variable: "--heading-font",
const raleway = Arimo({
variable: "--body-font",
subsets: ["latin"],
});
@ -28,8 +28,8 @@ const indieFlower = Indie_Flower({
});
export const metadata: Metadata = {
title: "FastPocket",
description: "FastPocket",
title: title,
description: title,
};
export default async function RootLayout({

2
Frontend/components/BlogCard.tsx
View File

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

7
Frontend/components/Footer.tsx
View File

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

8
Frontend/components/Logo.tsx
View File

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

4
Frontend/components/PriceCard.tsx
View File

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

4
Frontend/components/Utilities/Background.tsx
View File

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

4
Frontend/constants/index.ts
View File

@ -4,4 +4,6 @@ export const companySizeList = [
"30-70 employees",
"70-100 employees",
"100+ employees"
]
]
export const title = "FastPocket"

6
Frontend/images/icon.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

1
Frontend/public/images/circuit.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

2
Frontend/sections/BlogContent.tsx
View File

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

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

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

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

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

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

@ -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">
<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">
<Icon name="LeafThree24Filled" size="xlarge" />
Bethel Farms
<div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-300 rounded-xl shadow-lg">
<h1 className=" text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
<Logo />
{title}
</h1>
{typeof window !== "undefined" &&
!localStorage.getItem("waitinglist") ? (
<>
<h2 className="text-2xl text-base-content">
Get notified when we launch
<h2 className="text-2xl text-base-content font-heading font-black flex-wrap max-w-sm">
<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"

16
Frontend/tailwind.config.ts
View File

@ -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-200": "#e1e2e9",
"base-300": "#c5cad3",
"base-100": "#fefffd",
"base-200": "#fcfeff",
"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",

17
Frontend/utils/getPostMetaData.ts
View File

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