feat(screen): add socials, contact page

app/page.tsx

@@ -3,6 +3,7 @@ import {
   CarouselContent,
   CarouselItem,
 } from "@/components/ui/carousel";
+import { ArrowRightIcon, Globe, Mail, Phone } from "lucide-react";
 
 import Image from "next/image";
 
@@ -99,15 +100,15 @@ 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-8 flex flex-col items-center">
+      <section className="min-h-screen space-y-12 flex flex-col items-center">
         <section className="flex flex-col space-y-4">
           <div className="flex gap-4 justify-between items-center">
-            <hr className="text-[#7B2E45]/50 w-1/2" />
+            <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/2" />
             <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="text-[#7B2E45]/50 w-1/2" />
+            <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-1/2" />
           </div>
           <div>
             <h1
@@ -144,7 +145,7 @@ export default function Home() {
           </div>
           <div className="flex items-center gap-2 ">
             <div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
-            <hr className="text-[#7B2E45]/50 w-32" />
+            <hr className="bg-[#7B2E45]/50 h-0.5 border-0 w-32" />
           </div>
         </section>
         <section className="">
@@ -262,7 +263,7 @@ export default function Home() {
           </span>{" "}
           in the community
         </p>
-        <hr className="text-[#7B2E45]/50 w-1/2" />
+        <hr className="bg-[#7B2E45]/50 border-0 h-0.5 w-1/2" />
         <h4 className="font-lato text-lg font-normal text-white/60 tracking-wider">
           OUR MISSION
         </h4>
@@ -361,6 +362,7 @@ export default function Home() {
           From campaign ads to documentary-style content, we produce visual
           narratives that captivate audiences and drive results.
         </p>
+        <hr className="bg-[#7B2E45]/20 border-0 h-0.5 w-1/2" />
       </section>
       <section className="min-h-screen px-10 space-y-8">
         <div className="aspect-square overflow-hidden">
@@ -527,7 +529,7 @@ export default function Home() {
             </h5>
 
             <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
-              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
+              <div className="w-2/3 bg-[#7B2E45] py-2 rounded-full"></div>
             </div>
           </div>
           <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
@@ -536,7 +538,7 @@ export default function Home() {
             <h5 className="font-lato text-[#D8DFE4] text-lg">Media Reach</h5>
 
             <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
-              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
+              <div className="w-11/12 bg-[#7B2E45] py-2 rounded-full"></div>
             </div>
           </div>
           <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
@@ -545,11 +547,87 @@ export default function Home() {
             <h5 className="font-lato text-[#D8DFE4] text-lg">Brand Recall</h5>
 
             <div className="w-full bg-[#7B2E45]/10 rounded-full overflow-hidden">
-              <div className="w-5/6 bg-[#7B2E45] py-2 rounded-full"></div>
+              <div className="w-3/5 bg-[#7B2E45] py-2 rounded-full"></div>
             </div>
           </div>
         </section>
       </section>
+      <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
+        </h2>
+        <h2 className="font-lato text-6xl text-white text-center">
+          We nurture narratives where they{" "}
+          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
+            matter most{" "}
+          </span>
+        </h2>
+        <p className="font-lato text-2xl text-white/80 text-center">
+          From traditional media to emerging platforms, we manage your presence
+          across the entire social ecosystem.
+        </p>
+        <section className="grid grid-cols-2 gap-4 w-full text-center">
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            Facebook
+          </h5>
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            Twitter
+          </h5>
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            Instagram
+          </h5>
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            LinkedIn
+          </h5>
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            Youtube
+          </h5>
+          <h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            Tiktok
+          </h5>
+        </section>
+        <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
+      </section>
+      <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
+        </h2>
+        <h2 className="font-lato text-6xl text-white text-center">
+          Ready to{" "}
+          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
+            Win?{" "}
+          </span>
+        </h2>
+        <p className="font-lato text-2xl text-white/80 text-center">
+          Whether you're running a political campaign, launching a brand, or
+          managing a crisis, Da Next Agency is your strategic partner for
+          success.
+        </p>
+        <section className="w-full space-y-6">
+          <h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            <Mail size={24} color="#7B2E45" />{" "}
+            <span>contact@danextagency.com</span>
+          </h5>
+          <h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            <Phone size={24} color="#7B2E45" /> <span>+880 123 456 7890</span>
+          </h5>
+          <h5 className="py-4 px-6 flex items-center justify-center gap-4 font-lato text-xl text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
+            <Globe size={24} color="#7B2E45" /> <span>danextagency.com</span>
+          </h5>
+          <button
+            className="w-full
+       px-8 py-4 rounded-xl
+      bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
+      hover:from-[#913651] hover:to-[#b34762]
+    "
+          >
+            <span className="text-white font-medium font-lato text-xl flex items-center justify-center gap-2">
+              Let's Work Together <ArrowRightIcon size={20} color="white" />
+            </span>
+          </button>
+        </section>
+        <hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
+      </section>
     </main>
   );
 }