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

feature - changed payment on frontend

This commit is contained in:
James Wyndham 2024-03-21 07:12:24 +08:00
parent ef4282afcd
commit d2917055ea
6 changed files with 38 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/app/layout.tsx
View File

@ -8,7 +8,6 @@ import Header from "@/components/Header";
import { cookies } from "next/headers";
import { isAuthenticated } from "@/lib/auth";
import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
import PrelineScript from "@/components/Utilities/PrelineScript";
import { title } from "@/constants";
const raleway = Arimo({
@ -65,7 +64,6 @@ export default async function RootLayout({
/>
</ThemeProvider>
</body>
<PrelineScript />
</PHProvider>
</html>
);

7
Frontend/app/page.tsx
View File

@ -1,6 +1,9 @@
import "aos/dist/aos.css";
import React from "react";
import { WaitingListWithImageHero } from "@/sections/Hero";
import {
SquaredBackgroundHero,
WaitingListWithImageHero,
} from "@/sections/Hero";
import PageWrapper from "@/components/Utilities/PageWrapper";
import Footer from "@/components/Footer";
import PageHeader from "@/sections/PageHeader";
@ -16,7 +19,7 @@ export default function Home() {
return (
<>
<PageWrapper>
<WaitingListWithImageHero />
<SquaredBackgroundHero />
<VerticalTabsFeature />
<div className="bg-primary/2">
<ContainerImageIconBlocksFeature />

2
Frontend/components/PriceCard.tsx
View File

@ -66,7 +66,7 @@ export default function PriceCard({
>
<div className="flex flex-col h-full">
<div className="mb-12 relative">
{false && (
{true && (
<p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-primary text-center">
Popular
</p>

27
Frontend/components/Utilities/PrelineScript.tsx
View File

@ -1,27 +0,0 @@
"use client";
import { usePathname } from "next/navigation";
import { useEffect } from "react";
import { IStaticMethods } from "preline/preline";
declare global {
interface Window {
HSStaticMethods: IStaticMethods;
}
}
export default function PrelineScript() {
const path = usePathname();
useEffect(() => {
import("preline/preline");
}, []);
useEffect(() => {
setTimeout(() => {
window?.HSStaticMethods?.autoInit();
}, 100);
}, [path]);
return null;
}

3
Frontend/sections/Features/ContainerImageIconBlocksFeature.tsx
View File

@ -6,7 +6,8 @@ function ContainerImageIconBlocksFeature() {
<>
{/* Features */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div className="aspect-w-16 aspect-h-7 rounded-xl">
{/* HIDDEN */}
<div className="hidden aspect-w-16 aspect-h-7 rounded-xl">
<Image
className="w-full object-contain max-h-[40rem] rounded-xl"
width="1000"

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

@ -1,4 +1,5 @@
import { title } from "@/constants";
import Image from "next/image";
import React from "react";
const SquaredBackgroundHero = () => {
@ -6,25 +7,25 @@ const SquaredBackgroundHero = () => {
<>
{/* Hero */}
<div className="h-screen w-screen flex items-center">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
<div className="md:max-w-[50rem] xl:max-w-[60rem] mx-auto px-4 sm:px-6 lg:px-8">
{/* Grid */}
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
<div className="grid md:grid-cols-2 gap-4 md:gap-0 xl:gap-20 md:items-center">
<div>
<h1 className="block text-3xl font-bold bg-base-content sm:text-4xl lg:text-6xl lg:leading-tight">
Start your journey with{" "}
<h1 className="block text-3xl font-bold sm:text-4xl lg:text-6xl lg:leading-tight">
Build your app fast with{" "}
<span className="text-primary">{title}</span>
</h1>
<p className="mt-3 text-lg text-secondary-content">
Hand-picked professionals and expertly crafted components,
designed for any kind of entrepreneur.
Join in a tight knit community of like minded makers as we build
apps using Pocketbase and React
</p>
{/* Buttons */}
<div className="mt-7 grid gap-3 w-full sm:inline-flex">
<a
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary bg-base-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-primary text-primary-content hover:bg-opacity-60 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="https://buy.stripe.com/4gwaGQa9egxb5rO9AA"
>
Get started
Get FastPocket
<svg
className="flex-shrink-0 size-4"
xmlns="http://www.w3.org/2000/svg"
@ -40,21 +41,15 @@ const SquaredBackgroundHero = () => {
<path d="m9 18 6-6-6-6" />
</svg>
</a>
<a
className="py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-base-100 bg-secondary bg-base-content shadow-sm hover:bg-opacity-600 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
Contact sales team
</a>
</div>
{/* End Buttons */}
{/* Review */}
<div className="mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
{/* HIDDEN Review */}
<div className="hidden mt-6 lg:mt-10 grid grid-cols-2 gap-x-5">
{/* Review */}
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -67,7 +62,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -80,7 +75,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -93,7 +88,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -106,7 +101,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -119,13 +114,13 @@ const SquaredBackgroundHero = () => {
/>
</svg>
</div>
<p className="mt-3 text-sm bg-base-content">
<p className="mt-3 text-sm">
<span className="font-bold">4.6</span> /5 - from 12k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 bg-base-content"
className="h-auto w-16"
width={80}
height={27}
viewBox="0 0 80 27"
@ -165,7 +160,7 @@ const SquaredBackgroundHero = () => {
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -178,7 +173,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -191,7 +186,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -204,7 +199,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -217,7 +212,7 @@ const SquaredBackgroundHero = () => {
/>
</svg>
<svg
className="size-4 bg-base-content"
className="size-4"
width={51}
height={51}
viewBox="0 0 51 51"
@ -234,13 +229,13 @@ const SquaredBackgroundHero = () => {
/>
</svg>
</div>
<p className="mt-3 text-sm bg-base-content">
<p className="mt-3 text-sm">
<span className="font-bold">4.8</span> /5 - from 5k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 bg-base-content"
className="h-auto w-16"
width={110}
height={28}
viewBox="0 0 110 28"
@ -265,132 +260,14 @@ const SquaredBackgroundHero = () => {
</div>
{/* End Col */}
<div className="relative ms-4">
<img
<Image
className="w-full rounded-md"
src="https://images.unsplash.com/photo-1665686377065-08ba896d16fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&h=800&q=80"
width="700"
height="800"
src="/images/fastpocket-diagram.png"
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" />
{/* SVG*/}
<div className="absolute bottom-0 start-0">
<svg
className="w-2/3 ms-auto h-auto bg-base-content dark:text-slate-900"
width={630}
height={451}
viewBox="0 0 630 451"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x={531}
y={352}
width={99}
height={99}
fill="currentColor"
/>
<rect
x={140}
y={352}
width={106}
height={99}
fill="currentColor"
/>
<rect
x={482}
y={402}
width={64}
height={49}
fill="currentColor"
/>
<rect
x={433}
y={402}
width={63}
height={49}
fill="currentColor"
/>
<rect
x={384}
y={352}
width={49}
height={50}
fill="currentColor"
/>
<rect
x={531}
y={328}
width={50}
height={50}
fill="currentColor"
/>
<rect
x={99}
y={303}
width={49}
height={58}
fill="currentColor"
/>
<rect
x={99}
y={352}
width={49}
height={50}
fill="currentColor"
/>
<rect
x={99}
y={392}
width={49}
height={59}
fill="currentColor"
/>
<rect
x={44}
y={402}
width={66}
height={49}
fill="currentColor"
/>
<rect
x={234}
y={402}
width={62}
height={49}
fill="currentColor"
/>
<rect
x={334}
y={303}
width={50}
height={49}
fill="currentColor"
/>
<rect x={581} width={49} height={49} fill="currentColor" />
<rect x={581} width={49} height={64} fill="currentColor" />
<rect
x={482}
y={123}
width={49}
height={49}
fill="currentColor"
/>
<rect
x={507}
y={124}
width={49}
height={24}
fill="currentColor"
/>
<rect
x={531}
y={49}
width={99}
height={99}
fill="currentColor"
/>
</svg>
</div>
{/* End SVG*/}
</div>
{/* End Col */}
</div>