From 9cd9421a58fdf201ccdaedfe9b3a14c02e06561b Mon Sep 17 00:00:00 2001
From: Chaoming Li <email@chaoming.li>
Date: Mon, 18 Nov 2024 14:31:40 +1100
Subject: [PATCH] feat: convert feature sections into reusable shortcodes with
 consistent styling

---
 layouts/index.html                       | 59 ------------------------
 layouts/shortcodes/feature.html          | 42 +++++++++++++++++
 layouts/shortcodes/features-section.html | 17 +++++++
 3 files changed, 59 insertions(+), 59 deletions(-)
 create mode 100644 layouts/shortcodes/feature.html
 create mode 100644 layouts/shortcodes/features-section.html

diff --git a/layouts/index.html b/layouts/index.html
index caef66f..339147f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -4,65 +4,6 @@
     {{ .Content }}
 {{ end }}
 
-<!-- Feature Sections -->
-<section class="section">
-    <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">Powerful Features for Modern Teams</h2>
-            <p class="text-xl text-gray-600">Discover how our platform helps you understand and optimize every aspect of your user experience.</p>
-        </div>
-
-        <!-- Feature Grid -->
-        <div class="space-y-24">
-            <!-- Feature 1 -->
-            <div class="grid lg:grid-cols-2 gap-12 items-center">
-                <div class="space-y-6">
-                    <div class="inline-block px-4 py-2 rounded-full bg-primary-100 text-primary-700 font-medium">User Analytics</div>
-                    <h3 class="text-2xl md:text-3xl font-bold">Deep Insights into User Behavior</h3>
-                    <p class="text-lg text-gray-600">Track and analyze user interactions in real-time. Understand how users navigate your product and identify opportunities for improvement.</p>
-                    <ul class="space-y-4">
-                        {{ range (slice "Real-time user tracking" "Behavioral analytics" "Custom event tracking" "User flow visualization") }}
-                        <li class="flex items-center space-x-3">
-                            <svg class="w-5 h-5 text-primary-600" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                            </svg>
-                            <span>{{ . }}</span>
-                        </li>
-                        {{ end }}
-                    </ul>
-                    <a href="#" class="btn-primary inline-block">Learn More</a>
-                </div>
-                <div class="relative">
-                    <img src="{{ "images/feature-analytics.svg" | relURL }}" alt="Analytics Feature" class="rounded-xl shadow-elevation">
-                </div>
-            </div>
-
-            <!-- Feature 2 -->
-            <div class="grid lg:grid-cols-2 gap-12 items-center">
-                <div class="relative order-2 lg:order-1">
-                    <img src="{{ "images/feature-session.svg" | relURL }}" alt="Session Replay Feature" class="rounded-xl shadow-elevation">
-                </div>
-                <div class="space-y-6 order-1 lg:order-2">
-                    <div class="inline-block px-4 py-2 rounded-full bg-secondary-100 text-secondary-700 font-medium">Session Replay</div>
-                    <h3 class="text-2xl md:text-3xl font-bold">Watch Real User Sessions</h3>
-                    <p class="text-lg text-gray-600">Understand exactly how users interact with your product through high-fidelity session recordings and heatmaps.</p>
-                    <ul class="space-y-4">
-                        {{ range (slice "Full session recordings" "Click and scroll heatmaps" "Error tracking" "User journey analysis") }}
-                        <li class="flex items-center space-x-3">
-                            <svg class="w-5 h-5 text-secondary-600" fill="currentColor" viewBox="0 0 20 20">
-                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                            </svg>
-                            <span>{{ . }}</span>
-                        </li>
-                        {{ end }}
-                    </ul>
-                    <a href="#" class="btn-secondary inline-block">Learn More</a>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
 <!-- Testimonials -->
 <section class="section bg-gray-50">
     <div class="container">
diff --git a/layouts/shortcodes/feature.html b/layouts/shortcodes/feature.html
new file mode 100644
index 0000000..55e7d27
--- /dev/null
+++ b/layouts/shortcodes/feature.html
@@ -0,0 +1,42 @@
+{{/* Feature Shortcode */}}
+{{ $title := .Get "title" }}
+{{ $description := .Get "description" }}
+{{ $badge := .Get "badge" }}
+{{ $badgeColor := .Get "badgeColor" | default "primary" }}
+{{ $image := .Get "image" }}
+{{ $buttonText := .Get "buttonText" | default "Learn More" }}
+{{ $buttonLink := .Get "buttonLink" | default "#" }}
+{{ $imagePosition := .Get "imagePosition" | default "right" }}
+
+{{ $features := split (.Get "features") "," }}
+
+<div class="grid lg:grid-cols-2 gap-12 items-center">
+    {{ if eq $imagePosition "left" }}
+    <div class="order-2 lg:order-1">
+        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
+    </div>
+    {{ end }}
+
+    <div class="space-y-6 {{ if eq $imagePosition "left" }}order-1 lg:order-2{{ end }}">
+        <div class="inline-block px-4 py-2 rounded-full bg-{{ $badgeColor }}-100 text-{{ $badgeColor }}-700 font-medium">{{ $badge }}</div>
+        <h3 class="text-2xl md:text-3xl font-bold">{{ $title }}</h3>
+        <p class="text-lg text-gray-600">{{ $description }}</p>
+        <ul class="space-y-4">
+            {{ range $features }}
+            <li class="flex items-center space-x-3">
+                <svg class="w-5 h-5 text-{{ $badgeColor }}-700" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                </svg>
+                <span>{{ . | strings.TrimSpace }}</span>
+            </li>
+            {{ end }}
+        </ul>
+        <a href="{{ $buttonLink }}" class="btn-primary inline-block">{{ $buttonText }}</a>
+    </div>
+
+    {{ if ne $imagePosition "left" }}
+    <div>
+        <img src="{{ $image | relURL }}" alt="{{ $title }}" class="rounded-xl shadow-elevation">
+    </div>
+    {{ end }}
+</div>
diff --git a/layouts/shortcodes/features-section.html b/layouts/shortcodes/features-section.html
new file mode 100644
index 0000000..b23c982
--- /dev/null
+++ b/layouts/shortcodes/features-section.html
@@ -0,0 +1,17 @@
+{{/* Features Section Wrapper Shortcode */}}
+{{ $title := .Get "title" | default "Powerful Features for Modern Teams" }}
+{{ $description := .Get "description" | default "Discover how our platform helps you understand and optimize every aspect of your user experience." }}
+
+<section class="section">
+    <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">{{ $title }}</h2>
+            <p class="text-xl text-gray-600">{{ $description }}</p>
+        </div>
+
+        <!-- Feature Grid -->
+        <div class="space-y-32">
+            {{ .Inner }}
+        </div>
+    </div>
+</section>