update home page

src/components/custom/sections/CallToAction.vue

@@ -43,8 +43,3 @@ export default {
   props: ["cta"],
 };
 </script>
-<style scoped>
-.bg-hero {
-        background-image: url("~@/assets/images/bottom_cta.png");
-    }
-</style>

src/components/custom/sections/CallToActionbg1.vue

@@ -0,0 +1,50 @@
+<template>
+  <section class="pt-10 pb-10 px-4 bg-cover bg-hero text-center">
+ 
+    <div class="w-full  py-10 max-w-7xl mx-auto">
+      <h2 class="text-4xl text-white leading-tight font-semibold font-heading uppercase">
+        {{ cta.title1 }} 
+        <br>
+        {{ cta.title2 }}
+      </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-20 text-white leading-relaxed "
+      ></div>
+
+
+       <a
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" 
+          target="_blank"
+          v-if="cta.button"
+          :href="cta.link"
+          >{{ cta.button }}</a
+        >
+        <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button2"
+          :to="cta.link2"
+          >{{ cta.button2 }}</g-link
+        >
+         <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button3"
+          :to="cta.link3"
+          >{{ cta.button3 }}</g-link
+        >
+      
+      
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["cta"],
+};
+</script>
+<style scoped>
+.bg-hero {
+        background-image: url("~@/assets/images/bg1.png");
+    }
+</style>

src/components/custom/sections/CallToActionbg2.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="pb-20 px-4 bg-cover bg-hero text-center">
+    <br>
+    <br>
+    <br>
+    <div class="w-full max-w-7xl mx-auto">
+      <h3 class="uppercase">{{ cta.subtitle }}</h3>
+     <h2 class="text-6xl mb-6 leading-none font-extrabold font-heading uppercase">
+          <span class="text-blue-600">{{ cta.slogan }}</span
+          > {{ cta.title1 }}
+          <br>
+          {{ cta.title2 }}
+        </h2>
+      <div
+        v-html="cta.content"
+        class="mt-6 mb-8 text-gray-700 leading-relaxed"
+      ></div>
+
+
+       <a
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full" 
+          target="_blank"
+          v-if="cta.button"
+          :href="cta.link"
+          >{{ cta.button }}</a
+        >
+        <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button2"
+          :to="cta.link2"
+          >{{ cta.button2 }}</g-link
+        >
+         <g-link
+          class="inline-block bg-blue-900 text-sm learn-button hover:bg-blue-800 text-gray-100 px-12 py-2 mr-5 mb-4 rounded shadow rounded-full"
+          v-if="cta.button3"
+          :to="cta.link3"
+          >{{ cta.button3 }}</g-link
+        >
+      
+      
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: ["cta"],
+};
+</script>
+<style scoped>
+.bg-hero {
+        background-image: url("~@/assets/images/bg2.png");
+    }
+</style>

src/components/marketing/sections/cta-sections/ShowcaseProducts.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="py-12 mb-5">
+  <div class="py-12 mb-5" id="take_part">
     <div class="w-full text-center">
       <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
         {{ main.title }} 
@@ -7,7 +7,7 @@
       <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
     </div> 
 
-    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
 
         <a
         v-for="(product, idx) in products"

src/components/marketing/sections/cta-sections/ShowcaseProductsHome.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="py-12 mb-5">
+    <div class="w-full text-center">
+      <h2 v-if="main !== null" class="text-4xl font-semibold leading-tight font-heading">
+        {{ main.title }} 
+      </h2>
+      <p v-if="main !== null" class="mb-6 text-m tracking-widest text-gray-800">{{ main.subtitle }}</p>
+    </div> 
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+
+        <a
+        v-for="(product, idx) in products"
+        target="_blank"
+        :key="idx"
+        :href="product.url"
+          class="m-auto rounded overflow-hidden transition duration-500"
+        >
+        
+          <div class="px-2 py-2">
+            <g-image class="py-4" :src="img(product.image)" />
+            <!-- <div class="font-bold text-xl mb-2">{{ product.title }}</div> -->
+            <p v-html="product.content" class="text-gray-700 text-base"></p>
+          </div>
+          
+        </a>
+      
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ["products", "main"],
+  methods: {
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bannerFondo {
+  height: 400px;
+}
+</style>

src/components/marketing/sections/cta-sections/logoShowcase.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="pt-8 px-4 text-center">
+  <section class="py-8 pb-20 px-4 text-center">
     <div class="max-w-2xl mx-auto mb-8">
       <h2 class="text-4xl leading-tight mb-6 font-bold font-heading">
         WORK WITH AWESOME PARTNERS

src/pages/Index.vue

@@ -16,6 +16,16 @@
         :link="$page.markdownPage.link"
       />
 
+      <g-image class="m-auto w-2/4"
+        v-if="$page.markdownPage.solution_image2"
+        :src="$page.markdownPage.solution_image2.src"
+      />
+
+       <CallToAction
+        v-if="$page.markdownPage.cta2"
+        :cta="$page.markdownPage.cta2"
+      />
+
       <ShowcaseProducts
         :main="$page.markdownPage.productsMain"
         :products="$page.markdownPage.productData"
@@ -25,15 +35,31 @@
         "
       />
 
-      <logoShowcase
-        v-if="$page.markdownPage.logos.length > 0"
-        :logos="$page.markdownPage.logos"
+       <CallToActionbg1
+        v-if="$page.markdownPage.cta3"
+        :cta="$page.markdownPage.cta3"
       />
 
-      <BrandPanel
+       <CallToActionbg2
+        v-if="$page.markdownPage.cta4"
+        :cta="$page.markdownPage.cta4"
+      />
+
+         <g-image
+        v-if="$page.markdownPage.solution_image3"
+        :src="$page.markdownPage.solution_image3.src"
+      />
+
+      <CallToAction
+        v-if="$page.markdownPage.cta5"
+        :cta="$page.markdownPage.cta5"
+      />
+     
+
+      <!-- <BrandPanel
         :brand="$page.markdownPage.brandPanel"
         v-if="$page.markdownPage.brandPanel"
-      />
+      /> -->
 
       <Comparison
         v-if="
@@ -65,7 +91,12 @@
       :signup="$page.markdownPage.signup"
       /> -->
 
-      <g-image
+       <logoShowcase
+        v-if="$page.markdownPage.logos.length > 0"
+        :logos="$page.markdownPage.logos"
+      />
+
+      <g-image class="m-auto w-3/4"
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       />
@@ -91,6 +122,8 @@
         button
         link
         solution_image
+        solution_image2
+        solution_image3
         header{
          title
          subtitle
@@ -133,6 +166,56 @@
           link2
           link3
         }
+
+        cta2{
+          id
+          title
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+        cta3{
+          id
+          title1
+          title2
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+        cta4{
+          id
+          title1
+          title2
+          subtitle
+          slogan
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
+
+        cta5{
+          id
+          title
+          content
+          button
+          button2
+          button3
+          link
+          link2
+          link3
+        }
         comparisonMain{
           id
           title
@@ -193,6 +276,8 @@ import Comparison from "~/components/custom/sections/Comparison.vue";
 import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import BrandPanel from "~/components/marketing/sections/cta-sections/BrandPanel.vue";
 import CallToAction from "~/components/custom/sections/CallToAction.vue";
+import CallToActionbg1 from "~/components/custom/sections/CallToActionbg1.vue";
+import CallToActionbg2 from "~/components/custom/sections/CallToActionbg2.vue";
 import logoShowcase from "~/components/marketing/sections/cta-sections/logoShowcase.vue";
 import InTheNews from "~/components/marketing/sections/logo-clouds/off_white_grid.vue";
 import SignUp from "~/components/custom/sections/SignUp.vue";
@@ -207,6 +292,8 @@ export default {
     BrandPanel,
     logoShowcase,
     CallToAction,
+    CallToActionbg1,
+    CallToActionbg2,
     InTheNews,
     SignUp,
   },

src/templates/MarkdownPage.vue

@@ -36,6 +36,15 @@
         v-if="$page.markdownPage.solution_image"
         :src="$page.markdownPage.solution_image.src"
       />
+
+       <ShowcaseProducts
+        :main="$page.markdownPage.productsMain"
+        :products="$page.markdownPage.productData"
+        v-if="
+          $page.markdownPage.productData &&
+          $page.markdownPage.productData.length > 0
+        "
+      />
     </div>
   </Layout>
 </template>
@@ -51,10 +60,18 @@
         header_title
         header_image
         solution_image
+       productsMain{
+          id
+          title
+          subtitle
+       #  image
+        }
        productData{
          id
          title
+         content
          image
+         url
        }
         comparisonMain{
           id
@@ -99,6 +116,7 @@ import NewCard from "~/components/marketing/sections/cta-sections/NewCard.vue";
 import Header from "~/components/marketing/sections/cta-sections/Header.vue";
 import VerticalNav from "~/components/custom/Navbar/VerticalNav.vue";
 import GetInTouch from "~/components/custom/Navbar/Getintouch.vue";
+import ShowcaseProducts from "~/components/marketing/sections/cta-sections/ShowcaseProducts.vue";
 import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
 import HowItWorks from "~/components/custom/sections/HowItWorks.vue";
 import Features from "~/components/custom/sections/Features.vue";
@@ -118,6 +136,7 @@ export default {
     VerticalNav,
     GetInTouch,
     SolutionsHeader,
+    ShowcaseProducts,
     HowItWorks,
     Features,
     logoShowcase,