Lumina Optik, havacılık sanayisinde kullanılan üst düzey titanyum alaşımlı fütüristik materyal mühendisliğini, usta optisyenlerin el işçiliğiyle birleştiren lüks ve premium bir gözlük markasının dijital dünyadaki yüzüdür. Kütahya merkezli inovasyon laboratuvarından çıkan bu şaheser, modern web teknolojilerinin sınırlarını zorlayan Awwwards kalitesinde bir kullanıcı deneyimi (UX) ve kurumsal komuta merkezini (CRM / Control Tower) bir arada sunar.
Proje; tam SEO uyumluluğu, Sunucu Taraflı Oluşturma (SSR) gücü, Apple tarzı lüks pazarlama diliyle kurgulanmış çoklu dil desteği (i18n), gelişmiş Framer Motion mikro-etkileşimleri ve şifre korumalı siber-güvenlik altyapısına sahip bir admin yönetim paneli barındırır.
- Preloader (Açılış Animasyonu): Kullanıcı siteye ilk girdiğinde pürüzsüzce yukarı kayan minimalist ve lüks bir
"Lumina."karşılama ekranı. - Manyetik Butonlar (Magnetic Hover Effect): Farenin çekim alanına kapılarak pürüzsüzce esneyen, farenin ayrılmasıyla yay (spring) animasyonuyla yerine oturan premium butonlar.
- 3D Eğimli Kartlar (3D Tilt Effect): Koleksiyonlar bölümünde farenin X ve Y koordinatlarına göre 3 boyutlu olarak içeri/dışarı eğilen cam efekti (glassmorphism) verilmiş kart yapıları.
- Sinematik Video Arka Planı: Arka planda yer alan, buz mavisi cam efekti filtresi ve zarif gradyan geçişleriyle zenginleştirilmiş akıcı yerel video performansı.
- Swiper Canlı Vitrin: Otomatik kaydırma (
Autoplay) ve dinamik noktalarla güçlendirilmiş, üzerine gelindiğinde pürüzsüzce büyüyen sezon ürünleri vitrini.
React Context APIile tüm uygulamayı sarmalayan merkezi dil yönetim sistemi (LanguageContext).- Tek tıkla (TR/EN) tüm sayfaların, ürünlerin, iletişim formlarının ve hatta yapay zeka asistanının anında lüks bir küresel pazarlama diline ("Bespoke Frames", "Uncompromised Clarity") bürünmesi.
- Güvenlik Giriş Kapısı (Lock Screen):
/admindizinine yetkisiz erişimleri tamamen engelleyen, Mac kilit ekranı tarzında buzlu cam efektli ve özel şifre korumalı (lumina2026) siber-güvenlik katmanı. Yetki verilmeden hiçbir API verisi tarayıcıya sızdırılmaz. - Dashboard & Finansal Raporlama: Gelen form verilerini arka planda tarayarak ham kazancı (Matrah), %20 KDV tutarını ve toplam Ciro bilançolarını anlık simüle eden finans modülü.
- Power BI Entegrasyon Odası: Gelecekteki kurumsal SQL/Power BI veri görselleştirme yayın adresleri için özel olarak ayrılmış, siber-grid arka planlı interaktif analitik alanı.
- Müşteri Yönetimi (CRM Tablosu): Ön yüzdeki iletişim formundan gelen talepleri 4 saniyede bir otomatik sorgulayan (polling) ve sayfayı yenilemeden listeye düşüren canlı başvuru havuzu.
- Fütüristik Minimalist İkonlar: Emojilerden arındırılmış, tamamen fütüristik ve kurumsal çizgilere sahip ince hatlı minimalist SVG ikon tasarımları.
- Yapay Zeka Sohbet Köprüsü (
/api/chat): Ön yüzdeki akıllı asistanın mesajlarını alıp bağımsız bir Python/Docker sunucusuna paslayan API rotası. Python sunucusu çevrimdışı olsa bile çökmeyip kurumsal akıllı fail-safe senaryolar üreten zeki mekanizma. - Ortak Bellek Veri Tabanı (
utils/db.ts): Next.js geliştirme ortamındaki hot-reload işlemlerinde verilerin sıfırlanmasını önleyen global nesne destekli in-memory veri tabanı mimarisi.
| Teknoloji | Açıklama |
|---|---|
| Framework | Next.js 15+ (App Router) - SSR & SEO Odaklı Mimari |
| Styling | Tailwind CSS (v4) - Özel Renk Değişkenleri (lumina-bg, lumina-primary) ve Cam Efektleri |
| Animations | Framer Motion - Yay Tabanlı (Spring) ve Fizik Motorlu Animasyonlar |
| Carousel | Swiper React - Akıcı Slider Çözümü |
| Language | TypeScript - Sıkı Tip Güvenliği ve Okunabilirlik |
| Compiler | Turbopack - Şimşek Hızında Yerel Geliştirme |
├── app/
│ ├── admin/ # Şifre Korumalı CRM & Komuta Merkezi Sayfası
│ ├── api/
│ │ ├── admin/ # İstatistik ve CRM verilerini besleyen API Rotaları
│ │ ├── chat/ # Yapay Zeka (Python/Docker) Sunucu Köprüsü
│ │ └── contact/ # Canlı Form Kayıt API'si
│ ├── hakkimizda/ # Kütahya Merkezli Kurumsal Hikaye Sayfası
│ ├── koleksiyon/ # Akıllı Filtrelemeli Ürün Vitrin Sayfası
│ ├── teknoloji/ # Optik Teknolojileri Bilgilendirme Sayfası
│ ├── layout.tsx # Global Preloader, Navbar ve Footer Saran Ana Yapı
│ └── page.tsx # Sinematik Ana Giriş Sayfası
├── components/ # Yeniden Kullanılabilir Premium UI Bileşenleri
│ ├── ChatBot.tsx # Dinamik Dil Destekli Yapay Zeka Sohbet Arayüzü
│ ├── Contact.tsx # CRM Entegreli Canlı İletişim Formu
│ ├── Hero.tsx # Otomatik Kaydırmalı Vitrin ve Video Alanı
│ ├── MagneticButton.tsx # Merkeze Çekim Uygulayan Manyetik Buton Motoru
│ └── TiltCard.tsx # 3D Eğim Efekti Veren Framer Motion Bileşeni
├── context/
│ └── LanguageContext.tsx # Merkezi Çeviri (i18n) TR/EN Yönetim Sistemi
├── utils/
│ └── db.ts # Hot-Reload Korumalı Sahte İn-Memory Veri Tabanı
└── next.config.mjs # Unsplash Timeout Korumalı Resim Optimizasyon AyarlarıImportant
KESİN KURAL: Tüm işlemler ve geliştirme adımları Git Bash terminali üzerinden yürütülmelidir. PowerShell veya Windows CMD kullanılmamalıdır.
Git Bash terminalinizi açın, projeyi klonlayın ve klasörün içerisine girin:
git clone https://github.com/halilbsp/lumina-optik.git
cd lumina-optikProje için gerekli olan Framer Motion, Swiper ve diğer kütüphaneleri kurun:
npm installNext.js'in harici Unsplash görsellerini yüklerken zaman aşımı (TimeoutError) vermesini önlemek için next.config.mjs dosyasının aşağıdaki gibi ayarlandığından emin olun:
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'images.unsplash.com',
},
],
unoptimized: true, // Büyük görsellerde ağ gecikmesi kaynaklı çökmeleri engeller
},
};
export default nextConfig;Önbelleği temizleyip Turbopack desteğiyle sunucuyu şimşek hızında ayağa kaldırın:
rm -rf .next && npm run devTerminalde sunucu aktif olduktan sonra tarayıcınızdan şu adresleri test edebilirsiniz:
- Ana Site: http://localhost:3000
- Güvenli Yönetim Paneli: http://localhost:3000/admin (Erişim Şifresi:
lumina2026)
⭐ Bu proje, Halil Başpınar (halilbsp) tarafından fütüristik kurumsal vizyon standartlarına sadık kalınarak geliştirilmiştir.