145 lines
7.3 KiB
TypeScript
145 lines
7.3 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];
|
||
|
||
const IconAI = () => (
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="3" y="3" width="18" height="18" rx="1" />
|
||
<path d="M9 3v18M15 3v18M3 9h18M3 15h18" />
|
||
<circle cx="9" cy="9" r="1.5" fill="currentColor" />
|
||
<circle cx="15" cy="15" r="1.5" fill="currentColor" />
|
||
</svg>
|
||
);
|
||
const IconChain = () => (
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
|
||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
||
<path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" />
|
||
</svg>
|
||
);
|
||
const IconMobile = () => (
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="5" y="2" width="14" height="20" rx="2" />
|
||
<path d="M12 18h.01" />
|
||
</svg>
|
||
);
|
||
const IconWeb = () => (
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round">
|
||
<rect x="3" y="4" width="18" height="16" rx="1" />
|
||
<path d="M3 9h18M8 6h.01M11 6h.01M14 6h.01" />
|
||
</svg>
|
||
);
|
||
|
||
export default function ServicesClient({ lang, dict }: { lang: Locale; dict: any }) {
|
||
const services = [
|
||
{
|
||
icon: <IconAI />, title: dict.services.items.ai.title, code: "AI / ML", desc: dict.services.items.ai.desc, accent: "#FFE600",
|
||
items: lang === "tr"
|
||
? ["Tahmin Modelleri", "Doğal Dil İşleme", "Bilgisayarlı Görü", "Etmen İş Akışları", "Özel Gömme Uzayları", "RAG Sistemleri"]
|
||
: ["Predictive Models", "Natural Language Processing", "Computer Vision", "Agentic Workflows", "Custom Embeddings", "RAG Deployments"],
|
||
},
|
||
{
|
||
icon: <IconChain />, title: dict.services.items.blockchain.title, code: "BC / WEB3", desc: dict.services.items.blockchain.desc, accent: "#FF4500",
|
||
items: lang === "tr"
|
||
? ["Akıllı Sözleşme Denetimi", "DeFi Mimarileri", "Tokenomik Tasarımı", "Çapraz Zincir Köprüleri", "EVM Optimizasyonu", "IPFS Entegrasyonu"]
|
||
: ["Smart Contract Audit", "DeFi Architectures", "Tokenomics Design", "Cross-chain Bridges", "EVM Optimizations", "IPFS Integration"],
|
||
},
|
||
{
|
||
icon: <IconMobile />, title: dict.services.items.mobile.title, code: "MOB / DART", desc: dict.services.items.mobile.desc, accent: "#0A0A0A",
|
||
items: lang === "tr"
|
||
? ["Evrensel Kod Tabanı", "Çevrimdışı Senkronizasyon", "Biyometrik Protokoller", "Optimize Çekirdek Paket", "Push Bildirim Mimarisi", "Mağaza Operasyonları"]
|
||
: ["Universal Codebase", "Offline Syncing", "Biometric Protocols", "Optimized Core Bundle", "Push Notification Architecture", "App Store Operations"],
|
||
},
|
||
{
|
||
icon: <IconWeb />, title: dict.services.items.web.title, code: "WEB / NEXT", desc: dict.services.items.web.desc, accent: "#00CC77",
|
||
items: lang === "tr"
|
||
? ["Next.js App Router", "Sunucu Bileşenleri", "Headless E-Ticaret", "Modüler API Ağı", "Tailwind CSS Entegrasyonu", "Vercel Kenar Telemetrisi"]
|
||
: ["Next.js App Router", "Server Components", "Headless Commerce", "Modular API Mesh", "Tailwind CSS Integration", "Vercel Edge Telemetry"],
|
||
},
|
||
];
|
||
|
||
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.services.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.services.title}
|
||
</motion.h1>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 gap-px bg-[#C8C2B8]">
|
||
{services.map((s, idx) => (
|
||
<motion.div
|
||
key={idx}
|
||
className="group bg-[#F4F0E8] grid grid-cols-1 lg:grid-cols-12 relative overflow-hidden"
|
||
initial={{ opacity: 0 }}
|
||
whileInView={{ opacity: 1 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
whileHover={{ backgroundColor: "#EDE8E0" }}
|
||
>
|
||
{/* Left */}
|
||
<div className="lg:col-span-5 p-10 border-b lg:border-b-0 lg:border-r border-[#C8C2B8] flex flex-col justify-between">
|
||
<div>
|
||
<div className="flex items-start justify-between mb-8">
|
||
<div className="w-14 h-14 border border-[#C8C2B8] group-hover:border-[#0A0A0A] group-hover:bg-[#0A0A0A] group-hover:text-[#FFE600] flex items-center justify-center text-[#8A8480] transition-colors duration-200">
|
||
{s.icon}
|
||
</div>
|
||
<span className="font-mono text-[9px] tracking-[0.25em] uppercase text-[#C8C2B8] group-hover:text-[#A0998E] transition-colors">
|
||
{s.code}
|
||
</span>
|
||
</div>
|
||
<h2 className="font-display font-black text-3xl uppercase mb-4 group-hover:text-[#0A0A0A]">
|
||
{s.title}
|
||
</h2>
|
||
<p className="text-[#7A7470] text-[14px] leading-relaxed">
|
||
{s.desc}
|
||
</p>
|
||
</div>
|
||
<div className="font-display font-black text-[6rem] leading-none text-[#E8E3DC] select-none mt-4">
|
||
{String(idx + 1).padStart(2, "0")}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right */}
|
||
<div className="lg:col-span-7 p-10 flex flex-col justify-center">
|
||
<div className="font-mono text-[9px] tracking-[0.3em] uppercase text-[#A0998E] mb-8">
|
||
{dict.services.deliverablesLabel}
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{s.items.map((item: string) => (
|
||
<div key={item} className="flex items-center gap-4 group/item cursor-default">
|
||
<div className="w-1 h-4 flex-shrink-0 group-hover/item:h-6 transition-all duration-200" style={{ backgroundColor: s.accent }} />
|
||
<span className="font-display font-bold text-[14px] uppercase text-[#8A8480] group-hover/item:text-[#0A0A0A] transition-colors">
|
||
{item}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</main>
|
||
|
||
<Footer lang={lang} dict={dict} />
|
||
</div>
|
||
);
|
||
}
|