feat(iu): view a dynamic response after entering my age

src/App.vue

@@ -6,12 +6,14 @@ import noise from '/noise.png'
 <template>
   <div class="relative h-screen w-screen">
     <div
-      class="absolute inset-0  bg-center"
+      class="absolute inset-0 h-3/4 bg-center"
+      style="background-image: url('/vector.png')"
+    ></div>
+    <div
+      class="absolute inset-0 bg-center opacity-65"
       style="background-image: url('/noise.png')"
     ></div>
-
     <div class="absolute inset-0 bg-color-bg-tertiary"></div>
-
     <div class="relative z-10">
       <Header />
       <router-view />

src/components/header/Header.vue

@@ -27,7 +27,7 @@ export default {
 
 <template>
   <header
-    class="w-full flex justify-center bg-color-bg-secondary backdrop-blur-sm relative overflow-hidden"
+    class="w-full flex justify-center bg-color-bg-secondary backdrop-blur-sm relative overflow-hidden mb-11"
   >
     <div
       class="w-full p-5 max-w-screen-xl-up flex justify-between items-center border-b-animation"

src/views/HomeView.vue

@@ -1,4 +1,47 @@
 <script setup lang="ts"></script>
 
 <template>
+  <div class="flex flex-col gap-14">
+    <div class="flex flex-col items-center justify-center">
+      <h1
+        class="text-size-primary font-semibold bg-gradient-to-b from-[#3B3B3B] to-[#FFF] bg-clip-text text-transparent"
+      >
+        Nothing
+      </h1>
+      <p
+        class="text-size-secondary w-subtitle text-center bg-gradient-to-b from-[#3B3B3B] to-[#FFF] bg-clip-text text-transparent"
+      >
+        It&apos;s only after you&apos;re bored you have the great ideas.
+        It&apos;s never going to be when you&apos;re stressed, or busy, running
+        around or rushed.
+        <span class="underline decoration-[#9f9f9f]">How old are you?</span>
+      </p>
+    </div>
+
+    <div class="w-full flex items-center justify-center">
+      <div></div>
+      <div
+        class="flex bg-gray-400 bg-opacity-5 items-center justify-center w-box flex-col bg-color-bg-gradient-primary shadow-sm backdrop-blur-10 border-gray-100 rounded-3xl">
+        <div class="flex w-full px-4 pt-4 pb-[10px] justify-between">
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        </div>
+        <div>
+          <div class="flex flex-wrap px-14 gap-[10px]">
+            <img
+              v-for="i in 90"
+              :key="i"
+              src="/logo.svg"
+              class="logo min-w-7 min-h-7"
+              alt="logo"
+            />
+          </div>
+        </div>
+        <div class="flex w-full px-4 pb-4 pt-[10px] justify-between">
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+          <span class="w-1 h-1 bg-white rounded-full"></span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

tailwind.config.js

@@ -5,6 +5,10 @@ export default {
   darkMode: false,
   theme: {
     extend: {
+      fontSize: {
+        'size-primary': '124px',
+        'size-secondary': '20px',
+      },
       padding: {
         xs: '1rem',
         sm: '2rem',
@@ -32,14 +36,44 @@ export default {
       },
       backgroundImage: {
         'color-text-gradient-primary': 'linear-gradient(180deg, rgba(99, 180, 255, 0) -27.76%, rgba(255, 255, 255, 0.01) 100%), rgba(255, 255, 255, 0.02)',
+        'text-gradient': 'linear-gradient(180deg, #3B3B3B 0%, #FFF 100%)',
+        'color-bg-gradient-primary': 'linear-gradient(180deg, rgba(99,180,255,0) -27.76%, rgba(255,255,255,0.07) 100%), rgba(255,255,255,0.02)',
+      },
+      backgroundClip: {
+        text: 'text',
+      },
+      textFillColor: {
+        transparent: 'transparent',
       },
       backdropBlur: {
         '100': '100px',
+        '10': '10px',
       },
       padding: {
-        '0.25': '0.0625rem', // 1px
+        '0.25': '0.0625rem',
+      },
+      spacing: {
+        'subtitle': '524px', 
+        'box': '792px',
+        'sm': '10px', 
+      },
+      boxShadow: {
+        'sm': '0px 0px 10px rgba(0, 0, 0, 0.1)',
       },
     },
-    plugins: [],
+    plugins: [
+      function ({ addUtilities }) {
+        addUtilities({
+          '.bg-clip-text': {
+            '-webkit-background-clip': 'text',
+            'background-clip': 'text',
+          },
+          '.text-fill-transparent': {
+            '-webkit-text-fill-color': 'transparent',
+            'text-fill-color': 'transparent',
+          },
+        });
+      },
+    ],
   },
 }