shafin808s/da-next-agency
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(screen): add services, approach, media production pages

Browse Source
This commit is contained in:
shafin-r
2025-12-06 19:48:33 +06:00
parent 2707d4bef7
commit 5c7183ba88
12 changed files with 840 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/globals.css
View File

@ -1,8 +1,43 @@
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
/* Global default font = Lato */
:root {
font-family: var(--font-lato), sans-serif;
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
/* Tailwind theme overrides */
@ -11,3 +46,84 @@
--font-lato: var(--font-lato), sans-serif;
--font-inter: var(--font-inter), sans-serif;
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}

376
app/page.tsx
View File

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