feat: implement index section 4

Co-authored-by: Sylvanysc <Sylvanysc@users.noreply.github.com>
Co-authored-by: 奕 <a18355849597@outlook.com>

assets/icons/community.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 522 529"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
+    <style>
+    :root {
+        --s-deco: #AD4125;
+        --s-bg: #FFBEAD;
+        --s-bg-2: #EB9079;
+        --s-bg-3: #DF7C62;
+    }
+    </style>
+    <g clip-path="url(#clip0)" transform="translate(-2003 -673)">
+        <path d="M560.955 1387.23 560.955 1716.29C560.955 1727.25 552.101 1736.11 541.132 1736.11L148.971 1736.11C88.3139 1736.11 38.9551 1686.76 38.9551 1626.11L38.9551 1337.16C38.9551 1274.47 90.1044 1227.17 157.892 1227.17 168.861 1227.17 177.715 1236.02 177.715 1246.98L177.715 1367.42 305.308 1367.42C302.334 1358.03 300.682 1348.12 300.682 1337.81 300.682 1291.37 333.654 1252.47 377.463 1243.28L377.463 1227.43C377.463 1216.46 386.383 1207.61 397.285 1207.61 408.254 1207.61 417.108 1216.46 417.108 1227.43L417.108 1243.28C460.917 1252.47 493.955 1291.37 493.955 1337.81 493.955 1348.12 492.303 1358.03 489.264 1367.42L541.132 1367.42C552.101 1367.42 560.955 1376.26 560.955 1387.23ZM521.311 1696.46 521.311 1407.05 486.752 1407.05 486.752 1592.22C486.752 1603.19 477.904 1612.03 466.929 1612.03 455.961 1612.03 447.106 1603.19 447.106 1592.22L447.106 1498.28 347.53 1498.28 347.53 1592.22C347.53 1603.19 338.609 1612.03 327.707 1612.03 316.739 1612.03 307.885 1603.19 307.885 1592.22L307.885 1498.28 278.481 1498.28C267.512 1498.28 258.658 1489.43 258.658 1478.47 258.658 1467.5 267.512 1458.64 278.481 1458.64L307.885 1458.64 307.885 1407.05 177.715 1407.05 177.715 1535.88C177.715 1546.83 168.861 1555.69 157.892 1555.69 111.969 1555.69 78.6005 1585.28 78.6005 1626.11 78.6005 1664.88 110.185 1696.46 148.971 1696.46L521.311 1696.46ZM447.106 1458.64 447.106 1420.45C432.504 1429.32 415.529 1434.46 397.285 1434.46 379.049 1434.46 362.067 1429.32 347.53 1420.45L347.53 1458.64 447.106 1458.64ZM454.309 1337.81C454.309 1306.44 428.744 1280.87 397.285 1280.87 365.899 1280.87 340.329 1306.44 340.329 1337.81 340.329 1369.26 365.899 1394.83 397.285 1394.83 428.744 1394.83 454.309 1369.26 454.309 1337.81ZM138.069 1517.44 138.069 1268.72C102.653 1275.99 78.6005 1302.55 78.6005 1337.16L78.6005 1542.74C94.7893 1529.67 115.141 1520.75 138.069 1517.44Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00096 1964.04 -535.771)" style="fill: var(--s-deco)"/>
+        <path d="M520.702 1407.58 520.702 1697.15 149.387 1697.15C110.706 1697.15 79.2087 1665.54 79.2087 1626.76 79.2087 1585.91 112.486 1556.3 158.282 1556.3 169.22 1556.3 178.05 1547.44 178.05 1536.47L178.05 1407.58 307.863 1407.58 307.863 1459.2 278.54 1459.2C267.6 1459.2 258.772 1468.05 258.772 1479.03 258.772 1490 267.6 1498.87 278.54 1498.87L307.863 1498.87 307.863 1592.84C307.863 1603.83 316.693 1612.67 327.63 1612.67 338.504 1612.67 347.4 1603.83 347.4 1592.84L347.4 1498.87 446.702 1498.87 446.702 1592.84C446.702 1603.83 455.532 1612.67 466.471 1612.67 477.416 1612.67 486.239 1603.83 486.239 1592.84L486.239 1407.58 520.702 1407.58Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00096 1964.04 -535.771)" style="fill: var(--s-bg)"/>
+        <path d="M446.687 1420.57 446.687 1459.52 348 1459.52 348 1420.57C362.407 1429.61 379.237 1434.86 397.311 1434.86 415.391 1434.86 432.215 1429.61 446.687 1420.57Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00096 1964.04 -535.771)" style="fill: var(--s-bg)"/>
+        <path d="M397.31 1281.63C428.848 1281.63 454.478 1306.97 454.478 1338.09 454.478 1369.25 428.848 1394.6 397.31 1394.6 365.844 1394.6 340.209 1369.25 340.209 1338.09 340.209 1306.97 365.844 1281.63 397.31 1281.63Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00096 1964.04 -535.771)" style="fill: var(--s-bg-2)"/>
+        <path d="M138.94 1268.64 138.94 1517.33C115.911 1520.63 95.4692 1529.55 79.2087 1542.63L79.2087 1337.07C79.2087 1302.46 103.367 1275.91 138.94 1268.64Z" fill-rule="evenodd" transform="matrix(1 0 0 1.00096 1964.04 -535.771)" style="fill: var(--s-bg-3)"/>
+    </g>
+</svg>

pages/index.vue

@@ -331,7 +331,94 @@ onMounted(() => {
         </p>
       </div>
     </section>
-    <section>
+    <section class="flex flex-col items-center justify-center gap-10 pt-15">
+      <div class="flex items-center justify-center gap-6">
+        <Icon
+          name="s:community"
+          mode="svg"
+          :style="{
+            height: '100%',
+            width: 'auto',
+            '--s-deco': 'var(--p-secondary-700)',
+            '--s-bg': 'var(--p-secondary-100)',
+            '--s-bg-2': 'var(--p-secondary-200)',
+            '--s-bg-3': 'var(--p-secondary-400)',
+          }"
+        />
+        <div class="flex flex-col">
+          <h2 class="text-5xl font-[KNYuanmo] text-(--p-primary-400)">
+            COMMUNITY
+          </h2>
+          <h2 class="text-5xl font-bold text-(--p-primary-600) mt-2">
+            社区共筑&nbsp;&nbsp;精挑细选
+          </h2>
+        </div>
+      </div>
+      <div class="flex gap-16">
+        <!-- 左侧内容区域 -->
+        <div class="flex flex-col py-12 gap-6">
+          <div class="flex flex-col">
+            <p class="text-5xl leading-[1.5]">凝聚开发者智慧</p>
+            <p class="text-5xl font-bold leading-[1.5]">
+              以开源精神守护应用品质
+            </p>
+          </div>
+          <p class="text-lg leading-[2]">
+            星火社区构建Linux生态“应用银河”，持续上架丰富的跨平台、跨生态<br />
+            应用程序，涵盖系统工具、影音娱乐等精选资源，精准匹配用户需求。<br />
+            年轻开发团队以00后为主力，致力让技术成果如星火般点亮数字原野。<br />
+          </p>
+          <div class="flex items-center gap-4">
+            <p class="font-bold text-3xl text-(--p-primary-500)">
+              全架构<br />
+              上架应用
+            </p>
+            <p class="text-7xl font-[KNYuanmo] text-(--p-primary-500)">
+              {{
+                Math.floor(
+                  2200 *
+                    ((getCubicBezier(
+                      0,
+                      1,
+                      1,
+                      0
+                    )(range(-0.25, 0.25, sProgress - 3) * 2 + 0.5) -
+                      0.5) *
+                      2 +
+                      1)
+                )
+              }}<span
+                class="inline-block"
+                :style="{
+                  opacity:
+                    1 -
+                    Math.abs(
+                      riro(range(-0.05, 0.05, sProgress - 3) * 10 + 0.5) - 0.5
+                    ) *
+                      2,
+                  transform: `scale(${
+                    1 +
+                    Math.abs(range(-0.05, 0.05, sProgress - 3) * 10 + 0.5 - 0.5)
+                  })`,
+                }"
+                >+</span
+              >
+            </p>
+          </div>
+        </div>
+
+        <!-- 右侧图片区域 -->
+        <Icon
+          name="s:community-deco"
+          mode="svg"
+          :style="{
+            height: '100%',
+            width: 'auto',
+            '--s-deco': 'var(--p-secondary-900)',
+            '--s-bg': 'var(--p-primary-200)',
+          }"
+        />
+      </div>
     </section>
     <section></section>
     <section></section>