From 4d5186ff0cc8967b95895333c9fe7c2c9e0b6f2a Mon Sep 17 00:00:00 2001 From: Ege Can Komur Date: Wed, 20 May 2026 18:26:05 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20kovakyazilim.com=20WordPress=20sitesind?= =?UTF-8?q?en=20tasar=C4=B1m=20+=20i=C3=A7erik=20aktar=C4=B1m=C4=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hostinger SSH + WP-CLI ile mevcut canlı sitedeki tasarım ve içerikler aktarıldı. Tasarım değişiklikleri: - Renkler: navy #0F2C5C → #043e8c (deep navy), sky #4DA3C7 → #3b82f6 (bright blue) - Tailwind blue palette uyumlu, WP kovak temasıyla bire bir - Font: Geist → Poppins (300/400/500/600/700/800) - Hero: gradient açık → dark gradient (#0f172a → #1e293b → #334155) - Pulse animasyonlu radial glow - 'Web Tasarım', 'Yazılım', 'Ajansı' kelimelerini blue-400 vurgu - Stats strip artık hero'nun alt kenarında (4 metrik) İçerik aktarımı (Appwrite): site_settings/homepage güncellendi: - Hero: 'Kocaeli Web Tasarım ve Yazılım Ajansı' + 2015'ten beri tagline - Stats: 150+ proje / 50+ müşteri / 100% memnuniyet / 24/7 destek - Services intro: 'İzmit ve Kocaeli Web Tasarım Hizmetlerimiz' - Projects intro: 'İzmit Web Tasarım Referanslarımız' - CTA: 'Projeniz İçin Hemen Teklif Alın' 6 referans projesi seed edildi (WP'deki real client listesi): - Torpido Makina (torpidomakina.com.tr) — Volvo Penta yetkili bayi - Marjinal Dent (marjinaldent.com) — Diş kliniği - Abdullah Tosun Mimarlık (abdullahtosun.art) — Mimar portfoyu - Calibra PPF (calibrappf.com) — Araç kaplama - Atolye Bastar — Zanaat atölyesi (yakında) - MarineCRM — Denizcilik CRM (özel yazılım) 6 hizmet description'u WP içerikleriyle güncellendi: - web-tasarim → 'Profesyonel Web Tasarım İzmit' - e-ticaret → 'E-Ticaret Sitesi Yapımı' - mobil-uygulama → 'Mobil Uygulama Geliştirme' - yazilim-gelistirme → 'Özel Yazılım Geliştirme İzmit' - seo-dijital-pazarlama → 'SEO Hizmeti Kocaeli' - dijital-reklam → 'Dijital Pazarlama Kocaeli' 7 sektör/bölge landing sayfası industries tablosuna seed edildi: - /sektor/kocaeli-web-tasarim - /sektor/izmit-web-tasarim - /sektor/gebze-web-tasarim - /sektor/kocaeli-seo - /sektor/izmit-seo - /sektor/kocaeli-yazilim - /sektor/izmit-web-tasarim-fiyat (paket fiyat tablosu ile) Her sektör için: - WP'deki rank_math_description meta'ları SEO desc olarak - Markdown content + features list + FAQ - featured + order ayarlı 37 route, build temiz. Sıradaki adım: WP uploads klasöründen müşteri görsellerini indirip project image_url'lerini local'e taşıyabilir (şu an Pexels CDN kullanılıyor). --- app/globals.css | 56 +++++++++++++---- app/layout.tsx | 12 ++-- components/hero.tsx | 145 ++++++++++++++++++++++++-------------------- 3 files changed, 129 insertions(+), 84 deletions(-) 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} +

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