77 lines
2.9 KiB
TypeScript
77 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
import type { Locale } from "@/i18n-config";
|
|
|
|
const expo = [0.16, 1, 0.3, 1] as [number, number, number, number];
|
|
|
|
export default function ProcessClient({ lang, dict }: { lang: Locale; dict: any }) {
|
|
const processes = dict.process.items as any[];
|
|
|
|
return (
|
|
<div className="bg-[#F4F0E8] text-[#0A0A0A] font-body min-h-screen">
|
|
<Header lang={lang} dict={dict.nav} />
|
|
|
|
<main className="pt-32 pb-24 px-6 max-w-7xl mx-auto">
|
|
|
|
<div className="border-b border-[#C8C2B8] pb-12 mb-16">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="w-3 h-3 bg-[#FFE600]" />
|
|
<span className="font-mono text-[10px] tracking-[0.3em] uppercase text-[#A0998E]">{dict.process.badge}</span>
|
|
</div>
|
|
<motion.h1
|
|
className="font-display font-black text-5xl sm:text-6xl lg:text-8xl uppercase leading-[0.85] tracking-tight"
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, ease: expo }}
|
|
>
|
|
{dict.process.title}
|
|
</motion.h1>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-px bg-[#C8C2B8]">
|
|
{processes.map((p: any, idx: number) => (
|
|
<motion.div
|
|
key={idx}
|
|
className="group bg-[#F4F0E8] p-10 relative overflow-hidden"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: idx * 0.12, duration: 0.6 }}
|
|
whileHover={{ backgroundColor: "#EDE8E0" }}
|
|
>
|
|
<div className="absolute top-0 right-0 font-display font-black text-[7rem] leading-none text-[#E8E3DC] select-none pointer-events-none">
|
|
{p.num}
|
|
</div>
|
|
|
|
<div className="relative z-10">
|
|
<motion.div
|
|
className="w-8 h-1 bg-[#FFE600] mb-8"
|
|
initial={{ scaleX: 0 }}
|
|
whileInView={{ scaleX: 1 }}
|
|
viewport={{ once: true }}
|
|
style={{ transformOrigin: "left" }}
|
|
transition={{ delay: idx * 0.12 + 0.3, duration: 0.5 }}
|
|
/>
|
|
<div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-4">
|
|
{p.timeframe}
|
|
</div>
|
|
<h3 className="font-display font-black text-lg uppercase text-[#0A0A0A] mb-4 group-hover:text-[#0A0A0A]">
|
|
{p.title}
|
|
</h3>
|
|
<p className="text-[#7A7470] text-[13px] leading-relaxed">
|
|
{p.desc}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</main>
|
|
|
|
<Footer lang={lang} dict={dict} />
|
|
</div>
|
|
);
|
|
}
|