@ozdao/martyrs 0.2.508 → 0.2.509

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>

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