chore: update favicon and remove unused favicon assets

Reviewed-on: ourworld_web/www_mycelium_net#1

README.md

@@ -1,35 +1,150 @@
-# 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
-```
+---
 
-Next, run the development server:
+## About
 
-```bash
-npm run dev
-```
+This is the official website for Mycelium Network, built using Next.js and Tailwind CSS.
 
-Finally, open [http://localhost:3000](http://localhost:3000) in your browser to view the website.
+---
 
-## Customizing
+## Technologies
 
-You can start editing this template by modifying the files in the `/src` folder. The site will auto-update as you edit these files.
+- **Framework**: [Next.js](https://nextjs.org/)
+- **Language**: [TypeScript](https://www.typescriptlang.org/)
+- **Styling**: [Tailwind CSS](https://tailwindcss.com/)
 
-## License
+---
 
-This site template is a commercial product and is licensed under the [Tailwind Plus license](https://tailwindcss.com/plus/license).
+## Dependencies
 
-## Learn more
+- **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)
 
-To learn more about the technologies used in this site template, see the following resources:
+---
 
-- [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
+## 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`.

next.config.js

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

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

@@ -17,6 +17,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({

src/components/About.tsx

@@ -10,7 +10,7 @@ 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">
         <div className="mx-auto max-w-3xl text-center">
@@ -26,7 +26,7 @@ export function About() {
           </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

@@ -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-700 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

@@ -12,7 +12,7 @@ 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">
@@ -22,7 +22,7 @@ export function CallToAction() {
           <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">
+          <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,36 @@
-import { CheckIcon } from '@heroicons/react/20/solid'
+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 (
@@ -21,26 +39,35 @@ export function DevHub() {
         <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">
+            <p className="text-3xl lg:text-4xl font-medium tracking-tight text-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 className="mt-6 text-lg 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>
           </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">
+              <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"
+                />
                 <dt className="font-semibold text-white">
-                  <CheckIcon aria-hidden="true" className="absolute top-1 left-0 size-5 text-indigo-400" />
                   {feature.name}
                 </dt>
-                <dd className="mt-2">{feature.description}</dd>
-              </div>
+                <dd className="mt-2 text-gray-400">{feature.description}</dd>
+              </a>
             ))}
           </dl>
         </div>
       </div>
     </div>
-  )
+  );
 }

src/components/DownloadHero.tsx

@@ -1,4 +1,7 @@
+'use client'
+
 import Image from 'next/image';
+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 +29,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,22 +39,32 @@ 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">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            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">
+          </motion.h2>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            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">
+            <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.p>
         </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">
                   <div className="mb-6 flex h-10 w-10 items-center justify-center">

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

@@ -8,9 +8,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?',
@@ -67,8 +67,8 @@ export function Faqs() {
           <p className="mt-2 text-lg text-gray-600">
             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>

src/components/Features.tsx

@@ -9,17 +9,17 @@ export function Features() {
     <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">
+        <p className="mt-2 max-w-2xl text-3xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
           Network Capabilities
         </p>
-        <p className="mt-4 max-w-xl text-lg text-gray-600">
+        <p className="mt-4 max-w-4xl 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">
+        <p className="mt-2 max-w-4xl 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>  
         <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)]">
               <Pathfinding />
@@ -34,9 +34,9 @@ Each component — from message passing to content distribution — works in har
                 </p>
               </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)]">
               <MessageBus />
@@ -51,9 +51,9 @@ Each component — from message passing to content distribution — works in har
                 </p>
               </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)]">
               <ProxyDetection className="h-80" />
@@ -68,9 +68,9 @@ Each component — from message passing to content distribution — works in har
                 </p>
               </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)]">
               <ProxyForwarding className="h-80" />
@@ -85,9 +85,9 @@ Each component — from message passing to content distribution — works in har
                 </p>
               </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)]">
               <ContentDistribution className="h-80" />
@@ -102,7 +102,7 @@ Each component — from message passing to content distribution — works in har
                 </p>
               </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,20 +1,60 @@
+'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>
@@ -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

@@ -4,6 +4,7 @@ import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
 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'
@@ -116,20 +117,20 @@ export function Hero() {
             </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,6 +14,7 @@ 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}
@@ -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

@@ -16,6 +16,10 @@ import { AppScreen } from '@/components/AppScreen'
 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 +198,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 +206,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 +214,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>
   )
 }
@@ -251,7 +255,12 @@ function FeaturesDesktop() {
         {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 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
@@ -351,7 +360,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(
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline outline-2 transition-colors',
+                activeIndex === featureIndex
+                  ? 'outline-cyan-500'
+                  : '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"

src/components/SecondaryFeatures.tsx

@@ -210,7 +210,7 @@ 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">

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',