finish the slider

Hetari · Aug 28, 2024 · c94f30a · c94f30a
1 parent 410e50e
commit c94f30a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 11 deletions.
diff --git a/src/assets/images/IMG_20240828_164622_964.jpg b/src/assets/images/IMG_20240828_164622_964.jpg
diff --git a/src/components/common/Button.vue b/src/components/common/Button.vue
@@ -1,7 +1,7 @@
 <template>
   <component  :is="url ? 'a' : 'button'" 
     id="button"
-    class="leading-base group pointer-events-auto relative h-full max-w-fit transform-none overflow-clip rounded-full bg-flax-smoke-950 px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-flax-smoke-100 sm:text-sm"
+    class="leading-base group pointer-events-auto relative h-full max-w-full transform-none overflow-clip rounded-full bg-flax-smoke-950 px-5 py-2 text-[1rem] font-semibold uppercase tracking-normal text-flax-smoke-100 sm:text-sm"
     :class="$attrs.class"
     target="_blank"
     :href="url"

diff --git a/src/components/design/Slider.vue b/src/components/design/Slider.vue
@@ -11,12 +11,12 @@
       >
         <div>
           <p
-            class="heading-4 mb-14 min-h-36 max-w-[30ch] font-semibold leading-none"
+            class="quote heading-3 mb-14 min-h-36 max-w-[30ch] font-semibold leading-none"
           >
-            "{{ people[index].quote }}"
+            " {{ people[index].quote }} "
           </p>
           <div class="heading-6 mb-6 font-semibold">
-            <p class="">{{ people[index].author }}</p>
+            <p>{{ people[index].author }}</p>
             <p class="text-flax-smoke-400">{{ people[index].position }}</p>
           </div>
           <div class="flex gap-3">
@@ -39,9 +39,9 @@
             <p>{{ people.length }}</p>
           </div>
           <div
-            class="lg:absolute lg:inset-y-0 lg:-bottom-8 lg:right-0 lg:h-[110%] lg:will-change-scroll"
+            class="lg:absolute lg:inset-y-0 lg:-bottom-8 lg:right-0 lg:h-[115%] lg:w-full lg:will-change-scroll"
           >
-            <div class="sticky top-[90%] flex gap-3">
+            <div class="sticky top-[90%] flex place-content-end gap-3">
               <Button label="Prev" @click="clickPrev" />
               <Button label="Next" @click="clickNext" />
             </div>
@@ -113,11 +113,10 @@
 <script setup lang="ts">
   import { esmail, mohammad } from '@/assets/images';
   import { Button } from '../common';
-  import { computed, ref } from 'vue';
+  import { computed, onMounted, ref } from 'vue';
   import { useWindowSize } from '@vueuse/core';
 
   const { width } = useWindowSize();
-
   const isSmallScreen = computed(() => width.value < 640);
 
   const clickNext = () => {
@@ -127,6 +126,8 @@
     index.value = (index.value - 1 + people.length) % people.length;
   };
 
+  onMounted(() => {});
+
   // data
   const index = ref(0);
   const people = [

diff --git a/src/components/sections/Hero.vue b/src/components/sections/Hero.vue
@@ -47,7 +47,7 @@
               class="who-am-i text-fluid-body text-base-large w-full overflow-clip text-balance font-medium leading-snug sm:max-w-[37ch] lg:text-start"
             ></p>
 
-            <div class="relative origin-left overflow-hidden sm:scale-125">
+            <div class="relative origin-left overflow-hidden sm:scale-150">
               <div id="contact-btn" class="flex -translate-y-full">
                 <Button class="contact" label="Get in touch" url="#" />
               </div>

diff --git a/src/components/sections/People.vue b/src/components/sections/People.vue
@@ -26,8 +26,6 @@
 
     <Slider />
   </section>
-  <div class="h-svh"></div>
-  <div class="h-svh bg-red-400"></div>
 </template>
 
 <script setup lang="ts">