diff --git a/layouts/shortcodes/hero.html b/layouts/shortcodes/hero.html
new file mode 100644
index 0000000..b65ad3c
--- /dev/null
+++ b/layouts/shortcodes/hero.html
@@ -0,0 +1,51 @@
+{{ $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>