style(hero): Add bg image and fix text positioning

AgroforestDAO · Aug 9, 2022 · 386dad8 · 386dad8
1 parent efba8cc
commit 386dad8
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/src/components/Atoms/BaseHero.vue b/src/components/Atoms/BaseHero.vue
@@ -2,19 +2,26 @@
 interface Props {
   title: string
   subtitle?: string
+  backgroundImage?: string
 }
 const props = defineProps<Props>()
 </script>
 
 <template>
-  <div class=" bg-white border-b-3 border-black dark:border-white h-[90vh] text-end px-20">
-    <div class="h-[90vh] py-[50vh]">
-      <BaseTitle>
-        {{ props.title }}
-      </BaseTitle>
-      <BaseSubtitle>
-        {{ props.subtitle }}
-      </BaseSubtitle>
+  <div class="relative bg-white border-b-3 border-stone-700 dark:border-stone-300 h-[90vh] px-20 bg-cover text-stone-700 dark:text-white" :style="{ backgroundImage: `url(${props.backgroundImage})` }">
+    <div class="absolute bottom-[30vh] right-[10vw]">
+      <div class="flex flex-col items-end">
+        <div class="bg-white dark:bg-stone-700 w-fit py-2 px-3 my-3">
+          <BaseSubtitle>
+            {{ props.title }}
+          </BaseSubtitle>
+        </div>
+        <div class="bg-white dark:bg-stone-700 w-9/12  md:w-1/2 py-3 px-7">
+          <BaseTitle>
+            {{ props.subtitle }}
+          </BaseTitle>
+        </div>
+      </div>
     </div>
   </div>
 </template>