Landing Page — Portal Stil Senkronizasyonu

Tarih: 2026-04-02 Amaç: Landing page’i new-ui portalının tasarım diliyle tutarlı hale getirmek.

Kapsam

Mevcut bileşenler ve bölüm sırası korunur. Sadece stil katmanı güncellenir:

• Fontlar
• Köşe radiusları
• Kart/panel aksanları
• Buton şekilleri
• Badge şekilleri
• Teal renk kullanımı

1. Tipografi

Font Değişikliği

Eski	Yeni	Kullanım
Chakra Petch	Rajdhani (500/600/700)	Başlıklar, butonlar, nav, badge başlıkları — uppercase, letter-spaced
Inter	Nunito (400/600/700)	Body text, açıklamalar, paragraflar
(yok)	JetBrains Mono (400/500)	Stats sayıları, metadata, badge metni, pricing rakamları, font-mono alanlar

Dosya Değişiklikleri

• app/[locale]/layout.tsx — Google Fonts import değişikliği (next/font/google)
• app/globals.css — --font-sans, --font-tech CSS değişkenlerini güncelle
• Tailwind font-tech alias’ı Rajdhani’ye, font-mono JetBrains Mono’ya yönlenecek

Tipografi Kuralları (portal ile uyumlu)

• Başlıklar (h1-h6, .font-tech): Rajdhani, font-weight: 700, letter-spacing: 1-2px, text-transform: uppercase
• Body: Nunito, font-weight: 400
• Data/metadata: JetBrains Mono, font-size: 10-12px, letter-spacing: 0.5-1.5px
• Badge/etiket: JetBrains Mono, font-size: 9-10px, font-weight: 700, uppercase

2. Köşe Radiusları

Element	Eski	Yeni
Feature kartları	rounded-xl / rounded-2xl	rounded-none (0px)
Pricing kartı	rounded-xl	rounded-none
Hero ürün mockup	rounded-lg	rounded-none
Nav glass panel	rounded-xs	değişmez
CTA butonlar	rounded-lg / rounded-[2px]	clip-path (aşağıda)
Badge/pill	rounded-full	parallelogram clip-path
Modal/dialog	rounded-xs	değişmez
Input alanları	rounded-md	rounded-none veya rounded-sm
İcon kapsayıcıları	rounded-lg / rounded-xl	rounded-none (kare)

3. Kart/Panel Aksanları

Portal’ın imza tasarım öğesi: üst kenar renkli çizgi

globals.css’e eklenecek utility class’lar:

.card-accent { border-top: 2px solid var(--color-brand-red); }
.card-accent-teal { border-top: 2px solid #00c8a0; }
.card-accent-amber { border-top: 2px solid #f5a623; }
.card-accent-blue { border-top: 2px solid #4499ff; }

Uygulanacak yerler:

• Feature kartları → .card-accent (kırmızı)
• Pricing kartı → .card-accent
• SecurityEnterprise kartları → .card-accent-teal
• About değer kartları → .card-accent
• FAQ açılır öğeler → sol border-left olduğu gibi kalır
• Contact form kartı → .card-accent
• Stats bandı → .card-accent-teal
• Hero ürün mockup → .card-accent

4. Buton Tasarımı

Portal clip-path formülü:

clip-path: polygon(
  8px 0%, 100% 0%, 100% calc(100% - 8px),
  calc(100% - 8px) 100%, 0% 100%, 0% 0%
);

Top-left ve bottom-right köşeleri 8px kesilmiş.

globals.css’e eklenecek:

.btn-industrial {
  clip-path: polygon(8px 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%, 0% 0%);
  font-family: var(--font-tech);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

Uygulanacak butonlar:

• Hero ana CTA “GET YOUR PORTAL” → .btn-industrial, red gradient bg
• Hero sekonder “REQUEST DEMO” → .btn-industrial, border outline
• Pricing CTA → .btn-industrial
• Contact submit → .btn-industrial
• VehicleDatabase CTA → .btn-industrial
• LandingPageShowcase CTA → .btn-industrial

Sekonder butonlarda teal:

• Demo CTA’ları → teal border/text rengi (#00c8a0)
• “View All” linkleri → teal text

5. Badge Tasarımı

Portal parallelogram formülü:

clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);

globals.css’e eklenecek:

.badge-industrial {
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 14px;
}

Uygulanacak yerler:

• Hero üst badge (version/feature badge)
• Feature numaraları (01-19)
• Pricing badge “ONE-TIME PAYMENT”
• Section badge’leri (her bölümün üstündeki küçük etiket)
• HowItWorks step numaraları

6. Teal Renk Kullanımı

Globals.css’e eklenecek tema renkleri:

--color-brand-teal: #00c8a0
--color-brand-tealDark: #009970
--color-brand-tealGlow: #00ffd5
--color-brand-amber: #f5a623
--color-brand-blue: #4499ff

Kullanım alanları:

• Social proof göstergeleri (yeşil nokta) → teal
• Stats section’daki rakamlar → teal (mevcut brand-red yerine)
• Sekonder CTA buton text/border rengi → teal
• Success/aktif durumlar → teal
• SecurityEnterprise trust badge’leri → teal

7. Glow Efektleri Standardizasyonu

Portal değerlerine senkronize:

/* Red glow */
box-shadow: 0 0 8px rgba(232, 25, 44, 0.30);    /* badge */
box-shadow: 0 0 20px rgba(232, 25, 44, 0.15);    /* card hover */
text-shadow: 0 0 20px rgba(232, 25, 44, 0.35);   /* KPI text */

/* Teal glow */
box-shadow: 0 0 8px rgba(0, 200, 160, 0.30);     /* badge */
box-shadow: 0 0 24px rgba(0, 200, 160, 0.30);     /* CTA hover */
text-shadow: 0 0 20px rgba(0, 200, 160, 0.30);   /* stat text */

8. Etkilenen Dosyalar

Çekirdek:

• app/[locale]/layout.tsx — font import
• app/globals.css — tema renkleri, utility class’lar, font değişkenleri

Bileşenler (stil güncellemesi):

• components/Hero.tsx
• components/Features.tsx
• components/Pricing.tsx
• components/Navbar.tsx
• components/Footer.tsx
• components/Stats.tsx
• components/About.tsx
• components/SecurityEnterprise.tsx
• components/Contact.tsx
• components/HowItWorks.tsx
• components/WhiteLabelCustomization.tsx
• components/BeforeAfter.tsx
• components/VehicleDatabaseSection.tsx
• components/LanguageSupport.tsx
• components/Brands.tsx
• components/Founder.tsx
• components/FAQ.tsx / FAQList.tsx
• components/PaymentLogos.tsx
• components/LoginModal.tsx
• components/SpecialOffer.tsx
• components/FloatingActions.tsx
• components/SocialProofPopup.tsx

Dokunulmayacaklar:

• Bölüm sırası
• İçerik/çeviri metinleri
• API route’lar
• Admin panel bileşenleri (zaten portal uyumlu)
• Customer panel bileşenleri

9. Kapsam Dışı

• Yeni bölüm eklenmeyecek
• Mevcut bölümler kaldırılmayacak
• Light mode desteği korunacak
• Animasyonlar büyük ölçüde korunacak (sadece transition süresi 0.22s’e standartlaştırılabilir)
• i18n yapısı değişmeyecek