feat(screen): add services, approach, media production pages
This commit is contained in:
shafin-r
376
app/page.tsx
376
app/page.tsx
@ -1,120 +1,217 @@
|
||||
import CardCarousel from "@/components/Carousel";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
} from "@/components/ui/carousel";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Home() {
|
||||
const serviceCarousel = [
|
||||
{
|
||||
id: 0,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<Image
|
||||
src={"/images/campaign-strategy.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
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">
|
||||
01
|
||||
</p>
|
||||
<h2 className="text-4xl text-white font-lato">
|
||||
Campaign Strategy
|
||||
</h2>
|
||||
<p className="text-lg font-lato text-white/60">
|
||||
Comprehensive planning from research to execution, crafted to
|
||||
win hearts and minds.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<Image
|
||||
src={"/images/media-production.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
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">
|
||||
02
|
||||
</p>
|
||||
<h2 className="text-4xl 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>
|
||||
</section>
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: (
|
||||
<>
|
||||
<section className="space-y-6">
|
||||
<div>
|
||||
<Image
|
||||
src={"/images/research.png"}
|
||||
width={614}
|
||||
height={418}
|
||||
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">
|
||||
03
|
||||
</p>
|
||||
<h2 className="text-4xl 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>
|
||||
</section>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<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" />
|
||||
<div className="flex gap-2">
|
||||
<div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
|
||||
<div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div>
|
||||
<main className="bg-radial-[at_50%_50%] from-[#1a0a0e] to-[#0D0F11] pt-20">
|
||||
<section className="min-h-screen space-y-8 flex flex-col items-center">
|
||||
<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" />
|
||||
<div className="flex gap-2">
|
||||
<div className="bg-[#7B2E45] h-3 w-3 rotate-45"></div>
|
||||
<div className="border-[#7B2E45] border h-3 w-3 rotate-45"></div>
|
||||
</div>
|
||||
<hr className="text-[#7B2E45]/50 w-1/2" />
|
||||
</div>
|
||||
<hr className="text-[#7B2E45]/50 w-1/2" />
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
className="
|
||||
<div>
|
||||
<h1
|
||||
className="
|
||||
font-inter text-[80px] leading-20 font-black tracking-tight
|
||||
bg-[linear-gradient(123.54deg,#FFFFFF_0%,#D8DFE4_38.8%,#7B2E45_71.52%,#9B3E55_102.17%)]
|
||||
bg-clip-text text-transparent
|
||||
"
|
||||
>
|
||||
Da Next
|
||||
</h1>
|
||||
<h1
|
||||
className="
|
||||
>
|
||||
Da Next
|
||||
</h1>
|
||||
<h1
|
||||
className="
|
||||
font-inter text-[80px] font-black tracking-tight
|
||||
bg-[linear-gradient(123.54deg,#7B2E45_7.16%,#9B3E55_53.58%,#D8DFE4_100%)]
|
||||
bg-clip-text text-transparent pb-2 leading-20
|
||||
"
|
||||
>
|
||||
Agency
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col items-center h-fit space-y-6">
|
||||
<div className="flex flex-col lg:md:flex-row lg:md:gap-2">
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Shaping Narratives.
|
||||
</h3>
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Building Leaders.
|
||||
</h3>
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Winning Campaigns.
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 border ">
|
||||
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
||||
<hr className="text-[#7B2E45]/50 w-32" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="">
|
||||
<div className="relative inline-block">
|
||||
<button
|
||||
className="
|
||||
>
|
||||
Agency
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col items-center h-fit space-y-6">
|
||||
<div className="flex flex-col lg:md:flex-row lg:md:gap-2">
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Shaping Narratives.
|
||||
</h3>
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Building Leaders.
|
||||
</h3>
|
||||
<h3 className="text-[#D8DFE4] font-lato font-normal text-center text-2xl">
|
||||
Winning Campaigns.
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 ">
|
||||
<div className="h-2 w-2 rounded-full bg-[#7B2E45]"></div>
|
||||
<hr className="text-[#7B2E45]/50 w-32" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="">
|
||||
<div className="relative inline-block">
|
||||
<button
|
||||
className="
|
||||
relative px-8 py-3 rounded-xl
|
||||
bg-linear-to-b from-[#7B2E45] to-[#9B3E55]
|
||||
hover:from-[#913651] hover:to-[#b34762]
|
||||
"
|
||||
>
|
||||
{/* diamonds */}
|
||||
{/* <span className="absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
|
||||
>
|
||||
{/* diamonds */}
|
||||
{/* <span className="absolute -top-2 -left-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span>
|
||||
<span className="absolute -top-2 -right-30 rotate-45 w-20 h-20 border border-[#7B2E45]/30"></span> */}
|
||||
|
||||
<span className="text-white font-medium font-lato text-xl">
|
||||
Start Your Campaign —
|
||||
</span>
|
||||
</button>
|
||||
<span className="text-white font-medium font-lato text-xl">
|
||||
Start Your Campaign —
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{/* corner borders OUTSIDE the clipped button */}
|
||||
<span className="absolute -left-4 -top-4 w-6 h-6 border-t border-l border-[#7B2E45]" />
|
||||
<span className="absolute -right-4 -top-4 w-6 h-6 border-t border-r border-[#7B2E45]" />
|
||||
<span className="absolute -left-4 -bottom-4 w-6 h-6 border-b border-l border-[#7B2E45]" />
|
||||
<span className="absolute -right-4 -bottom-4 w-6 h-6 border-b border-r border-[#7B2E45]" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex flex-col lg:md:flex-row gap-10">
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
CAMPAIGNS
|
||||
</h5>
|
||||
{/* corner borders OUTSIDE the clipped button */}
|
||||
<span className="absolute -left-4 -top-4 w-6 h-6 border-t border-l border-[#7B2E45]" />
|
||||
<span className="absolute -right-4 -top-4 w-6 h-6 border-t border-r border-[#7B2E45]" />
|
||||
<span className="absolute -left-4 -bottom-4 w-6 h-6 border-b border-l border-[#7B2E45]" />
|
||||
<span className="absolute -right-4 -bottom-4 w-6 h-6 border-b border-r border-[#7B2E45]" />
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
SUCCESS RATE
|
||||
</h5>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
YEARS
|
||||
</h5>
|
||||
</div>
|
||||
<section className="flex flex-col lg:md:flex-row gap-10">
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">500+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
CAMPAIGNS
|
||||
</h5>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">98%+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
SUCCESS RATE
|
||||
</h5>
|
||||
</div>
|
||||
</section>
|
||||
<section className="flex items-center gap-4">
|
||||
<div className="flex gap-1 px-2">
|
||||
<div className="w-3 h-16 bg-[#7B2E45]"></div>
|
||||
<div className="w-3 h-12 bg-[#7B2E45]/50"></div>
|
||||
<div className="w-3 h-8 bg-[#7B2E45]/30"></div>
|
||||
</div>
|
||||
<div className="flex flex-col ">
|
||||
<h4 className="text-3xl text-[#7B2E45] font-lato">15+</h4>
|
||||
<h5 className="text-xl font-lato font-light text-white/50">
|
||||
YEARS
|
||||
</h5>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section className="px-10 space-y-8">
|
||||
@ -149,7 +246,7 @@ export default function Home() {
|
||||
</span>
|
||||
</section>
|
||||
</section>
|
||||
<section className="min-h-screen flex flex-col items-center justify-center space-y-6">
|
||||
<section className="min-h-screen px-5 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"}
|
||||
@ -170,7 +267,7 @@ export default function Home() {
|
||||
OUR MISSION
|
||||
</h4>
|
||||
</section>
|
||||
<section className="px-10">
|
||||
<section className="min-h-screen px-10 space-y-4 ">
|
||||
<h2 className="font-lato text-xl text-[#7B2E45] tracking-[0.5em]">
|
||||
WHAT WE DO
|
||||
</h2>
|
||||
@ -180,7 +277,90 @@ export default function Home() {
|
||||
Transform
|
||||
</span>
|
||||
</h2>
|
||||
<section></section>
|
||||
<h5 className="font-lato text-white/50 text-lg">
|
||||
Strategic excellence across every dimension of modern PR
|
||||
</h5>
|
||||
<section className="flex flex-col items-start space-y-7">
|
||||
<Carousel className="w-full h-fit ">
|
||||
<CarouselContent>
|
||||
{serviceCarousel.map(({ id, content }) => (
|
||||
<CarouselItem key={id}>{content}</CarouselItem>
|
||||
))}
|
||||
</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>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<li>Social Media Strategy</li>
|
||||
<li>Content Calendar</li>
|
||||
<li>Influencer Partnerships</li>
|
||||
<li>Performance Analystics</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<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">
|
||||
MEDIA PRODUCTION
|
||||
</h2>
|
||||
<h2 className="font-lato text-6xl 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">
|
||||
From campaign ads to documentary-style content, we produce visual
|
||||
narratives that captivate audiences and drive results.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user