feat: redesign homepage and early access page

This commit introduces a comprehensive redesign of the homepage and refactors the "Contact Us" page into a dedicated "Get Early Access" page.

Key changes include:
- **Homepage:** A complete overhaul with new sections, including a hero, feature highlights, and a problem/solution section to better communicate the product's value proposition.
- **Early Access Page:** The former "Contact Us" page is now repurposed for early access sign-ups, with updated copy and a more focused call-to-action.
- **Component Refactoring:**
    - The `InputGroup` component has been extracted from the form into a reusable component (`app/_components/InputGroup.tsx`) for better modularity.
    - The `CenterFrame` component has been updated to support images and new props (`src`, `title`, `alt`) to fit the new homepage design.
- **Layout Improvements:** The early access form now uses a two-column grid layout on larger screens for improved user experience.

app/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import Image from "next/image";
-
+import ApexChart from "./_components/ApexChart";
 export const metadata: Metadata = {
   title: "Opp lens - AI-Powered Tender Management for SMEs | Win More Tenders",
   description:
@@ -21,109 +21,208 @@ export const metadata: Metadata = {
 };
 
 export default function Home() {
-  const centerFrameItems = [
+  const centerFrames = [
     {
-      header: 200,
-      text: "Users",
-      description: `Lacking the time, dedicated staff, and
-          expertise to constantly monitor the market
-          and prepare high-quality bids.`,
+      src: "/magnifier.svg",
+      title: "Discover with AI",
+      alt: "Magnifier",
+      description:
+        "Our intelligent platform scours thousands of sources to find the perfect, most relevant tender opportunities for your specific business and expertise",
     },
     {
-      header: 520,
-      text: "Contracts",
-      description: `Navigating complex requirements and
-processes designed for large corporations
-with dedicated tender departments.`,
+      src: "/clipboard.svg",
+      title: "Prepare with Experts",
+      alt: "Clipboard",
+      description:
+        "Gain access to expert support and powerful tools to craft compelling, competitive, and high-quality bids that stand out from the competition.",
     },
     {
-      header: 1500,
-      text: "Tenders",
-      description: `Did you know 68% of SMEs in Sweden
-rarely or never win public tenders? It's time
-to change that.`,
+      src: "/thumbs-up.svg",
+      title: "Win with a Partner",
+      alt: "thumbs-up",
+      description:
+        "We operate on a partnership model. We only succeed when you win. This aligns our goals and makes us a true partner in your growth.",
     },
   ];
-
   return (
-    <main className="mt-8 flex flex-col justify-center items-center gap-14">
-      <section
-        className="flex"
-        aria-labelledby="hero-heading">
-        <div className="flex flex-col">
-          <h1
-            className="gradient-text md:!text-left md:!text-8xl md:mb-10"
-            id="hero-heading">
-            AI-Powered
-          </h1>
-          <Image
-            className="block md:hidden"
-            src={"/images/mobile.png"}
-            alt="Opp lens platform interface on mobile device"
-            width={520}
-            height={280}
-            priority
-          />
-          <div className="w-full flex flex-col gap-6 text-xl">
-            <h2 className="text-(--primary) font-bold text-5xl md:!mb-10">
-              Tender Management
-            </h2>
-            <h3 className="font-bold">Win more tenders, automatically!</h3>
-            <p className="text-(--gray-primary)">
-              Our platform finds tenders tailored to your business, automates
-              document handling, and sends real-time alerts. Win more
-              opportunities with less effort and zero manual search.
-            </p>
-          </div>
+    <>
+      <section className="block md:flex justify-around items-center">
+        <div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/5 p-10 rounded-[40px] h-[500px] mb-16">
+          <h2>
+            <span>$</span>
+            <span>12,345,678</span>
+          </h2>
+          <h2 className="capitalize">total tender amount you missed today</h2>
+          <ApexChart />
+        </div>
+        <div className="mr-8">
+          <Image
+            className="-z-10"
+            src="/mobile.svg"
+            width={300}
+            height={820}
+            alt="phone"
+          />
         </div>
-        <Image
-          className="hidden md:block"
-          src={"/images/mobile.png"}
-          alt="Opp lens platform interface on desktop"
-          width={550}
-          height={480}
-          priority
-        />
       </section>
-      <section
-        className="flex flex-col gap-4 text-center md:flex-row"
-        aria-labelledby="statistics-heading">
-        <h2
-          id="statistics-heading"
-          className="sr-only">
-          Platform Statistics
-        </h2>
-        {centerFrameItems.map((item, index) => (
+      <div className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] p-6 md:p-14 -mt-16 z-10 md:ml-28">
+        <h1 className="capitalize font-extrabold text-5xl ">
+          democratizing the world of tenders
+        </h1>
+        <p className="text-xs">
+          Opplens is your dedicated AI-powered partner, leveling the playing
+          field so you can win the public and private contracts you deserve.
+          Compete on your true strengths.
+        </p>
+        <div className="flex justify-end">
+          <button className="bg-(--primary) rounded-4xl py-4 px-6">
+            Get early access
+          </button>
+        </div>
+      </div>
+      <article className="mt-40">
+        <h4 className="capitalize font-bold text-4xl">
+          your in-house tender department, powered by
+          <span className="uppercase">ai</span>
+        </h4>
+        <small className="text-gray-600 mt-3">
+          Opplens is the end-to-end solution that gives you the power to compete
+          and win.
+        </small>
+      </article>
+      <section className="flex flex-col gap-4 md:flex-row">
+        {centerFrames.map((frame, index) => (
           <CenterFrame
-            key={index}
-            header={item.header}
-            text={item.text}
-            description={item.description}
+            key={frame.description}
+            src={frame.src}
+            title={frame.title}
+            description={frame.description}
+            alt={frame.alt}
           />
         ))}
       </section>
-    </main>
+      <section className="mt-36 bg-[#F7FAFF] px-4 py-6 rounded-4xl flex flex-col gap-9 md:p-16">
+        <div className="flex flex-col gap-4">
+          <h2 className=" font-bold text-4xl">
+            Tired of Complex Tenders & Lost Opportunities?
+          </h2>
+          <p className="font-normal text-sm">
+            The procurement market is tough for SMEs. We get it. You're facing
+            an uphill battle.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 md:flex-row md:justify-between">
+          <div className="flex flex-col gap-4 md:w-80">
+            <div className="p-4">
+              <Image
+                src={"/clock.svg"}
+                alt="clock icon"
+                width={36}
+                height={36}
+              />
+            </div>
+            <h2 className="font-bold">Resource Drain</h2>
+            <p>
+              Lacking the time, dedicated staff, and expertise to constantly
+              monitor the market and prepare high-quality bids.
+            </p>
+          </div>
+          <div className="flex flex-col gap-4 md:w-80">
+            <div className="p-4">
+              <Image
+                src={"/clipboard.svg"}
+                alt="clipboard icon"
+                width={36}
+                height={36}
+              />
+            </div>
+            <h2 className="font-bold">Overwhelming Complexity</h2>
+            <p>
+              Navigating complex requirements and processes designed for large
+              corporations with dedicated tender departments.
+            </p>
+          </div>
+          <div className="flex flex-col gap-4 md:w-80">
+            <div className="p-4">
+              <Image
+                src={"/arrow-up.svg"}
+                alt="arrow-up icon"
+                width={36}
+                height={36}
+              />
+            </div>
+            <h2 className="font-bold">Low Win Rates</h2>
+            <p>
+              Did you know 68% of SMEs in Sweden rarely or never win public
+              tenders? It's time to change that.
+            </p>
+          </div>
+        </div>
+      </section>
+      <section className="flex flex-col mt-36 gap-10 w-3/4 m-auto">
+        <div>
+          <h2 className="font-bold text-4xl">The Opplens Advantage</h2>
+        </div>
+        <div className="flex flex-col gap-10 md:flex-row">
+          <div className="flex flex-col gap-7 md:flex-row bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
+            <Image
+              src={"people.svg"}
+              width={48}
+              height={48}
+              alt="people icon"
+            />
+            <div className="flex flex-col gap-4">
+              <h2 className="font-bold text-xl">A True Partnership Model</h2>
+              <p>
+                Lower your risk with our performance-based options. Our success
+                is directly tied to yours, making us a dedicated partner
+                invested in your growth, not just a software provider.
+              </p>
+            </div>
+          </div>
+          <div className="flex flex-col gap-7 md:flex-row bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
+            <Image
+              src={"shield-tick.svg"}
+              width={48}
+              height={48}
+              alt="shield icon"
+            />
+            <div className="flex flex-col gap-4">
+              <h2 className="font-bold text-xl">Unmatched Data Security</h2>
+              <p>
+                Your business data is critical. Our unique on premise AI engine
+                ensures your information remains 100% private and secure, unlike
+                cloud based services. Fully GDPR compliant by design.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
   );
 }
 
 function CenterFrame({
-  header,
-  text,
+  src,
+  title,
   description,
+  alt,
 }: {
-  header: number;
-  text: string;
+  src: string;
+  title: string;
   description: string;
+  alt: string;
 }) {
   return (
-    <article className="flex flex-col justify-center items-center gap-4">
-      <p
-        className="gradient-text"
-        aria-label={`${header} ${text}`}>
-        <strong>{header}</strong>
-      </p>
-      <h3 className="text-2xl font-semibold">{text}</h3>
-      <p className="text-(--gray-primary)">{description}</p>
-    </article>
+    <div className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6">
+      <Image
+        src={src}
+        alt={alt}
+        width={36}
+        height={36}
+      />
+      <h3 className="text-2xl font-bold">{title}</h3>
+      <p className="text-gray-600">{description}</p>
+    </div>
   );
 }