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
+14
-5
@@ -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}
|
||||
|
||||
|
Before Width: | Height: | Size: 566 B After Width: | Height: | Size: 566 B |
@@ -0,0 +1,62 @@
|
||||
<svg width="75" height="22" viewBox="0 0 75 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M64.1061 21.679H10.8436C4.85652 21.679 0 16.8279 0 10.8315C0 4.85113 4.85652 0 10.8436 0H64.1061C70.0932 0 74.9497 4.85113 74.9497 10.8315C74.9497 16.812 70.0932 21.679 64.1061 21.679Z" fill="black"/>
|
||||
<g clip-path="url(#clip0_4423_8560)">
|
||||
<path d="M60.9749 17.0202C64.2942 17.0202 66.985 14.3294 66.985 11.0101C66.985 7.69081 64.2942 5 60.9749 5C57.6557 5 54.9648 7.69081 54.9648 11.0101C54.9648 14.3294 57.6557 17.0202 60.9749 17.0202Z" fill="url(#paint0_linear_4423_8560)"/>
|
||||
<path d="M60.9754 14.4392C62.869 14.4392 64.404 12.9042 64.404 11.0106C64.404 9.11706 62.869 7.58203 60.9754 7.58203C59.0819 7.58203 57.5469 9.11706 57.5469 11.0106C57.5469 12.9042 59.0819 14.4392 60.9754 14.4392Z" fill="url(#paint1_linear_4423_8560)"/>
|
||||
<path d="M63.9808 11.0089C63.9808 12.6627 62.6295 14.014 60.9757 14.014C59.322 14.014 57.9707 12.6829 57.9707 11.0089C57.9707 9.335 59.3018 8.00391 60.9757 8.00391C62.6497 8.00391 63.9808 9.335 63.9808 11.0089Z" fill="url(#paint2_linear_4423_8560)"/>
|
||||
<path style="mix-blend-mode:multiply" d="M63.9808 11.0089C63.9808 12.6627 62.6295 14.014 60.9757 14.014C59.322 14.014 57.9707 12.6829 57.9707 11.0089C57.9707 9.335 59.3018 8.00391 60.9757 8.00391C62.6497 8.00391 63.9808 9.335 63.9808 11.0089Z" fill="url(#paint3_radial_4423_8560)"/>
|
||||
<path style="mix-blend-mode:screen" d="M63.6984 12.5611C63.6984 11.9762 63.2143 11.4922 62.6295 11.4922C62.0446 11.4922 61.5605 11.9762 61.5605 12.5611C61.5605 13.146 62.0446 13.63 62.6295 13.63C63.2143 13.63 63.6984 13.146 63.6984 12.5611Z" fill="url(#paint4_radial_4423_8560)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4423_8560" x1="60.9749" y1="16.637" x2="60.9749" y2="4.81849" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#666666"/>
|
||||
<stop offset="1" stop-color="#010104"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4423_8560" x1="60.9956" y1="7.78371" x2="60.9956" y2="14.54" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0B131C"/>
|
||||
<stop offset="1" stop-color="#354039"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4423_8560" x1="63.1136" y1="13.1266" x2="58.8581" y2="8.87113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#231F20"/>
|
||||
<stop offset="0.08" stop-color="#212226"/>
|
||||
<stop offset="0.2" stop-color="#1F2C37"/>
|
||||
<stop offset="0.33" stop-color="#1A3C53"/>
|
||||
<stop offset="0.47" stop-color="#13537B"/>
|
||||
<stop offset="0.62" stop-color="#0A70AE"/>
|
||||
<stop offset="0.78" stop-color="#0095EE"/>
|
||||
<stop offset="0.8" stop-color="#0387D6"/>
|
||||
<stop offset="0.84" stop-color="#0D689F"/>
|
||||
<stop offset="0.88" stop-color="#154D71"/>
|
||||
<stop offset="0.91" stop-color="#1B394E"/>
|
||||
<stop offset="0.95" stop-color="#1F2A34"/>
|
||||
<stop offset="0.98" stop-color="#222225"/>
|
||||
<stop offset="1" stop-color="#231F20"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint3_radial_4423_8560" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60.9757 11.0089) scale(3.00504)">
|
||||
<stop stop-color="#231F20"/>
|
||||
<stop offset="0.2" stop-color="#165068"/>
|
||||
<stop offset="0.38" stop-color="#0C78A1"/>
|
||||
<stop offset="0.54" stop-color="#0594CB"/>
|
||||
<stop offset="0.66" stop-color="#01A6E4"/>
|
||||
<stop offset="0.73" stop-color="#00ADEE"/>
|
||||
<stop offset="0.76" stop-color="#01A5E3"/>
|
||||
<stop offset="0.81" stop-color="#0693C8"/>
|
||||
<stop offset="0.87" stop-color="#0D749B"/>
|
||||
<stop offset="0.94" stop-color="#184A5E"/>
|
||||
<stop offset="1" stop-color="#231F20"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint4_radial_4423_8560" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.6295 12.5611) scale(1.06891)">
|
||||
<stop stop-color="#CCCCCC"/>
|
||||
<stop offset="0.02" stop-color="#C4C4C4"/>
|
||||
<stop offset="0.22" stop-color="#898989"/>
|
||||
<stop offset="0.41" stop-color="#585858"/>
|
||||
<stop offset="0.59" stop-color="#313131"/>
|
||||
<stop offset="0.75" stop-color="#161616"/>
|
||||
<stop offset="0.89" stop-color="#050505"/>
|
||||
<stop offset="1"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4423_8560">
|
||||
<rect width="12" height="12" fill="white" transform="translate(54.9844 5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Reference in New Issue
Block a user