Initial commit
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
GitBranch,
|
||||
Lock,
|
||||
Zap,
|
||||
Sparkles,
|
||||
MapPin,
|
||||
Server,
|
||||
Globe,
|
||||
Briefcase,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import GlassCard from "@/components/ui/GlassCard";
|
||||
import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
|
||||
import type { Dictionary, Locale } from "@/lib/dictionaries";
|
||||
|
||||
const highlightIcons = [GitBranch, Lock, Zap, Sparkles];
|
||||
|
||||
const factIcons = [MapPin, Server, Globe, Briefcase, Clock];
|
||||
|
||||
interface AboutContentProps {
|
||||
locale: Locale;
|
||||
dict: Dictionary;
|
||||
}
|
||||
|
||||
interface TextParagraph {
|
||||
type: "text";
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface LinkParagraph {
|
||||
type: "linkParagraph";
|
||||
before: string;
|
||||
linkText: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
type ApproachParagraph = TextParagraph | LinkParagraph;
|
||||
|
||||
export default function AboutContent({ locale, dict }: AboutContentProps) {
|
||||
const t = dict.aboutPage;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hero */}
|
||||
<section className="relative isolate flex min-h-[50svh] items-center overflow-hidden pt-32">
|
||||
<div className="pointer-events-none absolute inset-0 grid-bg [mask-image:radial-gradient(ellipse_at_center,#000_30%,transparent_70%)] opacity-30" />
|
||||
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: -8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mb-6 inline-flex items-center gap-2 rounded-full border border-purple-400/30 bg-purple-500/10 px-3.5 py-1.5 font-mono text-xs tracking-tight text-purple-300 backdrop-blur-md"
|
||||
>
|
||||
{t.badge}
|
||||
</motion.span>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="font-display text-display-xl font-medium tracking-tight"
|
||||
>
|
||||
<span className="text-gradient-fade">{t.title}</span>
|
||||
<br />
|
||||
<span className="text-gradient-purple">{t.titleAccent}</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-text-secondary sm:text-lg"
|
||||
>
|
||||
{t.subtitle}
|
||||
</motion.p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Approach + Quick facts */}
|
||||
<section className="relative w-full py-12 sm:py-16">
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.1)}
|
||||
className="grid grid-cols-1 gap-8 lg:grid-cols-3"
|
||||
>
|
||||
{/* Main text */}
|
||||
<motion.div variants={fadeUp} className="lg:col-span-2">
|
||||
<h2 className="mb-6 font-display text-3xl font-medium tracking-tight text-gradient-fade sm:text-4xl">
|
||||
{t.approachTitle}
|
||||
</h2>
|
||||
<div className="space-y-5 text-base leading-relaxed text-text-secondary">
|
||||
{t.approachParagraphs.map((p : ApproachParagraph, i : number) => {
|
||||
if (p.type === "text") {
|
||||
return <p key={i}>{p.content}</p>;
|
||||
}
|
||||
|
||||
if (p.type === "linkParagraph") {
|
||||
return (
|
||||
<p key={i}>
|
||||
{p.before}
|
||||
<Link
|
||||
href={`/${locale}${p.href}`}
|
||||
className="text-purple-300 underline"
|
||||
>
|
||||
{p.linkText}
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick facts */}
|
||||
<motion.div variants={fadeUp}>
|
||||
<GlassCard className="h-fit" hover={false}>
|
||||
<h3 className="mb-5 font-mono text-xs uppercase tracking-widest text-text-secondary">
|
||||
{t.quickFactsTitle}
|
||||
</h3>
|
||||
<dl className="space-y-3.5 text-sm">
|
||||
{t.facts.map((fact, i) => {
|
||||
const Icon = factIcons[i] || MapPin;
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center justify-between gap-3 border-b border-border/40 pb-3 last:border-0 last:pb-0"
|
||||
>
|
||||
<dt className="flex items-center gap-2 text-text-secondary">
|
||||
<Icon className="h-3.5 w-3.5 text-purple-400/60" strokeWidth={1.5} />
|
||||
{fact.label}
|
||||
</dt>
|
||||
<dd className="font-mono text-text-primary">{fact.value}</dd>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</dl>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Highlights */}
|
||||
<section className="relative w-full py-20 sm:py-24">
|
||||
<div className="relative mx-auto w-full max-w-7xl px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.06)}
|
||||
className="mx-auto mb-14 max-w-3xl text-center"
|
||||
>
|
||||
<motion.h2
|
||||
variants={fadeUp}
|
||||
className="font-display text-display-lg font-medium tracking-tight text-gradient-fade"
|
||||
>
|
||||
{t.highlightsTitle}
|
||||
</motion.h2>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportConfig}
|
||||
variants={stagger(0.1)}
|
||||
className="grid grid-cols-1 gap-4 sm:grid-cols-2"
|
||||
>
|
||||
{t.highlights.map((item, i) => {
|
||||
const Icon = highlightIcons[i] || Sparkles;
|
||||
return (
|
||||
<motion.div key={i} variants={fadeUp} className="group">
|
||||
<GlassCard className="h-full">
|
||||
<div className="flex gap-5">
|
||||
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl border border-purple-400/20 bg-purple-500/10 text-purple-300 transition-all duration-500 group-hover:border-purple-400/50 group-hover:bg-purple-500/20 group-hover:shadow-glow-sm">
|
||||
<Icon className="h-5 w-5" strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="mb-2 text-lg font-medium text-text-primary">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm leading-relaxed text-text-secondary">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</GlassCard>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user