From 5db5b5e11cabf142a1f671df233df491042a97f4 Mon Sep 17 00:00:00 2001
From: Chibuzo Ekwue <chieezy5@gmail.com>
Date: Sun, 21 Jul 2024 12:01:20 +0100
Subject: [PATCH] hero section for the waitlist page

---
 app/components/waitlist/HeroSection.tsx | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 app/components/waitlist/HeroSection.tsx

diff --git a/app/components/waitlist/HeroSection.tsx b/app/components/waitlist/HeroSection.tsx
new file mode 100644
index 00000000..9d92dea3
--- /dev/null
+++ b/app/components/waitlist/HeroSection.tsx
@@ -0,0 +1,34 @@
+const HeroSection = () => {
+  return (
+    <section className="h-[95vh] w-full bg-white lg:bg-neutral-50">
+      <div className="container mx-auto flex h-full w-full flex-col items-center justify-center gap-[20px] px-2">
+        <div className="w-[322px] text-center font-['Inter'] text-[32px] font-bold text-neutral-600 lg:w-[623px] lg:text-6xl">
+          Join the waitlist and get early access!
+        </div>
+        <div className="inline-flex h-16 w-[322px] items-center justify-center pb-[7px] lg:h-14 lg:w-[584px]">
+          <div className="w-[322px] text-center font-['Inter'] text-base font-normal text-neutral-600 lg:w-[584px] lg:text-xl lg:leading-7">
+            Transform your remote work meetings into fun and engaging sessions
+            with our innovative game-based platform.{" "}
+          </div>
+        </div>
+        <div className="inline-flex h-[54px] w-[322px] items-center justify-center lg:h-7 lg:w-[584px]">
+          <div className="w-[322px] text-center lg:w-[584px]">
+            <span className="font-['Inter'] text-xl font-semibold leading-7 text-neutral-600">
+              Be a part of the first 2300 users for a{" "}
+            </span>
+            <span className="font-['Inter'] text-xl font-semibold leading-7 text-orange-500">
+              10% discount
+            </span>
+          </div>
+        </div>
+        <div className="inline-flex h-11 items-center justify-center gap-2.5 rounded-md bg-stone-900 px-8">
+          <button className="font-['Inter'] text-sm font-bold leading-normal text-slate-50">
+            Join the Waitist
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;