amirreza.jamali/tm-landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(landing): enhance hero section and update page backgrounds

Browse Source 
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
2025-10-21 15:17:04 +03:30
parent e2a0df5fc4
commit b556ceed98
6 changed files with 110 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+15 -6
View File
@@ -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) => (