fix(resp): fix responsive for large screens
This commit is contained in:
332
app/page.tsx
332
app/page.tsx
@ -13,26 +13,33 @@ export default function Home() {
|
||||
id: 0,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
||||
<div className="lg:w-1/2">
|
||||
<Image
|
||||
src={"/images/campaign-strategy.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
width={2464}
|
||||
height={1672}
|
||||
alt="campaign-strategy"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
||||
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
01
|
||||
</p>
|
||||
<h2 className="text-4xl text-white font-lato">
|
||||
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
||||
Campaign Strategy
|
||||
</h2>
|
||||
<p className="text-lg font-lato text-white/60">
|
||||
<p className="text-lg lg:text-2xl font-lato text-white/60">
|
||||
Comprehensive planning from research to execution, crafted to
|
||||
win hearts and minds.
|
||||
</p>
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
||||
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
||||
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
||||
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
||||
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
@ -42,26 +49,33 @@ export default function Home() {
|
||||
id: 1,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
||||
<div className="lg:w-1/2">
|
||||
<Image
|
||||
src={"/images/media-production.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
width={2464}
|
||||
height={1672}
|
||||
alt="media-production"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
||||
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
02
|
||||
</p>
|
||||
<h2 className="text-4xl text-white font-lato">
|
||||
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
||||
Media Production
|
||||
</h2>
|
||||
<p className="text-lg font-lato text-white/60">
|
||||
Cinematic storytelling through video, photography, and
|
||||
multimedia content that captivates.
|
||||
</p>
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
||||
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
||||
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
||||
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
||||
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
@ -71,26 +85,33 @@ export default function Home() {
|
||||
id: 2,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<section className="lg:flex lg:flex-row-reverse lg:justify-between space-y-6 lg:items-center">
|
||||
<div className="lg:w-1/2">
|
||||
<Image
|
||||
src={"/images/research.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
width={2464}
|
||||
height={1672}
|
||||
alt="research"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<p className="px-6 py-2 text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
<div className="space-y-4 lg:w-1/3 lg:space-y-12">
|
||||
<p className="px-6 py-2 lg:px-9 lg:py-4 lg:text-xl text-[#7B2E45] font-lato border-2 border-[#7B2E45] rounded-full w-fit">
|
||||
03
|
||||
</p>
|
||||
<h2 className="text-4xl text-white font-lato">
|
||||
<h2 className="text-4xl lg:text-7xl text-white font-lato">
|
||||
Research & Analytics
|
||||
</h2>
|
||||
<p className="text-lg font-lato text-white/60">
|
||||
Data-driven insights that inform every decision and optimize
|
||||
every outcome
|
||||
</p>
|
||||
<div className="flex gap-4 w-full">
|
||||
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1 lg:w-[60px]" />
|
||||
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1 lg:w-[50px]" />
|
||||
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1 lg:w-[40px]" />
|
||||
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1 lg:w-[30px]" />
|
||||
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1 lg:w-[20px]" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
@ -255,8 +276,8 @@ export default function Home() {
|
||||
</section>
|
||||
</section>
|
||||
{/*About*/}
|
||||
<section className="px-10 space-y-8">
|
||||
<div className="aspect-square overflow-hidden">
|
||||
<section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
|
||||
<div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
|
||||
<Image
|
||||
src={"/images/about.jpg"}
|
||||
width={542}
|
||||
@ -265,30 +286,32 @@ export default function Home() {
|
||||
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">
|
||||
<section className="space-y-4 lg:w-1/2 lg:space-y-8">
|
||||
<h2 className="font-lato text-xl lg:text-2xl text-[#7B2E45]">
|
||||
WHO WE ARE
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-8xl text-white">
|
||||
Architects <br /> of{" "}
|
||||
<span className="text-[#7B2E45]">Influence</span>
|
||||
</h2>
|
||||
<p className="font-lato text-white text-xl">
|
||||
<p className="font-lato text-white text-xl lg:text-2xl">
|
||||
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">
|
||||
<p className="font-lato text-white text-xl lg:text-2xl">
|
||||
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 className="font-lato text-xl text-[#7B2E45] lg:text-2xl">
|
||||
We don't just tell stories. We create movements.
|
||||
</span>
|
||||
</section>
|
||||
</section>
|
||||
{/*Our Mission*/}
|
||||
<section className="min-h-screen px-5 flex flex-col items-center justify-center space-y-6">
|
||||
<section className="min-h-screen px-5 lg:px-87 flex flex-col items-center justify-center space-y-6 lg:space-y-12">
|
||||
<div className="aspect-square overflow-hidden w-.20 h-20">
|
||||
<Image
|
||||
src={"/icons/quotation.png"}
|
||||
@ -297,30 +320,30 @@ export default function Home() {
|
||||
alt="quotation-mark"
|
||||
/>
|
||||
</div>
|
||||
<p className="font-lato text-2xl text-white text-center">
|
||||
To nurture narratives and shape public perception,{" "}
|
||||
<p className="font-lato text-2xl lg:leading-15 lg:text-5xl text-white text-center">
|
||||
<span>To nurture narratives and shape public perception, </span>
|
||||
<span className="text-[#7B2E45]">
|
||||
creating a lasting positive image
|
||||
</span>{" "}
|
||||
in the community
|
||||
</p>
|
||||
<hr className="bg-[#7B2E45]/50 border-0 h-0.5 w-1/2" />
|
||||
<hr className="bg-[#7B2E45]/50 border-0 h-0.5 w-1/5" />
|
||||
<h4 className="font-lato text-lg font-normal text-white/60 tracking-wider">
|
||||
OUR MISSION
|
||||
</h4>
|
||||
</section>
|
||||
{/*Services*/}
|
||||
<section className="min-h-screen px-10 space-y-4 ">
|
||||
<section className="min-h-screen px-10 lg:px-32 space-y-4">
|
||||
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
|
||||
WHAT WE DO
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl text-white">
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white tracking-tighter">
|
||||
Services That{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Transform
|
||||
</span>
|
||||
</h2>
|
||||
<h5 className="font-lato text-white/50 text-lg">
|
||||
<h5 className="font-lato text-white/50 lg:text-[20px] text-lg">
|
||||
Strategic excellence across every dimension of modern PR
|
||||
</h5>
|
||||
<section className="flex flex-col items-start space-y-7">
|
||||
@ -331,57 +354,52 @@ export default function Home() {
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
<div className="flex gap-4 w-5/6">
|
||||
<div className="bg-[#7B2E45]/80 rounded-full w-1/4 h-1" />
|
||||
<div className="bg-[#7B2E45]/65 rounded-full w-1/5 h-1" />
|
||||
<div className="bg-[#7B2E45]/50 rounded-full w-1/6 h-1" />
|
||||
<div className="bg-[#7B2E45]/35 rounded-full w-1/7 h-1" />
|
||||
<div className="bg-[#7B2E45]/20 rounded-full w-1/8 h-1" />
|
||||
</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
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl text-white">
|
||||
Strategic{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Content
|
||||
</span>
|
||||
</h2>
|
||||
<section className="space-y-8">
|
||||
<div className="bg-black p-8 space-y-2">
|
||||
<section className="min-h-screen px-10 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
||||
<section className="lg:space-y-10">
|
||||
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
|
||||
OUR APPROACH
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
||||
Strategic{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Content
|
||||
</span>
|
||||
</h2>
|
||||
</section>
|
||||
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
||||
<div className="bg-black p-8 lg:pb-14 space-y-3 rounded-2xl lg:w-1/3">
|
||||
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
||||
PROTECT YOUR REPUTATION
|
||||
</h2>
|
||||
<h2 className="font-lato text-2xl text-white">Crisis Management</h2>
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
||||
<li>24/7 Response Team</li>
|
||||
<li>Media Relations</li>
|
||||
<li>Damage Control</li>
|
||||
<li>Recovery Strategy</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-black p-8 space-y-2">
|
||||
<div className="bg-black p-8 lg:pb-14 space-y-2 rounded-2xl lg:w-1/3">
|
||||
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
||||
DEFINE YOUR IDENTITY
|
||||
</h2>
|
||||
<h2 className="font-lato text-2xl text-white">Brand Positioning</h2>
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
||||
<li>Market Research</li>
|
||||
<li>Competitive Analysis</li>
|
||||
<li>Messaging Framework</li>
|
||||
<li>Brand Guidelines</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-black p-8 space-y-2">
|
||||
<div className="bg-black p-8 lg:pb-14 space-y-2 rounded-2xl lg:w-1/3">
|
||||
<h2 className="font-lato text-md text-[#7B2E45] tracking-wide">
|
||||
ENGAGE YOUR AUDIENCE
|
||||
</h2>
|
||||
<h2 className="font-lato text-2xl text-white">Digital Campaigns</h2>
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3">
|
||||
<ul className="font-lato text-white/60 list-disc pl-4 space-y-3 lg:space-y-6">
|
||||
<li>Social Media Strategy</li>
|
||||
<li>Content Calendar</li>
|
||||
<li>Influencer Partnerships</li>
|
||||
@ -391,26 +409,26 @@ export default function Home() {
|
||||
</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">
|
||||
<section className="max-h-fit px-10 py-40 lg:pb-40 lg:pt-0 flex flex-col items-center justify-center space-y-8 ">
|
||||
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.3em] text-center">
|
||||
MEDIA PRODUCTION
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl text-white text-center">
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center">
|
||||
Visual{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Storytelling{" "}
|
||||
</span>
|
||||
That Moves
|
||||
</h2>
|
||||
<p className="font-lato text-2xl text-white/80 text-center">
|
||||
<p className="font-lato text-2xl lg:text-[20px] text-white/80 text-center lg:w-1/3">
|
||||
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" />
|
||||
<hr className="bg-[#7B2E45]/20 border-0 h-0.5 lg:w-1/8 w-1/2" />
|
||||
</section>
|
||||
{/*Insights */}
|
||||
<section className="min-h-screen px-10 space-y-8">
|
||||
<div className="aspect-square overflow-hidden">
|
||||
<section className="px-10 lg:px-60 space-y-8 lg:flex lg:flex-row-reverse lg:items-center lg:gap-4">
|
||||
<div className="aspect-square overflow-hidden rounded-2xl lg:w-1/2">
|
||||
<Image
|
||||
src={"/images/data-driven-insights.jpg"}
|
||||
width={542}
|
||||
@ -419,18 +437,18 @@ export default function Home() {
|
||||
className="object-cover object-center w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
<section className="space-y-6">
|
||||
<h2 className="font-lato text-xl text-[#7B2E45]">
|
||||
<section className="space-y-4 lg:w-1/2 lg:space-y-8">
|
||||
<h2 className="font-lato text-xl lg:text-2xl text-[#7B2E45]">
|
||||
INTELLIGENCE DRIVEN
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl text-white">
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
||||
Data-Driven <span className="text-[#7B2E45]">Insights</span>
|
||||
</h2>
|
||||
<p className="font-lato font-normal text-white text-xl ">
|
||||
<p className="font-lato text-white text-xl lg:text-2xl">
|
||||
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="flex flex-col lg:flex-row lg:justify-between gap-6">
|
||||
<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">
|
||||
@ -445,18 +463,20 @@ export default function Home() {
|
||||
</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
|
||||
</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">
|
||||
<section className="min-h-screen px-10 pt-20 lg:pt-0 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
||||
<section className="lg:space-y-10">
|
||||
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em] ">
|
||||
PROVEN RESULTS
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white ">
|
||||
Success{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Stories
|
||||
</span>
|
||||
</h2>
|
||||
</section>
|
||||
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
||||
<div className="bg-black p-8 space-y-4 rounded-2xl">
|
||||
<div className="space-y-2">
|
||||
<h2 className="font-lato text-2xl text-white">
|
||||
Honorable MP Rahman
|
||||
@ -468,13 +488,13 @@ export default function Home() {
|
||||
Won by 45% margin
|
||||
</h2>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4">
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-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="flex flex-col lg:flex-row gap-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>
|
||||
@ -485,7 +505,7 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-black p-8 space-y-4">
|
||||
<div className="bg-black p-8 space-y-4 rounded-2xl">
|
||||
<div className="space-y-2">
|
||||
<h2 className="font-lato text-2xl text-white">
|
||||
TechCorp Bangladesh
|
||||
@ -497,13 +517,13 @@ export default function Home() {
|
||||
Brand recognition +300%
|
||||
</h2>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4">
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-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="flex flex-col lg:flex-row gap-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>
|
||||
@ -526,13 +546,13 @@ export default function Home() {
|
||||
Policy change achieved
|
||||
</h2>
|
||||
</div>
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4">
|
||||
<div className="border-l-2 border-[#7B2E454D] pl-4 lg:py-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="flex flex-col lg:flex-row gap-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>
|
||||
@ -546,75 +566,79 @@ export default function Home() {
|
||||
</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
|
||||
</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">
|
||||
<section className="min-h-screen px-10 pt-20 lg:pt-0 space-y-4 lg:flex lg:flex-col lg:items-center lg:justify-evenly">
|
||||
<section className="lg:space-y-10">
|
||||
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] tracking-[0.3em]">
|
||||
IMPACT METRICS
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white">
|
||||
Measurable{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Results
|
||||
</span>
|
||||
</h2>
|
||||
</section>
|
||||
<section className="flex flex-col gap-10 lg:flex-row lg:justify-evenly lg:w-7/8 lg:gap-10">
|
||||
<div className="lg:py-10 px-10 py-14 lg:w-full 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 className="w-full bg-[#7B2E45]/10 rounded-full">
|
||||
<div className="w-5/6 bg-[#7B2E45] py-1.5 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">
|
||||
<div className="lg:py-10 px-10 py-14 lg:w-full 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-2/3 bg-[#7B2E45] py-2 rounded-full"></div>
|
||||
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
||||
<div className="w-2/3 bg-[#7B2E45] py-1.5 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">
|
||||
<div className=" lg:py-10 px-10 py-14 lg:w-full 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-11/12 bg-[#7B2E45] py-2 rounded-full"></div>
|
||||
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
||||
<div className="w-11/12 bg-[#7B2E45] py-1.5 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">
|
||||
<div className=" lg:py-10 px-10 py-14 lg:w-full 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-3/5 bg-[#7B2E45] py-2 rounded-full"></div>
|
||||
<div className="w-full bg-[#7B2E45]/10 rounded-full">
|
||||
<div className="w-3/5 bg-[#7B2E45] py-1.5 rounded-full"></div>
|
||||
</div>
|
||||
</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
|
||||
</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>
|
||||
<section className="min-h-screen px-10 pt-20 lg:pt-0 flex flex-col items-center justify-center space-y-10">
|
||||
<section className="lg:space-y-10">
|
||||
<h2 className="font-lato text-xl lg:text-md lg:text-center text-[#7B2E45] text-center tracking-[0.3em]">
|
||||
THE CONNECTED WORLD
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center lg:leading-26">
|
||||
We nurture narratives where they <br />
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
matter most{" "}
|
||||
</span>
|
||||
</h2>
|
||||
</section>
|
||||
<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">
|
||||
<section className="grid grid-cols-2 lg:grid-cols-6 gap-4 text-center">
|
||||
<h5 className="py-4 px-6 font-lato text-lg text-[#D8DFE4] bg-[#7B2E451A] border border-[#7B2E4533] rounded-full">
|
||||
Facebook
|
||||
</h5>
|
||||
@ -634,37 +658,41 @@ export default function Home() {
|
||||
Tiktok
|
||||
</h5>
|
||||
</section>
|
||||
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
|
||||
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
|
||||
</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
|
||||
</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">
|
||||
<section className="min-h-screen px-10 pt-20 lg:pt-0 flex flex-col items-center justify-center space-y-8 lg:space-y-20">
|
||||
<section className="lg:space-y-10">
|
||||
<h2 className="font-lato text-xl lg:text-md text-[#7B2E45] tracking-[0.3em] text-center">
|
||||
LET'S CONNECT
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl lg:text-7xl text-white text-center lg:leading-26">
|
||||
Ready to{" "}
|
||||
<span className="bg-linear-to-b from-[#7B2E45] to-[#9B3E55] bg-clip-text text-transparent leading-16">
|
||||
Win?{" "}
|
||||
</span>
|
||||
</h2>
|
||||
</section>
|
||||
<p className="font-lato text-2xl text-white/80 text-center lg:w-1/2">
|
||||
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>
|
||||
<section className="w-full lg:w-fit space-y-6 lg:gap-10 lg:flex lg:flex-col lg:items-center">
|
||||
<div className="flex flex-col lg:flex-row justify-evenly gap-6 lg:items-center">
|
||||
<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-2xl">
|
||||
<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-2xl">
|
||||
<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-2xl">
|
||||
<Globe size={24} color="#7B2E45" /> <span>danextagency.com</span>
|
||||
</h5>
|
||||
</div>
|
||||
<button
|
||||
className="w-full
|
||||
className="lg:w-fit w-full
|
||||
px-8 py-4 rounded-xl
|
||||
bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
|
||||
hover:from-[#913651] hover:to-[#b34762]
|
||||
@ -675,7 +703,7 @@ export default function Home() {
|
||||
</span>
|
||||
</button>
|
||||
</section>
|
||||
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/2" />
|
||||
<hr className="bg-[#7B2E45]/20 h-0.5 border-0 w-1/6" />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 199 KiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 196 KiB After Width: | Height: | Size: 1.7 MiB |
Reference in New Issue
Block a user