refactor: update UI styling and download link to point to GitHub releases

src/app/(auth)/login/page.tsx

@@ -1,49 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { AuthLayout } from '@/components/AuthLayout'
-import { Button } from '@/components/Button'
-import { TextField } from '@/components/Fields'
-
-export const metadata: Metadata = {
-  title: 'Sign In',
-}
-
-export default function Login() {
-  return (
-    <AuthLayout
-      title="Sign in to account"
-      subtitle={
-        <>
-          Don’t have an account?{' '}
-          <Link href="/register" className="text-cyan-600">
-            Sign up
-          </Link>{' '}
-          for a free trial.
-        </>
-      }
-    >
-      <form>
-        <div className="space-y-6">
-          <TextField
-            label="Email address"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-          />
-          <TextField
-            label="Password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            required
-          />
-        </div>
-        <Button type="submit" color="cyan" className="mt-8 w-full">
-          Sign in to account
-        </Button>
-      </form>
-    </AuthLayout>
-  )
-}

src/app/(auth)/register/page.tsx

@@ -1,75 +0,0 @@
-import { type Metadata } from 'next'
-import Link from 'next/link'
-
-import { AuthLayout } from '@/components/AuthLayout'
-import { Button } from '@/components/Button'
-import { SelectField, TextField } from '@/components/Fields'
-
-export const metadata: Metadata = {
-  title: 'Sign Up',
-}
-
-export default function Register() {
-  return (
-    <AuthLayout
-      title="Sign up for an account"
-      subtitle={
-        <>
-          Already registered?{' '}
-          <Link href="/login" className="text-cyan-600">
-            Sign in
-          </Link>{' '}
-          to your account.
-        </>
-      }
-    >
-      <form>
-        <div className="grid grid-cols-2 gap-6">
-          <TextField
-            label="First name"
-            name="first_name"
-            type="text"
-            autoComplete="given-name"
-            required
-          />
-          <TextField
-            label="Last name"
-            name="last_name"
-            type="text"
-            autoComplete="family-name"
-            required
-          />
-          <TextField
-            className="col-span-full"
-            label="Email address"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-          />
-          <TextField
-            className="col-span-full"
-            label="Password"
-            name="password"
-            type="password"
-            autoComplete="new-password"
-            required
-          />
-          <SelectField
-            className="col-span-full"
-            label="How did you hear about us?"
-            name="referral_source"
-          >
-            <option>AltaVista search</option>
-            <option>Super Bowl commercial</option>
-            <option>Our route 34 city bus ad</option>
-            <option>The “Never Use This” podcast</option>
-          </SelectField>
-        </div>
-        <Button type="submit" color="cyan" className="mt-8 w-full">
-          Get started today
-        </Button>
-      </form>
-    </AuthLayout>
-  )
-}

src/app/(main)/download/page.tsx

@@ -0,0 +1,12 @@
+import { AnimatedSection } from '@/components/AnimatedSection'
+import { Hero } from '@/components/Hero'
+
+export default function Download() {
+  return (
+    <>
+      <AnimatedSection>
+        <Hero />
+      </AnimatedSection>
+    </>
+  )
+}

src/components/About.tsx

@@ -6,10 +6,10 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-black py-20 sm:py-28"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
-        <CircleBackground color="#fff" />
+        <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl sm:text-center">

src/components/DownloadLink.tsx

@@ -4,8 +4,10 @@ import { ArrowDownTrayIcon } from '@heroicons/react/24/solid'
 export function DownloadLink() {
   return (
     <Link
-      href="#"
+      href="https://github.com/threefoldtech/mycelium/releases"
       aria-label="Download Mycelium"
+      target="_blank"
+      rel="noopener noreferrer"
       className="inline-flex items-center rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-white hover:bg-cyan-600 transition-colors"
     >
       <ArrowDownTrayIcon className="h-5 w-5 mr-2" />

src/components/Header.tsx

@@ -126,7 +126,7 @@ export function Header() {
                             <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
                               Docs
                             </Button>
-                            <Button variant="solid" color="cyan" href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
+                            <Button variant="solid" color="cyan" href="/download/">Get Mycelium</Button>
                           </div>
                         </PopoverPanel>
                       </>

src/components/Hero.tsx

@@ -98,7 +98,7 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
+    <div className="overflow-hidden py-32">
       <Container>
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">