fix(resp): fix responsive for large screens

This commit is contained in:
shafin-r
2025-12-08 18:35:02 +06:00
parent 6ad89a55ea
commit 8dddc3f9a3
4 changed files with 180 additions and 152 deletions

View File

@ -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