split banner

Kikazuru · Apr 7, 2024 · 9b1d2cb · 9b1d2cb
1 parent e398d8b
commit 9b1d2cb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/src/components/content/BannerApp.vue b/src/components/content/BannerApp.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+    <div class="hidden sm:mb-8 sm:flex sm:justify-center">
+      <div
+        class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
+      >
+        Announcing our next round of funding.
+        <a href="#" class="font-semibold text-indigo-600"
+          ><span class="absolute inset-0" aria-hidden="true" />Read more
+          <span aria-hidden="true">&rarr;</span></a
+        >
+      </div>
+    </div>
+    <div class="text-center">
+      <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+        Data to enrich your online business
+      </h1>
+      <p class="mt-6 text-lg leading-8 text-gray-600">
+        Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.
+        Elit sunt amet fugiat veniam occaecat fugiat aliqua.
+      </p>
+      <div class="mt-10 flex items-center justify-center gap-x-6">
+        <a
+          href="#"
+          class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          >Get started</a
+        >
+        <a href="#" class="text-sm font-semibold leading-6 text-gray-900"
+          >Learn more <span aria-hidden="true">→</span></a
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -30,38 +30,7 @@
           "
         />
       </div>
-      <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
-        <div class="hidden sm:mb-8 sm:flex sm:justify-center">
-          <div
-            class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
-          >
-            Announcing our next round of funding.
-            <a href="#" class="font-semibold text-indigo-600"
-              ><span class="absolute inset-0" aria-hidden="true" />Read more
-              <span aria-hidden="true">&rarr;</span></a
-            >
-          </div>
-        </div>
-        <div class="text-center">
-          <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-            Data to enrich your online business
-          </h1>
-          <p class="mt-6 text-lg leading-8 text-gray-600">
-            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat
-            commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
-          </p>
-          <div class="mt-10 flex items-center justify-center gap-x-6">
-            <a
-              href="#"
-              class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-              >Get started</a
-            >
-            <a href="#" class="text-sm font-semibold leading-6 text-gray-900"
-              >Learn more <span aria-hidden="true">→</span></a
-            >
-          </div>
-        </div>
-      </div>
+      <banner-app></banner-app>
       <div
         class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
         aria-hidden="true"
@@ -96,4 +65,5 @@
 
 <script setup lang="ts">
 import HeaderApp from '@/components/header/HeaderApp.vue'
+import BannerApp from '@/components/content/BannerApp.vue'
 </script>