From 04290f547ff4b9dbd2cd61ca97ec38453ccdbde1 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Tue, 30 Apr 2024 19:06:15 +0100
Subject: [PATCH] feat(*): Add call to action marketing spot

---
 README.md               |   2 +-
 src/routes/+page.svelte | 207 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 207 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a263855..68ba0ad 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,6 @@ This application is designed to run on [Netlify](https://www.netlify.com/) and u
 
 The application is written in Typescript using the [SvelteKit](https://kit.svelte.dev/) framework.
 
-For styling, the application uses [Tailwind CSS](https://tailwindcss.com/) with the [DaisyUI](https://daisyui.com/) component library.
+For styling, the application uses [Tailwind CSS](https://tailwindcss.com/) with the [DaisyUI](https://daisyui.com/) component library and [HyperUI](https://www.hyperui.dev/).
 
 In its current configuration, the application can be easily linked to Netlify via git for CI/CD, enabling automatic deployments on push to the main branch.
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c354b89..0ec0204 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -20,7 +20,7 @@
 		<div class="text-center lg:text-left">
 			<h1 class="text-5xl font-bold">Sign up for this amazing SaaS right now - don't miss out!</h1>
 		</div>
-		<div class="card shrink-0 w-full max-w-sm shadow-2xl">
+		<div id="sign-up" class="card shrink-0 w-full max-w-sm shadow-2xl">
 			<SignUp {supabase} />
 		</div>
 	</div>
@@ -147,4 +147,209 @@
 			</li>
 		</ul>
 	</div>
+
+	<section>
+		<div class="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
+			<div class="mx-auto max-w-lg text-center">
+				<h2 class="text-3xl font-bold sm:text-4xl">Kickstart your marketing</h2>
+
+				<p class="mt-4 text-gray-500">
+					Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur aliquam doloribus
+					nesciunt eos fugiat. Vitae aperiam fugit consequuntur saepe laborum.
+				</p>
+			</div>
+
+			<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+
+				<a
+					class="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-indigo-500/10 hover:shadow-indigo-500/10"
+					href="#"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="size-10 text-primary"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path d="M12 14l9-5-9-5-9 5 9 5z" />
+						<path
+							d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+						/>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+						/>
+					</svg>
+
+					<h2 class="mt-4 text-xl font-bold">Digital campaigns</h2>
+
+					<p class="mt-1 text-sm text-gray-500">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ut quo possimus adipisci
+						distinctio alias voluptatum blanditiis laudantium.
+					</p>
+				</a>
+			</div>
+
+			<div class="mt-12 text-center">
+				<a href="#sign-up" class="btn btn-primary">Get Started Today</a>
+			</div>
+		</div>
+	</section>
 </div>