From 6ad89a55ea8b02e7c7e538930da33586b97fae7d Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Sun, 7 Dec 2025 15:37:34 +0600
Subject: [PATCH] fix(resp): fix hero page responsiveness for large screens

---
 app/page.tsx | 107 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 78 insertions(+), 29 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 52b2f00..65359a0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -99,23 +99,24 @@ export default function Home() {
   ];
 
   return (
-    <main className="bg-radial-[at_50%_50%] from-[#1a0a0e]  to-[#0D0F11] pt-20">
-      <section className="min-h-screen space-y-12 flex flex-col items-center">
+    <main className="bg-radial-[at_50%_50%] from-[#31131b]  to-[#0D0F11] ">
+      {/*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">
-          <div className="flex gap-4 justify-between items-center">
-            <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/2" />
+          <div className="flex gap-4 justify-center items-center">
+            <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/4" />
             <div className="flex gap-2">
               <div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
               <div className="border-[#7B2E45] border h-3 w-3 rotate-45"></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>
             <h1
               className="
     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-clip-text text-transparent
+    bg-clip-text text-transparent lg:text-[128px] lg:leading-26
   "
             >
               Da Next
@@ -124,7 +125,7 @@ export default function Home() {
               className="
     font-inter text-[80px] font-black tracking-tight
     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
@@ -132,14 +133,14 @@ export default function Home() {
           </div>
         </section>
         <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">
-            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
+          <div className="flex flex-col lg:md:flex-row lg:md:gap-2 ">
+            <h3 className="text-[#D8DFE4] font-lato font-normal text-center text-[24px] lg:text-[32px]">
               Shaping Narratives.
             </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.
             </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.
             </h3>
           </div>
@@ -148,18 +149,56 @@ export default function Home() {
             <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-32" />
           </div>
         </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="">
           <div className="relative inline-block">
             <button
               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]
       hover:from-[#913651] hover:to-[#b34762]
     "
             >
               {/* diamonds */}
-              {/* <span className="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 -left-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">
                 Start Your Campaign —
@@ -167,18 +206,18 @@ export default function Home() {
             </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 -right-4 -top-4 w-6 h-6 border-t border-r border-[#7B2E45]" />
-            <span className="absolute -left-4 -bottom-4 w-6 h-6 border-b border-l border-[#7B2E45]" />
-            <span className="absolute -right-4 -bottom-4 w-6 h-6 border-b border-r 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-2 border-r-2 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-2 border-r-2 border-[#7B2E45]" />
           </div>
         </section>
         <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="w-3 h-16 bg-[#7B2E45]"></div>
-              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
-              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
+              <div className="w-2 h-16 bg-[#7B2E45]"></div>
+              <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
+              <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
             </div>
             <div className="flex flex-col ">
               <h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
@@ -187,11 +226,11 @@ export default function Home() {
               </h5>
             </div>
           </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="w-3 h-16 bg-[#7B2E45]"></div>
-              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
-              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
+              <div className="w-2 h-16 bg-[#7B2E45]"></div>
+              <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
+              <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
             </div>
             <div className="flex flex-col ">
               <h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
@@ -202,9 +241,9 @@ export default function Home() {
           </section>
           <section className="flex items-center gap-4">
             <div className="flex gap-1 px-2">
-              <div className="w-3 h-16 bg-[#7B2E45]"></div>
-              <div className="w-3 h-12 bg-[#7B2E45]/50"></div>
-              <div className="w-3 h-8 bg-[#7B2E45]/30"></div>
+              <div className="w-2 h-16 bg-[#7B2E45]"></div>
+              <div className="w-2 h-12 bg-[#7B2E45]/50"></div>
+              <div className="w-2 h-8 bg-[#7B2E45]/30"></div>
             </div>
             <div className="flex flex-col ">
               <h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
@@ -215,6 +254,7 @@ export default function Home() {
           </section>
         </section>
       </section>
+      {/*About*/}
       <section className="px-10 space-y-8">
         <div className="aspect-square overflow-hidden">
           <Image
@@ -247,6 +287,7 @@ export default function Home() {
           </span>
         </section>
       </section>
+      {/*Our Mission*/}
       <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">
           <Image
@@ -268,6 +309,7 @@ export default function Home() {
           OUR MISSION
         </h4>
       </section>
+      {/*Services*/}
       <section className="min-h-screen px-10 space-y-4 ">
         <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
           WHAT WE DO
@@ -298,6 +340,7 @@ export default function Home() {
           </div>
         </section>
       </section>
+      {/*Approach*/}
       <section className="min-h-screen px-10 space-y-4">
         <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
           OUR APPROACH
@@ -347,6 +390,7 @@ export default function Home() {
           </div>
         </section>
       </section>
+      {/*Media Production*/}
       <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">
           MEDIA PRODUCTION
@@ -364,6 +408,7 @@ export default function Home() {
         </p>
         <hr className="bg-[#7B2E45]/20 border-0 h-0.5 w-1/2" />
       </section>
+      {/*Insights */}
       <section className="min-h-screen px-10 space-y-8">
         <div className="aspect-square overflow-hidden">
           <Image
@@ -399,6 +444,7 @@ export default function Home() {
           </div>
         </section>
       </section>
+      {/*Results*/}
       <section className="min-h-screen px-10 py-20 space-y-4">
         <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
           PROVEN RESULTS
@@ -499,6 +545,7 @@ export default function Home() {
           </div>
         </section>
       </section>
+      {/*Impact Metrics*/}
       <section className="py-20 min-h-screen px-10 space-y-4">
         <h2 className="font-lato text-xl text-[#7B2E45] tracking-wider">
           IMPACT METRICS
@@ -552,6 +599,7 @@ export default function Home() {
           </div>
         </section>
       </section>
+      {/*Socials*/}
       <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">
           THE CONNECTED WORLD
@@ -588,6 +636,7 @@ export default function Home() {
         </section>
         <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
       </section>
+      {/*Contact*/}
       <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">
           LET'S CONNECT