104 lines
3.8 KiB
TypeScript
104 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const ease = [0.22, 1, 0.36, 1] as [number, number, number, number];
|
|
|
|
export default function NotePPPage() {
|
|
const t = useTranslations();
|
|
|
|
const guides = [
|
|
{
|
|
image: "/images/about/pp.avif",
|
|
title: t("about.notePPPage.hero.title"),
|
|
description: t("about.notePPPage.hero.description"),
|
|
eyebrow: t("about.notePPPage.hero.eyebrow"),
|
|
titleLine1: t("about.notePPPage.hero.titleLine1"),
|
|
titleLine2: t("about.notePPPage.hero.titleLine2"),
|
|
},
|
|
{
|
|
image: "/images/about/pp.avif",
|
|
title: t("about.noteTrailerPage.hero.title"),
|
|
description: t("about.noteTrailerPage.hero.description"),
|
|
eyebrow: t("about.noteTrailerPage.hero.eyebrow"),
|
|
titleLine1: t("about.noteTrailerPage.hero.titleLine1"),
|
|
titleLine2: t("about.noteTrailerPage.hero.titleLine2"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<main className="min-h-screen bg-[#0f0e0d] text-white pb-40">
|
|
{/* Hero Section */}
|
|
<div className="flex flex-col gap-10">
|
|
{guides.map((guide, index) => (
|
|
<section
|
|
key={index}
|
|
className="relative w-full h-120 md:h-145 overflow-hidden"
|
|
>
|
|
<Image
|
|
src={guide.image}
|
|
alt={t("about.notePPPage.hero.title")}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
|
|
<div className="absolute inset-0 bg-black/45" />
|
|
<div className="absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-[#0f0e0d]" />
|
|
|
|
<div
|
|
className="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
|
|
style={{
|
|
backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
|
|
}}
|
|
/>
|
|
|
|
<div className="relative z-10 flex flex-col justify-end h-full max-w-6xl mx-auto px-6 pb-16 md:pb-20">
|
|
<motion.span
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600 mb-4"
|
|
>
|
|
{guide.eyebrow}
|
|
</motion.span>
|
|
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 28 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.65, ease, delay: 0.08 }}
|
|
className="text-5xl md:text-7xl font-black uppercase leading-[0.92] tracking-tight text-white"
|
|
>
|
|
{guide.titleLine1}
|
|
<br />
|
|
<span className="text-red-600">{guide.titleLine2}</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease, delay: 0.2 }}
|
|
className="mt-5 max-w-xl text-sm md:text-base text-gray-300 leading-relaxed"
|
|
>
|
|
{guide.description}
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ scaleX: 0 }}
|
|
animate={{ scaleX: 1 }}
|
|
transition={{ delay: 0.35, duration: 0.8, ease }}
|
|
style={{ originX: 0 }}
|
|
className="mt-8 w-20 h-px bg-red-600"
|
|
/>
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|