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

feature - added hero

This commit is contained in:
James Wyndham 2024-02-15 17:03:49 +08:00
parent 5d624512df
commit c9b1bd8ee8
19 changed files with 603 additions and 654 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Frontend/app/layout.tsx
View File

@ -9,7 +9,7 @@ import Header from "@/components/Header";
import { cookies } from "next/headers";
import { isAuthenticated } from "@/lib/auth";
import { GTagProvider, PHProvider } from "./providers";
import PrelineScript from "@/components/PrelineScript";
import PrelineScript from "@/components/Utilities/PrelineScript";
const raleway = Raleway({
variable: "--display-font",
@ -39,14 +39,6 @@ export default async function RootLayout({
<GTagProvider />
<body className={`${arimo.className} bg-black flex`}>
<Header isUserLoggedIn={isUserLoggedIn} />
{/* <main className="flex flex-col min-h-screen overflow-hidden h-full">
<div className="grow h-full">
<div className="h-full md:h-auto ">
{children}
</div>
</div>
</main> */}
{children}
<ToastContainer
position="bottom-left"

19
Frontend/app/page.tsx
View File

@ -12,10 +12,13 @@ import { Testimonial } from "@/sections/Testimonial";
import {
CenterAllignedWithVideoHero,
SquaredBackgroundHero,
WaitingListWithImageHero,
} from "@/sections/HeroSections";
import Spacer from "@/components/Spacer";
import Spacer from "@/components/Utilities/Spacer";
import LandingPage from "@/pages/LandingPage";
import LandingPageWaitingList from "@/pages/LandingPageWaitingList";
import PageWrapper from "@/components/Utilities/PageWrapper";
import Footer from "@/components/Footer";
import SimpleHero from "@/sections/HeroSections/SimpleHero";
export default function Home() {
useEffect(() => {
@ -39,7 +42,17 @@ export default function Home() {
<FrequentlyAsked />
<Testimonial />
<Newsletter /> */}
<LandingPage />
{/* <LandingPage /> */}
<PageWrapper>
{/* ========== END HEADER ========== */}
{/* ========== MAIN CONTENT ========== */}
{/* <WaitingListWithImageHero /> */}
<CenterAllignedWithVideoHero />
{/* ========== END MAIN CONTENT ========== */}
{/* ========== FOOTER ========== */}
<Footer />
{/* ========== END FOOTER ========== */}
</PageWrapper>
{/* <LandingPageWaitingList /> */}
</>
);

4
Frontend/components/Footer.tsx
View File

@ -1,10 +1,10 @@
import React from "react";
import Logo from "../sections/Logo";
import Logo from "./Logo";
function Footer() {
return (
<footer>
<div className="py-12 md:py-16">
<div className="py-12 md:py-1 bg-base-100">
<div className="max-w-6xl mx-auto px-4 sm:px-6" data-aos="fade-up">
{/* Bottom area */}
<div className="flex items-center justify-center">

5
Frontend/sections/Logo.tsx → Frontend/components/Logo.tsx
View File

@ -4,9 +4,10 @@ import Image from "next/image";
interface LogoProps {
label?: string;
className?: string;
}
function Logo({ label }: LogoProps) {
function Logo({ label, className }: LogoProps) {
return (
<a
href={
@ -14,7 +15,7 @@ function Logo({ label }: LogoProps) {
? "https://www.youtube.com/channel/UCZzzsJK5koyqUnP4x4oXnqw"
: "/"
}
className="group relative cursor-pointer"
className={className}
target={label !== undefined ? "_blank" : ""}
>
{/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}

6
Frontend/components/Navigation.tsx
View File

@ -1,6 +1,6 @@
"use client";
import Logo from "@/sections/Logo";
import Logo from "@/components/Logo";
import React, { useState } from "react";
import { Menu } from "@styled-icons/entypo/Menu";
import Link from "next/link";
@ -35,7 +35,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
{/* Site branding */}
<div className="shrink-0 mr-4">
{/* Logo */}
<Logo />
<Logo className="group relative cursor-pointer" />
</div>
{/* Navbar menu content here */}
<li>
@ -72,7 +72,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
{/* Sidebar content here */}
<div className="shrink-0 m-3">
{/* Logo */}
<Logo />
<Logo className="group relative cursor-pointer" />
</div>
<li>
<Link href="/pricing">Pricing</Link>

12
Frontend/components/Utilities/PageWrapper.tsx Normal file
View File

@ -0,0 +1,12 @@
import { WaitingListWithImageHero } from "@/sections/HeroSections";
import React from "react";
function PageWrapper({ children }: { children: React.ReactNode }) {
return (
<main className="h-full flex flex-col my-auto mx-auto size-full flex-grow">
{children}
</main>
);
}
export default PageWrapper;

0
Frontend/components/PrelineScript.tsx → Frontend/components/Utilities/PrelineScript.tsx
View File

0
Frontend/components/Spacer.tsx → Frontend/components/Utilities/Spacer.tsx
View File

0
Frontend/components/YoutubeEmbed.tsx → Frontend/components/Utilities/YoutubeEmbed.tsx
View File

12
Frontend/images/icon.svg
View File

@ -1,10 +1,4 @@
<svg width="43" height="46" viewBox="0 0 43 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.9002 35.5616C37.7824 41.6221 30.8134 45.606 22.9095 45.606C10.2569 45.606 0 35.3968 0 22.803C0 10.2093 10.2569 0 22.9095 0C28.7626 0 33.946 2.05005 37.9956 5.645L40.2308 2.54121L43 12.7985L33.0174 12.7994L35.3735 9.38232L36.9348 7.11791L37.9952 5.64554C36.9341 7.10145 36.3621 7.92015 35.3735 9.38232C32.0225 5.91392 27.9994 4.59549 22.7832 4.59549C12.6115 4.59549 4.36577 12.8029 4.36577 22.9273C4.36577 33.0517 12.6115 41.2592 22.7832 41.2592C29.228 41.2592 34.8996 37.9643 38.1906 32.9746L41.9002 35.5616ZM24.9674 16.6556H16.6159V16.6581H13.036V20.2207H33.318V16.6581H24.9674V16.6556ZM33.3181 22.5929H24.9674H16.6159H13.036V26.1554H16.6159H24.9674H33.3181V22.5929ZM24.9674 28.5309H28.5466V32.0934H24.9674H16.6159V28.5309H24.9674Z" fill="url(#paint0_linear_505_291)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6174 16.6555H24.9688V16.6581H25.671V20.2206H16.5498V16.6581H16.6174V16.6555ZM16.5498 26.1554V22.5928H16.6174H24.9688H25.671V26.1554H24.9688H16.6174H16.5498ZM25.671 28.5308V32.0933H24.9688H16.6174V28.5308H24.9688H25.671Z" fill="black" fill-opacity="0.25"/>
<defs>
<linearGradient id="paint0_linear_505_291" x1="-4.56061" y1="1.30303" x2="44.9545" y2="45.6061" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF0DCA"/>
<stop offset="1" stop-color="#8000FF"/>
</linearGradient>
</defs>
<svg width="32" height="32" viewBox="0 0 48 53" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M7.02016 0.785715C6.73423 0.785715 6.43516 0.881586 6.21659 1.10016L0.836158 6.48059C0.399015 6.91773 0.399015 7.61565 0.836158 8.05279L5.13352 12.3152C5.22826 12.4728 5.36023 12.6048 5.51784 12.6995L11.8067 19.0233C11.9665 18.3502 12.3249 17.7404 12.8548 17.2764L13.0295 17.1017L12.156 16.2282L15.9643 12.42L17.0823 13.573L18.7593 12.0706L12.4355 5.74688C12.3949 5.68413 12.3481 5.62561 12.2958 5.5722L12.191 5.50234C12.1376 5.45003 12.079 5.40321 12.0163 5.36258L7.7888 1.10016C7.57023 0.881586 7.3061 0.785715 7.02016 0.785715ZM40.9798 0.785715C40.6938 0.785715 40.4297 0.881586 40.2112 1.10016L35.809 5.50233C35.6842 5.58503 35.5772 5.69196 35.4945 5.81677L29.2407 12.0707L30.9177 13.573L32.0357 12.42L35.8439 16.2283L34.9705 17.1017L35.1452 17.2764C35.6762 17.7415 36.0334 18.3502 36.1933 19.0233L42.4472 12.7345C42.6048 12.6397 42.7367 12.5078 42.8315 12.3502L47.1638 8.0528C47.6009 7.61566 47.6009 6.91774 47.1638 6.4806L41.7834 1.10016C41.5648 0.881586 41.2657 0.785715 40.9798 0.785715ZM7.02016 3.47593L9.88507 6.37578L6.11178 10.1491L3.21193 7.28416L7.02016 3.47593ZM40.9798 3.47593L44.788 7.28416L41.8882 10.1491L38.1149 6.37578L40.9798 3.47593ZM11.4922 7.94798L14.3571 10.8478L10.5838 14.6211L7.68398 11.7562L11.4922 7.94798ZM36.5077 7.94798L40.316 11.7562L37.4161 14.6211L33.6428 10.8478L36.5077 7.94798ZM24 10.8478C23.7372 10.8478 23.477 10.9428 23.2663 11.1273L14.6366 18.6739H33.3633L24.7337 11.1273C24.5229 10.9429 24.2627 10.8478 24 10.8478ZM13.868 20.9099L11.7018 51.0264C11.6795 51.3361 11.805 51.638 12.0163 51.8649C12.2276 52.0919 12.509 52.2143 12.8199 52.2143H35.1801C35.4898 52.2143 35.7735 52.0918 35.9837 51.8649C36.195 51.6379 36.3205 51.3361 36.2981 51.0264L34.132 20.9099L13.868 20.9099ZM22.882 26.5H25.118V29.854H22.882V26.5ZM10.9332 30.3781L0.836158 40.4752C0.399015 40.9123 0.399015 41.6102 0.836158 42.0474L6.21659 47.4278C6.4346 47.6458 6.73395 47.7422 7.02016 47.7422C7.30638 47.7422 7.57078 47.6458 7.7888 47.4278L9.88507 45.3315L10.3043 39.3921L7.68398 36.7717L10.5838 33.9068L10.6886 33.9767L10.9332 30.3781ZM37.0667 30.3781L37.3113 33.9767L37.4162 33.9068L40.316 36.7718L37.6957 39.3921L38.1149 45.3315L40.2112 47.4278C40.4292 47.6447 40.6936 47.7423 40.9798 47.7423C41.266 47.7423 41.5654 47.6458 41.7834 47.4278L47.1638 42.0474C47.601 41.6102 47.601 40.9123 47.1638 40.4752L37.0667 30.3781ZM6.11178 38.3789L9.88507 42.1522L7.02016 45.052L3.21193 41.2438L6.11178 38.3789ZM41.8882 38.3789L44.788 41.2438L40.9798 45.052L38.1149 42.1522L41.8882 38.3789ZM24 41.0342C25.8525 41.0342 27.354 42.5357 27.354 44.3882V49.9783H20.6459V44.3882C20.6459 42.5357 22.1474 41.0342 24 41.0342Z" fill="#fff"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

65
Frontend/pages/LandingPage.tsx
View File

@ -1,65 +0,0 @@
import React from "react";
const LandingPage = () => {
return (
<div className="h-screen max-w-[50rem] flex flex-col my-auto mx-auto size-full flex-grow">
{/* ========== END HEADER ========== */}
{/* ========== MAIN CONTENT ========== */}
<main
id="content"
role="main"
className="h-full flex items-center justify-center"
>
<div className="text-center py-10 px-4 sm:px-6 lg:px-8">
<h1 className="block text-2xl font-bold text-white sm:text-4xl">
Cover Page
</h1>
<p className="mt-3 text-lg text-gray-300">
Cover is a one-page template for building simple and beautiful home
pages using Tailwind CSS.
</p>
<div className="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
<a
className="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
<svg
className="flex-shrink-0 size-4"
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="m15 18-6-6 6-6" />
</svg>
Back to examples
</a>
</div>
</div>
</main>
{/* ========== END MAIN CONTENT ========== */}
{/* ========== FOOTER ========== */}
<footer className="mt-auto text-center py-5">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p className="text-sm text-gray-400">
Cover template for{" "}
<a
className="text-white decoration-2 underline underline-offset-2 font-medium hover:text-gray-200 hover:decoration-gray-400"
href="../index.html"
>
Biz365
</a>
</p>
</div>
</footer>
{/* ========== END FOOTER ========== */}
</div>
);
};
export default LandingPage;

159
Frontend/pages/LandingPageWaitingList.tsx
View File

File diff suppressed because one or more lines are too long

BIN
Frontend/public/images/hero.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

4
Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx
View File

@ -5,7 +5,8 @@ const CenterAllignedWithVideoHero = () => {
return (
<>
{/* Hero */}
<div className="relative overflow-hidden">
<div className="h-screen w-screen flex flex-col">
<div className="relative overflow-hidden my-auto">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div className="max-w-2xl text-center mx-auto">
<h1 className="block text-3xl font-bold text-primary-content sm:text-4xl md:text-5xl">
@ -26,6 +27,7 @@ const CenterAllignedWithVideoHero = () => {
</div>
</div>
</div>
</div>
{/* End Hero */}
</>
);

41
Frontend/sections/HeroSections/SimpleHero.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from "react";
const SimpleHero = () => {
return (
<div className="h-screen flex items-center justify-center">
<div className="text-center py-10 px-4 sm:px-6 lg:px-8">
<h1 className="block text-2xl font-bold text-white sm:text-4xl">
Cover Page
</h1>
<p className="mt-3 text-lg text-gray-300">
Cover is a one-page template for building simple and beautiful home
pages using Tailwind CSS.
</p>
<div className="mt-5 flex flex-col justify-center items-center gap-2 sm:flex-row sm:gap-3">
<a
className="w-full sm:w-auto py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-white text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
<svg
className="flex-shrink-0 size-4"
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="m15 18-6-6 6-6" />
</svg>
Back to examples
</a>
</div>
</div>
</div>
);
};
export default SimpleHero;

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

@ -4,6 +4,7 @@ const SquaredBackgroundHero = () => {
return (
<>
{/* 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">
{/* Grid */}
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
@ -394,6 +395,7 @@ const SquaredBackgroundHero = () => {
</div>
{/* End Grid */}
</div>
</div>
{/* End Hero */}
</>
);

114
Frontend/sections/HeroSections/WaitingListWithImageHero.tsx Normal file
View File

@ -0,0 +1,114 @@
import Logo from "@/components/Logo";
import React from "react";
const WaitingListWithImageHero = () => {
return (
<div className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed bg-[url('/images/hero.jpg')]">
<div className="h-screen w-full bg-clip flex items-center justify-center opacity-60 bg-base-100 ">
<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">
<Logo className="w-10 flex" />
Bethel Farms
</h1>
<h2 className="text-2xl text-primary-content sm:text-4xl">
Get notified when we launch
</h2>
<form>
<div className="mt-8 space-y-4">
<div>
<label
htmlFor="hs-cover-with-gradient-form-name-1"
className="sr-only"
>
Full name
</label>
<div className="relative">
<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"
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-gray-400"
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="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
<circle cx={12} cy={7} r={4} />
</svg>
</div>
</div>
</div>
<div>
<label
htmlFor="hs-cover-with-gradient-form-email-1"
className="sr-only"
>
Email address
</label>
<div className="relative">
<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"
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-gray-400"
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={20} height={16} x={2} y={4} rx={2} />
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
</svg>
</div>
</div>
</div>
<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"
>
Join the waitlist
<svg
className="flex-shrink-0 size-4"
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="m9 18 6-6-6-6" />
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
);
};
export default WaitingListWithImageHero;

4
Frontend/sections/HeroSections/index.ts
View File

@ -1,6 +1,8 @@
import SquaredBackgroundHero from "./SquaredBackgroundHero";
import CenterAllignedWithVideoHero from "./CenterAllignedWithVideoHero";
import WaitingListWithImageHero from "./WaitingListWithImageHero";
export {
SquaredBackgroundHero,
CenterAllignedWithVideoHero
CenterAllignedWithVideoHero,
WaitingListWithImageHero
};

2
Frontend/sections/Video.tsx
View File

@ -1,6 +1,6 @@
"use client";
import YouTubeFrame from "@/components/YoutubeEmbed";
import YouTubeFrame from "@/components/Utilities/YoutubeEmbed";
import React from "react";
import { useState, useEffect } from "react";