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.
This commit is contained in:
AmirReza Jamali
+62
-92
@@ -3,7 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { ToastContainer, Zoom } from "react-toastify";
|
||||
import HeaderButtons from "./_components/HeaderButtons";
|
||||
import ContactUs from "./contact-us/page";
|
||||
import "./globals.css";
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
@@ -32,7 +32,7 @@ function ContactInfo({
|
||||
ariaLabel: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex gap-3 my-3">
|
||||
<div className="flex gap-3 my-3 text-white">
|
||||
<Image
|
||||
src={icon}
|
||||
width={24}
|
||||
@@ -82,101 +82,71 @@ export default async function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||
<div className="container px-4 py-4 m-auto">
|
||||
<header className="flex justify-between items-center border-b md:border-none border-gray-300 pb-4">
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Opp lens home">
|
||||
<Image
|
||||
src="/main-logo.svg"
|
||||
alt="Opp lens logo"
|
||||
width={180}
|
||||
height={30}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex gap-5 items-center">
|
||||
<nav
|
||||
className="hidden md:flex"
|
||||
aria-label="Main navigation">
|
||||
<HeaderButtons />
|
||||
</nav>
|
||||
<label
|
||||
htmlFor="language"
|
||||
className="sr-only">
|
||||
Select language
|
||||
</label>
|
||||
<select
|
||||
name="language"
|
||||
id="language"
|
||||
aria-label="Language selector">
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
</header>
|
||||
<nav
|
||||
className="block md:hidden"
|
||||
aria-label="Mobile navigation">
|
||||
<HeaderButtons />
|
||||
</nav>
|
||||
<div className="hidden absolute -z-20 left-0 md:block">
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/main-bg.svg')] bg-cover bg-no-repeat`}>
|
||||
<header className="flex justify-between items-center pb-4 container px-4 py-4 m-auto">
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Opp lens home">
|
||||
<Image
|
||||
src={"/side-shallow.svg"}
|
||||
alt="Shallow"
|
||||
width={235}
|
||||
height={235}
|
||||
src="/main-logo.svg"
|
||||
alt="Opp lens logo"
|
||||
width={180}
|
||||
height={30}
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<ToastContainer
|
||||
position="top-right"
|
||||
autoClose={2500}
|
||||
theme={"colored"}
|
||||
transition={Zoom}
|
||||
hideProgressBar
|
||||
newestOnTop
|
||||
closeOnClick
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
/>
|
||||
|
||||
<main className="container px-4 py-4 m-auto flex-grow">{children}</main>
|
||||
|
||||
<footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-96">
|
||||
<div className="absolute w-full -top-[420px] md:-top-72">
|
||||
<ContactUs />
|
||||
</div>
|
||||
<ToastContainer
|
||||
position="top-right"
|
||||
autoClose={2500}
|
||||
theme={"colored"}
|
||||
transition={Zoom}
|
||||
hideProgressBar
|
||||
newestOnTop
|
||||
closeOnClick
|
||||
pauseOnFocusLoss
|
||||
draggable
|
||||
pauseOnHover
|
||||
/>
|
||||
{children}
|
||||
<div className="hidden absolute -z-20 right-0 rotate-y-180 md:block">
|
||||
<Image
|
||||
src={"/side-shallow.svg"}
|
||||
alt="Shallow"
|
||||
width={235}
|
||||
height={235}
|
||||
/>
|
||||
</div>
|
||||
<footer className="mt-14">
|
||||
<div className="flex justify-center items-center border-t pt-5 border-gray-300">
|
||||
<Image
|
||||
src="/main-logo.svg"
|
||||
alt="Opp lens logo"
|
||||
width={180}
|
||||
height={30}
|
||||
/>
|
||||
</div>
|
||||
<address className="md:flex md:justify-evenly w-full mt-14 px-5 not-italic">
|
||||
{contactInfo.map((item) => (
|
||||
<ContactInfo
|
||||
key={item.contact}
|
||||
contact={item.contact}
|
||||
href={item.href}
|
||||
icon={item.icon}
|
||||
ariaLabel={item.ariaLabel}
|
||||
<div className="container px-4 py-4 m-auto flex flex-col justify-center items-center mt-72 ">
|
||||
<div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
|
||||
<div>
|
||||
<Image
|
||||
src={"/footer-logo.svg"}
|
||||
alt="Opp lens logo"
|
||||
width={180}
|
||||
height={30}
|
||||
priority
|
||||
/>
|
||||
))}
|
||||
</address>
|
||||
<div className="flex justify-center items-center">
|
||||
<p className="text-center text-(--gray-primary) mt-5 leading-10">
|
||||
Stockholm, Sweden © 2025 Opplens.com by PBL Partners AB. All
|
||||
Rights Reserved. Democratizing Tender Access for SMEs.
|
||||
</p>
|
||||
<p className="text-white my-2">
|
||||
Democratizing Tender Access for SMEs.
|
||||
</p>
|
||||
<p className="text-white my-2">
|
||||
© 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{contactInfo.map((contact, index) => (
|
||||
<ContactInfo
|
||||
key={index}
|
||||
icon={contact.icon}
|
||||
contact={contact.contact}
|
||||
href={contact.href}
|
||||
ariaLabel={contact.ariaLabel}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user