Ege Can Komur
3b3efafcc8
- Anasayfa, Hizmetler, Projeler, Hakkımızda, İletişim sayfaları - Header/Footer, Hero, ServicesGrid, ProjectsGrid, ContactForm bileşenleri - Appwrite TablesDB entegrasyonu (services, projects, contact_messages) - Server Action ile iletişim formu (submitContact) - Brand palette: navy #0F2C5C + sky #4DA3C7 - kovakyazilim.com'dan alınan logo public/logo.png
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { ArrowRight, Sparkles } from "lucide-react";
|
||
|
||
export function Hero() {
|
||
return (
|
||
<section className="relative overflow-hidden">
|
||
<div className="absolute inset-0 hero-grid opacity-60" aria-hidden />
|
||
<div className="absolute -right-32 top-1/2 -z-0 size-[520px] -translate-y-1/2 rounded-full bg-gradient-to-br from-[var(--sky)]/30 to-[var(--navy)]/0 blur-3xl" aria-hidden />
|
||
|
||
<div className="relative mx-auto grid max-w-7xl items-center gap-12 px-6 py-24 md:grid-cols-2 md:py-32">
|
||
<div>
|
||
<span className="inline-flex items-center gap-2 rounded-full border border-[var(--sky)]/30 bg-[var(--sky-50)] px-3 py-1 text-xs font-medium text-[var(--sky-600)]">
|
||
<Sparkles className="size-3.5" />
|
||
Kocaeli'nin teknoloji ajansı
|
||
</span>
|
||
|
||
<h1 className="mt-6 text-4xl font-bold leading-tight tracking-tight text-[var(--navy)] sm:text-5xl md:text-6xl">
|
||
Fikirden ürüne{" "}
|
||
<span className="gradient-text">tek bir partner</span> ile yola çıkın
|
||
</h1>
|
||
|
||
<p className="mt-6 max-w-xl text-lg leading-relaxed text-[var(--muted)]">
|
||
Web, mobil ve CRM çözümlerinde uçtan uca geliştirme. Markanıza
|
||
özel tasarım, ölçeklenebilir altyapı ve uzun vadeli destek.
|
||
</p>
|
||
|
||
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
|
||
<Link
|
||
href="/iletisim"
|
||
className="inline-flex items-center justify-center gap-2 rounded-full bg-[var(--navy)] px-6 py-3 text-sm font-medium text-white transition hover:bg-[var(--navy-700)]"
|
||
>
|
||
Proje görüşmesi başlat
|
||
<ArrowRight className="size-4" />
|
||
</Link>
|
||
<Link
|
||
href="/hizmetler"
|
||
className="inline-flex items-center justify-center gap-2 rounded-full border border-[var(--border)] bg-white px-6 py-3 text-sm font-medium text-[var(--navy)] transition hover:border-[var(--navy)]"
|
||
>
|
||
Hizmetlerimizi inceleyin
|
||
</Link>
|
||
</div>
|
||
|
||
<dl className="mt-12 grid max-w-md grid-cols-3 gap-6">
|
||
{[
|
||
{ value: "50+", label: "Tamamlanan proje" },
|
||
{ value: "10+", label: "Yıllık deneyim" },
|
||
{ value: "24/7", label: "Teknik destek" },
|
||
].map((stat) => (
|
||
<div key={stat.label}>
|
||
<dt className="text-2xl font-bold text-[var(--navy)]">{stat.value}</dt>
|
||
<dd className="mt-1 text-xs text-[var(--muted)]">{stat.label}</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
|
||
<div className="relative flex justify-center">
|
||
<div className="absolute inset-8 -z-10 rounded-full bg-gradient-to-br from-[var(--sky-50)] to-white blur-2xl" aria-hidden />
|
||
<div className="animate-float">
|
||
<Image
|
||
src="/logo.png"
|
||
alt="Kovak Yazılım"
|
||
width={420}
|
||
height={420}
|
||
priority
|
||
className="size-[320px] object-contain drop-shadow-[0_30px_50px_rgba(15,44,92,0.25)] md:size-[420px]"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|