docs: add documentation for download page, 404 page, typography and button components

Reviewed-on: ourworld_web/www_mycelium_net#1

.gitignore

@@ -53,7 +53,7 @@ node_modules/
 public
 
 # Storybook build outputs
-.out
+out/
 .storybook-out
 
 # Temporary folders

README.md

@@ -1,35 +1,231 @@
-# Mycelium
+# Mycelium Network Website
 
-Mycelium is a [Tailwind Plus](https://tailwindcss.com/plus) site template built using [Tailwind CSS](https://tailwindcss.com) and [Next.js](https://nextjs.org).
+- **Repository:** [https://git.ourworld.tf/ourworld_web/www_mycelium_net/](https://git.ourworld.tf/ourworld_web/www_mycelium_net/)
 
-## Getting started
+- **Main Branch (Production):** [https://network.mycelium.tf/](https://network.mycelium.tf/)
+- **Dev Branch (Staging):** [https://www2.network.mycelium.tf/](https://www2.network.mycelium.tf/)
 
-To get started with this template, first install the npm dependencies:
 
-```bash
-npm install
+---
+
+## About
+
+This is the official website for Mycelium Network, built using Next.js and Tailwind CSS.
+
+---
+
+## Technologies
+
+- **Framework**: [Next.js](https://nextjs.org/)
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
+
+---
+
+## Dependencies
+
+- **UI**: [@headlessui/react](https://headlessui.com/)
+- **Animation**: [framer-motion](https://www.framer.com/motion/)
+- **Utilities**: [clsx](https://github.com/lukeed/clsx), [use-debounce](https://github.com/xnimorz/use-debounce)
+
+---
+
+## File Structure
+
+- **Pages**: To edit the content of a specific page, navigate to `src/app/(main)/`.
+- **Components**: Reusable components are located in `src/components/`.
+- **Images**: Add or modify images in the `public/images/` directory.
+- **CSS**: Global styles can be found in `src/styles/tailwind.css`. Most styling is done using Tailwind CSS utility classes directly in the `.tsx` files.
+
+---
+
+## Branding
+
+- **Font**: The primary font used is [Inter](https://fonts.google.com/specimen/Inter).
+- **Logos**: Project logos are stored in `public/images/`.
+
+---
+
+## Get Started
+
+Follow these steps to get the project running locally:
+
+1.  **Install Dependencies**:
+
+    ```bash
+    npm install
+    ```
+
+2.  **Build the Project**:
+
+    ```bash
+    npm run build
+    ```
+
+3.  **Start the Development Server**:
+
+    ```bash
+    npm run start
+    ```
+
+---
+
+## Contributing
+
+- **Never update the `main` branch directly.** All changes must be reviewed and merged by the team through a pull request.
+- **Always work on the `development` branch.** Create a feature branch from `development` and submit your pull request to `development`.
+- **Request a review.** After submitting your pull request, ask the team to review and accept it into the `main` branch.
+
+---
+
+## Report an Error
+
+To report an issue, please use the following link and provide the requested information:
+
+- **Issue Tracker**: [git.ourworld.tf/ourworld_web/HOME/issues/new](https://git.ourworld.tf/ourworld_web/HOME/issues/new) and tag **OW Website & Wiki Project 2025**
+
+- See the current web rpoject on [OW Website & Wiki Project 2025](https://git.ourworld.tf/ourworld_web/-/projects/153)
+
+When reporting an issue, please include:
+
+- **URL**: The page where the error occurred.
+- **Repo**: The repository you are working with.
+- **Branch**: The specific branch you are on.
+- **Problem**: A detailed description of the problem.
+
+---
+
+## Questions
+
+If you have any questions, you can reach out to [sashaastiadi](https://git.ourworld.tf/sashaastiadi).
+
+---
+
+## Development Guide
+
+This project follows a modular, component-based architecture. Pages are assembled by combining reusable components into a single layout.
+
+### Homepage Structure
+
+The homepage (`src/app/(main)/page.tsx`) is composed of the following components, wrapped in `<AnimatedSection>`:
+
+- `Hero`
+- `About`
+- `Features`
+- `PrimaryFeatures`
+- `SecondaryFeatures`
+- `CallToAction`
+- `Faqs`
+
+To edit a specific section of the homepage, navigate to `src/components/` and modify the corresponding component file.
+
+### Base Layout
+
+The main layout for the application is defined in `src/components/Layout.tsx`. This file includes the `Header` and `Footer` and wraps the primary content of each page.
+
+### Creating a New Page
+
+To create a new page, follow these steps:
+
+1.  **Create a Folder**: Inside the `src/app/(main)/` directory, create a new folder with the desired URL slug for your page (e.g., `new-page`).
+
+2.  **Create the Page File**: Inside the new folder, create a `page.tsx` file.
+
+3.  **Add Page Content**: Compose your page by importing and using the reusable components from `src/components/`. For example:
+
+    ```tsx
+    import { Hero } from '@/components/Hero'
+    import { Faqs } from '@/components/Faqs'
+
+    export default function NewPage() {
+      return (
+        <>
+          <Hero />
+          <Faqs />
+        </>
+      )
+    }
+    ```
+
+The new page will be accessible at `http://localhost:3000/new-page`.
+
+### Download Page
+
+The download page, located at `src/app/(main)/download/page.tsx`, provides users with download links for the Mycelium application across various operating systems. The page is composed of the following components:
+
+- **DownloadHero**: Displays the main header and a grid of download cards for each supported platform (iOS, macOS, Windows, Android, and Linux).
+- **DevHub**: Provides links to developer resources, including documentation, support channels, forums, and community groups.
+- **Faqs**: A frequently asked questions section to address common user queries.
+
+### Not Found Page
+
+The `not-found.tsx` file at `src/app/not-found.tsx` defines a custom 404 error page. This page is displayed whenever a user navigates to a non-existent route. It features a clean and simple layout with a 404 message and a button that directs the user back to the homepage.
+
+### Typography with `Texts.tsx`
+
+The `src/components/Texts.tsx` file implements a flexible and consistent typography system using a factory pattern. It exports a set of reusable text components, such as `H1`, `P`, and `SectionHeader`, each with predefined styles and color variants.
+
+This approach ensures that the visual hierarchy and design language remain consistent throughout the application. To use a text component, simply import it and use it like any other React component:
+
+```tsx
+import { H1, P } from '@/components/Texts';
+
+function MyComponent() {
+  return (
+    <div>
+      <H1 color="accent">This is a heading</H1>
+      <P color="secondary">This is a paragraph.</P>
+    </div>
+  );
+}
 ```
 
-Next, run the development server:
+### Button Components
 
-```bash
-npm run dev
+The `src/components/Button.tsx` file provides a polymorphic button component that can be rendered as either a `<button>` or a Next.js `<Link>`. It supports two main variants (`solid` and `outline`) and multiple color schemes.
+
+This component is used throughout the application to ensure that all buttons and links have a consistent look and feel. Example usage:
+
+```tsx
+import { Button } from '@/components/Button';
+
+function MyComponent() {
+  return (
+    <div>
+      <Button variant="solid" color="cyan">Submit</Button>
+      <Button href="/about" variant="outline">Learn More</Button>
+    </div>
+  );
+}
 ```
 
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+### Adding Images
 
-## Customizing
+To add images to the project while ensuring they are optimized, use the Next.js `Image` component. Follow these steps:
 
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+1.  **Place Your Image**: Add your image file to the `src/images/` directory.
 
-## License
+2.  **Import the Image**: In the component where you want to display the image, import it at the top of the file:
 
-This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
+    ```tsx
+    import myImage from '@/images/my-image.png';
+    ```
 
-## Learn more
+3.  **Use the `Image` Component**: Use the `Image` component from `next/image` to render your image. Provide the `src`, `alt`, `width`, and `height` props for proper rendering and accessibility.
 
-To learn more about the technologies used in this site template, see the following resources:
+    ```tsx
+    import Image from 'next/image';
+    import myImage from '@/images/my-image.png';
 
-- [Tailwind CSS](https://tailwindcss.com/docs) - the official Tailwind CSS documentation
-- [Next.js](https://nextjs.org/docs) - the official Next.js documentation
-- [Headless UI](https://headlessui.dev) - the official Headless UI documentation
+    export function MyComponent() {
+      return (
+        <Image
+          src={myImage}
+          alt="A descriptive alt text for accessibility"
+          width={500}
+          height={300}
+          priority // Optional: Add this if the image is critical for the initial page load
+        />
+      );
+    }
+    ```

next.config.js

@@ -1,4 +1,12 @@
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+    output: 'export',
+    trailingSlash: true,
+    images: {
+        unoptimized: true,
+    },
+}
 
 module.exports = nextConfig
+

package-lock.json

@@ -14,11 +14,12 @@
         "@types/node": "^20.10.8",
         "@types/react": "^18.2.47",
         "@types/react-dom": "^18.2.18",
-        "clsx": "^2.1.0",
+        "clsx": "^2.1.1",
         "framer-motion": "^10.15.0",
         "next": "^14.0.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.7",
         "typescript": "^5.3.3",
         "use-debounce": "^10.0.0"
@@ -1881,9 +1882,10 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
     "node_modules/clsx": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
-      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -4942,6 +4944,16 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
       "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.7",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",

package.json

@@ -16,11 +16,12 @@
     "@types/node": "^20.10.8",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "framer-motion": "^10.15.0",
     "next": "^14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.7",
     "typescript": "^5.3.3",
     "use-debounce": "^10.0.0"

src/app/api/subscribe/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { email } = await req.json();
+
+  if (!email) {
+    return NextResponse.json({ error: 'Email is required' }, { status: 400 });
+  }
+
+  const MAILERLITE_API_KEY = process.env.MAILERLITE_API_KEY;
+  const MAILERLITE_GROUP_ID = process.env.MAILERLITE_GROUP_ID;
+
+  if (!MAILERLITE_API_KEY || !MAILERLITE_GROUP_ID) {
+    return NextResponse.json(
+      { error: 'MailerLite API key or Group ID are not configured' },
+      { status: 500 },
+    );
+  }
+
+  try {
+    const response = await fetch(
+      `https://api.mailerlite.com/api/v2/groups/${MAILERLITE_GROUP_ID}/subscribers`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-MailerLite-ApiKey': MAILERLITE_API_KEY,
+        },
+        body: JSON.stringify({ email }),
+      },
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      return NextResponse.json(
+        { error: errorData.error.message || 'Something went wrong' },
+        { status: response.status },
+      );
+    }
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'An unexpected error occurred' },
+      { status: 500 },
+    );
+  }
+}

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import { type Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import Script from 'next/script'
 import clsx from 'clsx'
 
 import '@/styles/tailwind.css'
@@ -17,6 +18,9 @@ export const metadata: Metadata = {
   },
   description:
     'Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.',
+  icons: {
+    icon: '/favicon.ico',
+  },
 }
 
 export default function RootLayout({
@@ -26,7 +30,28 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" className={clsx('bg-gray-50 antialiased', inter.variable)}>
-      <body>{children}</body>
+      <body>
+        {children}
+        
+        {/* Crisp Chat */}
+        <Script
+          id="crisp-init"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+              window.$crisp = [];
+              window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
+              (function () {
+                  d = document;
+                  s = d.createElement("script");
+                  s.src = "https://client.crisp.chat/l.js";
+                  s.async = 1;
+                  d.getElementsByTagName("head")[0].appendChild(s);
+              })();
+            `,
+          }}
+        />
+      </body>
     </html>
   )
 }

src/app/not-found.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/Button'
+import { P, SectionHeader, Small } from '@/components/Texts'
 import { CirclesBackground } from '@/components/CirclesBackground'
 import { Container } from '@/components/Container'
 import { Layout } from '@/components/Layout'
@@ -8,13 +9,13 @@ export default function NotFound() {
     <Layout>
       <Container className="relative isolate flex h-full flex-col items-center justify-center py-20 text-center sm:py-32">
         <CirclesBackground className="absolute top-1/2 left-1/2 -z-10 mt-44 w-272.5 -translate-x-1/2 -translate-y-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30" />
-        <p className="text-sm font-semibold text-gray-900">404</p>
-        <h1 className="mt-2 text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+        <Small as="p" color="primary">404</Small>
+        <SectionHeader as="h1" className="mt-2">
           Page not found
-        </h1>
-        <p className="mt-2 text-lg text-gray-600">
+        </SectionHeader>
+        <P color="secondary" className="mt-2">
           Sorry, we couldn’t find the page you’re looking for.
-        </p>
+        </P>
         <Button href="/" variant="outline" className="mt-8">
           Go back home
         </Button>

src/components/About.tsx

@@ -1,4 +1,5 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { Eyebrow, P, SectionHeader } from '@/components/Texts'
 import { Button } from '@/components/Button'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
@@ -10,23 +11,27 @@ export function About() {
       className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-3xl text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">Our Mission</h2>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+          <Eyebrow color="accent">Our Mission</Eyebrow>
+          <SectionHeader color="white" className="mt-2">
             Discover Mycelium
-          </p>
-          <p className="mt-6 text-lg text-gray-300">
-            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
-          </p>
-          <p className="mt-6 text-lg text-gray-300">
-            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
-          </p>
+          </SectionHeader>
+          <P color="light" className="mt-6">
+            Mycelium is an unbreakable network, always finding the shortest path and
+            providing 100% secure, peer-to-peer communication. But this is just
+            the beginning.
+          </P>
+          <P color="light" className="mt-6">
+            Our mission is to create a sustainable digital ecosystem where
+            communication is seamless, data is secure, and scalability knows no
+            bounds.
+          </P>
           <div className="mt-8 flex justify-center">
             <Button
-              href="https://docs.ourworld.tf/mycelium_cloud/docs/"
+              href="https://threefold.info/mycelium_network/docs/"
               target="_blank"
               variant="outline"
               color="white"

src/components/AndroidLink.tsx

@@ -11,7 +11,7 @@ export function AndroidLink({
       href="#"
       aria-label="Download for Android"
       className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
+        'flex items-center rounded-lg px-4 py-2 transition-all hover:scale-105',
         color === 'black'
           ? 'bg-gray-800 text-white hover:bg-gray-900'
           : 'bg-white text-gray-900 hover:bg-gray-50',

src/components/AppStoreLink.tsx

@@ -11,7 +11,7 @@ export function AppStoreLink({
       href="https://apps.apple.com/us/app/mycelium-network/id6504277565"
       aria-label="Download on the App Store"
       className={clsx(
-        'rounded-lg transition-colors',
+        'rounded-lg transition-all hover:scale-105',
         color === 'black'
           ? 'bg-gray-800 text-white hover:bg-gray-900'
           : 'bg-white text-gray-900 hover:bg-gray-50',

src/components/Button.tsx

@@ -5,7 +5,7 @@ const baseStyles = {
   solid:
     'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
   outline:
-    'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
+    'inline-flex justify-center rounded-lg border py-[calc(0.5rem-1px)] px-[calc(0.75rem-1px)] text-sm font-semibold transition-colors',
 }
 
 const variantStyles = {
@@ -14,10 +14,11 @@ const variantStyles = {
     white:
       'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
     gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
+    green: 'bg-green-500 text-white hover:bg-green-600',
   },
   outline: {
-    gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
-    white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', 
+    gray: 'border-gray-300 text-gray-600 hover:border-cyan-500 active:border-cyan-500',
+    white: 'border-gray-300 text-white hover:border-cyan-500 active:border-cyan-500',
   },
 }
 

src/components/CallToAction.tsx

@@ -1,4 +1,5 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { P, SectionHeader } from '@/components/Texts'
 import { WindowsLink } from '@/components/WindowsLink'
 import { AndroidLink } from './AndroidLink'
 import { LinuxLink } from '@/components/LinuxLink'
@@ -12,17 +13,18 @@ export function CallToAction() {
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#fff" className="animate-spin-slower" />
+        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
-        <div className="mx-auto max-w-2xl sm:text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+      <Container>
+        <div className="mx-auto max-w-2xl text-center">
+          <SectionHeader as="h2" color="white">
             Get Started Today
-          </h2>
-          <p className="mt-6 text-lg text-gray-300">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
-          </p>
-          <div className="mt-8 grid grid-cols-2 justify-items-center gap-4 sm:flex sm:justify-center">
+          </SectionHeader>
+          <P color="lightSecondary" className="mt-6">
+            Download the Mycelium app and step into the future of secure,
+            peer-to-peer networking; fast, private, and decentralized.
+          </P>
+          <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <AppStoreLink color="white" />
             <WindowsLink color="white" />
             <AndroidLink color="white" />

src/components/DevHub.tsx

@@ -1,18 +1,43 @@
-import { CheckIcon } from '@heroicons/react/20/solid'
+import {
+  Eyebrow,
+  FeatureDescription,
+  P,
+  SectionHeader,
+  SecondaryFeatureTitle,
+} from './Texts'
+import {
+  BookOpenIcon,
+  LifebuoyIcon,
+  ChatBubbleOvalLeftEllipsisIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
 
 const features = [
   {
     name: 'Documentation',
     description: 'Documentation for Mycelium.',
+    href: 'https://threefold.info/mycelium_network/docs/',
+    icon: BookOpenIcon,
+  },
+  {
+    name: 'Support',
+    description: 'Talk to an expert.',
+    href: 'https://threefoldfaq.crisp.help/en/',
+    icon: LifebuoyIcon,
   },
-  { name: 'Support', description: 'Talk to an expert.' },
   {
     name: 'Forum',
     description: 'Forum for all your questions.',
+    href: 'https://forum.threefold.io/',
+    icon: ChatBubbleOvalLeftEllipsisIcon,
   },
-  { name: 'Community', description: 'Join our Developers community on telegram.' },
-
-]
+  {
+    name: 'Community',
+    description: 'Join our Developers community on telegram.',
+    href: 'https://t.me/threefoldtesting',
+    icon: UserGroupIcon,
+  },
+];
 
 export function DevHub() {
   return (
@@ -20,27 +45,40 @@ export function DevHub() {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
-            <h2 className="text-base/7 font-semibold text-cyan-500 mb-2">Get Started</h2>
-            <p className="text-4xl font-semibold tracking-tight text-pretty text-white sm:text-5xl">
+            <Eyebrow color="accent" className="mb-2">Get Started</Eyebrow>
+            <SectionHeader as="h2" color="white">
               Developer Hub
-            </p>
-            <p className="mt-6 text-base/7 text-gray-300">
-               Our Developer Hub is a resource center for developers looking to build on top of Mycelium. Join our Developers community on telegram to get started.
-            </p>
+            </SectionHeader>
+            <P color="lightSecondary" className="mt-6">
+              Our Developer Hub is a resource center for developers looking to build
+              on top of Mycelium. Join our Developers community on telegram to get
+              started.
+            </P>
           </div>
-          <dl className="col-span-3 grid grid-cols-1 gap-x-8 gap-y-10 text-base/7 text-gray-400 sm:grid-cols-2 lg:gap-y-16">
+          <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
             {features.map((feature) => (
-              <div key={feature.name} className="relative pl-9">
-                <dt className="font-semibold text-white">
-                  <CheckIcon aria-hidden="true" className="absolute top-1 left-0 size-5 text-indigo-400" />
+              <a
+                key={feature.name}
+                href={feature.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block rounded-2xl border border-gray-700 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 hover:bg-gray-800"
+              >
+                <feature.icon
+                  aria-hidden="true"
+                  className="h-6 w-6 flex-none text-cyan-500 mb-4"
+                />
+                <SecondaryFeatureTitle as="dt" color="white">
                   {feature.name}
-                </dt>
-                <dd className="mt-2">{feature.description}</dd>
-              </div>
+                </SecondaryFeatureTitle>
+                <FeatureDescription as="dd" color="secondary" className="mt-2">
+                  {feature.description}
+                </FeatureDescription>
+              </a>
             ))}
           </dl>
         </div>
       </div>
     </div>
-  )
+  );
 }

src/components/DownloadHero.tsx

@@ -1,4 +1,13 @@
+'use client'
+
 import Image from 'next/image';
+import {
+  DownloadCardDescription,
+  DownloadCardTitle,
+  P,
+  PageHeader,
+} from './Texts'
+import { motion } from 'framer-motion';
 import appleIcon from '@/images/apple.svg';
 import windowsIcon from '@/images/windows.svg';
 import androidIcon from '@/images/android.svg';
@@ -26,7 +35,7 @@ const features = [
   {
     name: 'Download for Linux',
     description: 'Download the Mycelium binary for Linux directly from its Github repository.',
-    href: 'https://github.com/threefoldtech/mycelium/releases/tag/v0.6.1',
+    href: 'https://github.com/threefoldtech/mycelium/releases',
     icon: linuxIcon,
   },
 ];
@@ -36,37 +45,59 @@ export default function DownloadHero() {
     <div className=" py-16 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
-            Download Mycelium
-          </h2>
-          <p className="mt-6 text-lg/8 text-gray-600">
-            Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
-            <a href="https://docs.ourworld.tf/mycelium_cloud/docs/" className="text-cyan-500 hover:text-cyan-600 font-semibold underline">
-              Read the manual.
-            </a>
-          </p>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <PageHeader>Download Mycelium</PageHeader>
+          </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <P color="secondary" className="mt-6 text-lg/8">
+              Get Mycelium for Android, Windows, macOS, and iOS to securely
+              connect, store, and interact with the decentralized
+              network—seamlessly and efficiently. Not sure how it works?{' '}
+              <a
+                href="https://threefold.info/mycelium_network/docs/"
+                className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline"
+              >
+                Read the manual.
+              </a>
+            </P>
+          </motion.div>
         </div>
         <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
           <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none md:grid-cols-2 lg:grid-cols-4">
             {features.map((feature) => (
               <div
                 key={feature.name}
-                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:bg-gray-50 hover:shadow-md hover:scale-105"
+                className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
               >
-                <dt className="text-base/7 font-semibold text-gray-900">
+                <DownloadCardTitle color="primary">
                   <div className="mb-6 flex h-10 w-10 items-center justify-center">
                     <Image src={feature.icon} alt="" className="h-10 w-10" />
                   </div>
                   {feature.name}
-                </dt>
-                <dd className="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
+                </DownloadCardTitle>
+                <DownloadCardDescription
+                  as="dd"
+                  color="secondary"
+                  className="mt-1 flex flex-auto flex-col"
+                >
                   <p className="flex-auto">{feature.description}</p>
                   <p className="mt-6">
-                    <a href={feature.href} className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500">
+                    <a
+                      href={feature.href}
+                      className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500"
+                    >
                       Download Now <span aria-hidden="true">→</span>
                     </a>
                   </p>
-                </dd>
+                </DownloadCardDescription>
               </div>
             ))}
           </dl>

src/components/DownloadLink.tsx

@@ -4,10 +4,8 @@ import { ArrowDownTrayIcon } from '@heroicons/react/24/solid'
 export function DownloadLink() {
   return (
     <Link
-      href="https://github.com/threefoldtech/mycelium/releases"
+      href="/download"
       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/Faqs.tsx

@@ -1,4 +1,5 @@
 import { Container } from '@/components/Container'
+import { Answer, P, Question, SectionHeader } from './Texts'
 
 const faqs = [
   [
@@ -8,9 +9,9 @@ const faqs = [
         'Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.',
     },
     {
-      question: 'Is mycelium ready to scale to the world?',
+      question: 'Is Mycelium ready to scale to the world?',
       answer:
-        'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025.',
+        'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity.',
     },
     {
       question: 'How do I install Mycelium?',
@@ -58,22 +59,19 @@ export function Faqs() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2
-            id="faqs-title"
-            className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900"
-          >
+          <SectionHeader id="faqs-title" as="h2">
             Frequently asked questions
-          </h2>
-          <p className="mt-2 text-lg text-gray-600">
+          </SectionHeader>
+          <P color="secondary" className="mt-2">
             If you have anything else you want to ask,{' '}
             <a
-              href="mailto:info@example.com"
-              className="text-gray-900 underline"
+              href="https://threefoldfaq.crisp.help/en/"
+              className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline"
             >
               reach out to us
             </a>
             .
-          </p>
+          </P>
         </div>
         <ul
           role="list"
@@ -84,10 +82,8 @@ export function Faqs() {
               <ul role="list" className="space-y-10">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="text-lg/6 font-semibold text-gray-900">
-                      {faq.question}
-                    </h3>
-                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
+                    <Question color="primary">{faq.question}</Question>
+                    <Answer color="tertiary">{faq.answer}</Answer>
                   </li>
                 ))}
               </ul>

src/components/Features.tsx

@@ -1,3 +1,4 @@
+import { CardDescription, CardEyebrow, CardTitle, Eyebrow, P, SectionHeader } from '@/components/Texts'
 import Pathfinding from '@/components/Pathfinding'
 import MessageBus from '@/components/MessageBus'
 import ProxyDetection from '@/components/ProxyDetection'
@@ -8,101 +9,109 @@ export function Features() {
   return (
     <section id="features" className=" py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
-        <p className="mt-2 max-w-4xl text-3xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
+        <Eyebrow color="accent">Core Components</Eyebrow>
+        <SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
           Network Capabilities
-        </p>
-        <p className="mt-4 max-w-xl text-lg text-gray-600">
-            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
-        </p>
-        <p className="mt-2 max-w-xl text-lg text-gray-600">
-Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
-        </p>  
+        </SectionHeader>
+        <P color="secondary" className="mt-4 max-w-4xl">
+          Built for resilience and autonomy, the Mycelium Network dynamically
+          connects nodes through intelligent routing, proxy discovery, and
+          decentralized delivery.
+        </P>
+        <P color="secondary" className="mt-2 max-w-4xl">
+          Each component — from message passing to content distribution — works in
+          harmony to create a fully self-healing, self-optimizing data mesh.
+        </P>  
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
-          <div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
               <Pathfinding />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardEyebrow color="accent">Routing</CardEyebrow>
+                <CardTitle color="dark" className="mt-2">
                   Automatic pathfinding
-                </p>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                  The Mycelium Network automatically discovers the shortest and fastest routes between nodes, 
-                  ensuring optimal data flow and network efficiency without manual configuration.
-                </p>
+                </CardTitle>
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  The Mycelium Network automatically discovers the shortest and
+                  fastest routes between nodes, ensuring optimal data flow and
+                  network efficiency without manual configuration.
+                </CardDescription>
               </div>
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
           </div>
-          <div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
               <MessageBus />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardEyebrow color="accent">Communication</CardEyebrow>
+                <CardTitle color="dark" className="mt-2">
                   Distributed message bus
-                </p>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                  Acts as a global message layer that lets nodes exchange information seamlessly. 
-                  Enables resilient, asynchronous communication across the entire decentralized mesh.
-                </p>
+                </CardTitle>
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  Acts as a global message layer that lets nodes exchange
+                  information seamlessly. Enables resilient, asynchronous
+                  communication across the entire decentralized mesh.
+                </CardDescription>
               </div>
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
           </div>
-          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
               <ProxyDetection className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardEyebrow color="accent">Discovery</CardEyebrow>
+                <CardTitle color="dark" className="mt-2">
                   Automatic proxy detection
-                </p>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                  The system continuously scans for open SOCKS5 proxies within the network, 
-                  making it effortless to find available connection points without manual setup.
-                </p>
+                </CardTitle>
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  The system continuously scans for open SOCKS5 proxies within the
+                  network, making it effortless to find available connection points
+                  without manual setup.
+                </CardDescription>
               </div>
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
           </div>
-          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
               <ProxyForwarding className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardEyebrow color="accent">Connectivity</CardEyebrow>
+                <CardTitle color="dark" className="mt-2">
                   Seamless proxy forwarding
-                </p>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                  Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies. 
-                  When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.
-                </p>
+                </CardTitle>
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  Local SOCKS5 connections can be forwarded through nearby nodes or
+                  remote proxies. When browsers use the local proxy, traffic moves
+                  securely through the mesh—like a built-in VPN.
+                </CardDescription>
               </div>
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
           </div>
-          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
+          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
+            <div className="flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
               <ContentDistribution className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardEyebrow color="accent">Delivery</CardEyebrow>
+                <CardTitle color="dark" className="mt-2">
                   Decentralized content distribution
-                </p>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
-                  Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers 
-                  content faster and more reliably—without relying on centralized servers.
-                </p>
+                </CardTitle>
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  Mycelium can serve data from distributed 0-DBs, creating a
+                  CDN-like layer that delivers content faster and more
+                  reliably—without relying on centralized servers.
+                </CardDescription>
               </div>
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl" />
+            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
           </div>
         </div>
       </div>

src/components/Footer.tsx

@@ -1,26 +1,66 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
+import { useState } from 'react'
 
 import { Button } from '@/components/Button'
 import { Container } from '@/components/Container'
 import { TextField } from '@/components/Fields'
 import { NavLinks } from '@/components/NavLinks'
 import github from '@/images/github.svg'
+import logomark from '@/images/logomark.svg'
 
 export function Footer() {
+  const [email, setEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLoading(true);
+    setSuccess(false);
+    setMessage('');
+
+    try {
+      const response = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Something went wrong');
+      }
+
+      setSuccess(true);
+      setMessage('Thanks for subscribing!');
+      setEmail('');
+    } catch (error: any) {
+      setMessage(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <footer className="border-t border-gray-200">
       <Container>
         <div className="flex flex-col items-start justify-between gap-y-12 pt-16 pb-6 lg:flex-row lg:items-center lg:py-8">
           <div>
             <div className="flex items-center text-gray-900">
-              <Image src="/images/logo.svg" alt="Mycelium Logomark" width={60} height={60} className="h-20 w-20 flex-none" />
+              <Image src={logomark} alt="Mycelium Logomark" width={60} height={60} className="h-20 w-20 flex-none" />
               <div className="ml-4">
                 <p className="text-base font-semibold">Mycelium</p>
                 <p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
               </div>
             </div>
-            <nav className="mt-11 flex gap-8">
+            <nav className="mt-10 flex gap-8">
               <NavLinks />
             </nav>
           </div>
@@ -42,22 +82,35 @@ export function Footer() {
           </div>
         </div>
         <div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
-          <form className="flex w-full justify-center md:w-auto">
-            <TextField
-              type="email"
-              aria-label="Email address"
-              placeholder="Email address"
-              autoComplete="email"
-              required
-              className="w-60 min-w-0 shrink"
-            />
-            <Button type="submit" color="cyan" className="ml-4 flex-none">
-              <span className="hidden lg:inline">Join our newsletter</span>
-              <span className="lg:hidden">Join newsletter</span>
-            </Button>
-          </form>
+          <div>
+            <form className="flex w-full justify-center md:w-auto" onSubmit={handleSubmit}>
+              <TextField
+                type="email"
+                aria-label="Email address"
+                placeholder="Email address"
+                autoComplete="email"
+                required
+                className="w-60 min-w-0 shrink"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button
+                type="submit"
+                color={success ? 'green' : 'cyan'}
+                className="ml-4 flex-none"
+                disabled={loading || success}
+              >
+                {loading ? 'Joining...' : success ? 'Sent!' : <><span className="hidden lg:inline">Join our newsletter</span><span className="lg:hidden">Join newsletter</span></>}
+              </Button>
+            </form>
+            {message && <p className="mt-2 text-sm text-gray-600">{message}</p>}
+          </div>
           <p className="mt-6 text-sm text-gray-500 md:mt-0">
-            &copy; Copyright ThreeFold {new Date().getFullYear()}. All rights reserved.
+            &copy; Copyright{' '}
+            <a href="https://www.threefold.io" target="_blank" rel="noopener noreferrer" className="hover:text-cyan-500 transition-colors">
+              ThreeFold
+            </a>{' '}
+            {new Date().getFullYear()}. All rights reserved.
           </p>
         </div>
       </Container>

src/components/Header.tsx

@@ -108,7 +108,7 @@ export function Header() {
                           className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
                         >
                           <div className="mt-6 flex flex-col gap-4">
-                            <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
+                            <Button href="https://threefold.info/mycelium_network/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                               Docs
                             </Button>
                             <Button variant="solid" color="cyan" href="/download/">Get Mycelium</Button>
@@ -121,7 +121,7 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
+              <Button href="https://threefold.info/mycelium_network/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
                 Docs
               </Button>
               <Button href="/download/" variant="solid" color="cyan">Get Mycelium</Button>

src/components/Hero.tsx

@@ -3,7 +3,9 @@ import Image from 'next/image'
 import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
+import { H1, H2, H3, H4, H5, P } from '@/components/Texts'
 import { Button } from '@/components/Button'
+import phoneFrame from '@/images/phoneframe.png'
 import { Container } from '@/components/Container'
 import logoBbc from '@/images/logos/bbc.svg'
 import logoCbs from '@/images/logos/cbs.svg'
@@ -102,34 +104,33 @@ export function Hero() {
       <Container>
         <div className="flex flex-col-reverse gap-y-16 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">
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
-              Mycelium
-            </h1>
-              <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
-                Unleashing the Power of Decentralized Networks
-            </h2>
-            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
-              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
-            </p>
-            <p className="mt-6 text-lg text-gray-600 ">
+            <H1>Mycelium</H1>
+            <H5 color="secondary" className="mt-6">
+              Unleashing the Power of Decentralized Networks
+            </H5>
+            <P color="secondary" className="mt-6">
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The
+              future of secure, efficient, and scalable networking.
+            </P>
+            <P color="secondary" className="mt-6">
               Coming Soon: New Decentralized Features
-            </p>
+            </P>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <DownloadLink />
-              <Button
+              {/* <Button
                 href="https://youtu.be/4oq15lxvkts?si=Heh_8DHqHaNpy3_F"
                 variant="outline"
               >
                 <PlayIcon className="h-6 w-6 flex-none" />
                 <span className="ml-2.5">Watch the Demo</span>
-              </Button>
+              </Button> */}
             </div>
           </div>
           <div className="relative lg:mt-10 mt-0  lg:col-span-5 lg:row-span-2 xl:col-span-6">
             <BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12  ml-0" />
             <div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)]  lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24  lg:h-auto lg:pt-10 xl:-bottom-32">
               <Image
-                src="/images/phoneframe.png"
+                src={phoneFrame}
                 alt="Mycelium application demo"
                 className="mx-auto max-w-[366px]"
                 width={366}

src/components/LinuxLink.tsx

@@ -11,7 +11,7 @@ export function LinuxLink({
       href="https://github.com/threefoldtech/mycelium/releases"
       aria-label="Download for Linux"
       className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
+        'flex items-center rounded-lg px-4 py-2 transition-all hover:scale-105',
         color === 'black'
           ? 'bg-gray-800 text-white hover:bg-gray-900'
           : 'bg-white text-gray-900 hover:bg-gray-50',

src/components/NavLinks.tsx

@@ -14,11 +14,12 @@ export function NavLinks() {
     ['How it Works', '/#howitworks'],
     ['Coming Soon', '/#comingsoon'],
     ['FAQs', '/#faqs'],
+    ['Docs', 'https://threefold.info/mycelium_network/docs/'],
   ].map(([label, href], index) => (
     <Link
       key={label}
       href={href}
-      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
+      className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm leading-tight text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
       onMouseEnter={() => {
         if (timeoutRef.current) {
           window.clearTimeout(timeoutRef.current)
@@ -31,13 +32,17 @@ export function NavLinks() {
         }, 50)
       }}
       onClick={(e) => {
-        e.preventDefault()
-        const targetId = href.substring(2)
-        const targetElement = document.getElementById(targetId)
-        if (targetElement) {
-          targetElement.scrollIntoView({ behavior: 'smooth' })
+        if (href.startsWith('/#')) {
+          e.preventDefault();
+          const targetId = href.substring(2);
+          const targetElement = document.getElementById(targetId);
+          if (targetElement) {
+            targetElement.scrollIntoView({ behavior: 'smooth' });
+          }
         }
       }}
+      target={href.startsWith('http') ? '_blank' : undefined}
+      rel={href.startsWith('http') ? 'noopener noreferrer' : undefined}
     >
       <AnimatePresence>
         {hoveredIndex === index && (

src/components/PhoneFrame.tsx

@@ -1,6 +1,8 @@
 import Image from 'next/image'
 import clsx from 'clsx'
 
+import phoneFrame from '@/images/phone-frame.svg'
+
 export function PhoneFrame({
   className,
   children,
@@ -10,7 +12,7 @@ export function PhoneFrame({
   return (
     <div className={clsx('relative aspect-[366/729]', className)} {...props}>
       <Image
-        src="/images/phone-frame.svg"
+        src={phoneFrame}
         alt=""
         className="pointer-events-none absolute inset-0"
         fill

src/components/PrimaryFeatures.tsx

@@ -13,9 +13,21 @@ import {
 import { useDebouncedCallback } from 'use-debounce'
 
 import { AppScreen } from '@/components/AppScreen'
+import {
+  Eyebrow,
+  FeatureDescription,
+  FeatureTitle,
+  MobileFeatureTitle,
+  P,
+  SectionHeader,
+} from '@/components/Texts'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import Image from 'next/image'
+
+import connectorImg from '@/images/connector.png'
+import peersImg from '@/images/peers.png'
+import settingImg from '@/images/setting.png'
 import { PhoneFrame } from '@/components/PhoneFrame'
 import {
   DiageoLogo,
@@ -194,7 +206,7 @@ type ScreenProps =
 function InviteScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/connector.png" alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={connectorImg} alt="Mycelium Connector" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -202,7 +214,7 @@ function InviteScreen(props: ScreenProps) {
 function StocksScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/peers.png" alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={peersImg} alt="Mycelium Peers" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -210,7 +222,7 @@ function StocksScreen(props: ScreenProps) {
 function InvestScreen(props: ScreenProps) {
   return (
     <AppScreen className="w-full">
-      <Image src="/images/setting.png" alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
+      <Image src={settingImg} alt="Mycelium Settings" width={366} height={732} className="mt-[-2rem]" />
     </AppScreen>
   )
 }
@@ -247,11 +259,16 @@ function FeaturesDesktop() {
       onChange={onChange}
       vertical
     >
-      <TabList className="relative z-10 order-last col-span-6 space-y-6">
+      <TabList className="z-10 order-last col-span-6 space-y-6">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
-            className="relative rounded-2xl transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30"
+            className={clsx(
+              'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
+              selectedIndex === featureIndex
+                ? 'outline-cyan-500'
+                : 'outline-transparent hover:outline-cyan-500',
+            )}
           >
             {featureIndex === selectedIndex && (
               <motion.div
@@ -262,20 +279,20 @@ function FeaturesDesktop() {
             )}
             <div className="relative z-10 p-8">
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 text-lg font-semibold text-white">
+              <FeatureTitle as="h3" color="white" className="mt-6">
                 <Tab className="text-left data-selected:not-data-focus:outline-hidden">
                   <span className="absolute inset-0 rounded-2xl" />
                   {feature.name}
                 </Tab>
-              </h3>
-              <p className="mt-2 text-sm text-gray-400">
+              </FeatureTitle>
+              <FeatureDescription color="secondary" className="mt-2">
                 {feature.description}
-              </p>
+              </FeatureDescription>
             </div>
           </div>
         ))}
       </TabList>
-      <div className="relative col-span-6">
+      <div className="col-span-6">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
           <CircleBackground color="#13B5C8" className="animate-spin-slower" />
         </div>
@@ -351,7 +368,14 @@ function FeaturesMobile() {
             ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
             className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
           >
-            <div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
+            <div
+              className={clsx(
+                'transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                activeIndex === featureIndex
+                  ? 'outline-transparent' // Remove outline for active mobile slide
+                  : 'outline-transparent hover:outline-cyan-500',
+              )}
+            >
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                 <CircleBackground
                   color="#13B5C8"
@@ -363,12 +387,12 @@ function FeaturesMobile() {
               </PhoneFrame>
               <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
                 <feature.icon className="h-8 w-8" />
-                <h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
+                <MobileFeatureTitle color="white" className="mt-6">
                   {feature.name}
-                </h3>
-                <p className="mt-2 text-sm text-gray-400">
+                </MobileFeatureTitle>
+                <FeatureDescription color="secondary" className="mt-2">
                   {feature.description}
-                </p>
+                </FeatureDescription>
               </div>
             </div>
           </div>
@@ -408,13 +432,15 @@ export function PrimaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <h2 className="text-base/7 font-semibold text-cyan-500">How It Works</h2>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+          <Eyebrow color="accent">How It Works</Eyebrow>
+          <SectionHeader color="white" className="mt-2">
             How Mycelium Operates
-          </p>
-          <p className="mt-6 text-lg text-gray-300">
-            Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
-          </p>
+          </SectionHeader>
+          <P color="light" className="mt-6">
+            Mycelium, like its natural namesake, thrives on decentralization,
+            efficiency, and security, making it a truly powerful force in the world
+            of decentralized networks.
+          </P>
         </div>
       </Container>
       <div className="mt-16 md:hidden">

src/components/SecondaryFeatures.tsx

@@ -1,4 +1,11 @@
 import { useId } from 'react'
+import {
+  Eyebrow,
+  FeatureDescription,
+  P,
+  SectionHeader,
+  SecondaryFeatureTitle,
+} from './Texts'
 
 import { Container } from '@/components/Container'
 
@@ -195,13 +202,16 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Roadmap</Eyebrow>
+          <SectionHeader as="h2" className="mt-2">
             Coming Soon: The Future of Mycelium
-          </p>
-          <p className="mt-6 text-lg text-gray-600">
-            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
-          </p>
+          </SectionHeader>
+          <P color="secondary" className="mt-6">
+            Mycelium is evolving to bring even more powerful decentralized
+            features, designed to enhance your experience and expand possibilities.
+            Be the first to explore what's coming next by staying connected with
+            our latest updates.
+          </P>
         </div>
         <ul
           role="list"
@@ -210,13 +220,15 @@ export function SecondaryFeatures() {
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105"
+              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <SecondaryFeatureTitle color="primary" className="mt-6">
                 {feature.name}
-              </h3>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
+              </SecondaryFeatureTitle>
+              <FeatureDescription color="tertiary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
             </li>
           ))}
         </ul>

src/components/Texts.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/lib/utils'
+
+const colorVariants = {
+  primary: 'text-gray-900',
+  secondary: 'text-gray-600',
+  light: 'text-gray-50',
+  accent: 'text-cyan-500',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
+} as const
+
+type TextOwnProps = {
+  color?: keyof typeof colorVariants
+  className?: string
+}
+
+// Polymorphic helpers
+type PolymorphicProps<E extends React.ElementType, P> = P & {
+  as?: E
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
+
+const createTextComponent = <DefaultElement extends React.ElementType>(
+  defaultElement: DefaultElement,
+  defaultClassName: string
+) => {
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >
+
+  function Text<E extends React.ElementType = DefaultElement>({
+    as,
+    color = 'primary',
+    className,
+    children,
+    ...props
+  }: Props<E>) {
+    const Tag = (as || defaultElement) as React.ElementType
+    return (
+      <Tag
+        className={cn(defaultClassName, colorVariants[color], className)}
+        {...(props as object)}
+      >
+        {children}
+      </Tag>
+    )
+  }
+
+  ;(Text as any).displayName = `Text(${
+    typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
+  return Text
+}
+
+// Exports based on your tailwind.css and the example
+export const H1 = createTextComponent(
+  'h1',
+  'text-5xl lg:text-8xl font-medium tracking-tight'
+)
+export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium')
+export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium')
+export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-medium')
+export const P = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed'
+)
+export const Small = createTextComponent('small', 'text-sm font-medium')
+export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
+export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold')
+export const Eyebrow = createTextComponent('h2', 'text-base/7 font-semibold')
+export const SectionHeader = createTextComponent(
+  'p',
+  'text-3xl lg:text-4xl font-medium tracking-tight'
+)
+export const CardEyebrow = createTextComponent('h3', 'text-sm/4 font-semibold')
+export const CardTitle = createTextComponent(
+  'p',
+  'text-lg font-medium tracking-tight'
+)
+export const CardDescription = createTextComponent('p', 'text-sm/6')
+export const FeatureTitle = createTextComponent('h3', 'text-lg font-semibold')
+export const FeatureDescription = createTextComponent('p', 'text-sm')
+export const MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  'font-semibold'
+)
+export const Question = createTextComponent('h3', 'text-lg/6 font-semibold')
+export const Answer = createTextComponent('p', 'mt-4 text-sm')
+export const PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold'
+)
+export const DownloadCardDescription = createTextComponent('dd', 'text-base/7')

src/components/WindowsLink.tsx

@@ -8,10 +8,10 @@ export function WindowsLink({
 }) {
   return (
     <Link
-      href="#"
+      href="https://github.com/threefoldtech/myceliumflut/releases"
       aria-label="Download for Windows"
       className={clsx(
-        'flex items-center rounded-lg transition-colors px-4 py-2',
+        'flex items-center rounded-lg px-4 py-2 transition-all hover:scale-105',
         color === 'black'
           ? 'bg-gray-800 text-white hover:bg-gray-900'
           : 'bg-white text-gray-900 hover:bg-gray-50',

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}