added Ultroid on termux and sponsor card. (#4)

* Update index.js

* Update styles.module.css

* Add files via upload

* Update docusaurus.config.js

* Update index.js

* Update index.js

Author: Parvshah-01

docusaurus.config.js

@@ -78,10 +78,10 @@ module.exports = {
               label: 'GitHub',
               href: 'https://github.com/TeamUltroid/Ultroid',
             },
-            {
-              label: "URL Shortener",
-              href: "https://tiny.ultroid.tech"
-            }
+            // {
+            //   label: "URL Shortener",
+            //   href: "https://tiny.ultroid.tech"
+            // }
           ],
         },
       ],

src/pages/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
@@ -12,7 +12,7 @@ const features = [
     imageUrl: 'img/undraw_pair_programming_njlp.svg',
     description: (
       <>
-        Ultroid has been written from scratch, making it more stable and less of crashes
+        Ultroid has been written from scratch, making it more stable and less prone to crashes.
       </>
     ),
   },
@@ -22,7 +22,7 @@ const features = [
     description: (
       <>
         Ultroid warns you when you try to install/execute dangerous stuff
-        (people nowadays make plugins to hack user accounts, Ultroid is safe)
+        (people nowadays make plugins to hack user accounts, Ultroid is safe).
       </>
     ),
   },
@@ -31,34 +31,168 @@ const features = [
     imageUrl: 'img/undraw_cloud_hosting_aodd.svg',
     description: (
       <>
-        Unlike many others userbots* which are being suspended by heroku, Ultroid doesn't get suspended.
+        Unlike many other userbots which are suspended by Heroku, Ultroid doesn’t get suspended.
       </>
     ),
   },
+  {
+    title: 'Ultroid on Termux',
+    imageUrl: 'img/undraw_mobile-app_qxev.svg',
+    description: (
+      <>
+        Run Ultroid on Termux with just a few clicks — everything is automated for you. Fast, simple, beginner-friendly, and designed to work seamlessly on mobile devices.
+      </>
+    ),
+    downloadLinks: [
+      {
+        label: 'arm64',
+        size: '32.80 MB',
+        href: 'https://github.com/TeamUltroid/Ultroid-Termux/releases/download/v0.118.0%2Bc579131-apt-android-7-github-debug/termux-app_v0.118.0+c579131-apt-android-7-github-debug_arm64-v8a.apk'
+      },
+      {
+        label: 'armeabi',
+        size: '31.00 MB',
+        href: 'https://github.com/TeamUltroid/Ultroid-Termux/releases/download/v0.118.0%2Bc579131-apt-android-7-github-debug/termux-app_v0.118.0+c579131-apt-android-7-github-debug_armeabi-v7a.apk'
+      },
+      {
+        label: 'universal',
+        size: '108.0 MB',
+        href: 'https://github.com/TeamUltroid/Ultroid-Termux/releases/download/v0.118.0%2Bc579131-apt-android-7-github-debug/termux-app_v0.118.0+c579131-apt-android-7-github-debug_universal.apk'
+      }
+    ],
+
+  },
+  {
+    title: 'Support Ultroid',
+    imageUrl: 'img/undraw_new-entries_xw4m.svg',
+
+    description: (
+      <>
+        If you liked our work and want to sponsor or fund the project, your support means the world to us! It helps us keep improving Ultroid for the community.
+      </>
+    ),
+    sponsor: true,
+    sponsorLinks: [
+      {
+        label: 'Sponsor on GitHub',
+        href: 'https://github.com/sponsors/TeamUltroid',
+        type: 'primary',
+      }
+    ],
+  },
 ];
 
-function Feature({ imageUrl, title, description }) {
+function Feature({ imageUrl, title, description, downloadLinks, sponsor, sponsorLinks }) {
   const imgUrl = useBaseUrl(imageUrl);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setMenuOpen(false);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        setMenuOpen(false);
+      }
+    }
+    if (menuOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [menuOpen]);
+
   return (
     <div className={clsx('col col--4', styles.feature)}>
       {imgUrl && (
         <div className="text--center">
           <img className={styles.featureImage} src={imgUrl} alt={title} />
         </div>
       )}
+
       <h3>{title}</h3>
-      <p>{description}</p>
+      <p className={styles.justifyText}>{description}</p>
+
+      {(downloadLinks || sponsorLinks) && (
+        <div className={styles.buttonRow}>
+          {downloadLinks && !sponsor && (
+            <div className={styles.termuxDownloadWrapper} ref={dropdownRef}>
+              <Link
+                className={clsx('button button--primary button--lg', styles.downloadButton)}
+                to="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setMenuOpen(!menuOpen);
+                }}
+              >
+                Download{' '}
+                <span
+                  className={clsx(styles.downloadArrow, {
+                    [styles.rotated]: menuOpen,
+                  })}
+                >
+                  ▼
+                </span>
+
+              </Link>
+              <ul
+                className={clsx(styles.termuxDropdownMenu, {
+                  [styles.open]: menuOpen,
+                  [styles.closed]: !menuOpen,
+                })}
+                style={{ pointerEvents: menuOpen ? 'auto' : 'none' }}
+              >
+                {downloadLinks.map(({ label, size, href }, i) => (
+                  <li key={i}>
+                    <Link
+                      className={styles.termuxDropdownItem}
+                      to={href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <span className={styles.itemName}>{label}</span>
+                      <span className={styles.itemSize}>{size}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {sponsor && sponsorLinks && (
+            <div className={styles.termuxDownloadWrapper}>
+              {sponsorLinks.map(({ label, href }, idx) => (
+                <a
+                  key={idx}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={clsx('button button--primary button--lg', styles.downloadButton)}
+                >
+                  {label}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+
     </div>
   );
 }
 
+
 function Home() {
-  const context = useDocusaurusContext();
-  const { siteConfig = {} } = context;
+  const { siteConfig = {} } = useDocusaurusContext();
   return (
-    <Layout
-      title={`Ultroid Userbot`}
-      description="Ultroid Userbot Documentation">
+    <Layout title="Ultroid Userbot" description="Ultroid Userbot Documentation">
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
@@ -67,24 +201,17 @@ function Home() {
             <Link
               className={clsx(
                 'margin-horiz--xs button button--outline button--secondary button--lg',
-                styles.getStarted,
+                styles.getStarted
               )}
-              to={useBaseUrl('docs/')}>
+              to={useBaseUrl('docs/')}
+            >
               Get Started
             </Link>
-            {/* <Link
-              className={clsx(
-                'margin-horiz--xs button button--bg button--success button--lg',
-                styles.deploy,
-              )}
-              to={useBaseUrl('docs/installation/heroku')}>
-              Deploy Now
-            </Link> */}
           </div>
         </div>
       </header>
       <main>
-        {features && features.length > 0 && (
+        {features.length > 0 && (
           <section className={styles.features}>
             <div className="container">
               <div className="row">