add ts support

Signed-off-by: 82Flex <82flex@gmail.com>

Author: Lessica

docs/tutorial/img/Requirements.002.png

@@ -15,7 +15,7 @@ This documentation will guide you through the process of getting started with XX
 ## Requirements
 
 - XXTouch Elite is designed to work on iPhone/iPad with iOS 14 and later.
-- You need to [jailbreak your device](https://ios.cfw.guide/types-of-jailbreak/) to use XXTouch Elite. Following jailbreak methods are supported and tested:
+- XXTouch Elite supports two installation options: [Jailbreak](https://ios.cfw.guide/types-of-jailbreak/) or [TrollStore](https://ios.cfw.guide/installing-trollstore) (where supported). The following jailbreak methods are supported and tested:
   - [unc0ver](https://unc0ver.dev/)
   - [Taurine](https://taurine.app/)
   - [Palera1n](https://palera.in/) (Rootless)
@@ -29,6 +29,8 @@ This documentation will guide you through the process of getting started with XX
 2. Install “XXTouch Elite” from Sileo package manager.
 3. You may need to restart your device after installation.
 
+If you use TrollStore, on supported devices share the `.tipa` installer to your device via AirDrop or other methods, then choose "TrollStore" to install.
+
 ![Requirements.003](./img/Requirements.003.png)
 
 ## Updating your XXTouch Elite version

docs/tutorial/intro.md

@@ -15,7 +15,7 @@ XXTouch Elite 使用 [Lua](https://www.lua.org/) (v5.3) 作为脚本语言，
 ## 前置条件
 
 - XXTouch Elite 设计用于运行 iOS 14 及以上版本的 iPhone 或 iPad。
-- 你需要 [越狱设备](https://ios.cfw.guide/types-of-jailbreak/) 才能使用 XXTouch Elite。以下越狱方法已支持并测试：
+- XXTouch Elite 支持两种安装方式：[越狱](https://ios.cfw.guide/types-of-jailbreak/) 或 [TrollStore](https://ios.cfw.guide/installing-trollstore)（在受支持的设备/系统上）。以下越狱方法已支持并测试：
   - [unc0ver](https://unc0ver.dev/)
   - [Taurine](https://taurine.app/)
   - [Palera1n](https://palera.in/)（Rootless）
@@ -26,9 +26,11 @@ XXTouch Elite 使用 [Lua](https://www.lua.org/) (v5.3) 作为脚本语言，
 ## 安装
 
 1. 从 Havoc 源购买 “[XXTouch Elite](https://havoc.app/package/xxtouchelite)”。
-2. 从 Sileo 包管理器安装“XXTouch Elite”。
+2. 从 Sileo 包管理器安装 “XXTouch Elite”。
 3. 安装后可能需要重启设备。
 
+如果你使用 TrollStore，请在受支持的设备上使用隔空投送 AirDrop 或其他方式分享 `.tipa` 安装包到设备上，选择 “TrollStore” 进行安装。
+
 ![Requirements.003](./img/Requirements.003.png)
 
 ## 更新 XXTouch Elite 版本

i18n/zh-Hans/docusaurus-plugin-content-docs/current/tutorial/img/Requirements.002.png

@@ -55,6 +55,7 @@
   font-size: 3rem;
   margin-bottom: 1rem;
   background: linear-gradient(90deg, #ffffff 0%, #e0e7ff 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: fadeInUp 0.8s ease-out;
@@ -64,6 +65,7 @@
   position: relative;
   display: inline-block;
   background: linear-gradient(90deg, #63c2ff 0%, #e0e7ff 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-style: italic;
@@ -167,7 +169,8 @@
   letter-spacing: 0.3px !important;
 }
 
-.buttonIcon, .downloadIcon {
+.buttonIcon,
+.downloadIcon {
   transition: transform 0.3s ease;
   font-size: 1.1rem;
 }
@@ -237,6 +240,7 @@
   font-size: 2.2rem;
   margin-bottom: 0.5rem;
   background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -261,6 +265,7 @@
 .feature {
   display: flex;
   margin-bottom: 2rem;
+  width: 100%;
 }
 
 .featureCard {
@@ -273,6 +278,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
 }
 
 .featureCard:hover {
@@ -309,12 +315,29 @@
 }
 
 .compatList {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(2, 160px);
   gap: 2rem;
   margin: 2rem auto;
   max-width: 1000px;
+  justify-content: center;
+  /* center the grid within container */
+  justify-items: center;
+  /* center items in each cell */
+}
+
+/* Medium screens: 3 columns => rows become 3+2 for 5 items */
+@media (min-width: 640px) {
+  .compatList {
+    grid-template-columns: repeat(3, 160px);
+  }
+}
+
+/* Large screens: 5 columns => 5 items on one row */
+@media (min-width: 960px) {
+  .compatList {
+    grid-template-columns: repeat(5, 160px);
+  }
 }
 
 .compatList span {
@@ -392,7 +415,7 @@
   right: 0;
   bottom: 0;
   background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
-                    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
+    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
   opacity: 0.6;
 }
 
@@ -532,13 +555,19 @@ html[data-theme='dark'] .buttonPrimary {
 
 html[data-theme='dark'] .sectionTitle {
   background: linear-gradient(90deg, #63b3ed 0%, #4299e1 100%);
+  background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes slideIn {
@@ -549,31 +578,47 @@ html[data-theme='dark'] .sectionTitle {
 }
 
 @keyframes slideInUnderline {
-  0% { transform: scaleX(0); }
-  100% { transform: scaleX(1); }
+  0% {
+    transform: scaleX(0);
+  }
+
+  100% {
+    transform: scaleX(1);
+  }
 }
 
 @keyframes fadeInUp {
   from {
     transform: translateY(20px);
     opacity: 0;
   }
+
   to {
     transform: translateY(0);
     opacity: 1;
   }
 }
 
 @keyframes phoneFloat {
-  0%, 100% { transform: rotate(-5deg) translateY(0); }
-  50% { transform: rotate(-5deg) translateY(-10px); }
+
+  0%,
+  100% {
+    transform: rotate(-5deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(-5deg) translateY(-10px);
+  }
 }
 
 @keyframes pulse {
-  0%, 100% {
+
+  0%,
+  100% {
     transform: scale(1);
     opacity: 0.3;
   }
+
   50% {
     transform: scale(1.1);
     opacity: 0.5;
@@ -616,7 +661,9 @@ html[data-theme='dark'] .sectionTitle {
     font-size: 2rem;
   }
 
-  .features, .compatibility, .cta {
+  .features,
+  .compatibility,
+  .cta {
     padding: 4rem 1rem;
   }
 
@@ -666,6 +713,7 @@ html[data-theme='dark'] .sectionTitle {
 
   .jailbreakItem {
     width: calc(50% - 1.5rem);
+    min-width: 160px;
   }
 
   .sectionTitle {
@@ -713,7 +761,7 @@ html[data-theme='dark'] .sectionTitle {
 
   .jailbreakItem {
     width: calc(50% - 1rem);
-    min-width: 100px;
+    min-width: 160px;
     padding: 1.2rem;
   }
 
@@ -748,4 +796,4 @@ html[data-theme='dark'] .sectionTitle {
   .jailbreakItem span {
     font-size: 0.9rem;
   }
-}
+}