diff --git a/content/home/index.md b/content/home/index.md
index d2c1113..c71fa18 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -7,9 +7,34 @@ draft: false
 weight: 1
 ---
 
+<div class="container mx-auto">
+
+
+<!-- section hero -->
+
+
+{% hero(
+
+  hero_subtitle = "Very proud to introduce"
+  hero_title = "Revolutionary way to build the web"
+  hero_text = "This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text but is random."
+  hero_img = "https://images.unsplash.com/photo-1618004912476-29818d81ae2e?auto=format&q=75&fit=crop&w=1000"
+  hero_link1 = "#"
+  hero_link1_name = "Start Now"
+  hero_link2 = "#"
+  hero_link2_name = "Take tour"
+
+) %}
+
+# test
+
+{% end %}
+
+
+
 <!-- section CTA -->
 
-<div class="container mx-auto"> 
+ 
 
 
 {% cta(
diff --git a/templates/shortcodes/hero.html b/templates/shortcodes/hero.html
new file mode 100644
index 0000000..2bc5ee0
--- /dev/null
+++ b/templates/shortcodes/hero.html
@@ -0,0 +1,23 @@
+<section class="flex flex-col justify-between gap-6 sm:gap-10 md:gap-16 lg:flex-row">
+  <!-- content - start -->
+  <div class="flex flex-col justify-center sm:text-center lg:py-12 lg:text-left xl:w-5/12 xl:py-24">
+    <p class="mb-4 font-semibold text-indigo-500 md:mb-6 md:text-lg xl:text-xl">{{ hero_subtitle }}</p>
+
+    <h1 class="mb-8 text-4xl font-bold text-black sm:text-5xl md:mb-12 md:text-6xl">{{ hero_title }}</h1>
+
+    <p class="mb-8 leading-relaxed text-gray-500 md:mb-12 lg:w-4/5 xl:text-lg">{{ hero_text }}</p>
+
+    <div class="flex flex-col gap-2.5 sm:flex-row sm:justify-center lg:justify-start">
+      <a href="{{ hero_link1 }}" class="inline-block rounded-lg bg-indigo-500 px-8 py-3 text-center text-sm font-semibold text-white outline-none ring-indigo-300 transition duration-100 hover:bg-indigo-600 focus-visible:ring active:bg-indigo-700 md:text-base">{{ hero_link1_name }}</a>
+
+      <a href="{{ hero_link2 }}" class="inline-block rounded-lg bg-gray-200 px-8 py-3 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-300 focus-visible:ring active:text-gray-700 md:text-base">{{ hero_link2_name }}</a>
+    </div>
+  </div>
+  <!-- content - end -->
+
+  <!-- image - start -->
+  <div class="h-48 overflow-hidden rounded-lg bg-gray-100 shadow-lg lg:h-auto xl:w-5/12">
+    <img src="{{ hero_img }}<" loading="lazy" alt="Photo by Fakurian Design" class="h-full w-full object-cover object-center" />
+  </div>
+  <!-- image - end -->
+</section>
\ No newline at end of file