44 lines
1.8 KiB
PHP

@inject('SectionService', 'App\Services\SectionService')
@php
$param = 'hero';
$heroContent = $SectionService->get($param);
@endphp
<section class="container" id="hero">
<div class="row">
<!-- First Column -->
<div class="col-12 col-md-7 mb-4"> <!-- Stack on small screens -->
<!-- Announcement with Button -->
<p class="lead">
{{ $heroContent['firstColumn']['announcementText'] ?? 'Default Heading' }}
<a href="{{ $heroContent['firstColumn']['announcementLink'] ?? 'Default Heading' }}" class="badge text-bg-secondary">Explore Now</a>
</p>
<!-- Hero Texts -->
<h1 class="rainbow-text">{{ $heroContent['firstColumn']['mainHeader'] ?? 'Default Heading' }}</h1>
<h3>{{ $heroContent['firstColumn']['subHeader'] ?? 'Default Heading' }}</h3>
<!-- Buttons -->
<p class="lead">
{{ $heroContent['firstColumn']['calltoactionText'] ?? '' }}
</p>
@foreach ($heroContent['firstColumn']['buttons'] ?? [] as $button)
<a class="btn btn-{{ $button['type'] }}" href="{{ $button['link'] }}" role="button" id="animateButton">{{ $button['text'] }}</a>
@endforeach
</div>
<!-- Second Column -->
@php
$hero_ = $heroContent['secondColumn']['videoUrl'] ?? 'Default Heading'
@endphp
<div class="col-12 col-md-5 mb-4">
<!--Responsive Video Embed -->
<img src="{{ asset($hero_) }}" class="rotate" alt="Descriptive Alt Text" style="max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto;">
</div>
<!--<img src="{{ asset($hero_) }}" class="img-fluid" alt="Descriptive Alt Text">-->
</div>
</section>