From 925e6b7d02f83e162791f83f01e0c8b4f705614e Mon Sep 17 00:00:00 2001
From: Bon Nicolai Mercado <bonhokage06@gmail.com>
Date: Fri, 18 Oct 2024 07:04:28 +0800
Subject: [PATCH] feat: use strapi

---
 apps/website/package.json               |  66 ++--
 apps/website/src/app/clientLayout.tsx   | 426 +++++++++++++-----------
 apps/website/src/app/hooks/UseStrapi.ts |  48 +++
 apps/website/src/app/page.tsx           | 190 ++++++-----
 4 files changed, 422 insertions(+), 308 deletions(-)
 create mode 100644 apps/website/src/app/hooks/UseStrapi.ts

diff --git a/apps/website/package.json b/apps/website/package.json
index 9f78a03..921f664 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -1,35 +1,35 @@
 {
-  "name": "website",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "doppler run --preserve-env -- next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "vitest",
-    "preview": "pnpm dlx http-server out"
-  },
-  "dependencies": {
-    "@frontline-hq/untitledui-icons": "^0.0.4",
-    "@lilypad/shared-components": "workspace:~",
-    "@react-spring/web": "^9.7.4",
-    "next": "14.2.4",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-intersection-observer": "^9.13.0",
-    "tailwind-merge": "^2.3.0"
-  },
-  "devDependencies": {
-    "@lilypad/uui-tailwind-styles": "workspace:~",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.4",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5"
-  }
+	"name": "website",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "doppler run --preserve-env -- next dev",
+		"build": "doppler run --preserve-env -- next build",
+		"start": "next start",
+		"lint": "next lint",
+		"test": "vitest",
+		"preview": "pnpm dlx http-server out"
+	},
+	"dependencies": {
+		"@frontline-hq/untitledui-icons": "^0.0.4",
+		"@lilypad/shared-components": "workspace:~",
+		"@react-spring/web": "^9.7.4",
+		"next": "14.2.4",
+		"react": "^18",
+		"react-dom": "^18",
+		"react-intersection-observer": "^9.13.0",
+		"tailwind-merge": "^2.3.0"
+	},
+	"devDependencies": {
+		"@lilypad/uui-tailwind-styles": "workspace:~",
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^8",
+		"eslint-config-next": "14.2.4",
+		"postcss": "^8.4.38",
+		"tailwindcss": "^3.4.3",
+		"typescript": "^5"
+	}
 }
diff --git a/apps/website/src/app/clientLayout.tsx b/apps/website/src/app/clientLayout.tsx
index a97c48f..5cb7d79 100644
--- a/apps/website/src/app/clientLayout.tsx
+++ b/apps/website/src/app/clientLayout.tsx
@@ -6,7 +6,7 @@ import _NavItemBase from "@/components/_NavItemBase/_NavItemBase";
 import _ApplicationNavMenuButton from "@/components/_ApplicationNavMenuButton/_ApplicationNavMenuButton";
 import NavBar from "@/components/NavBar";
 import Image from "next/image";
-import { useState } from "react";
+import { Context, useState } from "react";
 import { usePathname } from "next/navigation";
 import _NavItemDropdown from "@/components/_NavItemDropdown/_NavItemDropdown";
 import _NavMenuItem from "@/components/_NavMenuItem/_NavMenuItem";
@@ -24,9 +24,17 @@ import {
 import { Anchor } from "@lilypad/shared-components";
 import Footer from "@/components/Footer";
 import { animated, useSpring } from "@react-spring/web";
+import { createContext } from "react";
+import useStrapi, { StrapiContext } from "./hooks/UseStrapi";
 
 const INTER = Inter({ subsets: ["latin"] });
 
+export const PageContext: Context<StrapiContext> = createContext({
+	strapi: {
+		mission_statement: "",
+	},
+});
+
 export default function ClientLayout({
 	children,
 }: Readonly<{
@@ -36,8 +44,8 @@ export default function ClientLayout({
 	const [nestedMenu, setNestedMenu] = useState<null | "About" | "Resources">(
 		null
 	);
-
 	const pathname = usePathname();
+	const { strapi, isLoading: isCmsLoading } = useStrapi({ pathname });
 
 	const resourcesArray = [
 		{
@@ -151,149 +159,134 @@ export default function ClientLayout({
 		to: { opacity: 1 },
 		config: { duration: 1 },
 	});
-
 	return (
 		<html lang="en" className="uui-dark">
 			<body className={INTER.className}>
-				<animated.div style={fade} className="sticky top-0 w-full z-40">
-					<NavBar
-						logo={
-							<a href="/">
-								<Image
-									src="lilypad-logo.svg"
-									width={155}
-									height={32}
-									alt={"alt"}
-								/>
-							</a>
-						}
-						menuButton={
-							<_ApplicationNavMenuButton></_ApplicationNavMenuButton>
-						}
-						openedState={{
-							opened: menuOpened,
-							setOpened: setMenuOpened,
-						}}
-						trailingCTA={
-							<Anchor
-								target="_blank"
-								href="https://lilypadnetwork.notion.site/Leap-into-Lilypad-s-IncentiveNet-9e9b12936d4340ad9417d92dab8bd9d1"
-								className="hidden uui-desktop:flex"
-								color="color"
-								destructive={false}
-								hierarchy="secondary"
-								size="md"
-								icon={{
-									type: "icon",
-									leading: weatherLightning01,
+				{!isCmsLoading && (
+					<PageContext.Provider value={{ strapi }}>
+						<animated.div
+							style={fade}
+							className="sticky top-0 w-full z-40"
+						>
+							<NavBar
+								logo={
+									<a href="/">
+										<Image
+											src="lilypad-logo.svg"
+											width={155}
+											height={32}
+											alt={"alt"}
+										/>
+									</a>
+								}
+								menuButton={
+									<_ApplicationNavMenuButton></_ApplicationNavMenuButton>
+								}
+								openedState={{
+									opened: menuOpened,
+									setOpened: setMenuOpened,
 								}}
+								trailingCTA={
+									<Anchor
+										target="_blank"
+										href="https://lilypadnetwork.notion.site/Leap-into-Lilypad-s-IncentiveNet-9e9b12936d4340ad9417d92dab8bd9d1"
+										className="hidden uui-desktop:flex"
+										color="color"
+										destructive={false}
+										hierarchy="secondary"
+										size="md"
+										icon={{
+											type: "icon",
+											leading: weatherLightning01,
+										}}
+									>
+										Get Started
+									</Anchor>
+								}
 							>
-								Get Started
-							</Anchor>
-						}
-					>
-						{nestedMenu != null && menuOpened ? (
-							<button
-								className="mb-uui-2xl"
-								onClick={() => setNestedMenu(null)}
-							>
-								<_NavItemBase current={true}>
-									{"Back"}
-								</_NavItemBase>
-							</button>
-						) : null}
-						{menuOpened ? (
-							<>
-								{nestedMenu === null && (
-									<>
-										<button
-											onClick={() => {
-												setNestedMenu("About");
-											}}
-										>
-											<_NavItemBase
-												// TODO add all paths that have to do with the about page
-												current={pathname === "/about"}
-											>
-												{"About"}
-											</_NavItemBase>
-										</button>
-										<Link
-											href="/#products"
-											onClick={() => {
-												setMenuOpened(() => false);
-											}}
-										>
-											<_NavItemBase
-												current={pathname === "/"}
-											>
-												{"Products"}
-											</_NavItemBase>
-										</Link>
-										<button
-											onClick={() => {
-												setNestedMenu("Resources");
-											}}
-										>
-											<_NavItemBase
-												// TODO add all paths that have to do with the about page
-												current={
-													pathname === "/resources"
-												}
-											>
-												{"Resources"}
-											</_NavItemBase>
-										</button>
-
-										<Link
-											href="https://docs.lilypad.tech/lilypad"
-											onClick={() => {
-												setMenuOpened(() => false);
-											}}
-										>
-											<_NavItemBase
-												current={pathname === "/docs"}
-											>
-												{"Docs"}
-											</_NavItemBase>
-										</Link>
-									</>
-								)}
-								{nestedMenu === "About" ? (
-									<div className="overflow-auto no-scrollbar max-h-[50vh] flex flex-col gap-uui-xl border-uui-1 border-uui-border-secondary rounded-xl p-uui-lg">
-										{aboutArray.map((item, index) => (
-											<_NavMenuItem
-												key={index}
-												description={item.description}
-												title={item.title}
-												iconUrl={item.iconUrl}
-												href={item.href}
-											/>
-										))}
-									</div>
-								) : nestedMenu === "Resources" ? (
-									<div className="overflow-auto no-scrollbar max-h-[50vh] flex flex-col gap-uui-xl border-uui-1 border-uui-border-secondary rounded-xl p-uui-lg">
-										{resourcesArray.map((item, index) => (
-											<_NavMenuItem
-												key={index}
-												description={item.description}
-												title={item.title}
-												iconUrl={item.iconUrl}
-												href={item.href}
-											/>
-										))}
-									</div>
+								{nestedMenu != null && menuOpened ? (
+									<button
+										className="mb-uui-2xl"
+										onClick={() => setNestedMenu(null)}
+									>
+										<_NavItemBase current={true}>
+											{"Back"}
+										</_NavItemBase>
+									</button>
 								) : null}
-							</>
-						) : (
-							<>
-								<_NavItemDropdown
-									current={pathname === "/About"}
-								>
-									{{
-										title: "About",
-										dropdownList: (
+								{menuOpened ? (
+									<>
+										{nestedMenu === null && (
 											<>
+												<button
+													onClick={() => {
+														setNestedMenu("About");
+													}}
+												>
+													<_NavItemBase
+														// TODO add all paths that have to do with the about page
+														current={
+															pathname ===
+															"/about"
+														}
+													>
+														{"About"}
+													</_NavItemBase>
+												</button>
+												<Link
+													href="/#products"
+													onClick={() => {
+														setMenuOpened(
+															() => false
+														);
+													}}
+												>
+													<_NavItemBase
+														current={
+															pathname === "/"
+														}
+													>
+														{"Products"}
+													</_NavItemBase>
+												</Link>
+												<button
+													onClick={() => {
+														setNestedMenu(
+															"Resources"
+														);
+													}}
+												>
+													<_NavItemBase
+														// TODO add all paths that have to do with the about page
+														current={
+															pathname ===
+															"/resources"
+														}
+													>
+														{"Resources"}
+													</_NavItemBase>
+												</button>
+
+												<Link
+													href="https://docs.lilypad.tech/lilypad"
+													onClick={() => {
+														setMenuOpened(
+															() => false
+														);
+													}}
+												>
+													<_NavItemBase
+														current={
+															pathname === "/docs"
+														}
+													>
+														{"Docs"}
+													</_NavItemBase>
+												</Link>
+											</>
+										)}
+										{nestedMenu === "About" ? (
+											<div className="overflow-auto no-scrollbar max-h-[50vh] flex flex-col gap-uui-xl border-uui-1 border-uui-border-secondary rounded-xl p-uui-lg">
 												{aboutArray.map(
 													(item, index) => (
 														<_NavMenuItem
@@ -309,27 +302,9 @@ export default function ClientLayout({
 														/>
 													)
 												)}
-											</>
-										),
-									}}
-								</_NavItemDropdown>
-								<Link
-									href="/#products"
-									onClick={() => {
-										setMenuOpened(() => false);
-									}}
-								>
-									<_NavItemBase current={pathname === "/"}>
-										{"Products"}
-									</_NavItemBase>
-								</Link>
-								<_NavItemDropdown
-									current={pathname === "/Resources"}
-								>
-									{{
-										title: "Resources",
-										dropdownList: (
-											<>
+											</div>
+										) : nestedMenu === "Resources" ? (
+											<div className="overflow-auto no-scrollbar max-h-[50vh] flex flex-col gap-uui-xl border-uui-1 border-uui-border-secondary rounded-xl p-uui-lg">
 												{resourcesArray.map(
 													(item, index) => (
 														<_NavMenuItem
@@ -345,36 +320,111 @@ export default function ClientLayout({
 														/>
 													)
 												)}
-											</>
-										),
-									}}
-								</_NavItemDropdown>
+											</div>
+										) : null}
+									</>
+								) : (
+									<>
+										<_NavItemDropdown
+											current={pathname === "/About"}
+										>
+											{{
+												title: "About",
+												dropdownList: (
+													<>
+														{aboutArray.map(
+															(item, index) => (
+																<_NavMenuItem
+																	key={index}
+																	description={
+																		item.description
+																	}
+																	title={
+																		item.title
+																	}
+																	iconUrl={
+																		item.iconUrl
+																	}
+																	href={
+																		item.href
+																	}
+																/>
+															)
+														)}
+													</>
+												),
+											}}
+										</_NavItemDropdown>
+										<Link
+											href="/#products"
+											onClick={() => {
+												setMenuOpened(() => false);
+											}}
+										>
+											<_NavItemBase
+												current={pathname === "/"}
+											>
+												{"Products"}
+											</_NavItemBase>
+										</Link>
+										<_NavItemDropdown
+											current={pathname === "/Resources"}
+										>
+											{{
+												title: "Resources",
+												dropdownList: (
+													<>
+														{resourcesArray.map(
+															(item, index) => (
+																<_NavMenuItem
+																	key={index}
+																	description={
+																		item.description
+																	}
+																	title={
+																		item.title
+																	}
+																	iconUrl={
+																		item.iconUrl
+																	}
+																	href={
+																		item.href
+																	}
+																/>
+															)
+														)}
+													</>
+												),
+											}}
+										</_NavItemDropdown>
 
-								<Link
-									href="https://docs.lilypad.tech/lilypad"
-									onClick={() => {
-										setMenuOpened(() => false);
-									}}
-								>
-									<_NavItemBase
-										current={pathname === "/docs"}
-									>
-										{"Docs"}
-									</_NavItemBase>
-								</Link>
-							</>
-						)}
-					</NavBar>
-				</animated.div>
-				{children}
-				<Footer
-					footerIcon={{
-						src: "lilypad-logo.svg",
-						alt: "Lilypad Logo",
-						href: "/",
-					}}
-					socialLinks={footerSocialLinks}
-				/>
+										<Link
+											href="https://docs.lilypad.tech/lilypad"
+											onClick={() => {
+												setMenuOpened(() => false);
+											}}
+										>
+											<_NavItemBase
+												current={pathname === "/docs"}
+											>
+												{"Docs"}
+											</_NavItemBase>
+										</Link>
+									</>
+								)}
+							</NavBar>
+						</animated.div>
+						{children}
+						<Footer
+							footerIcon={{
+								src: "lilypad-logo.svg",
+								alt: "Lilypad Logo",
+								href: "/",
+							}}
+							socialLinks={footerSocialLinks}
+						/>
+					</PageContext.Provider>
+				)}
 			</body>
 		</html>
 	);
diff --git a/apps/website/src/app/hooks/UseStrapi.ts b/apps/website/src/app/hooks/UseStrapi.ts
new file mode 100644
index 0000000..59276c5
--- /dev/null
+++ b/apps/website/src/app/hooks/UseStrapi.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+
+export interface StrapiContext {
+	strapi: StrapiCmsInfo;
+}
+
+interface StrapiCmsInfo {
+	mission_statement: string;
+}
+interface StrapiResponse {
+	strapi: StrapiCmsInfo;
+	isLoading: Boolean;
+}
+interface StrapiProps {
+	pathname: string;
+}
+
+function useStrapi({ pathname }: StrapiProps): StrapiResponse {
+	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [strapi, setStrapi] = useState<StrapiCmsInfo>({
+		mission_statement: "",
+	});
+	const getApiName = () => {
+		switch (pathname) {
+			case "/":
+				return "website-homepage";
+		}
+	};
+	useEffect(() => {
+		const apiName = getApiName();
+		fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/${apiName}`, {
+			headers: {
+				authorization: `bearer ${process.env.NEXT_PUBLIC_STRAPI_API}`,
+			},
+		}).then((data) => {
+			data.json()
+				.then(({ data: info }) => {
+					setStrapi(info);
+				})
+				.finally(() => {
+					setIsLoading(false);
+				});
+		});
+	}, []);
+	return { strapi, isLoading };
+}
+
+export default useStrapi;
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 6424b0e..24e8b03 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -17,7 +17,7 @@ import {
 } from "@frontline-hq/untitledui-icons";
 import Head from "next/head";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import CenterHeadingSection from "@/components/CenterHeadingSection/CenterHeadingSection";
 import SocialProofSection from "@/components/SocialProofSection/SocialProofSection";
 import IconAtom from "@/components/IconAtom/IconAtom";
@@ -28,7 +28,10 @@ import AnimateSpring from "@/components/AnimateSpring";
 import { animated } from "@react-spring/web";
 import useFade from "./hooks/UseFade";
 import useFadeInView from "./hooks/UseFadeInView";
+import { PageContext } from "./clientLayout";
+
 export default function Home() {
+	const { strapi } = useContext(PageContext);
 	const socialLinks = [
 		{ href: "https://twitter.com/lilypad_tech", iconUrl: "/x.svg" },
 		{
@@ -40,44 +43,55 @@ export default function Home() {
 			iconUrl: "/telegram.svg",
 		},
 	];
-
-	const [email, setEmail] = useState('');
-	const [message, setMessage] = useState('');
+	const [email, setEmail] = useState("");
+	const [message, setMessage] = useState("");
 
 	const handleSubscribe = async (e: React.FormEvent<HTMLFormElement>) => {
-	    e.preventDefault();
+		e.preventDefault();
 
-	    if (!email) {
-	        setMessage('Please enter a valid email address.');
-	        return;
-	    }
+		if (!email) {
+			setMessage("Please enter a valid email address.");
+			return;
+		}
 
-	    try {
-	        const response = await fetch('https://updates.lilypad.tech/members/api/send-magic-link/', {
-	            method: 'POST',
-	            headers: {
-	                'Content-Type': 'application/json',
-	            },
-	            body: JSON.stringify({
-	                email: email,
-	                emailType: 'subscribe',
-	            }),
-	        });
+		try {
+			const response = await fetch(
+				"https://updates.lilypad.tech/members/api/send-magic-link/",
+				{
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+					},
+					body: JSON.stringify({
+						email: email,
+						emailType: "subscribe",
+					}),
+				}
+			);
 
-	        if (response.status === 201) {
-	            setMessage('You have successfully subscribed! Please check your email for confirmation.');
-	            setEmail(''); 
-	        } else if (response.status === 429) { // Too many requests error to handle Ghost rate limits
-	            setMessage('You have made too many subscription attempts. Please wait a few minutes and try again.');
-	        } else {
-	            const errorData = await response.json();
-	            const errorMessage = errorData.errors?.[0]?.message || 'Subscription failed. Please try again later.';
-	            setMessage(errorMessage);
-	        }
-	    } catch (error) {
-	        console.error('Error subscribing to the newsletter:', error);
-	        setMessage('There was an error while processing your request. Please try again later.');
-	    }
+			if (response.status === 201) {
+				setMessage(
+					"You have successfully subscribed! Please check your email for confirmation."
+				);
+				setEmail("");
+			} else if (response.status === 429) {
+				// Too many requests error to handle Ghost rate limits
+				setMessage(
+					"You have made too many subscription attempts. Please wait a few minutes and try again."
+				);
+			} else {
+				const errorData = await response.json();
+				const errorMessage =
+					errorData.errors?.[0]?.message ||
+					"Subscription failed. Please try again later.";
+				setMessage(errorMessage);
+			}
+		} catch (error) {
+			console.error("Error subscribing to the newsletter:", error);
+			setMessage(
+				"There was an error while processing your request. Please try again later."
+			);
+		}
 	};
 
 	const productCardsData = [
@@ -231,7 +245,6 @@ export default function Home() {
 	const [missionStatementRef, missionStatementSprings] = useFadeInView();
 
 	const [communityRef, communitySprings] = useFadeInView();
-
 	return (
 		<>
 			<Head>
@@ -377,10 +390,11 @@ export default function Home() {
 								style={missionStatementSprings}
 								ref={missionStatementRef}
 							>
-								We create an AI-driven decentralized network
+								{/* We create an AI-driven decentralized network
 								that uses underutilized resources to make
 								efficient, sustainable technology accessible to
-								everyone.
+								everyone. */}
+								{strapi.mission_statement}
 							</animated.h2>
 						</div>
 					</SectionContainer>
@@ -577,57 +591,59 @@ export default function Home() {
 							</div>
 						</a>
 						<div className="lg:col-span-2 mb-uui-xl h-full text-left rounded-2xl bg-uui-bg-secondary gap-uui-2xl lg:gap-uui-4xl p-uui-6xl lg:p-uui-7xl flex flex-col lg:flex-row items-start justify-start">
-						    <div className="lg:w-1/2">
-						        <h3 className="text-uui-text-primary-900 mb-uui-xl uui-display-xs md:uui-display-sm font-semibold antialiased">
-						            Be the first to know
-						        </h3>
-						        <div className="text-uui-text-tertiary-600 flex flex-col antialiased font-regular text-uui-lg md:uui-text-xl">
-						            <span>
-						                Stay in the loop with everything you need to know.
-						            </span>
-						        </div>
-						    </div>
-						    <form
-						        className="lg:w-1/2 space-y-uui-2xl md:space-y-uui-none md:flex md:space-x-uui-xl w-full"
-						        onSubmit={handleSubscribe}
-						    >
-						        <InputField
-						            inputSize="md"
-						            destructive={false}
-						            placeholder="Enter your e-mail"
-						            className="flex-1"
-						            value={email}
-						            onChange={(e) => setEmail(e.target.value)}
-						        >
-						            {{
-						                hint: (
-						                    <span>
-						                        We care about your data in our{" "}
-						                        <a
-						                            href="/privacy"
-						                            target="_blank"
-						                            className="underline underline-offset-4"
-						                        >
-						                            privacy policy.
-						                        </a>
-						                    </span>
-						                ),
-						            }}
-						        </InputField>
-						        <Button
-						            type="submit"
-						            color="color"
-						            destructive={false}
-						            hierarchy="primary"
-						            size="md"
-						            className="[&&]:rounded-full [&&]:h-fit"
-						        >
-						            Subscribe
-						        </Button>
-						    </form>
-						    <div className="undefined  antialiased text-uui-text-tertiary-600 font-regular uui-text-sm [&amp;.error]:text-uui-text-error-primary-600 mt-uui-sm block text-left "><span>{message && <p>{message}</p>}</span></div>
+							<div className="lg:w-1/2">
+								<h3 className="text-uui-text-primary-900 mb-uui-xl uui-display-xs md:uui-display-sm font-semibold antialiased">
+									Be the first to know
+								</h3>
+								<div className="text-uui-text-tertiary-600 flex flex-col antialiased font-regular text-uui-lg md:uui-text-xl">
+									<span>
+										Stay in the loop with everything you
+										need to know.
+									</span>
+								</div>
+							</div>
+							<form
+								className="lg:w-1/2 space-y-uui-2xl md:space-y-uui-none md:flex md:space-x-uui-xl w-full"
+								onSubmit={handleSubscribe}
+							>
+								<InputField
+									inputSize="md"
+									destructive={false}
+									placeholder="Enter your e-mail"
+									className="flex-1"
+									value={email}
+									onChange={(e) => setEmail(e.target.value)}
+								>
+									{{
+										hint: (
+											<span>
+												We care about your data in our{" "}
+												<a
+													href="/privacy"
+													target="_blank"
+													className="underline underline-offset-4"
+												>
+													privacy policy.
+												</a>
+											</span>
+										),
+									}}
+								</InputField>
+								<Button
+									type="submit"
+									color="color"
+									destructive={false}
+									hierarchy="primary"
+									size="md"
+									className="[&&]:rounded-full [&&]:h-fit"
+								>
+									Subscribe
+								</Button>
+							</form>
+							<div className="undefined  antialiased text-uui-text-tertiary-600 font-regular uui-text-sm [&amp;.error]:text-uui-text-error-primary-600 mt-uui-sm block text-left ">
+								<span>{message && <p>{message}</p>}</span>
+							</div>
 						</div>
-
 					</div>
 				</SectionContainer>
 			</main>