216 lines
5.0 KiB
Markdown
216 lines
5.0 KiB
Markdown
# 📦 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:
|
||
|
||
```bash
|
||
# 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ı
|
||
|
||
```bash
|
||
# 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
|
||
|
||
```bash
|
||
# 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ı)
|
||
|
||
```bash
|
||
# Kaynak dosya
|
||
Temp/style.css
|
||
|
||
# Hedef
|
||
public/style.css
|
||
```
|
||
|
||
## 🚀 Hızlı Kurulum Komutu
|
||
|
||
Terminal'de şu komutları çalıştırın:
|
||
|
||
```bash
|
||
# 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:
|
||
```bash
|
||
# 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:**
|
||
```bash
|
||
npm run dev
|
||
# veya
|
||
yarn dev
|
||
```
|
||
|
||
Ardından `http://localhost:3000` adresine gidin ve template'inizi görün! 🚀
|
||
|