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

feat(ui): Enhance homepage responsiveness and layout

Browse Source 
This commit introduces several UI improvements to enhance the responsive design and visual appeal of the homepage and main layout.

Key changes include:
- Adjusted the main header to be centered on mobile devices for better alignment.
- Refined the hero section on the homepage with responsive text sizes and improved spacing.
- Modified the "dynamic island" image container to adapt its size and position across different screen sizes.
- Improved typography and layout in the "democratizing tenders" section for better readability.
- Reorganized the contact page into a Next.js route group for better project structure.
This commit is contained in:
AmirReza Jamali
2025-10-22 13:47:43 +03:30
parent 1185aea022
commit 349f1137f7
7 changed files with 45 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/page.tsx
+20 -13
View File
@@ -48,14 +48,18 @@ export default function Home() {
<>
<section className="block md:flex justify-around items-center">
<div className="flex gap-4 w-full md:w-1/2 font-bold text-4xl text-center flex-col bg-gray-800/10 p-10 rounded-[40px] h-fit mb-16">
<h2>
<span>$</span>
<span>12,345,678</span>
</h2>
<h2 className="capitalize">total tender amount you missed today</h2>
<div className="flex flex-col gap-8">
<h2>
<span>$</span>
<span>12,345,678</span>
</h2>
<h2 className="capitalize text-2xl font-bold md:text-3xl">
total tender amount you missed today
</h2>
</div>
<ApexChart />
</div>
<div className="mr-8 -z-20 relative flex justify-center h-[750px]">
<div className="m-auto w-xs md:m-0 md:w-auto -z-20 relative flex justify-center h-[650px] md:h-[750px]">
<Image
src={"/dynamic-island.svg"}
alt="dynamic island"
@@ -75,17 +79,18 @@ 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 ">
<h1 className="capitalize font-extrabold text-5xl mb-6">
democratizing the world of tenders
</h1>
<p className="text-xs">
<p className="text-[16px] text-[#dadada]">
Opplens is your dedicated AI-powered partner, leveling the playing
field so you can win the public and private contracts you deserve.
<br />
Compete on your true strengths.
</p>
</hgroup>
<div className="flex justify-end">
<button className="bg-(--primary) rounded-4xl py-4 px-6">
<button className="w-full md:w-fit capitalize bg-(--primary) rounded-4xl py-4 px-6">
Get early access
</button>
</div>
@@ -176,12 +181,14 @@ export default function Home() {
</li>
</ul>
</section>
<section className="flex flex-col mt-36 gap-10 md:w-3/4 m-auto">
<section className="flex flex-col mt-36 gap-10 px-2 md:w-3/4 m-auto">
<div>
<h2 className="font-bold text-4xl">The Opplens Advantage</h2>
<h2 className="font-bold text-2xl md:text-4xl">
The Opplens Advantage
</h2>
</div>
<section className="flex flex-col gap-10 md:flex-row">
<div className="flex flex-col gap-7 md:flex-row bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
<div className="flex flex-col gap-7 bg-[#FFF7EB] p-10 rounded-3xl md:pb-20">
<Image
src={"people.svg"}
width={48}
@@ -197,7 +204,7 @@ export default function Home() {
</p>
</div>
</div>
<div className="flex flex-col gap-7 md:flex-row bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
<div className="flex flex-col gap-7 bg-[#E5EFFF] p-10 rounded-3xl md:pb-20">
<Image
src={"shield-tick.svg"}
width={48}