feat(screen): add data-driven, results, metrics pages

app/page.tsx

@@ -362,6 +362,194 @@ export default function Home() {
           narratives that captivate audiences and drive results.
         </p>
       </section>
+      <section className="min-h-screen px-10 space-y-8">
+        <div className="aspect-square overflow-hidden">
+          <Image
+            src={"/images/data-driven-insights.jpg"}
+            width={542}
+            height={500}
+            alt="about"
+            className="object-cover object-center w-full h-full"
+          />
+        </div>
+        <section className="space-y-6">
+          <h2 className="font-lato text-xl text-[#7B2E45]">
+            INTELLIGENCE DRIVEN
+          </h2>
+          <h2 className="font-lato text-6xl text-white">
+            Data-Driven <span className="text-[#7B2E45]">Insights</span>
+          </h2>
+          <p className="font-lato font-normal text-white text-xl ">
+            We leverage advanced research methodologies and analytics to inform
+            strategy, measure impact, and optimize campaigns in real-time.
+          </p>
+          <div className="space-y-4">
+            <div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+              <h2 className="font-lato text-[#7B2E45] text-4xl">10K+</h2>
+              <p className="font-lato text-white/70 text-lg">
+                Survey Responses
+              </p>
+            </div>
+            <div className="p-5 rounded-2xl w-full space-y-3 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+              <h2 className="font-lato text-[#7B2E45] text-4xl">95%</h2>
+              <p className="font-lato text-white/70 text-lg">Data Accuracy</p>
+            </div>
+          </div>
+        </section>
+      </section>
+      <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
+        </h2>
+        <h2 className="font-lato text-6xl text-white">
+          Success{" "}
+          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
+            Stories
+          </span>
+        </h2>
+        <section className="space-y-8">
+          <div className="bg-black p-8 space-y-4">
+            <div className="space-y-2">
+              <h2 className="font-lato text-2xl text-white">
+                Honorable MP Rahman
+              </h2>
+              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
+                Parliamentary Candidate
+              </h2>
+              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
+                Won by 45% margin
+              </h2>
+            </div>
+            <div className="border-l-2 border-[#7B2E454D] pl-4">
+              <p className="font-lato text-lg text-[#D8DFE4E5]">
+                "Da Next Agency transformed my campaign narrative and connected
+                me authentically with voters."
+              </p>
+            </div>
+            <div className="space-y-4">
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">+180%</h2>
+                <p className="font-lato text-white/70 text-md">Engagement</p>
+              </div>
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">2.5M</h2>
+                <p className="font-lato text-white/70 text-md">Reach</p>
+              </div>
+            </div>
+          </div>
+          <div className="bg-black p-8 space-y-4">
+            <div className="space-y-2">
+              <h2 className="font-lato text-2xl text-white">
+                TechCorp Bangladesh
+              </h2>
+              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
+                Technology Company
+              </h2>
+              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
+                Brand recognition +300%
+              </h2>
+            </div>
+            <div className="border-l-2 border-[#7B2E454D] pl-4">
+              <p className="font-lato text-lg text-[#D8DFE4E5]">
+                "Their strategic approach to PR helped us become a household
+                name in just six months."
+              </p>
+            </div>
+            <div className="space-y-4">
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">+220%</h2>
+                <p className="font-lato text-white/70 text-md">Engagement</p>
+              </div>
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">5.M</h2>
+                <p className="font-lato text-white/70 text-md">Reach</p>
+              </div>
+            </div>
+          </div>
+          <div className="bg-black p-8 space-y-4">
+            <div className="space-y-2">
+              <h2 className="font-lato text-2xl text-white">
+                Green Future Initiative
+              </h2>
+              <h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
+                Environmental NGO
+              </h2>
+              <h2 className="font-lato text-md text-[#D8DFE499] tracking-wide">
+                Policy change achieved
+              </h2>
+            </div>
+            <div className="border-l-2 border-[#7B2E454D] pl-4">
+              <p className="font-lato text-lg text-[#D8DFE4E5]">
+                "The campaign they crafted mobilized thousands and influenced
+                national environmental policy."
+              </p>
+            </div>
+            <div className="space-y-4">
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">+350%</h2>
+                <p className="font-lato text-white/70 text-md">Engagement</p>
+              </div>
+              <div className="p-5 rounded-2xl w-full space-y-2 border border-[#7B2E45]/20 bg-[#7B2E45]/5">
+                <h2 className="font-lato text-[#7B2E45] text-2xl">8.1M</h2>
+                <p className="font-lato text-white/70 text-md">Reach</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </section>
+      <section className="py-20 min-h-screen px-10 space-y-4">
+        <h2 className="font-lato text-xl text-[#7B2E45] tracking-wider">
+          IMPACT METRICS
+        </h2>
+        <h2 className="font-lato text-6xl text-white">
+          Measurable{" "}
+          <span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
+            Results
+          </span>
+        </h2>
+        <section className="space-y-8">
+          <div className="px-10 py-14 bg-[#7B2E45]/20 rounded-2xl backdrop:blur-3xl  shadow-xl flex flex-col items-center space-y-5">
+            <h2 className="font-lato text-7xl text-[#7B2E45]">85%</h2>
+
+            <h5 className="font-lato text-[#D8DFE4] text-lg">
+              Public Engagement
+            </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>
+          </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">
+            <h2 className="font-lato text-7xl text-[#7B2E45]">70%</h2>
+
+            <h5 className="font-lato text-[#D8DFE4] text-lg">
+              Positive Sentiment
+            </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>
+          </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">
+            <h2 className="font-lato text-7xl text-[#7B2E45]">90%</h2>
+
+            <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>
+          </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">
+            <h2 className="font-lato text-7xl text-[#7B2E45]">60%</h2>
+
+            <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>
+          </div>
+        </section>
+      </section>
     </main>
   );
 }