Merge pull request #443 from zirreal/master

altruist page updates

src/assets/style/layouts.css

@@ -137,6 +137,10 @@
 	max-width: calc(1500px  + (var(--space) * 4));
 }
 
+.layout--text-center {
+	text-align: center;
+}
+
 .page hr.animate {
 	transform-origin: 50% 50%;
 	transform: scaleX(0);

src/assets/style/utils.css

@@ -51,25 +51,58 @@
   grid-template-columns: repeat(2,1fr);
 }
 
+*[class*='grid-'].grid-valign-top {
+    align-items: start;
+  }
+
+.grid { display: grid; }
+
+.grid-with-scroll {
+  max-height: calc((550px * 2) + (var(--space) * 2) ); 
+  padding: 0 42px;
+  overflow-y: auto; 
+}
+
+.grid-with-scroll::-webkit-scrollbar {
+  width: 8px; /* Set width of the scrollbar */
+}
+
+.grid-with-scroll::-webkit-scrollbar-track {
+  background: #fff; /* Track background */
+  border: 1px solid #000;
+}
+
+.grid-with-scroll::-webkit-scrollbar-thumb {
+  background: #000000; /* Scrollbar thumb color */
+}
+
+.grid-with-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--color-blue); /* Scrollbar thumb hover color */
+}
+
+.grid-with-scroll::-webkit-scrollbar-button {
+  background: transparent; /* Optional: make buttons invisible if you want */
+}
+
 @media screen and (max-width:880px){
   .grid-5 { grid-template-columns: 1fr; }
 }
 
 @media screen and (max-width:990px){
   .grid-4 { grid-template-columns: repeat(2,1fr); }
   .grid-3 { grid-template-columns: 1fr; }
+  .grid-with-scroll {
+    padding: 0;
+    max-height: unset;
+    overflow: unset;
+  }
 }
 
 @media screen and (max-width:570px){
   .grid-4 { grid-template-columns: 1fr; }
   .grid-2 { grid-template-columns: 1fr; }
 }
 
-*[class*='grid-'].grid-valign-top {
-    align-items: start;
-  }
-
-.grid { display: grid; }
 
 .youtube-embed {
   margin-bottom: var(--space);
@@ -276,4 +309,10 @@ li.space-b-05 {
   overflow: hidden;
   text-indent: -9999px;
   z-index: 1000;
+}
+
+.italic-text {
+  font-size: calc(var(--base-font-size) * 0.75);
+  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 26, 'XTRA' 468, 'XOPQ' 96, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712,  'slnt' -10;
+  letter-spacing: 1px;
 }

src/components/blocks/DevicesBuySection.vue

@@ -17,13 +17,29 @@
                     </div>
                     <div>
                         <ul>
-                            <li>{{$t('Open-Source Hardware & Software')}}</li>
-                            <li>{{$t('Independent Decentralized Network Technologies')}}</li>
-                            <li>{{$t('Colorful 3D-Printed Cases of Your Choice')}}</li>
+                            <li class="italic-text">{{$t('Open-Source Hardware & Software')}}</li>
+                            <li class="italic-text">{{$t('Independent Decentralized Network Technologies')}}</li>
+                            <li class="italic-text">{{$t('Colorful 3D-Printed Cases of Your Choice')}}</li>
                         </ul>
                     </div>
                 </section>
-                <rb-button block to="https://shop.pinout.cloud/altruist">{{$t('Order Now')}}</rb-button>
+                <div class="product-buy__container" :class="{'oldy': showOrder}">
+                    <rb-button buttoncolor="black" block @click="showOrder = !showOrder">{{$t('Order Now')}}</rb-button>
+                    <div :class="{'active': showOrder}">
+                        <p class="italic-text">📦 {{$t('Choose your preferred shipping location for faster delivery!')}}</p>
+                        <ul>
+                            <li>
+                                <g-link class="italic-text" to="https://shop.pinout.cloud/altruist">🇪🇺 {{ $t('Order from the EU') }}</g-link>
+                            </li>
+                            <li>
+                                <g-link class="italic-text" to="https://shop.akagi.dev/products/outdoor-sensor-altruist-dev-kit">🇯🇵 {{$t('Order from Japan')}}</g-link>
+                            </li>
+                            <li>
+                                <g-link class="italic-text" to="https://shop.multi-agent.io/">🇷🇺 {{$t('Order from Russia')}}</g-link>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
             </section>
         </template>
         <template v-else>
@@ -75,6 +91,7 @@
                 status: 'init',
                 tags: ['devices'],
                 message: '',
+                showOrder: false
             }
         },
 
@@ -116,6 +133,18 @@
                     this.status = 'error';
                 }
             }
+        },
+
+        mounted() {
+            // Close nav on body click
+            window.document.addEventListener('click', (e) => {
+                const productBuy = document.querySelector('.product-buy__container');
+                let clickInside = productBuy.contains(e.target)
+
+                if(!clickInside && productBuy.classList.contains('oldy')) {
+                    this.showOrder = false;
+                }
+            })
         }
     }
 </script>
@@ -162,6 +191,7 @@
     }
 
     .product-available {
+        position: relative;
         align-self: start;
     }
 
@@ -177,4 +207,58 @@
     .lined li {
         margin-bottom: calc(var(--space)/2);
     }
+
+    .product-available .italic-text {
+        text-transform: uppercase;
+    }
+
+    .product-available ul {
+        list-style: none;
+        margin-left: 0;
+    }
+
+    .product-available li:not(:last-child) {
+        margin-bottom: calc(var(--space) * 0.3);
+    }
+
+    .product-buy__container.oldy {
+        position: absolute;
+        right: 0;
+        text-align: center;
+    }
+
+    .product-buy__container.oldy button {
+        margin-bottom: var(--space);
+    }
+
+    .product-buy__container.oldy a {
+        padding-right: 60px;
+        background-image: url("data:image/svg+xml,%3Csvg width='44' height='16' viewBox='0 0 44 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M43.7071 8.70711C44.0976 8.31658 44.0976 7.68342 43.7071 7.29289L37.3431 0.928932C36.9526 0.538408 36.3195 0.538408 35.9289 0.928932C35.5384 1.31946 35.5384 1.95262 35.9289 2.34315L41.5858 8L35.9289 13.6569C35.5384 14.0474 35.5384 14.6805 35.9289 15.0711C36.3195 15.4616 36.9526 15.4616 37.3431 15.0711L43.7071 8.70711ZM0 9H43V7H0V9Z' fill='%232949D3'/%3E%3C/svg%3E%0A");
+        background-position: right;
+        background-repeat: no-repeat;
+        font-variation-settings: 'wght' 800, 'wdth' 100, 'opsz' 26, 'XTRA' 468, 'XOPQ' 96, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712,  'slnt' -10;
+    }
+
+    .product-buy__container div {
+        position: relative;
+        height: 0;
+        transform: translateY(30px);
+        opacity: 0;
+        visibility: hidden;
+        background-color: transparent;
+        transition: transform 0.5s ease-in-out, height 0.33s ease-in, background-color 0.5s ease;
+    }
+
+    .product-buy__container div.active {
+        height: unset;
+        transform: translateY(0);
+        opacity: 1;
+        visibility: visible;
+        background-color: var(--color-light);
+    }
+
+    .product-buy__container div p {
+        margin-bottom: calc( var(--space) * 0.7);
+    }
+
 </style>

src/components/blocks/RentHumanoidSection.vue

@@ -4,7 +4,7 @@
 
      <section>
         <h2 class="title">{{ $t('Rent in California, USA') }}</h2>
-        <span class="availability block">{{ $t('Available by the Hour, Day, or Week') }}</span>
+        <span class="availability block italic-text">{{ $t('Available by the Hour, Day, or Week') }}</span>
 
          <gsp-form :gscriptID="gscript" :siteKey="siteKey" @gsp-beforesubmit="beforeSubmit" @gsp-onsubmit="onSubmit" @gsp-oncaptchanotverified="captchaError">
           <div class="price">
@@ -222,9 +222,6 @@
  }
 
  .availability {
-  font-size: calc(var(--base-font-size) * 0.75);
-  font-variation-settings: 'wght' 500, 'wdth' 100, 'opsz' 26, 'XTRA' 468, 'XOPQ' 96, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 712,  'slnt' -10;
-  letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: var(--space);
  }

src/components/header/Header.vue

@@ -143,6 +143,10 @@ export default {
 
   @media screen and (max-width: 425px) {
 
+    .header-side {
+      align-items: center;
+   }
+
     .header-logo {
       margin-right: calc(var(--space) * 1.2);
     }

src/pages/devices/altruist.vue

@@ -17,6 +17,28 @@
       <p>{{$t('Experience the power of true DePIN (Decentralized Physical Infrastructure Network) — a revolutionary technological movement brought to life and thriving for years on our')}} <g-link aria-label="go to decentralized sensor map" to="https://sensors.social/">{{$t('decentralized sensor map')}}</g-link>.</p>
     </article>
 
+    <h2 class="layout title-lined"><span>{{ $t('In its natural habitat') }}</span></h2>
+
+    <article class="layout layout--text-center space-b-2">
+      <div class="grid-3 space-b-2 grid-with-scroll">
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo-6.webp"/>
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo.webp"/>
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo-2.webp"/>
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo-3.webp"/>
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo-4.webp"/>
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/hardware-2025/altruist-photo-5.webp"/>
+      </div>
+
+      <div class="twitter-share oldy">
+        <g-image alt="altruist photo" quality="75" aria-hidden="true" src="~/assets/images/twitter.webp"/>
+        <div>
+          <h2>📸 {{ $t('Share Your “Altruist” in Action') }}</h2>
+          <p class="text-center"><b>{{$t('Tag')}} <g-link to="https://x.com/RobonomicsHW">@RobonomicsHW</g-link> {{$t('(Robonomics Hardware) in your post with a photo.')}}</b></p>
+        </div>
+      </div>
+    </article>
+
+
     <h2 class="layout title-lined"><span>{{ $t('3 highlights for you') }}</span></h2>
 
     <article class="layout space-b-2">
@@ -190,9 +212,48 @@ export default {
     display: none;
   }
 
+  .twitter-share {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space);
+  }
+
+  .twitter-share img {
+    width: 70px;
+    height: 70px;
+  }
+
+  .twitter-share h2 {
+    margin: 0;
+    text-align: left;
+  }
+
+  .twitter-share p {
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  .twitter-share p b {
+    font-variation-settings: var(--font-flex-bold);
+  }
+
   @media screen and (width < 600px) {
     .model-gorizontal { display: block; }
     .model-vertical { display: none; }
+
+
+  }
+
+  @media screen and (max-width: 560px)  {
+    .twitter-share h2 {
+      font-size: calc(var(--space) * 0.8)
+    }
+  }
+
+  @media screen and (max-width: 460px)  {
+    .twitter-share h2 {
+      font-size: calc(var(--space)  * 1.1)
+    }
   }
 
   .text-big {

translations/Arabic.json

@@ -1135,5 +1135,13 @@
   "Order Now": "اطلب الآن",
   "Altruist": "المتفاني",
   "3 highlights for you": "3 أضواء لك",
-  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "جدراننا الخاصة للاحتفال بإطلاق جهاز الاستشعار الخارجي 'المتفاني'"
+  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "جدراننا الخاصة للاحتفال بإطلاق جهاز الاستشعار الخارجي 'المتفاني'",
+  "Choose your preferred shipping location for faster delivery!": "اختر موقع الشحن المفضل لديك لتوصيل أسرع!",
+  "Order from the EU": "اطلب من الاتحاد الأوروبي",
+  "Order from Japan": "اطلب من اليابان",
+  "Order from Russia": "اطلب من روسيا",
+  "In its natural habitat": "في بيئته الطبيعية",
+  "Share Your “Altruist” in Action": "شارك “المتعطش للخير” الخاص بك في العمل",
+  "Tag": "وسم",
+  "(Robonomics Hardware) in your post with a photo.": "(Robonomics Hardware) في منشورك مع صورة."
 }

translations/Chinese.json

@@ -1135,5 +1135,13 @@
   "Order Now": "立即下单",
   "Altruist": "利他主义者",
   "3 highlights for you": "为您准备的3个亮点",
-  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "我们特别设计的壁纸，以纪念户外传感器“Altruist”的推出"
+  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "我们特别设计的壁纸，以纪念户外传感器“Altruist”的推出",
+  "Choose your preferred shipping location for faster delivery!": "选择您偏好的送货地点以获得更快的交付！",
+  "Order from the EU": "从欧盟订购",
+  "Order from Japan": "从日本订购",
+  "Order from Russia": "从俄罗斯订购",
+  "In its natural habitat": "在其自然栖息地",
+  "Tag": "标签",
+  "(Robonomics Hardware) in your post with a photo.": "在您的帖子中附上（Robonomics硬件）的照片。",
+  "Share Your “Altruist” in Action": "分享您“利他主义者”行动中的故事"
 }

translations/Dutch.json

@@ -1135,5 +1135,13 @@
   "Order Now": "Bestel nu",
   "Altruist": "Altruïst",
   "3 highlights for you": "3 hoogtepunten voor jou",
-  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "Onze speciale wallpapers ter herdenking van de lancering van de Outdoor sensor 'Altruist'"
+  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "Onze speciale wallpapers ter herdenking van de lancering van de Outdoor sensor 'Altruist'",
+  "Choose your preferred shipping location for faster delivery!": "Kies uw voorkeursverzendlocatie voor snellere levering!",
+  "Order from the EU": "Bestel uit de EU",
+  "Order from Japan": "Bestel uit Japan",
+  "Order from Russia": "Bestel uit Rusland",
+  "In its natural habitat": "In zijn natuurlijke habitat",
+  "Tag": "Tag",
+  "(Robonomics Hardware) in your post with a photo.": "(Robonomics Hardware) in uw bericht met een foto.",
+  "Share Your “Altruist” in Action": "Deel uw 'Altruïst' in actie"
 }

translations/French.json

@@ -1135,5 +1135,13 @@
   "Order Now": "Commandez maintenant",
   "Altruist": "Altruiste",
   "3 highlights for you": "3 points forts pour vous",
-  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "Nos papiers peints spéciaux pour commémorer le lancement du capteur extérieur “Altruist“"
+  "Our special wallpapers to commemorate the launch of the Outdoor sensor “Altruist“": "Nos papiers peints spéciaux pour commémorer le lancement du capteur extérieur “Altruist“",
+  "Choose your preferred shipping location for faster delivery!": "Choisissez votre lieu de livraison préféré pour une livraison plus rapide!",
+  "Order from the EU": "Commandez depuis l'UE",
+  "Order from Japan": "Commandez depuis le Japon",
+  "Order from Russia": "Commandez depuis la Russie",
+  "In its natural habitat": "Dans son habitat naturel",
+  "Share Your “Altruist” in Action": "Partagez votre “Altruiste” en action",
+  "Tag": "Tag",
+  "(Robonomics Hardware) in your post with a photo.": "(Matériel Robonomics) dans votre publication avec une photo."
 }