Initial impact.tr site

V3 landing: white + violet + yellow accent, bold editorial.
Markdown-driven content: 3 yarışma formatı (hands-on, ideathon, robo-soccer),
5 edisyon (Ataköy, Çemberlitaş Ideathon '25, Çemberlitaş HoC '26, İstanbul/Ankara Robo Soccer).
Sayfalar: anasayfa, yarışma/edisyon detayları, sponsor, hakkımızda, iletişim.
40 Çemberlitaş fotoğrafı (1600px optimize, ~6.4 MB).
Content helper (gray-matter + marked), reviews/photos registry,
iletişim/ekip tek kaynak lib/contact.ts.
Next.js 16 standalone build, Docker + compose hazır.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/app/hakkimizda/page.tsx

@@ -0,0 +1,131 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import { PageHero } from "@/components/PageHero";
+import { PhotoStrip } from "@/components/PhotoStrip";
+import { Section } from "@/components/Section";
+import { sdgs, site, team, values } from "@/lib/contact";
+import { photos } from "@/lib/reviews";
+
+export const metadata: Metadata = {
+  title: "Hakkımızda",
+  description: site.description,
+};
+
+export default function AboutPage() {
+  const heroPhoto = photos.cemberlitas[18];
+  const sidePhotos = [11, 27, 33].map((i) => photos.cemberlitas[i]);
+  const strip = [4, 16, 22, 39].map((i) => photos.cemberlitas[i]);
+
+  return (
+    <>
+      <PageHero
+        eyebrow="Hakkımızda"
+        title={<>STEM için, gençler tarafından</>}
+        lead="Impact; robotik yarışmaları, ideathonlar ve eğitim programlarıyla Türkiye'de STEM ekosisteminin her geçen gün gelişmesini sağlayan bir gençlik topluluğu."
+        variant="photo"
+        photo={{ src: heroPhoto.src, alt: "Impact etkinlikten bir kare" }}
+      />
+
+      {/* MISSION */}
+      <Section eyebrow="Misyon" title="Hedefimiz">
+        <div className="grid gap-10 md:grid-cols-12">
+          <div className="md:col-span-7">
+            <p className="text-xl leading-relaxed text-neutral-800">
+              Bilim, teknoloji, mühendislik ve matematiği{" "}
+              <strong className="font-black">herkes için erişilebilir</strong> kılmak;
+              ilham veren bir gelecek tasarlamak ve gençleri 21. yüzyılın becerileriyle
+              buluşturmak.
+            </p>
+            <p className="mt-6 text-lg leading-relaxed text-neutral-700">
+              Her etkinliğimiz, geleceği sadece anlayan değil aktif olarak inşa eden bir
+              nesil yetiştirmeyi hedefler. Gençleri eğitim, sosyal etki ve sürdürülebilir
+              kalkınmanın kesişiminde gerçek dünya teknolojileriyle tanıştırıyoruz.
+            </p>
+          </div>
+          <div className="grid grid-cols-3 gap-3 md:col-span-5">
+            {sidePhotos.map((p) => (
+              <div
+                key={p.src}
+                className="relative aspect-[3/4] overflow-hidden border-2 border-neutral-900 bg-neutral-200"
+              >
+                <Image
+                  src={p.src}
+                  alt=""
+                  fill
+                  sizes="(min-width: 768px) 15vw, 33vw"
+                  className="object-cover"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Section>
+
+      {/* TEAM */}
+      <Section tone="muted" eyebrow="Ekip" title="Kurucu ekip">
+        <div className="grid gap-5 md:grid-cols-3">
+          {team.map((m) => (
+            <div
+              key={m.name}
+              className="flex flex-col justify-between gap-8 border-2 border-neutral-900 bg-white p-8"
+            >
+              <div>
+                <span className="inline-flex size-14 items-center justify-center bg-violet-700 text-base font-black text-white">
+                  {m.name
+                    .split(" ")
+                    .map((w) => w[0])
+                    .slice(0, 2)
+                    .join("")}
+                </span>
+                <div className="mt-6 text-2xl font-black leading-tight tracking-tight">
+                  {m.name}
+                </div>
+                <div className="mt-2 text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
+                  {m.role}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* PHOTO STRIP */}
+      <section className="border-b-2 border-neutral-900 bg-white">
+        <div className="mx-auto max-w-[1400px] px-6 py-14 md:px-10">
+          <PhotoStrip photos={strip} />
+        </div>
+      </section>
+
+      {/* VALUES */}
+      <Section eyebrow="Değerler" title="Bizi yönlendiren altı ilke">
+        <div className="flex flex-wrap gap-2">
+          {values.map((v) => (
+            <span
+              key={v}
+              className="border-2 border-neutral-900 bg-white px-5 py-2.5 text-sm font-black uppercase tracking-[0.2em]"
+            >
+              {v}
+            </span>
+          ))}
+        </div>
+      </Section>
+
+      {/* SDG */}
+      <Section tone="dark" eyebrow="Sürdürülebilir kalkınma" title="Desteklediğimiz BM SDG'leri">
+        <div className="grid gap-4 md:grid-cols-4">
+          {sdgs.map((s) => (
+            <div
+              key={s.number}
+              className="border-2 border-white/30 bg-white/5 p-6"
+            >
+              <div className="text-5xl font-black text-yellow-300">{s.number}</div>
+              <div className="mt-4 text-sm font-black uppercase tracking-[0.15em]">
+                {s.name}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+    </>
+  );
+}