From c69ab84773344d5e48bd5f92d29b760f58f44a29 Mon Sep 17 00:00:00 2001
From: monster1935 <monster.1935.li@gmail.com>
Date: Mon, 2 Sep 2024 15:08:23 +0800
Subject: [PATCH 1/2] feat: update the subtitle

---
 assets/new-img/decentralized.svg | 10 ++++
 assets/new-img/private.svg       |  6 ++
 assets/new-img/secure.svg        |  5 ++
 assets/new-img/versatile.svg     | 12 ++++
 components/new-subject.vue       | 99 ++++++++++++++++++++++++++++----
 5 files changed, 120 insertions(+), 12 deletions(-)
 create mode 100644 assets/new-img/decentralized.svg
 create mode 100644 assets/new-img/private.svg
 create mode 100644 assets/new-img/secure.svg
 create mode 100644 assets/new-img/versatile.svg

diff --git a/assets/new-img/decentralized.svg b/assets/new-img/decentralized.svg
new file mode 100644
index 0000000..76cd415
--- /dev/null
+++ b/assets/new-img/decentralized.svg
@@ -0,0 +1,10 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="30" height="30" rx="14.4" fill="#12FE74"/>
+<circle cx="15.5" cy="16" r="3" stroke="black" stroke-linejoin="round"/>
+<circle cx="15.5" cy="8" r="2" stroke="black" stroke-linejoin="round"/>
+<circle cx="9" cy="22" r="2" stroke="black" stroke-linejoin="round"/>
+<circle cx="22" cy="22" r="2" stroke="black" stroke-linejoin="round"/>
+<path d="M15.5 13V10" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.0608 20.5608L17.9395 18.4395" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.9392 20.5608L13.0605 18.4395" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/private.svg b/assets/new-img/private.svg
new file mode 100644
index 0000000..c92b6e3
--- /dev/null
+++ b/assets/new-img/private.svg
@@ -0,0 +1,6 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="30" height="30" rx="14.4" fill="#12FE74"/>
+<circle cx="15.5" cy="10" r="5" stroke="black" stroke-linejoin="round"/>
+<path d="M6.5 22C6.5 19.7909 8.29086 18 10.5 18H20.5C22.7091 18 24.5 19.7909 24.5 22V23C24.5 24.1046 23.6046 25 22.5 25H8.5C7.39543 25 6.5 24.1046 6.5 23V22Z" stroke="black" stroke-linejoin="round"/>
+<path d="M14.5715 20.6788L13.5 18H17.5L16.4285 20.6788C16.0932 21.517 14.9068 21.517 14.5715 20.6788Z" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/secure.svg b/assets/new-img/secure.svg
new file mode 100644
index 0000000..8cdace4
--- /dev/null
+++ b/assets/new-img/secure.svg
@@ -0,0 +1,5 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="30" height="30" rx="14.4" fill="#12FE74"/>
+<path d="M6.5 8.5L15.5 5L24.5 8.5L24.3272 13.1648C24.1297 18.4968 20.6943 23.1667 15.6628 24.9425L15.5 25L15.3372 24.9425C10.3057 23.1667 6.87025 18.4968 6.67277 13.1648L6.5 8.5Z" stroke="black" stroke-linejoin="round"/>
+<path d="M10 15.5L13.5 19L21.5 11" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/versatile.svg b/assets/new-img/versatile.svg
new file mode 100644
index 0000000..03a15a7
--- /dev/null
+++ b/assets/new-img/versatile.svg
@@ -0,0 +1,12 @@
+<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="30" height="30" rx="14.4" fill="#12FE74"/>
+<path d="M10.5 18.5L15.5 15.5V22L10.5 24.5V18.5Z" stroke="black" stroke-linejoin="round"/>
+<path d="M20.5 18L25.5 15.5V22L20.5 24.5V18Z" stroke="black" stroke-linejoin="round"/>
+<path d="M15.5 9L20.5 7L20.5 13L15.5 15.5V9Z" stroke="black" stroke-linejoin="round"/>
+<path d="M10.5 13L15.5 15.5L10.5 18.5L5.5 16L10.5 13Z" stroke="black" stroke-linejoin="round"/>
+<path d="M20.5 13L25.5 15.5L20.5 18L15.5 15.5L20.5 13Z" stroke="black" stroke-linejoin="round"/>
+<path d="M15.5 5L20.5 7L15.5 9L10.5 7L15.5 5Z" stroke="black" stroke-linejoin="round"/>
+<path d="M10.5 18.5L5.50003 16V22L10.5 24.5V18.5Z" stroke="black" stroke-linejoin="round"/>
+<path d="M20.5 18L15.5 15.5V22L20.5 24.5V18Z" stroke="black" stroke-linejoin="round"/>
+<path d="M15.5 9L10.5 7V13L15.5 15.5V9Z" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/components/new-subject.vue b/components/new-subject.vue
index 24be4da..4b6aa37 100644
--- a/components/new-subject.vue
+++ b/components/new-subject.vue
@@ -7,16 +7,36 @@
         <div class="flex items-center main-title">
           <div>{{ $t('main.title') }} </div>
           <span class="letter">&nbsp;</span>
-          <div
-            class="print-wrapper flex text-brand"
-          >
-            <span v-for="(l,i) in printLetters" :key="i" class="letter" v-html="l"></span>
+          <div class="print-wrapper flex text-brand">
+            <span v-for="(l, i) in printLetters" :key="i" class="letter" v-html="l"></span>
           </div>
         </div>
         <div class="mt-3 text-center sub-title animate__animated animate__fadeInDown animate__delay-1s">
           <p>Leading Multi-Chain Wallet Solution</p>
-          <p>Private & Secure </p>
-          <p>Decentralized & Versatile </p>
+          <div class="flex items-center justify-center">
+            <div class="feat-item flex items-center">
+              <img class="h-[30px] w-[30px] rounded-full mr-1" src="@/assets/new-img/private.svg" alt="">
+              Private
+            </div>
+            <div class="w-2 h-2 rounded bg-white mx-8"></div>
+
+            <div class="feat-item flex items-center">
+              <img class="h-[30px] w-[30px] rounded-full mr-1" src="@/assets/new-img/secure.svg" alt="">
+              Secure
+            </div>
+            <div class="w-2 h-2 rounded bg-white mx-8"></div>
+
+            <div class="feat-item flex items-center">
+              <img class="h-[30px] w-[30px] rounded-full mr-1" src="@/assets/new-img/decentralized.svg" alt="">
+              Decentralized
+            </div>
+            <div class="w-2 h-2 rounded bg-white mx-8"></div>
+
+            <div class="feat-item flex items-center">
+              <img class="h-[30px] w-[30px] rounded-full mr-1" src="@/assets/new-img/versatile.svg" alt="">
+              Versatile
+            </div>
+          </div>
         </div>
         <div class="text-center mt-20">
           <NewDownload />
@@ -29,13 +49,37 @@
       <div class="flex flex-col main-title-m">
         <div>{{ $t('main.title') }} </div>
         <div class="print-wrapper print-wrapper-m flex text-brand">
-          <span v-for="(l,i) in printLetters" :key="i" class="letter" v-html="l"></span>
+          <span v-for="(l, i) in printLetters" :key="i" class="letter" v-html="l"></span>
         </div>
       </div>
       <div class="mt-3 text-center sub-title animate__animated animate__fadeInDown animate__delay-1s">
         <p>Leading Multi-Chain Wallet Solution</p>
-        <p>Private & Secure </p>
-        <p>Decentralized & Versatile </p>
+        <div class="flex items-center justify-center">
+          <div class="feat-mobile-item flex items-center">
+            <img class="h-[24px] w-[24px] rounded-full mr-1" src="@/assets/new-img/private.svg" alt="">
+            Private
+          </div>
+
+          <div class="w-2 h-2 rounded bg-white mx-3"></div>
+
+          <div class="feat-mobile-item flex items-center">
+            <img class="h-[24px] w-[24px] rounded-full mr-1" src="@/assets/new-img/secure.svg" alt="">
+            Secure
+          </div>
+        </div>
+        <div class="flex items-center justify-center">
+          <div class="feat-mobile-item flex items-center">
+            <img class="h-[24px] w-[24px] rounded-full mr-1" src="@/assets/new-img/decentralized.svg" alt="">
+            Decentralized
+          </div>
+
+          <div class="w-2 h-2 rounded bg-white mx-3"></div>
+
+          <div class="feat-mobile-item flex items-center">
+            <img class="h-[24px] w-[24px] rounded-full mr-1" src="@/assets/new-img/versatile.svg" alt="">
+            Versatile
+          </div>
+        </div>
       </div>
       <div class="text-center mt-20">
         <NewDownload />
@@ -84,19 +128,31 @@ export default {
   margin: 0 auto;
   height: 75px;
 }
+
 .print-wrapper {
   animation: blink-caret 0.75s step-end infinite;
 }
+
 @keyframes blink-caret {
-  from, to { box-shadow: 1px 0 0 0 transparent; }
-  50% { box-shadow: 1px 0px 0 0; }
+
+  from,
+  to {
+    box-shadow: 1px 0 0 0 transparent;
+  }
+
+  50% {
+    box-shadow: 1px 0px 0 0;
+  }
 }
+
 .subject-wrapper {
   position: relative;
 }
+
 .subject-content {
   z-index: 1;
 }
+
 .main-title {
   font-family: 'Poppins-Bold';
   font-size: 100px;
@@ -110,11 +166,13 @@ export default {
   line-height: 75px;
   font-weight: 700;
 }
+
 .sub-title {
   font-size: 26px;
   line-height: 39px;
-  font-weight:400;
+  font-weight: 400;
 }
+
 .download-wrapper {
   width: 100%;
   display: flex;
@@ -165,4 +223,21 @@ export default {
   bottom: 0px;
 }
 
+.feat-item {
+  font-size: 24px;
+
+  img {
+    height: 30px;
+    width: 30px;
+  }
+}
+
+.feat-mobile-item {
+  font-size: 16px;
+
+  img {
+    height: 24px;
+    width: 24px;
+  }
+}
 </style>

From 8a0ff6eb5ddb901e7dac89226b7aa326760bd4cf Mon Sep 17 00:00:00 2001
From: monster1935 <monster.1935.li@gmail.com>
Date: Tue, 3 Sep 2024 17:21:37 +0800
Subject: [PATCH 2/2] feat: add trusted by

---
 assets/new-img/next-disabled.svg |   4 +
 assets/new-img/next.svg          |   4 +
 assets/new-img/prev-disabled.svg |   4 +
 assets/new-img/prev.svg          |   4 +
 components/new-trusted.vue       | 533 +++++++++++++++++++++++++++++++
 pages/index.vue                  |  11 +-
 6 files changed, 557 insertions(+), 3 deletions(-)
 create mode 100644 assets/new-img/next-disabled.svg
 create mode 100644 assets/new-img/next.svg
 create mode 100644 assets/new-img/prev-disabled.svg
 create mode 100644 assets/new-img/prev.svg
 create mode 100644 components/new-trusted.vue

diff --git a/assets/new-img/next-disabled.svg b/assets/new-img/next-disabled.svg
new file mode 100644
index 0000000..d6f89d4
--- /dev/null
+++ b/assets/new-img/next-disabled.svg
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0.5" y="0.5" width="43" height="43" rx="21.5" stroke="white"/>
+  <path d="M17 14L27 22L17 30" stroke="white" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/next.svg b/assets/new-img/next.svg
new file mode 100644
index 0000000..876997e
--- /dev/null
+++ b/assets/new-img/next.svg
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="44" height="44" rx="22" fill="#12FE74"/>
+<path d="M17 30L27 22L17 14" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/prev-disabled.svg b/assets/new-img/prev-disabled.svg
new file mode 100644
index 0000000..9b470fb
--- /dev/null
+++ b/assets/new-img/prev-disabled.svg
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="43" height="43" rx="21.5" stroke="white"/>
+<path d="M27 14L17 22L27 30" stroke="white" stroke-linejoin="round"/>
+</svg>
diff --git a/assets/new-img/prev.svg b/assets/new-img/prev.svg
new file mode 100644
index 0000000..923b2fb
--- /dev/null
+++ b/assets/new-img/prev.svg
@@ -0,0 +1,4 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="44" height="44" rx="22" fill="#12FE74"/>
+  <path d="M27 30L17 22L27 14" stroke="black" stroke-linejoin="round"/>
+</svg>
diff --git a/components/new-trusted.vue b/components/new-trusted.vue
new file mode 100644
index 0000000..cc40c01
--- /dev/null
+++ b/components/new-trusted.vue
@@ -0,0 +1,533 @@
+<template>
+  <div>
+    <div class="trust-container hidden mx-auto md:block pb-36">
+      <div class="text-8xl font-bold text-center text-white mb-20">
+        Trusted By
+      </div>
+      <swiper ref="mySwiper" class="swiper" :options="swiperOption">
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                the fox has come out of the den 🕳️<a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a> is now live
+                on v2
+                testnet and ready for devs to show off their dapps <a
+                  href="https://t.co/AD9Kd1JHg6"
+                >https://t.co/AD9Kd1JHg6</a>
+              </p>&mdash; ZKsync (∎, ∆) (@zksync) <a
+                href="https://twitter.com/zksync/status/1524453297826013185?ref_src=twsrc%5Etfw"
+              >May 11,
+                2022</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                ⭐ Filecoin Ecosystem Spotlight! ⭐<br><br>📲 Meet <a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a>, your
+                secure,
+                user-friendly gateway to the web3 world. Integrating seamlessly with networks like <a
+                  href="https://twitter.com/hashtag/Filecoin?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#Filecoin</a>
+                and <a href="https://twitter.com/hashtag/FEVM?src=hash&amp;ref_src=twsrc%5Etfw">#FEVM</a>,
+                it’s
+                the ideal decentralized self-custody wallet for your digital assets.<br><br>Since
+                launch,
+                FoxWallet has… <a href="https://t.co/2BG3UE0LNg">pic.twitter.com/2BG3UE0LNg</a>
+              </p>&mdash; Filecoin (@Filecoin) <a
+                href="https://twitter.com/Filecoin/status/1800518963220168771?ref_src=twsrc%5Etfw"
+              >June
+                11,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                ICYMI 👉 <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> has
+                integrated Iron Fish! 🦊 🤝 🐠<br><br>FoxWallet focuses on security, UX, and zk tech — a
+                perfect
+                partner to help drive our mission to preserve privacy for <a
+                  href="https://twitter.com/hashtag/web3?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#web3</a>
+                users.
+                Learn more in our blog post &amp; get started with <a
+                  href="https://twitter.com/search?q=%24IRON&amp;src=ctag&amp;ref_src=twsrc%5Etfw"
+                >$IRON</a>
+                on FoxWallet 👇 <a href="https://t.co/rXEzG4NwCe">https://t.co/rXEzG4NwCe</a> <a
+                  href="https://t.co/8oI7mgpsk8"
+                >pic.twitter.com/8oI7mgpsk8</a>
+              </p>&mdash; Iron Fish (@ironfishcrypto) <a
+                href="https://twitter.com/ironfishcrypto/status/1666877536985284611?ref_src=twsrc%5Etfw"
+              >June
+                8,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Starting soon! 🔥🔥 <a href="https://t.co/LcIyyZdSOt">https://t.co/LcIyyZdSOt</a>
+              </p>&mdash; teamspacemesh (@teamspacemesh) <a
+                href="https://twitter.com/teamspacemesh/status/1790033886967185517?ref_src=twsrc%5Etfw"
+              >May
+                13,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Great news for the <a href="https://twitter.com/hashtag/Qtum?src=hash&amp;ref_src=twsrc%5Etfw">#Qtum</a>
+                community! 🦊🌐<a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> now
+                fully supports <a href="https://twitter.com/hashtag/Qtum?src=hash&amp;ref_src=twsrc%5Etfw">#Qtum</a>,
+                which
+                combines the best of <a
+                  href="https://twitter.com/hashtag/Bitcoin?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#Bitcoin</a>
+                and
+                <a href="https://twitter.com/hashtag/Ethereum?src=hash&amp;ref_src=twsrc%5Etfw">#Ethereum</a>
+                with a UTXO-based <a
+                  href="https://twitter.com/hashtag/blockchain?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#blockchain</a>
+                design. This allows you to access smart contracts, <a
+                  href="https://twitter.com/hashtag/DApps?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#DApps</a>,
+                and
+                Bitcoin-like security. 🔥<br><br>With Fox Wallet’s Multi-chain… <a
+                  href="https://t.co/wRY6rdnjKv"
+                >pic.twitter.com/wRY6rdnjKv</a>
+              </p>&mdash; Qtum (@qtum) <a
+                href="https://twitter.com/qtum/status/1701689441251737984?ref_src=twsrc%5Etfw"
+              >September
+                12,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                🦄 <a
+                  href="https://twitter.com/hashtag/1inchWeeklyRecap?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#1inchWeeklyRecap</a>
+                #84 <br><br>Updates and integrations:<br><br>🏎 <a
+                  href="https://twitter.com/hashtag/1inch?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#1inch</a> and <a
+                  href="https://twitter.com/TrustWallet?ref_src=twsrc%5Etfw"
+                >@TrustWallet</a> launched the “Need for
+                Swap”
+                competition with a prize fund of $25K <a
+                  href="https://twitter.com/search?q=%24USDC&amp;src=ctag&amp;ref_src=twsrc%5Etfw"
+                >$USDC</a> - <a
+                  href="https://t.co/rYJiTL0iQA"
+                >https://t.co/rYJiTL0iQA</a> <br><br>📊 New 1inch Analytics Dashboard,
+                built by <a href="https://twitter.com/warden_finance?ref_src=twsrc%5Etfw">@warden_finance</a>, is now
+                available at… <a href="https://t.co/Ejk9bU6n5a">pic.twitter.com/Ejk9bU6n5a</a>
+              </p>&mdash; 1inch (@1inch) <a
+                href="https://twitter.com/1inch/status/1705288148777886134?ref_src=twsrc%5Etfw"
+              >September 22, 2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-conversation="none" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Meet <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> 💎A safe, easy-to-use,
+                decentralized, multi-chain, multi-address web3 wallet✨ <a
+                  href="https://t.co/uiLmMimhtU"
+                >pic.twitter.com/uiLmMimhtU</a>
+              </p>&mdash; Linea (@LineaBuild) <a
+                href="https://twitter.com/LineaBuild/status/1735662005766291679?ref_src=twsrc%5Etfw"
+              >December 15,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Exciting News!🚀 <a href="https://twitter.com/HashKeyCloud?ref_src=twsrc%5Etfw">@HashKeyCloud</a> is
+                partnering up with <a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a>!🎉🎉<br><br>Fox Wallet is a
+                safe
+                and easy-to-use decentralized multi-chain wallet, dedicated to creating an entrance and connection to
+                the
+                Web3 world.<br><br>Follow the steps below to start your <a
+                  href="https://twitter.com/hashtag/ETH?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#ETH</a> node validation with
+                us… <a href="https://t.co/dWfYtsbVXs">https://t.co/dWfYtsbVXs</a>
+              </p>&mdash; HashKey Cloud (@HashKeyCloud) <a
+                href="https://twitter.com/HashKeyCloud/status/1795284178763985243?ref_src=twsrc%5Etfw"
+              >May 28, 2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Thank you <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a>, for co-creating
+                Web3
+                security with us! <a href="https://t.co/OX1J1KMLCb">https://t.co/OX1J1KMLCb</a>
+              </p>&mdash; GoPlus SecWareX (@GoPlusSecWareX) <a
+                href="https://twitter.com/GoPlusSecWareX/status/1806578726576288119?ref_src=twsrc%5Etfw"
+              >June 28,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <div slot="pagination" class="swiper-pagination"></div>
+        <div slot="button-prev" class="swiper-button-prev"></div>
+        <div slot="button-next" class="swiper-button-next"></div>
+      </swiper>
+    </div>
+    <div class="px-5 md:hidden block trust-container-m pb-20">
+      <div class="title-m text-center text-white mb-20">
+        Trusted By
+      </div>
+      <swiper class="swiper" :options="swiperOption">
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                the fox has come out of the den 🕳️<a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a> is now live
+                on v2
+                testnet and ready for devs to show off their dapps <a
+                  href="https://t.co/AD9Kd1JHg6"
+                >https://t.co/AD9Kd1JHg6</a>
+              </p>&mdash; ZKsync (∎, ∆) (@zksync) <a
+                href="https://twitter.com/zksync/status/1524453297826013185?ref_src=twsrc%5Etfw"
+              >May 11,
+                2022</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                ⭐ Filecoin Ecosystem Spotlight! ⭐<br><br>📲 Meet <a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a>, your
+                secure,
+                user-friendly gateway to the web3 world. Integrating seamlessly with networks like <a
+                  href="https://twitter.com/hashtag/Filecoin?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#Filecoin</a>
+                and <a href="https://twitter.com/hashtag/FEVM?src=hash&amp;ref_src=twsrc%5Etfw">#FEVM</a>,
+                it’s
+                the ideal decentralized self-custody wallet for your digital assets.<br><br>Since
+                launch,
+                FoxWallet has… <a href="https://t.co/2BG3UE0LNg">pic.twitter.com/2BG3UE0LNg</a>
+              </p>&mdash; Filecoin (@Filecoin) <a
+                href="https://twitter.com/Filecoin/status/1800518963220168771?ref_src=twsrc%5Etfw"
+              >June
+                11,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                ICYMI 👉 <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> has
+                integrated Iron Fish! 🦊 🤝 🐠<br><br>FoxWallet focuses on security, UX, and zk tech — a
+                perfect
+                partner to help drive our mission to preserve privacy for <a
+                  href="https://twitter.com/hashtag/web3?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#web3</a>
+                users.
+                Learn more in our blog post &amp; get started with <a
+                  href="https://twitter.com/search?q=%24IRON&amp;src=ctag&amp;ref_src=twsrc%5Etfw"
+                >$IRON</a>
+                on FoxWallet 👇 <a href="https://t.co/rXEzG4NwCe">https://t.co/rXEzG4NwCe</a> <a
+                  href="https://t.co/8oI7mgpsk8"
+                >pic.twitter.com/8oI7mgpsk8</a>
+              </p>&mdash; Iron Fish (@ironfishcrypto) <a
+                href="https://twitter.com/ironfishcrypto/status/1666877536985284611?ref_src=twsrc%5Etfw"
+              >June
+                8,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Starting soon! 🔥🔥 <a href="https://t.co/LcIyyZdSOt">https://t.co/LcIyyZdSOt</a>
+              </p>&mdash; teamspacemesh (@teamspacemesh) <a
+                href="https://twitter.com/teamspacemesh/status/1790033886967185517?ref_src=twsrc%5Etfw"
+              >May
+                13,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Great news for the <a href="https://twitter.com/hashtag/Qtum?src=hash&amp;ref_src=twsrc%5Etfw">#Qtum</a>
+                community! 🦊🌐<a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> now
+                fully supports <a href="https://twitter.com/hashtag/Qtum?src=hash&amp;ref_src=twsrc%5Etfw">#Qtum</a>,
+                which
+                combines the best of <a
+                  href="https://twitter.com/hashtag/Bitcoin?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#Bitcoin</a>
+                and
+                <a href="https://twitter.com/hashtag/Ethereum?src=hash&amp;ref_src=twsrc%5Etfw">#Ethereum</a>
+                with a UTXO-based <a
+                  href="https://twitter.com/hashtag/blockchain?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#blockchain</a>
+                design. This allows you to access smart contracts, <a
+                  href="https://twitter.com/hashtag/DApps?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#DApps</a>,
+                and
+                Bitcoin-like security. 🔥<br><br>With Fox Wallet’s Multi-chain… <a
+                  href="https://t.co/wRY6rdnjKv"
+                >pic.twitter.com/wRY6rdnjKv</a>
+              </p>&mdash; Qtum (@qtum) <a
+                href="https://twitter.com/qtum/status/1701689441251737984?ref_src=twsrc%5Etfw"
+              >September
+                12,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                🦄 <a
+                  href="https://twitter.com/hashtag/1inchWeeklyRecap?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#1inchWeeklyRecap</a>
+                #84 <br><br>Updates and integrations:<br><br>🏎 <a
+                  href="https://twitter.com/hashtag/1inch?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#1inch</a> and <a
+                  href="https://twitter.com/TrustWallet?ref_src=twsrc%5Etfw"
+                >@TrustWallet</a> launched the “Need for
+                Swap”
+                competition with a prize fund of $25K <a
+                  href="https://twitter.com/search?q=%24USDC&amp;src=ctag&amp;ref_src=twsrc%5Etfw"
+                >$USDC</a> - <a
+                  href="https://t.co/rYJiTL0iQA"
+                >https://t.co/rYJiTL0iQA</a> <br><br>📊 New 1inch Analytics Dashboard,
+                built by <a href="https://twitter.com/warden_finance?ref_src=twsrc%5Etfw">@warden_finance</a>, is now
+                available at… <a href="https://t.co/Ejk9bU6n5a">pic.twitter.com/Ejk9bU6n5a</a>
+              </p>&mdash; 1inch (@1inch) <a
+                href="https://twitter.com/1inch/status/1705288148777886134?ref_src=twsrc%5Etfw"
+              >September 22, 2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-conversation="none" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Meet <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a> 💎A safe, easy-to-use,
+                decentralized, multi-chain, multi-address web3 wallet✨ <a
+                  href="https://t.co/uiLmMimhtU"
+                >pic.twitter.com/uiLmMimhtU</a>
+              </p>&mdash; Linea (@LineaBuild) <a
+                href="https://twitter.com/LineaBuild/status/1735662005766291679?ref_src=twsrc%5Etfw"
+              >December 15,
+                2023</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Exciting News!🚀 <a href="https://twitter.com/HashKeyCloud?ref_src=twsrc%5Etfw">@HashKeyCloud</a> is
+                partnering up with <a
+                  href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw"
+                >@FoxWallet</a>!🎉🎉<br><br>Fox Wallet is a
+                safe
+                and easy-to-use decentralized multi-chain wallet, dedicated to creating an entrance and connection to
+                the
+                Web3 world.<br><br>Follow the steps below to start your <a
+                  href="https://twitter.com/hashtag/ETH?src=hash&amp;ref_src=twsrc%5Etfw"
+                >#ETH</a> node validation with
+                us… <a href="https://t.co/dWfYtsbVXs">https://t.co/dWfYtsbVXs</a>
+              </p>&mdash; HashKey Cloud (@HashKeyCloud) <a
+                href="https://twitter.com/HashKeyCloud/status/1795284178763985243?ref_src=twsrc%5Etfw"
+              >May 28, 2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <swiper-slide>
+          <div class="x-item">
+            <blockquote class="twitter-tweet" data-theme="dark">
+              <p lang="en" dir="ltr">
+                Thank you <a href="https://twitter.com/FoxWallet?ref_src=twsrc%5Etfw">@FoxWallet</a>, for co-creating
+                Web3
+                security with us! <a href="https://t.co/OX1J1KMLCb">https://t.co/OX1J1KMLCb</a>
+              </p>&mdash; GoPlus SecWareX (@GoPlusSecWareX) <a
+                href="https://twitter.com/GoPlusSecWareX/status/1806578726576288119?ref_src=twsrc%5Etfw"
+              >June 28,
+                2024</a>
+            </blockquote>
+            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+          </div>
+        </swiper-slide>
+        <div slot="pagination" class="swiper-pagination"></div>
+        <div slot="button-prev" class="swiper-button-prev"></div>
+        <div slot="button-next" class="swiper-button-next"></div>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: this.getSlidesPerView(),
+        spaceBetween: 30,
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        },
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      }
+    }
+  },
+  methods: {
+    getSlidesPerView() {
+      const screenWidth = window.innerWidth
+      if (screenWidth < 280 * 2) {
+        return 1
+      }
+      return 4
+    },
+  }
+}
+
+</script>
+
+<style>
+.trust-container {
+  width: 1200px;
+}
+
+.swiper-wrapper {
+  padding-top: 60px;
+}
+
+.x-item {
+  width: 276px;
+  height: 442px;
+  margin: 0 auto;
+  overflow: hidden;
+  transition: 0.25s linear;
+  border: 1px solid #465363;
+  border-radius: 16px;
+}
+
+.x-item .twitter-tweet {
+  margin-top: 0 !important;
+}
+
+.swiper-container {
+  padding-bottom: 30px !important;
+}
+
+.swiper-pagination {
+  bottom: -4px !important;
+}
+
+.swiper-pagination-bullet {
+  background: white !important;
+  opacity: 0.6 !important;
+}
+
+.swiper-pagination-bullet-active {
+  background: #12FE74 !important;
+  opacity: 1 !important;
+}
+
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+  background-image: url(@/assets/new-img/next.svg) !important;
+  top: 20px !important;
+}
+
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+  background-image: url(@/assets/new-img/prev.svg) !important;
+  top: 20px !important;
+  right: 50px !important;
+  left: unset !important;
+}
+
+.swiper-button-prev.swiper-button-disabled {
+  background-image: url(@/assets/new-img/prev-disabled.svg) !important;
+  opacity: 1 !important;
+}
+
+.swiper-button-next.swiper-button-disabled {
+  background-image: url(@/assets/new-img/next-disabled.svg) !important;
+  opacity: 1 !important;
+}
+
+.x-item:hover {
+  transform: translateY(-20px);
+  border: 1px solid #12FE74;
+}
+.title-m {
+  font-size: 30px;
+  line-height: 45px;
+  font-weight: 600;
+  font-family: 'Poppins-Bold';
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index d0885c3..16d2431 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,6 +4,10 @@
     <NewSubject />
     <NewWalletAnimate />
     <NewAdvantages />
+    <client-only>
+      <NewTrusted />
+    </client-only>
+
     <NewPartner />
     <NewFooter />
   </div>
@@ -28,7 +32,8 @@ export default {
 </script>
 
 <style>
-  html, body {
-    background: #000000;
-  }
+html,
+body {
+  background: #000000;
+}
 </style>