@ozdao/martyrs 0.2.507 → 0.2.509

package/src/modules/globals/views/components/partials/{FooterAlt.vue → Footer.centered.vue}

@@ -15,11 +15,14 @@ import IconAddress from '@martyrs/src/modules/icons/entities/IconAddress.vue';
 import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
 
 import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.vue'
-import instagram from '@martyrs/src/modules/icons/socials/instagram.vue';
-import facebook from '@martyrs/src/modules/icons/socials/facebook.vue';
-import linkedin from '@martyrs/src/modules/icons/socials/linkedin.vue'
-import youtube from '@martyrs/src/modules/icons/socials/youtube.vue'
-import whatsapp from '@martyrs/src/modules/icons/socials/whatsapp.vue'
+import IconInstagram from '@martyrs/src/modules/icons/socials/instagram.vue';
+import IconFacebook from '@martyrs/src/modules/icons/socials/facebook.vue';
+import IconLinkedin from '@martyrs/src/modules/icons/socials/linkedin.vue'
+import IconYoutube from '@martyrs/src/modules/icons/socials/youtube.vue'
+import IconWhatsapp from '@martyrs/src/modules/icons/socials/whatsapp.vue'
+
+import Logotype from '@martyrs/src/modules/icons/logos/Logotype.vue'
+
 
 // Props
 const props = defineProps({
@@ -61,12 +64,12 @@ const text = {
       // Footer
       year: '2025 ',
       heart: "❤",
-      copyright: 'Three Steps Studio Ltd. ',
-      ozdao: 'Builded with love in',
+      copyright: 'Three Steps Studio Ltd. All Rights Reserved.',
+      ozdao: 'Builded in OZ DAO',
       
       // Contact info
       phoneNumber: '+44 77 7878 4893',
-      emailAddress: 'info@3stepsprod.com',
+      emailAddress: "info{'@'}3stepsprod.com",
       
       // Navigation columns
       navigationColumns: [
@@ -75,19 +78,19 @@ const text = {
             {
               title: 'Equipment',
               items: [
-                { name: 'Cameras', url: 'cameras' },
-                { name: 'Lighting', url: 'lighting' },
-                { name: 'Stabilizers', url: 'stabilizers' },
-                { name: 'Accessories', url: 'accessories' }
+                { name: 'Cameras', url: 'products/categories/cameras' },
+                { name: 'Lighting', url: 'products/categories/lighting-kits' },
+                { name: 'Stabilizers', url: 'products/categories/stabilization-motion' },
+                { name: 'Accessories', url: 'products/categories/accessories' }
               ]
             },
             {
               title: 'Services',
               items: [
-                { name: 'Kits & Packages', url: 'kits-packages' },
-                { name: 'Studio Hire', url: 'studio-hire' },
-                { name: 'Delivery', url: 'delivery' },
-                { name: 'Production Help', url: 'production-help' }
+                { name: 'Kits & Packages', url: 'products/categories/kits-packages' },
+                { name: 'Studio Hire', url: 'products/categories/studio-hire' },
+                { name: 'Delivery', url: 'products/categories/delivery' },
+                { name: 'Production Help', url: 'products/categories/production-help' }
               ]
             }
           ]
@@ -97,19 +100,19 @@ const text = {
             {
               title: 'Company',
               items: [
-                { name: 'About Us', url: 'about' },
-                { name: 'Contact', url: 'contact' },
-                { name: 'FAQ', url: 'faq' },
-                { name: 'Blog', url: 'blog' }
+                { name: 'About Us', url: 'pages/about' },
+                { name: 'Contact', url: 'pages/contact' },
+                { name: 'FAQ', url: 'pages/faq' },
+                { name: 'Blog', url: '/community' }
               ]
             },
             {
               title: 'Legal',
               items: [
-                { name: 'Privacy Policy', url: 'privacy-policy' },
-                { name: 'Cookie Policy', url: 'cookie-policy' },
-                { name: 'Terms of Use', url: 'terms-of-use' },
-                { name: 'EULA', url: 'eula' }
+                { name: 'Privacy Policy', url: 'pages/privacy-policy' },
+                { name: 'Cookie Policy', url: 'pages/cookie-policy' },
+                { name: 'Terms of Use', url: 'pages/terms-of-use' },
+                { name: 'EULA', url: 'pages/eula' }
               ]
             }
           ]
@@ -119,46 +122,51 @@ const text = {
       // Social links
       socialLinks: [
         { 
-          name: 'Instagram',
-          url: 'https://www.instagram.com/3stepsprod',
-          icon: instagram
+          name: 'IconInstagram',
+          url: 'https://www.instagram.com/3stepsprod'
         },
         { 
-          name: 'Youtube',
-          url: 'https://www.youtube.com/@threestepsproduction',
-          icon: youtube
+          name: 'IconYoutube',
+          url: 'https://www.youtube.com/@threestepsproduction'
         },
         { 
-          name: 'WhatsApp',
-          url: 'https://api.whatsapp.com/send/?phone=447778784893&text&type=phone_number&app_absent=0',
-          icon: whatsapp
+          name: 'IconWhatsapp',
+          url: 'https://api.whatsapp.com/send/?phone=447778784893&text&type=phone_number&app_absent=0'
         }
       ]
     }
   }
 }
 
-const { t, te, tm } = useI18n(text)
+const { t, te, tm } = useI18n({
+  useScope: 'global',
+  messages: text.messages
+})
 
-// Get columns and social links from translations
-const navigationColumns = computed(() => tm('navigationColumns'))
-const socialLinks = computed(() => tm('socialLinks'))
+// Component mapping for social icons
+const iconComponents = {
+  IconInstagram,
+  IconFacebook,
+  IconLinkedin,
+  IconYoutube,
+  IconWhatsapp
+}
 </script>
 
 <template>
   <footer 
     class="
-      pd-medium pd-t-large
       w-100
       br-t br-solid
+      mobile:t-center
     "
     :class="{
       't-black bg-white br-light': theme === 'light',
       't-white bg-black br-dark': theme === 'dark'  
     }"
   >
-    <!-- Top Section -->
-    <div class="container-wide">
+    <div class="pd-medium">
+      <!-- Top Section -->
       <component
         v-if="logotype"
         :is="logotype"
@@ -167,13 +175,13 @@ const socialLinks = computed(() => tm('socialLinks'))
         class="cursor-pointer h-3r mn-b-medium"
       />
 
-      <div class="grid cols-4-footer tablet:cols-2 mobile:cols-1 gap-extra mn-b-big">
+      <div class="grid cols-3-footer tablet:cols-2 mobile:cols-1 gap-extra mobile:gap-big">
         
         <!-- Contact Block -->
-        <div class="col w-max-15r">
+        <div class="flex flex-column mobile:flex-h-center w-max-15r mobile:mn-auto">
           <p class="p-semi t-medium mn-b-semi">{{ t('description') }}</p>
           
-          <div class="mn-b-semi flex flex-column gap-small">
+          <div class="mn-b-semi mobile:flex-v-center flex flex-column gap-small">
             <a 
               :href="`tel:${t('phoneNumber').replace(/\s/g, '')}`" 
               class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
@@ -233,22 +241,24 @@ const socialLinks = computed(() => tm('socialLinks'))
         </div>
 
         <!-- Navigation Columns -->
-        <div v-for="(column, colIndex) in navigationColumns" :key="colIndex" class="col">
-          <div v-for="(section, sectionIndex) in column.sections" :key="sectionIndex">
-            <h4 class="h5 t-medium mn-b-regular" :class="sectionIndex > 0 ? 'mn-t-medium' : ''">{{ section.title }}</h4>
-            <nav>
-              <ul class="flex flex-column gap-thin">
-                <li v-for="item in section.items" :key="item.url">
-                  <router-link 
-                    :to="`/${item.url}`" 
-                    class="t-small transition-opacity hover-opacity-70" 
-                    :class="theme === 'light' ? 't-black' : 't-white'"
-                  >
-                    {{ item.name }}
-                  </router-link>
-                </li>
-              </ul>
-            </nav>
+        <div class="cols-2 gap-big">
+          <div v-for="(column, colIndex) in tm('navigationColumns')" :key="colIndex" class="flex flex-column gap-medium">
+            <div v-for="(section, sectionIndex) in column.sections" :key="sectionIndex" class="">
+              <h4 class="h5 t-medium mn-b-regular">{{ section.title }}</h4>
+              <nav>
+                <ul class="flex flex-column gap-thin">
+                  <li v-for="item in section.items" :key="item.url">
+                    <router-link 
+                      :to="`/${item.url}`" 
+                      class="t-small transition-opacity hover-opacity-70" 
+                      :class="theme === 'light' ? 't-black' : 't-white'"
+                    >
+                      {{ item.name }}
+                    </router-link>
+                  </li>
+                </ul>
+              </nav>
+            </div>
           </div>
         </div>
 
@@ -266,9 +276,9 @@ const socialLinks = computed(() => tm('socialLinks'))
 
           <h4 class="h5 t-medium mn-b-regular">{{ t('follow') }}</h4>
           <!-- Social Links -->
-          <div class="flex gap-small mn-b-medium">
+          <div class="flex mobile:flex-h-center gap-thin">
             <a 
-              v-for="social in socialLinks"
+              v-for="social in tm('socialLinks')"
               :key="social.name"
               :href="social.url" 
               target="_blank"
@@ -282,7 +292,7 @@ const socialLinks = computed(() => tm('socialLinks'))
               "
             >
               <component
-                :is="social.icon"
+                :is="iconComponents[social.name]"
                 class="i-semi"
                 :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"
               />
@@ -290,47 +300,39 @@ const socialLinks = computed(() => tm('socialLinks'))
           </div>
         </div>
       </div>
+    </div>
 
-      <!-- Bottom Section -->
-      <div class="
-        pd-t-medium 
-        br-t br-solid
-        flex flex-justify-between flex-v-center
-        mobile:flex-column mobile:gap-small
-      "
-      :class="{
-        'br-light': theme === 'light',
-        'br-dark': theme === 'dark'
-      }"
-      >
-        <!-- Copyright -->
-        <p class="t-small t-medium uppercase mobile:t-center">
-          {{ t('year') }} 
-          <span class="t-main copyleft">{{ t('heart') }}</span> 
-          {{ t('copyright') }} 
-          {{ t('ozdao') }}
-          <a href="https://ozdao.dev" class="t-main" target="_blank" rel="noopener">OZ DAO.</a>
-        </p>
-      </div>
+    <!-- Bottom Section -->
+    <div class="
+      pd-medium 
+      br-t br-solid
+      flex flex-justify-between flex-v-center
+      flex-nowrap
+      mobile:flex-column mobile:gap-small
+      mobile:t-center
+    "
+    :class="{
+      'br-light': theme === 'light',
+      'br-dark': theme === 'dark'
+    }"
+    >
+      <!-- Copyright -->
+      <p class="t-small t-medium uppercase mobile:t-center">
+        {{ t('year') }} 
+        <span class="t-main copyleft">{{ t('heart') }}</span> 
+        {{ t('copyright') }} 
+      </p>
+
+      <a href="https://ozdao.dev" target="_blank" rel="noopener" class="flex-nowrap flex-v-center flex t-medium gap-thin br-1px br-light pd-thin radius-thin">
+        <Logotype class="h-1r w-auto"/>
+        <span>{{ t('ozdao') }}</span>
+      </a>
     </div>
   </footer>
 </template>
 
-<style lang="scss" scoped>
-.cols-4-footer {
-  grid-template-columns: 5fr 3fr 3fr 4fr;
-}
-footer {
-  transition: background-color 0.3s ease, color 0.3s ease;
-  
-  a {
-    text-decoration: none;
-  }
-  
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
+<style lang="scss">
+.cols-3-footer {
+  grid-template-columns: 5fr 7fr 4fr;
 }
 </style>