diff --git a/connector.png b/connector.png new file mode 100644 index 0000000..1311e26 Binary files /dev/null and b/connector.png differ diff --git a/hooks/useScrollDirection.ts b/hooks/useScrollDirection.ts new file mode 100644 index 0000000..c360c5f --- /dev/null +++ b/hooks/useScrollDirection.ts @@ -0,0 +1,46 @@ +'use client'; + +import { useState, useEffect } from 'react'; + +export type ScrollDirection = 'up' | 'down'; + +/** + * A hook to detect the scroll direction. + * It uses requestAnimationFrame for performance, comparing the current scroll position + * with the previous one to determine if the user is scrolling up or down. + * + * @returns {ScrollDirection | null} The current scroll direction ('up' or 'down'), or null on the initial render. + */ +export function useScrollDirection(): ScrollDirection | null { + const [scrollDirection, setScrollDirection] = useState(null); + + useEffect(() => { + let lastScrollY = window.pageYOffset; + let ticking = false; + + const updateScrollDirection = () => { + const scrollY = window.pageYOffset; + + if (Math.abs(scrollY - lastScrollY) < 10) { + ticking = false; + return; + } + setScrollDirection(scrollY > lastScrollY ? 'down' : 'up'); + lastScrollY = scrollY > 0 ? scrollY : 0; + ticking = false; + }; + + const onScroll = () => { + if (!ticking) { + window.requestAnimationFrame(updateScrollDirection); + ticking = true; + } + }; + + window.addEventListener('scroll', onScroll); + + return () => window.removeEventListener('scroll', onScroll); + }, []); + + return scrollDirection; +} \ No newline at end of file diff --git a/peers.png b/peers.png new file mode 100644 index 0000000..0066b57 Binary files /dev/null and b/peers.png differ diff --git a/setting.png b/setting.png new file mode 100644 index 0000000..be0b470 Binary files /dev/null and b/setting.png differ diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx deleted file mode 100644 index 013dbbd..0000000 --- a/src/app/(auth)/login/page.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { type Metadata } from 'next' -import Link from 'next/link' - -import { AuthLayout } from '@/components/AuthLayout' -import { Button } from '@/components/Button' -import { TextField } from '@/components/Fields' - -export const metadata: Metadata = { - title: 'Sign In', -} - -export default function Login() { - return ( - - Don’t have an account?{' '} - - Sign up - {' '} - for a free trial. - - } - > -
-
- - -
- -
- - ) -} diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx deleted file mode 100644 index 1434f9b..0000000 --- a/src/app/(auth)/register/page.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { type Metadata } from 'next' -import Link from 'next/link' - -import { AuthLayout } from '@/components/AuthLayout' -import { Button } from '@/components/Button' -import { SelectField, TextField } from '@/components/Fields' - -export const metadata: Metadata = { - title: 'Sign Up', -} - -export default function Register() { - return ( - - Already registered?{' '} - - Sign in - {' '} - to your account. - - } - > -
-
- - - - - - - - - - -
- -
- - ) -} diff --git a/src/app/(main)/download/page.tsx b/src/app/(main)/download/page.tsx new file mode 100644 index 0000000..ce61006 --- /dev/null +++ b/src/app/(main)/download/page.tsx @@ -0,0 +1,20 @@ +import { AnimatedSection } from '@/components/AnimatedSection' +import DownloadHero from '@/components/DownloadHero' +import { DevHub } from '@/components/DevHub' +import { Faqs } from '@/components/Faqs' + +export default function Download() { + return ( + <> + + + + + + + + + + + ) +} diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx index 7ab1cbb..db00e55 100644 --- a/src/app/(main)/page.tsx +++ b/src/app/(main)/page.tsx @@ -1,24 +1,38 @@ +import { AnimatedSection } from '@/components/AnimatedSection' import { CallToAction } from '@/components/CallToAction' import { Faqs } from '@/components/Faqs' import { Hero } from '@/components/Hero' -import { Pricing } from '@/components/Pricing' import { PrimaryFeatures } from '@/components/PrimaryFeatures' import { UseCases } from '@/components/UseCases' import { SecondaryFeatures } from '@/components/SecondaryFeatures' import { Benefits } from '@/components/Benefits' import { About } from '@/components/About' +import { Features } from '@/components/Features' export default function Home() { return ( <> - - - - - - - - + + + + + + + + + + + + + + + + + + + + + ) } diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx index 21704c6..357608e 100644 --- a/src/app/not-found.tsx +++ b/src/app/not-found.tsx @@ -9,7 +9,7 @@ export default function NotFound() {

404

-

+

Page not found

diff --git a/src/components/About.tsx b/src/components/About.tsx index 8641491..5f19f40 100644 --- a/src/components/About.tsx +++ b/src/components/About.tsx @@ -1,4 +1,5 @@ import { AppStoreLink } from '@/components/AppStoreLink' +import { Button } from '@/components/Button' import { CircleBackground } from '@/components/CircleBackground' import { Container } from '@/components/Container' @@ -6,16 +7,17 @@ export function About() { return (

-
+
-
-

+
+

Our Mission

+

Discover Mycelium -

+

Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.

@@ -23,7 +25,14 @@ export function About() { Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.

- +
diff --git a/src/components/AnimatedSection.tsx b/src/components/AnimatedSection.tsx new file mode 100644 index 0000000..ceb4684 --- /dev/null +++ b/src/components/AnimatedSection.tsx @@ -0,0 +1,23 @@ +'use client' + +import { useRef } from 'react' +import { motion, useInView } from 'framer-motion' + +export function AnimatedSection({ children }: { children: React.ReactNode }) { + const ref = useRef(null) + const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' }) + + return ( + + {children} + + ) +} diff --git a/src/components/AppScreen.tsx b/src/components/AppScreen.tsx index 9f281a9..b2d1098 100644 --- a/src/components/AppScreen.tsx +++ b/src/components/AppScreen.tsx @@ -51,7 +51,7 @@ export function AppScreen({ }: React.ComponentPropsWithoutRef<'div'>) { return (
-
+
diff --git a/src/components/Benefits.tsx b/src/components/Benefits.tsx index 19877b5..b6e1d9e 100644 --- a/src/components/Benefits.tsx +++ b/src/components/Benefits.tsx @@ -28,10 +28,10 @@ const features = [ export function Benefits() { return ( -
+
-

+

Nature's Blueprint for Digital Connectivity

diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 27f88bf..99a630e 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -16,7 +16,8 @@ const variantStyles = { gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', }, outline: { - gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', + 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', }, } diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx index 2493e09..c8bc92b 100644 --- a/src/components/CallToAction.tsx +++ b/src/components/CallToAction.tsx @@ -11,18 +11,18 @@ export function CallToAction() { id="get-free-shares-today" className="relative overflow-hidden bg-gray-900 py-20 sm:py-28" > -

+
-

+

Get Started Today

Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.

-
+
diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 7eb5c6f..9f5cfa5 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -6,7 +6,7 @@ export function Container({ }: React.ComponentPropsWithoutRef<'div'>) { return (
) diff --git a/src/components/ContentDistribution.tsx b/src/components/ContentDistribution.tsx new file mode 100644 index 0000000..af24c64 --- /dev/null +++ b/src/components/ContentDistribution.tsx @@ -0,0 +1,189 @@ +'use client'; + +import * as React from 'react'; +import { motion, useReducedMotion } from 'framer-motion'; + +type Props = { + className?: string; // e.g. "w-full h-80" + bg?: string; // default white +}; + +/** Palette */ +const ACCENT = '#00b8db'; +const STROKE = '#111827'; +const GRAY = '#9CA3AF'; +const GRAY_LT = '#E5E7EB'; + +/* ---------- small generic icons (no brands) ---------- */ +const IconSquare = () => ( + +); +const IconTriangle = () => ( + +); +const IconHex = () => ( + +); +const IconBolt = () => ( + +); +const IconPlay = () => ( + +); +const IconDB = () => ( + <> + + + + +); + +/* icon inside white circular badge */ +function Badge({ children }: { children: React.ReactNode }) { + return ( + <> + + {children} + + + + + ); +} + +/* ---------- central cloud ---------- */ +function Cloud({ pulse = true }: { pulse?: boolean }) { + const prefersReduced = useReducedMotion(); + return ( + + + + + + + + {/* subtle accent aura */} + + + ); +} + +/* a small packet line from center to a node */ +function Beam({ + x2, + y2, + delay = 0, +}: { + x2: number; + y2: number; + delay?: number; +}) { + const prefersReduced = useReducedMotion(); + return ( + + ); +} + +export default function ContentDistribution({ className, bg = '#ffffff' }: Props) { + const W = 900; + const H = 560; + + // ring radii + const rings = [110, 190, 270]; + + // positions (angle degrees) for badges on rings + const layout = [ + { r: rings[1], a: -20, icon: }, + { r: rings[2], a: 20, icon: }, + { r: rings[0], a: 155, icon: }, + { r: rings[2], a: -145, icon: }, + { r: rings[1], a: 210, icon: }, + { r: rings[0], a: 60, icon: }, + ]; + + const prefersReduced = useReducedMotion(); + + return ( + + ); +} diff --git a/src/components/DevHub.tsx b/src/components/DevHub.tsx new file mode 100644 index 0000000..72eacfd --- /dev/null +++ b/src/components/DevHub.tsx @@ -0,0 +1,46 @@ +import { CheckIcon } from '@heroicons/react/20/solid' + +const features = [ + { + name: 'Documentation', + description: 'Documentation for Mycelium.', + }, + { name: 'Support', description: 'Talk to an expert.' }, + { + name: 'Forum', + description: 'Forum for all your questions.', + }, + { name: 'Community', description: 'Join our Developers community on telegram.' }, + +] + +export function DevHub() { + return ( +
+
+
+
+

Get Started

+

+ Developer Hub +

+

+ 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. +

+
+
+ {features.map((feature) => ( +
+
+
+
{feature.description}
+
+ ))} +
+
+
+
+ ) +} diff --git a/src/components/DownloadHero.tsx b/src/components/DownloadHero.tsx new file mode 100644 index 0000000..197d44a --- /dev/null +++ b/src/components/DownloadHero.tsx @@ -0,0 +1,77 @@ +import Image from 'next/image'; +import appleIcon from '@/images/apple.svg'; +import windowsIcon from '@/images/windows.svg'; +import androidIcon from '@/images/android.svg'; +import linuxIcon from '@/images/linux.svg'; + +const features = [ + { + name: 'Download for iOS & MacOS', + description: 'Download Mycelium App from the Apple Store.', + href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565', + icon: appleIcon, + }, + { + name: 'Download for Windows', + description: 'Download the Mycelium App for Windows directly from its Github repository.', + href: 'https://github.com/threefoldtech/myceliumflut/releases', + icon: windowsIcon, + }, + { + name: 'Download for Android', + description: 'Download Mycelium from the Google Play Store.', + href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1', + icon: androidIcon, + }, + { + 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', + icon: linuxIcon, + }, +]; + +export default function DownloadHero() { + return ( +
+
+
+

+ Download Mycelium +

+

+ 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?{' '} + + Read the manual. + +

+
+
+
+ {features.map((feature) => ( +
+
+
+ +
+ {feature.name} +
+
+

{feature.description}

+

+ + Download Now + +

+
+
+ ))} +
+
+
+
+ ); +} diff --git a/src/components/DownloadLink.tsx b/src/components/DownloadLink.tsx index 70aa105..ebaa618 100644 --- a/src/components/DownloadLink.tsx +++ b/src/components/DownloadLink.tsx @@ -4,9 +4,11 @@ import { ArrowDownTrayIcon } from '@heroicons/react/24/solid' export function DownloadLink() { return ( Get Mycelium diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx index a750b8e..5147309 100644 --- a/src/components/Faqs.tsx +++ b/src/components/Faqs.tsx @@ -60,7 +60,7 @@ export function Faqs() {

Frequently asked questions

diff --git a/src/components/Features.tsx b/src/components/Features.tsx new file mode 100644 index 0000000..5c2702b --- /dev/null +++ b/src/components/Features.tsx @@ -0,0 +1,111 @@ +import Pathfinding from '@/components/Pathfinding' +import MessageBus from '@/components/MessageBus' +import ProxyDetection from '@/components/ProxyDetection' +import ProxyForwarding from '@/components/ProxyForwarding' +import ContentDistribution from '@/components/ContentDistribution' + +export function Features() { + return ( +
+
+

Core Components

+

+ Network Capabilities +

+

+ Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery. +

+

+Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh. +

+
+
+
+
+ +
+

Routing

+

+ Automatic pathfinding +

+

+ The Mycelium Network automatically discovers the shortest and fastest routes between nodes, + ensuring optimal data flow and network efficiency without manual configuration. +

+
+
+
+
+
+
+
+ +
+

Communication

+

+ Distributed message bus +

+

+ Acts as a global message layer that lets nodes exchange information seamlessly. + Enables resilient, asynchronous communication across the entire decentralized mesh. +

+
+
+
+
+
+
+
+ +
+

Discovery

+

+ Automatic proxy detection +

+

+ The system continuously scans for open SOCKS5 proxies within the network, + making it effortless to find available connection points without manual setup. +

+
+
+
+
+
+
+
+ +
+

Connectivity

+

+ Seamless proxy forwarding +

+

+ 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. +

+
+
+
+
+
+
+
+ +
+

Delivery

+

+ Decentralized content distribution +

+

+ 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. +

+
+
+
+
+
+
+
+ ) +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 378a3f4..9ee891d 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -4,30 +4,17 @@ import Link from 'next/link' import { Button } from '@/components/Button' import { Container } from '@/components/Container' import { TextField } from '@/components/Fields' -import { Logomark } from '@/components/Logo' import { NavLinks } from '@/components/NavLinks' -import qrCode from '@/images/qr-code.svg' - -function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} +import github from '@/images/github.svg' export function Footer() { return (