feat(screen): add data-driven, results, metrics pages
This commit is contained in:
shafin-r
188
app/page.tsx
188
app/page.tsx
@ -362,6 +362,194 @@ export default function Home() {
|
|||||||
narratives that captivate audiences and drive results.
|
narratives that captivate audiences and drive results.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/images/data-driven-insights.jpg
Normal file
BIN
public/images/data-driven-insights.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Reference in New Issue
Block a user