feat(screen): add about, mission page

app/page.tsx

@@ -1,6 +1,9 @@
+import CardCarousel from "@/components/Carousel";
+import Image from "next/image";
+
 export default function Home() {
   return (
-    <main className="min-h-screen bg-radial-[at_50%_50%] from-[#1a0a0e]  to-[#0D0F11] flex flex-col space-y-12 items-center pt-14">
+    <main className="min-h-screen bg-radial-[at_50%_50%] from-[#1a0a0e]  to-[#0D0F11] flex flex-col space-y-12 items-center pt-20">
       <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" />
@@ -114,6 +117,71 @@ export default function Home() {
           </div>
         </section>
       </section>
+      <section className="px-10 space-y-8">
+        <div className="aspect-square overflow-hidden">
+          <Image
+            src={"/images/about.jpg"}
+            width={542}
+            height={500}
+            alt="about"
+            className="object-cover object-center w-full h-full"
+          />
+        </div>
+        <section className="space-y-4">
+          <h2 className="font-lato text-xl text-[#7B2E45]">WHO WE ARE</h2>
+          <h2 className="font-lato text-6xl text-white">
+            Architects <br /> of{" "}
+            <span className="text-[#7B2E45]">Influence</span>
+          </h2>
+          <p className="font-lato text-white text-xl">
+            Da Next Agency is a premier public relations and strategic
+            communications firm based in Bangladesh. We specialize in crafting
+            compelling narratives, managing reputations, and driving impactful
+            campaigns for leaders, organizations, and brands.
+          </p>
+          <p className="font-lato text-white text-xl">
+            From political campaigns to corporate reputation management, we
+            offer a full spectrum of services designed to elevate your public
+            image and achieve your strategic objectives.
+          </p>
+          <span className="font-lato text-xl text-[#7B2E45]">
+            We don't just tell stories. We create movements
+          </span>
+        </section>
+      </section>
+      <section className="min-h-screen flex flex-col items-center justify-center space-y-6">
+        <div className="aspect-square overflow-hidden w-.20 h-20">
+          <Image
+            src={"/icons/quotation.png"}
+            width={384}
+            height={384}
+            alt="quotation-mark"
+          />
+        </div>
+        <p className="font-lato text-2xl text-white text-center">
+          To nurture narratives and shape public perception,{" "}
+          <span className="text-[#7B2E45]">
+            creating a lasting positive image
+          </span>{" "}
+          in the community
+        </p>
+        <hr className="text-[#7B2E45]/50 w-1/2" />
+        <h4 className="font-lato text-lg font-normal text-white/60 tracking-wider">
+          OUR MISSION
+        </h4>
+      </section>
+      <section className="px-10">
+        <h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
+          WHAT WE DO
+        </h2>
+        <h2 className="font-lato text-6xl text-white">
+          Services That{" "}
+          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
+            Transform
+          </span>
+        </h2>
+        <section></section>
+      </section>
     </main>
   );
 }

components/Carousel.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+export default function CardCarousel() {
+  const cards = [
+    { id: 1, title: "Card 1" },
+    { id: 2, title: "Card 2" },
+    { id: 3, title: "Card 3" },
+    { id: 4, title: "Card 4" },
+  ];
+
+  return (
+    <div className="w-full overflow-x-scroll flex gap-4 snap-x snap-mandatory scroll-smooth no-scrollbar px-4 py-6">
+      {cards.map((card) => (
+        <div
+          key={card.id}
+          className="snap-center min-w-[250px] h-[180px] rounded-xl bg-gray-800 text-white flex items-center justify-center text-xl font-semibold"
+        >
+          {card.title}
+        </div>
+      ))}
+    </div>
+  );
+}