diff --git a/content/components2/img/img_column.png b/content/components2/img/img_column.png
new file mode 100644
index 0000000..33fddfd
Binary files /dev/null and b/content/components2/img/img_column.png differ
diff --git a/content/components2/img/img_column_item.png b/content/components2/img/img_column_item.png
new file mode 100644
index 0000000..031841a
Binary files /dev/null and b/content/components2/img/img_column_item.png differ
diff --git a/content/components2/img/img_header.png b/content/components2/img/img_header.png
new file mode 100644
index 0000000..45b1e7a
Binary files /dev/null and b/content/components2/img/img_header.png differ
diff --git a/content/components2/img/img_portrait.png b/content/components2/img/img_portrait.png
new file mode 100644
index 0000000..f78e048
Binary files /dev/null and b/content/components2/img/img_portrait.png differ
diff --git a/content/components2/img/img_section.png b/content/components2/img/img_section.png
new file mode 100644
index 0000000..19be1b8
Binary files /dev/null and b/content/components2/img/img_section.png differ
diff --git a/content/components2/img/logo_bottom.png b/content/components2/img/logo_bottom.png
new file mode 100644
index 0000000..a8684a2
Binary files /dev/null and b/content/components2/img/logo_bottom.png differ
diff --git a/content/components2/img_column_item.png b/content/components2/img_column_item.png
new file mode 100644
index 0000000..031841a
Binary files /dev/null and b/content/components2/img_column_item.png differ
diff --git a/content/components2/index.md b/content/components2/index.md
new file mode 100644
index 0000000..19799d4
--- /dev/null
+++ b/content/components2/index.md
@@ -0,0 +1,48 @@
+---
+title: "components"
+description: ""
+date: 2018-09-14
+updated: 2021-02-20
+draft: false
+weight: 5
+---
+
+<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 %}
+
+
+
+
+
+{% features items=[
+  { header = "Header 1", text = "Description 1", link = "#" },
+  { header = "Header 2", text = "Description 2", link = "#" },
+  { header = "Header 3", text = "Description 3", link = "#" }
+
+] %}
+
+# test
+
+{% end %}
+
+</div>
\ No newline at end of file
diff --git a/templates/shortcodes/features.html b/templates/shortcodes/features.html
new file mode 100644
index 0000000..683eafd
--- /dev/null
+++ b/templates/shortcodes/features.html
@@ -0,0 +1,30 @@
+<div class="bg-white py-6 sm:py-8 lg:py-12">
+  <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
+    <!-- text - start -->
+    <div class="mb-10 md:mb-16">
+      <h2 class="mb-4 text-center text-2xl font-bold text-gray-800 md:mb-6 lg:text-3xl">Our competitive advantage</h2>
+
+      <p class="mx-auto max-w-screen-md text-center text-gray-500 md:text-lg">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 or otherwise generated.</p>
+    </div>
+    <!-- text - end -->
+    {% for item in items %}
+    <div class="grid gap-8 sm:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-16">
+      <!-- feature - start -->
+      <div class="flex gap-4 md:gap-6">
+        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-indigo-500 text-white shadow-lg md:h-14 md:w-14 md:rounded-xl">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+          </svg>
+        </div>
+
+        <div>
+          <h3 class="mb-2 text-lg font-semibold md:text-xl">{{ header}}</h3>
+          <p class="mb-2 text-gray-500">{{ text }}</p>
+          <a href="#" class="font-bold text-indigo-500 transition duration-100 hover:text-indigo-600 active:text-indigo-700">{{ link }}</a>
+        </div>
+      </div>
+      <!-- feature - end -->
+    </div>
+    {% endfor %}
+  </div>
+</div>
\ No newline at end of file