From 82ffdfa4cc699fc8266e0d9bce87e96a092fae39 Mon Sep 17 00:00:00 2001
From: ktx-kirtan <124270523+ktx-kirtan@users.noreply.github.com>
Date: Sat, 1 Feb 2025 17:33:21 +0530
Subject: [PATCH] Feature/landing page (#11)

* fix(card):remove static card and place title in center in  feature and usecase card

* fix: home page header

* fix: feature section card

* fix: add link for the usecase

* fix: custom section background

* fix: feature card component bg fix

* fix: section gap

* fix button globally and banner component

* fix: image icons

* fix: image loading issue

* fix icon centering

* fix: remove unused components

---------

Co-authored-by: ktx-riya <riya.kukadiya@kiara.tech>
---
 public/img/bg/gradient-bg/TextureBG.svg       |  24 +++
 public/img/bg/gradient-bg/TextureBottomBG.svg |  24 +++
 .../cardComponent/FeatureCardWithIcon.vue     |  29 +---
 .../FeatureCardWithIconWrapper.vue            |  55 +------
 .../cardComponent/UsecaseCardWithIcon.vue     |  28 ++--
 .../UsecaseCardWithIconWrapper.vue            |  56 ++-----
 src/components/cards/CustomFeatureCard.vue    |   2 +-
 src/components/cards/CustomTiles.vue          |   2 +-
 src/components/core/CompanySwiper.vue         | 139 ++++++++--------
 src/components/core/CustomBanner.vue          |  62 +++----
 src/components/core/CustomButton.vue          | 155 +++++++++---------
 src/components/core/CustomInterChange.vue     |  71 ++++----
 src/components/core/CustomSection.vue         |   2 +-
 .../core/CustomSectionBackground.vue          |  37 ++---
 src/components/core/CustomSeprater.vue        |  28 ++--
 .../heroSections/HomeHeroSection.vue          |  34 ++--
 src/components/wrapper/BannerWrapper.vue      |  28 +---
 src/components/wrapper/TabsWrapper.vue        |   2 -
 .../wrapper/TopCompaniesWrapper.vue           |   7 +-
 19 files changed, 337 insertions(+), 448 deletions(-)
 create mode 100644 public/img/bg/gradient-bg/TextureBG.svg
 create mode 100644 public/img/bg/gradient-bg/TextureBottomBG.svg

diff --git a/public/img/bg/gradient-bg/TextureBG.svg b/public/img/bg/gradient-bg/TextureBG.svg
new file mode 100644
index 0000000..8acb594
--- /dev/null
+++ b/public/img/bg/gradient-bg/TextureBG.svg
@@ -0,0 +1,24 @@
+<svg width="1640" height="863" viewBox="0 0 1640 863" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1462_2109)">
+<g filter="url(#filter0_f_1462_2109)">
+<ellipse cx="831" cy="62.5" rx="1322" ry="365.5" fill="url(#paint0_linear_1462_2109)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1462_2109" x="-611" y="-423" width="2884" height="971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1462_2109"/>
+</filter>
+<linearGradient id="paint0_linear_1462_2109" x1="831" y1="-1" x2="831.422" y2="307.266" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.0505366" stop-color="#89A1CF"/>
+<stop offset="0.0753303" stop-color="#5C59A9"/>
+<stop offset="0.190871" stop-color="#3059AC"/>
+<stop offset="0.953532" stop-color="#010101"/>
+</linearGradient>
+<clipPath id="clip0_1462_2109">
+<rect width="1640" height="863" rx="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/img/bg/gradient-bg/TextureBottomBG.svg b/public/img/bg/gradient-bg/TextureBottomBG.svg
new file mode 100644
index 0000000..902f8ef
--- /dev/null
+++ b/public/img/bg/gradient-bg/TextureBottomBG.svg
@@ -0,0 +1,24 @@
+<svg width="1640" height="863" viewBox="0 0 1640 863" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1300_1436)">
+<g filter="url(#filter0_f_1300_1436)">
+<ellipse cx="1322" cy="365.5" rx="1322" ry="365.5" transform="matrix(1 0 0 -1 -491 1166)" fill="url(#paint0_linear_1300_1436)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_1300_1436" x="-611" y="315" width="2884" height="971" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="60" result="effect1_foregroundBlur_1300_1436"/>
+</filter>
+<linearGradient id="paint0_linear_1300_1436" x1="1322" y1="302" x2="1322.42" y2="610.266" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="0.0505366" stop-color="#89A1CF"/>
+<stop offset="0.0753303" stop-color="#5C59A9"/>
+<stop offset="0.190871" stop-color="#3059AC"/>
+<stop offset="0.953532" stop-color="#010101"/>
+</linearGradient>
+<clipPath id="clip0_1300_1436">
+<rect width="1640" height="863" rx="20" transform="matrix(1 0 0 -1 0 863)" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/cardComponent/FeatureCardWithIcon.vue b/src/components/cardComponent/FeatureCardWithIcon.vue
index 6e56c80..efab67c 100644
--- a/src/components/cardComponent/FeatureCardWithIcon.vue
+++ b/src/components/cardComponent/FeatureCardWithIcon.vue
@@ -9,32 +9,19 @@ const props = defineProps({
   },
 });
 
-console.log(props.card,"Cards Data");
+const dynamicComponent = props.card.link ? "a" : "div";
 </script>
 
 <template>
-  <div
-    class="rounded-2xl w-full p-[0.0625rem] shadow-md bg-gradient-gray hover:bg-gradient-blue transition-all duration-300 hover:shadow-2xl cardShadow container mx-auto"
-  >
+  <dynamicComponent :href="card.link" class="relative rounded-2xl w-full p-[0.0625rem]
+    bg-gradient-gray hover:bg-gradient-blue
+    transition-all duration-300 shadow-2xl hover:shadow-[0_0_60px_0_rgba(66,174,255,0.8)] container mx-auto group">
     <!-- Content Layer -->
-    <div
-      class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8"
-    >
-      <CustomImage :image="card.image" altText="Icon" cssClass="w-16 h-16 object-cover" />
-      <h3 class="text-[#BEC0C2] text-base font-semibold" :title="card.title">
+    <div class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8">
+      <CustomImage :image="card.image" altText="Icon" cssClass="h-16" />
+      <h3 class="text-[#BEC0C2] text-base font-semibold text-center group-hover:text-[#80B9FF]" :title="card.title">
         {{ card.title }}
       </h3>
     </div>
-  </div>
+  </dynamicComponent>
 </template>
-
-<style scoped>
-.cardShadow:hover {
-  box-shadow: 0 0 60px 0 rgba(66, 174, 255, 0.8); /* Shadow effect */
-  border-radius: 1rem;
-  transition: all;
-}
-.cardShadow:hover h3 {
-  color: #80b9ff;
-}
-</style>
diff --git a/src/components/cardComponent/FeatureCardWithIconWrapper.vue b/src/components/cardComponent/FeatureCardWithIconWrapper.vue
index 11a2901..00e61f5 100644
--- a/src/components/cardComponent/FeatureCardWithIconWrapper.vue
+++ b/src/components/cardComponent/FeatureCardWithIconWrapper.vue
@@ -3,7 +3,6 @@ import { defineProps } from "vue";
 import IconTitleCard from "./FeatureCardWithIcon.vue";
 import CustomSection from "../core/CustomSection.vue";
 import Heading from "../core/Heading.vue";
-import CustomImage from "../core/CustomImage.vue";
 
 const props = defineProps({
   heading: {
@@ -19,61 +18,17 @@ const props = defineProps({
 </script>
 
 <template>
-  <div class="relative bg-cover bg-no-repeat w-full overflow-visible">
-    <img
-      src="/cardBg1.svg"
-      class="absolute bottom-[-60vh] right-[105vh] -z-10 object-cover"
-      alt="Background SVG"
-    />
-    <img
-    src="/cardBg2.svg"
-    alt="Image"
-    class="absolute bottom-[-60vh] -z-10 object-cover"
-    />
+  <div class="relative container mx-auto bg-cover bg-no-repeat w-full overflow-visible">
+    <img src="/cardBg1.svg" class="absolute top-[0%] left-[-20%] -z-10 object-cover" alt="Background SVG" />
+    <img src="/cardBg2.svg" alt="Image" class="absolute bottom-[-60vh] -z-10 object-cover" />
 
     <CustomSection>
       <Heading :title="heading?.title" :description="heading?.subtitle" />
 
       <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-5 gap-2 md:gap-6 mt-10 w-full">
         <!-- Loop moved here -->
-        <IconTitleCard
-          v-for="(item, index) in data"
-          :key="index"
-          :card="item"
-        />
-
-        <!-- Static "Explore all features" card -->
-        <div
-          class="rounded-2xl w-full p-[0.0625rem] shadow-md bg-gradient-gray hover:bg-gradient-blue transition-all duration-300 hover:shadow-2xl cardShadow"
-        >
-          <a href="/">
-            <div
-              class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8"
-            >
-              <div class="w-16 h-16 overflow-hidden">
-                <img
-                  src="/CardSeeALLicon.svg"
-                  alt="View all use cases"
-                  class="w-full h-full object-cover"
-                />
-              </div>
-              <h3 class="text-[#BEC0C2] text-base font-semibold">
-                Explore all features
-              </h3>
-            </div>
-          </a>
-        </div>
+        <IconTitleCard v-for="(item, index) in data" :key="index" :card="item" />
       </div>
     </CustomSection>
   </div>
-</template>
-<style scoped>
-.cardShadow:hover {
-  box-shadow: 0 0 60px 0 rgba(66, 174, 255, 0.8); /* Shadow effect */
-  border-radius: 1rem;
-  transition: all;
-}
-.cardShadow:hover h3 {
-  color: #80b9ff;
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/components/cardComponent/UsecaseCardWithIcon.vue b/src/components/cardComponent/UsecaseCardWithIcon.vue
index 11f07b7..5c628e3 100644
--- a/src/components/cardComponent/UsecaseCardWithIcon.vue
+++ b/src/components/cardComponent/UsecaseCardWithIcon.vue
@@ -12,28 +12,26 @@ const props = defineProps({
     required: true,
   },
 });
+
+const dynamicComponent = props.card.link ? "a" : "div";
 </script>
 
 <template>
-  <div
-    :class="[
-      'rounded-2xl w-full p-[0.0625rem] shadow-md bg-gradient-blue transition-all duration-300 hover:shadow-2xl cardShadow',
-      {
-        'lg:col-span-2': index === 0 || index === 1,
-        'lg:col-span-3': index === 2
-      }
-    ]"
-  >
+  <dynamicComponent :href="card.link" :class="[
+    'rounded-2xl w-full p-[0.0625rem] bg-gradient-blue transition-all duration-300 shadow-2xl hover:shadow-[0_0_60px_0_rgba(66,174,255,0.8)]',
+    {
+      'lg:col-span-2': index === 0 || index === 1,
+      'lg:col-span-3': index === 2
+    }
+  ]">
     <!-- Content Layer -->
-    <div
-      class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8"
-    >
-      <CustomImage :image="card.icon" altText="Icon" cssClass="w-16 h-16 object-cover" />
-      <h3 class="text-[#BEC0C2] text-base font-semibold" :title="card.title">
+    <div class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8">
+      <CustomImage :image="card.image" altText="Icon" cssClass="h-16" />
+      <h3 class="text-[#BEC0C2] text-base font-semibold text-center" :title="card.title">
         {{ card.title }}
       </h3>
     </div>
-  </div>
+  </dynamicComponent>
 </template>
 
 <style scoped>
diff --git a/src/components/cardComponent/UsecaseCardWithIconWrapper.vue b/src/components/cardComponent/UsecaseCardWithIconWrapper.vue
index a6abe24..bcd0863 100644
--- a/src/components/cardComponent/UsecaseCardWithIconWrapper.vue
+++ b/src/components/cardComponent/UsecaseCardWithIconWrapper.vue
@@ -7,60 +7,40 @@ import Heading from "../core/Heading.vue";
 import CustomSectionBackground from "../core/CustomSectionBackground.vue";
 
 const props = defineProps({
-  items:{
-    type:Array,
-    required:true,
+  items: {
+    type: Array,
+    required: true,
   },
-  heading:{
-    type:Object,
-    required:true,
+  heading: {
+    type: Object,
+    required: true,
   },
 });
 </script>
 
 <template>
   <CustomSectionBackground direction="bottom">
-  <CustomSection>
-    <div class="flex flex-col max-w-full container mx-auto">
-      <Heading
-        :title="heading?.title"
-        :description="heading?.subtitle"
-      />
-      <div class="mt-10">
-        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-6">
-          <!-- Loop moved here -->
-          <IconTitleCard
-            v-for="(item, index) in items"
-            :key="index"
-            :card="item"
-            :index="index"
-          />
-
-          <!-- Static "View all use cases" card -->
-          <div
-            class="rounded-2xl w-full p-[0.0625rem] shadow-md bg-gradient-blue hover:bg-gradient-blue transition-all duration-300 hover:shadow-2xl cardShadow"
-          >
-            <div
-              class="flex flex-col space-y-4 w-full h-full items-center justify-center rounded-2xl bg-[#23282c] p-8"
-            >
-              <div class="w-16 h-16 overflow-hidden">
-                <img src="/CardSeeALLicon.svg" alt="View all use cases" class="w-full h-full object-cover" />
-              </div>
-              <h3 class="text-[#BEC0C2] text-base font-semibold">View all use cases</h3>
-            </div>
+    <CustomSection>
+      <div class="flex flex-col max-w-full container mx-auto">
+        <Heading :title="heading?.title" :description="heading?.subtitle" />
+        <div class="mt-10">
+          <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-6">
+            <!-- Loop moved here -->
+            <IconTitleCard v-for="(item, index) in items" :key="index" :card="item" :index="index" />
           </div>
         </div>
       </div>
-    </div>
-  </CustomSection>
-</CustomSectionBackground>
+    </CustomSection>
+  </CustomSectionBackground>
 </template>
 <style scoped>
 .cardShadow:hover {
-  box-shadow: 0 0 60px 0 rgba(66, 174, 255, 0.8); /* Shadow effect */
+  box-shadow: 0 0 60px 0 rgba(66, 174, 255, 0.8);
+  /* Shadow effect */
   border-radius: 1rem;
   transition: all;
 }
+
 .cardShadow:hover h3 {
   color: #80b9ff;
 }
diff --git a/src/components/cards/CustomFeatureCard.vue b/src/components/cards/CustomFeatureCard.vue
index ee3fc0e..beb881b 100644
--- a/src/components/cards/CustomFeatureCard.vue
+++ b/src/components/cards/CustomFeatureCard.vue
@@ -27,7 +27,7 @@ const props = defineProps({
 <template>
   <div class="h-14">
     <CustomRoundShape
-      :imgSrc="card.icon"
+      :imgSrc="card.image"
       iconSize="small"
       :borderColor="borderColor"
       size="small"
diff --git a/src/components/cards/CustomTiles.vue b/src/components/cards/CustomTiles.vue
index 0fa449a..0852758 100644
--- a/src/components/cards/CustomTiles.vue
+++ b/src/components/cards/CustomTiles.vue
@@ -25,7 +25,7 @@ const bg = {
     :style="{ backgroundImage: `url(${bg[index] || ''})` }"
   >
     <div class="rounded-full flex justify-center items-center mb-4">
-      <CustomImage :image="card.icon" altText="Card Image" cssClass="w-full h-auto" />
+      <CustomImage :image="card.image" altText="Card Image" cssClass="w-full h-auto" />
     </div>
     <h3 class="title-color text-3xl font-semibold text-[#BEC0C2] text-center">
       {{ card.title }}
diff --git a/src/components/core/CompanySwiper.vue b/src/components/core/CompanySwiper.vue
index 96d8944..5cec4dd 100644
--- a/src/components/core/CompanySwiper.vue
+++ b/src/components/core/CompanySwiper.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { computed,defineProps } from 'vue';
-import CustomSection from './CustomSection.vue';
+import { computed, defineProps } from 'vue';
 import CustomImage from './CustomImage.vue';
 
 // Props definition
@@ -12,97 +11,95 @@ const props = defineProps({
 });
 
 // Create a computed property to duplicate the data array
-const repeatedData = computed(() => [...props.items, ...props.items]);
+const repeatedData = computed(() => {
+  const result = []
+  // loop 100 times
+  Array.from({ length: 100 }, (_, index) => {
+    result.push(...props.items)
+  })
+  return result
+});
 </script>
 
 
 <template>
-  <div class="pb-10">
-  <CustomSection section-class="py-0 xl:py-0">
-  <div class="carousel-container">
-    <div class="slide">
-      <div
-        v-for="(item, index) in repeatedData"
-        :key="index"
-        class="flex-none w-28 lg:w-40 h-full grayscale transition duration-200 hover:grayscale-0 mx-4"
-      >
-        <CustomImage
-          :image="item?.Image"
-          cssClass="w-full h-full object-cover"
-          />
+  <div class="py-2 container mx-auto">
+    <div class="carousel-container">
+      <div class="slide flex flex-row justify-center items-center">
+        <div v-for="(item, index) in repeatedData" :key="index"
+          class="flex-none w-28 lg:w-40 h-full grayscale transition duration-200 hover:grayscale-0 mx-4">
+          <CustomImage :image="item?.Image" cssClass="w-full h-full object-cover" />
           <!-- :alt="item.altText" -->
+        </div>
       </div>
     </div>
   </div>
-  </CustomSection>
-  </div>
 </template>
 
 
 <style scoped>
 /* Add your styles if needed or import them */
 @keyframes slide {
-   from {
-     transform: translateX(0);
-   }
+  from {
+    transform: translateX(0);
+  }
 
-   to {
-     transform: translateX(-50%);
-   }
- }
+  to {
+    transform: translateX(-50%);
+  }
+}
 
- .slide {
-   display: flex;
-   flex-wrap: nowrap;
-   animation: slide 25s infinite linear;
-   /* Adjust time based on number of items */
-   transition: translateX 0.5s ease;
-   /* width: max-content; Ensure the slide container fits the content */
-   width: calc(200% + 16px);
-   /* Adjust to fit the doubled content */
- }
+.slide {
+  flex-wrap: nowrap;
+  animation: slide 25s infinite linear;
+  /* Adjust time based on number of items */
+  transition: translateX 0.5s ease;
+  /* width: max-content; Ensure the slide container fits the content */
+  width: calc(200% + 16px);
+  /* Adjust to fit the doubled content */
+}
 
- .carousel-container {
-   position: relative;
-   overflow: hidden;
-   width: 100%;
-   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
-   /* border-radius: 8px; */
- }
+.carousel-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
+  /* border-radius: 8px; */
+}
 
- .slide:hover {
-   animation-play-state: paused;
-   /* Pause the animation on hover */
- }
+.slide:hover {
+  animation-play-state: paused;
+  /* Pause the animation on hover */
+}
 
- /* Gradient effect at both ends with rounded corners */
- .carousel-container::before,
- .carousel-container::after {
-   content: '';
-   position: absolute;
-   top: 0;
-   bottom: 0;
-   width: 380px;
-   /* Adjust based on how wide you want the gradient */
-   pointer-events: none;
-   z-index: 1;
-   /* border-radius: 16px; Match with the container's border-radius */
- }
+/* Gradient effect at both ends with rounded corners */
+.carousel-container::before,
+.carousel-container::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 380px;
+  /* Adjust based on how wide you want the gradient */
+  pointer-events: none;
+  z-index: 1;
+  /* border-radius: 16px; Match with the container's border-radius */
+}
 
- .carousel-container::before {
-   left: 0;
-   background: linear-gradient(to right, rgba(var(--gray-dark), 1) 0%, rgba(var(--gray-dark), 0) 100%);
-   width:6px;
- }
+.carousel-container::before {
+  left: 0;
+  background: linear-gradient(to right, black 0%, rgba(var(--gray-dark), 0) 100%);
+  width: 40px;
+}
 
- .carousel-container::after {
-   right: 0;
-   background: linear-gradient(to left, rgba(var(--gray-dark), 1) 0%, rgba(var(--gray-dark), 0) 100%);
-   width:6px;
- }
+.carousel-container::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(var(--gray-dark), 1) 0%, rgba(var(--gray-dark), 0) 100%);
+  width: 6px;
+}
 
- /* For screens wider than 768px */
- /* @media (max-width: 768px) {
+/* For screens wider than 768px */
+/* @media (max-width: 768px) {
 
    .carousel-container::before,
    .carousel-container::after {
diff --git a/src/components/core/CustomBanner.vue b/src/components/core/CustomBanner.vue
index 158c107..ed9195f 100644
--- a/src/components/core/CustomBanner.vue
+++ b/src/components/core/CustomBanner.vue
@@ -27,39 +27,28 @@ defineProps({
 </script>
 
 <template>
-  <div
-    class="relative mx-auto flex items-center justify-center w-full min-h-[80vh] sm:min-h-[80vh] md:min-h-[40vh] bg-cover bg-center"
-    style="background-image: url('/BG.svg')"
-  >
+  <div class="relative mx-auto flex items-center justify-center w-full bg-cover bg-center"
+    style="background-image: url('/BG.svg')">
     <!-- Apply the blur effect to the background image -->
+    <!-- <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/Texture.svg'); filter: blur(2px)">
+    </div> -->
+
     <div
-      class="absolute inset-0 bg-cover bg-center"
-      style="background-image: url('/Texture.svg'); filter: blur(4px)"
-    ></div>
+      class="container mx-auto flex flex-col md:flex-row justify-between items-center w-full px-4 md:px-0 py-8 md:py-14 lg:py-20 gap-6 md:gap-8">
+      <!-- Text Content -->
+      <div class="text-center md:text-left w-full md:w-auto">
+        <h1 class="text-5xl sm:text-4xl md:text-3xl lg:text-5xl text-white drop-shadow-md">
+          {{ bannerTitle }}
+        </h1>
+        <p class="text-xl sm:text-lg md:text-xl text-white mt-3 sm:mt-4 md:mt-5 font-light drop-shadow-md max-w-2xl">
+          {{ bannerDescription }}
+        </p>
+      </div>
 
-    <CustomSection>
+      <!-- Buttons -->
       <div
-        class="flex flex-col md:flex-row justify-between items-center w-full py-8 md:py-12 lg:py-16 gap-6 md:gap-8"
-      >
-        <!-- Text Content -->
-        <div class="text-center md:text-left w-full md:w-auto">
-          <h1
-            class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white drop-shadow-md"
-          >
-            {{ bannerTitle }}
-          </h1>
-          <p
-            class="text-base sm:text-lg md:text-xl text-white mt-2 sm:mt-3 md:mt-4 font-light drop-shadow-md max-w-2xl"
-          >
-            {{ bannerDescription }}
-          </p>
-        </div>
-
-        <!-- Buttons -->
-        <div
-          class="flex flex-col sm:flex-row items-center sm:items-start md:items-center justify-center gap-2 sm:gap-4 md:gap-6 w-full md:w-auto"
-        >
-          <!-- <CustomButton
+        class="flex flex-col sm:flex-row items-center sm:items-start md:items-center justify-center gap-2 sm:gap-4 md:gap-6 w-full md:w-auto">
+        <!-- <CustomButton
             v-for="(button, index) in buttons"
             :key="index"
             :variant="button.variant"
@@ -67,22 +56,13 @@ defineProps({
           >
             {{ button.text }}
           </CustomButton> -->
-          <CustomButton 
-          variant="primary"
-          class="w-full sm:w-auto"
-          :buttonLink="primaryButton.link"
-          >
+        <CustomButton variant="primary" class="w-full sm:w-auto" :buttonLink="primaryButton.link">
           {{ primaryButton.text }}
         </CustomButton>
-        <CustomButton 
-          variant="secondary"
-          class="w-full sm:w-auto"
-          :buttonLink="secondaryButton.link"
-          >
+        <CustomButton variant="secondary" class="w-full sm:w-auto" :buttonLink="secondaryButton.link">
           {{ secondaryButton.text }}
         </CustomButton>
-        </div>
       </div>
-    </CustomSection>
+    </div>
   </div>
 </template>
diff --git a/src/components/core/CustomButton.vue b/src/components/core/CustomButton.vue
index b5785ca..dada0b4 100644
--- a/src/components/core/CustomButton.vue
+++ b/src/components/core/CustomButton.vue
@@ -53,9 +53,9 @@ const props = defineProps({
 
 // Tailwind classes for button sizes
 const sizes = {
-  small: "px-5 py-2 text-sm",
-  medium: "px-6 py-2.5 text-base",
-  large: "px-10 py-4 text-lg",
+  small: "px-5 py-2 text-xs",
+  medium: "px-8 py-3 text-sm",
+  large: "px-10 py-4 text-md",
 };
 
 const buttonSize = sizes[props.size];
@@ -68,19 +68,16 @@ const variants = {
   heroButton: "hero-button",
 };
 
+// make text all capital
+const containerClass = "uppercase text-nowrap text-center"
+
 const buttonVariant = variants[props.variant];
 </script>
 
 <template>
-  <component
-    :is="buttonLink ? 'a' : 'button'"
-    :class="[containerClass, buttonSize, buttonVariant]"
-    @click="!disabled && !loading ? onClick : null"
-    :disabled="disabled || loading"
-    :href="buttonLink"
-    :type="!buttonLink ? type : null"
-    v-bind="buttonProps"
-  >
+  <component :is="buttonLink ? 'a' : 'button'" :class="[containerClass, buttonSize, buttonVariant]"
+    @click="!disabled && !loading ? onClick : null" :disabled="disabled || loading" :href="buttonLink"
+    :type="!buttonLink ? type : null" v-bind="buttonProps">
     <span class="items-center">
       <template v-if="$slots.default">
         <slot></slot>
@@ -115,21 +112,17 @@ const buttonVariant = variants[props.variant];
 
 .primary-button:hover {
   /* Only change the border gradient on hover */
-  background-image: linear-gradient(
-      90deg,
+  background-image: linear-gradient(90deg,
       #0079dd -10.28%,
       #3bb3ff 92.55%,
-      #76dbff 109.08%
-    ),
-    linear-gradient(
-      180deg,
+      #76dbff 109.08%),
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.95) 0%,
       rgba(128, 200, 255, 0.9) 20%,
       rgba(64, 169, 255, 0.85) 40%,
       rgba(0, 136, 255, 0.8) 60%,
       rgba(0, 106, 255, 0.75) 80%,
-      rgba(0, 68, 255, 0.7) 100%
-    );
+      rgba(0, 68, 255, 0.7) 100%);
 
   /* More uniform shadow spread */
   box-shadow: 0 0 15px rgba(0, 136, 255, 0.4), 0 0 20px rgba(0, 106, 255, 0.2);
@@ -138,12 +131,10 @@ const buttonVariant = variants[props.variant];
 /* Active state */
 .primary-button:active {
   background-image: linear-gradient(180deg, #0088ff 0%, #0077ff 100%),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.8) 0%,
       rgba(64, 169, 255, 0.7) 40%,
-      rgba(0, 106, 255, 0.6) 100%
-    );
+      rgba(0, 106, 255, 0.6) 100%);
   /* Slightly reduced shadow when pressed */
   box-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
 }
@@ -176,6 +167,7 @@ const buttonVariant = variants[props.variant];
   border: 2px solid transparent;
   transition: all 0.3s ease;
 }
+
 .hero-button {
   position: relative;
   border: none;
@@ -190,36 +182,33 @@ const buttonVariant = variants[props.variant];
 
 .tertiary-button:hover,
 .hero-button:hover {
-  border: 2px solid transparent; /* Transparent border to show gradient */
-  background-image: linear-gradient(
-      272deg,
+  border: 2px solid transparent;
+  /* Transparent border to show gradient */
+  background-image: linear-gradient(272deg,
       rgba(0, 139, 255, 0.8) 4.81%,
       rgba(53, 160, 252, 0.8) 39.26%,
-      rgba(153, 202, 233, 0.8) 94.28%
-    ),
-    linear-gradient(
-      180deg,
+      rgba(153, 202, 233, 0.8) 94.28%),
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.95) 0%,
       rgba(128, 200, 255, 0.9) 20%,
       rgba(64, 169, 255, 0.85) 40%,
       rgba(0, 136, 255, 0.8) 60%,
       rgba(0, 106, 255, 0.75) 80%,
-      rgba(0, 68, 255, 0.7) 100%
-    ); /* Gradient background */
+      rgba(0, 68, 255, 0.7) 100%);
+  /* Gradient background */
   background-origin: border-box;
   background-clip: padding-box, border-box;
-  box-shadow: 0 0 15px rgba(0, 136, 255, 0.4), 0 0 20px rgba(0, 106, 255, 0.2); /* Glow effect */
+  box-shadow: 0 0 15px rgba(0, 136, 255, 0.4), 0 0 20px rgba(0, 106, 255, 0.2);
+  /* Glow effect */
 }
 
 .tertiary-button:active,
 .hero-button:active {
   background-image: linear-gradient(180deg, #0088ff 0%, #0077ff 100%),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.8) 0%,
       rgba(64, 169, 255, 0.7) 40%,
-      rgba(0, 106, 255, 0.6) 100%
-    );
+      rgba(0, 106, 255, 0.6) 100%);
   box-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
 }
 
@@ -242,54 +231,57 @@ const buttonVariant = variants[props.variant];
   color: white;
   cursor: pointer;
   border-radius: 100px;
-  background: transparent; /* Transparent background */
-  border: 2px solid white; /* White border */
+  background: transparent;
+  /* Transparent background */
+  border: 2px solid white;
+  /* White border */
   transition: all 0.3s ease;
 }
+
 .button-white {
   position: relative;
   cursor: pointer;
   border-radius: 100px;
-  background: white; /* Transparent background */
-  border: 2px solid transparent; /* White border */
+  background: white;
+  /* Transparent background */
+  border: 2px solid transparent;
+  /* White border */
   transition: all 0.3s ease;
 }
 
 /* Hover state */
 .secondary-button:hover,
 .button-white:hover {
-  border: 2px solid transparent; /* Transparent border to show gradient */
-  background-image: linear-gradient(
-      272deg,
+  border: 2px solid transparent;
+  /* Transparent border to show gradient */
+  background-image: linear-gradient(272deg,
       rgba(0, 139, 255, 0.8) 4.81%,
       rgba(53, 160, 252, 0.8) 39.26%,
-      rgba(153, 202, 233, 0.8) 94.28%
-    ),
-    linear-gradient(
-      180deg,
+      rgba(153, 202, 233, 0.8) 94.28%),
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.95) 0%,
       rgba(128, 200, 255, 0.9) 20%,
       rgba(64, 169, 255, 0.85) 40%,
       rgba(0, 136, 255, 0.8) 60%,
       rgba(0, 106, 255, 0.75) 80%,
-      rgba(0, 68, 255, 0.7) 100%
-    ); /* Gradient background */
+      rgba(0, 68, 255, 0.7) 100%);
+  /* Gradient background */
   background-origin: border-box;
   background-clip: padding-box, border-box;
-  box-shadow: 0 0 15px rgba(0, 136, 255, 0.4), 0 0 20px rgba(0, 106, 255, 0.2); /* Glow effect */
+  box-shadow: 0 0 15px rgba(0, 136, 255, 0.4), 0 0 20px rgba(0, 106, 255, 0.2);
+  /* Glow effect */
 }
 
 /* Active state */
 .secondary-button:active,
 .button-white:active {
   background-image: linear-gradient(180deg, #0088ff 0%, #0077ff 100%),
-    linear-gradient(
-      180deg,
+    linear-gradient(180deg,
       rgba(255, 255, 255, 0.8) 0%,
       rgba(64, 169, 255, 0.7) 40%,
-      rgba(0, 106, 255, 0.6) 100%
-    );
-  box-shadow: 0 0 10px rgba(0, 136, 255, 0.3); /* Subtle shadow */
+      rgba(0, 106, 255, 0.6) 100%);
+  box-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
+  /* Subtle shadow */
 }
 
 /* Focus state for accessibility */
@@ -303,7 +295,8 @@ const buttonVariant = variants[props.variant];
 .button-white:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  border-color: #cccccc; /* Light gray border for disabled state */
+  border-color: #cccccc;
+  /* Light gray border for disabled state */
   background: transparent;
   box-shadow: none;
 }
@@ -313,25 +306,29 @@ const buttonVariant = variants[props.variant];
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-right: 8px; /* Space between icon and text */
+  margin-right: 8px;
+  /* Space between icon and text */
   font-size: 1.2em;
 }
 
 .text {
   display: inline-block;
 }
+
 /* Icon and text */
 .icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  margin-right: 8px; /* Space between icon and text */
+  margin-right: 8px;
+  /* Space between icon and text */
   font-size: 1.2em;
 }
 
 .text {
   display: inline-block;
 }
+
 .button-with-icon {
   position: relative;
   display: inline-flex;
@@ -362,11 +359,9 @@ const buttonVariant = variants[props.variant];
 }
 
 .button-with-icon:hover::before {
-  background: linear-gradient(
-    180deg,
-    rgba(156, 164, 169, 0.2) 0%,
-    rgba(62, 65, 67, 0.2) 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(156, 164, 169, 0.2) 0%,
+      rgba(62, 65, 67, 0.2) 100%);
 }
 
 .button-with-icon:hover::after {
@@ -374,15 +369,18 @@ const buttonVariant = variants[props.variant];
   position: absolute;
   inset: -2px;
   padding: 2px;
-  background: linear-gradient(
-    180deg,
-    rgba(173, 216, 230, 0.95) 0%,
-    /* Light blue at the top */ rgba(100, 149, 237, 0.9) 25%,
-    /* Cornflower blue */ rgba(65, 105, 225, 0.85) 50%,
-    /* Royal blue in the middle */ rgba(0, 0, 205, 0.8) 75%,
-    /* Medium blue towards the bottom */ rgba(0, 0, 139, 0.75) 100%
+  background: linear-gradient(180deg,
+      rgba(173, 216, 230, 0.95) 0%,
+      /* Light blue at the top */
+      rgba(100, 149, 237, 0.9) 25%,
+      /* Cornflower blue */
+      rgba(65, 105, 225, 0.85) 50%,
+      /* Royal blue in the middle */
+      rgba(0, 0, 205, 0.8) 75%,
+      /* Medium blue towards the bottom */
+      rgba(0, 0, 139, 0.75) 100%
       /* Navy blue at the bottom */
-  );
+    );
 
   border-radius: 100px;
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
@@ -391,14 +389,19 @@ const buttonVariant = variants[props.variant];
   z-index: -1;
   opacity: 0.9;
 }
+
 .button-with-icon:hover {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.3), 0 0 10px rgba(0, 136, 255, 0.4);
 }
+
 .button-with-icon:hover {
   box-shadow:
-    /* Inner glow */ 0 0 20px rgba(0, 136, 255, 0.3),
-    /* Middle layer */ 0 5px 20px rgba(0, 106, 255, 0.3),
-    /* Outer glow */ 0 5px 10px rgba(0, 68, 255, 0.3);
+    /* Inner glow */
+    0 0 20px rgba(0, 136, 255, 0.3),
+    /* Middle layer */
+    0 5px 20px rgba(0, 106, 255, 0.3),
+    /* Outer glow */
+    0 5px 10px rgba(0, 68, 255, 0.3);
 }
 </style>
diff --git a/src/components/core/CustomInterChange.vue b/src/components/core/CustomInterChange.vue
index 1de1863..c9f9124 100644
--- a/src/components/core/CustomInterChange.vue
+++ b/src/components/core/CustomInterChange.vue
@@ -1,56 +1,42 @@
-<script>
+<script setup>
 import { computed } from "vue";
 import CustomImage from "./CustomImage.vue";
 
-export default {
-  name: "CustomInterChange",
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    image: {
-      type: String,
-      required: true,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    direction: {
-      type: String,
-      default: "left", // Default direction is left
-      validator(value) {
-        return ["left", "right"].includes(value); // Validate direction
-      },
+const props = defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+  direction: {
+    type: String,
+    default: "left", // Default direction is left
+    validator(value) {
+      return ["left", "right"].includes(value); // Validate direction
     },
   },
-  setup(props) {
-    const sectionClasses = computed(() => ({
-      "md:flex-row-reverse": props.direction === "right",
-    }));
+})
+const sectionClasses = computed(() => ({
+  "md:flex-row-reverse": props.direction === "right",
+}));
 
-    return {
-      sectionClasses,
-    };
-  },
-};
 </script>
 
 
 <template>
-  <div
-    :class="[
-      'w-full flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 space-x-0 md:space-x-4 py-16 gap-6',
-      sectionClasses,
-    ]"
-  >
+  <div :class="[
+    'w-full flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 space-x-0 md:space-x-4 py-16 gap-6',
+    sectionClasses,
+  ]">
     <div class="w-full md:w-1/2">
-      <CustomImage
-        :image="image"
-        :altText="title"
-        cssClass="w-full h-auto rounded-lg shadow-md"
-      />
+      <CustomImage :image="image" :altText="title" cssClass="w-full h-auto rounded-lg shadow-md" />
     </div>
     <div class="w-full md:w-1/2">
       <h2 class="text-[#f4f4f5] mb-4 font-inter font-semibold text-xl md:text-2xl lg:text-4xl">
@@ -69,4 +55,3 @@ export default {
     </div>
   </div>
 </template>
-
diff --git a/src/components/core/CustomSection.vue b/src/components/core/CustomSection.vue
index a698a41..1b11fd4 100644
--- a/src/components/core/CustomSection.vue
+++ b/src/components/core/CustomSection.vue
@@ -17,7 +17,7 @@ const props = defineProps({
 const defaultClasses = computed(() => {
   return [
     "container mx-auto px-4 sm:px-6 lg:px-8 xl:px-11", // Handle horizontal padding on different screen sizes
-    "py-4 sm:py-6 md:py-8 lg:py-8 xl:py-11", // Handle vertical padding for each breakpoint
+    "py-8 sm:py-10 md:py-14 lg:py-16 xl:py-24", // Handle vertical padding for each breakpoint
     "w-full flex flex-col justify-start", // General layout setup
     props.sectionClass,
   ].join(" ");
diff --git a/src/components/core/CustomSectionBackground.vue b/src/components/core/CustomSectionBackground.vue
index 8e5078d..35073e9 100644
--- a/src/components/core/CustomSectionBackground.vue
+++ b/src/components/core/CustomSectionBackground.vue
@@ -1,33 +1,22 @@
-<template>
-  <div :class="`${directionClass} w-full h-auto container mx-auto rounded-xl bg-no-repeat bg-[50%_0vh] `">
-    <slot></slot>
-  </div>
-</template>
 <script setup>
 import { defineProps } from 'vue';
-const props=defineProps({
-  direction:{
-    type:String,
-    default:'top'
+const props = defineProps({
+  direction: {
+    type: String,
+    default: 'top'
   }
 })
 
-const directions={
-  top: "bg-[url('/TextureBG.svg')]",
-  bottom: "bg-[url('/TextureBottomBG.svg')]"
-
-  //  top: "bg-[url('/BackgroundTopMobile.svg')] md:bg-[url('/homesectionbgtop.svg')]",
-  // bottom: "bg-[url('/TextureBG.svg')] md:bg-[url('/TextureBG.svg')]"
+const directions = {
+  top: "bg-[url('/img/bg/gradient-bg/TextureBG.svg')] bg-[50%_0%]",
+  bottom: "bg-[url('/img/bg/gradient-bg/TextureBottomBG.svg')] bg-[50%_100%]"
 }
- 
 
 const directionClass = directions[props.direction]
 </script>
-<style scoped>
-.bg-container {
-  @apply w-full h-screen flex items-center justify-center;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-</style>
\ No newline at end of file
+
+<template>
+  <div :class="`${directionClass} w-full h-auto container mx-auto rounded-xl bg-no-repeat bg-[50%_100%] bg-cover`">
+    <slot></slot>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/core/CustomSeprater.vue b/src/components/core/CustomSeprater.vue
index aa602ad..158c3f7 100644
--- a/src/components/core/CustomSeprater.vue
+++ b/src/components/core/CustomSeprater.vue
@@ -1,21 +1,15 @@
-<style>
-.grad-border {
-  background: linear-gradient(
-    90deg,
-    rgba(1, 1, 1, 0) 0%,
-    #595d62 25.5%,
-    #595d62 70%,
-    rgba(1, 1, 1, 0) 100%
-  );
-  height: 2px;
-  width: 100%;
-}
-
-</style>
 <template>
   <div class="grad-border">
   </div>
 </template>
-<script setup>
-import CustomSection from "./CustomSection.vue";
-</script>
+<style>
+.grad-border {
+  background: linear-gradient(90deg,
+      rgba(1, 1, 1, 0) 0%,
+      #595d62 25.5%,
+      #595d62 70%,
+      rgba(1, 1, 1, 0) 100%);
+  height: 0.5px;
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/heroSections/HomeHeroSection.vue b/src/components/heroSections/HomeHeroSection.vue
index 5d216bf..5b02b5c 100644
--- a/src/components/heroSections/HomeHeroSection.vue
+++ b/src/components/heroSections/HomeHeroSection.vue
@@ -7,7 +7,7 @@ const props = defineProps({
   title: {
     type: String,
     required: true,
-  }, 
+  },
   description: {
     type: String,
     required: true,
@@ -28,33 +28,25 @@ const props = defineProps({
 </script>
 
 <template>
-    <!-- :style="{ backgroundImage: 'url(/Metrices.svg)' }" -->
   <section
-    class="relative flex justify-center items-center lg:justify-start h-[calc(100vh-100px)] text-center lg:text-left bg-cover bg-center bg-no-repeat px-4 sm:px-8 lg:px-16"
-    >
-    <video
-    class="absolute top-0 left-0 w-full h-full object-cover"
-    autoplay
-    loop
-    muted
-    playsinline
-  >
-    <source src="/HomeHerobgVideo.mp4" type="video/mp4" />
-    Your browser does not support the video tag.
-  </video>
+    class="relative flex lg:justify-start h-[calc(100vh-100px)] text-center lg:text-left bg-cover bg-center bg-no-repeat px-4 sm:px-8 lg:px-16">
+    <video class="absolute top-0 left-0 w-full h-full object-cover" autoplay loop muted playsinline>
+      <source :src="backgroundVideo?.url" type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
     <!-- Content Section -->
-    <div class="relative pt-10 md:pt10 md:pl-10 lg:pt-20 lg:pl-20 text-white max-w-4xl">
+    <div class="relative pt-10 md:pt-10 md:pl-10 lg:pt-20 lg:pl-20 text-white max-w-4xl">
       <!-- Title -->
-        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-center sm:text-left">{{ title }}</h1>
-        <!-- Subtitle -->
-        <p class="sm:text-xl mb-6">
-          {{ description }}
-        </p>
+      <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-center sm:text-left">{{ title }}</h1>
+      <!-- Subtitle -->
+      <p class="sm:text-xl mb-6">
+        {{ description }}
+      </p>
 
       <!-- Buttons -->
       <div class="flex flex-wrap justify-center lg:justify-start gap-4">
         <CustomButton variant="primary" class="w-full sm:w-auto" :buttonLink="primaryButton.link">
-          {{ primaryButton.text}}
+          {{ primaryButton.text }}
         </CustomButton>
         <CustomButton variant="secondary" class="w-full sm:w-auto" :buttonLink="secondaryButton.link">
           {{ secondaryButton.text }}
diff --git a/src/components/wrapper/BannerWrapper.vue b/src/components/wrapper/BannerWrapper.vue
index 8ea9eaf..398722f 100644
--- a/src/components/wrapper/BannerWrapper.vue
+++ b/src/components/wrapper/BannerWrapper.vue
@@ -16,9 +16,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  heading:{
-    type:Object,
-    required:false,
+  heading: {
+    type: Object,
+    required: false,
   },
   primaryButton: {
     type: Object,
@@ -32,22 +32,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <CustomSection
-    sectionClass="py-6 lg:py-8 xl:py-16"
-    v-if="heading?.title || heading?.subtitle"
-  >
-    <Heading
-      v-if="heading?.title || heading?.subtitle"
-      :title="heading?.title"
-      :description="heading?.subtitle"
-      align="CENTER"
-    />
+  <CustomSection sectionClass="py-6 lg:py-8 xl:py-16" v-if="heading?.title || heading?.subtitle">
+    <Heading v-if="heading?.title || heading?.subtitle" :title="heading?.title" :description="heading?.subtitle"
+      align="CENTER" />
   </CustomSection>
- 
-    <CustomBanner
-      :bannerTitle="bannerTitle"
-      :bannerDescription="bannerDescription"
-      :primaryButton="primaryButton"
-      :secondaryButton="secondaryButton"
-    />
+  <CustomBanner :bannerTitle="bannerTitle" :bannerDescription="bannerDescription" :primaryButton="primaryButton"
+    :secondaryButton="secondaryButton" />
 </template>
diff --git a/src/components/wrapper/TabsWrapper.vue b/src/components/wrapper/TabsWrapper.vue
index 3ee8559..d2cadae 100644
--- a/src/components/wrapper/TabsWrapper.vue
+++ b/src/components/wrapper/TabsWrapper.vue
@@ -2,8 +2,6 @@
 import CustomSection from "../core/CustomSection.vue";
 import Heading from "../core/Heading.vue";
 import CustomTabs from "../core/CustomTabs.vue";
-import GetDemoWrapper from "./GetDemoWrapper.vue";
-import CustomSeprater from "../core/CustomSeprater.vue";
 const props = defineProps({
   items: {
     type: Array,
diff --git a/src/components/wrapper/TopCompaniesWrapper.vue b/src/components/wrapper/TopCompaniesWrapper.vue
index 387349d..3ebbb3e 100644
--- a/src/components/wrapper/TopCompaniesWrapper.vue
+++ b/src/components/wrapper/TopCompaniesWrapper.vue
@@ -20,12 +20,7 @@ const props = defineProps({
   <CustomSection>
     <Heading :title="heading?.title" align="CENTER" />
     <div class="pt-10 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-items-center">
-      <CustomTile
-        v-for="(card, index) in items"
-        :key="index"
-        :card="card"
-        :index="index"
-      />
+      <CustomTile v-for="(card, index) in items" :key="index" :card="card" :index="index" />
     </div>
   </CustomSection>
 </template>