Refactor: HomepageFeatures component to add documentation links and changed style.

Author: TheMelone2

docusaurus/src/components/HomepageFeatures/index.tsx

@@ -7,6 +7,8 @@ type FeatureItem = {
   imgSrc: string;
   description: JSX.Element;
   link: string;
+  docs: string;
+  brandColor: string;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -18,7 +20,9 @@ const FeatureList: FeatureItem[] = [
         EasyThreads can be used for autothreading, moving of threads, ticket-systems and much more!
       </>
     ),
-    link: 'https://ezsys.link/threads'
+    link: 'https://ezsys.link/threads',
+    docs: '/docs/easythreads/intro',
+    brandColor: '#4ea4df',
   },
   {
     title: 'EasyLevel',
@@ -28,7 +32,9 @@ const FeatureList: FeatureItem[] = [
         With EasyLevel you can customize almost every aspect of your Leveling experience with ease.
       </>
     ),
-    link: 'https://ezsys.link/level'
+    link: 'https://ezsys.link/level',
+    docs: '/docs/easylevel/intro',
+    brandColor: '#98ce86',
   },
   {
     title: 'EasyVoice',
@@ -38,7 +44,9 @@ const FeatureList: FeatureItem[] = [
         EasyVoice is the best app for temporary Voice Channels!
       </>
     ),
-    link: 'https://ezsys.link/voice'
+    link: 'https://ezsys.link/voice',
+    docs: '/docs/easyvoice/intro',
+    brandColor: '#a1a7f6',
   },
   {
     title: 'EasyYAUDAB',
@@ -48,11 +56,13 @@ const FeatureList: FeatureItem[] = [
         Hello! Chat with EasyYAUDAB by mentioning him and writing your message!
       </>
     ),
-    link: 'https://ezsys.link/yaudab'
+    link: 'https://ezsys.link/yaudab',
+    docs: '/docs/easyyaudab/intro',
+    brandColor: '#f16aec',
   },
 ];
 
-function Feature({title, imgSrc, description, link}: FeatureItem) {
+function Feature({title, imgSrc, description, link, docs, brandColor}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
@@ -62,10 +72,26 @@ function Feature({title, imgSrc, description, link}: FeatureItem) {
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
       </div>
-      <div className="text--center padding-horiz--md">
-        <a href={link} className="button button--secondary button--lg">
+      <div className={styles.buttonContainer}>
+        <a 
+          href={link} 
+          className={`button ${styles.addToServerButton}`}
+          style={{
+            backgroundColor: brandColor,
+          }}
+        >
           Add to Server
         </a>
+        <a 
+          href={docs} 
+          className={`button ${styles.docsButton}`} 
+          style={{
+            borderColor: brandColor,
+            color: brandColor,
+          }}
+        >
+          VIEW DOCUMENTATION
+        </a>
       </div>
     </div>
   );
@@ -83,4 +109,4 @@ export default function HomepageFeatures(): JSX.Element {
       </div>
     </section>
   );
-}
+}

docusaurus/src/components/HomepageFeatures/styles.module.css

@@ -9,3 +9,48 @@
   height: 200px;
   width: 200px;
 }
+
+.docsButton {
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  background: #0f0c29; /* Dark background */
+  color: white;
+  border: 2px solid; /* Border color will be set inline */
+  padding: 5px 10px; /* Reduced padding */
+  font-size: 14px; /* Reduced font size */
+  cursor: pointer;
+  border-radius: 5px;
+  text-transform: uppercase;
+  letter-spacing: 1px; /* Reduced letter spacing */
+}
+
+.docsButton:hover {
+  box-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 20px currentColor, 0 0 40px currentColor;
+}
+
+.addToServerButton {
+  position: relative;
+  overflow: hidden;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+  color: white;
+  border: none;
+  padding: 5px 10px; /* Reduced padding */
+  font-size: 14px; /* Reduced font size */
+  cursor: pointer;
+  border-radius: 5px;
+  text-transform: uppercase;
+  letter-spacing: 1px; /* Reduced letter spacing */
+}
+
+.addToServerButton:hover {
+  color: white;
+  transform: scale(1.05); /* Slight scale effect */
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  gap: 10px; /* Space between buttons */
+  margin-top: 10px;
+}