# Hero Section Content Block

Etkileyici landing page'ler ve önemli içerik bölümleri için tam özellikli hero section bileşeni.

## 📍 Konum

```
packages/my_site_package/ContentBlocks/ContentElements/hero-section/
```

## 🎯 Genel Bakış

Hero Section, bir web sayfasının en üst bölümünde kullanılan, dikkat çekici ve etkili bir içerik bileşenidir. Genellikle ana mesajı, görseli ve çağrı-eylemine (CTA) yer vermek için kullanılır.

## ✨ Özellikler

- ✅ Tam genişlikli arka plan görseli
- ✅ Başlık ve alt başlık
- ✅ Zengin metin düzenleyici desteği
- ✅ Özelleştirilebilir CTA butonu
- ✅ Metin hizalama seçenekleri
- ✅ Açık/koyu metin rengi seçenekleri
- ✅ Responsive tasarım
- ✅ Backend preview desteği

## 📋 Alan Referansı

### 1. Header (Başlık)

**Tip**: Text (Mevcut Alan)  
**Zorunlu**: Hayır  
**Maksimum Karakter**: 255

Ana başlık metni. Sayfanın en dikkat çekici bölümüdür.

**Kullanım Örneği**:

```
Hoş Geldiniz
Modern Web Çözümleri
İnovasyonda Öncü
```

**Fluid Template**:

```html
<f:if condition="{data.header}">
  <h1 class="hero-section__title">{data.header}</h1>
</f:if>
```

---

### 2. Subtitle (Alt Başlık)

**Tip**: Text  
**Zorunlu**: Hayır  
**Maksimum Karakter**: 255

Başlığı destekleyen ikincil metin.

**Kullanım Örneği**:

```
Size Özel Dijital Deneyimler
2024'ün En İyi Çözümleri
Güvenilir İş Ortağınız
```

**Fluid Template**:

```html
<f:if condition="{data.subtitle}">
  <p class="hero-section__subtitle">{data.subtitle}</p>
</f:if>
```

**CSS Özellikleri**:

- Font boyutu: 1.5rem
- Opacity: 0.9
- Alt margin: 1rem

---

### 3. Bodytext (Açıklama Metni)

**Tip**: Textarea (Mevcut Alan)  
**Zorunlu**: Hayır  
**RichText**: Aktif

Detaylı açıklama metni. HTML formatlamayı destekler.

**Kullanım Örnekleri**:

```html
<!-- Basit metin -->
15 yıllık deneyimimizle sizlere en iyi hizmeti sunuyoruz.

<!-- HTML formatlı -->
<p>
  Şirketimiz <strong>2010 yılında</strong> kuruldu ve bugüne kadar
  <em>1000'den fazla</em> projeyi başarıyla tamamladı.
</p>
```

**Fluid Template**:

```html
<f:if condition="{data.bodytext}">
  <div class="hero-section__description">
    <f:format.html>{data.bodytext}</f:format.html>
  </div>
</f:if>
```

**CSS Özellikleri**:

- Font boyutu: 1.125rem
- Line height: 1.6
- Alt margin: 2rem

---

### 4. Hero Image (Ana Görsel)

**Tip**: File  
**Zorunlu**: Hayır  
**Maksimum Dosya**: 1  
**İzin Verilen Tipler**: common-image-types (jpg, jpeg, png, gif, svg, webp)  
**Önerilen Boyut**: 1920x1080px

Hero section'ın arka plan görseli.

**Teknik Detaylar**:

```yaml
- identifier: hero_image
  type: File
  allowed: common-image-types
  minitems: 0
  maxitems: 1
  extendedPalette: true
```

**Extended Palette Özellikleri**:

- Alternative text
- Title
- Description
- Link
- Crop/Resize seçenekleri

**Fluid Template**:

```html
<f:if condition="{data.hero_image}">
  <f:for each="{data.hero_image}" as="image">
    <f:image
      image="{image}"
      alt="{image.alternative}"
      class="hero-section__background"
      width="1920"
      height="1080"
    />
  </f:for>
</f:if>
```

**CSS Özellikleri**:

```css
.hero-section__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
```

---

### 5. CTA Button (Aksiyon Butonu)

#### 5.1. Button Text

**Tip**: Text  
**Zorunlu**: Hayır  
**Maksimum Karakter**: 50

Buton üzerinde görünecek metin.

**Önerilen Metinler**:

```
Hemen Başla
Daha Fazla Bilgi
İletişime Geç
Teklif Al
Keşfet
```

---

#### 5.2. Button Link

**Tip**: Link  
**Zorunlu**: Hayır  
**Autocomplete**: Aktif

Butona tıklandığında gidilecek sayfa/URL.

**Link Tipleri**:

- **Sayfa**: `t3://page?uid=123`
- **Dış Link**: `https://example.com`
- **Email**: `mailto:info@example.com`
- **Telefon**: `tel:+905551234567`
- **Dosya**: `t3://file?uid=456`

**Fluid Template**:

```html
<f:if condition="{data.button_text}">
  <f:link.typolink
    parameter="{data.button_link}"
    class="hero-section__button hero-section__button--{data.button_style}"
  >
    {data.button_text}
  </f:link.typolink>
</f:if>
```

---

#### 5.3. Button Style

**Tip**: Select (Single)  
**Zorunlu**: Hayır  
**Varsayılan**: primary

Buton stil seçenekleri.

**Seçenekler**:

| Değer       | Etiket    | Görünüm                    | Kullanım Durumu       |
| ----------- | --------- | -------------------------- | --------------------- |
| `primary`   | Primary   | Mavi arkaplan, beyaz metin | Ana aksiyon butonları |
| `secondary` | Secondary | Gri arkaplan, beyaz metin  | İkincil aksiyonlar    |
| `outline`   | Outline   | Transparan, border         | Alternatif aksiyonlar |

**CSS Sınıfları**:

```css
/* Primary */
.hero-section__button--primary {
  background-color: #0066cc;
  color: #ffffff;
}

/* Secondary */
.hero-section__button--secondary {
  background-color: #6c757d;
  color: #ffffff;
}

/* Outline */
.hero-section__button--outline {
  background-color: transparent;
  color: currentColor;
  border: 2px solid currentColor;
}
```

---

### 6. Layout Options (Yerleşim Seçenekleri)

#### 6.1. Text Alignment

**Tip**: Select (Single)  
**Zorunlu**: Hayır  
**Varsayılan**: center

Metin hizalama seçeneği.

**Seçenekler**:

| Değer    | Etiket | CSS Class                   | Kullanım            |
| -------- | ------ | --------------------------- | ------------------- |
| `left`   | Left   | `hero-section--text-left`   | Sol hizalı metinler |
| `center` | Center | `hero-section--text-center` | Ortalanmış metinler |
| `right`  | Right  | `hero-section--text-right`  | Sağ hizalı metinler |

**CSS**:

```css
.hero-section--text-left {
  text-align: left;
}
.hero-section--text-center {
  text-align: center;
}
.hero-section--text-right {
  text-align: right;
}
```

---

#### 6.2. Text Color

**Tip**: Select (Single)  
**Zorunlu**: Hayır  
**Varsayılan**: light

Metin rengi seçeneği. Görsel arkaplanına göre okunabilirliği sağlar.

**Seçenekler**:

| Değer   | Etiket | CSS Class             | Renk    | Kullanım              |
| ------- | ------ | --------------------- | ------- | --------------------- |
| `light` | Light  | `hero-section--light` | #ffffff | Koyu arkaplanlar için |
| `dark`  | Dark   | `hero-section--dark`  | #1a1a1a | Açık arkaplanlar için |

---

### 7. Appearance (TYPO3 Standart)

**Tip**: Basic  
**Kapsam**: TYPO3/Appearance

TYPO3'ün standart görünüm ayarları:

- Layout seçenekleri
- Frame sınıfı
- Space before/after

---

## 💻 Kullanım Örnekleri

### Örnek 1: Basit Hero Section

**Yapılandırma**:

- **Header**: "Hoş Geldiniz"
- **Subtitle**: "Dijital Dönüşümünüzün Ortağı"
- **Button Text**: "Hemen Başla"
- **Button Link**: `/iletisim`
- **Button Style**: Primary
- **Text Alignment**: Center
- **Text Color**: Light

---

### Örnek 2: Resimli Hero Section

**Yapılandırma**:

- **Header**: "2024'ün En İyi Çözümleri"
- **Bodytext**: HTML formatlı açıklama
- **Hero Image**: Yüksek kaliteli arka plan görseli
- **Button Text**: "Daha Fazla Bilgi"
- **Button Link**: `/hakkimizda`
- **Button Style**: Outline

---

### Örnek 3: Minimalist Hero

**Yapılandırma**:

- **Header**: "Basit. Güçlü. Etkili."
- **Text Alignment**: Left
- **Text Color**: Dark
- **Button Style**: Secondary

---

## 🎨 Özelleştirme

### CSS Değişkenleri

Hero Section için özel CSS değişkenleri tanımlayabilirsiniz:

```css
:root {
  --hero-min-height: 500px;
  --hero-title-size: 3rem;
  --hero-subtitle-size: 1.5rem;
  --hero-button-padding: 1rem 2rem;
}
```

### Custom Styling

Kendi stillerinizi eklemek için:

```css
/* Site'nizdeki CSS dosyasına ekleyin */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-section__title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
```

---

## 🔧 Teknik Detaylar

### Dosya Yapısı

```
hero-section/
├── config.yaml                 # Alan tanımları
├── assets/
│   └── icon.svg               # Backend ikonu
├── language/
│   └── labels.xlf             # Çeviriler (EN)
└── templates/
    ├── frontend.html          # Frontend template
    └── backend-preview.html   # Backend preview
```

### Frontend Template Bölümleri

```html
<!-- Ana container -->
<div class="hero-section ...">

    <!-- Arka plan görseli -->
    <f:image ... />

    <!-- İçerik alanı -->
    <div class="hero-section__content">
        <h1>...</h1>           <!-- Başlık -->
        <p>...</p>             <!-- Alt başlık -->
        <div>...</div>         <!-- Açıklama -->
        <f:link.typolink>...   <!-- CTA Butonu -->
    </div>
</div>
```

---

## 🐛 Sorun Giderme

### Görsel Görünmüyor

1. Görsel dosyasının yüklendiğini kontrol edin
2. Dosya izinlerini kontrol edin
3. Browser console'da hata olup olmadığına bakın

### Buton Çalışmıyor

1. Button Link alanının doldurulduğunu kontrol edin
2. Link formatının doğru olduğunu kontrol edin
3. Cache'i temizleyin

### Stil Sorunları

1. CSS dosyalarının yüklendiğini kontrol edin
2. Browser'da stil çakışması olup olmadığına bakın
3. Cache'i temizleyin

---

## 📝 Notlar

- **Performance**: Görsel boyutlarını optimize edin (önerilen max 500KB)
- **Accessibility**: Alternative text alanını mutlaka doldurun
- **SEO**: H1 etiketi olarak render edilir, sayfa başına bir tane kullanın
- **Mobile**: Responsive tasarım otomatik olarak uygulanır
