mirror of
https://github.com/chaoming/hugo-saasify-theme.git
synced 2025-04-20 19:41:52 +02:00
7b979949c3
- Added gradient support to CTA shortcode (angle and colors) - Added gradient support to hero shortcode - Added background color support to testimonials shortcode - Updated btn-outline to use primary colors
53 lines
2.7 KiB
HTML
53 lines
2.7 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" }}
|
|
{{ $gradient_from := .Get "gradient-from" }}
|
|
{{ $gradient_to := .Get "gradient-to" }}
|
|
{{ $gradient_angle := .Get "gradient-angle" | default "180" }}
|
|
|
|
<section class="relative overflow-hidden" {{ if $gradient_from }}style="background:linear-gradient({{ $gradient_angle }}deg,{{ $gradient_from }},{{ $gradient_to | default $gradient_from }})"{{ else }}class="bg-gradient-to-b from-gray-50 to-white"{{ end }}>
|
|
{{ 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>
|