UI elements - Navbar & Download button

src/components/CallToAction.jsx

@@ -1,8 +1,8 @@
-import Image from 'next/image'
+import Image from 'next/image';
 
-import { Button } from '@/components/Button'
-import { Container } from '@/components/Container'
-import backgroundImage from '@/images/background-call-to-action.jpg'
+import {Button} from '@/components/Button';
+import {Container} from '@/components/Container';
+import backgroundImage from '@/images/background-call-to-action.jpg';
 import {BlurBG} from './BlurBG';
 
 // Responsively APP
@@ -27,7 +27,13 @@ export function CallToAction() {
           <p className="mt-4 text-lg tracking-tight text-white">
             Time to kick off your journey towards Web Development Mastery.
           </p>
-          <Button href="/download" color="white" className="mt-10">
+          <Button
+            variant="solid"
+            color="white"
+            className="mt-10 rounded-md px-10 py-2 text-lg font-semibold uppercase !text-emerald-500"
+            href="/download"
+          >
+
             Download Now
           </Button>
         </div>

src/components/Hero.jsx

@@ -48,7 +48,13 @@ export function Hero() {
         too! 🎉
       </p>
       <div className="mt-10 flex justify-center gap-x-6">
-        <Button href="/download">Download Now</Button>
+        <Button
+          variant="outline"
+          className="rounded-md border-[1px]  border-emerald-500 bg-transparent px-10 py-2 text-xl font-semibold shadow-sm shadow-emerald-500 hover:bg-emerald-500 hover:text-white"
+          href="/download"
+        >
+          Start Your Journey
+        </Button>
         {/* <Button variant="outline">
           <Icon icon="akar-icons:github-fill" className="h-5 w-5" />
           <span className="ml-3">Learn More</span>

src/components/NavLink.jsx

@@ -1,12 +1,12 @@
-import Link from 'next/link'
+import Link from 'next/link';
 import clsx from 'clsx';
 
 export function NavLink({href, className = '', children, ...props}) {
   return (
     <Link
       href={href}
       className={clsx(
-        'inline-block rounded-lg px-2 py-1 text-sm text-slate-700 hover:bg-slate-100 hover:text-slate-900',
+        'inline-block rounded-lg px-3 py-1 text-sm text-slate-700 hover:text-gray-800 hover:shadow-lg',
         className
       )}
       {...props}

src/components/StarButton/index.tsx

@@ -1,6 +1,6 @@
-import {Icon} from '@iconify/react';
-import {NavLink} from '../NavLink';
-import {useEffect, useState} from 'react';
+import { Icon } from '@iconify/react';
+import { NavLink } from '../NavLink';
+import { useEffect, useState } from 'react';
 
 export const StarButton = () => {
   const [count, setCount] = useState<number>(20400);
@@ -30,7 +30,7 @@ export const StarButton = () => {
           <Icon
             icon="material-symbols:star-outline-rounded"
             fontSize={22}
-            className="origin-center transition-transform duration-300 group-hover:scale-125"
+            className="origin-center transition-transform duration-300 group-hover:scale-125 hover:text-yellow-400"
           />
           {count.toLocaleString()} Stars
         </span>

src/pages/download.tsx

@@ -1,17 +1,18 @@
 import TimeAgo from 'javascript-time-ago';
 import en from 'javascript-time-ago/locale/en';
-import {usePlausible} from 'next-plausible';
+import { usePlausible } from 'next-plausible';
 import Head from 'next/head';
 
-import {Button} from '@/components/Button';
-import {Header} from '@/components/Header';
-import {Footer} from '@/components/Footer';
-import {Container} from '@/components/Container';
-import {BlurBG} from '@/components/BlurBG';
-import {useEffect, useState} from 'react';
+import { Button } from '@/components/Button';
+import { Header } from '@/components/Header';
+import { Footer } from '@/components/Footer';
+import { Container } from '@/components/Container';
+import { BlurBG } from '@/components/BlurBG';
+import { useEffect, useState } from 'react';
 import allDevicesSideBySide from '@/images/screenshots/all-devices-side-by-side.png';
 import Image from 'next/image';
-import {SponsorsAndContributors} from '@/components/SponsorsAndContributors';
+import { SponsorsAndContributors } from '@/components/SponsorsAndContributors';
+import { Icon } from '@iconify/react';
 
 TimeAgo.addDefaultLocale(en);
 const timeAgo = new TimeAgo('en-US');
@@ -79,26 +80,53 @@ export default function Download() {
           <div className="mt-8 flex flex-col items-center justify-center space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
             <Button
               href={macURL}
-              onClick={() => plausible('appDownload', {props: {arch: 'mac-silicon'}})}
+              onClick={() => plausible('appDownload', { props: { arch: 'mac-silicon' } })}
+              className='flex items-center gap-1'
             >
+              <Icon
+                icon={'ic:baseline-apple'}
+                fontSize={22}
+                className="origin-center mx-0.5 transition-transform duration-300 group-hover:scale-125"
+              />
               Mac (Apple Silicon)
             </Button>
             <Button
               href={macIntelURL}
-              onClick={() => plausible('appDownload', {props: {arch: 'mac-intel'}})}
+              onClick={() => plausible('appDownload', { props: { arch: 'mac-intel' } })}
+              className='flex items-center gap-1'
+
             >
+              <Icon
+                icon={'ic:baseline-apple'}
+                fontSize={22}
+                className="origin-center mx-0.5 transition-transform duration-300 group-hover:scale-125"
+              />
               Mac (Intel)
             </Button>
             <Button
               href={winURL}
-              onClick={() => plausible('appDownload', {props: {arch: 'windows'}})}
+              onClick={() => plausible('appDownload', { props: { arch: 'windows' } })}
+              className='flex items-center gap-1'
+
             >
+              <Icon
+                icon={'cib:windows'}
+                fontSize={22}
+                className="origin-center mx-0.5 transition-transform duration-300 group-hover:scale-125"
+              />
               Windows
             </Button>
             <Button
               href={linuxURL}
-              onClick={() => plausible('appDownload', {props: {arch: 'linux'}})}
+              onClick={() => plausible('appDownload', { props: { arch: 'linux' } })}
+              className='flex items-center gap-1'
+
             >
+              <Icon
+                icon={'cib:linux'}
+                fontSize={22}
+                className="origin-center mx-0.5 transition-transform duration-300 group-hover:scale-125"
+              />
               Linux
             </Button>
           </div>