added content to about page. Responsive. Focus trap needs to be fixed

my-project/src/components/IntroSection.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/about_intro.svg" alt="image" />
       </div>
     </div>
   </section>

my-project/src/components/TheFooter.vue

@@ -1,10 +1,10 @@
 
 <template>
-    <section class="mt-[100px] bg-primary container max-w-[1200px] mb-20 mx-auto  px-4 sm:px-[60px] md:px-[120px]">
+    <section class="mt-[100px] bg-primary container max-w-[1200px] mb-20 mx-auto  px-4 ">
         <div class="flex flex-col justify-between py-10 sm:space-x-5 sm:flex-row">
-            <h2 class=" text-2xl text-center sm:text-start mb-4 sm:mb-0 md:text-xl lg:text-4xl font-semibold text-white leading-[170%]">let's discuss making your interior<br>like a dream place!</h2>
+            <h2 class="text-3xl 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-center sm:text-start text-grayscale_lightray">Contact us below to work together to build your amazing interior</p>
+                <p class="mb-5 text-base 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">
                     <div class="flex justify-center items-center w-[142px] h-[49px] bg-white  hover:bg-primary hover:text-white active:bg-primary_active transition border">
                         <p>contact us</p>
@@ -18,12 +18,12 @@
         <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">
                 <TheLogo class="mb-5 sm:md-0"/>
-                <h2 class=" text-base md:text-xl lg:text-4xl font-semibold leading-[170%] text-grayscale">One of the best furniture<br> agency.</h2>
+                <h2 class=" text-base md:text-xl lg:text-2xl font-semibold leading-[170%] text-grayscale">One of the best furniture<br> agency.</h2>
             </div>
             <div class="relative z-10">
                 <div class="flex mb-[23px] flex-col 400px:flex-row items-center">
                     <svg class="hidden 400px:block mr-[10px]" xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="none"><ellipse cx="7" cy="7.18237" fill="#333" rx="7" ry="7.00879"/></svg>
-                    <p class="inline-block text-sm text-center  sm:text-base leading-[160%] text-grayscale">Enter  your email to get the latest news</p>
+                    <p class="inline-block text-sm text-center leading-[160%] text-grayscale">Enter  your email to get the latest news</p>
                 </div>
                 <input type="text" placeholder="Email Address" class="px-6 py-2 w-full focus:outline-none   placeholder:text-base placeholder:leading-[160%] placeholder:text-grayscale_lightray border-b border-black">
                 <div class="flex justify-center sm:justify-end">

my-project/src/components/TheHeader.vue

@@ -40,7 +40,7 @@
       <!-- burger menu -->
       <div class="z-30 flex items-center justify-center md:hidden">
         <button
-          @click="burgerOpen = !burgerOpen"
+          @click="burgerOpen = !burgerOpen; activate()"
           id="button"
           class="border w-[50px] h-[50px] border-pink-700"
         >
@@ -80,7 +80,6 @@
         <div
         @click.stop.prevent="burgerOpen = !burgerOpen"
         @click.prevent="deactivate()"
-        ref="target"
           v-if="burgerOpen"
           class="fixed inset-0 bg-black bg-opacity-25 backdrop-blur-sm"
         >
@@ -136,27 +135,31 @@
 
           <router-link
           id="home"
-          v-on:click="burgerOpen = !burgerOpen"
+          v-on:click="burgerOpen = false"
           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
+          v-on:click="burgerOpen = false"
           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
+          v-on:click="burgerOpen = false"
           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"
           >Services</router-link
         >
         <router-link
+          v-on:click="burgerOpen = false"
           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"
           >Our teams</router-link
         >
         <router-link
+          v-on:click="burgerOpen = false"
           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="/about"
           >Contact Us</router-link

my-project/src/components/WhyChooseUs.vue

@@ -1,73 +1,28 @@
-<script>
+<script setup>
 import TitleWithLine from "./TitleWithLine.vue";
-export default {
-  name: "WhyChooseUs",
-};
+import WhyChooseUsCard from "./pages/about/WhyChooseUsCard.vue";
 </script>
 
 <template>
   <TitleWithLine :title="service" />
   <section>
-    <div class="flex flex-col mb-[40px]">
-      <h2 class="capitalize mb-[24px] text-4xl font-semibold leading-[170%]">
+    <div class="flex px-[20px] items-center lg:items-start flex-col mb-[40px]">
+      <h2 class="capitalize mb-[24px] text-2xl font-semibold leading-[170%]">
         why choose us
       </h2>
-      <p class="max-w-[470px] text-lg font-normal leading-[160%]">
+      <p class="max-w-[500px] text-sm font-normal leading-[160%] text-grayscale10">
         Customize your interior design into a dream place with the best
         designers and quality furniture. We try our best to fulfill your
         expectations.
       </p>
     </div>
 
-    <div class="flex justify-between gap-5">
-      <div
-        class="flex flex-col justify-center items-center  min-h-[295px] space-y-[20px] bg-yellow-300 border border-black"
-      >
-        <!-- circle -->
-        <div class="rounded-full w-[63px] h-[63px] bg-[#D9D9D9]"></div>
-        <p class="capitalize text-2xl font-semibold leading-[140%]">
-          high quality
-        </p>
-        <p
-          class="min-h-[116px] text-lg font-normal leading-[160%]"
-        >
-          Customize your interior design into a dream place with the best
-          designers and quality furniture. We try our best to fulfill your
-          expectations.
-        </p>
-      </div>
-      <div
-        class="flex flex-col justify-center items-center  min-h-[295px] space-y-[20px] bg-yellow-300 border border-black"
-      >
-        <!-- circle -->
-        <div class="rounded-full w-[63px] h-[63px] bg-[#D9D9D9]"></div>
-        <p class="capitalize text-2xl font-semibold leading-[140%]">
-          professional designer
-        </p>
-        <p
-          class="min-h-[116px] text-lg font-normal leading-[160%]"
-        >
-          Customize your interior design into a dream place with the best
-          designers and quality furniture. We try our best to fulfill your
-          expectations.
-        </p>
-      </div>
-      <div
-        class="flex flex-col justify-between items-center  min-h-[295px] space-y-[20px] bg-yellow-300 border border-black"
-      >
-        <!-- circle -->
-        <div class="rounded-full w-[63px] h-[63px] bg-[#D9D9D9]"></div>
-        <p class="capitalize text-2xl font-semibold leading-[140%]">
-          the best services
-        </p>
-        <p
-          class=" min-h-[116px] text-lg font-normal leading-[160%]"
-        >
-          Customize your interior design into a dream place with the best
-          designers and quality furniture. We try our best to fulfill your
-          expectations.
-        </p>
-      </div>
+    <div class="flex flex-col items-center justify-between gap-5 lg:items-start px- lg:flex-row">
+      <WhyChooseUsCard :title="'High Quality'" :description="'Indulge in exceptional craftsmanship and superior quality. Our handpicked selection of furniture and decor ensures that every piece in your space is built to last and impress.'"/>
+      <WhyChooseUsCard :title="'Professional Designer'" :description="'Unlock the expertise of our skilled designers. Collaborate with our team to curate a personalized interior that reflects your unique taste and lifestyle.'"/>
+      <WhyChooseUsCard :title="'The Best Services'" :description="'Experience unparalleled customer satisfaction. From concept to completion, we provide comprehensive support, ensuring a seamless and stress-free journey towards your dream home.'"/>
+
     </div>
+
   </section>
 </template>

my-project/src/components/pages/about/AboutIntro.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+  name: "IntroSection",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    imageSrc: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <section class="mb-[100px] container max-w-[1200px] mx-auto border">
+    <div class="flex flex-col items-center border border-black">
+      <h2 class="text-[56px] max-w-[600px] font-bold leading-[140%] mb-[36px]">
+        {{ title }}
+      </h2>
+      <p
+        class="text-center max-w-[600px] text-sm font-normal leading-[160%] mb-[57px]"
+      >
+        {{ description }}
+      </p>
+      <div class="max-w-[1200px]">
+        <img src="../../../assets/about/about_intro.svg" alt="image" />
+      </div>
+    </div>
+  </section>
+</template>

my-project/src/components/pages/about/InteriorCustomization.vue

@@ -8,28 +8,28 @@ defineProps({
 </script>
 
 <template>
-  <h2 class="max-w-[618px] mb-[56px] text-4xl font-semibold leading-[170%]">
+  <h2 class="px-[20px] max-w-[650px] mb-[56px] text-2xl font-semibold leading-[170%]">
     {{ title }}
   </h2>
 
-  <div class="flex justify-between">
+  <div class="flex flex-col justify-between space-y-6 lg:flex-row">
     <!-- image -->
-    <div class="max-w-[883px]">
+    <div>
       <img src="../../../assets/about/interior_customization.svg" alt="image" />
     </div>
     <!-- right sidebar -->
     <div
-      class="max-w-[252px] py-[40px] px-[50px] flex flex-col items-center bg-[#2C3878] text-white"
+      class="min-w-[252px] px-[20px] min-h-[525px] flex flex-col justify-center items-center bg-primary text-white"
     >
       <!-- projects completed -->
       <h2 class="text-[52px] leading-[160%]">{{ projectsCompleted }}</h2>
-      <p class="text-base leading-[160%] mb-[57px]">Project Completed</p>
+      <p class="text-xs leading-[160%] mb-[57px]">Project Completed</p>
       <!-- professional teams -->
       <h2 class="text-[52px] leading-[160%]">{{ professionalTeams }}</h2>
-      <p class="text-base leading-[160%] mb-[57px]">Professional Teams</p>
+      <p class="text-xs leading-[160%] mb-[57px]">Professional Teams</p>
       <!-- years experience -->
       <h2 class="text-[52px] leading-[160%]">{{ yearsExperience }}</h2>
-      <p class="text-base leading-[160%]">Years Experience</p>
+      <p class="text-xs leading-[160%]">Years Experience</p>
     </div>
   </div>
 </template>

my-project/src/components/pages/about/TheAbout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import IntroSection from '../../../components/IntroSection.vue';
+import AboutIntro from '../../../components/pages/about/AboutIntro.vue';
 import TitleWithLine from '../../TitleWithLine.vue';
 import InteriorCustomization from "./InteriorCustomization.vue"
 import WhyChooseUs from "../../../components/WhyChooseUs.vue"
@@ -8,7 +8,7 @@ import WhyChooseUs from "../../../components/WhyChooseUs.vue"
 
 
 <template>
-  <IntroSection :title="`About`" :description="`It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.`"/>
+  <AboutIntro :title="`About`" :description="`Welcome to our world of interior design excellence. We believe that every space has a story to tell, and our mission is to transform your vision into a captivating reality.`"/>
   <TitleWithLine :title="`achievement`" :width="`w-[45vw] max-w-400px`" :top="`top-[11px]`" :left="`left-[70px]`" class="px-[20px]" /> 
   <InteriorCustomization
   :title="`Interior customization with Danaanz, best quality with professional workers`"

my-project/src/components/pages/about/WhyChooseUsCard.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+    title: String,
+    required: true,
+    description: String,
+    require: true,
+})
+</script>
+
+<template>
+  <div class="flex max-w-[388px] justify-between gap-5">
+    <div
+      class="flex flex-col justify-center items-center min-h-[295px] space-y-[20px] shadow-md py-5 white border"
+    >
+      <!-- circle -->
+      <div class="rounded-full w-[63px] h-[63px] bg-[#D9D9D9]"></div>
+      <p class="capitalize text-lg font-semibold leading-[140%]">
+        {{ title }}
+      </p>
+      <p
+        class="text-sm font-normal leading-[160%] text-grayscale10 px-[27px]"
+      >
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

my-project/src/components/pages/home/AttractiveFurniture.vue

@@ -4,8 +4,8 @@ import TitleWithLine from "../../TitleWithLine.vue";
 </script>
 
 <template>
-  <div class="relative md:grid grid-cols-5 md:grid-rows-4 lg:grid-rows-5 gap-0 max-w-[1200px] border-yellow-400 border container mx-auto mb-[170px]">
-    <section class=" col-start-1 col-end-5 row-start-1 row-end-4 px-[20px] border  z-10 max-w-[890px] bg-white">
+  <div class="relative md:grid grid-cols-5 md:grid-rows-4 lg:grid-rows-5 gap-0 max-w-[1200px]  container mx-auto mb-[170px]">
+    <section class=" col-start-1 col-end-5 row-start-1 row-end-4 px-[20px]  z-10 max-w-[890px] bg-white">
       <TitleWithLine
         title="service"
         :left="'left-[80px]'"
@@ -41,7 +41,7 @@ import TitleWithLine from "../../TitleWithLine.vue";
       <ProductThemesItem class="mb-[35px]" :number="`03`" :theme="`Construction Consultant`" />
     </section>
     <!--image  -->
-    <div class="col-start-2 col-span-4 row-start-3 row-end-6">
+    <div class="col-span-4 col-start-2 row-start-3 row-end-6">
       <img 
         src="../../../assets/home/AttractiveFurniture.svg"
         alt="image"

my-project/src/components/pages/home/ChooseYourProductThemes.vue

@@ -19,7 +19,7 @@ export default {
           Choose your product themes.
         </h2>
       </div>
-      <div class="flex justify-center items-center">
+      <div class="flex items-center justify-center">
         <p
           class="max-w-[473px] h-[87px] text-sm sm:text-base lg:text-[1.125rem] font-normal leading-[160%] text-[#9C9C9C]"
         >
@@ -32,25 +32,25 @@ export default {
       class="mb-[43px]"
       :number="`01`"
       :theme="`Vintage`"
-      :description="`the use of simple and limited elements to get the best effect or impression.`"
+      :description="`Embrace the charm of the past with our Vintage collection. Each piece exudes timeless elegance and nostalgic beauty, adding character to your space.`"
     />
     <ProductThemesItem
       class="mb-[43px]"
       :number="`02`"
       :theme="`Minimalist`"
-      :description="`the use of simple and limited elements to get the best effect or impression.`"
+      :description="`Experience the beauty of simplicity with our Minimalist theme. Clean lines, uncluttered spaces, and a focus on essential elements create a calming and contemporary atmosphere.`"
     />
     <ProductThemesItem
       class="mb-[43px]"
       :number="`03`"
       :theme="`Modern`"
-      :description="`the use of simple and limited elements to get the best effect or impression.`"
+      :description="`Embrace the sleek and cutting-edge designs of our Modern theme. Bold shapes, innovative materials, and a touch of avant-garde combine to create a captivating ambiance.`"
     />
     <ProductThemesItem
       class="mb-[43px]"
       :number="`04`"
       :theme="`Transitional`"
-      :description="`the use of simple and limited elements to get the best effect or impression.`"
+      :description="`Discover the perfect balance between classic and contemporary with our Transitional theme. Timeless aesthetics meet modern functionality, resulting in a harmonious blend that suits any style.`"
     />
   </section>
 </template>

my-project/src/components/pages/home/HomeIntro.vue

@@ -7,7 +7,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="px-[20px] sm:px-0 container relative flex flex-col mx-auto border">
+  <div class="px-[20px] sm:px-0 container relative flex flex-col mx-auto">
     <TitleWithLine  width="400px:w-[20vw] sm:w-[400px] top-[40px] sm:w-[420px] md:w-[300px] lg:w-[520px] xl:w-[710px]" top="sm:top-[35px] md:top-[70px]" right="right-[0px]" />
     <h1
       v-if="title"

my-project/src/components/pages/home/ProductThemesItem.vue

@@ -36,7 +36,7 @@ export default {
 
     <p
       v-if="description"
-      class="ml-[10vw] pt-[24px] max-w-[469px] min-h-[58px] text-sm sm:text-base lg:text-[1.125rem] font-normal leading-[160%]"
+      class="ml-[10vw] pt-[24px] max-w-[650px] min-h-[58px] text-sm sm:text-base lg:text-[1.125rem] font-normal leading-[160%]"
     >
       {{ description }}
     </p>

my-project/src/components/pages/home/TheHomePage.vue

@@ -18,13 +18,12 @@ import ChooseYourProductThemes from './ChooseYourProductThemes.vue';
       :title="`“We're one of the best furniture agency. Prioritizing customers and making
       purchases easy are the hallmarks of our agency.”`"
       :theme="`right-[-190px]`"
-      :description="`Online learning with us does not interfere with your daily life
-          because learning can be done anytime and anywhere.`"
+      :description="`We will help you build your dream home. It has never been easier!`"
       :right="`md:right-[-190px]`"
     />
     <AttractiveFurniture />
     <TitleWithLine class="px-[20px]" :title="`product`" :width="`w-[45vw] max-w-400px`" :top="`top-[11px]`" :left="`left-[88px]`" />  
-    <ChooseYourProductThemes class="mb-[160px] border border-red-300" />
+    <ChooseYourProductThemes class="mb-[160px]" />
     <TitleWithLine class="px-[20px ]" :title="`material`" :width="`w-[45vw] max-w-400px`" :top="`top-[11px]`" :left="`left-[95px]`"/> 
     <ChoiceOfMaterials class="pb-[20px]" />
 </template>

my-project/tailwind.config.js

@@ -12,6 +12,7 @@ export default {
         primary_active: '#1a2148',
         grayscale: '#333333',
         grayscale_lightray: '#D9D9D9',
+        grayscale10: '#9C9C9C',
       },
       screens: {
         '400px': '400px',