feat(landing): enhance hero section and update page backgrounds
This commit introduces a significant visual overhaul to the landing page to create a more dynamic and engaging user experience.
Key changes include:
- Replaced the static mobile phone SVG in the hero section with an animated GIF, complete with a "dynamic island" overlay for a more modern look.
- Updated the main page background from a full cover image to a more subtle header background image (`header-bg.svg`).
- Added a new background layer (`bottom-bg.svg`) near the footer to create more visual depth and separation for the contact section.
- Numbered the three main feature descriptions ("1. Discover", "2. Prepare", "3. Win") for improved clarity and flow.
This commit is contained in:
AmirReza Jamali
+15
-6
@@ -95,7 +95,7 @@ export default async function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/main-bg.svg')] bg-cover bg-no-repeat`}>
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col min-h-screen bg-[url('/header-bg.svg')] bg-top-right bg-no-repeat bg-contain`}>
|
||||
<header className="flex justify-between items-center pb-4 container px-4 py-4 m-auto">
|
||||
<Link
|
||||
href="/"
|
||||
@@ -109,7 +109,9 @@ export default async function RootLayout({
|
||||
/>
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
{/* <div className="-z-30 w-screen h-screen absolute border">
|
||||
|
||||
</div> */}
|
||||
<ToastContainer
|
||||
position="top-right"
|
||||
autoClose={2500}
|
||||
@@ -124,14 +126,19 @@ export default async function RootLayout({
|
||||
/>
|
||||
|
||||
<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">
|
||||
<div
|
||||
className="absolute w-full -top-[420px] md:-top-72 h-[600px] z-[-10] bg-[url('/bottom-bg.svg')] bg-contain bg-no-repeat bg-right"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<div className="absolute w-full -top-[420px] md:-top-72 z-10">
|
||||
<ContactUs />
|
||||
</div>
|
||||
<div className="container px-4 py-4 m-auto flex flex-col justify-center items-center mt-96 ">
|
||||
|
||||
<div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center mt-96 ">
|
||||
<div className="flex justify-between flex-col md:flex-row gap-14 w-full md:w-1/2">
|
||||
<div>
|
||||
<div className="flex flex-col gap-10">
|
||||
<Image
|
||||
src={"/footer-logo.svg"}
|
||||
alt="Opp lens logo"
|
||||
@@ -139,12 +146,14 @@ export default async function RootLayout({
|
||||
height={30}
|
||||
priority
|
||||
/>
|
||||
<div>
|
||||
<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>
|
||||
<div>
|
||||
{contactInfo.map((contact, index) => (
|
||||
|
||||
+33
-24
@@ -24,21 +24,21 @@ export default function Home() {
|
||||
const centerFrames = [
|
||||
{
|
||||
src: "/magnifier.svg",
|
||||
title: "Discover with AI",
|
||||
title: "1. 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",
|
||||
},
|
||||
{
|
||||
src: "/clipboard.svg",
|
||||
title: "Prepare with Experts",
|
||||
title: "2. 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.",
|
||||
},
|
||||
{
|
||||
src: "/thumbs-up.svg",
|
||||
title: "Win with a Partner",
|
||||
title: "3. 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.",
|
||||
@@ -55,12 +55,19 @@ export default function Home() {
|
||||
<h2 className="capitalize">total tender amount you missed today</h2>
|
||||
<ApexChart />
|
||||
</div>
|
||||
<div className="mr-8 -z-20">
|
||||
<div className="mr-8 -z-20 relative flex justify-center h-[750px]">
|
||||
<Image
|
||||
className="-z-10 "
|
||||
src="/mobile.svg"
|
||||
src={"/dynamic-island.svg"}
|
||||
alt="dynamic island"
|
||||
width={75}
|
||||
height={22}
|
||||
className="absolute top-4 left-1/2 -translate-x-1/2"
|
||||
/>
|
||||
<Image
|
||||
className="-z-10 border-8 border-black rounded-4xl overflow-hidden h-full w-full"
|
||||
src="/mobile.gif"
|
||||
width={300}
|
||||
height={820}
|
||||
height={920}
|
||||
loading="lazy"
|
||||
alt="phone"
|
||||
/>
|
||||
@@ -68,14 +75,14 @@ export default function Home() {
|
||||
</section>
|
||||
<section className="text-left flex flex-col gap-6 bg-gradient-to-b from-[#011132] to-[#012B80] text-white rounded-[56px] relative p-6 md:p-14 -mt-16 z-20 md:ml-28">
|
||||
<hgroup>
|
||||
<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>
|
||||
<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>
|
||||
</hgroup>
|
||||
<div className="flex justify-end">
|
||||
<button className="bg-(--primary) rounded-4xl py-4 px-6">
|
||||
@@ -85,19 +92,21 @@ export default function Home() {
|
||||
</section>
|
||||
<article className="mt-40">
|
||||
<hgroup>
|
||||
<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>
|
||||
<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>
|
||||
</hgroup>
|
||||
</article>
|
||||
<section className="flex flex-col gap-4 md:flex-row">
|
||||
{centerFrames.map((frame, index) => (
|
||||
<article key={frame.description} className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6">
|
||||
<article
|
||||
key={frame.description}
|
||||
className="bg-[#F7FAFF] border border-(--primary)/30 rounded-3xl my-4 py-10 px-6 flex flex-col gap-5">
|
||||
<Image
|
||||
src={frame.src}
|
||||
alt={frame.alt}
|
||||
|
||||
Reference in New Issue
Block a user