@ozdao/martyrs 0.2.507 → 0.2.509

package/src/modules/globals/views/components/partials/Footer.vue

@@ -1,182 +1,341 @@
-  <template>
-    <footer 
-      class="pd-thin pd-t-zero"
-      :class="{
-        't-black bg-white': route.meta.footer_theme === 'light',
-        't-white bg-black': route.meta.footer_theme === 'dark'  
-      }"
-    >
+<script setup="props">
+import { computed, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
-      <div id="top-footer" class="cols-3 mobile:cols-1 section">
-       
-      <a href="mailto:hello@weeder.delivery" class="w-100 radius-small contact col">
-        <img loading="lazy" class="mn-b-small h-3r" src="/logo/logotype.svg">  
-        <p class="t-transp ">{{t('description')}}</p>
-      </a>
+// Martyrs Components
+import FieldSubscribeNewsletter from '@martyrs/src/modules/orders/components/elements/FieldSubscribeNewsletter.vue'
 
-        <div @click="this.$router.push({ name: 'Home' } )" class="flex-v-center flex logo-link col">
-           <p class="h4 mn-b-small">{{t('app')}}</p>
-          <div class="store-buttons">
-          <img loading="lazy" class="h-3r" src="/assets/images/landing/appsvg" alt="Download on App Store">
-          <img loading="lazy" class="h-3r"  src="/assets/images/landing/googleplay.svg" alt="Download on Google Play">
-          </div>
-        </div>
-        
-        <a href="https://t.me/weeder_support" target="_blank" class="w-100 radius-small contact col">
-          <p class="h4 mn-b-small">{{t('socials')}}</p>
-
-          <div class="socials flex-nojustify flex">
-            <a class="mn-r-small" href="https://t.me/weederdelivery" target="_blank"> 
-              <img loading="lazy" src="@/assets/icons/Telegram_blue.svg">
-            </a> 
-            <a class="mn-r-small" href="https://t.me/weederdelivery" target="_blank"> 
-              <img loading="lazy" src="@/assets/icons/Telegram_blue.svg">
-            </a> 
-            <a class="mn-r-small" href="https://t.me/weederdelivery" target="_blank"> 
-              <img loading="lazy" src="@/assets/icons/Telegram_blue.svg">
-            </a> 
-          </div>
-        </a>
-        
-      </div>
+import LabelGooglePlay from '@martyrs/src/modules/icons/labels/LabelGooglePlay.vue';
+import LabelAppStore from '@martyrs/src/modules/icons/labels/LabelAppStore.vue';
 
-      <div class="cols-3 mobile:cols-1 section">
-        
-        <ul class="lh-semi nav-footer col">
-          <li class="mn-b-small t-semi h5">
-            {{t('store')}}
-          </li>
-
-          <div class="mn-b-medium ol">
-            <li v-for="(category,index) in categories.state.all">
-              <router-link :to="getMarketplaceLink([category.url])">
-                <span v-html="t('categories[' + index + ']')"></span>
-              </router-link>  
-            </li>
-          </div>
+import IconPhone from '@martyrs/src/modules/icons/entities/IconPhone.vue';
+import IconEmail from '@martyrs/src/modules/icons/entities/IconEmail.vue';
+import IconAddress from '@martyrs/src/modules/icons/entities/IconAddress.vue';
+import IconTime from '@martyrs/src/modules/icons/entities/IconTime.vue';
 
-          <a href="https://ozdao.dev" target="_blank">
-            <img loading="lazy" src="/icons/ozdao.svg">
-          </a>
-        </ul>
-        
+import IconInfo from '@martyrs/src/modules/icons/navigation/IconInfo.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'
 
-        <ul class="lh-semi nav-footer col">
-          <li class="mn-b-small t-semi h5">
-            {{t('information')}}
-          </li>
-         
-        </ul>
-        
-        <ul class="lh-semi col">
-          <li class="mn-b-small t-semi h5">{{t('email')}}</li>
-          <div class="mn-b-medium">
-            <li>Phuket,</li>
-            <li>43 283 Soi Boathouse,</li>
-            <li>Rawai</li>
-          </div>
-          
-          
+import Logotype from '@martyrs/src/modules/icons/logos/Logotype.vue'
 
-        </ul>
 
-      </div> 
-   <li  v-for="(page,index) in pages">
+// Props
+const props = defineProps({
+  theme: {
+    type: String,
+    default: "light"
+  },
+  logotype: {
+    type: Object
+  }
+})
 
-            <router-link :to="{ name: 'Page', params: { url: page.url}}" class="col nav-link">
-               <span v-html="t('pages[' + index + ']')"></span>
-            </router-link>
-          </li>
+// State
+const router = useRouter()
+const route = useRoute()
+
+// Localization
+const text = {
+  locale: 'en',
+  messages: {
+    en: {
+      linkAppStore: 'https://play.google.com/store/apps/details?id=com.threestepsrental.app',
+      linkGooglePlay: 'https://play.google.com/store/apps/details?id=com.threestepsrental.app',
+      // Contact
+      description: "3SR – Premium Video Gear Rentals for Filmmakers and Content Creators",
+      contact: 'Contact',
+      phone: 'Phone / WhatsApp',
+      email: 'Email',
+      hours: 'Hours',
+      hours_text: 'Mon–Sun, 10:00–19:00',
+      app: 'Get Our App',
       
-      <p class="t-semi uppercase t-center">
-        {{ t('year') }} 
-        <span class="t-main copyleft">{{ t('heart') }}</span> 
-        {{ t('name') }}, {{ t('tagline') }} 
-        <a href="https://ozdao.dev" class="t-main" target="_blank" rel="noopener" >OZ DAO.</a>
-      </p>
-    </footer>
-  </template>
-
-  <script setup="props">
-    import { computed,onMounted, toRefs,ref } from 'vue'
-    import { useRouter, useRoute } from 'vue-router'
-    import { useI18n }    from 'vue-i18n'
-    
-    import * as categories from '@martyrs/src/modules/products/store/categories.js';
-
-    // Props
-    const props = defineProps({
-      theme: {
-        type: String,
-        default: "light"
-      }
-    });
-
-    const router = useRouter()
-    const route = useRoute()
+      // Subscribe
+      subscribe: 'Subscribe',
+      subscribe_text: 'Get updates on new equipment and special offers',
+      email_placeholder: 'Enter your email',
+      follow: 'Follow Us',
+      
+      // Footer
+      year: '2025 ',
+      heart: "❤",
+      copyright: 'Three Steps Studio Ltd. All Rights Reserved.',
+      ozdao: 'Builded in OZ DAO',
+      
+      // Contact info
+      phoneNumber: '+44 77 7878 4893',
+      emailAddress: "info{'@'}3stepsprod.com",
       
-    const text = {
-      locale: 'en',
-      messages: {
-        en: {
-          store: 'Online Store',
-          information: "Information",
-          description: "Weeder Delivery stocks a wide range of quality!",
-          app: 'Get Our App',
-          adress: 'Adress',
-          support: 'Get Online Support',
-          socials: 'Find Us in Socials',
-          email: 'Contact by email',
-          // request: 'hello@weeder.delivery',
-          time: "24 / 7 Seven days a week",
-          copyright: "2024 © Weeder Delivery. Proudly created with OZ DAO.",
-          pages: [],
-          categories: [],
-          year: "2024",
-          heart: "❤",
-          name: "Weeder",
-          tagline: "Builded with love in"
+      // Navigation columns
+      navigationColumns: [
+        {
+          sections: [
+            {
+              title: 'Equipment',
+              items: [
+                { 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: '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' }
+              ]
+            }
+          ]
         },
-        ru: {
-          store: 'Онлайн Каталог',
-          information: "Информация",
-          description: "Weeder Delivery предлагает широкий ассортимент качественных!",
-          app: 'Скачайте Наше Приложение',
-          adress: 'Адрес',
-          support: 'Онлайн Поддержка',
-          socials: 'Найдите Нас в Социальных Сетях',
-          email: 'Связаться по email',
-          // request: 'hello@weeder.delivery',
-          time: "24 / 7 без перерывов",
-          copyright: "2024 © Weeder Delivery. С гордостью создано OZ DAO.",
-          pages: [],
-          categories: []
+        {
+          sections: [
+            {
+              title: 'Company',
+              items: [
+                { 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: 'pages/privacy-policy' },
+                { name: 'Cookie Policy', url: 'pages/cookie-policy' },
+                { name: 'Terms of Use', url: 'pages/terms-of-use' },
+                { name: 'EULA', url: 'pages/eula' }
+              ]
+            }
+          ]
         }
-      }
-    };
+      ],
+      
+      // Social links
+      socialLinks: [
+        { 
+          name: 'IconInstagram',
+          url: 'https://www.instagram.com/3stepsprod'
+        },
+        { 
+          name: 'IconYoutube',
+          url: 'https://www.youtube.com/@threestepsproduction'
+        },
+        { 
+          name: 'IconWhatsapp',
+          url: 'https://api.whatsapp.com/send/?phone=447778784893&text&type=phone_number&app_absent=0'
+        }
+      ]
+    }
+  }
+}
+
+const { t, te, tm } = useI18n({
+  useScope: 'global',
+  messages: text.messages
+})
 
-    categories.state.all.forEach( category => {
-      category.localization.forEach( localization => {
-        text.messages[localization.locale].categories.push(localization.text)
-      })
-    })
+// Component mapping for social icons
+const iconComponents = {
+  IconInstagram,
+  IconFacebook,
+  IconLinkedin,
+  IconYoutube,
+  IconWhatsapp
+}
+</script>
 
-    onMounted(async() => {
+<template>
+  <footer 
+    class="
+      w-100
+      br-t br-solid
+    "
+    :class="{
+      't-black bg-white br-light': theme === 'light',
+      't-white bg-black br-dark': theme === 'dark'  
+    }"
+  >
+    <div class="pd-medium">
+      <!-- Top Section -->
+      <component
+        v-if="logotype"
+        :is="logotype"
+        @click="router.push({ path: '/' })" 
+        :theme="theme"
+        class="cursor-pointer h-3r mn-b-medium"
+      />
+
+      <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">
+          <p class="p-semi t-medium mn-b-semi">{{ t('description') }}</p>
+          
+          <div class="mn-b-semi 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"
+              :class="theme === 'light' ? 't-black' : 't-white'"
+            >
+              <IconPhone class="i-regular" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+              <span class="t-small">{{ t('phoneNumber') }}</span>
+            </a>
+            
+            <a 
+              :href="`mailto:${t('emailAddress')}`" 
+              class="flex mn-b-micro gap-micro flex-v-center transition-opacity hover-opacity-70"
+              :class="theme === 'light' ? 't-black' : 't-white'"
+            >
+              <IconEmail class="i-regular" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+              <span class="t-small">{{ t('emailAddress') }}</span>
+            </a>
+            
+            <div class="flex mn-b-micro gap-micro flex-v-center">
+              <IconTime class="i-regular" :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'" />
+              <span class="t-small">{{ t('hours_text') }}</span>
+            </div>
+          </div>
+
+          <h4 class="h5 t-medium mn-b-regular">{{ t('app') }}</h4>
+          <div class="w-100 flex-nowrap flex gap-thin">
+            <a 
+              v-if="te('linkAppStore') || te('label')"
+              :href="te('linkAppStore') ? t('linkAppStore') : null" 
+              :target="te('linkAppStore') ? '_blank' : null" 
+              class="pos-relative w-100 h-100"
+            > 
+              <span 
+                v-if="te('label')"
+                class="z-index-2 radius-medium bg-main t-medium uppercase pd-thin pos-absolute pos-r-10-negative pos-t-10-negative"
+              >
+                {{ t('label') }}
+              </span>
+              <LabelAppStore class="w-100 h-max" alt="Download on App Store"/>
+            </a>
+
+            <a 
+              v-if="te('linkGooglePlay') || te('label')"
+              :href="te('linkGooglePlay') ? t('linkGooglePlay') : null" 
+              :target="te('linkGooglePlay') ? '_blank' : null" 
+              class="pos-relative w-100 h-100"
+            > 
+              <span 
+                v-if="te('label')"
+                class="z-index-2 pd-thin radius-medium bg-main t-medium uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
+              >
+                {{ t('label') }}
+              </span>
+              <LabelGooglePlay class="w-100 h-max" alt="Download on Google Play"/>
+            </a>
+          </div>
+        </div>
 
-      await categories.actions.read()
+        <!-- Navigation Columns -->
+        <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>
 
-    })
+        <!-- Subscribe Block -->
+        <div class="col">
+          <h4 class="h5 t-medium mn-b-regular">{{ t('subscribe') }}</h4>
+          <p class="t-small mn-b-small t-transp">{{ t('subscribe_text') }}</p>
+          
+          <FieldSubscribeNewsletter
+            :action="false"
+            fieldName="footer-newsletter"
+            fieldId="footer-newsletter-email"
+            class="d-inline-flex mn-b-medium bg-light t-black w-100"
+          />
 
+          <h4 class="h5 t-medium mn-b-regular">{{ t('follow') }}</h4>
+          <!-- Social Links -->
+          <div class="flex gap-thin">
+            <a 
+              v-for="social in tm('socialLinks')"
+              :key="social.name"
+              :href="social.url" 
+              target="_blank"
+              class="
+                w-3r h-3r 
+                flex flex-center 
+                radius-small
+                bg-light 
+                transition-opacity
+                hover-opacity-70
+              "
+            >
+              <component
+                :is="iconComponents[social.name]"
+                class="i-semi"
+                :fill="theme === 'light' ? 'rgb(var(--black))' : 'rgb(var(--white))'"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
 
-    // state.pages.all.forEach( page => {
-    //   page.localization.forEach( localization => {
-    //     text.messages[localization.locale].pages.push(localization.text)
-    //   })
-    // })
+    <!-- Bottom Section -->
+    <div class="
+      pd-medium 
+      br-t 
+      br-solid
+      flex 
+      flex-justify-between 
+      flex-v-center
+      flex-nowrap
+      mobile:flex-column 
+      mobile:flex-align-start
+      mobile:gap-small
+    "
+    :class="{
+      'br-light': theme === 'light',
+      'br-dark': theme === 'dark'
+    }"
+    >
+      <!-- Copyright -->
+      <p class="t-small t-medium uppercase">
+        {{ t('year') }} 
+        <span class="t-main copyleft">{{ t('heart') }}</span> 
+        {{ t('copyright') }} 
+      </p>
 
-    const { t } = useI18n(text)
-    // const pages = computed(() => state.pages.all.filter(page => (page.groups.includes('all') || page.groups.includes('footer'))))
-  </script>
+      <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">
-  </style>
+<style lang="scss">
+.cols-3-footer {
+  grid-template-columns: 5fr 7fr 4fr;
+}
+</style>

package/src/modules/globals/views/components/partials/Header.vue

@@ -105,7 +105,7 @@
 		  :is="logotype"
 		  @click="router.push({ path: '/' })" 
 		  :theme="theme"
-		  class="cursor-pointer"
+		  class="cursor-pointer h-2r"
 		/>
 
 		<button

package/src/modules/icons/logos/Logotype.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg class="h-2r w-auto" width="270" height="300" viewBox="0 0 270 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="w-auto" width="270" height="300" viewBox="0 0 270 300" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0)">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M264.626 52.2791C265.531 57.2858 266 62.4066 266 67.6155C266 125.882 207.349 173.116 135 173.116C62.6507 173.116 4 125.882 4 67.6155C4 62.4066 4.46875 57.2858 5.37413 52.2791C11.0997 32.6306 21.1714 14.8341 34.4789 0C34.1621 2.17658 34 4.38345 34 6.61562C34 43.8948 79.2192 74.1156 135 74.1156C190.781 74.1156 236 43.8948 236 6.61562C236 4.38345 235.838 2.17659 235.521 5.29254e-06C248.829 14.8341 258.9 32.6306 264.626 52.2791Z" fill="#00FF88"/>
       <path d="M270 165C270 239.558 209.558 300 135 300C60.4416 300 0 239.558 0 165C0 90.4416 60.4416 30 135 30C209.558 30 270 90.4416 270 165Z" fill="#00FF88"/>