optimized images, SEO, accessibility

Nikita0x · Jul 15, 2023 · b07265f · b07265f
1 parent 8483d44
commit b07265f
Show file tree

Hide file tree

Showing 27 changed files with 128 additions and 74 deletions.
diff --git a/my-project/index.html b/my-project/index.html
@@ -5,6 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <link rel="icon" href="../my-project/src/assets/favicon.png" type="image/x-icon">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="interior design">
     <title>Dananz - interior design of perfection.</title>
   </head>
   <body>

diff --git a/my-project/src/assets/OurTeams/ourteams_introMinified.jpg b/my-project/src/assets/OurTeams/ourteams_introMinified.jpg
diff --git a/my-project/src/assets/about/aboutMinified/about_intro.webp b/my-project/src/assets/about/aboutMinified/about_intro.webp
diff --git a/my-project/src/assets/about/aboutMinified/about_introMinified.webp b/my-project/src/assets/about/aboutMinified/about_introMinified.webp
diff --git a/my-project/src/assets/about/aboutMinified/interior_customization.webp b/my-project/src/assets/about/aboutMinified/interior_customization.webp
diff --git a/my-project/src/assets/about/aboutMinified/interior_customizationMinified.webp b/my-project/src/assets/about/aboutMinified/interior_customizationMinified.webp
diff --git a/my-project/src/assets/home/webp/Minified/AttractiveFurniture.webp b/my-project/src/assets/home/webp/Minified/AttractiveFurniture.webp
diff --git a/my-project/src/assets/home/webp/Minified/BestFurnitureAgency.webp b/my-project/src/assets/home/webp/Minified/BestFurnitureAgency.webp
diff --git a/my-project/src/assets/home/webp/Minified/HomeIntroMinified.webp b/my-project/src/assets/home/webp/Minified/HomeIntroMinified.webp
diff --git a/my-project/src/assets/home/webp/Minified/choice2.webp b/my-project/src/assets/home/webp/Minified/choice2.webp
diff --git a/my-project/src/assets/home/webp/Minified/choice3.webp b/my-project/src/assets/home/webp/Minified/choice3.webp
diff --git a/my-project/src/components/BurgerMenu.vue b/my-project/src/components/BurgerMenu.vue
@@ -2,6 +2,7 @@
   <!-- burger menu -->
   <div class="z-30 flex items-center justify-center md:hidden">
     <button
+      aria-label="Open menu"
       @click="
         show = !show;
       "
@@ -47,7 +48,8 @@
           @click.stop="console.log('menu show')">
           <!-- close menu burger -->
               <div class="flex flex-row-reverse pr-6 h-[50px]">
-                  <button @click.stop="show = !show" tabindex="6" class="focus:outline-dashed outline-4 outline-primary flex h-[60px] w-[60px]">
+                  <button @click.stop="show = !show"
+                  aria-label="Close menu" tabindex="6" class="focus:outline-dashed outline-4 outline-primary flex h-[60px] w-[60px]">
                   <svg
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
@@ -63,48 +65,58 @@
               </svg>
               </button>
               </div>
-              <ul class="flex flex-col items-center justify-center mt-5 space-y-3 text-2xl ">
-          <router-link
-            tabindex="1"
-            id="home"
-            v-on:click="show = false"
-            @click.prevent="goToTop()"
-            class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
-            to="/"
-            >Home</router-link
-          >
-          <router-link
-          tabindex="2"
-            v-on:click="show = false"
-            @click.prevent="goToTop()"
-            class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
-            to="/about"
-            >About</router-link
-          >
-          <router-link
-          tabindex="3"
-            v-on:click="show = false"
-            @click.prevent="goToTop()"
-            class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
-            to="/services"
-            >Services</router-link
-          >
-          <router-link
-          tabindex="4"
-            v-on:click="show = false"
-            @click.prevent="goToTop()"
-            class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
-            to="/ourteams"
-            >Our teams</router-link
-          >
-          <router-link
-          tabindex="5"
-            v-on:click="show = false"
-            @click.prevent="goToTop()"
-            class="flex p-5 text-center text-white transition border-b-2 border-transparent hover:bg-primary_hover active:bg-primary_active bg-primary focus:outline-dashed outline-4 outline-primary"
-            to="/contactus"
-            >Contact Us</router-link
-          >
+              <ul class="flex flex-col items-center justify-center mt-5 space-y-10 text-2xl ">
+                <li>
+                  <router-link
+                    tabindex="1"
+                    id="home"
+                    v-on:click="show = false"
+                    @click.prevent="goToTop()"
+                    class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
+                    to="/"
+                    >Home</router-link
+                  >
+                </li>
+                <li>
+                  <router-link
+                  tabindex="2"
+                    v-on:click="show = false"
+                    @click.prevent="goToTop()"
+                    class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
+                    to="/about"
+                    >About</router-link
+                  >
+                </li>
+                <li>
+                  <router-link
+                  tabindex="3"
+                    v-on:click="show = false"
+                    @click.prevent="goToTop()"
+                    class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
+                    to="/services"
+                    >Services</router-link
+                  >
+                </li>
+                <li>
+                  <router-link
+                  tabindex="4"
+                    v-on:click="show = false"
+                    @click.prevent="goToTop()"
+                    class="p-5 transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover focus:outline-dashed outline-4 outline-primary"
+                    to="/ourteams"
+                    >Our teams</router-link
+                  >
+                </li>
+                <li>
+                  <router-link
+                  tabindex="5"
+                    v-on:click="show = false"
+                    @click.prevent="goToTop()"
+                    class="flex p-5 text-center text-white transition border-b-2 border-transparent hover:bg-primary_hover active:bg-primary_active bg-primary focus:outline-dashed outline-4 outline-primary"
+                    to="/contactus"
+                    >Contact Us</router-link
+                  >
+                </li>
               </ul>
           </div>
 

diff --git a/my-project/src/components/TheFooter.vue b/my-project/src/components/TheFooter.vue
@@ -5,9 +5,10 @@
             <h2 class="text-2xl text-center md:text-start mb-4 sm:mb-0 font-semibold text-white leading-[170%]">let's discuss making your interior like a dream place!</h2>
             <div class="flex flex-col items-center sm:justify-center sm:items-start">
                 <p class="mb-5 text-sm text-center sm:text-start text-grayscale_lightray">Contact us below to work together to build your amazing interior</p>
-                <a href="#" class="inline-block text-sm font-medium capitalize text-grayscale">
+                <a href="/contactus" class="inline-block text-sm font-medium capitalize text-grayscale">
                     <router-link class="flex justify-center items-center w-[142px] h-[49px] bg-white  hover:bg-primary hover:text-white active:bg-primary_active transition border"
                     to="/contactus"
+                    href="/contactus"
                     @click="goToTop">
                         <p>contact us</p>
                     </router-link>
@@ -19,7 +20,8 @@
     <section class="container mx-auto max-w-[1200px] px-5 sm:px-0">
         <div class="flex flex-col justify-between sm:flex-row">
             <div class="flex flex-col items-center mb-5 sm:mb-0 400px:items-start">
-                <router-link  class="mb-5 sm:md-0" to="/">
+                <router-link  class="mb-5 sm:md-0" to="/"
+                href="/contactus">
                     <TheLogo/>
                 </router-link>
                 <h2 class=" text-base md:text-xl lg:text-2xl font-semibold leading-[170%] text-grayscale">One of the best furniture<br> agency.</h2>
@@ -34,7 +36,7 @@
                     <div class="flex flex-col items-center justify-end pt-10">
                     <p class="mb-[11px] text-sm">Follow us On</p>
                     <div class="flex space-x-[25px]">
-                        <a href="#">
+                        <a href="https://www.facebook.com/" aria-label="Our facebook page">
                             <div class="flex items-center justify-center w-8 h-8 rounded-full bg-grayscale_lightray">
                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g id="icon/facebook">
@@ -43,7 +45,7 @@
                             </svg>
                             </div>
                         </a>
-                        <a href="#">
+                        <a href="https://www.instagram.com/"  aria-label="Our instagram page">
                             <div class="flex items-center justify-center w-8 h-8 rounded-full bg-grayscale_lightray">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g id="icon/instagram">
@@ -54,7 +56,7 @@
 
                             </div>
                         </a>
-                        <a href="#">
+                        <a href="https://www.tiktok.com/"  aria-label="Our tiktok page">
                             <div class="flex items-center justify-center w-8 h-8 rounded-full bg-grayscale_lightray">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g id="icon/tiktok">
@@ -64,7 +66,7 @@
 
                             </div>
                         </a>
-                        <a href="#">
+                        <a href="https://www.youtube.com/"  aria-label="Our youtube page">
                             <div class="flex items-center justify-center w-8 h-8 rounded-full bg-grayscale_lightray">
                                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <g id="icon/youtube">
@@ -77,7 +79,7 @@
                 </div>
                 </div>
 
-                <button>
+                <button aria-label="Submit your email address">
                     <svg class="absolute right-0 top-10" xmlns="http://www.w3.org/2000/svg" width="26" height="12" fill="none"><path stroke="#141414" stroke-width="2" d="M0 10.2479h23.5L16 1.23633"/></svg>
                 </button>
             </div>

diff --git a/my-project/src/components/TheHeader.vue b/my-project/src/components/TheHeader.vue
@@ -3,35 +3,38 @@
     class="md:pt-10 container sticky top-0 md:static bg-white z-30 max-w-[1200px] mx-auto"
   >
     <nav class="flex items-center justify-between md:justify-between">
-      <router-link to="/">
         <TheLogo/>
-      </router-link>
       <ul
         class="hidden md:flex text-base text-grayscale items-center space-x-[20px] md:space-x-[40px] lg:space-x-[74px]"
       >
         <router-link
           class="transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover"
           to="/"
+          href="/"
           >Home</router-link
         >
         <router-link
           class="transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover"
           to="/about"
+          href="/about"
           >About</router-link
         >
         <router-link
           class="transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover"
           to="/services"
+          href="/services"
           >Services</router-link
         >
         <router-link
           class="transition border-b-2 border-transparent hover:text-primary_hover hover:border-primary_hover"
           to="/ourteams"
+          href="/ourteams"
           >Our teams</router-link
         >
           <router-link
             class="flex justify-center items-center w-[142px] h-[49px] border border-[#3C3C3C] hover:bg-primary_hover active:bg-primary_active bg-primary text-sm font-medium text-white transition"
             to="/contactus"
+            href="/contactus"
           >
             Contact Us
           </router-link>

diff --git a/my-project/src/components/TheLogo.vue b/my-project/src/components/TheLogo.vue
@@ -1,11 +1,16 @@
 <template>
-    <a @click="goToTop">
+    <router-link
+    aria-label="Go to home page"
+    href="/"
+    to="/"
+    @click="goToTop"
+    >
         <div class="w-[126px] h-[30px] cursor-pointer items-center relative flex">
         <svg class="w-[126px] h-[30px]" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#000" d="M9.3773.585039c2.3628 0 4.4276.468311 6.1944 1.404921 1.7668.93662 3.1292 2.2564 4.0871 3.95934.9792 1.68166 1.4688 3.6294 1.4688 5.8432 0 2.1926-.4896 4.1403-1.4688 5.8432-.9579 1.703-2.3309 3.0228-4.119 3.9594C13.773 22.5317 11.7188 23 9.3773 23H.979669V.585039H9.3773ZM9.02607 18.2743c2.06483 0 3.67193-.5641 4.82143-1.6923 1.1495-1.1282 1.7242-2.7247 1.7242-4.7895 0-2.0648-.5747-3.67195-1.7242-4.82143-1.1495-1.14949-2.7566-1.72423-4.82143-1.72423H6.43972V18.2743h2.58635Zm14.06723-4.2147c0-1.8307.3406-3.4379 1.0218-4.82149.7024-1.38364 1.6497-2.44798 2.8417-3.19302 1.1921-.74503 2.5225-1.11755 3.9913-1.11755 1.2559 0 2.3522.25544 3.2888.76632.9579.51088 1.6923 1.18142 2.2032 2.0116V5.18298h5.46V23h-5.46v-2.5225c-.5322.8302-1.2772 1.5007-2.2351 2.0116-.9366.5109-2.0329.7663-3.2888.7663-1.4475 0-2.7673-.3725-3.9594-1.1175-1.192-.7663-2.1393-1.8413-2.8417-3.225-.6812-1.4049-1.0218-3.0227-1.0218-4.8533Zm13.3468.0319c0-1.3624-.3832-2.4373-1.1495-3.225-.745-.7876-1.6604-1.18137-2.746-1.18137s-2.0116.39377-2.7779 1.18137c-.745.7664-1.1176 1.8307-1.1176 3.1931 0 1.3623.3726 2.4479 1.1176 3.2568.7663.7876 1.6923 1.1814 2.7779 1.1814s2.001-.3938 2.746-1.1814c.7663-.7876 1.1495-1.8626 1.1495-3.2249Zm20.2664-9.1001c2.0861 0 3.7465.68118 4.9811 2.04353 1.2559 1.34106 1.8839 3.19297 1.8839 5.55587V23h-5.4281v-9.6748c0-1.1921-.3087-2.1181-.926-2.778-.6173-.65985-1.4475-.98979-2.4906-.98979-1.043 0-1.8732.32994-2.4905.98979-.6173.6599-.926 1.5859-.926 2.778V23h-5.46V5.18298h5.46v2.36283c.5535-.78761 1.2985-1.40493 2.2351-1.85195.9366-.46831 1.9903-.70246 3.1611-.70246Zm9.5736 9.0682c0-1.8307.3405-3.4379 1.0217-4.82149.7025-1.38364 1.6497-2.44798 2.8418-3.19302 1.1921-.74503 2.5225-1.11755 3.9913-1.11755 1.2559 0 2.3522.25544 3.2888.76632.9579.51088 1.6923 1.18142 2.2032 2.0116V5.18298h5.46V23h-5.46v-2.5225c-.5322.8302-1.2773 1.5007-2.2352 2.0116-.9366.5109-2.0328.7663-3.2888.7663-1.4475 0-2.7672-.3725-3.9593-1.1175-1.1921-.7663-2.1393-1.8413-2.8418-3.225-.6812-1.4049-1.0217-3.0227-1.0217-4.8533Zm13.3468.0319c0-1.3624-.3832-2.4373-1.1495-3.225-.7451-.7876-1.6604-1.18137-2.746-1.18137s-2.0116.39377-2.7779 1.18137c-.7451.7664-1.1176 1.8307-1.1176 3.1931 0 1.3623.3725 2.4479 1.1176 3.2568.7663.7876 1.6923 1.1814 2.7779 1.1814s2.0009-.3938 2.746-1.1814c.7663-.7876 1.1495-1.8626 1.1495-3.2249Zm20.2664-9.1001c2.0857 0 3.7467.68118 4.9807 2.04353 1.256 1.34106 1.884 3.19297 1.884 5.55587V23h-5.428v-9.6748c0-1.1921-.309-2.1181-.926-2.778-.6172-.65985-1.4473-.98979-2.4904-.98979-1.0431 0-1.8732.32994-2.4906.98979-.6173.6599-.9259 1.5859-.9259 2.778V23H89.037V5.18298h5.4601v2.36283c.5534-.78761 1.2985-1.40493 2.2351-1.85195.9366-.46831 1.9903-.70246 3.1611-.70246Zm15.7677 13.5064h7.727V23h-13.825v-4.3425l7.407-8.97237h-7.344V5.18298h13.603v4.3425l-7.568 8.97232Z"/></svg>
         <svg class="absolute top-[13px] left-[53px]" xmlns="http://www.w3.org/2000/svg" width="46" height="15" fill="none"><path stroke="#000" stroke-linecap="round" stroke-width="2" d="M1.61523 1v12.5H44.9999V1"/></svg>
         <svg class="absolute" xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="none"><path stroke="#000" stroke-linecap="round" stroke-width=".582828" d="m2.04889.64209-.98156 1.31222"/></svg>
     </div>
-    </a>
+    </router-link>
 </template>
 
 <script setup>

diff --git a/my-project/src/components/pages/Services/ServicesIntro.vue b/my-project/src/components/pages/Services/ServicesIntro.vue
@@ -26,7 +26,7 @@ export default {
         {{ description }}
       </p>
       <div class="max-w-[1200px]">
-        <img src="../../../assets/services/services_intro.jpg" alt="image" />
+        <img src="../../../assets/home/webp/Minified/AttractiveFurniture.webp" alt="image" />
       </div>
     </div>
   </section>

diff --git a/my-project/src/components/pages/about/AboutIntro.vue b/my-project/src/components/pages/about/AboutIntro.vue
@@ -30,7 +30,7 @@ export default {
         {{ description }}
       </p>
       <div class="max-w-[1200px]">
-        <img src="../../../assets/about/about_intro.svg" alt="image" />
+        <img src="../../../assets/about/aboutMinified/about_introMinified.webp" alt="image" />
       </div>
     </div>
   </section>

diff --git a/my-project/src/components/pages/about/InteriorCustomization.vue b/my-project/src/components/pages/about/InteriorCustomization.vue
@@ -18,7 +18,7 @@ defineProps({
   <div class="flex max-w-[1200px] mx-auto flex-col justify-between space-y-6 lg:space-y-0 lg:flex-row">
     <!-- image -->
     <div>
-      <img src="../../../assets/about/interior_customization.svg" alt="image" />
+      <img src="../../../assets/about/aboutMinified/interior_customizationMinified.webp" alt="image" />
     </div>
     <!-- right sidebar -->
     <div

diff --git a/my-project/src/components/pages/contactUs/ContactUsForm.vue b/my-project/src/components/pages/contactUs/ContactUsForm.vue
@@ -47,6 +47,7 @@ import MessageInput from "./MessageInput.vue";
         </div>
         <div class="flex justify-center w-full">
           <button
+            aria-label="Send Message"
             class="text-white text-xs bg-[#2C3878] hover:bg-[#242F67] active:bg-[#1F2856] w-[168px] h-[49px] border border-[#3C3C3C]"
             type="submit"
           >

diff --git a/my-project/src/components/pages/contactUs/VisitOurStores.vue b/my-project/src/components/pages/contactUs/VisitOurStores.vue
@@ -11,23 +11,23 @@
         >
           Visit Our Stores
         </h2>
-        <p class="font-normal text-sm leading-[160%] text-[#9C9C9C] mb-[39px]">
+        <p class="font-normal text-sm leading-[160%] text-[#5d5d5d] mb-[39px]">
           Find us at these locations.
         </p>
         <h3
           class="text-[1.2rem] mb-[10px] font-semibold leading-[140%] text-[#333333]"
         >
           Email
         </h3>
-        <p class="font-normal mb-[33px] text-sm leading-[160%] text-[#9C9C9C]">
+        <p class="font-normal mb-[33px] text-sm leading-[160%] text-[#5d5d5d]">
           [email protected]
         </p>
         <h3
           class="text-[1.2rem] mb-[10px] font-semibold leading-[140%] text-[#333333]"
         >
           Phone
         </h3>
-        <p class="font-normal text-sm leading-[160%] text-[#9C9C9C]">
+        <p class="font-normal text-sm leading-[160%] text-[#5d5d5d]">
           +62 815 002 1000
         </p>
       </div>
@@ -40,7 +40,7 @@
             Jakarta
           </h2>
           <p
-            class="font-normal text-start text-sm leading-[160%] text-[#9C9C9C]"
+            class="font-normal text-start text-sm leading-[160%] text-[#5d5d5d]"
           >
             Customize your interior design into a dream place with the best
             designers and quality furniture. We try our best to fulfill your
@@ -53,7 +53,7 @@
           >
             Surakarta
           </h2>
-          <p class="font-normal text-sm leading-[160%] text-[#9C9C9C]">
+          <p class="font-normal text-sm leading-[160%] text-[#5d5d5d]">
             Customize your interior design into a dream place with the best
             designers and quality furniture. We try our best to fulfill your
             expectations.
@@ -65,7 +65,7 @@
           >
             Yogyakarta
           </h2>
-          <p class="font-normal text-sm leading-[160%] text-[#9C9C9C]">
+          <p class="font-normal text-sm leading-[160%] text-[#5d5d5d]">
             Customize your interior design into a dream place with the best
             designers and quality furniture. We try our best to fulfill your
             expectations.
@@ -77,7 +77,7 @@
           >
             Bandung
           </h2>
-          <p class="font-normal text-sm leading-[160%] text-[#9C9C9C]">
+          <p class="font-normal text-sm leading-[160%] text-[#5d5d5d]">
             Customize your interior design into a dream place with the best
             designers and quality furniture. We try our best to fulfill your
             expectations.

diff --git a/my-project/src/components/pages/home/AttractiveFurniture.vue b/my-project/src/components/pages/home/AttractiveFurniture.vue
@@ -37,7 +37,7 @@ import TitleWithLine from "../../TitleWithLine.vue";
     <!--image  -->
     <div class="col-span-4 col-start-2 row-start-3 row-end-6">
       <img 
-        src="../../../assets/home/webp/AttractiveFurniture.webp"
+        src="../../../assets/home/webp/Minified/AttractiveFurniture.webp"
         alt="image"
       />
     </div>