timniel
/
Quiz-PDF
forked from mrwyndham/fastpocket
1
0
Fork 0
Code Pull Requests Activity

feature - added homepage with more components

This commit is contained in:
James Wyndham 2024-03-01 12:18:56 +08:00
parent 5810cc112b
commit 9ae84e800e
16 changed files with 187 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,8 @@ 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 to save 20 hours?
Are you ready to save 20 hours of coding? Start your Micro-SaaS
today
</h2>
</>
}

8
Frontend/app/(public)/whatsnew/page.tsx
View File

@ -1,8 +1,7 @@
import Footer from "@/components/Footer";
import Background from "@/components/Utilities/Background";
import Spacer from "@/components/Utilities/Spacer";
import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
import SolidBackgrondIcon from "@/sections/IconsSections/SolidBackgrondIcon";
import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
import PageHeader from "@/sections/PageHeader";
import React from "react";
@ -16,12 +15,13 @@ const page = () => {
<>
{" "}
<h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
Take a look at all the cool features we&apos;ve built.
Fastpocket gives you boilerplate to help you build.
</h2>
</>
}
/>
<SolidBackgrondIcon />
<SolidBackgrondIconFeature />
<Spacer className="mt-auto" />
<Footer />
</Background>

18
Frontend/app/page.tsx
View File

@ -5,6 +5,9 @@ import { useEffect } from "react";
import React from "react";
import { WaitingListWithImageHero } from "@/sections/Hero";
import PageWrapper from "@/components/Utilities/PageWrapper";
import Footer from "@/components/Footer";
import SolidBackgrondIconFeature from "@/sections/Feature/SolidBackgrondIconFeature";
import PageHeader from "@/sections/PageHeader";
export default function Home() {
useEffect(() => {
@ -20,6 +23,21 @@ export default function Home() {
<>
<PageWrapper>
<WaitingListWithImageHero />
<div className="bg-primary/2">
<PageHeader
title="What You Get"
subtitle={
<>
{" "}
<h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
Fastpocket gives you boilerplate to help you build.
</h2>
</>
}
/>
<SolidBackgrondIconFeature />
</div>
<Footer />
</PageWrapper>
</>
);

2
Frontend/components/Footer.tsx
View File

@ -6,7 +6,7 @@ import Link from "next/link";
function Footer() {
return (
<footer className="w-full py-10 px-4 sm:px-6 lg:px-8 mx-auto bg-base-100">
<footer className="w-full pb-10 pt-14 px-4 sm:px-6 lg:px-8 mx-auto bg-base-200">
{/* Grid */}
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
<div className="col-span-full hidden lg:col-span-1 lg:flex lg:flex-col lg:items-center">

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.8), 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/circuit.svg)`,
}}
>
{children}

BIN
Frontend/public/images/daisyui-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
Frontend/public/images/nextjs-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
Frontend/public/images/pocketbase-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
Frontend/public/images/stripe-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
Frontend/public/images/tailwind-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

0
Frontend/sections/FAQ/RightAlignedBorderBottom.tsx → Frontend/sections/FAQ/RightAlignedBorderBottomFAQ.tsx
View File

155
Frontend/sections/Feature/SolidBackgrondIconFeature.tsx Normal file
View File

@ -0,0 +1,155 @@
import React from "react";
import Image from "next/image";
import Icon from "@/components/Icons/Icon";
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="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">
<Image
src={"/images/stripe-icon.png"}
alt={""}
width={32}
height={32}
/>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Stripe Payments
</h3>
<p className="mt-1 text-base-content ">
We have built stripe payments for 1 off and reoccuring payments
</p>
</div>
</a>
{/* End Icon Block */}
{/* 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">
<Image
src={"/images/daisyui-icon.png"}
alt={""}
width={32}
height={32}
/>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Theming
</h3>
<p className="mt-1 text-base-content ">
All our components include intuative theming with a js utility
class that uses your themes colors programmatically
</p>
</div>
</a>
{/* End Icon Block */}
{/* 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">
<Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Documentation
</h3>
<p className="mt-1 text-base-content ">
Every component and plugin is well documented
</p>
</div>
</a>
{/* End Icon Block */}
{/* 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">
<Image
src={"/images/pocketbase-icon.png"}
alt={""}
width={32}
height={32}
/>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Deployment Templates
</h3>
<p className="mt-1 text-base-content ">
For fly.io, raleway, and more so you can get running with
PocketBase as quickly as possible
</p>
</div>
</a>
{/* End Icon Block */}
{/* 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">
<Image
src={"/images/daisyui-icon.png"}
alt={""}
width={32}
height={32}
/>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Component Library
</h3>
<p className="mt-1 text-base-content ">
We provide fully customisable sections and components that you
can drop in
</p>
</div>
</a>
{/* End Icon Block */}
{/* 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">
<Image
src={"/images/nextjs-icon.png"}
alt={""}
width={32}
height={32}
/>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Resources
</h3>
<p className="mt-1 text-base-content ">
A growing list of resources to help you build your products
faster
</p>
</div>
</a>
{/* End Icon Block */}
</div>
</div>
{/* End Icon Blocks */}
</>
);
}
export default SolidBackgrondIconFeature;

0
Frontend/sections/Features/VerticalTabsWithOverlappingBackground.tsx → Frontend/sections/Feature/VerticalTabsWithOverlappingBackgroundFeature.tsx
View File

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

@ -45,7 +45,7 @@ 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 bg-base-100 rounded-xl shadow-lg">
<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}
@ -203,7 +203,6 @@ const WaitingListWithImageHero = () => {
)}
</div>
</div>
<Footer />
</Background>
);
};

116
Frontend/sections/IconsSections/SolidBackgrondIcon.tsx
View File

@ -1,116 +0,0 @@
import React from "react";
function SolidBackgrondIcon() {
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="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-300 rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 size-6 text-white"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<rect width={10} height={14} x={3} y={8} rx={2} />
<path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
<path d="M8 18h.01" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Stripe Payments
</h3>
<p className="mt-1 text-base-content ">
We have built stripe payments for 1 off and reoccuring payments
</p>
</div>
</a>
{/* End Icon Block */}
{/* Icon Block */}
<a
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 size-6 text-white"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M20 7h-9" />
<path d="M14 17H5" />
<circle cx={17} cy={17} r={3} />
<circle cx={7} cy={7} r={3} />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Theming
</h3>
<p className="mt-1 text-base-content ">
All our components include intuative theming with a js utility
class that uses your themes colors programmatically
</p>
</div>
</a>
{/* End Icon Block */}
{/* Icon Block */}
<a
className="group flex flex-col justify-center bg-base-300 rounded-xl p-4 md:p-7 "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl">
<svg
className="flex-shrink-0 size-6 text-white"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
</svg>
</div>
<div className="mt-5">
<h3 className="group-hover:text-base-content text-lg font-semibold text-base-content ">
Documentation
</h3>
<p className="mt-1 text-base-content ">
Every component and plugin is well documented
</p>
</div>
</a>
{/* End Icon Block */}
</div>
</div>
{/* End Icon Blocks */}
</>
);
}
export default SolidBackgrondIcon;

10
Frontend/tailwind.config.ts
View File

@ -71,13 +71,13 @@ const config: Config = {
light: {
primary: "#FD5469",
"primary-content": "#fff",
secondary: "#ff7400",
secondary: "#7082FF",
"secondary-content": "#000",
accent: "#fd0000",
neutral: "#28282e",
"base-100": "#fefffd",
"base-200": "#fcfeff",
"base-300": "#fefaff",
"base-100": "#FBFAFA",
"base-200": "#F9F8F8",
"base-300": "#F4F3F4",
"base-content": "#000",
info: "#00f5ff",
success: "#00ff8b",
@ -87,7 +87,7 @@ const config: Config = {
dark: {
primary: "#FD5469",
"primary-content": "#fff",
secondary: "#FD40FF",
secondary: "#7082FF",
"secondary-content": "#fff",
accent: "#006cff",
neutral: "#060206",