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 <[email protected]>
openobserve · Feb 1, 2025 · 82ffdfa · 82ffdfa
1 parent 9bceb52
commit 82ffdfa
Show file tree

Hide file tree

Showing 19 changed files with 337 additions and 448 deletions.
diff --git a/public/img/bg/gradient-bg/TextureBG.svg b/public/img/bg/gradient-bg/TextureBG.svg
diff --git a/public/img/bg/gradient-bg/TextureBottomBG.svg b/public/img/bg/gradient-bg/TextureBottomBG.svg
diff --git 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
@@ -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>
diff --git 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
@@ -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
@@ -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
@@ -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 }}