development 31-10-2025
This commit is contained in:
parent
7cf3558ba7
commit
fa2ebd457d
47 changed files with 2980 additions and 452 deletions
|
|
@ -0,0 +1,146 @@
|
|||
<section class="section-padding {{ $bg }}" id="{{ $content['id'] }}">
|
||||
<div class="container-padding">
|
||||
@if(isset($content['title']))
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{{ $content['title'] }}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="grid lg:grid-cols-12 gap-16">
|
||||
@if ($layout === 'right')
|
||||
{{-- Layout Right: Bild zuerst, dann Text --}}
|
||||
{{-- Bild --}}
|
||||
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-1">
|
||||
<div class="relative h-full">
|
||||
<div class="sticky top-8">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-right delay-300">
|
||||
@if(isset($content['image']))
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
||||
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['highlight']['text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Text --}}
|
||||
<div class="space-y-8 col-span-8 order-1 lg:order-2">
|
||||
<div class="text-center lg:text-left slide-left delay-400">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
||||
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['tag_title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['features'] as $index => $feature)
|
||||
<div class="card-elevated p-6 rounded-xl slide-left delay-{{ 500 + ($index * 100) }}">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if (isset($feature['icon']))
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
||||
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $feature['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Layout Left (Standard): Text zuerst, dann Bild --}}
|
||||
{{-- Text --}}
|
||||
<div class="space-y-8 col-span-8 order-1 lg:order-1">
|
||||
<div class="text-center lg:text-left slide-right delay-300">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
|
||||
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
|
||||
{{ $content['tag'] }}
|
||||
</div>
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['tag_title'] !!}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
@foreach ($content['features'] as $index => $feature)
|
||||
<div class="card-elevated p-6 rounded-xl slide-right delay-{{ 400 + ($index * 100) }}">
|
||||
<div class="flex gap-4">
|
||||
<div
|
||||
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
|
||||
@if (isset($feature['icon']))
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
|
||||
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-foreground mb-2">
|
||||
{{ $feature['title'] }}
|
||||
</h4>
|
||||
<p class="text-muted-foreground">
|
||||
{{ $feature['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Bild --}}
|
||||
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-2">
|
||||
<div class="relative h-full">
|
||||
<div class="sticky top-8">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
@if(isset($content['image']))
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
|
||||
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ $content['highlight']['text'] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,27 +1,33 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title">{{ $title }}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $subtitle }}
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title">{!! $title !!}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
||||
{!! $subtitle !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Brand Cards --}}
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach ($worlds as $world)
|
||||
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300">
|
||||
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-500">
|
||||
<div class="relative">
|
||||
<img src="{{ asset('img/assets/' . $world['image']) }}" alt="{{ $world['title'] }}"
|
||||
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
|
||||
<div class="p-6 spacing-small">
|
||||
<h3 class="text-xl font-medium">{{ $world['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $world['description'] }}
|
||||
</p>
|
||||
<div class="p-6 spacing-small flex flex-col justify-between flex-grow">
|
||||
<div class="mb-4">
|
||||
@if (isset($world['logo']))
|
||||
<img src="{{ asset($world['logo']) }}" alt="{{ $world['title'] }}"
|
||||
class="{{ $world['logo_width'] }} h-18 object-contain" />
|
||||
@else
|
||||
<h3 class="text-xl font-medium">{{ $world['title'] }}</h3>
|
||||
@endif
|
||||
<p class="text-muted-foreground leading-relaxed mt-2">
|
||||
{{ $world['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="{{ $world['link'] }}"
|
||||
class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<section class="{{ $bg }} text-secondary-foreground section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<div class="spacing-section">
|
||||
<h2 class="text-section-title text-white">
|
||||
<h2 class="text-section-title text-white slide-up delay-300">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed slide-up delay-300">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="pt-4">
|
||||
<div class="pt-4 slide-up delay-500">
|
||||
<a
|
||||
href="{{ $content['button_link'] }}"
|
||||
class="btn-primary-accent px-8 py-4 text-lg"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{{-- Brand Cards --}}
|
||||
<div class="grid md:grid-cols-3 gap-8">
|
||||
@foreach ($content['cards'] as $index => $card)
|
||||
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
|
||||
|
||||
@if(isset($card['image']))
|
||||
<div class="relative">
|
||||
<img src="{{ asset('img/assets/' . $card['image']) }}" alt="{{ $card['title'] }}"
|
||||
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if(isset($card['icon']))
|
||||
<div class="relative pt-12 pb-8">
|
||||
<div class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
|
||||
@svg('heroicon-o-'.$card['icon'], 'w-10 h-10 text-secondary-foreground')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="p-6 spacing-small flex flex-col justify-between flex-grow">
|
||||
<div class="mb-4">
|
||||
@if (isset($card['logo']))
|
||||
<img src="{{ asset($card['logo']) }}" alt="{{ $card['title'] }}"
|
||||
class="{{ $card['logo_width'] }} h-18 object-contain" />
|
||||
@endif
|
||||
@if(isset($card['title']))
|
||||
<h3 class="text-xl font-medium text-center">{{ $card['title'] }}</h3>
|
||||
@endif
|
||||
@if(isset($card['description']))
|
||||
<p class="text-muted-foreground leading-relaxed mt-2 text-center">
|
||||
{{ $card['description'] }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if(isset($card['button']))
|
||||
<div class="flex flex-col sm:flex-row gap-4 slide-right delay-300 mx-auto pt-4">
|
||||
<a href="{{ $card['button'] }}" class="btn-primary-accent">
|
||||
{{ $card['button_text'] }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
@if(isset($card['link']))
|
||||
<a href="{{ $card['link'] }}"
|
||||
class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">
|
||||
Mehr erfahren
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
|
||||
</path>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="section-padding text-center">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['testimonials'] as $testimonial)
|
||||
<div class="card-elevated rounded-2xl p-8 text-left space-y-6">
|
||||
@foreach($content['testimonials'] as $index => $testimonial)
|
||||
<div class="card-elevated rounded-2xl p-8 text-left space-y-6 slide-up delay-{{ $index * 200 }}">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="{{ asset('img/assets/' . $testimonial['image']) }}" alt="{{ $testimonial['author'] }}" class="w-16 h-16 rounded-full object-cover">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -2,40 +2,54 @@
|
|||
<div class="container-padding">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
|
||||
@if($layout === 'right')
|
||||
@if ($layout === 'right')
|
||||
{{-- Layout Right: Image zuerst, dann Content --}}
|
||||
{{-- Image --}}
|
||||
<div class="relative lg:order-1">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] object-cover"
|
||||
/>
|
||||
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
|
||||
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] object-cover" />
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
|
||||
{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section lg:order-2">
|
||||
<div class="spacing-content">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
<div class="spacing-content slide-right delay-300">
|
||||
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
||||
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
||||
@foreach($content['paragraphs'] as $paragraph)
|
||||
<p>{{ $paragraph }}</p>
|
||||
@foreach ($content['paragraphs'] as $paragraph)
|
||||
<p>{!! $paragraph !!}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
@if(isset($content['list']))
|
||||
<div class="grid grid-cols-1 gap-6 border-t border-border/50 pt-8">
|
||||
@foreach ($content['list'] as $index => $item)
|
||||
<div class="flex gap-4 slide-up delay-{{ $index * 200 }} mb-4">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@svg('heroicon-o-'.$item['icon'], 'w-6 h-6 text-secondary')
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-muted-foreground">{{ $item['title'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Layout Left (Standard): Content zuerst, dann Image --}}
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section">
|
||||
<div class="spacing-content">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
<div class="spacing-content slide-right delay-300">
|
||||
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
||||
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
||||
@foreach($content['paragraphs'] as $paragraph)
|
||||
<p>{{ $paragraph }}</p>
|
||||
@foreach ($content['paragraphs'] as $paragraph)
|
||||
<p>{!! $paragraph !!}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,13 +57,12 @@
|
|||
|
||||
{{-- Image --}}
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] object-cover"
|
||||
/>
|
||||
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
|
||||
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-full object-cover" />
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
|
||||
{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="section-padding bg-background">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
|
@ -12,29 +12,11 @@
|
|||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
@foreach($content['features'] as $index => $feature)
|
||||
<div class="group {{ $index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : '' }}">
|
||||
<div class="card-elevated p-8 rounded-3xl h-full hover:scale-105 transition-all duration-300 relative overflow-hidden">
|
||||
<div class="card-elevated p-8 overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
|
||||
<div class="text-center space-y-6">
|
||||
<div class="w-16 h-16 mx-auto rounded-xl bg-secondary/10 flex items-center justify-center mb-6">
|
||||
@if($feature['icon'] === 'cloud')
|
||||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'shield')
|
||||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'layers')
|
||||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
@elseif($feature['icon'] === 'database')
|
||||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
||||
</svg>
|
||||
<div class="mx-auto w-16 h-16 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
|
||||
@if($feature['icon'])
|
||||
@svg('heroicon-o-'.$feature['icon'], 'w-8 h-8 text-secondary-foreground')
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,54 +1,56 @@
|
|||
{{-- Hero Icons Helper Function --}}
|
||||
@php
|
||||
function renderHeroIcon($iconName, $style = 'outline') {
|
||||
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
|
||||
$fallbackPath = public_path("heroicons/optimized/24/outline/sparkles.svg");
|
||||
function renderHeroIcon($iconName, $style = 'outline', $color = 'text-secondary')
|
||||
{
|
||||
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
|
||||
$fallbackPath = public_path('heroicons/optimized/24/outline/sparkles.svg');
|
||||
|
||||
if (file_exists($iconPath)) {
|
||||
$svg = file_get_contents($iconPath);
|
||||
// Add classes for styling
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
} elseif (file_exists($fallbackPath)) {
|
||||
$svg = file_get_contents($fallbackPath);
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
|
||||
}
|
||||
if (file_exists($iconPath)) {
|
||||
$svg = file_get_contents($iconPath);
|
||||
// Add classes for styling
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 ' . $color . '"', $svg);
|
||||
} elseif (file_exists($fallbackPath)) {
|
||||
$svg = file_get_contents($fallbackPath);
|
||||
return str_replace('<svg', '<svg class="w-10 h-10 ' . $color . '"', $svg);
|
||||
}
|
||||
|
||||
// Ultimate fallback - simple star icon
|
||||
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
// Ultimate fallback - simple star icon
|
||||
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.563.563 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
|
||||
</svg>';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<section class="section-padding {{ $bg }}">
|
||||
<div class="container-padding">
|
||||
{{-- Section Title --}}
|
||||
<div class="text-center mb-16">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
@if(isset($content['subtitle']))
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
@if (isset($content['subtitle']))
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Pillars Grid --}}
|
||||
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
|
||||
@foreach($content['pillars'] as $index => $pillar)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<div class="text-center spacing-content group">
|
||||
<div class="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
|
||||
{!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline') !!}
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8 lg:gap-12 slide-up delay-400">
|
||||
@foreach ($content['pillars'] as $index => $pillar)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<div class="text-center spacing-content group">
|
||||
<div
|
||||
class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
|
||||
{!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline', 'text-secondary-foreground') !!}
|
||||
</div>
|
||||
|
||||
<div class="spacing-small">
|
||||
<h3 class="text-xl font-medium">{{ $pillar['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{{ $pillar['description'] }}
|
||||
</p>
|
||||
<div class="spacing-small">
|
||||
<h3 class="text-xl font-medium">{{ $pillar['title'] }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{!! $pillar['description'] !!}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<section class="section-padding flex items-center relative overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
|
||||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-hero">
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
<section class="section-padding bg-background">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-section-title mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
|
||||
{{ $content['subtitle'] }}
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
|
||||
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
|
||||
{!! $content['subtitle'] !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<div class="card-elevated rounded-2xl p-8 text-center">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-secondary mb-4">
|
||||
{{ $stat['number'] }}
|
||||
</h2>
|
||||
<h3 class="text-xl lg:text-2xl font-semibold text-foreground mb-3">
|
||||
{{ $stat['label'] }}
|
||||
</h3>
|
||||
<p class="text-md text-muted-foreground leading-relaxed">
|
||||
{{ $stat['description'] }}
|
||||
</p>
|
||||
@foreach ($content['stats'] as $index => $stat)
|
||||
|
||||
<div class="card-elevated p-8 text-center overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
|
||||
<h2 class="text-4xl lg:text-5xl font-bold text-secondary mb-4">
|
||||
{{ $stat['number'] }}
|
||||
</h2>
|
||||
<h3 class="text-xl lg:text-2xl font-semibold text-foreground mb-3">
|
||||
{{ $stat['label'] }}
|
||||
</h3>
|
||||
<p class="text-md text-muted-foreground leading-relaxed">
|
||||
{{ $stat['description'] }}
|
||||
</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<section class="section-padding flex items-center relative">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 card-elevated rounded-[20px] w-[95%]">
|
||||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Left Content --}}
|
||||
<div class="space-y-8">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<section class="section-padding flex items-center relative">
|
||||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Left Content --}}
|
||||
<div class="space-y-8">
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-6 slide-right delay-200">
|
||||
<h1 class="text-hero">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<div class="flex flex-col sm:flex-row gap-4 slide-right delay-300">
|
||||
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
|
||||
{{ $content['cta1_text'] }}
|
||||
</a>
|
||||
|
|
@ -21,30 +21,31 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-8 text-sm text-muted-foreground">
|
||||
<div class="flex flex-wrap items-center gap-6 pt-10 border-t border-border/80 slide-right delay-300">
|
||||
@foreach ($content['stats'] as $stat)
|
||||
<span>{{ $stat }}</span>
|
||||
@if (!$loop->last)
|
||||
<span>•</span>
|
||||
@endif
|
||||
<div class="flex items-center gap-2 text-md text-muted-foreground">
|
||||
@svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary')
|
||||
<span>{{ $stat }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Right Image --}}
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
{{-- Floating info card --}}
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
|
||||
<div class="text-sm text-muted-foreground">{{ $content['card_title'] }}</div>
|
||||
<div class="text-2xl font-medium">{!! $content['card_text'] !!}
|
||||
<div class="text-lg font-medium font-secondary">{!! $content['card_text'] !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<section class="{{ $bg }} text-secondary-foreground section-padding">
|
||||
<div class="container-narrow text-center">
|
||||
<div class="spacing-section">
|
||||
<h2 class="text-section-title text-white">
|
||||
<h2 class="text-section-title text-white slide-up delay-300">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
||||
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed slide-up delay-300">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid md:grid-cols-3 gap-8 py-8">
|
||||
<div class="grid md:grid-cols-3 gap-8 py-8 slide-up delay-400">
|
||||
@foreach($content['stats'] as $stat)
|
||||
<div class="text-center space-y-3">
|
||||
<div class="text-4xl font-light text-secondary-foreground">{{ $stat['number'] }}</div>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="spacing-content">
|
||||
<div class="spacing-content slide-up delay-500">
|
||||
<a href="{{ $content['button_link'] }}" class="btn-primary-accent">
|
||||
{{ $content['button_text'] }}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,37 @@
|
|||
<section class="section-padding flex items-center relative overflow-hidden">
|
||||
<section class="section-padding flex items-center relative border-b border-border/30">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
|
||||
<div class="grid lg:grid-cols-2 gap-16 items-center">
|
||||
<div class="space-y-8">
|
||||
<h1 class="text-hero">
|
||||
<div class="slide-right delay-300">
|
||||
<h1 class="text-hero mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
|
||||
{{ $content['subtitle'] }}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
@foreach ($content['partner_types'] as $partner)
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@if ($partner['icon'] === 'trending-up')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
|
||||
</svg>
|
||||
@elseif($partner['icon'] === 'globe')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@elseif($partner['icon'] === 'handshake')
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
@if(isset($content['partner_types']))
|
||||
<div class="grid grid-cols-2 gap-6 mt-8 border-t border-border/50 pt-8">
|
||||
@foreach ($content['partner_types'] as $index => $partner)
|
||||
<div class="flex gap-4 slide-up delay-{{ $index * 200 }}">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
|
||||
@svg('heroicon-o-'.$partner['icon'], 'w-6 h-6 text-secondary')
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-foreground">{{ $partner['title'] }}</p>
|
||||
<p class="text-sm text-muted-foreground">{{ $partner['description'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
|
||||
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[600px] object-cover" />
|
||||
|
|
@ -60,16 +40,8 @@
|
|||
|
||||
{{-- Floating info card --}}
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="w-24 h-24 mx-auto rounded-full bg-secondary flex items-center justify-center mb-4">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
|
||||
<div class="text-center slide-left delay-400">
|
||||
<h3 class="text-xl font-semibold text-foreground">{{ $content['hub']['title'] }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ $content['hub']['subtitle'] }}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<section class="section-padding bg-accent">
|
||||
<div class="container-padding">
|
||||
<div class="text-center mb-16">
|
||||
<div class="text-center mb-16 slide-up delay-300">
|
||||
<h2 class="text-section-title text-foreground mb-6">
|
||||
{!! $content['title'] !!}
|
||||
</h2>
|
||||
|
|
@ -11,44 +11,19 @@
|
|||
|
||||
<div class="grid md:grid-cols-3 gap-8 mb-16">
|
||||
@foreach ($content['steps'] as $index => $step)
|
||||
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300">
|
||||
<div class="relative overflow-hidden">
|
||||
<img src="{{ asset('img/assets/' . $step['image']) }}" alt="{{ $step['title'] }}"
|
||||
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" />
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300 slide-up delay-{{ $index * 200 }}">
|
||||
@if(isset($step['icon']))
|
||||
<div class="relative pt-12 pb-8">
|
||||
<div class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
|
||||
@svg('heroicon-o-'.$step['icon'], 'w-10 h-10 text-secondary-foreground')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Step Number Badge --}}
|
||||
<div
|
||||
class="absolute top-4 left-4 w-12 h-12 rounded-full bg-secondary text-white flex items-center justify-center font-bold text-lg">
|
||||
{{ $step['step'] }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="p-8">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
|
||||
@if ($step['icon'] === 'file-text')
|
||||
<svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
||||
</path>
|
||||
</svg>
|
||||
@elseif($step['icon'] === 'search')
|
||||
<svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
@else
|
||||
<svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
@endif
|
||||
<span class="text-lg font-bold text-secondary">{{ $index + 1 }}</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-medium text-foreground">
|
||||
{{ $step['title'] }}
|
||||
|
|
@ -60,9 +35,9 @@
|
|||
</p>
|
||||
|
||||
@if ($index === count($content['steps']) - 1)
|
||||
<a href="/contact">
|
||||
<button class="btn-secondary-accent w-full">
|
||||
Jetzt starten
|
||||
<a href="{{ $content['cta']['button_link'] }}">
|
||||
<button class="btn-secondary-accent w-full cursor-pointer">
|
||||
{{ $content['cta']['button_text'] }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
|
|
@ -70,22 +45,5 @@
|
|||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- CTA Section --}}
|
||||
<div class="text-center">
|
||||
<div class="card-elevated p-12 rounded-3xl bg-gradient-to-br from-secondary/10 to-secondary/5">
|
||||
<h3 class="text-3xl font-light text-foreground mb-6">
|
||||
{!! $content['cta']['title'] !!}
|
||||
</h3>
|
||||
<p class="text-large text-muted-foreground mb-8 max-w-2xl mx-auto">
|
||||
{{ $content['cta']['subtitle'] }}
|
||||
</p>
|
||||
<a href="{{ $content['cta']['button_link'] }}">
|
||||
<button class="btn-primary-accent">
|
||||
{{ $content['cta']['button_text'] }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
||||
{{-- Content --}}
|
||||
<div class="spacing-section">
|
||||
<div class="spacing-content">
|
||||
<div class="spacing-content slide-right delay-300">
|
||||
<h2 class="text-section-title">{{ $content['title'] }}</h2>
|
||||
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
|
||||
@foreach($content['paragraphs'] as $paragraph)
|
||||
<p>{{ $paragraph }}</p>
|
||||
@foreach ($content['paragraphs'] as $paragraph)
|
||||
<p>{!! $paragraph !!}</p>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -15,14 +15,13 @@
|
|||
|
||||
{{-- Image --}}
|
||||
<div class="relative">
|
||||
<div class="card-elevated rounded-3xl overflow-hidden">
|
||||
<img
|
||||
src="{{ asset('img/assets/' . $content['image']) }}"
|
||||
alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-[500px] object-cover"
|
||||
/>
|
||||
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
|
||||
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
|
||||
class="w-full h-full object-cover" />
|
||||
|
||||
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
|
||||
<div
|
||||
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
|
||||
{{ $content['image_caption'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue