templates/hugo-saasify-theme
1
0
Fork 0
mirror of https://github.com/chaoming/hugo-saasify-theme.git synced 2025-04-20 07:11:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Enhanced theme styling

Browse source 
- 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
This commit is contained in:
Chaoming Li 2024-11-20 15:57:51 +11:00
parent 4c86420bb1
commit 7b979949c3
4 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/main.css
View file

@ -44,7 +44,7 @@
} }
.btn-outline { .btn-outline {
@apply btn border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600 hover:scale-105; @apply btn border-2 border-primary-600 text-primary-600 hover:scale-105;
} }
.container { .container {

7
layouts/shortcodes/cta.html
View file

@ -1,8 +1,11 @@
{{/* CTA Shortcode */}} {{/* CTA Shortcode */}}
<section class="cta-section"> <section class="cta-section">
<div class="container"> <div class="container">
<div class="bg-primary-600 rounded-lg"> <div class="relative rounded-lg overflow-hidden bg-primary-600" {{ with .Get "gradient-from" }}style="background:linear-gradient({{ if $.Get "gradient-angle" }}{{ $.Get "gradient-angle" }}deg{{ else }}to right{{ end }},{{ . }},{{ $.Get "gradient-to" | default . }})"{{ end }} {{ with .Get "background-image" }}style="background-image:url('{{ . }}');background-size:cover;background-position:center"{{ end }}>
<div class="text-center max-w-3xl mx-auto px-6 py-10"> {{ with .Get "background-image" }}
<div class="absolute inset-0 bg-black/30"></div>
{{ end }}
<div class="relative text-center max-w-3xl mx-auto px-6 py-10">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">{{ .Get "title" | default "Ready to Transform Your User Experience?" }}</h2> <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">{{ .Get "title" | default "Ready to Transform Your User Experience?" }}</h2>
<p class="text-xl text-primary-100 mb-8">{{ .Get "description" | default "Join thousands of companies already using our platform to drive growth." }}</p> <p class="text-xl text-primary-100 mb-8">{{ .Get "description" | default "Join thousands of companies already using our platform to drive growth." }}</p>
<div class="flex flex-col sm:flex-row justify-center gap-4"> <div class="flex flex-col sm:flex-row justify-center gap-4">

6
layouts/shortcodes/hero.html
View file

@ -6,9 +6,11 @@
{{ $secondary_button_url := .Get "secondary_button_url" }} {{ $secondary_button_url := .Get "secondary_button_url" }}
{{ $hero_image := .Get "hero_image" }} {{ $hero_image := .Get "hero_image" }}
{{ $background_image := .Get "background_image" }} {{ $background_image := .Get "background_image" }}
{{ $background_color_gradient := .Get "background_color_gradient" | default "from-gray-50 to-white" }} {{ $gradient_from := .Get "gradient-from" }}
{{ $gradient_to := .Get "gradient-to" }}
{{ $gradient_angle := .Get "gradient-angle" | default "180" }}
<section class="relative overflow-hidden bg-gradient-to-b {{ $background_color_gradient }}"> <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 }} {{ if $background_image }}
<div class="absolute inset-0"> <div class="absolute inset-0">
<img src="{{ $background_image | relURL }}" alt="Background" class="w-full h-full object-cover"> <img src="{{ $background_image | relURL }}" alt="Background" class="w-full h-full object-cover">

3
layouts/shortcodes/testimonials.html
View file

@ -1,4 +1,5 @@
<section class="section bg-gray-50"> {{ $background_color := .Get "background-color" }}
<section class="section{{ if not $background_color }} bg-gray-50{{ end }}" {{ if $background_color }}style="background-color:{{ $background_color }};"{{ end }}>
<div class="container"> <div class="container">
<div class="text-center max-w-3xl mx-auto mb-16"> <div class="text-center max-w-3xl mx-auto mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6">{{ .Get "title" | default "Loved by Teams Worldwide" }}</h2> <h2 class="text-3xl md:text-4xl font-bold mb-6">{{ .Get "title" | default "Loved by Teams Worldwide" }}</h2>