// sections.jsx — components for Kadim Studios site // Each section is a self-contained component. App composes them. const { useState, useEffect, useRef } = React; /* ────────────── Icons (inline SVG, monoline) ────────────── */ const Icon = { web: () => ( ), mobile: () => ( ), code: () => ( ), arrow: () => ( ), check: () => ( ), menu: () => ( ), close: () => ( ), }; /* ────────────── Reveal helper ────────────── */ function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 } ); el.querySelectorAll(".reveal").forEach((n) => io.observe(n)); return () => io.disconnect(); }, []); return ref; } /* ────────────── Brand mark ────────────── */ function BrandMark() { return ( ); } /* ────────────── Nav ────────────── */ function Nav({ onMenuOpen, onContactClick }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 16); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( ); } /* ────────────── Mobile menu ────────────── */ function MobileMenu({ open, onClose }) { useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [open]); const go = (id) => { onClose(); setTimeout(() => { location.hash = id; }, 50); }; return (
go("top")}> Kadim
go("iletisim")}> Proje Başlat
); } /* ────────────── Hero ────────────── */ function Hero({ onContactClick, data }) { const d = data || {}; const subtitle = d.subtitle || "Markaların dijital varlığını özenle inşa eden bir yazılım ve tasarım stüdyosu. Web, mobil ve özel yazılım çözümlerinde estetik ile mühendisliği birleştiriyoruz."; const stats = [ { num: d.stat1num || "07+", lbl: d.stat1lbl || "Yıllık deneyim" }, { num: d.stat2num || "120+", lbl: d.stat2lbl || "Tamamlanan proje" }, { num: d.stat3num || "38+", lbl: d.stat3lbl || "Mutlu marka" }, ]; return (
Yazılım · Tasarım · Geliştirme

Kadim'den moderne, dijital zanaat.

{subtitle}

Hizmetleri gör
{stats.map((s, i) => (
{s.num} {s.lbl}
))}
Yeni projeler için müsait — 2026
); } /* ────────────── Services ────────────── */ const SERVICES = [ { idx: "01", icon: Icon.web, title: "Web", titleEm: "Tasarım", desc: "Markaya özel, hızlı yüklenen ve SEO uyumlu web siteleri. Tasarımdan canlıya, her piksel düşünülerek.", tags: ["Next.js", "WordPress", "E-Ticaret", "Headless CMS"], }, { idx: "02", icon: Icon.mobile, title: "Mobil", titleEm: "Uygulama", desc: "iOS ve Android için native his veren cross-platform uygulamalar. App Store'dan kullanıcıya, akıcı bir deneyim.", tags: ["React Native", "Flutter", "iOS", "Android"], }, { idx: "03", icon: Icon.code, title: "Özel", titleEm: "Yazılım", desc: "İşinize özel CRM, ERP ve SaaS çözümleri. API entegrasyonları, otomasyon ve ölçeklenebilir mimariler.", tags: ["SaaS", "API", "DevOps", "Cloud"], }, ]; const ICON_MAP = { web: Icon.web, mobile: Icon.mobile, code: Icon.code, design: Icon.web, cloud: Icon.code }; function Services({ data }) { const wrap = useReveal(); const list = (data && data.length > 0) ? data : SERVICES; const total = list.length; return (
Hizmetler · {String(total).padStart(2,"0")}

{total === 3 ? <>Üç disiplin, tek stüdyo. : <>Hizmetlerimiz, tek stüdyo.}

Tasarım, kod ve strateji aynı masada. Projelerinizi parçalara bölmeden, uçtan uca düşünerek hayata geçiriyoruz.

{list.map((s, i) => { const IconComp = s.icon && typeof s.icon === "function" ? s.icon : (ICON_MAP[s.icon] || Icon.code); const idx = String(i + 1).padStart(2, "0"); return (
{idx} / {String(total).padStart(2,"0")}

{s.title} {s.titleEm}

{s.desc}

{(s.tags||[]).map((t) => {t})}
Detaylı incele
); })}
); } /* ────────────── Philosophy marquee ────────────── */ function Philo() { const items = ["Estetik", "Mühendislik", "Detay", "Performans", "Zanaat", "Sadelik"]; const row = ( {items.map((it, i) => ( {i % 2 === 0 ? {it} : it} ✦ ))} ); return ( ); } /* ────────────── About ────────────── */ function About({ data }) { const ref = useReveal(); const d = data || {}; const p1 = d.p1 || "Kadim Studios, 2019'dan bu yana İstanbul merkezli çalışan bir dijital tasarım ve yazılım stüdyosudur. Markaların hikâyesini kodla anlatıyor; hız, erişilebilirlik ve estetik üçgeninde ürünler inşa ediyoruz."; const p2 = d.p2 || "Küçük ama özenli bir ekibiz. Her projeye aynı kişiler başlar ve aynı kişiler bitirir — bu yüzden detay kaybolmaz, vaat tutulur."; const list = d.list && d.list.length > 0 ? d.list : ["Uçtan uca tasarım & geliştirme", "Şeffaf süreç & haftalık demo", "Performans odaklı mimari", "Lansman sonrası destek"]; const quote = d.quote || "Detay, kadim olanın modern hâlidir."; const quoteAtt = d.quoteAtt || "— Stüdyo manifesto"; return (
Hakkımızda

Sade tasarım, sağlam kod.

Kadim Studios, {p1.replace(/^Kadim Studios,?\s*/i, "")}

{p2}

    {list.map((item, i) =>
  • {item}
    • )}
{quote} {quoteAtt}
); } /* ────────────── Approach (calismalar) ────────────── */ const STEPS = [ { n: "01", t: "Keşif", d: "İhtiyacı anlamak için derinlemesine konuşmalar, atölyeler ve hedef tanımı." }, { n: "02", t: "Tasarım", d: "Marka diline uygun, kullanıcı dostu arayüzler ve prototipler." }, { n: "03", t: "Geliştirme", d: "Temiz kod, ölçeklenebilir mimari, sürekli entegrasyon." }, { n: "04", t: "Lansman", d: "Yayın günü ve sonrası: izleme, optimizasyon, sürekli iyileştirme." }, ]; function Approach() { const ref = useReveal(); return (
Yaklaşım · 04 Adım

Süreç, şeffaf.

Her projede aynı disiplinli adımları takip ediyoruz: fikirden lansmana, tahmin edilebilir ritimle ilerleyen bir akış.

{STEPS.map((s) => (
{s.n}

{s.t}

{s.d}

))}
); } /* ────────────── Contact ────────────── */ const BUDGETS = ["< 50.000₺", "50–150K", "150–300K", "300K +"]; function Contact({ data: contactData = {} }) { const ref = useReveal(); const [form, setForm] = useState({ name: "", email: "", phone: "", company: "", service: "Web Tasarım", message: "", }); const [budget, setBudget] = useState("50–150K"); const [errors, setErrors] = useState({}); const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value }); const validate = () => { const e = {}; if (!form.name.trim()) e.name = "Adınızı girin."; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Geçerli bir e-posta girin."; if (form.message.trim().length < 10) e.message = "Birkaç cümle daha yazar mısınız?"; return e; }; const submit = (ev) => { ev.preventDefault(); const e = validate(); setErrors(e); if (Object.keys(e).length > 0) return; setSending(true); const db = window.__firebaseDb; if (db) { db.collection("messages").add({ name: form.name, email: form.email, phone: form.phone || "", company: form.company || "", service: form.service, budget: budget, message: form.message, read: false, date: firebase.firestore.FieldValue.serverTimestamp(), }) .then(() => { setSent(true); setSending(false); }) .catch(() => { setSent(true); setSending(false); }); } else { setTimeout(() => { setSent(true); setSending(false); }, 600); } }; return (
İletişim

Bir kahve, bir fikir.

Aklınızdaki projeyi anlatın. 48 saat içinde dönüş yapıyor, ilk görüşmeyi ücretsiz gerçekleştiriyoruz.

E-posta {contactData.email || "merhaba@kadimstudios.com"} Telefon {contactData.phone || "+90 (212) 000 00 00"} Stüdyo {contactData.address || "Cihangir, İstanbul"} Çalışma saatleri {contactData.hours || "Pzt–Cum · 10:00 – 19:00"}
{sent ? (

Teşekkürler, aldık.

En geç 48 saat içinde size dönüş yapacağız.

) : ( <>
{errors.name && {errors.name}}
{errors.email && {errors.email}}
{BUDGETS.map((b) => ( ))}