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

feat(ui): Overhaul homepage and layout styling for responsiveness

Browse Source 
Refactors the styling across the main layout, homepage, and contact page to improve responsiveness and visual consistency.

Key changes include:
- Adjusted font sizes, spacing, and padding on the homepage for better scaling on different screen sizes.
- Simplified the hero section image and layout.
- Updated the footer design, removing the background image and changing text color from white to black for better readability.
- Replaced React fragments with `<main>` tags for improved semantic HTML on the contact page.
- Streamlined header and content padding in the main layout.
This commit is contained in:
AmirReza Jamali
2025-10-26 15:30:29 +03:30
parent 3d626daa0a
commit 6c7cc6d3ee
4 changed files with 52 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(home)/layout.tsx
+9 -9
View File
@@ -38,7 +38,7 @@ function ContactInfo({
contactIconSrc?: string;
}) {
return (
<div className="flex gap-3 my-3 text-white">
<div className="flex gap-3 my-3 text-black">
<Image
src={icon}
width={24}
@@ -100,7 +100,7 @@ export default async function RootLayout({
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased flex flex-col bg-[url('/header-bg.svg')] bg-top-right bg-no-repeat bg-contain lg:bg-cover`}>
<header className="flex justify-center pt-8 items-center pb-4 container px-4 py-4 m-auto lg:px-28 lg:justify-between flex-wrap gap-5">
<header className="flex justify-center pt-4 items-center pb-4 container px-4 py-0 m-auto lg:px-28 lg:justify-between flex-wrap gap-5">
<section>
<Link
href="/"
@@ -131,11 +131,11 @@ export default async function RootLayout({
pauseOnHover
/>
<div className="container px-4 py-4 m-auto flex-grow">{children}</div>
<footer className="relative h-full bg-[url('/footer-bg.svg')] bg-cover bg-no-repeat mt-40">
<div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center mt-24 ">
<div className="flex justify-between flex-col lg:flex-row gap-14 w-full lg:w-1/2">
<div className="flex flex-col gap-10">
<div className="container px-4 m-auto flex-grow">{children}</div>
<footer>
<div className="relative z-10 container px-4 py-4 m-auto flex flex-col justify-center items-center ">
<div className="flex justify-between flex-col lg:flex-row gap-14 w-full px-4 lg:px-28">
<div className="flex flex-col gap-4">
<Image
src={"/footer-logo.svg"}
alt="Opp lens logo"
@@ -144,10 +144,10 @@ export default async function RootLayout({
priority
/>
<div>
<p className="text-white my-2">
<p className="text-black my-2">
Democratizing Tender Access for SMEs.
</p>
<p className="text-white my-2">
<p className="text-black my-2">
© 2025 Opplens.com by PBL Partners AB. All Rights Reserved.
</p>
</div>