İçeriğe geç
YGT Labs Wiki

Landing Page Portal Stil Senkronizasyonu — Implementation Plan

Derin

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Landing page stilini new-ui portal tasarım diliyle senkronize et — fontlar, köşeler, kart aksanları, buton şekilleri, badge’ler, teal renk.

Architecture: Çekirdek stil değişiklikleri globals.css ve layout.tsx’te yapılır, ardından bileşenler sırayla güncellenir. Her bileşen kendi commit’ini alır.

Tech Stack: Next.js 16, Tailwind CSS 4, React 19, next/font/google

Spec: docs/superpowers/specs/2026-04-02-landing-portal-sync-design.md

Task 1: Font Sistemi Değişikliği

Bölüm başlığı “Task 1: Font Sistemi Değişikliği”

Files:

  • Modify: app/[locale]/layout.tsx:3,11-25,312,335

  • Modify: app/globals.css:15-16,212,217-219

  • Step 1: layout.tsx — font import’ları değiştir

app/[locale]/layout.tsx dosyasında:

// ESKİ:
import { Inter, Chakra_Petch } from "next/font/google";


// YENİ:
import { Nunito, Rajdhani, JetBrains_Mono } from "next/font/google";

Font tanımlarını değiştir:

// ESKİ:
const inter = Inter({
  subsets: ["latin"],
  variable: '--font-inter',
  display: 'swap',
  preload: true,
  adjustFontFallback: true,
});
const chakraPetch = Chakra_Petch({
  weight: ['400', '700'],
  subsets: ["latin"],
  variable: '--font-chakra-petch',
  display: 'swap',
  preload: true,
  adjustFontFallback: true,
});


// YENİ:
const nunito = Nunito({
  subsets: ["latin"],
  weight: ['400', '600', '700'],
  variable: '--font-nunito',
  display: 'swap',
  preload: true,
  adjustFontFallback: true,
});
const rajdhani = Rajdhani({
  weight: ['500', '600', '700'],
  subsets: ["latin"],
  variable: '--font-rajdhani',
  display: 'swap',
  preload: true,
  adjustFontFallback: true,
});
const jetbrainsMono = JetBrains_Mono({
  weight: ['400', '500'],
  subsets: ["latin"],
  variable: '--font-jetbrains-mono',
  display: 'swap',
  preload: true,
  adjustFontFallback: true,
});
  • Step 2: layout.tsx — className referanslarını güncelle

<html> tag’ındaki class’ları güncelle:

// ESKİ:
className={`${inter.variable} ${chakraPetch.variable} scroll-smooth`}


// YENİ:
className={`${nunito.variable} ${rajdhani.variable} ${jetbrainsMono.variable} scroll-smooth`}

<body> tag’ındaki class’ı güncelle:

// ESKİ:
<body className={inter.className} suppressHydrationWarning>


// YENİ:
<body className={nunito.className} suppressHydrationWarning>
  • Step 3: globals.css — font değişkenlerini güncelle
/* ESKİ: */
--font-sans: Inter, sans-serif;
--font-tech: Chakra Petch, sans-serif;


/* YENİ: */
--font-sans: Nunito, sans-serif;
--font-tech: Rajdhani, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

Body font-family kuralını güncelle:

/* ESKİ: */
body {
  font-family: var(--font-inter), sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-tech {
  font-family: var(--font-chakra-petch), sans-serif;
}


/* YENİ: */
body {
  font-family: var(--font-nunito), sans-serif;
}
h1, h2, h3, h4, h5, h6, .font-tech {
  font-family: var(--font-rajdhani), sans-serif;
  letter-spacing: 0.05em;
}
  • Step 4: Build doğrula

Run: npx next build 2>&1 | tail -10 Expected: “Compiled successfully”

  • Step 5: Commit
Terminal window
git add app/[locale]/layout.tsx app/globals.css
git commit -m "style: font sistemi değişikliği — Rajdhani + JetBrains Mono + Nunito"

Task 2: Yeni Tema Renkleri ve Utility Class’lar

Bölüm başlığı “Task 2: Yeni Tema Renkleri ve Utility Class’lar”

Files:

  • Modify: app/globals.css

  • Step 1: Teal, amber, blue tema renklerini ekle

app/globals.css @theme bloğunda --color-brand-accent satırından sonra ekle:

  --color-brand-teal: #00c8a0;
  --color-brand-tealGlow: #00ffd5;
  --color-brand-amber: #f5a623;
  --color-brand-blue: #4499ff;
  • Step 2: Utility class’ları ekle

app/globals.css dosyasında @layer base { ... } bloğundan sonra (satır ~122 civarı) ekle:

/* ===== Portal-Synced Industrial Components ===== */


/* Card top accent — portal signature */
.card-accent {
  border-top: 2px solid var(--color-brand-red);
  border-radius: 0;
}
.card-accent-teal {
  border-top: 2px solid var(--color-brand-teal);
  border-radius: 0;
}
.card-accent-amber {
  border-top: 2px solid var(--color-brand-amber);
  border-radius: 0;
}
.card-accent-blue {
  border-top: 2px solid var(--color-brand-blue);
  border-radius: 0;
}


/* Industrial button — clip-path cut corners */
.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-rajdhani), sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all 0.22s ease;
}


/* Industrial badge — parallelogram */
.badge-industrial {
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 0;
}


/* Stat number — portal KPI style */
.stat-value {
  font-family: var(--font-rajdhani), sans-serif;
  font-weight: 700;
}
.dark .stat-value {
  text-shadow: 0 0 20px rgba(0, 200, 160, 0.30);
}


/* Data text — JetBrains Mono for metadata */
.font-data {
  font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
}
  • Step 3: tech-card class’ını güncelle
/* ESKİ: */
.tech-card {
  @apply transition-all duration-300 border border-gray-200 dark:border-white/5 bg-white dark:bg-linear-to-b dark:from-[#121d2c]/60 dark:to-[#0a111a]/80;
}


/* YENİ: */
.tech-card {
  @apply transition-all duration-[220ms] ease-out border border-gray-200 dark:border-white/[0.055] bg-white dark:bg-brand-dark;
  border-top: 2px solid var(--color-brand-red);
}
  • Step 4: Build doğrula

Run: npx next build 2>&1 | tail -10 Expected: “Compiled successfully”

  • Step 5: Commit
Terminal window
git add app/globals.css
git commit -m "style: portal uyumlu utility class'lar — card-accent, btn-industrial, badge-industrial"

Task 3: Hero Bileşeni

Bölüm başlığı “Task 3: Hero Bileşeni”

Files:

  • Modify: components/Hero.tsx

  • Step 1: Hero’daki badge’i industrial stile çevir

Mevcut hero badge’i (satır ~97 civarında, rounded-full bg-brand-red/10 olan element) bul ve güncelle:

// ESKİ: rounded-full pill badge
className="... rounded-full bg-brand-red/10 border border-brand-red/20 text-brand-red text-xs font-medium ..."


// YENİ: parallelogram industrial badge
className="... badge-industrial bg-brand-teal/10 border-l-2 border-brand-teal text-brand-teal ..."
  • Step 2: CTA butonları industrial stile çevir

Ana CTA butonu (satır ~124):

// ESKİ:
className="group relative inline-flex items-center justify-center h-12 sm:h-14 px-6 sm:px-8 text-sm sm:text-base font-bold text-white bg-linear-to-r from-brand-accent to-red-600 rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(232,25,44,0.5)] shadow-lg shadow-brand-red/20"


// YENİ:
className="group relative inline-flex items-center justify-center h-12 sm:h-14 px-6 sm:px-8 text-sm sm:text-base text-white bg-linear-to-r from-brand-accent to-brand-redDark btn-industrial overflow-hidden hover:-translate-y-1 hover:shadow-[0_10px_40px_-10px_rgba(232,25,44,0.5)] shadow-lg shadow-brand-red/20"

Sekonder CTA (satır ~138):

// ESKİ:
className="group inline-flex items-center justify-center h-12 sm:h-14 px-6 sm:px-8 text-sm sm:text-base font-medium text-gray-700 dark:text-gray-200 bg-white/80 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg ..."


// YENİ:
className="group inline-flex items-center justify-center h-12 sm:h-14 px-6 sm:px-8 text-sm sm:text-base text-gray-700 dark:text-brand-teal bg-white/80 dark:bg-white/5 border border-gray-200 dark:border-white/10 btn-industrial ..."
  • Step 3: Product mockup’a border-top aksanı ekle

Browser mockup container’ı bul (satır ~178 civarı, rounded-xl lg:rounded-2xl olan):

// ESKİ:
className="relative bg-white dark:bg-gray-900 rounded-xl lg:rounded-2xl border border-gray-200/80 dark:border-gray-700/50 shadow-2xl overflow-hidden ..."


// YENİ:
className="relative bg-white dark:bg-brand-dark border border-gray-200/80 dark:border-white/[0.055] card-accent shadow-2xl overflow-hidden ..."
  • Step 4: Social proof badge’ine teal glow dot ekle

Mevcut social proof alanında (green badge varsa):

// Teal glowing dot ekle:
<span className="relative flex h-2 w-2">
  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-teal opacity-75"></span>
  <span className="relative inline-flex rounded-full h-2 w-2 bg-brand-teal shadow-[0_0_8px_rgba(0,200,160,0.5)]"></span>
</span>
  • Step 5: Köşe radiuslarını temizle

Tüm rounded-3xl, rounded-2xl, rounded-xl kullanımlarını Hero.tsx içinde rounded-none veya kaldır. rounded-lg butonlarda zaten btn-industrial ile override edilecek. Thumbnail’larda rounded-lg → rounded-sm yapılabilir.

  • Step 6: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/Hero.tsx
git commit -m "style(hero): portal uyumlu industrial stile güncellendi"

Task 4: Features Bileşeni

Bölüm başlığı “Task 4: Features Bileşeni”

Files:

  • Modify: components/Features.tsx

  • Step 1: Feature kartlarını güncelle

Her feature card’ı bul (satır ~75 ve ~122):

// ESKİ:
className="bg-white dark:bg-[#0a111a] p-4 relative group hover:z-10 transition-all duration-300 flex flex-col border border-gray-100 dark:border-white/5"


// YENİ:
className="bg-white dark:bg-brand-dark p-4 relative group hover:z-10 transition-all duration-[220ms] flex flex-col border border-gray-100 dark:border-white/[0.055] card-accent"
  • Step 2: Feature numaralarına font-data class’ı ekle

Numara span’larına (01-19):

// ESKİ:
className="... text-xs ... font-tech ..."


// YENİ:
className="... text-xs ... font-data ..."
  • Step 3: Hover efektlerinde rounded temizle

Feature card hover’lardan rounded-* class’larını kaldır.

  • Step 4: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/Features.tsx
git commit -m "style(features): portal uyumlu card-accent ve font-data"

Task 5: Pricing Bileşeni

Bölüm başlığı “Task 5: Pricing Bileşeni”

Files:

  • Modify: components/Pricing.tsx

  • Step 1: Pricing kartına card-accent ekle, rounded kaldır

Enterprise plan kartı (satır ~166):

// ESKİ:
className="bg-white dark:bg-[#0a111a] border border-white/10 hover:border-brand-red/60 p-6 relative group hover:shadow-[0_0_30px_rgba(232,25,44,0.1)] transition-all duration-300 flex flex-col rounded-xl"


// YENİ:
className="bg-white dark:bg-brand-dark border border-gray-200 dark:border-white/[0.055] card-accent p-6 relative group hover:shadow-[0_0_20px_rgba(232,25,44,0.15)] transition-all duration-[220ms] flex flex-col"
  • Step 2: Fiyat etiketini teal yap

Fiyat gösterge alanında (€499 yeşil gösterilen yer), rengi text-green-500 yerine text-brand-teal yap.

  • Step 3: CTA butonunu industrial stile çevir

WhatsApp CTA:

// btn-industrial class'ı ekle, rounded kaldır
className="... btn-industrial bg-brand-red text-white ..."
  • Step 4: Badge’leri industrial yap

“ONE-TIME PAYMENT”, “ENTERPRISE” gibi badge’ler:

// ESKİ: rounded-bl-xl veya rounded-full
// YENİ: badge-industrial
  • Step 5: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/Pricing.tsx
git commit -m "style(pricing): portal uyumlu card-accent, teal fiyat, industrial buton"

Task 6: Stats Bileşeni

Bölüm başlığı “Task 6: Stats Bileşeni”

Files:

  • Modify: components/Stats.tsx

  • Step 1: Stat değerlerini teal renk ve font-data yap

Stat rakam alanlarına:

// ESKİ: text-gray-900 dark:text-white veya brand-red
// YENİ: text-brand-teal stat-value
  • Step 2: Stats bandına card-accent-teal ekle

Section container’a:

// border-y olan container'a card-accent-teal ekle
  • Step 3: Stat etiketlerini font-data yap
// Stat labels: font-data text-xs tracking-wider uppercase
  • Step 4: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/Stats.tsx
git commit -m "style(stats): teal renk ve portal font sistemi"

Task 7: Kalan Landing Bileşenleri (Toplu)

Bölüm başlığı “Task 7: Kalan Landing Bileşenleri (Toplu)”

Files:

  • Modify: components/About.tsx

  • Modify: components/SecurityEnterprise.tsx

  • Modify: components/Contact.tsx

  • Modify: components/HowItWorks.tsx

  • Modify: components/WhiteLabelCustomization.tsx

  • Modify: components/BeforeAfter.tsx

  • Modify: components/VehicleDatabaseSection.tsx

  • Modify: components/LanguageSupport.tsx

  • Modify: components/Brands.tsx

  • Modify: components/Founder.tsx

  • Modify: components/Footer.tsx

  • Modify: components/Navbar.tsx

  • Modify: components/PaymentLogos.tsx

  • Step 1: Her bileşende rounded → keskin köşe

Tüm bileşenlerde şu dönüşümleri yap:

  • rounded-3xl → rounded-none
  • rounded-2xl → rounded-none (kartlarda)
  • rounded-xl → rounded-none (kartlarda) veya rounded-sm (küçük elementlerde)
  • rounded-lg → rounded-sm veya rounded-none
  • rounded-full badge’ler → badge-industrial (section badge’ler için)
  • Butonlarda rounded-* → btn-industrial (önemli CTA’larda)

NOT: rounded-full avatar, dot, circular element’ler (w-2 h-2 gibi) dokunulmaz.

  • Step 2: Kart aksanları ekle
BileşenAksan
About — değer kartlarıcard-accent
About — mission/visioncard-accent-teal / card-accent-blue
SecurityEnterprise — güvenlik kartlarıcard-accent-teal
WhiteLabelCustomization — özelleştirme kartlarıcard-accent
Contact — form wrappercard-accent
Founder — info kartıcard-accent
HowItWorks — step kartları(aksansız — numara renkleri yeterli)
  • Step 3: Section badge’leri industrial yap

Her section’ın üstündeki badge (genellikle rounded-full bg-brand-red/10 text-brand-red text-xs):

// ESKİ:
className="... rounded-full bg-brand-red/10 border border-brand-red/20 text-brand-red text-xs font-bold ..."


// YENİ:
className="... badge-industrial bg-brand-red/10 border-l-2 border-brand-red text-brand-red ..."
  • Step 4: CTA butonları industrial yap

Önemli CTA butonlar:

  • VehicleDatabase “BROWSE DATABASE” → btn-industrial

  • Contact “REQUEST QUOTE” → btn-industrial

  • Founder LinkedIn linki → border stili korur

  • Step 5: Teal kullanımı ekle

  • SecurityEnterprise trust badge’leri → text-brand-teal (mevcut green yerine)

  • WhiteLabelCustomization checkmark’lar → text-brand-teal

  • BeforeAfter “With Portal” check’ler → text-brand-teal

  • Step 6: Build doğrula ve commit

Terminal window
npx next build 2>&1 | tail -5
git add 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/Footer.tsx components/Navbar.tsx components/PaymentLogos.tsx
git commit -m "style: kalan landing bileşenleri portal uyumlu güncelleme"

Task 8: Overlay Bileşenleri

Bölüm başlığı “Task 8: Overlay Bileşenleri”

Files:

  • Modify: components/LoginModal.tsx

  • Modify: components/SocialProofPopup.tsx

  • Modify: components/FloatingActions.tsx

  • Modify: components/FAQList.tsx

  • Modify: components/SpecialOffer.tsx

  • Step 1: LoginModal — card-accent ve industrial buton

// Modal wrapper: card-accent ekle, rounded koruyabilir (modal exception)
// Submit butonlar: btn-industrial
// Tab altındaki active bar: korunur
  • Step 2: SocialProofPopup — badge-industrial
// Popup badge: badge-industrial
// Popup container: rounded-sm (4px max)
  • Step 3: FAQList — border-left aksanı koruyup rounded azalt
// Açık FAQ item border-left: 4px solid var(--color-brand-red) → korunur
// Item container: rounded-xl → rounded-none
  • Step 4: SpecialOffer — card-accent ve industrial CTA
// Offer card: card-accent, rounded azalt
// CTA: btn-industrial
  • Step 5: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/LoginModal.tsx components/SocialProofPopup.tsx components/FloatingActions.tsx components/FAQList.tsx components/SpecialOffer.tsx
git commit -m "style: overlay ve modal bileşenleri portal uyumlu güncelleme"

Task 9: Diğer Sayfa Bileşenleri

Bölüm başlığı “Task 9: Diğer Sayfa Bileşenleri”

Files:

  • Modify: components/FeaturesPageContent.tsx

  • Modify: components/FAQPageContent.tsx

  • Modify: components/GalleryPageContent.tsx

  • Modify: components/BlogPageContent.tsx

  • Modify: components/BlogContent.tsx

  • Step 1: Her sayfanın section badge’lerini industrial yap

Tüm rounded-full section badge’leri → badge-industrial

  • Step 2: rounded → keskin köşe

Kart ve panel elementlerinde rounded-xl/rounded-2xl → rounded-none/rounded-sm

  • Step 3: CTA butonları güncelle

Hero CTA butonları olan sayfalarda → btn-industrial

  • Step 4: Build doğrula ve commit
Terminal window
npx next build 2>&1 | tail -5
git add components/FeaturesPageContent.tsx components/FAQPageContent.tsx components/GalleryPageContent.tsx components/BlogPageContent.tsx components/BlogContent.tsx
git commit -m "style: alt sayfalar portal uyumlu güncelleme"

Task 10: Final Doğrulama ve Deploy

Bölüm başlığı “Task 10: Final Doğrulama ve Deploy”

Files: Yok — sadece doğrulama.

  • Step 1: Tam build
Terminal window
npx next build 2>&1 | tail -20

Expected: “Compiled successfully”

  • Step 2: PM2 restart
Terminal window
pm2 restart ecutuningportal
  • Step 3: Tarayıcıda kontrol

Chrome DevTools ile sayfayı aç, her section’ı gözden geçir:

  • Fontların doğru yüklendiğini kontrol et (DevTools → Computed → font-family)

  • Kart aksanlarının göründüğünü doğrula

  • Buton clip-path’lerinin çalıştığını doğrula

  • Badge parallelogram’ların doğru render edildiğini kontrol et

  • Teal renklerin doğru yerlerde kullanıldığını doğrula

  • Light mode’un kırılmadığını kontrol et

  • Step 4: Final commit

Terminal window
git add -A
git commit -m "style: landing page portal stil senkronizasyonu tamamlandı"