feat: added new page media kit
This commit is contained in:
poyrazavsever
@@ -0,0 +1,45 @@
|
|||||||
|
import type { Metadata } from "next";
|
||||||
|
import { notFound } from "next/navigation";
|
||||||
|
import { MediaKitContent } from "@/components/media-kit-content";
|
||||||
|
import type { MediaKitLocale } from "@/data/media-kit";
|
||||||
|
|
||||||
|
type MediaKitPageProps = {
|
||||||
|
params: Promise<{ locale: string }>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function generateMetadata({
|
||||||
|
params,
|
||||||
|
}: MediaKitPageProps): Promise<Metadata> {
|
||||||
|
const { locale } = await params;
|
||||||
|
const isTurkish = locale === "tr";
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: isTurkish ? "Medya Kiti" : "Media Kit",
|
||||||
|
description: isTurkish
|
||||||
|
? "Poyraz Avsever sponsorluk ve marka iş birlikleri medya kiti."
|
||||||
|
: "Poyraz Avsever media kit for sponsorships and brand partnerships.",
|
||||||
|
robots: {
|
||||||
|
index: false,
|
||||||
|
follow: false,
|
||||||
|
nocache: true,
|
||||||
|
googleBot: {
|
||||||
|
index: false,
|
||||||
|
follow: false,
|
||||||
|
noimageindex: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
alternates: {
|
||||||
|
canonical: null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function MediaKitPage({ params }: MediaKitPageProps) {
|
||||||
|
const { locale } = await params;
|
||||||
|
|
||||||
|
if (locale !== "tr" && locale !== "en") {
|
||||||
|
notFound();
|
||||||
|
}
|
||||||
|
|
||||||
|
return <MediaKitContent locale={locale as MediaKitLocale} />;
|
||||||
|
}
|
||||||
+1
-1
@@ -8,7 +8,7 @@ export default function robots(): MetadataRoute.Robots {
|
|||||||
{
|
{
|
||||||
userAgent: "*",
|
userAgent: "*",
|
||||||
allow: "/",
|
allow: "/",
|
||||||
disallow: ["/api/", "/_next/"],
|
disallow: ["/api/", "/_next/", "/media-kit", "/tr/media-kit", "/en/media-kit"],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
sitemap: `${SITE_URL}/sitemap.xml`,
|
sitemap: `${SITE_URL}/sitemap.xml`,
|
||||||
|
|||||||
@@ -37,6 +37,8 @@ export function AppShell({ children }: AppShellProps) {
|
|||||||
const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
|
const [theme, setTheme] = useState<ThemeMode>(getInitialTheme);
|
||||||
const isStandaloneLinksPage =
|
const isStandaloneLinksPage =
|
||||||
pathname === "/links" || pathname.startsWith("/links/");
|
pathname === "/links" || pathname.startsWith("/links/");
|
||||||
|
const isStandaloneMediaKitPage =
|
||||||
|
pathname === "/media-kit" || pathname.startsWith("/media-kit/");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.documentElement.dataset.poyrazTheme = theme;
|
document.documentElement.dataset.poyrazTheme = theme;
|
||||||
@@ -44,7 +46,7 @@ export function AppShell({ children }: AppShellProps) {
|
|||||||
localStorage.setItem("poyraz-theme", theme);
|
localStorage.setItem("poyraz-theme", theme);
|
||||||
}, [theme]);
|
}, [theme]);
|
||||||
|
|
||||||
if (isStandaloneLinksPage) {
|
if (isStandaloneLinksPage || isStandaloneMediaKitPage) {
|
||||||
return children;
|
return children;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,630 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import {
|
||||||
|
Badge,
|
||||||
|
Button,
|
||||||
|
ButtonIcon,
|
||||||
|
ButtonLabel,
|
||||||
|
Card,
|
||||||
|
PatternDots,
|
||||||
|
Separator,
|
||||||
|
StatisticCard,
|
||||||
|
TextEffect,
|
||||||
|
Typography,
|
||||||
|
} from "poyraz-ui/atoms";
|
||||||
|
import { SPONSORS } from "@/data/sponsors";
|
||||||
|
import {
|
||||||
|
MEDIA_KIT_AGES,
|
||||||
|
MEDIA_KIT_CONTENT_BREAKDOWN,
|
||||||
|
MEDIA_KIT_GENDER,
|
||||||
|
MEDIA_KIT_METRICS,
|
||||||
|
MEDIA_KIT_PERIOD,
|
||||||
|
MEDIA_KIT_TOPICS,
|
||||||
|
type MediaKitAudienceRow,
|
||||||
|
type MediaKitLocale,
|
||||||
|
} from "@/data/media-kit";
|
||||||
|
|
||||||
|
const COPY = {
|
||||||
|
tr: {
|
||||||
|
eyebrow: "Medya Kiti · 2026",
|
||||||
|
availability: "İş birliklerine açık",
|
||||||
|
name: "Poyraz Avsever",
|
||||||
|
title: "Teknolojiyi öğreniyor, üretiyor ve anlaşılır şekilde paylaşıyorum.",
|
||||||
|
intro:
|
||||||
|
"En büyük amacım öğrendiklerimi aktarırken bilgimi pekiştirmek ve başkalarının da üretmesine yardımcı olmak. Yazılım, teknoloji ve tasarımı gerçek projeler, dürüst deneyimler ve uygulanabilir anlatımlarla buluşturuyorum.",
|
||||||
|
role: "İçerik üreticisi · Yazılım geliştirici",
|
||||||
|
audienceTitle: "Kime ulaşıyorum?",
|
||||||
|
audienceDescription:
|
||||||
|
"Yazılım geliştiriciler, sistem yöneticileri, teknoloji meraklıları ve üretirken öğrenmeyi seven genç profesyoneller.",
|
||||||
|
statsEyebrow: "YouTube performansı",
|
||||||
|
statsTitle: "Takipçiden öte, aktif ve büyüyen bir kitle.",
|
||||||
|
statsDescription:
|
||||||
|
"Kanal performansının son 28 günlük görünümü. Gelir verileri medya kitine dahil edilmemiştir.",
|
||||||
|
periodLabel: "Veri dönemi",
|
||||||
|
audienceEyebrow: "Kitle profili",
|
||||||
|
audienceHeadline: "İzleyicilerin %68’i 18–34 yaş aralığında.",
|
||||||
|
audienceBody:
|
||||||
|
"Teknik kararları etkileyen, yeni araçları deneyen ve teknoloji ürünlerine yüksek ilgi gösteren odaklı bir topluluk.",
|
||||||
|
ageTitle: "Yaş dağılımı",
|
||||||
|
genderTitle: "Cinsiyet dağılımı",
|
||||||
|
formatTitle: "İçerik formatına göre izlenme",
|
||||||
|
formatDescription:
|
||||||
|
"Uzun video odağı, markaların ürün ve hikâyelerini detaylı ve bağlamı korunmuş biçimde anlatmaya alan açıyor.",
|
||||||
|
reachTitle: "Son 28 günde içerik ritmi",
|
||||||
|
reachItems: [
|
||||||
|
{ label: "Yeni izleyici", value: "6,8 B" },
|
||||||
|
{ label: "Düzenli izleyici", value: "801" },
|
||||||
|
{ label: "Yayınlanan içerik", value: "9" },
|
||||||
|
],
|
||||||
|
reachNote: "5 uzun video · 4 Shorts",
|
||||||
|
partnersEyebrow: "Seçili iş birlikleri",
|
||||||
|
partnersTitle: "Daha önce birlikte ürettik.",
|
||||||
|
partnersDescription:
|
||||||
|
"İçeriğin doğal akışını ve izleyici güvenini koruyan, ürünü gerçekten deneyimlemeye dayalı iş birlikleri.",
|
||||||
|
collaborationTitle: "Uygun iş birliği formatları",
|
||||||
|
collaborationItems: [
|
||||||
|
"Sponsorlu YouTube videosu veya doğal ürün entegrasyonu",
|
||||||
|
"Teknik ürün incelemesi ve kullanım senaryosu",
|
||||||
|
"Kısa format video ve çoklu platform içerik paketi",
|
||||||
|
"Uzun dönem marka elçiliği ve içerik serisi",
|
||||||
|
],
|
||||||
|
ctaEyebrow: "Birlikte üretelim",
|
||||||
|
ctaTitle: "Teknoloji kitlesine güvenilir bir hikâyeyle ulaşın.",
|
||||||
|
ctaDescription:
|
||||||
|
"Markanızı, ürünü gerçekten anlayan ve izleyicisine açık bir dille anlatan içeriklerle buluşturalım.",
|
||||||
|
emailCta: "E-posta gönder",
|
||||||
|
youtubeCta: "YouTube kanalını aç",
|
||||||
|
footer: "Poyraz Avsever · Medya Kiti",
|
||||||
|
updated: "Son güncelleme: 1 Temmuz 2026",
|
||||||
|
derivedNote:
|
||||||
|
"Ortalama izlenme süresi, paylaşılan toplam izlenme saati ve görüntüleme değerlerinden yaklaşık olarak hesaplanmıştır.",
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
eyebrow: "Media Kit · 2026",
|
||||||
|
availability: "Open to partnerships",
|
||||||
|
name: "Poyraz Avsever",
|
||||||
|
title: "I learn, build, and make technology easier to understand.",
|
||||||
|
intro:
|
||||||
|
"My biggest goal is to reinforce what I learn by sharing it and help others build along the way. I connect software, technology, and design through real projects, honest experiences, and practical storytelling.",
|
||||||
|
role: "Content creator · Software developer",
|
||||||
|
audienceTitle: "Who do I reach?",
|
||||||
|
audienceDescription:
|
||||||
|
"Software developers, system administrators, technology enthusiasts, and young professionals who learn by building.",
|
||||||
|
statsEyebrow: "YouTube performance",
|
||||||
|
statsTitle: "An active, growing audience beyond follower count.",
|
||||||
|
statsDescription:
|
||||||
|
"A 28-day view of channel performance. Revenue data is intentionally excluded from this media kit.",
|
||||||
|
periodLabel: "Data period",
|
||||||
|
audienceEyebrow: "Audience profile",
|
||||||
|
audienceHeadline: "68% of viewers are between 18 and 34.",
|
||||||
|
audienceBody:
|
||||||
|
"A focused community that influences technical decisions, tries new tools, and shows strong interest in technology products.",
|
||||||
|
ageTitle: "Age distribution",
|
||||||
|
genderTitle: "Gender distribution",
|
||||||
|
formatTitle: "Views by content format",
|
||||||
|
formatDescription:
|
||||||
|
"A strong long-form focus creates room to explain products and brand stories in depth and with the right context.",
|
||||||
|
reachTitle: "Content rhythm in the last 28 days",
|
||||||
|
reachItems: [
|
||||||
|
{ label: "New viewers", value: "6.8K" },
|
||||||
|
{ label: "Regular viewers", value: "801" },
|
||||||
|
{ label: "Published pieces", value: "9" },
|
||||||
|
],
|
||||||
|
reachNote: "5 long-form videos · 4 Shorts",
|
||||||
|
partnersEyebrow: "Selected partnerships",
|
||||||
|
partnersTitle: "Brands I have built with.",
|
||||||
|
partnersDescription:
|
||||||
|
"Partnerships grounded in real product experience while protecting the natural flow of the content and audience trust.",
|
||||||
|
collaborationTitle: "Partnership formats",
|
||||||
|
collaborationItems: [
|
||||||
|
"Sponsored YouTube video or native product integration",
|
||||||
|
"Technical product review and use-case content",
|
||||||
|
"Short-form video and multi-platform content package",
|
||||||
|
"Long-term brand ambassadorship and content series",
|
||||||
|
],
|
||||||
|
ctaEyebrow: "Let’s build together",
|
||||||
|
ctaTitle: "Reach a technology audience through a credible story.",
|
||||||
|
ctaDescription:
|
||||||
|
"Let’s introduce your brand through content that understands the product and speaks clearly to its audience.",
|
||||||
|
emailCta: "Send an email",
|
||||||
|
youtubeCta: "Open YouTube channel",
|
||||||
|
footer: "Poyraz Avsever · Media Kit",
|
||||||
|
updated: "Last updated: July 1, 2026",
|
||||||
|
derivedNote:
|
||||||
|
"Average watch time is an estimate calculated from the shared total watch hours and view count.",
|
||||||
|
},
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
function AudienceBar({
|
||||||
|
item,
|
||||||
|
locale,
|
||||||
|
max = 100,
|
||||||
|
}: {
|
||||||
|
item: MediaKitAudienceRow;
|
||||||
|
locale: MediaKitLocale;
|
||||||
|
max?: number;
|
||||||
|
}) {
|
||||||
|
const width = Math.max((item.value / max) * 100, item.value > 0 ? 2 : 0);
|
||||||
|
const value = item.value.toLocaleString(locale === "tr" ? "tr-TR" : "en-US", {
|
||||||
|
maximumFractionDigits: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-[3.5rem_1fr_3.25rem] items-center gap-3">
|
||||||
|
<Typography variant="small" className="font-medium text-foreground">
|
||||||
|
{item.label}
|
||||||
|
</Typography>
|
||||||
|
<div
|
||||||
|
className="h-1.5 overflow-hidden rounded-full bg-muted"
|
||||||
|
role="img"
|
||||||
|
aria-label={`${item.label}: %${value}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${width}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="text-right font-medium tabular-nums text-muted-foreground"
|
||||||
|
>
|
||||||
|
%{value}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function MediaKitContent({ locale }: { locale: MediaKitLocale }) {
|
||||||
|
const copy = COPY[locale];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-dvh bg-background text-foreground">
|
||||||
|
<div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8">
|
||||||
|
<header className="flex items-center justify-between gap-4 border-b border-border pb-4">
|
||||||
|
<a href={`/${locale}`} className="inline-flex items-center gap-3">
|
||||||
|
<Image
|
||||||
|
src="/logo/logo.jpeg"
|
||||||
|
alt="Poyraz Avsever"
|
||||||
|
width={36}
|
||||||
|
height={36}
|
||||||
|
priority
|
||||||
|
className="size-9 rounded-sm border border-border object-cover"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<Typography variant="small" className="font-semibold leading-none">
|
||||||
|
{copy.name}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="caption"
|
||||||
|
className="mt-1 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.eyebrow}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<Badge variant="success" radius="full" size="sm" className="gap-1.5">
|
||||||
|
<span className="size-1.5 rounded-full bg-current" />
|
||||||
|
{copy.availability}
|
||||||
|
</Badge>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section className="relative overflow-hidden border-b border-border py-10 sm:py-14 lg:py-16">
|
||||||
|
<PatternDots
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none absolute inset-y-0 right-0 hidden w-2/5 opacity-20 md:block"
|
||||||
|
/>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="max-w-4xl">
|
||||||
|
<Typography
|
||||||
|
component="h1"
|
||||||
|
variant="h1"
|
||||||
|
className="max-w-3xl text-4xl leading-[1.02] tracking-[-0.055em] sm:text-5xl lg:text-6xl"
|
||||||
|
>
|
||||||
|
Teknoloji{" "}
|
||||||
|
<TextEffect effect="hand-drawn" tone="primary">
|
||||||
|
{locale === "tr" ? "üretirken" : "by building"}
|
||||||
|
</TextEffect>{" "}
|
||||||
|
{locale === "tr"
|
||||||
|
? "daha iyi öğrenilir."
|
||||||
|
: "is how we learn best."}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
variant="p"
|
||||||
|
className="mt-6 max-w-2xl text-sm leading-7 text-muted-foreground sm:text-base"
|
||||||
|
>
|
||||||
|
{copy.intro}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<div className="mt-7 flex flex-wrap gap-2">
|
||||||
|
{MEDIA_KIT_TOPICS.map((topic) => (
|
||||||
|
<Badge
|
||||||
|
key={topic.id}
|
||||||
|
variant="secondary"
|
||||||
|
radius="sm"
|
||||||
|
className="gap-1.5"
|
||||||
|
>
|
||||||
|
<Icon icon={topic.icon} width={14} height={14} />
|
||||||
|
{topic.label[locale]}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="border-b border-border py-10 sm:py-14">
|
||||||
|
<div className="mb-6 flex flex-col justify-between gap-4 sm:flex-row sm:items-end">
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
component="h2"
|
||||||
|
variant="h2"
|
||||||
|
className="max-w-2xl tracking-[-0.045em]"
|
||||||
|
>
|
||||||
|
{copy.statsTitle}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-2 max-w-2xl leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.statsDescription}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="shrink-0 text-left sm:text-right">
|
||||||
|
<Typography variant="caption" className="text-muted-foreground">
|
||||||
|
{copy.periodLabel}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="small" className="mt-0.5 font-medium">
|
||||||
|
{MEDIA_KIT_PERIOD[locale]}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{MEDIA_KIT_METRICS.map((metric) => (
|
||||||
|
<StatisticCard
|
||||||
|
key={metric.id}
|
||||||
|
className="rounded-sm border-border bg-card"
|
||||||
|
label={metric.label[locale]}
|
||||||
|
value={metric.value[locale]}
|
||||||
|
change={metric.detail[locale]}
|
||||||
|
trend={metric.id === "subscribers" ? "up" : "neutral"}
|
||||||
|
icon={
|
||||||
|
<span className="inline-flex size-8 items-center justify-center rounded-sm bg-primary/10 text-primary">
|
||||||
|
<Icon icon={metric.icon} width={17} height={17} />
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Typography
|
||||||
|
variant="caption"
|
||||||
|
className="mt-3 block text-muted-foreground"
|
||||||
|
>
|
||||||
|
* {copy.derivedNote}
|
||||||
|
</Typography>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid gap-8 border-b border-border py-10 sm:py-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-12">
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
component="h2"
|
||||||
|
variant="h2"
|
||||||
|
className="tracking-[-0.045em]"
|
||||||
|
>
|
||||||
|
{copy.audienceHeadline}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-3 max-w-lg leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.audienceBody}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Card className="mt-6 rounded-sm border-border p-5">
|
||||||
|
<Typography variant="large" className="text-base">
|
||||||
|
{copy.audienceTitle}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-2 leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.audienceDescription}
|
||||||
|
</Typography>
|
||||||
|
<div className="mt-5 flex flex-wrap gap-2">
|
||||||
|
{MEDIA_KIT_TOPICS.map((topic) => (
|
||||||
|
<Badge key={topic.id} variant="outline" radius="full" size="sm">
|
||||||
|
{topic.label[locale]}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<Card className="rounded-sm border-border p-5">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<Typography variant="large" className="text-base">
|
||||||
|
{copy.genderTitle}
|
||||||
|
</Typography>
|
||||||
|
<Icon
|
||||||
|
icon="mdi:account-group-outline"
|
||||||
|
width={18}
|
||||||
|
height={18}
|
||||||
|
className="text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 space-y-5">
|
||||||
|
{MEDIA_KIT_GENDER.map((item) => (
|
||||||
|
<AudienceBar
|
||||||
|
key={item.id}
|
||||||
|
item={{
|
||||||
|
...item,
|
||||||
|
label:
|
||||||
|
locale === "tr"
|
||||||
|
? item.label
|
||||||
|
: item.id === "male"
|
||||||
|
? "Male"
|
||||||
|
: "Female",
|
||||||
|
}}
|
||||||
|
locale={locale}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="rounded-sm border-border p-5">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<Typography variant="large" className="text-base">
|
||||||
|
{copy.ageTitle}
|
||||||
|
</Typography>
|
||||||
|
<Icon
|
||||||
|
icon="mdi:chart-bar"
|
||||||
|
width={18}
|
||||||
|
height={18}
|
||||||
|
className="text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 space-y-3.5">
|
||||||
|
{MEDIA_KIT_AGES.map((item) => (
|
||||||
|
<AudienceBar
|
||||||
|
key={item.id}
|
||||||
|
item={item}
|
||||||
|
locale={locale}
|
||||||
|
max={50}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid gap-3 border-b border-border py-10 sm:py-14 lg:grid-cols-[1.15fr_0.85fr]">
|
||||||
|
<Card className="rounded-sm border-border p-5 sm:p-6">
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<Typography variant="large" className="text-lg">
|
||||||
|
{copy.formatTitle}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-1 max-w-xl leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.formatDescription}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Icon
|
||||||
|
icon="mdi:youtube"
|
||||||
|
width={28}
|
||||||
|
height={28}
|
||||||
|
className="shrink-0 text-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-8 space-y-6">
|
||||||
|
{MEDIA_KIT_CONTENT_BREAKDOWN.map((item) => (
|
||||||
|
<div key={item.id}>
|
||||||
|
<div className="mb-2 flex items-end justify-between gap-3">
|
||||||
|
<Typography variant="small" className="font-medium">
|
||||||
|
{item.label[locale]}
|
||||||
|
</Typography>
|
||||||
|
<div className="flex items-baseline gap-2">
|
||||||
|
<Typography variant="large">
|
||||||
|
{item.value[locale]}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="caption"
|
||||||
|
className="tabular-nums text-muted-foreground"
|
||||||
|
>
|
||||||
|
%{item.percentage.toLocaleString(
|
||||||
|
locale === "tr" ? "tr-TR" : "en-US",
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 overflow-hidden rounded-full bg-muted">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${item.percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="rounded-sm border-border p-5 sm:p-6">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<Typography variant="large" className="text-lg">
|
||||||
|
{copy.reachTitle}
|
||||||
|
</Typography>
|
||||||
|
<Icon
|
||||||
|
icon="mdi:calendar-check-outline"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="text-muted-foreground"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 divide-y divide-border">
|
||||||
|
{copy.reachItems.map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.label}
|
||||||
|
className="flex items-center justify-between gap-4 py-3 first:pt-0"
|
||||||
|
>
|
||||||
|
<Typography variant="small" className="text-muted-foreground">
|
||||||
|
{item.label}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h3" className="tabular-nums">
|
||||||
|
{item.value}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Badge variant="secondary" radius="sm" className="mt-2">
|
||||||
|
{copy.reachNote}
|
||||||
|
</Badge>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="border-b border-border py-10 sm:py-14">
|
||||||
|
<div className="grid gap-8 lg:grid-cols-[0.8fr_1.2fr] lg:gap-12">
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
component="h2"
|
||||||
|
variant="h2"
|
||||||
|
className="tracking-[-0.045em]"
|
||||||
|
>
|
||||||
|
{copy.partnersTitle}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-3 max-w-lg leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.partnersDescription}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
{SPONSORS.map((sponsor) => (
|
||||||
|
<a
|
||||||
|
key={sponsor.id}
|
||||||
|
href={sponsor.websiteUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="group"
|
||||||
|
>
|
||||||
|
<Card className="flex h-full min-h-32 items-center justify-center rounded-sm border-border bg-white p-6 transition-colors group-hover:border-primary/50">
|
||||||
|
<div className="relative h-12 w-full">
|
||||||
|
<Image
|
||||||
|
src={sponsor.logo}
|
||||||
|
alt={sponsor.name}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 640px) 100vw, 320px"
|
||||||
|
className="object-contain grayscale transition duration-300 group-hover:grayscale-0"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator className="my-8" />
|
||||||
|
|
||||||
|
<div className="grid gap-5 sm:grid-cols-[0.7fr_1.3fr] sm:items-start">
|
||||||
|
<Typography variant="large" className="text-base">
|
||||||
|
{copy.collaborationTitle}
|
||||||
|
</Typography>
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
{copy.collaborationItems.map((item) => (
|
||||||
|
<div key={item} className="flex items-start gap-2.5">
|
||||||
|
<span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-success text-success-icon">
|
||||||
|
<Icon icon="mdi:check" width={13} height={13} />
|
||||||
|
</span>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="leading-5 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="py-10 sm:py-14">
|
||||||
|
<Card className="relative overflow-hidden rounded-md border-primary/25 bg-primary/5 p-6 sm:p-8">
|
||||||
|
<PatternDots
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none absolute inset-y-0 right-0 w-1/2 opacity-20"
|
||||||
|
/>
|
||||||
|
<div className="relative max-w-3xl">
|
||||||
|
<Typography
|
||||||
|
component="h2"
|
||||||
|
variant="h2"
|
||||||
|
className="tracking-[-0.045em]"
|
||||||
|
>
|
||||||
|
{copy.ctaTitle}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="small"
|
||||||
|
className="mt-3 max-w-2xl leading-6 text-muted-foreground"
|
||||||
|
>
|
||||||
|
{copy.ctaDescription}
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<div className="mt-6 flex flex-wrap gap-2">
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
radius="sm"
|
||||||
|
effect="swap"
|
||||||
|
swapTarget="both"
|
||||||
|
>
|
||||||
|
<a href="mailto:poyrazavsever@gmail.com">
|
||||||
|
<ButtonIcon>
|
||||||
|
<Icon icon="mdi:email-outline" width={16} height={16} />
|
||||||
|
</ButtonIcon>
|
||||||
|
<ButtonLabel>{copy.emailCta}</ButtonLabel>
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
variant="secondary"
|
||||||
|
radius="sm"
|
||||||
|
effect="swap"
|
||||||
|
swapTarget="both"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://youtube.com/@poyrazavsever"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
>
|
||||||
|
<ButtonIcon>
|
||||||
|
<Icon icon="mdi:youtube" width={17} height={17} />
|
||||||
|
</ButtonIcon>
|
||||||
|
<ButtonLabel>{copy.youtubeCta}</ButtonLabel>
|
||||||
|
</a>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer className="flex flex-col justify-between gap-2 border-t border-border py-5 sm:flex-row sm:items-center">
|
||||||
|
<Typography variant="caption" className="text-muted-foreground">
|
||||||
|
{copy.footer}
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="caption" className="text-muted-foreground">
|
||||||
|
{copy.updated}
|
||||||
|
</Typography>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,163 @@
|
|||||||
|
export type MediaKitLocale = "tr" | "en";
|
||||||
|
|
||||||
|
export type MediaKitMetric = {
|
||||||
|
id: string;
|
||||||
|
label: Record<MediaKitLocale, string>;
|
||||||
|
value: Record<MediaKitLocale, string>;
|
||||||
|
detail: Record<MediaKitLocale, string>;
|
||||||
|
icon: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MediaKitAudienceRow = {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const MEDIA_KIT_PERIOD = {
|
||||||
|
tr: "20 Haziran – 17 Temmuz 2026",
|
||||||
|
en: "June 20 – July 17, 2026",
|
||||||
|
} satisfies Record<MediaKitLocale, string>;
|
||||||
|
|
||||||
|
export const MEDIA_KIT_METRICS: MediaKitMetric[] = [
|
||||||
|
{
|
||||||
|
id: "subscribers",
|
||||||
|
label: {
|
||||||
|
tr: "YouTube abonesi",
|
||||||
|
en: "YouTube subscribers",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "8 B+",
|
||||||
|
en: "8K+",
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
tr: "Son 28 günde +715",
|
||||||
|
en: "+715 in the last 28 days",
|
||||||
|
},
|
||||||
|
icon: "mdi:account-multiple-outline",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "views",
|
||||||
|
label: {
|
||||||
|
tr: "Görüntüleme",
|
||||||
|
en: "Views",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "31,1 B",
|
||||||
|
en: "31.1K",
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
tr: "Son 28 gün",
|
||||||
|
en: "Last 28 days",
|
||||||
|
},
|
||||||
|
icon: "mdi:play-circle-outline",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "watch-time",
|
||||||
|
label: {
|
||||||
|
tr: "İzlenme süresi",
|
||||||
|
en: "Watch time",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "2,0 B saat",
|
||||||
|
en: "2.0K hours",
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
tr: "≈ 3:52 / görüntüleme",
|
||||||
|
en: "≈ 3:52 per view",
|
||||||
|
},
|
||||||
|
icon: "mdi:clock-outline",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "monthly-audience",
|
||||||
|
label: {
|
||||||
|
tr: "Aylık kitle",
|
||||||
|
en: "Monthly audience",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "15,3 B",
|
||||||
|
en: "15.3K",
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
tr: "Aktif izleyici",
|
||||||
|
en: "Active viewers",
|
||||||
|
},
|
||||||
|
icon: "mdi:chart-line",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const MEDIA_KIT_CONTENT_BREAKDOWN = [
|
||||||
|
{
|
||||||
|
id: "videos",
|
||||||
|
label: {
|
||||||
|
tr: "Uzun videolar",
|
||||||
|
en: "Long-form videos",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "24,3 B",
|
||||||
|
en: "24.3K",
|
||||||
|
},
|
||||||
|
percentage: 78.4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "shorts",
|
||||||
|
label: {
|
||||||
|
tr: "Shorts",
|
||||||
|
en: "Shorts",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
tr: "6,7 B",
|
||||||
|
en: "6.7K",
|
||||||
|
},
|
||||||
|
percentage: 21.6,
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const MEDIA_KIT_GENDER: MediaKitAudienceRow[] = [
|
||||||
|
{ id: "male", label: "Erkek", value: 98 },
|
||||||
|
{ id: "female", label: "Kadın", value: 2 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const MEDIA_KIT_AGES: MediaKitAudienceRow[] = [
|
||||||
|
{ id: "18-24", label: "18–24", value: 21.9 },
|
||||||
|
{ id: "25-34", label: "25–34", value: 46.1 },
|
||||||
|
{ id: "35-44", label: "35–44", value: 20.8 },
|
||||||
|
{ id: "45-54", label: "45–54", value: 9.8 },
|
||||||
|
{ id: "55-64", label: "55–64", value: 1.2 },
|
||||||
|
{ id: "65+", label: "65+", value: 0.1 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const MEDIA_KIT_TOPICS = [
|
||||||
|
{
|
||||||
|
id: "software",
|
||||||
|
label: {
|
||||||
|
tr: "Yazılım geliştirme",
|
||||||
|
en: "Software development",
|
||||||
|
},
|
||||||
|
icon: "mdi:code-tags",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "systems",
|
||||||
|
label: {
|
||||||
|
tr: "Sistem & araçlar",
|
||||||
|
en: "Systems & tooling",
|
||||||
|
},
|
||||||
|
icon: "mdi:server-outline",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "design",
|
||||||
|
label: {
|
||||||
|
tr: "Tasarım & ürün",
|
||||||
|
en: "Design & product",
|
||||||
|
},
|
||||||
|
icon: "mdi:palette-outline",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "technology",
|
||||||
|
label: {
|
||||||
|
tr: "Teknoloji",
|
||||||
|
en: "Technology",
|
||||||
|
},
|
||||||
|
icon: "mdi:laptop",
|
||||||
|
},
|
||||||
|
] as const;
|
||||||
Reference in New Issue
Block a user