Modern teknoloji ile güçlendirilmiş, yapay zeka destekli teknoloji çözümleri sunan kurumsal web sitesi.
- ✅ PHP 8.1+ Desteği - Modern PHP ile geliştirilmiş
- ✅ Vercel Deployment - Serverless PHP runtime
- ✅ Responsive Tasarım - Mobil uyumlu modern UI
- ✅ SEO Optimized - Arama motoru dostu
- ✅ API Endpoints - RESTful API yapısı
- ✅ Modüler Yapı - Kolay geliştirme ve bakım
- Backend: PHP 8.1+, Composer
- Frontend: HTML5, CSS3, JavaScript ES6+
- Deployment: Vercel
- API: RESTful endpoints
Canlı demo: https://destanteknoloji.vercel.app
POST /api/auth.php- Giriş/Kayıt işlemleri
POST /api/contact.php- İletişim ve newsletter
Modern ve modüler yapıda geliştirilmiş web sitesi projesi.
destan-web-proje/
├── index.php # Ana sayfa (modüler yapı)
├── style.css # Ana CSS dosyası (modülleri import eder)
├── script.js # Ana JavaScript dosyası (modülleri import eder)
├── check-css.php # CSS dosya kontrolü ve debug aracı
├── .gitignore # Git ignore dosyası
├── .vscode/ # VS Code ayarları
├── assets/
│ ├── images/
│ │ └── logo.png # Logo dosyası
│ └── favicon.ico # Site favicon'u
├── includes/ # PHP Modüler dosyalar
│ ├── header.php # Header bölümü
│ ├── main-content.php # Ana içerik
│ ├── products.php # Ürünler bölümü
│ ├── newsletter.php # Newsletter bölümü
│ ├── slogan-banner.php # Slogan banner modülü
│ └── footer.php # Footer bölümü
├── auth/ # Kimlik doğrulama modülü
│ ├── index.php # Auth router (login, register, logout)
│ ├── pages/ # Auth sayfaları
│ │ ├── login.php # Giriş sayfası
│ │ ├── register.php # Kayıt sayfası
│ │ ├── logout.php # Çıkış sayfası
│ │ └── logout-process.php # Çıkış işlemi
│ ├── auth.css # Auth stilleri
│ └── auth.js # Auth JavaScript
├── admin/ # Admin paneli modülü
│ ├── index.php # Admin router
│ ├── dashboard.php # Dashboard sayfası
│ ├── admin.css # Admin paneli stilleri
│ └── admin.js # Admin paneli JavaScript
├── style/ # CSS Modüler dosyalar
│ ├── base.css # Temel ayarlar ve CSS variables
│ ├── header.css # Header stilleri
│ ├── buttons.css # Buton stilleri
│ ├── main-content.css # Ana içerik stilleri
│ ├── title.css # Title modülü (section başlıkları)
│ ├── newsletter.css # Newsletter stilleri
│ ├── footer.css # Footer stilleri
│ ├── forms.css # Form stilleri
│ ├── slogan-banner.css # Slogan banner stilleri
│ ├── responsive.css # Responsive tasarım
│ ├── animations.css # Animasyonlar
│ └── README-title-module.md # Title modülü dokümantasyonu
└── script/ # JavaScript Modüler dosyalar
├── mobile-menu.js # Mobil menü modülü
├── animations.js # Animasyonlar modülü
├── navigation.js # Navigasyon modülü
├── products.js # Ürün kartları modülü
└── slogan-banner.js # Slogan banner modülü
- Modüler Yapı: PHP include/require ve CSS/JS @import/module kullanarak modüler geliştirme
- Responsive Tasarım: Mobil uyumlu modern tasarım
- Modern CSS: CSS Grid, Flexbox, CSS Variables kullanımı
- Modern JavaScript: ES6+ Modules, Classes, Intersection Observer
- Animasyonlar: Smooth scroll, hover efektleri, loading animasyonları
- SEO Optimizasyonu: Meta tags, semantic HTML yapısı
- Title Modülü: Section başlıkları için tutarlı tasarım sistemi
- Slogan Banner: Dinamik banner sistemi
- Debug Araçları: CSS dosya kontrolü ve debug araçları
- VS Code Desteği: Proje ayarları ve konfigürasyonu
- HTML5: Semantic markup
- CSS3: Modern styling (Grid, Flexbox, Variables, @import)
- JavaScript ES6+: Modern JS (Modules, Classes, Arrow Functions)
- PHP: Server-side includes
- Desktop: 1024px+
- Tablet: 768px - 1023px
- Mobile: 480px - 767px
- Small Mobile: < 480px
- Gradient Backgrounds: Modern gradient efektleri
- Glassmorphism: Blur efektleri ve şeffaflık
- Smooth Animations: CSS transitions ve keyframes
- Modern Typography: Inter font ailesi
- Color Scheme: Mavi-mor gradient tema
- Kimlik Doğrulama: Login, register, logout işlemleri
- Form Validasyonu: Client-side ve server-side validation
- Session Yönetimi: Güvenli oturum kontrolü
- Responsive Tasarım: Mobil uyumlu form tasarımı
- Dashboard: İstatistikler, grafikler, aktivite takibi
- Modern UI: Koyu tema ile profesyonel görünüm
- Responsive Sidebar: Mobil uyumlu navigasyon
- Quick Actions: Hızlı işlem butonları
- Chart Interactions: Etkileşimli grafikler
- Logo, slogan ve navigasyon
- Desktop ve mobil menü
- Giriş/Üye ol butonları
- Slogan banner entegrasyonu
- Ana içerik wrapper
- Kullanıcı panel butonu
- Ürünler ve özellikler bölümleri
- Title modülü kullanımı
- Ürün kartları
- E-ticaret, muhasebe, AI paketleri
- Title modülü kullanımı
- Newsletter abonelik formu
- "Güncel Kalın" bölümü
- Dinamik slogan banner
- Konfigürasyon sistemi
- Kapatma butonu desteği
- İletişim bilgileri
- Sosyal medya linkleri
- Footer linkleri ve copyright
- CSS Reset ve temel ayarlar
- CSS Variables (renkler, gölgeler, fontlar)
- Container ve body stilleri
- Smooth scrolling ve focus states
- Header gradient background
- Logo, slogan ve navigasyon stilleri
- Desktop ve mobil menü
- Hamburger menü animasyonları
- Tüm buton stilleri (primary, secondary, outline)
- Hover efektleri ve transitions
- Responsive buton boyutları
- Ana içerik wrapper
- Ürün kartları ve grid sistemi
- Feature items ve bilgilendirme bölümü
- Kullanıcı panel butonu
- Title modülü import
- Section başlıkları için tutarlı tasarım
- Section badge, title, subtitle stilleri
- Responsive font boyutları
- Highlight efektleri
- Newsletter gradient background
- Form input ve buton stilleri
- Glassmorphism efektleri
- Hover animasyonları
- Footer gradient background
- İletişim bilgileri kartları
- Sosyal medya ikonları
- Footer linkleri ve copyright
- Form input stilleri
- Validation mesajları
- Focus states ve transitions
- Responsive form tasarımı
- Slogan banner stilleri
- Slide animasyonları
- Responsive banner tasarımı
- Close button stilleri
- Tüm responsive breakpoint'ler
- Mobil menü düzenlemeleri
- Grid sistem responsive ayarları
- Font boyutları ve spacing
- FadeInUp animasyonları
- Loading spinner
- Modal animasyonları
- Hover efektleri
- Mobil menü toggle fonksiyonları
- Hamburger menü animasyonları
- ESC tuşu ve dış tıklama ile kapatma
- Body scroll engelleme
- Intersection Observer ile scroll animasyonları
- Loading animasyonları
- Buton hover efektleri
- Fade in/slide in animasyonları
- Smooth scrolling
- Aktif menü öğesi takibi
- Scroll pozisyonuna göre menü güncelleme
- Debounce optimizasyonu
- Ürün kartı hover efektleri
- Modal sistemi
- WhatsApp iletişim entegrasyonu
- Analytics tracking
- Slogan banner kontrolü
- Dinamik içerik güncelleme
- ESC tuşu ile kapatma
- Slide animasyonları
- Dosyaları web sunucusuna yükleyin
assets/images/klasörüne logo dosyasını ekleyinassets/favicon.icodosyasını ekleyin- Tarayıcıda
index.phpdosyasını açın - CSS dosyalarını kontrol etmek için
check-css.phpdosyasını çalıştırın
- Modüler Yapı: Kod tekrarı minimuma indirildi
- Bakım Kolaylığı: Her bölüm ayrı dosyada tutularak kolay güncelleme
- Responsive Tasarım: Tüm cihazlarda uyumlu çalışıyor
- Modern CSS: CSS Variables ve @import kullanımı
- Modern JavaScript: ES6+ Modules ve Classes kullanımı
- Performans: Modüler yapı sayesinde sadece gerekli kod yükleniyor
- Title Modülü: Section başlıkları için tutarlı tasarım sistemi
- Slogan Banner: Dinamik banner sistemi ile kolay içerik yönetimi
- Debug Araçları: CSS dosya kontrolü ve debug araçları
- VS Code Desteği: Proje ayarları ve konfigürasyonu
- Database entegrasyonu
- Admin paneli
- Title modülü sistemi
- Slogan banner sistemi
- Debug araçları
- VS Code desteği
- Blog sistemi
- E-ticaret entegrasyonu
- API geliştirme
- Çoklu dil desteği
- CSS preprocessor (Sass/SCSS) entegrasyonu
- CSS minification ve optimization
- JavaScript bundling (Webpack/Vite)
- Service Worker ile PWA desteği
- Dark mode desteği
- Performance monitoring
- Automated testing
- CSS dosyalarının varlık kontrolü
- Dosya boyutları ve son değişiklik tarihleri
- CSS içerik kontrolü
- Debug ve troubleshooting için kullanılır
.vscode/klasöründe proje ayarları- Kod formatlaması ve linting
- Debug konfigürasyonu
- Extension önerileri
.gitignoredosyası ile gereksiz dosyaların hariç tutulması- Proje yapısının korunması
- Güvenli dosya yönetimi
style/README-title-module.md- Title modülü kullanım kılavuzu- Section başlıkları için tutarlı tasarım sistemi
- Responsive font boyutları
- Highlight efektleri
- Her modül kendi dokümantasyonuna sahip
- Import/export yapıları
- Konfigürasyon seçenekleri
- Örnek kullanımlar
# CSS dosyalarını kontrol et
php check-css.php
# Proje yapısını kontrol et
tree -I 'node_modules|.git'- ✅ Title modülü aktif
- ✅ Slogan banner sistemi çalışıyor
- ✅ Responsive tasarım uyumlu
- ✅ JavaScript modülleri yüklü
- ✅ CSS modülleri import edilmiş
Destan Teknoloji
- Email: info@destanteknoloji.com
- Telefon: +90 212 555 0123
- Adres: İstanbul, Türkiye
© 2025 Destan Teknoloji. Tüm hakları saklıdır.