tunapro
8b480c036c
All checks were successful
Deploy stable / deploy (push) Successful in 1m36s
V3 landing: white + violet + yellow accent, bold editorial. Markdown-driven content: 3 yarışma formatı (hands-on, ideathon, robo-soccer), 5 edisyon (Ataköy, Çemberlitaş Ideathon '25, Çemberlitaş HoC '26, İstanbul/Ankara Robo Soccer). Sayfalar: anasayfa, yarışma/edisyon detayları, sponsor, hakkımızda, iletişim. 40 Çemberlitaş fotoğrafı (1600px optimize, ~6.4 MB). Content helper (gray-matter + marked), reviews/photos registry, iletişim/ekip tek kaynak lib/contact.ts. Next.js 16 standalone build, Docker + compose hazır. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import Image from "next/image";
|
|
import type { ReactNode } from "react";
|
|
|
|
export function PageHero({
|
|
eyebrow,
|
|
title,
|
|
lead,
|
|
tags,
|
|
photo,
|
|
variant = "solid",
|
|
children,
|
|
}: {
|
|
eyebrow: string;
|
|
title: ReactNode;
|
|
lead?: string;
|
|
tags?: ReactNode;
|
|
photo?: { src: string; alt?: string };
|
|
variant?: "solid" | "photo";
|
|
children?: ReactNode;
|
|
}) {
|
|
if (variant === "photo" && photo) {
|
|
return (
|
|
<section className="relative border-b-2 border-neutral-900">
|
|
<div className="relative">
|
|
<div className="relative h-[520px] w-full md:h-[620px]">
|
|
<Image
|
|
src={photo.src}
|
|
alt={photo.alt ?? ""}
|
|
fill
|
|
priority
|
|
sizes="100vw"
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-violet-900/85 via-violet-800/60 to-neutral-900/75" />
|
|
</div>
|
|
<div className="absolute inset-0 flex items-end">
|
|
<div className="mx-auto w-full max-w-[1400px] px-6 pb-14 md:px-10 md:pb-20">
|
|
<div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
|
|
{eyebrow}
|
|
</div>
|
|
<h1 className="mt-4 text-balance text-5xl font-black leading-[0.95] tracking-[-0.03em] text-white md:text-7xl lg:text-[6rem]">
|
|
{title}
|
|
</h1>
|
|
{lead && (
|
|
<p className="mt-5 max-w-2xl text-lg text-white/85 md:text-xl">{lead}</p>
|
|
)}
|
|
{tags && <div className="mt-8 flex flex-wrap gap-2">{tags}</div>}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className="border-b-2 border-neutral-900 bg-violet-700 text-white">
|
|
<div className="mx-auto max-w-[1400px] px-6 py-20 md:px-10 md:py-28">
|
|
<div className="text-xs font-black uppercase tracking-[0.25em] text-yellow-300">
|
|
{eyebrow}
|
|
</div>
|
|
<h1 className="mt-4 text-balance text-5xl font-black leading-[0.92] tracking-[-0.03em] md:text-7xl lg:text-[6rem]">
|
|
{title}
|
|
</h1>
|
|
{lead && (
|
|
<p className="mt-6 max-w-2xl text-lg text-white/85 md:text-xl">{lead}</p>
|
|
)}
|
|
{tags && <div className="mt-8 flex flex-wrap gap-2">{tags}</div>}
|
|
{children}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|