diff --git a/app/globals.css b/app/globals.css index a2ec23d..186c60e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,15 +2,23 @@ :root { --background: #ffffff; - --foreground: #0a0f1c; - --navy: #0f2c5c; - --navy-700: #15407f; - --navy-50: #eef3fb; - --sky: #4da3c7; - --sky-600: #2f87ad; - --sky-50: #ecf6fb; - --muted: #5b6577; - --border: #e5e9f0; + --foreground: #0f172a; + + /* Kovak brand palette (WP'den aktarıldı) */ + --navy: #043e8c; /* primary deep navy — CTA */ + --navy-700: #032d66; + --navy-50: #eff6ff; + --sky: #3b82f6; /* primary bright blue — accent */ + --sky-600: #2563eb; + --sky-50: #dbeafe; + + /* Dark hero gradient stops */ + --hero-dark-1: #0f172a; + --hero-dark-2: #1e293b; + --hero-dark-3: #334155; + + --muted: #64748b; + --border: #e2e8f0; } @theme inline { @@ -24,30 +32,52 @@ --color-sky-brand-50: var(--sky-50); --color-muted-foreground: var(--muted); --color-border-soft: var(--border); - --font-sans: var(--font-geist-sans); + --font-sans: var(--font-poppins); --font-mono: var(--font-geist-mono); } body { background: var(--background); color: var(--foreground); - font-family: var(--font-sans), Arial, Helvetica, sans-serif; + font-family: var(--font-poppins), Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; } +::-webkit-scrollbar { width: 5px; } +::-webkit-scrollbar-track { background: #f1f5f9; } +::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; } + .hero-grid { background-image: - radial-gradient(circle at 1px 1px, rgba(15, 44, 92, 0.08) 1px, transparent 0); + radial-gradient(circle at 1px 1px, rgba(4, 62, 140, 0.08) 1px, transparent 0); background-size: 24px 24px; } .gradient-text { - background: linear-gradient(90deg, var(--navy) 0%, var(--sky) 100%); + background: linear-gradient(135deg, var(--navy) 0%, var(--sky) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } +.hero-dark { + background: linear-gradient(135deg, var(--hero-dark-1) 0%, var(--hero-dark-2) 50%, var(--hero-dark-3) 100%); +} + +.hero-glow::before { + content: ''; + position: absolute; + inset: -50%; + background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%); + animation: hero-pulse 4s ease-in-out infinite; + pointer-events: none; +} + +@keyframes hero-pulse { + 0%, 100% { transform: scale(1); opacity: 0.5; } + 50% { transform: scale(1.1); opacity: 0.8; } +} + @keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } diff --git a/app/layout.tsx b/app/layout.tsx index 6356b33..634f4a9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,14 +1,16 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Poppins, Geist_Mono } from "next/font/google"; import "./globals.css"; import { siteConfig } from "@/lib/site-config"; import { ConsentInit } from "@/components/consent-init"; import { CookieBanner } from "@/components/cookie-banner"; import { getSeoSettings } from "@/lib/data"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], +const poppins = Poppins({ + variable: "--font-poppins", + subsets: ["latin", "latin-ext"], + weight: ["300", "400", "500", "600", "700", "800"], + display: "swap", }); const geistMono = Geist_Mono({ @@ -46,7 +48,7 @@ export default async function RootLayout({ return ( diff --git a/components/hero.tsx b/components/hero.tsx index 815c829..9e90977 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -1,11 +1,11 @@ -import Image from "next/image"; import Link from "next/link"; import { ArrowRight, Sparkles } from "lucide-react"; import type { SiteSettingsRow, StatItem } from "@/lib/types"; const DEFAULT_STATS: StatItem[] = [ - { value: "50+", label: "Tamamlanan proje" }, - { value: "10+", label: "Yıllık deneyim" }, + { value: "150+", label: "Tamamlanan proje" }, + { value: "50+", label: "Aktif müşteri" }, + { value: "100%", label: "Memnuniyet" }, { value: "24/7", label: "Teknik destek" }, ]; @@ -24,84 +24,97 @@ function parseStats(items?: string[] | null): StatItem[] { } export function Hero({ settings }: { settings?: SiteSettingsRow | null }) { - const badge = settings?.hero_badge ?? "Kocaeli'nin teknoloji ajansı"; + const badge = + settings?.hero_badge ?? "Kocaeli Web Tasarım & Yazılım Ajansı"; const title = - settings?.hero_title ?? "Fikirden ürüne tek bir partner ile yola çıkın"; + settings?.hero_title ?? + "Kocaeli Web Tasarım ve Yazılım Ajansı"; const subtitle = settings?.hero_subtitle ?? - "Web, mobil ve CRM çözümlerinde uçtan uca geliştirme. Markanıza özel tasarım, ölçeklenebilir altyapı ve uzun vadeli destek."; - const primaryLabel = - settings?.hero_cta_primary_label ?? "Proje görüşmesi başlat"; + "Kocaeli ve İzmit'te profesyonel web tasarım, SEO optimizasyonu ve özel yazılım çözümleri. 2015'ten bu yana işletmelere dijital dönüşümde rehberlik ediyoruz."; + const primaryLabel = settings?.hero_cta_primary_label ?? "Ücretsiz Teklif Al"; const primaryHref = settings?.hero_cta_primary_href ?? "/iletisim"; const secondaryLabel = - settings?.hero_cta_secondary_label ?? "Hizmetlerimizi inceleyin"; + settings?.hero_cta_secondary_label ?? "Hizmetlerimizi İnceleyin"; const secondaryHref = settings?.hero_cta_secondary_href ?? "/hizmetler"; const stats = parseStats(settings?.hero_stats); return ( -
-
-
+
+ {/* Grid pattern overlay */} +
-
-
- - - {badge} - +
+ + + {badge} + -

- {title} -

+

+ {title.split(" ").map((word, i, arr) => { + // Highlight key words in blue (Web Tasarım, Yazılım) + const highlight = + word.toLowerCase().includes("web") || + word.toLowerCase().includes("tasarım") || + word.toLowerCase().includes("yazılım") || + word.toLowerCase().includes("ajansı"); + return ( + + + {word} + + {i < arr.length - 1 && " "} + + ); + })} +

-

- {subtitle} -

+

+ {subtitle} +

-
- - {primaryLabel} - - - - {secondaryLabel} - -
- - {stats.length > 0 && ( -
- {stats.map((stat) => ( -
-
- {stat.value} -
-
{stat.label}
-
- ))} -
- )} -
- -
-
-
- Kovak Yazılım -
+
+ + {primaryLabel} + + + + {secondaryLabel} +
+ + {/* Stats strip — pinned bottom of hero */} + {stats.length > 0 && ( +
+
+ {stats.map((stat) => ( +
+

+ {stat.value} +

+

+ {stat.label} +

+
+ ))} +
+
+ )}
); }