shafin808s/da-next-agency
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(resp): fix hero page responsiveness for large screens

Browse Source
This commit is contained in:
shafin-r
2025-12-07 15:37:34 +06:00
parent ff337823d4
commit 6ad89a55ea
1 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/page.tsx
View File

@ -99,23 +99,24 @@ export default function Home() {
]; ];
return ( return (
<main className="bg-radial-[at_50%_50%] from-[#1a0a0e] to-[#0D0F11] pt-20"> <main className="bg-radial-[at_50%_50%] from-[#31131b] to-[#0D0F11] ">
<section className="min-h-screen space-y-12 flex flex-col items-center"> {/*Hero */}
<section className="relative min-h-screen space-y-12 lg:space-y-20 flex flex-col items-center lg:justify-center pt-14 lg:pt-0">
<section className="flex flex-col space-y-4"> <section className="flex flex-col space-y-4">
<div className="flex gap-4 justify-between items-center"> <div className="flex gap-4 justify-center items-center">
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/2" /> <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
<div className="flex gap-2"> <div className="flex gap-2">
<div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div> <div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
<div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div> <div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div>
</div> </div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/2" /> <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
</div> </div>
<div> <div>
<h1 <h1
className=" className="
font-inter text-[80px] leading-20 font-black tracking-tight font-inter text-[80px] leading-20 font-black tracking-tight
bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)] bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)]
bg-clip-text text-transparent bg-clip-text text-transparent lg:text-[128px] lg:leading-26
" "
> >
Da Next Da Next
@ -124,7 +125,7 @@ export default function Home() {
className=" className="
font-inter text-[80px] font-black tracking-tight font-inter text-[80px] font-black tracking-tight
bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)] bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)]
bg-clip-text text-transparent pb-2 leading-20 bg-clip-text text-transparent pb-2 leading-20 lg:text-[128px] lg:leading-34
" "
> >
Agency Agency
@ -133,13 +134,13 @@ export default function Home() {
</section> </section>
<section className="flex flex-col items-center h-fit space-y-6"> <section className="flex flex-col items-center h-fit space-y-6">
<div className="flex flex-col lg:md:flex-row lg:md:gap-2 "> <div className="flex flex-col lg:md:flex-row lg:md:gap-2 ">
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl"> <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
Shaping Narratives. Shaping Narratives.
</h3> </h3>
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl"> <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
Building Leaders. Building Leaders.
</h3> </h3>
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl"> <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
Winning Campaigns. Winning Campaigns.
</h3> </h3>
</div> </div>
@ -148,18 +149,56 @@ export default function Home() {
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-32" /> <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-32" />
</div> </div>
</section> </section>
{/*left decoration*/}
<>
<div className="lg:flex hidden absolute left-6 top-86 items-center gap-2 ">
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-20" />
</div>
<div className="absolute left-6 top-92 lg:flex hidden items-center gap-2 ">
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-16" />
</div>
<div className="absolute left-6 top-98 lg:flex hidden items-center gap-2 ">
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-12" />
</div>
<div className="absolute left-6 top-104 lg:flex hidden items-center gap-2 ">
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-8" />
</div>
<div className="absolute left-6 top-110 lg:flex hidden items-center gap-2 ">
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
<hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-4" />
</div>
</>
{/*right decoration*/}
<>
<div className="lg:flex hidden absolute right-6 top-86 items-center gap-2 ">
<h5 className="font-lato text-[#7b2e45]">&lt;system&gt; </h5>
</div>
<div className="absolute right-6 top-92 lg:flex hidden items-center gap-2 ">
<h5 className="font-lato text-[#7b2e45]/50">status:active</h5>
</div>
<div className="absolute right-6 top-98 lg:flex hidden items-center gap-2 ">
<h5 className="font-lato text-[#7b2e45]/50">mode:strategic </h5>
</div>
<div className="absolute right-6 top-104 lg:flex hidden items-center gap-2 ">
<h5 className="font-lato text-[#7b2e45]">&lt;/system&gt; </h5>
</div>
</>
<section className=""> <section className="">
<div className="relative inline-block"> <div className="relative inline-block">
<button <button
className=" className="
relative px-8 py-3 rounded-xl relative px-8 py-3 lg:px-20 lg:py-5 rounded-xl
bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
hover:from-[#913651] hover:to-[#b34762] hover:from-[#913651] hover:to-[#b34762]
" "
> >
{/* diamonds */} {/* diamonds */}
{/* <span className="absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span> <span className="lg:block hidden absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
<span className="absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span> */} <span className="lg:block hidden absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
<span className="text-white font-medium font-lato text-xl"> <span className="text-white font-medium font-lato text-xl">
Start Your Campaign — Start Your Campaign —
@ -167,18 +206,18 @@ export default function Home() {
</button> </button>
{/* corner borders OUTSIDE the clipped button */} {/* corner borders OUTSIDE the clipped button */}
<span className="absolute -left-4 -top-4 w-6 h-6 border-t border-l border-[#7B2E45]" /> <span className="absolute -left-4 -top-4 w-6 h-6 border-t-2 border-l-2 border-[#7B2E45]" />
<span className="absolute -right-4 -top-4 w-6 h-6 border-t border-r border-[#7B2E45]" /> <span className="absolute -right-4 -top-4 w-6 h-6 border-t-2 border-r-2 border-[#7B2E45]" />
<span className="absolute -left-4 -bottom-4 w-6 h-6 border-b border-l border-[#7B2E45]" /> <span className="absolute -left-4 -bottom-4 w-6 h-6 border-b-2 border-l-2 border-[#7B2E45]" />
<span className="absolute -right-4 -bottom-4 w-6 h-6 border-b border-r border-[#7B2E45]" /> <span className="absolute -right-4 -bottom-4 w-6 h-6 border-b-2 border-r-2 border-[#7B2E45]" />
</div> </div>
</section> </section>
<section className="flex flex-col lg:md:flex-row gap-10"> <section className="flex flex-col lg:md:flex-row gap-10">
<section className="flex items-center gap-4"> <section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
<div className="flex gap-1 px-2"> <div className="flex gap-1 px-2">
<div className="w-3 h-16 bg-[#7B2E45]"></div> <div className="w-2 h-16 bg-[#7B2E45]"></div>
<div className="w-3 h-12 bg-[#7B2E45]/50"></div> <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
<div className="w-3 h-8 bg-[#7B2E45]/30"></div> <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
</div> </div>
<div className="flex flex-col "> <div className="flex flex-col ">
<h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4> <h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
@ -187,11 +226,11 @@ export default function Home() {
</h5> </h5>
</div> </div>
</section> </section>
<section className="flex items-center gap-4"> <section className="flex items-center gap-4 border-r border-[#7B2E4533] pr-10">
<div className="flex gap-1 px-2"> <div className="flex gap-1 px-2">
<div className="w-3 h-16 bg-[#7B2E45]"></div> <div className="w-2 h-16 bg-[#7B2E45]"></div>
<div className="w-3 h-12 bg-[#7B2E45]/50"></div> <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
<div className="w-3 h-8 bg-[#7B2E45]/30"></div> <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
</div> </div>
<div className="flex flex-col "> <div className="flex flex-col ">
<h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4> <h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
@ -202,9 +241,9 @@ export default function Home() {
</section> </section>
<section className="flex items-center gap-4"> <section className="flex items-center gap-4">
<div className="flex gap-1 px-2"> <div className="flex gap-1 px-2">
<div className="w-3 h-16 bg-[#7B2E45]"></div> <div className="w-2 h-16 bg-[#7B2E45]"></div>
<div className="w-3 h-12 bg-[#7B2E45]/50"></div> <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
<div className="w-3 h-8 bg-[#7B2E45]/30"></div> <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
</div> </div>
<div className="flex flex-col "> <div className="flex flex-col ">
<h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4> <h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
@ -215,6 +254,7 @@ export default function Home() {
</section> </section>
</section> </section>
</section> </section>
{/*About*/}
<section className="px-10 space-y-8"> <section className="px-10 space-y-8">
<div className="aspect-square overflow-hidden"> <div className="aspect-square overflow-hidden">
<Image <Image
@ -247,6 +287,7 @@ export default function Home() {
</span> </span>
</section> </section>
</section> </section>
{/*Our Mission*/}
<section className="min-h-screen px-5 flex flex-col items-center justify-center space-y-6"> <section className="min-h-screen px-5 flex flex-col items-center justify-center space-y-6">
<div className="aspect-square overflow-hidden w-.20 h-20"> <div className="aspect-square overflow-hidden w-.20 h-20">
<Image <Image
@ -268,6 +309,7 @@ export default function Home() {
OUR MISSION OUR MISSION
</h4> </h4>
</section> </section>
{/*Services*/}
<section className="min-h-screen px-10 space-y-4 "> <section className="min-h-screen px-10 space-y-4 ">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
WHAT WE DO WHAT WE DO
@ -298,6 +340,7 @@ export default function Home() {
</div> </div>
</section> </section>
</section> </section>
{/*Approach*/}
<section className="min-h-screen px-10 space-y-4"> <section className="min-h-screen px-10 space-y-4">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
OUR APPROACH OUR APPROACH
@ -347,6 +390,7 @@ export default function Home() {
</div> </div>
</section> </section>
</section> </section>
{/*Media Production*/}
<section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8"> <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
MEDIA PRODUCTION MEDIA PRODUCTION
@ -364,6 +408,7 @@ export default function Home() {
</p> </p>
<hr className="bg-[#7B2E45]/20 border-0 h-0.5 w-1/2" /> <hr className="bg-[#7B2E45]/20 border-0 h-0.5 w-1/2" />
</section> </section>
{/*Insights */}
<section className="min-h-screen px-10 space-y-8"> <section className="min-h-screen px-10 space-y-8">
<div className="aspect-square overflow-hidden"> <div className="aspect-square overflow-hidden">
<Image <Image
@ -399,6 +444,7 @@ export default function Home() {
</div> </div>
</section> </section>
</section> </section>
{/*Results*/}
<section className="min-h-screen px-10 py-20 space-y-4"> <section className="min-h-screen px-10 py-20 space-y-4">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
PROVEN RESULTS PROVEN RESULTS
@ -499,6 +545,7 @@ export default function Home() {
</div> </div>
</section> </section>
</section> </section>
{/*Impact Metrics*/}
<section className="py-20 min-h-screen px-10 space-y-4"> <section className="py-20 min-h-screen px-10 space-y-4">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-wider"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-wider">
IMPACT METRICS IMPACT METRICS
@ -552,6 +599,7 @@ export default function Home() {
</div> </div>
</section> </section>
</section> </section>
{/*Socials*/}
<section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8"> <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
THE CONNECTED WORLD THE CONNECTED WORLD
@ -588,6 +636,7 @@ export default function Home() {
</section> </section>
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" /> <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
</section> </section>
{/*Contact*/}
<section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8"> <section className="min-h-screen px-10 flex flex-col items-center justify-center space-y-8">
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center"> <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em] text-center">
LET'S CONNECT LET'S CONNECT