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

updated styling for site

This commit is contained in:
James Wyndham 2024-03-06 17:39:26 +08:00
parent 9ae84e800e
commit 6ea23d7352
14 changed files with 54 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
Frontend/app/(public)/pricing/page.tsx
View File

@ -7,27 +7,40 @@ import Background from "@/components/Utilities/Background";
import Footer from "@/components/Footer";
import Payment from "@/sections/Payment";
import Spacer from "@/components/Utilities/Spacer";
import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
export default function PricingPage() {
return (
<main
id="content"
role="main"
className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100 "
className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-base-100"
>
<Background>
<PageHeader
title="Pricing"
title="Your Fast Pocket Application"
subtitle={
<>
{" "}
<h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
Are you ready to save 20 hours of coding? Start your Micro-SaaS
today
<h2 className="text-base-content text-2xl font-medium content text-center max-w-4xl mx-auto px-6">
Apply now to join us as we build apps fast, together! Be among
the first to start using FastPocket and lock in your lifetime
discount.
</h2>
</>
}
/>
<h2 className="text-base-content text-4xl mt-12 font-extrabold content text-center max-w-6xl mx-auto px-6">
What you will get!
</h2>
<SolidBackgrondIconFeature />
<h2 className="text-base-content text-4xl mt-12 font-extrabold content text-center max-w-6xl mx-auto px-6">
What you will give!
</h2>
<SolidBackgrondIconFeature />
<Payment type="one_time" />
<Spacer className="mt-auto" />
<Newsletter />

4
Frontend/components/Header.tsx
View File

@ -105,10 +105,10 @@ export default function Header({ isUserLoggedIn }: HeaderProps) {
localStorage.removeItem("price");
document.getElementById("sign-up-modal")?.click();
}}
className={`btn btn-primary btn-sm text-primary-content`}
className={`btn btn-primary btn-sm text-primary-content `}
id="sign-up-modal-button"
>
Sign Up
Get First Access
</button>
</>
) : (

4
Frontend/components/Logo.tsx
View File

@ -21,9 +21,9 @@ function Logo({ imageProps, ...props }: LogoProps & LinkProps) {
<Image
priority
src={"/icons/logo.svg"}
src={"/icons/combination-logo.svg"}
alt="Follow us on Twitter"
width={40}
width={200}
height={40}
{...imageProps}
/>

12
Frontend/components/Navigation.tsx
View File

@ -42,14 +42,13 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
{/* Navbar menu content here */}
<li>
<Link href="/pricing" onClick={handleClick}>
Pricing
Become A 10x Dev
</Link>
</li>
<li>
<Link href="/blogs" onClick={handleClick}>
Blogs
</Link>
<Link href="/blogs">Meet Sam</Link>
</li>
{/* <li>
<Link href="/contact" onClick={handleClick}>
Contact
@ -83,11 +82,12 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
<Logo href="/" className="group relative cursor-pointer" />
</div>
<li>
<Link href="/pricing">Pricing</Link>
<Link href="/pricing">Get Your FastPocket</Link>
</li>
<li>
<Link href="/blogs">Blogs</Link>
<Link href="/blogs">Meet Sam</Link>
</li>
{/* <li>
<Link href="/contact">Contact</Link>
</li> */}

2
Frontend/components/PriceCard.tsx
View File

@ -117,7 +117,7 @@ export default function PriceCard({
onClick={() => submitForm(product)}
className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none"
>
Try it!
Let&apos;s go!
</button>
)}
</div>

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

@ -26,7 +26,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/circuit.svg)`,
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
}}
>
{children}

5
Frontend/public/icons/combination-logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 11 KiB

6
Frontend/public/icons/logo.svg
View File

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

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

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

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

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
Frontend/public/images/gradient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 595 KiB

14
Frontend/sections/Feature/SolidBackgrondIconFeature.tsx
View File

@ -6,14 +6,14 @@ function SolidBackgrondIconFeature() {
return (
<>
{/* Icon Blocks */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
{/* Icon Block */}
<a
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Image
src={"/images/stripe-icon.png"}
alt={""}
@ -36,7 +36,7 @@ function SolidBackgrondIconFeature() {
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Image
src={"/images/daisyui-icon.png"}
alt={""}
@ -60,7 +60,7 @@ function SolidBackgrondIconFeature() {
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
</div>
<div className="mt-5">
@ -78,7 +78,7 @@ function SolidBackgrondIconFeature() {
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Image
src={"/images/pocketbase-icon.png"}
alt={""}
@ -102,7 +102,7 @@ function SolidBackgrondIconFeature() {
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Image
src={"/images/daisyui-icon.png"}
alt={""}
@ -126,7 +126,7 @@ function SolidBackgrondIconFeature() {
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary/20 rounded-xl py-2">
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
<Image
src={"/images/nextjs-icon.png"}
alt={""}

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

@ -48,15 +48,18 @@ const WaitingListWithImageHero = () => {
<div className="text-center py-8 px-4 sm:px-6 lg:px-8 bg-base-200 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 href="/" />
{title}
</h1>
{typeof window !== "undefined" &&
!localStorage.getItem("waitinglist") ? (
<>
<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>
<span className="bg-primary p-1 text-primary-content">
Finish
</span>{" "}
Your React + PocketBase project, With A{" "}
<span className="bg-primary p-1 text-primary-content">
Head Start
</span>
</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mt-8 space-y-0">

2
Frontend/sections/PageHeader.tsx
View File

@ -7,7 +7,7 @@ interface PageHeaderProps {
function PageHeader({ title, subtitle }: PageHeaderProps) {
return (
<div className="pt-28 max-w-screen flex flex-col">
<h1 className="text-5xl font-bold text-base-content mb-6 mx-auto">
<h1 className="text-4xl md:text-5xl text-center font-bold text-base-content mb-6 mx-auto">
{title}
</h1>
{subtitle}

2
Frontend/sections/Payment.tsx
View File

@ -35,7 +35,7 @@ const Payment = ({
)}
<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`}
className={`w-screen lg:w-full pb-4 flex gap-x-4 lg:justify-center gap-y-8 px-6 pt-12 overflow-x-scroll`}
>
{isLoading ? (
<>