diff --git a/docs/BLOCKS_USAGE.md b/docs/BLOCKS_USAGE.md new file mode 100644 index 0000000..67d07b5 --- /dev/null +++ b/docs/BLOCKS_USAGE.md @@ -0,0 +1,424 @@ +# Blok Tabanlı Sayfa Oluşturma Sistemi + +## Genel Bakış + +Sistemde 9 adet hazır blok bileşeni bulunmaktadır. Bu bloklar admin panelinden seçilip veri girilerek sayfa oluşturulabilir. + +## Mevcut Bloklar + +### 1. Hero (Ana Başlık) +**Kullanım:** Sayfa başlığı, açıklama, butonlar ve görsel +**Dosya:** `resources/views/components/blocks/hero.blade.php` + +**Örnek Veri:** +```json +{ + "type": "hero", + "data": { + "background_image": "assets/img/photos/blurry.png", + "badge": "YENİ SÜRÜM", + "title": "Modern ve Çok Amaçlı Web Çözümleri", + "subtitle": "Yenilikçi teknoloji çözümleri ile geleceği şekillendiriyoruz", + "primary_button_text": "Hemen Başla", + "primary_button_url": "#", + "secondary_button_text": "Daha Fazla Bilgi", + "secondary_button_url": "#about", + "hero_image": "assets/img/demos/f1.png" + } +} +``` + +--- + +### 2. Features (Özellikler Grid) +**Kullanım:** İkon + başlık + açıklama kartları +**Dosya:** `resources/views/components/blocks/features.blade.php` + +**Örnek Veri:** +```json +{ + "type": "features", + "data": { + "bg_class": "!bg-[#f0f0f8]", + "section_badge": "ÖZELLİKLER", + "section_title": "Neden Bizi Tercih Etmelisiniz?", + "section_subtitle": "Modern teknolojiler ve uzman ekibimizle projelerinizi hayata geçiriyoruz", + "column_class": "md:w-6/12 lg:w-4/12", + "features": [ + { + "icon": "assets/img/icons/fast.svg", + "title": "Hızlı Çözümler", + "description": "Modern teknolojiler kullanarak projelerinizi hızlı ve verimli bir şekilde hayata geçiriyoruz." + }, + { + "icon": "assets/img/icons/secure.svg", + "title": "Güvenli Altyapı", + "description": "En son güvenlik standartlarını kullanarak verilerinizi koruma altına alıyoruz." + }, + { + "icon": "assets/img/icons/team.svg", + "title": "Uzman Ekip", + "description": "Deneyimli ve uzman ekibimiz ile her zaman yanınızdayız." + } + ] + } +} +``` + +--- + +### 3. Stats (İstatistikler/Sayaçlar) +**Kullanım:** Sayı + açıklama istatistikleri +**Dosya:** `resources/views/components/blocks/stats.blade.php` + +**Örnek Veri:** +```json +{ + "type": "stats", + "data": { + "bg_class": "!bg-[#ffffff]", + "column_class": "md:w-6/12 lg:w-3/12", + "stats": [ + { + "icon": "assets/img/icons/project.svg", + "number": "500+", + "label": "Tamamlanan Proje" + }, + { + "icon": "assets/img/icons/client.svg", + "number": "300+", + "label": "Mutlu Müşteri" + }, + { + "icon": "assets/img/icons/award.svg", + "number": "50+", + "label": "Kazanılan Ödül" + }, + { + "icon": "assets/img/icons/team-stat.svg", + "number": "25+", + "label": "Ekip Üyesi" + } + ] + } +} +``` + +--- + +### 4. Testimonials (Referanslar/Yorumlar) +**Kullanım:** Müşteri yorumları +**Dosya:** `resources/views/components/blocks/testimonials.blade.php` + +**Örnek Veri:** +```json +{ + "type": "testimonials", + "data": { + "bg_class": "!bg-[#f0f0f8]", + "section_badge": "REFERANSLAR", + "section_title": "Müşterilerimiz Ne Diyor?", + "section_subtitle": "Binlerce mutlu müşterimizden bazılarının görüşleri", + "column_class": "md:w-6/12 lg:w-4/12", + "testimonials": [ + { + "rating": 5, + "quote": "Harika bir ekip! Projemizi zamanında ve beklentilerimizin üzerinde teslim ettiler.", + "avatar": "assets/img/avatars/te1.jpg", + "name": "Ahmet Yılmaz", + "position": "CEO, ABC Tech" + }, + { + "rating": 5, + "quote": "Profesyonel yaklaşım ve mükemmel sonuç. Kesinlikle tavsiye ediyorum!", + "avatar": "assets/img/avatars/te2.jpg", + "name": "Ayşe Demir", + "position": "Kurucu, XYZ Startup" + } + ] + } +} +``` + +--- + +### 5. Pricing (Fiyatlandırma Tabloları) +**Kullanım:** Fiyat paketleri +**Dosya:** `resources/views/components/blocks/pricing.blade.php` + +**Örnek Veri:** +```json +{ + "type": "pricing", + "data": { + "bg_class": "!bg-[#ffffff]", + "section_badge": "FİYATLANDIRMA", + "section_title": "Size Uygun Paketi Seçin", + "section_subtitle": "Tüm paketler 30 gün para iade garantisi ile geliyor", + "column_class": "md:w-6/12 lg:w-4/12", + "featured_label": "Önerilen", + "plans": [ + { + "name": "Başlangıç", + "currency": "₺", + "price": "999", + "period": "ay", + "features": [ + "5 Sayfa", + "Mobil Uyumlu", + "SEO Optimizasyonu", + "7/24 Destek" + ], + "button_text": "Başla", + "button_url": "#" + }, + { + "name": "Profesyonel", + "currency": "₺", + "price": "2499", + "period": "ay", + "featured": true, + "features": [ + "15 Sayfa", + "Mobil Uyumlu", + "SEO Optimizasyonu", + "Yönetim Paneli", + "7/24 Öncelikli Destek" + ], + "button_text": "Başla", + "button_url": "#" + }, + { + "name": "Kurumsal", + "currency": "₺", + "price": "4999", + "period": "ay", + "features": [ + "Sınırsız Sayfa", + "Mobil Uyumlu", + "SEO Optimizasyonu", + "Gelişmiş Yönetim Paneli", + "Özel Entegrasyonlar", + "7/24 Öncelikli Destek" + ], + "button_text": "Başla", + "button_url": "#" + } + ] + } +} +``` + +--- + +### 6. CTA (Call To Action) +**Kullanım:** Dikkat çekici aksiyon çağrısı +**Dosya:** `resources/views/components/blocks/cta.blade.php` + +**Örnek Veri:** +```json +{ + "type": "cta", + "data": { + "bg_class": "overflow-hidden", + "background_image": "assets/img/photos/blurry.png", + "icon": "assets/img/demos/icon-grape.png", + "title": "Benzersiz düşünün ve fark yaratın", + "subtitle": "Binlerce müşterimiz tarafından güveniliyoruz. Siz de katılın ve kısa sürede çarpıcı web sitenizi kolayca oluşturun.", + "button_text": "Hemen Başla", + "button_url": "#", + "button_icon": "uil uil-arrow-up-right", + "cta_image": "assets/img/demos/f1.png" + } +} +``` + +--- + +### 7. Gallery (Galeri/Portfolio) +**Kullanım:** Proje galerisi veya portfolio +**Dosya:** `resources/views/components/blocks/gallery.blade.php` + +**Örnek Veri:** +```json +{ + "type": "gallery", + "data": { + "bg_class": "!bg-[#f0f0f8]", + "section_badge": "PORTFOLİO", + "section_title": "Projelerimiz", + "section_subtitle": "Son dönemde tamamladığımız bazı projeler", + "column_class": "md:w-6/12 lg:w-4/12", + "items": [ + { + "image": "assets/img/portfolio/p1.jpg", + "category": "Web Tasarım", + "title": "E-Ticaret Sitesi", + "description": "Modern ve kullanıcı dostu e-ticaret platformu", + "link": "#" + }, + { + "image": "assets/img/portfolio/p2.jpg", + "category": "Mobil Uygulama", + "title": "Fitness Uygulaması", + "description": "iOS ve Android için fitness takip uygulaması", + "link": "#" + } + ] + } +} +``` + +--- + +### 8. Team (Ekip Üyeleri) +**Kullanım:** Ekip üyeleri tanıtımı +**Dosya:** `resources/views/components/blocks/team.blade.php` + +**Örnek Veri:** +```json +{ + "type": "team", + "data": { + "bg_class": "!bg-[#ffffff]", + "section_badge": "EKİBİMİZ", + "section_title": "Arkasındaki İnsanlar", + "section_subtitle": "Profesyonel ve deneyimli ekibimizle tanışın", + "column_class": "md:w-6/12 lg:w-3/12", + "members": [ + { + "photo": "assets/img/team/t1.jpg", + "name": "Mehmet Kaya", + "position": "CEO & Kurucu", + "bio": "15 yıllık teknoloji tecrübesi", + "social": { + "twitter": "https://twitter.com/", + "linkedin": "https://linkedin.com/", + "facebook": "https://facebook.com/" + } + }, + { + "photo": "assets/img/team/t2.jpg", + "name": "Zeynep Şahin", + "position": "CTO", + "bio": "Yazılım mimarisi uzmanı", + "social": { + "twitter": "https://twitter.com/", + "linkedin": "https://linkedin.com/" + } + } + ] + } +} +``` + +--- + +### 9. Contact (İletişim Formu) +**Kullanım:** İletişim formu ve bilgileri +**Dosya:** `resources/views/components/blocks/contact.blade.php` + +**Örnek Veri:** +```json +{ + "type": "contact", + "data": { + "bg_class": "!bg-[#f0f0f8]", + "section_badge": "İLETİŞİM", + "title": "Bizimle İletişime Geçin", + "subtitle": "Projeleriniz hakkında konuşmak için bize ulaşın", + "info": { + "address": "Merkez Mah. Teknoloji Cad. No:123 İstanbul", + "phone": "+90 (212) 555 1234", + "email": "info@truncgil.com" + }, + "form_action": "/contact/submit", + "button_text": "Gönder" + } +} +``` + +--- + +## Admin Panelinde Kullanım + +### Page Modelinde `sections` Alanı + +Admin panelinde sayfa oluştururken `sections` JSON alanına yukarıdaki blokları ekleyebilirsiniz: + +```json +[ + { + "type": "hero", + "data": { ... } + }, + { + "type": "features", + "data": { ... } + }, + { + "type": "pricing", + "data": { ... } + }, + { + "type": "cta", + "data": { ... } + } +] +``` + +### Filament Resource'da Repeater Kullanımı + +```php +Repeater::make('sections') + ->schema([ + Select::make('type') + ->options([ + 'hero' => 'Hero (Ana Başlık)', + 'features' => 'Features (Özellikler)', + 'stats' => 'Stats (İstatistikler)', + 'testimonials' => 'Testimonials (Yorumlar)', + 'pricing' => 'Pricing (Fiyatlandırma)', + 'cta' => 'CTA (Aksiyon Çağrısı)', + 'gallery' => 'Gallery (Galeri)', + 'team' => 'Team (Ekip)', + 'contact' => 'Contact (İletişim)', + ]) + ->required() + ->reactive(), + + KeyValue::make('data') + ->label('Blok Verileri') + ->addActionLabel('Alan Ekle') + ]) + ->collapsible() + ->itemLabel(fn (array $state): ?string => $state['type'] ?? null) +``` + +--- + +## Özelleştirme + +Her blok için `bg_class`, `column_class` gibi parametrelerle Tailwind CSS sınıfları özelleştirilebilir. + +**Örnek:** +```json +{ + "bg_class": "!bg-gradient-to-br from-[#e31e24] to-[#ff6b6b]", + "column_class": "md:w-4/12 lg:w-3/12" +} +``` + +--- + +## Yeni Blok Ekleme + +1. `resources/views/components/blocks/` altında yeni blade dosyası oluşturun +2. `@props(['data' => []])` ile veri alın +3. HTML yapısını oluşturun +4. Admin repeater select'ine yeni tipi ekleyin + +--- + +**Son Güncelleme:** {{ now()->format('d.m.Y') }} + diff --git a/resources/views/components/blocks/contact.blade.php b/resources/views/components/blocks/contact.blade.php new file mode 100644 index 0000000..bdd9150 --- /dev/null +++ b/resources/views/components/blocks/contact.blade.php @@ -0,0 +1,81 @@ +@props(['data' => []]) + +
+
+
+
+ @if(!empty($data['section_badge'])) +

{{ $data['section_badge'] }}

+ @endif + + @if(!empty($data['title'])) +

+ {{ $data['title'] }} +

+ @endif + + @if(!empty($data['subtitle'])) +

{{ $data['subtitle'] }}

+ @endif + + @if(!empty($data['info'])) +
+ @if(!empty($data['info']['address'])) +
+ +

{{ $data['info']['address'] }}

+
+ @endif + + @if(!empty($data['info']['phone'])) +
+ +

{{ $data['info']['phone'] }}

+
+ @endif + + @if(!empty($data['info']['email'])) +
+ +

{{ $data['info']['email'] }}

+
+ @endif +
+ @endif +
+ +
+
+ @csrf +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+ diff --git a/resources/views/templates/generic.blade.php b/resources/views/templates/generic.blade.php index 43805c5..894480b 100644 --- a/resources/views/templates/generic.blade.php +++ b/resources/views/templates/generic.blade.php @@ -2,13 +2,19 @@ @section('content') @php $blocks = $sections ?? []; @endphp - @if(is_array($blocks)) + @if(is_array($blocks) && !empty($blocks)) @foreach($blocks as $block) @php $type = $block['type'] ?? null; @endphp - @if($type && view()->exists("components.templates.$type")) - @include("components.templates.$type", ['data' => $block['props'] ?? $block]) + @if($type && view()->exists("components.blocks.$type")) + @endif @endforeach + @else + {{-- Hiç blok yoksa placeholder göster --}} +
+

Bu sayfa henüz içerik eklenmemiş

+

Admin panelinden bu sayfaya bloklar ekleyebilirsiniz.

+
@endif @endsection diff --git a/resources/views/templates/home.blade.php b/resources/views/templates/home.blade.php index 8837dd8..93e9d8b 100644 --- a/resources/views/templates/home.blade.php +++ b/resources/views/templates/home.blade.php @@ -2,57 +2,19 @@ @section('content') @php - // Admin verisi varsa ve boş değilse dinamik render, yoksa statik HTML - $pageData = $page->data ?? []; - $hasDynamic = is_array($pageData) && count($pageData) > 0; + // sections varsa blok bazlı render, yoksa index.html fallback + $blocks = $sections ?? []; + $hasBlocks = is_array($blocks) && count($blocks) > 0; @endphp - @if($hasDynamic) - {{-- Dinamik (admin) veri ile render --}} -
-
-

{{ data_get($page->data ?? [], 'hero_title') }}

-

{{ data_get($page->data ?? [], 'hero_subtitle') }}

- @if($img = data_get($page->data ?? [], 'hero_image')) - hero - @endif -
- @if($btn = data_get($page->data ?? [], 'hero_primary_url')) - {{ data_get($page->data ?? [], 'hero_primary_text') }} - @endif - @if($btn2 = data_get($page->data ?? [], 'hero_secondary_url')) - {{ data_get($page->data ?? [], 'hero_secondary_text') }} - @endif -
-
-
- - @if($features = data_get($page->data ?? [], 'features', [])) -
-
-
- @foreach($features as $item) -
- @if(!empty($item['icon'])) @endif -

{{ $item['title'] ?? '' }}

-

{{ $item['text'] ?? '' }}

-
- @endforeach -
-
-
- @endif - - @if(data_get($page->data ?? [], 'cta_title')) -
-
-

{{ data_get($page->data ?? [], 'cta_title') }}

- - {{ data_get($page->data ?? [], 'cta_button_text') }} - -
-
- @endif + @if($hasBlocks) + {{-- Blok bazlı dinamik render --}} + @foreach($blocks as $block) + @php $type = $block['type'] ?? null; @endphp + @if($type && view()->exists("components.blocks.$type")) + + @endif + @endforeach @else {{-- Statik fallback: public/html/index.html içeriğinin bölümü --}} @php