@ozdao/martyrs 0.2.508 → 0.2.510

package/src/modules/globals/views/components/partials/Footer.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({
@@ -41,8 +44,8 @@ const text = {
   locale: 'en',
   messages: {
     en: {
-      linkAppStore: '2',
-      linkGooglePlay: '1',
+      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',
@@ -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,36 +122,40 @@ 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
     "
@@ -157,8 +164,8 @@ const socialLinks = computed(() => tm('socialLinks'))
       '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,7 +174,7 @@ 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">
@@ -233,22 +240,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 +275,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 gap-thin">
             <a 
-              v-for="social in socialLinks"
+              v-for="social in tm('socialLinks')"
               :key="social.name"
               :href="social.url" 
               target="_blank"
@@ -282,7 +291,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 +299,43 @@ 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: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>
+
+      <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>

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/globals/views/components/sections/Filters.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="flex gap-thin">
+  <div class="flex t-nowrap  gap-thin">
     <!-- All Filters Button -->
     <button
       @click="showAllFilters = true"
-      class="pd-thin radius-medium bg-light flex-v-center flex gap-micro cursor-pointer"
+      class="pd-small radius-medium bg-light flex-v-center flex gap-micro cursor-pointer"
       :class="{ 'bg-main': activeFiltersCount > 0 }"
     >
-      <IconFilter class="i-small" />
+      <IconFilter class="i-medium" />
+      <span class="h-1r"></span>
       <span v-if="activeFiltersCount">{{ activeFiltersCount }}</span>
     </button>
 
@@ -15,10 +16,11 @@
       v-for="filter in filters"
       :key="filter.value"
       @click="openFilter(filter.value)"
-      class="pd-thin radius-medium bg-light cursor-pointer"
+      class="pd-small radius-medium bg-light cursor-pointer flex-v-center flex gap-micro"
       :class="{ 'selected bg-main': isFilterActive(filter) }"
     >
-      {{ filter.title }}
+      <IconCalendar v-if="filter.type === 'date'" class="i-medium" />
+      <span class="t-nowrap h-1r">{{ filter.title }}</span>
       <span v-if="getFilterValue(filter)" class="mn-l-micro">
         {{ formatFilterValue(filter) }}
       </span>
@@ -45,7 +47,7 @@
           :key="filter.value"
           class="mn-b-medium"
         >
-          <h4 class="mn-b-thin">{{ filter.title }}</h4>
+          <h4 class="mn-b-small">{{ filter.title }}</h4>
           
           <!-- Checkbox Filter -->
           <div v-if="filter.type === 'checkbox'">
@@ -82,13 +84,23 @@
               v-model:field="tempSelected[filter.value].min"
               :placeholder="filter.minPlaceholder || 'Min'"
               type="number"
-              class="w-50 bg-light radius-small"
+              class="w-50 bg-light pd-small radius-small"
             />
             <Field
               v-model:field="tempSelected[filter.value].max"
               :placeholder="filter.maxPlaceholder || 'Max'"
               type="number"
-              class="w-50 bg-light radius-small"
+              class="w-50 bg-light pd-small  radius-small"
+            />
+          </div>
+
+          <!-- Date Filter -->
+          <div v-else-if="filter.type === 'date'">
+            <Calendar
+              v-model:date="tempSelected[filter.value]"
+              :allowRange="true"
+              :disablePastDates="true"
+              class="bg-light  radius-small"
             />
           </div>
         </div>
@@ -156,16 +168,35 @@
           v-model:field="tempSelected[filter.value].min"
           :placeholder="filter.minPlaceholder || 'Min'"
           type="number"
-          class="w-50 bg-light radius-small"
+          class="w-50 bg-light pd-small radius-small"
         />
         <Field
           v-model:field="tempSelected[filter.value].max"
           :placeholder="filter.maxPlaceholder || 'Max'"
           type="number"
-          class="w-50 bg-light radius-small"
+          class="w-50 bg-light pd-small radius-small"
         />
       </div>
 
+      <!-- Date Filter -->
+      <div v-else-if="filter.type === 'date'">
+        <div 
+          @click="() => { tempDateRange = tempSelected[filter.value]; tempSelected[filter.value] = tempSelected[filter.value] || null; }"
+          class="pd-small radius-small bg-light cursor-pointer flex-v-center flex gap-micro"
+        >
+          <IconCalendar class="i-small" />
+          <span>{{ tempSelected[filter.value] ? `${formatDate(tempSelected[filter.value].start, { dayMonth: true, language: 'en' })} - ${formatDate(tempSelected[filter.value].end, { dayMonth: true, language: 'en' })}` : 'Select dates'}}</span>
+        </div>
+        <div class="mn-t-small">
+          <Calendar
+            v-model:date="tempSelected[filter.value]"
+            :allowRange="true"
+            :disablePastDates="true"
+            class="bg-light radius-small"
+          />
+        </div>
+      </div>
+
       <div class="flex gap-thin mn-t-medium">
         <button 
           @click="cancelFilter(filter.value)" 
@@ -187,11 +218,14 @@
 
 <script setup>
 import { ref, computed, reactive, watch } from 'vue'
+import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js'
 import Popup from '@martyrs/src/components/Popup/Popup.vue'
 import Checkbox from '@martyrs/src/components/Checkbox/Checkbox.vue'
 import Field from '@martyrs/src/components/Field/Field.vue'
+import Calendar from '@martyrs/src/components/Calendar/Calendar.vue'
 import IconFilter from '@martyrs/src/modules/icons/navigation/IconFilter.vue'
 import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue'
+import IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue'
 
 const filters = defineModel('filters', {
   type: Array,
@@ -205,10 +239,13 @@ const selected = defineModel('selected', {
 
 const emit = defineEmits(['select'])
 
+const { formatDate } = useGlobalMixins()
+
 // State
 const showAllFilters = ref(false)
 const individualPopups = reactive({})
 const tempSelected = reactive({})
+const tempDateRange = ref(null)
 
 // Initialize popups and temp values
 watch(filters, (newFilters) => {
@@ -217,9 +254,11 @@ watch(filters, (newFilters) => {
     
     if (!tempSelected[filter.value]) {
       if (filter.type === 'checkbox') {
-        tempSelected[filter.value] = selected.value[filter.value] || []
+        tempSelected[filter.value] = [...(selected.value[filter.value] || [])]
       } else if (filter.type === 'range') {
-        tempSelected[filter.value] = selected.value[filter.value] || { min: '', max: '' }
+        tempSelected[filter.value] = { ...(selected.value[filter.value] || { min: '', max: '' }) }
+      } else if (filter.type === 'date') {
+        tempSelected[filter.value] = selected.value[filter.value] || null
       } else {
         tempSelected[filter.value] = selected.value[filter.value] || null
       }
@@ -230,7 +269,16 @@ watch(filters, (newFilters) => {
 // Sync selected to tempSelected
 watch(selected, (newSelected) => {
   Object.keys(newSelected).forEach(key => {
-    tempSelected[key] = newSelected[key]
+    const filter = filters.value.find(f => f.value === key)
+    if (filter) {
+      if (filter.type === 'checkbox') {
+        tempSelected[key] = [...(newSelected[key] || [])]
+      } else if (filter.type === 'range') {
+        tempSelected[key] = { ...(newSelected[key] || { min: '', max: '' }) }
+      } else {
+        tempSelected[key] = newSelected[key]
+      }
+    }
   })
 }, { deep: true })
 
@@ -275,6 +323,11 @@ const formatFilterValue = (filter) => {
     return `${value.min || '0'}-${value.max || '∞'}`
   }
   
+  if (filter.type === 'date') {
+    if (!value || !value.start || !value.end) return ''
+    return `${formatDate(value.start, { dayMonth: true, language: 'en' })} - ${formatDate(value.end, { dayMonth: true, language: 'en' })}`
+  }
+  
   if (filter.type === 'radio') {
     const option = filter.options.find(o => o.value === value)
     return option ? `(${option.label})` : ''
@@ -293,9 +346,11 @@ const cancelFilter = (filterValue) => {
   const filter = filters.value.find(f => f.value === filterValue)
   if (filter) {
     if (filter.type === 'checkbox') {
-      tempSelected[filterValue] = selected.value[filterValue] || []
+      tempSelected[filterValue] = [...(selected.value[filterValue] || [])]
     } else if (filter.type === 'range') {
-      tempSelected[filterValue] = selected.value[filterValue] || { min: '', max: '' }
+      tempSelected[filterValue] = { ...(selected.value[filterValue] || { min: '', max: '' }) }
+    } else if (filter.type === 'date') {
+      tempSelected[filterValue] = selected.value[filterValue] || null
     } else {
       tempSelected[filterValue] = selected.value[filterValue] || null
     }
@@ -321,6 +376,9 @@ const resetFilters = () => {
     } else if (filter.type === 'range') {
       tempSelected[filter.value] = { min: '', max: '' }
       selected.value[filter.value] = { min: '', max: '' }
+    } else if (filter.type === 'date') {
+      tempSelected[filter.value] = null
+      selected.value[filter.value] = null
     } else {
       tempSelected[filter.value] = null
       selected.value[filter.value] = null

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"/>