refactor: imitate hesas masr's footer

components/TheFooter.vue

@@ -1,19 +1,25 @@
 <template lang="pug">
     .footer
-        TheFooterPrefersColorModeButton
+        .footer__logo
+          Logo.footer__icon
+          .footer__line
+          .footer__name
+            .footer__word-1 بــرلـمـان
+            .footer__word-2 طلائع القاهرة
         .contactUs
             a.contactUs__facebook( :href='contacts.facebook' ): FacebookIcon
             a.contactUs__whatsapp( :href='contacts.whatsapp' ): WhatsappIcon
             a.contactUs__email( :href='contacts.email' ): EmailIcon
-        .footer__copyRight جميع حقوق الطبع و النشر محفوظة لبرلمان طلائع القاهرة
+        TheFooterPrefersColorModeButton
 </template>
 <script>
 import FacebookIcon from '@/assets/icons/facebook.svg?inline'
 import WhatsappIcon from '@/assets/icons/whatsapp.svg?inline'
 import EmailIcon from '@/assets/icons/email.svg?inline'
+import Logo from '@/assets/images/logo.svg?inline'
 
 export default {
-  components: { FacebookIcon, WhatsappIcon, EmailIcon },
+  components: { FacebookIcon, WhatsappIcon, EmailIcon, Logo },
   data () {
     return {
       contacts: {
@@ -29,10 +35,10 @@ export default {
 .footer {
 
     width: 100%;
-    min-height: 20vh;
+    min-height: 50vh;
 
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
     align-items: center;
     flex-direction: column;
 
@@ -43,7 +49,51 @@ export default {
 
     perspective: 1000vw;
 
-    @media (min-width: 768px) { flex-direction: row }
+    &__logo {
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 20px;
+      transform: scale(0.8);
+
+      @media (min-width: 425px) { transform: scale(0.9); }
+
+      @media (min-width: 768px) { transform: scale(1); }
+
+    }
+
+    &__word-1 {
+
+      font-size: 50px;
+
+    }
+
+    &__word-2 {
+
+      font-size: 31px;
+
+    }
+
+    &__name {
+
+      color: black;
+
+    }
+
+    &__icon {
+
+      width: 100px;
+
+    }
+
+    &__line {
+
+      width: 1.5px;
+      height: 125px;
+      background-color: gray;
+
+    }
 
     &__copyRight {
 
@@ -55,24 +105,30 @@ export default {
 
     .contactUs {
 
+      min-width: 30%;
+      display: flex;
+      justify-content: space-evenly;
+
         & > a {
 
             float: left;
 
             width : 2.5em;
             height: 2.5em;
 
-            border-radius: 5px;
+            border-radius: 50px;
             padding: 0.1em;
             margin: 0.4em;
 
             display: flex;
             justify-content: center;
             align-items: center;
 
-            background: var(--gray-30);
+            background: #fff;
             cursor: pointer;
 
+            box-shadow: 0px 0px 25px hsl(0deg 0% 0% / 10%);
+
             svg {
                 width: 1.5em;
                 fill: var(--white);