From 7b979949c36d30936b7c88dbcf396784d93a34b4 Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Wed, 20 Nov 2024 15:57:51 +1100
Subject: [PATCH] feat: Enhanced theme styling

- 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
---
 assets/css/main.css                  | 2 +-
 layouts/shortcodes/cta.html          | 7 +++++--
 layouts/shortcodes/hero.html         | 6 ++++--
 layouts/shortcodes/testimonials.html | 3 ++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index c1e3558..83f7903 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -44,7 +44,7 @@
   }
 
   .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 {
diff --git a/layouts/shortcodes/cta.html b/layouts/shortcodes/cta.html
index 7d943c8..0fd5ebf 100644
--- a/layouts/shortcodes/cta.html
+++ b/layouts/shortcodes/cta.html
@@ -1,8 +1,11 @@
 {{/* CTA Shortcode */}}
 <section class="cta-section">
     <div class="container">
-        <div class="bg-primary-600 rounded-lg">
-            <div class="text-center max-w-3xl mx-auto px-6 py-10">
+        <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 }}>
+            {{ 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>
                 <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">
diff --git a/layouts/shortcodes/hero.html b/layouts/shortcodes/hero.html
index b65ad3c..586943a 100644
--- a/layouts/shortcodes/hero.html
+++ b/layouts/shortcodes/hero.html
@@ -6,9 +6,11 @@
 {{ $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" }}
+{{ $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 }}
     <div class="absolute inset-0">
         <img src="{{ $background_image | relURL }}" alt="Background" class="w-full h-full object-cover">
diff --git a/layouts/shortcodes/testimonials.html b/layouts/shortcodes/testimonials.html
index bbbae97..d5469e6 100644
--- a/layouts/shortcodes/testimonials.html
+++ b/layouts/shortcodes/testimonials.html
@@ -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="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>