feat: Updates nav, icon, colors, background and homepage

src/components/homepage/AboutSection.astro

@@ -1,6 +1,5 @@
 ---
 
-import Icon from '@components/molecules/Icon.svelte';
 import ButtonGroup from '@components/homepage/ButtonGroup.astro';
 import Features from '@components/homepage/Features.astro';
 import SponsorSegment from '@components/homepage/SponsorSegment.astro';
@@ -49,7 +48,7 @@ const links = [
   },
   {
     title: 'Deploy your Own',
-    url: 'https://github.com/lissy93/web-check',
+    url: '/self-hosted-setup',
     icon: 'rocket',
     isCta: false,
   },

src/components/homepage/HomeBackground.tsx

@@ -77,7 +77,7 @@ const generateMeteor = (id: number, gridSizeX: number, gridSizeY: number) => {
     duration,
     tailVisible: true,
     animationStage: 'traveling',
-    opacity: 1, // Initial opacity
+    opacity: 1,
   };
 };
 

src/components/molecules/Icon.svelte

@@ -11,6 +11,7 @@
     github: brands.faGithubAlt,
     code: solidIcons.faCode,
     rocket: solidIcons.faRocket,
+    copy: solidIcons.faCopy,
   };
 
   export let name: string;

src/components/scafold/Nav.astro

@@ -13,9 +13,9 @@
     </a>
   </div>
   <div class="nav-right">
-    <a href="/check" class="nav-link">Try Live</a>
-    <a href="/check/about" class="nav-link">About</a>
-    <a href="/account" class="nav-link">Join</a>
+    <a href="/check" class="nav-link">Check</a>
+    <a href="/about" class="nav-link">API</a>
+    <a href="/account" class="nav-link">Login</a>
   </div>
 </nav>
 
@@ -33,8 +33,6 @@
     margin: 0 auto;
     border-radius: 2rem;
     border: 1px solid var(--primary-transparent);
-
-    
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
@@ -79,16 +77,31 @@
         margin-left: 1rem;
         padding: 0.5rem;
         transition: background-color 0.3s;
-
+        position: relative;
         &:hover {
           background-color: var(--primary-light);
         }
-
         &:focus {
           outline: none;
           background-color: var(--primary-dark);
           box-shadow: 0 0 0 3px var(--primary);
         }
+        &:after {    
+          background: none repeat scroll 0 0 transparent;
+          bottom: 0;
+          content: "";
+          display: block;
+          height: 2px;
+          left: 50%;
+          position: absolute;
+          background: var(--primary);
+          transition: width 0.3s ease 0s, left 0.3s ease 0s;
+          width: 0;
+        }
+        &:hover:after { 
+          width: 100%; 
+          left: 0; 
+        }
       }
     }
   }

src/styles/colors.scss

@@ -6,7 +6,8 @@
   --text-color-thirdly: #ffffff5b;
   --background: #111211;
   --background-darker: #111927;
-  --background-lighter: #1a2332;
+  // --background-lighter: #1a2332;
+  --background-lighter: #3A3B3A;
   --background-50: #11121180;
   --bg-shadow-color: #0f1620;
   --fg-shadow-color: #456602;