Add Blocks Usage Documentation: Created a comprehensive guide for the block-based page creation system, detailing the available blocks, their usage, and customization options. Included example data and instructions for integrating blocks into the admin panel.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,81 @@
|
||||
@props(['data' => []])
|
||||
|
||||
<section class="wrapper {{ $data['bg_class'] ?? '!bg-[#f0f0f8]' }}">
|
||||
<div class="container py-24 xl:py-32 lg:py-32 md:py-32">
|
||||
<div class="flex flex-wrap mx-[-15px]">
|
||||
<div class="lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||||
@if(!empty($data['section_badge']))
|
||||
<h2 class="text-[0.8rem] tracking-[0.02rem] uppercase text-[#e31e24] !mb-3 !leading-[1.35]">{{ $data['section_badge'] }}</h2>
|
||||
@endif
|
||||
|
||||
@if(!empty($data['title']))
|
||||
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
|
||||
{{ $data['title'] }}
|
||||
</h2>
|
||||
@endif
|
||||
|
||||
@if(!empty($data['subtitle']))
|
||||
<p class="lead !leading-[1.6] !mb-8">{{ $data['subtitle'] }}</p>
|
||||
@endif
|
||||
|
||||
@if(!empty($data['info']))
|
||||
<div class="!mb-8">
|
||||
@if(!empty($data['info']['address']))
|
||||
<div class="flex items-start !mb-4">
|
||||
<i class="uil uil-location-point text-[#e31e24] text-[1.3rem] !mr-3"></i>
|
||||
<p class="!mb-0">{{ $data['info']['address'] }}</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(!empty($data['info']['phone']))
|
||||
<div class="flex items-start !mb-4">
|
||||
<i class="uil uil-phone-volume text-[#e31e24] text-[1.3rem] !mr-3"></i>
|
||||
<p class="!mb-0"><a href="tel:{{ $data['info']['phone'] }}" class="hover:text-[#e31e24]">{{ $data['info']['phone'] }}</a></p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(!empty($data['info']['email']))
|
||||
<div class="flex items-start !mb-4">
|
||||
<i class="uil uil-envelope text-[#e31e24] text-[1.3rem] !mr-3"></i>
|
||||
<p class="!mb-0"><a href="mailto:{{ $data['info']['email'] }}" class="hover:text-[#e31e24]">{{ $data['info']['email'] }}</a></p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||||
<form method="POST" action="{{ $data['form_action'] ?? route('contact.submit') }}" class="contact-form">
|
||||
@csrf
|
||||
<div class="messages"></div>
|
||||
<div class="flex flex-wrap mx-[-10px]">
|
||||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[10px] max-w-full">
|
||||
<div class="form-floating !mb-4">
|
||||
<input id="form_name" type="text" name="name" class="form-control !relative block w-full text-[.75rem] font-medium text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:text-[#60697b] focus:bg-[rgba(255,255,255,.03)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-[rgba(63,120,224,0.5)] focus-visible:!border-[rgba(63,120,224,0.5)] focus-visible:!outline-0 placeholder:text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] leading-[1.25]" placeholder="Jane" required>
|
||||
<label for="form_name" class="text-[#959ca9] !mb-0 !ml-[0.05rem] inline-block !text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Ad Soyad *</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[10px] max-w-full">
|
||||
<div class="form-floating !mb-4">
|
||||
<input id="form_email" type="email" name="email" class="form-control !relative block w-full text-[.75rem] font-medium text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:text-[#60697b] focus:bg-[rgba(255,255,255,.03)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-[rgba(63,120,224,0.5)] focus-visible:!border-[rgba(63,120,224,0.5)] focus-visible:!outline-0 placeholder:text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] leading-[1.25]" placeholder="jane.doe@example.com" required>
|
||||
<label for="form_email" class="text-[#959ca9] !mb-0 !ml-[0.05rem] inline-block !text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">E-posta *</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex-[0_0_auto] !px-[10px] max-w-full">
|
||||
<div class="form-floating !mb-4">
|
||||
<textarea id="form_message" name="message" class="form-control !relative block w-full text-[.75rem] font-medium text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:text-[#60697b] focus:bg-[rgba(255,255,255,.03)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-[rgba(63,120,224,0.5)] focus-visible:!border-[rgba(63,120,224,0.5)] focus-visible:!outline-0 placeholder:text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 !h-[calc(2.5rem_+_2px)] !min-h-[calc(8rem_+_2px)] leading-[1.25] p-[.6rem_1rem] resize-none" placeholder="Your message" required></textarea>
|
||||
<label for="form_message" class="text-[#959ca9] mb-0 ml-[0.05rem] inline-block text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Mesajınız *</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full flex-[0_0_auto] !px-[10px] max-w-full">
|
||||
<button type="submit" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:border-[#e31e24] focus:shadow-[rgba(92,140,229,1)] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem] btn-send !mb-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
|
||||
{{ $data['button_text'] ?? 'Gönder' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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"))
|
||||
<x-dynamic-component :component="'blocks.'.$type" :data="$block['data'] ?? $block" />
|
||||
@endif
|
||||
@endforeach
|
||||
@else
|
||||
{{-- Hiç blok yoksa placeholder göster --}}
|
||||
<div class="container py-24 text-center">
|
||||
<h2 class="!text-[2rem] !mb-4">Bu sayfa henüz içerik eklenmemiş</h2>
|
||||
<p>Admin panelinden bu sayfaya bloklar ekleyebilirsiniz.</p>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -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 --}}
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>{{ data_get($page->data ?? [], 'hero_title') }}</h1>
|
||||
<p>{{ data_get($page->data ?? [], 'hero_subtitle') }}</p>
|
||||
@if($img = data_get($page->data ?? [], 'hero_image'))
|
||||
<img src="{{ asset($img) }}" alt="hero">
|
||||
@endif
|
||||
<div class="hero-actions">
|
||||
@if($btn = data_get($page->data ?? [], 'hero_primary_url'))
|
||||
<a href="{{ $btn }}" class="btn">{{ data_get($page->data ?? [], 'hero_primary_text') }}</a>
|
||||
@endif
|
||||
@if($btn2 = data_get($page->data ?? [], 'hero_secondary_url'))
|
||||
<a href="{{ $btn2 }}" class="btn btn-outline">{{ data_get($page->data ?? [], 'hero_secondary_text') }}</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@if($features = data_get($page->data ?? [], 'features', []))
|
||||
<section class="features">
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
@foreach($features as $item)
|
||||
<div class="feature-item">
|
||||
@if(!empty($item['icon'])) <img src="{{ asset($item['icon']) }}" alt=""> @endif
|
||||
<h3>{{ $item['title'] ?? '' }}</h3>
|
||||
<p>{{ $item['text'] ?? '' }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
@if(data_get($page->data ?? [], 'cta_title'))
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h2>{{ data_get($page->data ?? [], 'cta_title') }}</h2>
|
||||
<a class="btn" href="{{ data_get($page->data ?? [], 'cta_button_url', '#') }}">
|
||||
{{ data_get($page->data ?? [], 'cta_button_text') }}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
@if($hasBlocks)
|
||||
{{-- Blok bazlı dinamik render --}}
|
||||
@foreach($blocks as $block)
|
||||
@php $type = $block['type'] ?? null; @endphp
|
||||
@if($type && view()->exists("components.blocks.$type"))
|
||||
<x-dynamic-component :component="'blocks.'.$type" :data="$block['data'] ?? $block" />
|
||||
@endif
|
||||
@endforeach
|
||||
@else
|
||||
{{-- Statik fallback: public/html/index.html içeriğinin <body> bölümü --}}
|
||||
@php
|
||||
|
||||
Reference in New Issue
Block a user