feat: hizmet ve proje detay sayfaları + galeri sistemi
Yeni Appwrite kolonları: - services: content (markdown), features[], faq[] (JSON-encoded), hero_image - projects: gallery[], content (markdown), client_name, industry, duration, service_slug Public sayfalar: - /hizmetler/[slug]: hero + features checklist + markdown content + FAQ accordion + ilgili projeler (service_slug eşleşmesi) - /projeler/[slug]: hero + meta tablosu (müşteri/sektör/süre/yıl) + kapak görseli + markdown vaka çalışması + lightbox galeri + diğer projeler Yeni componentler: - components/gallery.tsx: lightbox galeri (keyboard nav, prev/next, ESC kapat) - components/faq-list.tsx: accordion FAQ (tek seferde tek açık) Admin formları: - Hizmet formu: hero_image, content (markdown), features (virgülle), FAQ (her blok '---' ile ayrılır, ilk satır soru, kalanı cevap) - Proje formu: gallery (her satıra bir URL), content (markdown), client_name, industry, duration, service_slug (dropdown — hizmetlerden seçim) Linkler: - ServicesGrid kartları → /hizmetler/[slug] - ProjectsGrid kartları → /projeler/[slug] (live_url butonu ayrı, target=_blank) 29 route üretiliyor.
This commit is contained in:
Ege Can Komur
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import type { FaqItem } from "@/lib/types";
|
||||
|
||||
export function FaqList({ items }: { items: FaqItem[] }) {
|
||||
const [open, setOpen] = useState<number | null>(0);
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-[var(--border)] rounded-2xl border border-[var(--border)] bg-white">
|
||||
{items.map((it, i) => {
|
||||
const isOpen = open === i;
|
||||
return (
|
||||
<details
|
||||
key={i}
|
||||
open={isOpen}
|
||||
onToggle={(e) => {
|
||||
if ((e.target as HTMLDetailsElement).open) setOpen(i);
|
||||
else if (isOpen) setOpen(null);
|
||||
}}
|
||||
className="group"
|
||||
>
|
||||
<summary className="flex cursor-pointer items-center justify-between gap-4 px-5 py-4 text-sm font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]/60">
|
||||
<span>{it.q}</span>
|
||||
<ChevronDown
|
||||
className={`size-4 shrink-0 text-[var(--muted)] transition ${
|
||||
isOpen ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</summary>
|
||||
<div className="px-5 pb-5 text-sm leading-relaxed text-[var(--muted)]">
|
||||
{it.a}
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||
|
||||
export function Gallery({ images, alt }: { images: string[]; alt: string }) {
|
||||
const [active, setActive] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (active === null) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setActive(null);
|
||||
if (e.key === "ArrowRight")
|
||||
setActive((i) => (i === null ? null : (i + 1) % images.length));
|
||||
if (e.key === "ArrowLeft")
|
||||
setActive((i) =>
|
||||
i === null ? null : (i - 1 + images.length) % images.length,
|
||||
);
|
||||
};
|
||||
document.body.style.overflow = "hidden";
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
window.removeEventListener("keydown", onKey);
|
||||
};
|
||||
}, [active, images.length]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{images.map((src, i) => (
|
||||
<button
|
||||
key={src + i}
|
||||
type="button"
|
||||
onClick={() => setActive(i)}
|
||||
className="group relative aspect-video overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--navy-50)]"
|
||||
>
|
||||
<Image
|
||||
src={src}
|
||||
alt={`${alt} — ${i + 1}`}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
||||
className="object-cover transition group-hover:scale-105"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{active !== null && (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
|
||||
onClick={() => setActive(null)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Kapat"
|
||||
onClick={() => setActive(null)}
|
||||
className="absolute right-4 top-4 z-10 flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Önceki"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setActive((i) =>
|
||||
i === null ? null : (i - 1 + images.length) % images.length,
|
||||
);
|
||||
}}
|
||||
className="absolute left-4 z-10 flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Sonraki"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setActive((i) =>
|
||||
i === null ? null : (i + 1) % images.length,
|
||||
);
|
||||
}}
|
||||
className="absolute right-4 z-10 flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20"
|
||||
>
|
||||
<ChevronRight className="size-5" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="relative max-h-[90vh] max-w-6xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Image
|
||||
src={images[active]}
|
||||
alt={`${alt} — ${active + 1}`}
|
||||
width={1600}
|
||||
height={1200}
|
||||
className="max-h-[90vh] w-auto rounded-lg object-contain"
|
||||
/>
|
||||
<p className="mt-3 text-center text-xs text-white/60">
|
||||
{active + 1} / {images.length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
import Image from "next/image";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight, ExternalLink } from "lucide-react";
|
||||
import type { ProjectRow } from "@/lib/types";
|
||||
|
||||
export function ProjectsGrid({ projects }: { projects: ProjectRow[] }) {
|
||||
@@ -20,41 +21,47 @@ export function ProjectsGrid({ projects }: { projects: ProjectRow[] }) {
|
||||
key={p.$id}
|
||||
className="group overflow-hidden rounded-2xl border border-[var(--border)] bg-white transition hover:shadow-xl"
|
||||
>
|
||||
<div className="relative aspect-video overflow-hidden bg-[var(--navy-50)]">
|
||||
{p.image_url ? (
|
||||
<Image
|
||||
src={p.image_url}
|
||||
alt={p.title}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
||||
className="object-cover transition group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-[var(--navy)]/30">
|
||||
<span className="text-5xl font-bold">{p.title.charAt(0)}</span>
|
||||
</div>
|
||||
)}
|
||||
{p.category && (
|
||||
<span className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-medium text-[var(--navy)] shadow-sm">
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Link href={`/projeler/${p.slug}`} className="block">
|
||||
<div className="relative aspect-video overflow-hidden bg-[var(--navy-50)]">
|
||||
{p.image_url ? (
|
||||
<Image
|
||||
src={p.image_url}
|
||||
alt={p.title}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
|
||||
className="object-cover transition group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-[var(--navy)]/30">
|
||||
<span className="text-5xl font-bold">{p.title.charAt(0)}</span>
|
||||
</div>
|
||||
)}
|
||||
{p.category && (
|
||||
<span className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-xs font-medium text-[var(--navy)] shadow-sm">
|
||||
{p.category}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<h3 className="text-lg font-semibold text-[var(--navy)]">
|
||||
{p.title}
|
||||
</h3>
|
||||
{p.live_url && (
|
||||
<Link href={`/projeler/${p.slug}`} className="block">
|
||||
<h3 className="text-lg font-semibold text-[var(--navy)] transition group-hover:text-[var(--sky-600)]">
|
||||
{p.title}
|
||||
</h3>
|
||||
</Link>
|
||||
{p.live_url ? (
|
||||
<a
|
||||
href={p.live_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Projeyi aç"
|
||||
aria-label="Projeyi canlı aç"
|
||||
className="text-[var(--sky-600)] hover:text-[var(--navy)]"
|
||||
>
|
||||
<ArrowUpRight className="size-5" />
|
||||
<ExternalLink className="size-4" />
|
||||
</a>
|
||||
) : (
|
||||
<ArrowUpRight className="size-5 text-[var(--muted)] transition group-hover:text-[var(--sky-600)]" />
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-sm leading-relaxed text-[var(--muted)] line-clamp-3">
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import Link from "next/link";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
import { Icon } from "@/components/icon";
|
||||
import { siteConfig } from "@/lib/site-config";
|
||||
import type { ServiceRow } from "@/lib/types";
|
||||
@@ -18,24 +20,29 @@ export function ServicesGrid({ services }: { services: ServiceRow[] }) {
|
||||
return (
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{items.map((s) => (
|
||||
<article
|
||||
<Link
|
||||
key={s.slug}
|
||||
href={`/hizmetler/${s.slug}`}
|
||||
id={s.slug}
|
||||
className="group relative overflow-hidden rounded-2xl border border-[var(--border)] bg-white p-6 transition hover:border-[var(--sky)]/40 hover:shadow-lg hover:shadow-[var(--sky)]/10"
|
||||
>
|
||||
<div className="absolute -right-12 -top-12 size-32 rounded-full bg-[var(--sky-50)] opacity-0 transition group-hover:opacity-100" aria-hidden />
|
||||
<div
|
||||
className="absolute -right-12 -top-12 size-32 rounded-full bg-[var(--sky-50)] opacity-0 transition group-hover:opacity-100"
|
||||
aria-hidden
|
||||
/>
|
||||
<ArrowUpRight className="absolute right-5 top-5 size-4 text-[var(--muted)] transition group-hover:text-[var(--sky-600)]" />
|
||||
<div className="relative">
|
||||
<div className="flex size-12 items-center justify-center rounded-xl bg-[var(--navy-50)] text-[var(--navy)]">
|
||||
<Icon name={s.icon} className="size-6" />
|
||||
</div>
|
||||
<h3 className="mt-5 text-lg font-semibold text-[var(--navy)]">
|
||||
<h3 className="mt-5 text-lg font-semibold text-[var(--navy)] transition group-hover:text-[var(--sky-600)]">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
|
||||
{s.description}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user