next-dj/TEMPLATE-ASSETS.md

📦 Template Assets Kurulum Kılavuzu

Softora template'i Next.js projesine başarıyla entegre edildi!

⚠️ Önemli: Assets Dosyalarını Kopyalayın

Template'inizin düzgün çalışması için aşağıdaki dosyaları Next.js public klasörüne kopyalamanız gerekiyor:

1. CSS Dosyaları

Original template'inizden şu CSS dosyalarını kopyalayın:

# Kaynak klasör (template'iniz)
Temp/assets/css/

# Hedef klasör (Next.js projesi)
public/assets/css/

# Kopyalanacak dosyalar:
- animate.css
- tabler-icons.min.css
- bootstrap.min.css
- swiper-bundle.min.css

2. JavaScript Dosyaları

# Kaynak klasör
Temp/assets/js/

# Hedef klasör
public/assets/js/

# Kopyalanacak dosyalar:
- bootstrap.bundle.min.js
- slideToggle.min.js
- swiper-bundle.min.js
- jarallax.min.js
- index.js
- cookiealert.js
- imagesloaded.pkgd.min.js
- isotope.pkgd.min.js
- wow.min.js
- active.js

3. Images & Icons

# Kaynak klasör
Temp/assets/img/

# Hedef klasör
public/assets/img/

# Kopyalanacak klasörler:
- core-img/ (logo, shapes, favicons vb.)
- bg-img/ (background images)
- partner-img/ (partner logos)

4. Style CSS (Ana stil dosyası)

# Kaynak dosya
Temp/style.css

# Hedef
public/style.css

🚀 Hızlı Kurulum Komutu

Terminal'de şu komutları çalıştırın:

# Public klasörünü oluştur (zaten var)
cd /Users/beyhan/Projeler/JS/next-dj

# Assets klasörünü oluştur
mkdir -p public/assets/css
mkdir -p public/assets/js
mkdir -p public/assets/img/core-img
mkdir -p public/assets/img/bg-img
mkdir -p public/assets/img/partner-img

# Template klasöründen dosyaları kopyala (PATH'inizi güncelleyin)
# Örnek:
cp -r /path/to/Temp/assets/css/* public/assets/css/
cp -r /path/to/Temp/assets/js/* public/assets/js/
cp -r /path/to/Temp/assets/img/* public/assets/img/
cp /path/to/Temp/style.css public/style.css

✅ Yapılan Entegrasyonlar

1. Server-Side Rendering

• Ana sayfa server component olarak düzenlendi
• Session bilgisi server tarafında alınıyor
• SEO friendly ve hızlı ilk yükleme

2. Session-Aware Template

• Header'da kullanıcı durumuna göre navigasyon
• Login/Logout butonları dinamik
• Dashboard ve Profile linkleri (login olduysa)
• Register/Login linkleri (login olmadıysa)

3. Next.js Route Entegrasyonu

Template'deki tüm linkler Next.js route'larına dönüştürüldü:

Original	Next.js Route
index.html	/
about-us.html	/about
contact.html	/contact
N/A	/auth/login
N/A	/auth/register
N/A	/dashboard
N/A	/profile

4. Component Yapısı

app/
├── layout.tsx (Assets yükleme + AuthProvider)
├── page.tsx (Ana sayfa - Server Component)
│
components/
├── Header.tsx (Navbar + Session-aware)
└── PreloaderAndSearch.tsx (Preloader + Search popup)

5. Bootstrap & Interactive Features

Tüm Bootstrap component'leri ve JavaScript features korundu:

• ✅ Dropdown menüler
• ✅ Tabs (Services section)
• ✅ Modal (Video popup)
• ✅ Swiper slider
• ✅ WOW animations
• ✅ Jarallax parallax
• ✅ Cookie alert
• ✅ Scroll to top
• ✅ Search popup

🎨 Özelleştirmeler

Template'e Eklenen Auth Features

1. Hero Section CTA

   • Session varsa: "Go to Dashboard"
   • Session yoksa: "Get Started" (Register'a yönlendirir)

2. About Section

   • Authentication özelliklerine göre düzenlendi
   • Social login, Email verification vb. vurgulandı

3. Services Section

   • IT Services → Authentication Services
   • 3 tab: Secure Auth, Email Verification, Social Auth

4. Bottom CTA

   • Session varsa: Hoş geldin mesajı + Dashboard linki
   • Session yoksa: Kayıt ol mesajı + Register linki

5. Footer

   • Auth sayfalarına linkler
   • Dashboard/Profile linkleri (session varsa)
   • Documentation linkleri

🔧 Sorun Giderme

Stil gözükmüyorsa:

1. public/ klasörüne assets kopyalandı mı kontrol edin
2. Browser console'da 404 hatası var mı bakın
3. Dosya path'leri doğru mu kontrol edin

JavaScript çalışmıyorsa:

1. Tüm JS dosyaları public/assets/js/ içinde mi?
2. Browser console'da JavaScript hataları var mı?
3. layout.tsx içindeki script tag'leri yüklendi mi?

Template'e yeni bir sayfa eklemek:

# 1. app klasöründe yeni klasör oluştur
mkdir app/about

# 2. page.tsx oluştur
# 3. Template'den ilgili HTML'i kopyala ve Next.js formatına çevir
# 4. Header ve Footer ekle (import from components)

📝 Notlar

• Template'in tüm orijinal tasarımı korundu
• Sadece static HTML yerine Next.js component'leri kullanıldı
• Authentication özellikleri template'e entegre edildi
• Server-side rendering ile SEO ve performance iyileştirildi
• Session management ile dynamic content

🎉 Sonuç

Template başarıyla Next.js'e dönüştürüldü ve authentication sistemi ile entegre edildi!

Assets dosyalarını kopyaladıktan sonra:

npm run dev
# veya
yarn dev

Ardından http://localhost:3000 adresine gidin ve template'inizi görün! 🚀