mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-24 00:11:53 +02:00
51 lines
2.5 KiB
HTML
51 lines
2.5 KiB
HTML
{{ $headline := .Get "headline" }}
|
|
{{ $sub_headline := .Get "sub_headline" }}
|
|
{{ $primary_button_text := .Get "primary_button_text" }}
|
|
{{ $primary_button_url := .Get "primary_button_url" }}
|
|
{{ $secondary_button_text := .Get "secondary_button_text" }}
|
|
{{ $secondary_button_url := .Get "secondary_button_url" }}
|
|
{{ $hero_image := .Get "hero_image" }}
|
|
{{ $background_image := .Get "background_image" }}
|
|
{{ $background_color_gradient := .Get "background_color_gradient" | default "from-gray-50 to-white" }}
|
|
|
|
<section class="relative overflow-hidden bg-gradient-to-b {{ $background_color_gradient }}">
|
|
{{ if $background_image }}
|
|
<div class="absolute inset-0">
|
|
<img src="{{ $background_image | relURL }}" alt="Background" class="w-full h-full object-cover">
|
|
</div>
|
|
{{ end }}
|
|
<div class="container pt-16 pb-20 md:pt-24 md:pb-28">
|
|
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div class="space-y-8">
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
|
|
{{ $headline | safeHTML }}
|
|
</h1>
|
|
<p class="text-xl text-gray-600">
|
|
{{ $sub_headline | safeHTML }}
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
{{ if and $primary_button_text $primary_button_url }}
|
|
<a href="{{ $primary_button_url }}" class="btn-primary text-center">
|
|
{{ $primary_button_text }}
|
|
</a>
|
|
{{ end }}
|
|
{{ if and $secondary_button_text $secondary_button_url }}
|
|
<a href="{{ $secondary_button_url }}" class="btn-outline text-center">
|
|
{{ $secondary_button_text }}
|
|
</a>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
<div class="relative">
|
|
{{ if $hero_image }}
|
|
<div class="relative z-10">
|
|
<img src="{{ $hero_image | relURL }}" alt="Hero Image" class="rounded-xl shadow-elevation">
|
|
</div>
|
|
{{ end }}
|
|
<!-- Background decoration -->
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 bg-primary-100 rounded-full filter blur-3xl opacity-50"></div>
|
|
<div class="absolute -bottom-20 -left-20 w-64 h-64 bg-secondary-100 rounded-full filter blur-3xl opacity-50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|