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 { cookies } from "next/headers";
import { isAuthenticated } from "@/lib/auth"; import { isAuthenticated } from "@/lib/auth";
import { GTagProvider, PHProvider } from "./providers"; import { GTagProvider, PHProvider } from "./providers";
import PrelineScript from "@/components/PrelineScript"; import PrelineScript from "@/components/Utilities/PrelineScript";
const raleway = Raleway({ const raleway = Raleway({
variable: "--display-font", variable: "--display-font",
@ -39,14 +39,6 @@ export default async function RootLayout({
<GTagProvider /> <GTagProvider />
<body className={`${arimo.className} bg-black flex`}> <body className={`${arimo.className} bg-black flex`}>
<Header isUserLoggedIn={isUserLoggedIn} /> <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} {children}
<ToastContainer <ToastContainer
position="bottom-left" position="bottom-left"

19
Frontend/app/page.tsx
View File

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

4
Frontend/components/Footer.tsx
View File

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

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

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

6
Frontend/components/Navigation.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import Logo from "@/sections/Logo"; import Logo from "@/components/Logo";
import React, { useState } from "react"; import React, { useState } from "react";
import { Menu } from "@styled-icons/entypo/Menu"; import { Menu } from "@styled-icons/entypo/Menu";
import Link from "next/link"; import Link from "next/link";
@ -35,7 +35,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
{/* Site branding */} {/* Site branding */}
<div className="shrink-0 mr-4"> <div className="shrink-0 mr-4">
{/* Logo */} {/* Logo */}
<Logo /> <Logo className="group relative cursor-pointer" />
</div> </div>
{/* Navbar menu content here */} {/* Navbar menu content here */}
<li> <li>
@ -72,7 +72,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
{/* Sidebar content here */} {/* Sidebar content here */}
<div className="shrink-0 m-3"> <div className="shrink-0 m-3">
{/* Logo */} {/* Logo */}
<Logo /> <Logo className="group relative cursor-pointer" />
</div> </div>
<li> <li>
<Link href="/pricing">Pricing</Link> <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"> <svg width="32" height="32" viewBox="0 0 48 53" fill="none"
<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)"/> xmlns="http://www.w3.org/2000/svg">
<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"/> <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"/>
<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> </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

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

@ -5,23 +5,25 @@ const CenterAllignedWithVideoHero = () => {
return ( return (
<> <>
{/* Hero */} {/* Hero */}
<div className="relative overflow-hidden"> <div className="h-screen w-screen flex flex-col">
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10"> <div className="relative overflow-hidden my-auto">
<div className="max-w-2xl text-center mx-auto"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
<h1 className="block text-3xl font-bold text-primary-content sm:text-4xl md:text-5xl"> <div className="max-w-2xl text-center mx-auto">
Fast <span className="text-primary">Pocket</span> <h1 className="block text-3xl font-bold text-primary-content sm:text-4xl md:text-5xl">
</h1> Fast <span className="text-primary">Pocket</span>
<p className="mt-3 text-lg text-primary-content"> </h1>
Build your startup here. Launch it anywhere. <p className="mt-3 text-lg text-primary-content">
</p> Build your startup here. Launch it anywhere.
</div> </p>
<div className="mt-10 relative max-w-5xl mx-auto">
<Video />
<div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-primary to-base-100 p-px rounded-lg">
<div className="bg-base-100 size-48 rounded-lg" />
</div> </div>
<div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-secondary to-accent p-px rounded-full"> <div className="mt-10 relative max-w-5xl mx-auto">
<div className="bg-base-100 size-48 rounded-full" /> <Video />
<div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-primary to-base-100 p-px rounded-lg">
<div className="bg-base-100 size-48 rounded-lg" />
</div>
<div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-secondary to-accent p-px rounded-full">
<div className="bg-base-100 size-48 rounded-full" />
</div>
</div> </div>
</div> </div>
</div> </div>

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;

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

@ -4,395 +4,397 @@ const SquaredBackgroundHero = () => {
return ( return (
<> <>
{/* Hero */} {/* Hero */}
<div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8"> <div className="h-screen w-screen flex items-center">
{/* Grid */} <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center"> {/* Grid */}
<div> <div className="grid md:grid-cols-2 gap-4 md:gap-8 xl:gap-20 md:items-center">
<h1 className="block text-3xl font-bold text-primary-content sm:text-4xl lg:text-6xl lg:leading-tight"> <div>
Start your journey with{" "} <h1 className="block text-3xl font-bold text-primary-content sm:text-4xl lg:text-6xl lg:leading-tight">
<span className="text-primary">Fast Pocket</span> Start your journey with{" "}
</h1> <span className="text-primary">Fast Pocket</span>
<p className="mt-3 text-lg text-secondary-content"> </h1>
Hand-picked professionals and expertly crafted components, <p className="mt-3 text-lg text-secondary-content">
designed for any kind of entrepreneur. Hand-picked professionals and expertly crafted components,
</p> designed for any kind of entrepreneur.
{/* Buttons */} </p>
<div className="mt-7 grid gap-3 w-full sm:inline-flex"> {/* Buttons */}
<a <div className="mt-7 grid gap-3 w-full sm:inline-flex">
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" <a
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="#"
Get started
<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" /> Get started
<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>
</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 text-primary-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">
{/* Review */}
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
</div>
<p className="mt-3 text-sm text-primary-content">
<span className="font-bold">4.6</span> /5 - from 12k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 text-primary-content"
width={80}
height={27}
viewBox="0 0 80 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.558 9.74046H11.576V12.3752H17.9632C17.6438 16.0878 14.5301 17.7245 11.6159 17.7245C7.86341 17.7245 4.58995 14.7704 4.58995 10.6586C4.58995 6.62669 7.70373 3.51291 11.6159 3.51291C14.6498 3.51291 16.4063 5.42908 16.4063 5.42908L18.2426 3.51291C18.2426 3.51291 15.8474 0.878184 11.4961 0.878184C5.94724 0.838264 1.67578 5.50892 1.67578 10.5788C1.67578 15.5289 5.70772 20.3592 11.6558 20.3592C16.8854 20.3592 20.7177 16.8063 20.7177 11.4969C20.7177 10.3792 20.558 9.74046 20.558 9.74046Z"
fill="currentColor"
/>
<path
d="M27.8621 7.78442C24.1894 7.78442 21.5547 10.6587 21.5547 14.012C21.5547 17.4451 24.1096 20.3593 27.9419 20.3593C31.415 20.3593 34.2094 17.7645 34.2094 14.0918C34.1695 9.94011 30.896 7.78442 27.8621 7.78442ZM27.902 10.2994C29.6984 10.2994 31.415 11.7764 31.415 14.0918C31.415 16.4072 29.7383 17.8842 27.902 17.8842C25.906 17.8842 24.3491 16.2874 24.3491 14.0519C24.3092 11.8962 25.8661 10.2994 27.902 10.2994Z"
fill="currentColor"
/>
<path
d="M41.5964 7.78442C37.9238 7.78442 35.2891 10.6587 35.2891 14.012C35.2891 17.4451 37.844 20.3593 41.6763 20.3593C45.1493 20.3593 47.9438 17.7645 47.9438 14.0918C47.9038 9.94011 44.6304 7.78442 41.5964 7.78442ZM41.6364 10.2994C43.4328 10.2994 45.1493 11.7764 45.1493 14.0918C45.1493 16.4072 43.4727 17.8842 41.6364 17.8842C39.6404 17.8842 38.0835 16.2874 38.0835 14.0519C38.0436 11.8962 39.6004 10.2994 41.6364 10.2994Z"
fill="currentColor"
/>
<path
d="M55.0475 7.82434C51.6543 7.82434 49.0195 10.7784 49.0195 14.0918C49.0195 17.8443 52.0934 20.3992 54.9676 20.3992C56.764 20.3992 57.6822 19.7205 58.4407 18.8822V20.1198C58.4407 22.2754 57.1233 23.5928 55.1273 23.5928C53.2111 23.5928 52.2531 22.1557 51.8938 21.3573L49.4587 22.3553C50.297 24.1517 52.0135 26.0279 55.0874 26.0279C58.4407 26.0279 60.9956 23.9122 60.9956 19.481V8.18362H58.3608V9.26147C57.6423 8.38322 56.5245 7.82434 55.0475 7.82434ZM55.287 10.2994C56.9237 10.2994 58.6403 11.7365 58.6403 14.1317C58.6403 16.6068 56.9636 17.9241 55.2471 17.9241C53.4507 17.9241 51.774 16.4471 51.774 14.1716C51.8139 11.6966 53.5305 10.2994 55.287 10.2994Z"
fill="currentColor"
/>
<path
d="M72.8136 7.78442C69.62 7.78442 66.9453 10.2994 66.9453 14.0519C66.9453 18.004 69.9393 20.3593 73.093 20.3593C75.7278 20.3593 77.4044 18.8822 78.3625 17.6048L76.1669 16.1277C75.608 17.006 74.6499 17.8443 73.093 17.8443C71.3365 17.8443 70.5381 16.8862 70.0192 15.9281L78.4423 12.4152L78.0032 11.3772C77.1649 9.46107 75.2886 7.78442 72.8136 7.78442ZM72.8934 10.2196C74.0511 10.2196 74.8495 10.8184 75.2487 11.5768L69.6599 13.9321C69.3405 12.0958 71.097 10.2196 72.8934 10.2196Z"
fill="currentColor"
/>
<path
d="M62.9531 19.9999H65.7076V1.47693H62.9531V19.9999Z"
fill="currentColor"
/>
</svg>
{/* End Star */}
</div>
</div>
{/* End Review */}
{/* Review */}
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z"
fill="transparent"
/>
<path
d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z"
fill="currentColor"
/>
</svg>
</div>
<p className="mt-3 text-sm text-primary-content">
<span className="font-bold">4.8</span> /5 - from 5k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 text-primary-content"
width={110}
height={28}
viewBox="0 0 110 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M66.6601 8.35107C64.8995 8.35107 63.5167 8.72875 62.1331 9.48265C62.1331 5.4582 62.1331 1.81143 62.2594 0.554199L53.8321 2.06273V2.81736L54.7124 2.94301C55.8433 3.19431 56.2224 3.82257 56.4715 5.33255C56.725 8.35107 56.5979 24.4496 56.4715 27.0912C58.7354 27.5945 61.1257 27.9722 63.5159 27.9722C70.1819 27.9722 74.2064 23.8213 74.2064 17.281C74.2064 12.1249 70.9366 8.35107 66.6601 8.35107ZM63.7672 26.5878C63.2639 26.5878 62.6342 26.5878 62.258 26.4629C62.1316 24.7023 62.0067 17.281 62.1316 10.7413C62.8862 10.4893 63.3888 10.3637 64.0185 10.3637C66.7872 10.3637 68.2965 13.6335 68.2965 17.6572C68.2957 22.6898 66.4088 26.5878 63.7672 26.5878ZM22.1363 1.0568H0V2.18838L1.25796 2.31403C2.89214 2.56533 3.52184 3.57127 3.77242 5.9608C4.15082 10.4886 4.02445 18.6646 3.77242 22.5619C3.52112 24.9522 2.89287 26.0845 1.25796 26.2087L0 26.4615V27.4674H14.2123V26.4615L12.703 26.2087C11.0681 26.0838 10.4392 24.9522 10.1879 22.5619C10.0615 20.9263 9.93583 18.2847 9.93583 15.0156L12.9543 15.1413C14.8413 15.1413 15.7208 16.6505 16.0985 18.7881H17.2308V9.86106H16.0985C15.7201 11.9993 14.8413 13.5078 12.9543 13.5078L9.93655 13.6342C9.93655 9.35773 10.0622 5.33328 10.1886 2.94374H14.59C17.9869 2.94374 19.7475 5.08125 21.0047 8.85513L22.2626 8.47745L22.1363 1.0568Z"
fill="currentColor"
/>
<path
d="M29.3053 8.09998C35.5944 8.09998 38.7385 12.3764 38.7385 18.0358C38.7385 23.4439 35.2167 27.9731 28.9276 27.9731C22.6393 27.9731 19.4951 23.6959 19.4951 18.0358C19.4951 12.6277 23.0162 8.09998 29.3053 8.09998ZM28.9276 9.35793C26.1604 9.35793 25.4058 13.1311 25.4058 18.0358C25.4058 22.8149 26.6637 26.7137 29.1796 26.7137C32.0703 26.7137 32.8264 22.9405 32.8264 18.0358C32.8264 13.2567 31.5699 9.35793 28.9276 9.35793ZM75.8403 18.1622C75.8403 13.0054 79.1101 8.09998 85.5248 8.09998C90.8057 8.09998 93.3224 11.9995 93.3224 17.1555H81.6253C81.4989 21.8089 83.7628 25.2051 88.2913 25.2051C90.3038 25.2051 91.3098 24.7033 92.5685 23.8223L93.0703 24.4505C91.8124 26.2111 89.0459 27.9731 85.5248 27.9731C79.8647 27.9724 75.8403 23.9479 75.8403 18.1622ZM81.6253 15.7726L87.5366 15.6463C87.5366 13.1311 87.159 9.35793 85.0214 9.35793C82.8839 9.35793 81.7502 12.8791 81.6253 15.7726ZM108.291 9.10663C106.782 8.47693 104.77 8.09998 102.506 8.09998C97.8538 8.09998 94.9594 10.8665 94.9594 14.137C94.9594 17.4075 97.0955 18.7904 100.118 19.7971C103.261 20.9279 104.142 21.8089 104.142 23.3182C104.142 24.8275 103.01 26.2103 100.997 26.2103C98.6084 26.2103 96.8464 24.8275 95.4635 21.0536L94.5825 21.3063L94.7089 26.84C96.2181 27.4683 98.9846 27.9724 101.375 27.9724C106.28 27.9724 109.425 25.4557 109.425 21.5576C109.425 18.9161 108.041 17.4075 104.771 16.1489C101.249 14.766 99.992 13.8857 99.992 12.2501C99.992 10.6152 101.126 9.48286 102.635 9.48286C104.897 9.48286 106.407 10.8665 107.54 14.2627L108.42 14.0114L108.291 9.10663ZM55.0883 8.6033C52.9508 7.3468 49.1769 7.97433 47.1651 12.5028L47.29 8.1007L38.8642 9.73561V10.4902L39.7444 10.6159C40.8775 10.7423 41.3794 11.3705 41.5057 13.0062C41.757 16.0247 41.6314 21.3078 41.5057 23.9486C41.3794 25.4564 40.8775 26.2111 39.7444 26.3374L38.8642 26.4638V27.4697H50.5606V26.4638L49.0513 26.3374C47.7941 26.2111 47.4164 25.4564 47.29 23.9486C47.0387 21.5584 47.0387 16.7793 47.1651 13.7608C47.7933 12.8798 50.5606 12.1259 53.0757 13.7608L55.0883 8.6033Z"
fill="currentColor"
/>
</svg>
{/* End Star */}
</div>
</div>
{/* End Review */}
</div>
{/* End Review */}
</div>
{/* End Col */}
<div className="relative ms-4">
<img
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"
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 text-white 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> </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 text-primary-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">
{/* Review */}
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
</div>
<p className="mt-3 text-sm text-primary-content">
<span className="font-bold">4.6</span> /5 - from 12k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 text-primary-content"
width={80}
height={27}
viewBox="0 0 80 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.558 9.74046H11.576V12.3752H17.9632C17.6438 16.0878 14.5301 17.7245 11.6159 17.7245C7.86341 17.7245 4.58995 14.7704 4.58995 10.6586C4.58995 6.62669 7.70373 3.51291 11.6159 3.51291C14.6498 3.51291 16.4063 5.42908 16.4063 5.42908L18.2426 3.51291C18.2426 3.51291 15.8474 0.878184 11.4961 0.878184C5.94724 0.838264 1.67578 5.50892 1.67578 10.5788C1.67578 15.5289 5.70772 20.3592 11.6558 20.3592C16.8854 20.3592 20.7177 16.8063 20.7177 11.4969C20.7177 10.3792 20.558 9.74046 20.558 9.74046Z"
fill="currentColor"
/>
<path
d="M27.8621 7.78442C24.1894 7.78442 21.5547 10.6587 21.5547 14.012C21.5547 17.4451 24.1096 20.3593 27.9419 20.3593C31.415 20.3593 34.2094 17.7645 34.2094 14.0918C34.1695 9.94011 30.896 7.78442 27.8621 7.78442ZM27.902 10.2994C29.6984 10.2994 31.415 11.7764 31.415 14.0918C31.415 16.4072 29.7383 17.8842 27.902 17.8842C25.906 17.8842 24.3491 16.2874 24.3491 14.0519C24.3092 11.8962 25.8661 10.2994 27.902 10.2994Z"
fill="currentColor"
/>
<path
d="M41.5964 7.78442C37.9238 7.78442 35.2891 10.6587 35.2891 14.012C35.2891 17.4451 37.844 20.3593 41.6763 20.3593C45.1493 20.3593 47.9438 17.7645 47.9438 14.0918C47.9038 9.94011 44.6304 7.78442 41.5964 7.78442ZM41.6364 10.2994C43.4328 10.2994 45.1493 11.7764 45.1493 14.0918C45.1493 16.4072 43.4727 17.8842 41.6364 17.8842C39.6404 17.8842 38.0835 16.2874 38.0835 14.0519C38.0436 11.8962 39.6004 10.2994 41.6364 10.2994Z"
fill="currentColor"
/>
<path
d="M55.0475 7.82434C51.6543 7.82434 49.0195 10.7784 49.0195 14.0918C49.0195 17.8443 52.0934 20.3992 54.9676 20.3992C56.764 20.3992 57.6822 19.7205 58.4407 18.8822V20.1198C58.4407 22.2754 57.1233 23.5928 55.1273 23.5928C53.2111 23.5928 52.2531 22.1557 51.8938 21.3573L49.4587 22.3553C50.297 24.1517 52.0135 26.0279 55.0874 26.0279C58.4407 26.0279 60.9956 23.9122 60.9956 19.481V8.18362H58.3608V9.26147C57.6423 8.38322 56.5245 7.82434 55.0475 7.82434ZM55.287 10.2994C56.9237 10.2994 58.6403 11.7365 58.6403 14.1317C58.6403 16.6068 56.9636 17.9241 55.2471 17.9241C53.4507 17.9241 51.774 16.4471 51.774 14.1716C51.8139 11.6966 53.5305 10.2994 55.287 10.2994Z"
fill="currentColor"
/>
<path
d="M72.8136 7.78442C69.62 7.78442 66.9453 10.2994 66.9453 14.0519C66.9453 18.004 69.9393 20.3593 73.093 20.3593C75.7278 20.3593 77.4044 18.8822 78.3625 17.6048L76.1669 16.1277C75.608 17.006 74.6499 17.8443 73.093 17.8443C71.3365 17.8443 70.5381 16.8862 70.0192 15.9281L78.4423 12.4152L78.0032 11.3772C77.1649 9.46107 75.2886 7.78442 72.8136 7.78442ZM72.8934 10.2196C74.0511 10.2196 74.8495 10.8184 75.2487 11.5768L69.6599 13.9321C69.3405 12.0958 71.097 10.2196 72.8934 10.2196Z"
fill="currentColor"
/>
<path
d="M62.9531 19.9999H65.7076V1.47693H62.9531V19.9999Z"
fill="currentColor"
/>
</svg>
{/* End Star */}
</div>
</div> </div>
{/* End Review */} {/* End SVG*/}
{/* Review */}
<div className="py-5">
<div className="flex space-x-1">
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.0352 1.6307L33.9181 16.3633C34.2173 16.6768 34.5166 16.9903 34.8158 16.9903L50.0779 19.1845C50.9757 19.1845 51.275 20.4383 50.6764 21.0652L39.604 32.3498C39.3047 32.6632 39.3047 32.9767 39.3047 33.2901L41.998 49.2766C42.2973 50.217 41.1002 50.8439 40.5017 50.5304L26.4367 43.3208C26.1375 43.3208 25.8382 43.3208 25.539 43.3208L11.7732 50.8439C10.8754 51.1573 9.97763 50.5304 10.2769 49.59L12.9702 33.6036C12.9702 33.2901 12.9702 32.9767 12.671 32.6632L1.29923 21.0652C0.700724 20.4383 0.999979 19.4979 1.89775 19.4979L17.1598 17.3037C17.459 17.3037 17.7583 16.9903 18.0575 16.6768L24.9404 1.6307C25.539 0.69032 26.736 0.69032 27.0352 1.6307Z"
fill="currentColor"
/>
</svg>
<svg
className="size-4 text-primary-content"
width={51}
height={51}
viewBox="0 0 51 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M49.6867 20.0305C50.2889 19.3946 49.9878 18.1228 49.0846 18.1228L33.7306 15.8972C33.4296 15.8972 33.1285 15.8972 32.8275 15.2613L25.9032 0.317944C25.6021 0 25.3011 0 25 0V42.6046C25 42.6046 25.3011 42.6046 25.6021 42.6046L39.7518 49.9173C40.3539 50.2352 41.5581 49.5994 41.2571 48.6455L38.5476 32.4303C38.5476 32.1124 38.5476 31.7944 38.8486 31.4765L49.6867 20.0305Z"
fill="transparent"
/>
<path
d="M0.313299 20.0305C-0.288914 19.3946 0.0122427 18.1228 0.915411 18.1228L16.2694 15.8972C16.5704 15.8972 16.8715 15.8972 17.1725 15.2613L24.0968 0.317944C24.3979 0 24.6989 0 25 0V42.6046C25 42.6046 24.6989 42.6046 24.3979 42.6046L10.2482 49.9173C9.64609 50.2352 8.44187 49.5994 8.74292 48.6455L11.4524 32.4303C11.4524 32.1124 11.4524 31.7944 11.1514 31.4765L0.313299 20.0305Z"
fill="currentColor"
/>
</svg>
</div>
<p className="mt-3 text-sm text-primary-content">
<span className="font-bold">4.8</span> /5 - from 5k reviews
</p>
<div className="mt-5">
{/* Star */}
<svg
className="h-auto w-16 text-primary-content"
width={110}
height={28}
viewBox="0 0 110 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M66.6601 8.35107C64.8995 8.35107 63.5167 8.72875 62.1331 9.48265C62.1331 5.4582 62.1331 1.81143 62.2594 0.554199L53.8321 2.06273V2.81736L54.7124 2.94301C55.8433 3.19431 56.2224 3.82257 56.4715 5.33255C56.725 8.35107 56.5979 24.4496 56.4715 27.0912C58.7354 27.5945 61.1257 27.9722 63.5159 27.9722C70.1819 27.9722 74.2064 23.8213 74.2064 17.281C74.2064 12.1249 70.9366 8.35107 66.6601 8.35107ZM63.7672 26.5878C63.2639 26.5878 62.6342 26.5878 62.258 26.4629C62.1316 24.7023 62.0067 17.281 62.1316 10.7413C62.8862 10.4893 63.3888 10.3637 64.0185 10.3637C66.7872 10.3637 68.2965 13.6335 68.2965 17.6572C68.2957 22.6898 66.4088 26.5878 63.7672 26.5878ZM22.1363 1.0568H0V2.18838L1.25796 2.31403C2.89214 2.56533 3.52184 3.57127 3.77242 5.9608C4.15082 10.4886 4.02445 18.6646 3.77242 22.5619C3.52112 24.9522 2.89287 26.0845 1.25796 26.2087L0 26.4615V27.4674H14.2123V26.4615L12.703 26.2087C11.0681 26.0838 10.4392 24.9522 10.1879 22.5619C10.0615 20.9263 9.93583 18.2847 9.93583 15.0156L12.9543 15.1413C14.8413 15.1413 15.7208 16.6505 16.0985 18.7881H17.2308V9.86106H16.0985C15.7201 11.9993 14.8413 13.5078 12.9543 13.5078L9.93655 13.6342C9.93655 9.35773 10.0622 5.33328 10.1886 2.94374H14.59C17.9869 2.94374 19.7475 5.08125 21.0047 8.85513L22.2626 8.47745L22.1363 1.0568Z"
fill="currentColor"
/>
<path
d="M29.3053 8.09998C35.5944 8.09998 38.7385 12.3764 38.7385 18.0358C38.7385 23.4439 35.2167 27.9731 28.9276 27.9731C22.6393 27.9731 19.4951 23.6959 19.4951 18.0358C19.4951 12.6277 23.0162 8.09998 29.3053 8.09998ZM28.9276 9.35793C26.1604 9.35793 25.4058 13.1311 25.4058 18.0358C25.4058 22.8149 26.6637 26.7137 29.1796 26.7137C32.0703 26.7137 32.8264 22.9405 32.8264 18.0358C32.8264 13.2567 31.5699 9.35793 28.9276 9.35793ZM75.8403 18.1622C75.8403 13.0054 79.1101 8.09998 85.5248 8.09998C90.8057 8.09998 93.3224 11.9995 93.3224 17.1555H81.6253C81.4989 21.8089 83.7628 25.2051 88.2913 25.2051C90.3038 25.2051 91.3098 24.7033 92.5685 23.8223L93.0703 24.4505C91.8124 26.2111 89.0459 27.9731 85.5248 27.9731C79.8647 27.9724 75.8403 23.9479 75.8403 18.1622ZM81.6253 15.7726L87.5366 15.6463C87.5366 13.1311 87.159 9.35793 85.0214 9.35793C82.8839 9.35793 81.7502 12.8791 81.6253 15.7726ZM108.291 9.10663C106.782 8.47693 104.77 8.09998 102.506 8.09998C97.8538 8.09998 94.9594 10.8665 94.9594 14.137C94.9594 17.4075 97.0955 18.7904 100.118 19.7971C103.261 20.9279 104.142 21.8089 104.142 23.3182C104.142 24.8275 103.01 26.2103 100.997 26.2103C98.6084 26.2103 96.8464 24.8275 95.4635 21.0536L94.5825 21.3063L94.7089 26.84C96.2181 27.4683 98.9846 27.9724 101.375 27.9724C106.28 27.9724 109.425 25.4557 109.425 21.5576C109.425 18.9161 108.041 17.4075 104.771 16.1489C101.249 14.766 99.992 13.8857 99.992 12.2501C99.992 10.6152 101.126 9.48286 102.635 9.48286C104.897 9.48286 106.407 10.8665 107.54 14.2627L108.42 14.0114L108.291 9.10663ZM55.0883 8.6033C52.9508 7.3468 49.1769 7.97433 47.1651 12.5028L47.29 8.1007L38.8642 9.73561V10.4902L39.7444 10.6159C40.8775 10.7423 41.3794 11.3705 41.5057 13.0062C41.757 16.0247 41.6314 21.3078 41.5057 23.9486C41.3794 25.4564 40.8775 26.2111 39.7444 26.3374L38.8642 26.4638V27.4697H50.5606V26.4638L49.0513 26.3374C47.7941 26.2111 47.4164 25.4564 47.29 23.9486C47.0387 21.5584 47.0387 16.7793 47.1651 13.7608C47.7933 12.8798 50.5606 12.1259 53.0757 13.7608L55.0883 8.6033Z"
fill="currentColor"
/>
</svg>
{/* End Star */}
</div>
</div>
{/* End Review */}
</div> </div>
{/* End Review */} {/* End Col */}
</div> </div>
{/* End Col */} {/* End Grid */}
<div className="relative ms-4">
<img
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"
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 text-white 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> </div>
{/* End Grid */}
</div> </div>
{/* End Hero */} {/* 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 SquaredBackgroundHero from "./SquaredBackgroundHero";
import CenterAllignedWithVideoHero from "./CenterAllignedWithVideoHero"; import CenterAllignedWithVideoHero from "./CenterAllignedWithVideoHero";
import WaitingListWithImageHero from "./WaitingListWithImageHero";
export { export {
SquaredBackgroundHero, SquaredBackgroundHero,
CenterAllignedWithVideoHero CenterAllignedWithVideoHero,
WaitingListWithImageHero
}; };

2
Frontend/sections/Video.tsx
View File

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