@ozdao/martyrs 0.2.508 → 0.2.510

package/dist/style.css

@@ -63,19 +63,22 @@
 .background-div {
   flex-grow: 1;
 }
-input[data-v-985f0e53],
-textarea[data-v-985f0e53],
-span[data-v-985f0e53] {
+input[data-v-36998019],
+textarea[data-v-36998019],
+span[data-v-36998019] {
   color: inherit;
   line-height: 1;
 }
-textarea[data-v-985f0e53] {
+textarea[data-v-36998019] {
   resize: none;
   overflow: hidden; 
   height: 1rem;
 }
-input[type="date"][data-v-985f0e53]::-webkit-calendar-picker-indicator,
-input[type="time"][data-v-985f0e53]::-webkit-calendar-picker-indicator {
+input[data-v-36998019] {
+  height: 1rem;
+}
+input[type="date"][data-v-36998019]::-webkit-calendar-picker-indicator,
+input[type="time"][data-v-36998019]::-webkit-calendar-picker-indicator {
   filter: invert(1);
   opacity: 1;
   color: inherit;
@@ -779,7 +782,11 @@ button[data-v-2ba40647]:disabled {
   overflow: hidden;
   transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.filters-content[data-v-e07dca8a] {
+.icon-custom { 
+  background: white;
+}
+
+.filters-content[data-v-e749b035] {
   max-height: 60vh;
   overflow-y: auto;
 }
@@ -798,10 +805,6 @@ button[data-v-2ba40647]:disabled {
   position: absolute;
 }
 
-.icon-custom { 
-  background: white;
-}
-
 .t-trimmed {
 		font-size: 0;
 }
@@ -1123,12 +1126,12 @@ div.vue-tags-input.disabled * {
     font-size: .85em;
 }
 
-.fade-enter-active[data-v-fe817eef],
-.fade-leave-active[data-v-fe817eef] {
+.fade-enter-active[data-v-c1b1de8c],
+.fade-leave-active[data-v-c1b1de8c] {
   transition: opacity 0.3s ease;
 }
-.fade-enter-from[data-v-fe817eef],
-.fade-leave-to[data-v-fe817eef] {
+.fade-enter-from[data-v-c1b1de8c],
+.fade-leave-to[data-v-c1b1de8c] {
   opacity: 0;
 }
 .slider-hotpost :deep(.carousel__slide) {
@@ -1546,19 +1549,34 @@ to {
 [data-v-6db7716d]::-webkit-scrollbar-thumb:hover {
   background-color: var(--grey-small);
 }
-.cols-4-footer[data-v-37ca2fe7] {
-  grid-template-columns: 5fr 3fr 3fr 4fr;
+.eye[data-v-4241147a] {
+  animation: rotateEye-4241147a 10s linear infinite;
+  transform-origin: center 55%;
 }
-footer[data-v-37ca2fe7] {
-  transition: background-color 0.3s ease, color 0.3s ease;
+.mouth[data-v-4241147a] {
+  animation: rotateMouth-4241147a 20s ease-in-out infinite;
+  transform-origin: center 55%;
 }
-footer a[data-v-37ca2fe7] {
-  text-decoration: none;
+@keyframes rotateEye-4241147a {
+from {
+    transform: rotate(0deg);
 }
-footer ul[data-v-37ca2fe7] {
-  list-style: none;
-  padding: 0;
-  margin: 0;
+to {
+    transform: rotate(360deg);
+}
+}
+@keyframes rotateMouth-4241147a {
+0% {
+    transform: rotate(0deg);
+}
+50% {
+    transform: rotate(180deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}.cols-3-footer {
+  grid-template-columns: 5fr 7fr 4fr;
 }
 fieldset[disabled] .multiselect {
   pointer-events: none;
@@ -2008,33 +2026,7 @@ to {
   opacity: 0;
   transform: scale(0.9);
 }
-.eye[data-v-8ec01df7] {
-  animation: rotateEye-8ec01df7 10s linear infinite;
-  transform-origin: center 55%;
-}
-.mouth[data-v-8ec01df7] {
-  animation: rotateMouth-8ec01df7 20s ease-in-out infinite;
-  transform-origin: center 55%;
-}
-@keyframes rotateEye-8ec01df7 {
-from {
-    transform: rotate(0deg);
-}
-to {
-    transform: rotate(360deg);
-}
-}
-@keyframes rotateMouth-8ec01df7 {
-0% {
-    transform: rotate(0deg);
-}
-50% {
-    transform: rotate(180deg);
-}
-100% {
-    transform: rotate(360deg);
-}
-}
+
 .h-60[data-v-c38b132b] {
   height: 60%;
 }

package/dist/{web-BXajFCU2.js → web-C5cmb1FH.js}

@@ -1,4 +1,4 @@
-import { W as p } from "./main-Dq-UfO4G.js";
+import { W as p } from "./main-DrpgUZcn.js";
 class f extends p {
   constructor() {
     super(...arguments), this.group = "CapacitorStorage";

package/dist/{web-DaBwwCQ5.cjs → web-d40xcY_Y.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./main-AWSb_d2P.cjs");class p extends c.WebPlugin{constructor(){super(...arguments),this.group="CapacitorStorage"}async configure({group:e}){typeof e=="string"&&(this.group=e)}async get(e){return{value:this.impl.getItem(this.applyPrefix(e.key))}}async set(e){this.impl.setItem(this.applyPrefix(e.key),e.value)}async remove(e){this.impl.removeItem(this.applyPrefix(e.key))}async keys(){return{keys:this.rawKeys().map(t=>t.substring(this.prefix.length))}}async clear(){for(const e of this.rawKeys())this.impl.removeItem(e)}async migrate(){var e;const t=[],s=[],n="_cap_",o=Object.keys(this.impl).filter(i=>i.indexOf(n)===0);for(const i of o){const r=i.substring(n.length),a=(e=this.impl.getItem(i))!==null&&e!==void 0?e:"",{value:l}=await this.get({key:r});typeof l=="string"?s.push(r):(await this.set({key:r,value:a}),t.push(r))}return{migrated:t,existing:s}}async removeOld(){const e="_cap_",t=Object.keys(this.impl).filter(s=>s.indexOf(e)===0);for(const s of t)this.impl.removeItem(s)}get impl(){return window.localStorage}get prefix(){return this.group==="NativeStorage"?"":`${this.group}.`}rawKeys(){return Object.keys(this.impl).filter(e=>e.indexOf(this.prefix)===0)}applyPrefix(e){return this.prefix+e}}exports.PreferencesWeb=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./main-XJQJFmgj.cjs");class p extends c.WebPlugin{constructor(){super(...arguments),this.group="CapacitorStorage"}async configure({group:e}){typeof e=="string"&&(this.group=e)}async get(e){return{value:this.impl.getItem(this.applyPrefix(e.key))}}async set(e){this.impl.setItem(this.applyPrefix(e.key),e.value)}async remove(e){this.impl.removeItem(this.applyPrefix(e.key))}async keys(){return{keys:this.rawKeys().map(t=>t.substring(this.prefix.length))}}async clear(){for(const e of this.rawKeys())this.impl.removeItem(e)}async migrate(){var e;const t=[],s=[],n="_cap_",o=Object.keys(this.impl).filter(i=>i.indexOf(n)===0);for(const i of o){const r=i.substring(n.length),a=(e=this.impl.getItem(i))!==null&&e!==void 0?e:"",{value:l}=await this.get({key:r});typeof l=="string"?s.push(r):(await this.set({key:r,value:a}),t.push(r))}return{migrated:t,existing:s}}async removeOld(){const e="_cap_",t=Object.keys(this.impl).filter(s=>s.indexOf(e)===0);for(const s of t)this.impl.removeItem(s)}get impl(){return window.localStorage}get prefix(){return this.group==="NativeStorage"?"":`${this.group}.`}rawKeys(){return Object.keys(this.impl).filter(e=>e.indexOf(this.prefix)===0)}applyPrefix(e){return this.prefix+e}}exports.PreferencesWeb=p;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.508",
+  "version": "0.2.510",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/components/Checkbox/Checkbox.vue

@@ -53,7 +53,7 @@
       :checked="Array.isArray(radio) ? radio.includes(value) : radio"
     > 
     <div 
-      class="cursor-pointer mn-l-thin flex-center"
+      class="cursor-pointer mn-l-thin flex-center field-wrapper"
       :class="{
         'transition-elastic pd-thin h-2r w-4r radius-extra': mode === 'switch',
         'w-2r h-2r radius-small': mode === 'checkbox',

package/src/components/Feed/Carousel.vue

@@ -6,7 +6,7 @@
     </div>
     <!-- Empty State -->
     <EmptyState
-      v-if="!isLoading && !entities.length < 1"
+      v-else-if="entities.length < 1"
       :title="states.empty.title"
       :description="states.empty.description"
       :action="states.empty.action"
@@ -65,9 +65,11 @@ const { t } = useI18n({
 onMounted(async() => {
   try {
     entities.value = await props.store.read(props.options)
+    isLoading.value = false
   } catch (error) {
     console.error('Error loading entities:', error)
     entities.value = []
+    isLoading.value = false
   } finally {
     isLoading.value = false
   }

package/src/components/Feed/Feed.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="search || date || (sort && !sort.hideButton)" style="transform: scale(1);" class="mn-b-thin pos-relative flex-nowrap flex gap-thin">
+  <div v-if="search || date || (sort && !sort.hideButton)" style="transform: scale(1);" class="mn-b-thin pos-relative z-index-2 pos-relative flex-nowrap flex gap-thin">
 
     <BlockSearch 
       v-if="search"

package/src/components/Field/Field.vue

@@ -150,6 +150,11 @@ textarea {
   overflow: hidden; 
   height: 1rem;
 }
+
+input {
+  height: 1rem;
+}
+
 input[type="date"]::-webkit-calendar-picker-indicator,
 input[type="time"]::-webkit-calendar-picker-indicator {
   filter: invert(1);

package/src/components/FieldBig/FieldBig.vue

@@ -9,7 +9,7 @@
     :name="fieldName"
     :id="fieldId"
     :validation="validation"
-    class="pd-l-medium radius-extra flex-nowrap flex  w-100 p-medium t-regular uppercase pd-thin"
+    class="radius-medium flex-nowrap flex  w-100 p-medium t-regular uppercase pd-thin"
   >
     <slot></slot>
     <Button
@@ -18,7 +18,7 @@
       :showLoader="showLoader"
       :callback="callback"
       :callbackDelay="callbackDelay"
-      class="t-nowrap t-medium radius-big uppercase cursor-pointer flex flex-v-center pd-thin w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main"
+      class="t-nowrap t-medium radius-small uppercase cursor-pointer flex flex-v-center pd-thin w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main"
     >
       <span v-if="action" class="desktop-only mn-r-thin">{{action}}</span>
       <IconArrow class="i-medium"/>

package/src/modules/auth/views/components/pages/ProfileEdit.vue

@@ -1,15 +1,7 @@
 <template>
   <Popup 
-    :isPopupOpen="true" 
-    @close-popup="router.push({ 
-      name: 'User Profile', 
-      params: { 
-        _id: auth.state.user._id 
-      },
-      query: { 
-        afterAuth: 'true' 
-      }
-    })"
+    :isPopupOpen="isOpen" 
+    @close-popup="closeProfileEdit()"
     title="Edit Profile"
     align="center center"
     class="w-m-50r h-40r mobile:h-100 h-m-40r bg-white mobile:radius-zero radius-medium pd-medium"
@@ -42,8 +34,23 @@
   
   const loading = ref(true)
   const userData = ref(null)
+  const isOpen = ref(false)
+
+  function closeProfileEdit () {
+    isOpen.value = false
+    router.push({ 
+      name: 'User Profile', 
+      params: { 
+        _id: auth.state.user._id 
+      },
+      query: { 
+        afterAuth: 'true' 
+      }
+    })
+  }
   
   onMounted(async () => {
+    isOpen.value = true
     try {
       const userId = route.params._id || auth.state.user._id
       await users.actions.read({ _id: userId, user: auth.state.user._id })

package/src/modules/globals/views/components/layouts/Client.vue

@@ -143,6 +143,7 @@
 					      		class="w-100 h-min-100"
 				      		 	@page-loading="handlePageLoading"
 			              @page-loaded="handlePageLoaded"
+			              :key="componentKey"
 					      	/>
 					      	<!-- Key пока выключил непонятно какие проблемы это вызовет -->
 					      	<!-- :key="route.path"  -->
@@ -193,7 +194,7 @@
 
 
 <script setup>
-	import { computed, ref, onMounted, watch  } from 'vue';
+	import { computed, ref, onMounted  } from 'vue';
 	// Router
 	import { useRoute } from 'vue-router';
 	// Store
@@ -330,6 +331,16 @@
 
 		if (page.value) show.value = true
 	});
+
+	const componentKey = computed(() => {
+	  // Собираем только значимые параметры (ID сущностей)
+	  const significantParams = ['_id', 'product', 'organization', 'categoryPath']
+	    .map(param => route.params[param])
+	    .filter(Boolean)
+	    .join('-');
+	  
+	  return significantParams || route.name;
+	});
 </script>
 
 <style lang="scss">

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

@@ -0,0 +1,338 @@
+<script setup="props">
+import { computed, ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+// Martyrs Components
+import FieldSubscribeNewsletter from '@martyrs/src/modules/orders/components/elements/FieldSubscribeNewsletter.vue'
+
+import LabelGooglePlay from '@martyrs/src/modules/icons/labels/LabelGooglePlay.vue';
+import LabelAppStore from '@martyrs/src/modules/icons/labels/LabelAppStore.vue';
+
+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';
+
+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'
+
+import Logotype from '@martyrs/src/modules/icons/logos/Logotype.vue'
+
+
+// Props
+const props = defineProps({
+  theme: {
+    type: String,
+    default: "light"
+  },
+  logotype: {
+    type: Object
+  }
+})
+
+// State
+const router = useRouter()
+const route = useRoute()
+
+// Localization
+const text = {
+  locale: 'en',
+  messages: {
+    en: {
+      linkAppStore: '2',
+      linkGooglePlay: '1',
+      // 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',
+      
+      // 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",
+      
+      // 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' }
+              ]
+            }
+          ]
+        },
+        {
+          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
+})
+
+// Component mapping for social icons
+const iconComponents = {
+  IconInstagram,
+  IconFacebook,
+  IconLinkedin,
+  IconYoutube,
+  IconWhatsapp
+}
+</script>
+
+<template>
+  <footer 
+    class="
+      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'  
+    }"
+  >
+    <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="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 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"
+              :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>
+
+        <!-- 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 mobile:flex-h-center 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>
+
+    <!-- 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">
+.cols-3-footer {
+  grid-template-columns: 5fr 7fr 4fr;
+}
+</style>