first commit
This commit is contained in:
mstfyldz
@@ -0,0 +1,144 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user