diff --git a/content/home/index.md b/content/home/index.md
index 212e065..e71b474 100644
--- a/content/home/index.md
+++ b/content/home/index.md
@@ -7,16 +7,34 @@ draft: false
 weight: 1
 ---
 
-<!-- section 1 (header) -->
+<!-- section content -->
 
 <div class="container mx-auto"> 
 
+
+{% cta(
+
+  cta_title = "Summer Sale Up to 70% off."
+  cta_text = "This is a section of some simple filler text, also known as placeholder text. It shares some characteristics of a real written text."
+  cta_img = "https://images.unsplash.com/photo-1505846951821-e25bacf2eccd?auto=format&q=75&fit=crop&crop=top&w=1000&h=500"
+) %}
+
+# test
+
+{% end %}
+
+
 {% content1( 
   content1_title = "Our competitive advantage",
   content1_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 or otherwise generated. It may be used to display a sample of fonts or generate text for testing. Filler text is dummy text which has no meaning however looks very similar to real text. The important factor when using filler text is that the text looks realistic otherwise it will not look very good.",
   content1_subtitle = "About Us",
   content1_photo = "https://images.unsplash.com/photo-1593508512255-86ab42a8e620?auto=format&q=75&fit=crop&w=600&h=350"
-  
+  content1_title2 = "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. It may be used to display a sample of fonts or generate text for testing. Filler text is dummy text which has no meaning however looks very similar to real text."
+  content1_item1 = "This is a section of some simple filler text"
+  content1_item2 = "Also known as placeholder text"
+  content1_item3 = "It shares some characteristics of a real written text" 
+  quate_title = "“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.”
+"
   
 
 ) %}
@@ -26,6 +44,11 @@ weight: 1
 {% end %}
 
 
+
+
+
+<!-- section reviews -->
+
 {% reviews(
    reviews_name = "ehab",
    reviews_date = "12/6/2023"
@@ -35,6 +58,9 @@ weight: 1
 
 {% end %}
 
+
+<!-- section banner -->
+
 {% banner(
 
   banner_text = "This is a section of some simple filler text, also known as placeholder text.",
diff --git a/templates/shortcodes/content1.html b/templates/shortcodes/content1.html
index ab088cc..12e418b 100644
--- a/templates/shortcodes/content1.html
+++ b/templates/shortcodes/content1.html
@@ -9,15 +9,15 @@
 
     <h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">{{ content1_subtitle }}</h2>
 
-    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">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. It may be used to display a sample of fonts or generate text for testing. Filler text is dummy text which has no meaning however looks very similar to real text.</p>
+    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">{{ content1_title2 }}</p>
 
     <ul class="mb-6 list-inside list-disc text-gray-500 sm:text-lg md:mb-8">
-      <li>This is a section of some simple filler text</li>
-      <li>Also known as placeholder text</li>
-      <li>It shares some characteristics of a real written text</li>
+      <li>{{ content1_item1 }}</li>
+      <li>{{ content1_item2 }}</li>
+      <li>{{ content1_item3 }}</li>
     </ul>
 
-    <blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">“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.”</blockquote>
+    <blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">{{ quate_title }}</blockquote>
 
     <div class="relative mb-6 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:mb-8">
       <img src="{{ content1_photo }}" loading="lazy" alt="Photo by Minh Pham" class="h-full w-full object-cover object-center" />
diff --git a/templates/shortcodes/cta.html b/templates/shortcodes/cta.html
new file mode 100644
index 0000000..c695cbd
--- /dev/null
+++ b/templates/shortcodes/cta.html
@@ -0,0 +1,23 @@
+<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">
+    <div class="flex flex-col overflow-hidden rounded-lg bg-gray-900 sm:flex-row md:h-80">
+      <!-- content - start -->
+      <div class="flex w-full flex-col p-4 sm:w-1/2 sm:p-8 lg:w-2/5">
+        <h2 class="mb-4 text-xl font-bold text-white md:text-2xl lg:text-4xl">{{ cta_title}}</h2>
+
+        <p class="mb-8 max-w-md text-gray-400">{{ cta_text}}</p>
+
+        <div class="mt-auto">
+          <a href="#" class="inline-block rounded-lg bg-white px-8 py-3 text-center text-sm font-semibold text-gray-800 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-100 focus-visible:ring active:bg-gray-200 md:text-base">Save now</a>
+        </div>
+      </div>
+      <!-- content - end -->
+
+      <!-- image - start -->
+      <div class="order-first h-48 w-full bg-gray-700 sm:order-none sm:h-auto sm:w-1/2 lg:w-3/5">
+        <img src="{{ cta_img }}" loading="lazy" alt="Photo by Dom Hill" class="h-full w-full object-cover object-center" />
+      </div>
+      <!-- image - end -->
+    </div>
+  </div>
+</div>
\ No newline at end of file