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

feature - added contact section UI

This commit is contained in:
James Wyndham 2024-02-16 06:32:53 +08:00
parent 48abe80662
commit 8fb705b9f0
35 changed files with 762 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Frontend/app/(admin)/blogs/[slug]/page.tsx
View File

@ -52,7 +52,7 @@ const PostPage = (props: any) => {
<div className="relative bg-grey-950 w-full h-max z-40 py-24 px-6 flex justify-center pointer-events-none">
<div className="p-8 bg-gray-100 dark:bg-pink-900 w-full max-w-[700px] rounded-xl z-50 relative pointer-events-auto">
<div className="flex justify-between w-full">
<Link href="/blogs" className="text-pink-default">
<Link href="/blogs" className="text-primary">
← Back to Blogs
</Link>
<div className="flex justify-end pb-2 select-none">

10
Frontend/app/(admin)/blogs/page.tsx
View File

@ -10,7 +10,11 @@ export default function BlogsPage() {
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
.map((post) => <BlogCard key={post.slug} {...post} />);
return (
<main id="content" role="main" className="h-full flex-grow flex flex-col">
<main
id="content"
role="main"
className="h-full flex-grow flex flex-col bg-white dark:bg-black"
>
{/* Page sections */}
<PageHeader
title="Blogs"
@ -18,8 +22,8 @@ export default function BlogsPage() {
<>
{" "}
<h2 className="text-black dark:text-white font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
Find case studies and information for how Sign365 is giving
businesses superpowers
Join us for the journey as we make great food. Learn and grow
together
</h2>
</>
}

17
Frontend/app/(admin)/contact/page.tsx Normal file
View File

@ -0,0 +1,17 @@
import Footer from "@/components/Footer";
import Spacer from "@/components/Utilities/Spacer";
import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
import React from "react";
const page = () => {
return (
<div className="flex flex-col h-full w-full bg-white dark:bg-black">
<Spacer className="pt-28" />
<FormLeftDescriptionRightContactUs />
<Footer />
<Spacer className="pt-16" />
</div>
);
};
export default page;

16
Frontend/app/(admin)/pricing/page.tsx
View File

@ -29,16 +29,16 @@ export default function PricingPage() {
<main
id="content"
role="main"
className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden"
className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-white dark:bg-black"
>
<PageHeader
title="Pricing"
subtitle={
<>
{" "}
<h2 className="h3 text-primary-content content text-center max-w-6xl mx-auto px-6">
Select a subscription plan for your team or try advanced
functionality for free.
<h2 className="h3 text-base-content content text-center max-w-6xl mx-auto px-6">
Are you ready for fresh South West produce to be delivered to your
door?
</h2>
</>
}
@ -109,7 +109,7 @@ function PriceCard({
<div className="flex flex-col h-full">
<div className="mb-12 relative">
{false && (
<p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-pink-default text-center">
<p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-primary text-center">
Popular
</p>
)}
@ -150,7 +150,7 @@ function PriceCard({
onClick={() =>
submitForm(isAnnual ? product.yearlyPrice : product.monthlyPrice)
}
className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-pink-default to-purple-default rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
>
Try it!
</button>
@ -178,14 +178,14 @@ function PriceToggle({
/>
<span
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
!isAnnual ? "text-white bg-pink-550" : "text-body-color"
!isAnnual ? "text-white bg-secondary" : "text-body-color"
}`}
>
Monthly Billing
</span>
<span
className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
isAnnual ? "text-white bg-pink-550" : "text-body-color"
isAnnual ? "text-white bg-secondary" : "text-body-color"
}`}
>
Yearly Billing

2
Frontend/app/page.tsx
View File

@ -10,7 +10,7 @@ import React from "react";
import {
CenterAllignedWithVideoHero,
WaitingListWithImageHero,
} from "@/sections/HeroSections";
} from "@/sections/Hero";
import PageWrapper from "@/components/Utilities/PageWrapper";
import Footer from "@/components/Footer";

8
Frontend/components/Button.tsx
View File

@ -9,16 +9,16 @@ export const Button = ({ status, text }: ButtonProps) => {
const className = (() => {
switch (status) {
case ModalStatus.Loading:
return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
case ModalStatus.Success:
return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
case ModalStatus.Default:
return "btn text-purple-default bg-white hover:bg-white shadow";
return "btn text-primary bg-white hover:bg-white shadow";
default:
return "btn text-purple-default bg-white hover:bg-white shadow";
return "btn text-primary bg-white hover:bg-white shadow";
}
})();
return (

9
Frontend/components/Footer.tsx
View File

@ -1,24 +1,25 @@
"use client";
import React from "react";
import Logo from "./Logo";
import Icon from "./icon";
function Footer() {
return (
<footer>
<div className="py-12 md:py-1 bg-base-100">
<div className="py-12 md:py-1">
<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">
{/* Social links */}
<ul className="flex md:order-1 md:mb-0 justify-center">
<li>
<Logo label="YouTube" />
<Icon name="LeafThree24Filled" size="xlarge" />
</li>
</ul>
</div>
{/* Copyrights note */}
<div className="text-gray-400 text-xs text-center dark:text-white mt-2">
&copy; 2024 Sign365.
&copy; 2024 Bethel Farms
</div>
</div>
</div>

2
Frontend/components/GetStartedSectionButton.tsx
View File

@ -36,7 +36,7 @@ export const GetStartedSectionButton = ({
) : (
<button
onClick={() => router.push("/pricing")}
className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-pink-default to-purple-default hover:bg-gray-900 w-full sm:w-auto"
className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
>
Upgrade
</button>

3
Frontend/components/Logo.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import logo from "@/images/icon.svg";
import Image from "next/image";
import Icon from "./icon";
interface LogoProps {
label?: string;
@ -19,7 +20,7 @@ function Logo({ label, className }: LogoProps) {
target={label !== undefined ? "_blank" : ""}
>
{/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
<Image src={logo} alt="Logo" priority={true} />
<Icon name="LeafThree24Filled" size="xlarge" />
{label !== undefined ? (
<span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
{label}

29
Frontend/components/Modal.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from "react";
const Modal = () => {
return (
<>
{/* You can open the modal using document.getElementById('ID').showModal() method */}
<button
className="btn"
onClick={() => document.getElementById("my_modal_4").showModal()}
>
open modal
</button>
<dialog id="my_modal_4" className="modal">
<div className="modal-box w-11/12 max-w-5xl">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Click the button below to close</p>
<div className="modal-action">
<form method="dialog">
{/* if there is a button, it will close the modal */}
<button className="btn">Close</button>
</form>
</div>
</div>
</dialog>
</>
);
};
export default Modal;

6
Frontend/components/Navigation.tsx
View File

@ -49,7 +49,9 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
</Link>
</li>
<li>
<a href="https://climate.stripe.com/r7FSQz">Climate</a>
<Link href="/contact" onClick={handleClick}>
Contact
</Link>
</li>
{isUserLoggedIn ? (
<li>
@ -81,7 +83,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
<Link href="/blogs">Blogs</Link>
</li>
<li>
<a href="https://climate.stripe.com/r7FSQz">Climate</a>
<Link href="/contact">Contact</Link>
</li>
{isUserLoggedIn ? (
<li>

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

@ -1,4 +1,4 @@
import { WaitingListWithImageHero } from "@/sections/HeroSections";
import { WaitingListWithImageHero } from "@/sections/Hero";
import React from "react";
function PageWrapper({ children }: { children: React.ReactNode }) {

43
Frontend/components/icon/Icon.tsx Normal file
View File

@ -0,0 +1,43 @@
import React from "react";
import * as FluentIcons from "@fluentui/react-icons";
import { IconProps, iconSize } from "./types";
import IconContainer from "./IconContainer";
function Icon({
color,
size = "small",
isActive = true,
name,
nestedComponent,
style,
}: IconProps) {
const fluentIcons = Object.assign(
{},
...Object.keys(FluentIcons).map((name) => {
return {
[name]: (
<IconContainer
color={color}
size={size}
isActive={isActive}
nestedComponent={nestedComponent}
style={style}
>
{React.createElement(FluentIcons[name], {
color: isActive ? color ?? undefined : undefined,
style: { width: iconSize[size], height: iconSize[size] },
})}
</IconContainer>
),
};
})
);
const icon = {
...fluentIcons,
};
return icon[name];
}
export default Icon;

61
Frontend/components/icon/IconContainer.tsx Normal file
View File

@ -0,0 +1,61 @@
import { IconContainerProps, Orientation, iconSize } from "./types";
function IconContainer({
children,
color,
size = "small",
isActive,
nestedComponent,
style,
}: IconContainerProps) {
const orientationStyle = {
[Orientation.BottomLeft]: {
bottom: `calc(-${iconSize[size]}/9)`,
left: `calc(-${iconSize[size]}/9)`,
},
[Orientation.BottomRight]: {
bottom: `calc(-${iconSize[size]}/9)`,
right: `calc(-${iconSize[size]}/9)`,
},
[Orientation.TopLeft]: {
top: `calc(-${iconSize[size]}/9)`,
left: `calc(-${iconSize[size]}/9)`,
},
[Orientation.TopRight]: {
top: `calc(-${iconSize[size]}/9)`,
right: `calc(-${iconSize[size]}/9)`,
},
};
return (
<div
style={{
position: "relative",
zIndex: 10,
width: iconSize[size],
height: iconSize[size],
...style,
}}
>
{children}
{nestedComponent?.node && (
<div
color={isActive ? color ?? undefined : undefined}
style={{
width: `calc(${iconSize[size]}/1.75)`,
height: `calc(${iconSize[size]}/1.75)`,
position: "absolute",
zIndex: 20,
background: nestedComponent?.options?.orientation ?? undefined,
...orientationStyle[
nestedComponent?.options?.orientation ?? Orientation.BottomRight
],
}}
>
{nestedComponent?.node ? nestedComponent.node : <></>}
</div>
)}
</div>
);
}
export default IconContainer;

2
Frontend/components/icon/index.ts Normal file
View File

@ -0,0 +1,2 @@
import Icon from "./Icon";
export default Icon;

100
Frontend/components/icon/types.ts Normal file
View File

@ -0,0 +1,100 @@
import { ReactNode } from "react";
import * as FluentIcons from "@fluentui/react-icons";
export type IconProps = {
color?: string;
size?:
| "small"
| "medium"
| "large"
| "xlarge"
| "xxlarge"
| "xxxlarge"
| "xxxxlarge";
isActive?: boolean;
name: IconName;
nestedComponent?: NestedComponent;
style?: React.CSSProperties;
};
export type IconContainerProps = {
children: ReactNode;
color?: string;
size?:
| "small"
| "medium"
| "large"
| "xlarge"
| "xxlarge"
| "xxxlarge"
| "xxxxlarge";
isActive?: boolean;
nestedComponent?: NestedComponent;
style?: React.CSSProperties
}
type FluentIconNames = keyof typeof FluentIcons;
const fluentIconNames = Object.keys(FluentIcons) as FluentIconNames[];
export type IconName = typeof fluentIconNames[number];
export type NestedComponent = {
node: ReactNode;
options?: {
orientation?: Orientation;
backgroundColor?: string;
};
};
export const enum Orientation {
BottomLeft = "BottomLeft",
BottomRight = "BottomRight",
TopLeft = "TopLeft",
TopRight = "TopRight",
}
export const sizeScale = {
size: {
size_0: '0rem',
size_0_5: '0.25rem',
size_1: '0.5rem', /* 8px Base */
size_2: '1.0rem',
size_3: '1.5rem',
size_4: '2.0rem',
size_5: '2.5rem',
size_6: '3.0rem',
size_7: '3.5rem',
size_8: '4.0rem',
size_9: '4.5rem',
size_10: '5.0rem',
size_11: '5.5rem',
size_12: '6.0rem',
size_13: '6.5rem',
size_14: '7.0rem',
size_15: '7.5rem',
size_16: '8.0rem',
size_17: '8.5rem',
size_18: '9.0rem',
size_19: '9.5rem',
size_20: '10.0rem',
size_21: '10.5rem',
size_22: '11.0rem',
size_23: '11.5rem',
size_24: '12.0rem',
size_25: '12.5rem',
size_26: '13.0rem',
size_27: '13.5rem',
size_28: '14.0rem',
size_29: '14.5rem',
size_30: '15.0rem',
},
};
export const iconSize = {
small: sizeScale.size.size_2,
medium: sizeScale.size.size_3,
large: sizeScale.size.size_4,
xlarge: sizeScale.size.size_5,
xxlarge: sizeScale.size.size_6,
xxxlarge: sizeScale.size.size_7,
xxxxlarge: sizeScale.size.size_8,
};

4
Frontend/images/icon.svg
View File

@ -1,4 +1,4 @@
<svg width="32" height="32" viewBox="0 0 48 53" fill="none"
<svg style="" 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"/>
<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="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

134
Frontend/package-lock.json generated
View File

@ -1,13 +1,14 @@
{
"name": "sign365website",
"name": "fastpocket",
"version": "0.1.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "sign365website",
"name": "fastpocket",
"version": "0.1.0",
"dependencies": {
"@fluentui/react-icons": "^2.0.227",
"@hookform/resolvers": "^3.2.0",
"@netlify/functions": "^2.1.0",
"@next/third-parties": "^14.1.0",
@ -608,6 +609,11 @@
"node": ">=6.9.0"
}
},
"node_modules/@emotion/hash": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@ -683,6 +689,51 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@fluentui/react-icons": {
"version": "2.0.227",
"resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.227.tgz",
"integrity": "sha512-KcuzBJvf1LL1YW7XBg7Y4RoCpFMUU2br9BPqwN5gZDKALHQF9RdHPtwdGTzxKsHacOTpHnNDQrbDW+NvxiEMVQ==",
"dependencies": {
"@griffel/react": "^1.0.0",
"tslib": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.8.0 <19.0.0"
}
},
"node_modules/@griffel/core": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
"integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
"dependencies": {
"@emotion/hash": "^0.9.0",
"@griffel/style-types": "^1.0.3",
"csstype": "^3.1.3",
"rtl-css-js": "^1.16.1",
"stylis": "^4.2.0",
"tslib": "^2.1.0"
}
},
"node_modules/@griffel/react": {
"version": "1.5.20",
"resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
"integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
"dependencies": {
"@griffel/core": "^1.15.2",
"tslib": "^2.1.0"
},
"peerDependencies": {
"react": ">=16.8.0 <19.0.0"
}
},
"node_modules/@griffel/style-types": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
"integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
"dependencies": {
"csstype": "^3.1.3"
}
},
"node_modules/@hookform/resolvers": {
"version": "3.3.2",
"license": "MIT",
@ -2440,8 +2491,9 @@
}
},
"node_modules/csstype": {
"version": "3.1.2",
"license": "MIT"
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"node_modules/daisyui": {
"version": "3.9.4",
@ -5174,6 +5226,14 @@
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/rtl-css-js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
"integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
"dependencies": {
"@babel/runtime": "^7.1.2"
}
},
"node_modules/run-parallel": {
"version": "1.2.0",
"funding": [
@ -5675,6 +5735,11 @@
}
}
},
"node_modules/stylis": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
"integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
},
"node_modules/sucrase": {
"version": "3.34.0",
"license": "MIT",
@ -6745,6 +6810,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@emotion/hash": {
"version": "0.9.1",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
"integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
},
"@emotion/is-prop-valid": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@ -6798,6 +6868,45 @@
"@eslint/js": {
"version": "8.54.0"
},
"@fluentui/react-icons": {
"version": "2.0.227",
"resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.227.tgz",
"integrity": "sha512-KcuzBJvf1LL1YW7XBg7Y4RoCpFMUU2br9BPqwN5gZDKALHQF9RdHPtwdGTzxKsHacOTpHnNDQrbDW+NvxiEMVQ==",
"requires": {
"@griffel/react": "^1.0.0",
"tslib": "^2.1.0"
}
},
"@griffel/core": {
"version": "1.15.2",
"resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
"integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
"requires": {
"@emotion/hash": "^0.9.0",
"@griffel/style-types": "^1.0.3",
"csstype": "^3.1.3",
"rtl-css-js": "^1.16.1",
"stylis": "^4.2.0",
"tslib": "^2.1.0"
}
},
"@griffel/react": {
"version": "1.5.20",
"resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
"integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
"requires": {
"@griffel/core": "^1.15.2",
"tslib": "^2.1.0"
}
},
"@griffel/style-types": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
"integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
"requires": {
"csstype": "^3.1.3"
}
},
"@hookform/resolvers": {
"version": "3.3.2",
"requires": {}
@ -7716,7 +7825,9 @@
"version": "3.0.0"
},
"csstype": {
"version": "3.1.2"
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
},
"daisyui": {
"version": "3.9.4",
@ -9312,6 +9423,14 @@
}
}
},
"rtl-css-js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
"integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"run-parallel": {
"version": "1.2.0",
"requires": {
@ -9605,6 +9724,11 @@
"client-only": "0.0.1"
}
},
"stylis": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
"integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
},
"sucrase": {
"version": "3.34.0",
"requires": {

1
Frontend/package.json
View File

@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@fluentui/react-icons": "^2.0.227",
"@hookform/resolvers": "^3.2.0",
"@netlify/functions": "^2.1.0",
"@next/third-parties": "^14.1.0",

2
Frontend/sections/AccountContent.tsx
View File

@ -166,7 +166,7 @@ function AccountContent({ user }: ManageSubscriptionProps) {
</p>
<button
onClick={() => router.push("/pricing")}
className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-pink-default to-purple-default hover:bg-gray-900 w-full sm:w-auto"
className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
>
Upgrade
</button>

2
Frontend/sections/BlogContent.tsx
View File

@ -22,7 +22,7 @@ function BlogContent({ post }: BlogContentProps) {
<p className="text-black dark:text-slate-200">{post.data.date}</p>
</div>
<article className="prose prose-img:rounded-xl max-w-none prose-p:text-black dark:prose-p:text-white prose-a:text-pink-default prose-h2:text-black dark:prose-h2:text-white prose-li:text-black dark:prose-li:text-white prose-strong:text-black dark:prose-strong:text-white prose-blockquote:pr-2 prose-blockquote:font-normal">
<article className="prose prose-img:rounded-xl max-w-none prose-p:text-black dark:prose-p:text-white prose-a:text-primary prose-h2:text-black dark:prose-h2:text-white prose-li:text-black dark:prose-li:text-white prose-strong:text-black dark:prose-strong:text-white prose-blockquote:pr-2 prose-blockquote:font-normal">
<div className="h-full w-full">
<Image
priority

304
Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx Normal file
View File

@ -0,0 +1,304 @@
import React from "react";
const FormLeftDescriptionRightContactUs = () => {
return (
<>
{/* Contact Us */}
<div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<div className="max-w-2xl lg:max-w-5xl mx-auto">
<div className="text-center">
<h1 className="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
Contact us
</h1>
<p className="mt-1 text-gray-600 dark:text-gray-400">
We&apos;d love to talk about how we can help you.
</p>
</div>
<div className="mt-12 grid items-center lg:grid-cols-2 gap-6 lg:gap-16">
{/* Card */}
<div className="flex flex-col border rounded-xl p-4 sm:p-6 lg:p-8 dark:border-gray-700">
<h2 className="mb-8 text-xl font-semibold text-gray-800 dark:text-gray-200">
Fill in the form
</h2>
<form>
<div className="grid gap-4">
{/* Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label
htmlFor="hs-firstname-contacts-1"
className="sr-only"
>
First Name
</label>
<input
type="text"
name="hs-firstname-contacts-1"
id="hs-firstname-contacts-1"
className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
placeholder="First Name"
/>
</div>
<div>
<label
htmlFor="hs-lastname-contacts-1"
className="sr-only"
>
Last Name
</label>
<input
type="text"
name="hs-lastname-contacts-1"
id="hs-lastname-contacts-1"
className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
placeholder="Last Name"
/>
</div>
</div>
{/* End Grid */}
<div>
<label htmlFor="hs-email-contacts-1" className="sr-only">
Email
</label>
<input
type="email"
name="hs-email-contacts-1"
id="hs-email-contacts-1"
autoComplete="email"
className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
placeholder="Email"
/>
</div>
<div>
<label htmlFor="hs-phone-number-1" className="sr-only">
Phone Number
</label>
<input
type="text"
name="hs-phone-number-1"
id="hs-phone-number-1"
className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
placeholder="Phone Number"
/>
</div>
<div>
<label htmlFor="hs-about-contacts-1" className="sr-only">
Details
</label>
<textarea
id="hs-about-contacts-1"
name="hs-about-contacts-1"
rows={4}
className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
placeholder="Details"
defaultValue={""}
/>
</div>
</div>
{/* End Grid */}
<div className="mt-4 grid">
<button
type="submit"
className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
>
Send inquiry
</button>
</div>
<div className="mt-3 text-center">
<p className="text-sm text-gray-500">
We&apos;ll get back to you in 1-2 business days.
</p>
</div>
</form>
</div>
{/* End Card */}
<div className="divide-y divide-gray-200 dark:divide-gray-800">
{/* Icon Block */}
<div className="flex gap-x-7 py-6">
<svg
className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
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"
>
<circle cx={12} cy={12} r={10} />
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
<path d="M12 17h.01" />
</svg>
<div className="grow">
<h3 className="font-semibold text-gray-800 dark:text-gray-200">
Knowledgebase
</h3>
<p className="mt-1 text-sm text-gray-500">
We&apos;re here to help with any questions or code.
</p>
<a
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
Contact support
<svg
className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className="flex gap-x-7 py-6">
<svg
className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
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="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
<path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
</svg>
<div className="grow">
<h3 className="font-semibold text-gray-800 dark:text-gray-200">
FAQ
</h3>
<p className="mt-1 text-sm text-gray-500">
Search our FAQ for answers to anything you might ask.
</p>
<a
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
Visit FAQ
<svg
className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className=" flex gap-x-7 py-6">
<svg
className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
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 11 2-2-2-2" />
<path d="M11 13h4" />
<rect width={18} height={18} x={3} y={3} rx={2} ry={2} />
</svg>
<div className="grow">
<h3 className="font-semibold text-gray-800 dark:text-gray-200">
Developer APIs
</h3>
<p className="mt-1 text-sm text-gray-500">
Check out our development quickstart guide.
</p>
<a
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
Contact sales
<svg
className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
{/* End Icon Block */}
{/* Icon Block */}
<div className=" flex gap-x-7 py-6">
<svg
className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
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="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
<path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
</svg>
<div className="grow">
<h3 className="font-semibold text-gray-800 dark:text-gray-200">
Contact us by email
</h3>
<p className="mt-1 text-sm text-gray-500">
If you wish to write us an email instead please use
</p>
<a
className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
href="#"
>
example@site.com
</a>
</div>
</div>
{/* End Icon Block */}
</div>
</div>
</div>
</div>
{/* End Contact Us */}
</>
);
};
export default FormLeftDescriptionRightContactUs;

2
Frontend/sections/FeaturesZigzag.tsx
View File

@ -24,7 +24,7 @@ const FeaturesZigzag = () => {
<div className="max-w-4xl mx-auto text-center pb-12 md:pb-16 group">
<button
onClick={tryItOnClick}
className="inline-flex text-lg font-semibold py-2 px-[7rem] m-2 text-white bg-gradient-to-r from-pink-default to-purple-default rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
className="inline-flex text-lg font-semibold py-2 px-[7rem] m-2 text-white bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
>
Try it!
</button>

0
Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx → Frontend/sections/Hero/CenterAllignedWithVideoHero.tsx
View File

0
Frontend/sections/HeroSections/SimpleHero.tsx → Frontend/sections/Hero/SimpleHero.tsx
View File

0
Frontend/sections/HeroSections/SquaredBackgroundHero.tsx → Frontend/sections/Hero/SquaredBackgroundHero.tsx
View File

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

@ -1,4 +1,5 @@
import Logo from "@/components/Logo";
import Icon from "@/components/icon";
import React from "react";
const WaitingListWithImageHero = () => {
@ -12,8 +13,8 @@ const WaitingListWithImageHero = () => {
>
<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">
<h1 className="text-3xl text-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6">
<Logo className="w-10 flex" />
<h1 className="text-3xl text-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
<Icon name="LeafThree24Filled" size="xlarge" />
Bethel Farms
</h1>
<h2 className="text-2xl text-primary-content sm:text-4xl">
@ -37,7 +38,7 @@ const WaitingListWithImageHero = () => {
/>
<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"
className="flex-shrink-0 size-4 text-primary-content dark:text-white"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
@ -70,7 +71,7 @@ const WaitingListWithImageHero = () => {
/>
<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"
className="flex-shrink-0 size-4 text-primary-content dark:text-white"
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}

0
Frontend/sections/HeroSections/index.ts → Frontend/sections/Hero/index.ts
View File

4
Frontend/sections/HeroHome.tsx
View File

@ -37,7 +37,7 @@ function HeroHome() {
Your Offline Digital Forms Simplified.
</h1>
<p
className="text-lg font-semibold pb-12 mb-8 md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-pink-default to-purple-default w-[fit-content] mx-auto"
className="text-lg font-semibold pb-12 mb-8 md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary w-[fit-content] mx-auto"
data-aos="fade-up"
data-aos-delay="200"
>
@ -47,7 +47,7 @@ function HeroHome() {
<div data-aos="fade-up" data-aos-delay="400">
<button
onClick={bookDemoOnClick}
className="btn text-base capitalize rounded text-white bg-pink-550 hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
className="btn text-base capitalize rounded text-white bg-secondary hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
>
Book Demo
</button>

2
Frontend/sections/LoadingModal.tsx
View File

@ -5,7 +5,7 @@ function LoadingModal() {
<div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
<svg
aria-hidden="true"
className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-pink-default"
className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"

2
Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
View File

@ -38,7 +38,7 @@ function ModalLearnMore() {
</div>
<div className={status === "default" ? "block" : "hidden"}>
<div
className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
data-aos="fade-up"
>
<h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">

2
Frontend/sections/ModalSignIn/ModalSignIn.tsx
View File

@ -47,7 +47,7 @@ function ModalSignIn() {
</div>
<div className={status === ModalStatus.Default ? "block" : "hidden"}>
<div
className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
data-aos="fade-up"
>
<h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">

5
Frontend/sections/ModalSignUp/ModalSignUp.tsx
View File

@ -1,4 +1,5 @@
"use client";
// TODO: Needs a complete rework to use the DaisyUI component
import React, { useRef, useState } from "react";
import xButton from "@/images/icon-x.svg";
@ -32,7 +33,7 @@ function ModalSignUp() {
onChange={whenModalOpens}
/>
<label htmlFor="sign-up-modal" className="modal cursor-pointer">
<label className="modal-box relative bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<label className="modal-box relative bg-gray-100 dark:bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<div className="flex justify-end pb-2 select-none">
<label
onClick={handleCloseModal}
@ -48,7 +49,7 @@ function ModalSignUp() {
</div>
<div className={status === ModalStatus.Default ? "block" : "hidden"}>
<div
className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
data-aos="fade-up"
>
<h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">

46
Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
View File

@ -125,7 +125,7 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
error.message
);
}
throw error; // This will allow your .catch block outside this function to capture the error
throw error; // This will allow .catch block outside this function to capture the error
}
};
@ -141,7 +141,7 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
error.message
);
}
throw error; // This will allow your .catch block outside this function to capture the error
throw error; // This will allow .catch block outside this function to capture the error
}
};
useImperativeHandle(ref, () => ({
@ -160,9 +160,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("email")}
type="text"
id="SignUpEmail"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your best email…"
aria-label="Your best email…"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Email…"
aria-label="Email…"
autoComplete="on"
/>
<label
@ -177,9 +177,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("first_name")}
id="SignUpFirstName"
type="text"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your First Name…"
aria-label="Your First Name…"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="First Name…"
aria-label="First Name…"
autoComplete="on"
/>
<label
@ -194,9 +194,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("last_name")}
id="SignUpLastName"
type="text"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your Last Name…"
aria-label="Your Last Name…"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Last Name…"
aria-label="Last Name…"
/>
<label
htmlFor="SignUpLastName"
@ -211,9 +211,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("phone_number")}
id="SignUpPhoneNumber"
type="text"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your Phone Number…"
aria-label="Your Phone Number…"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Phone Number…"
aria-label="Phone Number…"
/>
<label
htmlFor="SignUpPhoneNumber"
@ -227,9 +227,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("organisation")}
id="SignUpOrganisation"
type="text"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your Organisation…"
aria-label="Your Organisation…"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Organisation…"
aria-label="Organisation…"
/>
<label
htmlFor="SignUpOrganisation"
@ -243,10 +243,10 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("company_size")}
id="SignUpCompanySize"
defaultValue={""}
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
>
<option className="bg-gray-850" value={""} disabled>
Your Company Size…
Company Size…
</option>
{companySizeList.map((companySizeOption, i) => {
return (
@ -272,8 +272,8 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("password")}
id="SignUpPwd"
type="password"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your Password..."
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Password..."
aria-label="Password"
/>
<label
@ -288,8 +288,8 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
{...register("passwordConfirmation")}
id="SignUpPwdConfirm"
type="password"
className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
placeholder="Your Confirmed Password..."
className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
placeholder="Confirmed Password..."
aria-label="Confirmed Password"
/>
<label

2
Frontend/sections/Newsletter/Newsletter.tsx
View File

@ -8,7 +8,7 @@ function Newsletter() {
<div className="max-w-6xl mx-auto px-4 sm:px-6">
{/* CTA box */}
<div
className="relative bg-gradient-to-r from-pink-default to-purple-default py-10 px-8 md:py-16 md:px-12"
className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
data-aos="fade-up"
>
<div className="relative flex flex-col lg:flex-row justify-between items-center">