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

feature - the initial landing page

This commit is contained in:
James Wyndham 2024-03-07 11:00:43 +08:00
parent af1b518737
commit fdabd8cdfb
12 changed files with 272 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/app/(public)/about/page.tsx
View File

@ -20,7 +20,7 @@ export default async function BlogsPage() {
>
{/* Page sections */}
<PageHeader title="Helping Developers Build" />
<div className="max-w-4xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8 flex flex-col gap-y-6 text-center items-center">
<div className="max-w-4xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8 flex flex-col gap-y-12 text-center items-center">
<p className="text-lg text-base-content font-thin">
In 2023 I built <b className="font-bold">Sign365</b> using pocketbase
and setup an open source library to help people get setup with Stripe

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

@ -36,11 +36,7 @@ export default function PricingPage() {
</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 />

35
Frontend/app/page.tsx
View File

@ -6,8 +6,11 @@ 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";
import ContainerImageIconBlocksFeature from "@/sections/Feature/ContainerImageIconBlocksFeature";
import Background from "@/components/Utilities/Background";
import CardTestemonial from "@/sections/Testemonial/CardTestemonial";
import Payment from "@/sections/Payment";
export default function Home() {
useEffect(() => {
@ -24,19 +27,25 @@ 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 />
<ContainerImageIconBlocksFeature />
</div>
<Background>
<CardTestemonial />
</Background>
<PageHeader
title={"Want to start building your apps faster?"}
className="!pt-16"
subtitle={
<>
{" "}
<h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
Purchase now to get early access at a discounted price and start
building with fly.io and docker compose templates immediately!
</h2>
</>
}
/>
<Payment />
<Footer />
</PageWrapper>
</>

4
Frontend/components/PriceCard.tsx
View File

@ -60,7 +60,7 @@ export default function PriceCard({
};
return (
<div
className={`relative w-64 sm:w-80 bg-base-200 rounded-lg p-6 shadow-lg ${
className={`relative w-64 sm:w-80 bg-base-200 rounded-lg p-6 shadow-lg border border-primary/40 ${
loading ? "animate-pulse h-[20rem]" : ""
}`}
>
@ -115,7 +115,7 @@ export default function PriceCard({
{product && (
<button
onClick={() => submitForm(product)}
className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none"
className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary outline-none border-none capitalize"
>
Let&apos;s go!
</button>

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

@ -24,7 +24,7 @@ const Background = ({ children }: { children: ReactNode }) => {
return (
<div
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed min-h-screen flex flex-col"
className="h-full relative w-full bg-center bg-no-repeat bg-cover bg-fixed flex flex-col"
style={{
backgroundImage: `linear-gradient(rgba(${backgroundColor?.r}, ${backgroundColor?.g}, ${backgroundColor?.b}, 0.7), rgba(135, 80, 156, 0.05)), url(/images/gradient.png)`,
}}

BIN
Frontend/public/images/fastpocket-diagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

169
Frontend/sections/Feature/ContainerImageIconBlocksFeature.tsx Normal file
View File

@ -0,0 +1,169 @@
import React from "react";
import Image from "next/image";
function ContainerImageIconBlocksFeature() {
return (
<>
{/* 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">
<Image
className="w-full object-contain rounded-xl h-[40rem]"
width="1000"
height="1000"
src="/images/fastpocket-diagram.png"
alt="Image Description"
/>
</div>
{/* Grid */}
<div className="mt-5 lg:mt-16 grid lg:grid-cols-3 gap-8 lg:gap-12">
<div className="lg:col-span-1">
<h2 className="font-bold text-2xl md:text-3xl text-base-content ">
Want To Build Fast?
</h2>
<p className="mt-2 md:mt-4 text-base-content/80">
There is so much to do in order to get an application developed.
Just getting the essentials together like payments and emails is
an enormous undertaking. That&apos;s why FastPocket exists. To
give you the essentials so you can focus on what makes your app
unique.
</p>
</div>
{/* End Col */}
<div className="lg:col-span-2">
<div className="grid sm:grid-cols-2 gap-8 md:gap-12">
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
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={18} height={10} x={3} y={11} rx={2} />
<circle cx={12} cy={5} r={2} />
<path d="M12 7v4" />
<line x1={8} x2={8} y1={16} y2={16} />
<line x1={16} x2={16} y1={16} y2={16} />
</svg>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Payments
</h3>
<p className="mt-1 text-base-content/80 ">
FastPocket includes Stripe for simple payment so that you
can get profitable quickly. All your products in Stripe
automatically syncronize with Pocketbase meaning no
additional work for you
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
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="M7 10v12" />
<path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
</svg>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Style
</h3>
<p className="mt-1 text-base-content/80 ">
FastPocket includes components to help you get styling your
codebase really quickly. We use TailwindCSS, DaisyUI and
Modified Preline components in order to fit the look and
feel of your brand
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
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 className="grow">
<h3 className="text-lg font-semibold text-base-content">
Email
</h3>
<p className="mt-1 text-base-content/80 ">
We know how annoying it is to setup email and that is why we
provide email templates as well as frameworks for building
your own emails for signup verifications and more
</p>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-5">
<svg
className="flex-shrink-0 mt-1 size-6 text-primary "
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="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx={9} cy={7} r={4} />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
<div className="grow">
<h3 className="text-lg font-semibold text-base-content">
Backend
</h3>
<p className="mt-1 text-base-content/80 ">
We provide Pocketbase + stripe build templates to ship your
product with no hassle. This includes login and payment for
reoccuring and one time transactions
</p>
</div>
</div>
{/* End Icon Block */}
</div>
</div>
{/* End Col */}
</div>
{/* End Grid */}
</div>
{/* End Features */}
</>
);
}
export default ContainerImageIconBlocksFeature;

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

@ -10,7 +10,7 @@ function SolidBackgrondIconFeature() {
<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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@ -33,7 +33,7 @@ function SolidBackgrondIconFeature() {
{/* 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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@ -57,7 +57,7 @@ function SolidBackgrondIconFeature() {
{/* 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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@ -75,7 +75,7 @@ function SolidBackgrondIconFeature() {
{/* 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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@ -99,7 +99,7 @@ function SolidBackgrondIconFeature() {
{/* 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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
@ -123,7 +123,7 @@ function SolidBackgrondIconFeature() {
{/* 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 "
className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
href="#"
>
<div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">

257
Frontend/sections/Feature/VerticalTabsWithOverlappingBackgroundFeature.tsx
View File

@ -1,257 +0,0 @@
import React from "react";
function VerticalTabsWithOverlappingBackground() {
return (
<>
{/* Features */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
{/* Tab Nav */}
<nav
className="max-w-6xl mx-auto grid sm:flex gap-y-px sm:gap-y-0 sm:gap-x-4"
aria-label="Tabs"
role="tablist"
>
<button
type="button"
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600 active"
id="tabs-with-card-item-1"
data-hs-tab="#tabs-with-card-1"
aria-controls="tabs-with-card-1"
role="tab"
>
<svg
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark: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="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z" />
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z" />
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z" />
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z" />
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z" />
</svg>
<span className="mt-5">
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
All-in-one workspace
</span>
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
Create a business, whether you’ve got a fresh idea.
</span>
</span>
</button>
<button
type="button"
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
id="tabs-with-card-item-2"
data-hs-tab="#tabs-with-card-2"
aria-controls="tabs-with-card-2"
role="tab"
>
<svg
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark: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="m12 14 4-4" />
<path d="M3.34 19a10 10 0 1 1 17.32 0" />
</svg>
<span className="mt-5">
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
Automation on a whole new level
</span>
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
Use automation to scale campaigns profitably and save time doing
it.
</span>
</span>
</button>
<button
type="button"
className="hs-tab-active:bg-gray-100 hs-tab-active:hover:border-transparent w-full flex flex-col text-start hover:bg-gray-100 p-3 md:p-5 rounded-xl dark:hs-tab-active:bg-white/[.05] dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
id="tabs-with-card-item-3"
data-hs-tab="#tabs-with-card-3"
aria-controls="tabs-with-card-3"
role="tab"
>
<svg
className="flex-shrink-0 hidden sm:block size-7 hs-tab-active:text-blue-600 text-gray-800 dark:hs-tab-active:text-blue-500 dark: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="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
<path d="M5 3v4" />
<path d="M19 17v4" />
<path d="M3 5h4" />
<path d="M17 19h4" />
</svg>
<span className="mt-5">
<span className="hs-tab-active:text-blue-600 block font-semibold text-gray-800 dark:hs-tab-active:text-blue-500 dark:text-gray-200">
Solving problems for every team
</span>
<span className="hidden lg:block mt-2 text-gray-800 dark:text-gray-200">
One tool for your company to share knowledge and ship projects.
</span>
</span>
</button>
</nav>
{/* End Tab Nav */}
{/* Tab Content */}
<div className="mt-12 md:mt-16">
<div
id="tabs-with-card-1"
role="tabpanel"
aria-labelledby="tabs-with-card-item-1"
>
{/* Devices */}
<div className="max-w-[1140px] lg:pb-32 relative">
{/* Mobile Device */}
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
<div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
<img
className="max-w-full h-auto rounded-[1.25rem]"
src="../assets/img/mockups/img9.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Mobile Device */}
{/* Browser Device */}
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
<div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
</div>
<div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
www.preline.co
</div>
</div>
<div className="bg-gray-800 rounded-b-lg">
<img
className="max-w-full h-auto rounded-b-lg"
src="../assets/img/mockups/img8.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Browser Device */}
</div>
{/* End Devices */}
</div>
<div
id="tabs-with-card-2"
className="hidden"
role="tabpanel"
aria-labelledby="tabs-with-card-item-2"
>
{/* Devices */}
<div className="max-w-[1140px] lg:pb-32 relative">
{/* Mobile Device */}
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
<div className="p-1.5 bg-gray-700 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
<img
className="max-w-full h-auto rounded-[1.25rem]"
src="../assets/img/mockups/img11.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Mobile Device */}
{/* Browser Device */}
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
<div className="relative flex items-center max-w-[50rem] bg-gray-800 border-b border-gray-700 rounded-t-lg py-2 px-24">
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
<span className="size-2 bg-gray-700 rounded-full" />
<span className="size-2 bg-gray-700 rounded-full" />
<span className="size-2 bg-gray-700 rounded-full" />
</div>
<div className="flex justify-center items-center size-full bg-gray-700 text-[.25rem] text-gray-200 rounded-sm sm:text-[.5rem]">
www.preline.co
</div>
</div>
<div className="bg-gray-800 rounded-b-lg">
<img
className="max-w-full h-auto rounded-b-lg"
src="../assets/img/mockups/img10.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Browser Device */}
</div>
{/* End Devices */}
</div>
<div
id="tabs-with-card-3"
className="hidden"
role="tabpanel"
aria-labelledby="tabs-with-card-item-3"
>
{/* Devices */}
<div className="max-w-[1140px] lg:pb-32 relative">
{/* Mobile Device */}
<figure className="hidden absolute bottom-0 start-0 z-[2] max-w-full w-60 h-auto mb-20 ms-20 lg:block">
<div className="p-1.5 bg-gray-100 rounded-3xl shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(45_55_75_/_20%),_0_2rem_4rem_-2rem_rgb(45_55_75_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(45_55_75_/_20%)] dark:bg-gray-700 dark:shadow-[0_2.75rem_5.5rem_-3.5rem_rgb(0_0_0_/_20%),_0_2rem_4rem_-2rem_rgb(0_0_0_/_30%),_inset_0_-0.1875rem_0.3125rem_0_rgb(0_0_0_/_20%)]">
<img
className="max-w-full h-auto rounded-[1.25rem]"
src="../assets/img/mockups/img13.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Mobile Device */}
{/* Browser Device */}
<figure className="ms-auto me-20 relative z-[1] max-w-full w-[50rem] h-auto rounded-b-lg shadow-[0_2.75rem_3.5rem_-2rem_rgb(45_55_75_/_20%),_0_0_5rem_-2rem_rgb(45_55_75_/_15%)] dark:shadow-[0_2.75rem_3.5rem_-2rem_rgb(0_0_0_/_20%),_0_0_5rem_-2rem_rgb(0_0_0_/_15%)]">
<div className="relative flex items-center max-w-[50rem] bg-white border-b border-gray-100 rounded-t-lg py-2 px-24 dark:bg-gray-800 dark:border-gray-700">
<div className="flex space-x-1 absolute top-2/4 start-4 -translate-y-1">
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
<span className="size-2 bg-gray-200 rounded-full dark:bg-gray-700" />
</div>
<div className="flex justify-center items-center size-full bg-gray-200 text-[.25rem] text-gray-800 rounded-sm sm:text-[.5rem] dark:bg-gray-700 dark:text-gray-200">
www.preline.co
</div>
</div>
<div className="bg-gray-800 rounded-b-lg">
<img
className="max-w-full h-auto rounded-b-lg"
src="../assets/img/mockups/img12.jpg"
alt="Image Description"
/>
</div>
</figure>
{/* End Browser Device */}
</div>
{/* End Devices */}
</div>
</div>
{/* End Tab Content */}
</div>
{/* End Features */}
</>
);
}
export default VerticalTabsWithOverlappingBackground;

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

@ -44,15 +44,12 @@ 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-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="/" />
</h1>
<div className="h-screen w-full bg-clip flex items-center justify-center pt-20">
<div className="text-center py-8 px-4 m-4 border border-primary/40 sm:px-6 lg:px-8 bg-base-200 rounded-xl shadow-lg">
{typeof window !== "undefined" &&
!localStorage.getItem("waitinglist") ? (
<>
<h2 className="text-2xl text-base-content font-heading font-black flex-wrap max-w-sm">
<h2 className="text-4xl text-base-content font-heading font-black flex-wrap max-w-sm leading-[3.2rem] lg:leading-normal ">
<span className="bg-primary p-1 text-primary-content">
Finish
</span>{" "}

2
Frontend/sections/PageHeader.tsx
View File

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

67
Frontend/sections/Testemonial/CardTestemonial.tsx Normal file
View File

@ -0,0 +1,67 @@
import React from "react";
import Image from "next/image";
function CardTestemonial() {
return (
<>
{/* Testimonials */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
{/* Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-6">
{/* Card */}
<div className="flex flex-col bg-base-100 /40 shadow-sm rounded-xl ">
<div className="flex-auto p-4 md:p-6">
<Image
width="500"
height="500"
className="h-9 w-9 rounded-full"
src={
"https://pbs.twimg.com/profile_images/1432517677864607745/spXCJfPY_400x400.jpg"
}
alt={"Timmy"}
/>
<p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
<em>I think its a good idea</em>
</p>
</div>
<div className="p-4 rounded-b-xl md:px-6">
<h3 className="text-sm font-semibold text-base-content sm:text-base ">
Mustafa Hanif
</h3>
<p className="text-sm text-base-content/80">Indie Hacker</p>
</div>
</div>
{/* End Card */}
{/* Card */}
<div className="flex flex-col bg-base-100 border border-primary/40 shadow-sm rounded-xl ">
<div className="flex-auto p-4 md:p-6">
<Image
width="500"
height="500"
className="h-9 w-9 rounded-full"
src={
"https://pbs.twimg.com/profile_images/1647540692837597184/SyEB8Ehg_400x400.jpg"
}
alt={"Timmy"}
/>
<p className="mt-3 sm:mt-6 text-base text-base-content md:text-xl ">
<em>I know it&apos;s worth it and very good</em>
</p>
</div>
<div className="p-4 rounded-b-xl md:px-6">
<h3 className="text-sm font-semibold text-base-content sm:text-base ">
Timmy D Turner
</h3>
<p className="text-sm text-base-content/80">Indie Hacker</p>
</div>
</div>
{/* End Card */}
</div>
{/* End Grid */}
</div>
{/* End Testimonials */}
</>
);
}
export default CardTestemonial;