ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

improvements

Browse Source
This commit is contained in:
Emre
2025-10-24 02:17:33 +03:00
parent 644bb34419
commit 3a7aa82ff7
34 changed files with 740 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/pages/download/DevHub.tsx Normal file
View File

@@ -0,0 +1,69 @@
'use client'
import {
BookOpenIcon,
ChatBubbleOvalLeftEllipsisIcon,
LifebuoyIcon,
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: 'Forum',
description: 'Forum for all your questions.',
href: 'https://forum.threefold.io/',
icon: ChatBubbleOvalLeftEllipsisIcon,
},
{
name: 'Community',
description: 'Join our Developers community on telegram.',
href: 'https://t.me/threefoldtesting',
icon: UserGroupIcon,
},
]
export function DevHub() {
return (
<div className="bg-gray-900 py-24 sm:py-32">
<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="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
<p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
<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-8 sm:grid-cols-2">
{features.map((feature) => (
<a
key={feature.name}
href={feature.href}
target="_blank"
rel="noopener noreferrer"
className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
>
<feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
<dt className="font-semibold text-white">{feature.name}</dt>
<dd className="mt-2 text-gray-400">{feature.description}</dd>
</a>
))}
</dl>
</div>
</div>
</div>
)
}

104
src/pages/download/DownloadHero.tsx Normal file
View File

@@ -0,0 +1,104 @@
'use client'
import { motion } from 'framer-motion'
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,
alt: 'Apple logo',
},
{
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,
alt: 'Windows logo',
},
{
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,
alt: 'Android logo',
},
{
name: 'Download for Linux',
description: 'Download the Mycelium binary for Linux directly from its Github repository.',
href: 'https://github.com/threefoldtech/mycelium/releases',
icon: linuxIcon,
alt: 'Linux logo',
},
]
export function DownloadHero() {
return (
<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">
<motion.h2
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
>
Download Mycelium Network
</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 text-gray-600 lg:leading-8"
>
Get Mycelium Network 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="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
target="_blank"
rel="noopener noreferrer"
>
Read the manual.
</a>
</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 md:grid-cols-2 lg:max-w-none 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:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
>
<dt className="text-base font-semibold leading-7 text-gray-900">
<div className="mb-6 flex h-10 w-10 items-center justify-center">
<img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
</div>
{feature.name}
</dt>
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
<p className="flex-auto">{feature.description}</p>
<p className="mt-6">
<a
href={feature.href}
className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
target="_blank"
rel="noopener noreferrer"
>
Download Now <span aria-hidden="true">→</span>
</a>
</p>
</dd>
</div>
))}
</dl>
</div>
</div>
</div>
)
}

17
src/pages/download/DownloadPage.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { AnimatedSection } from '@/components/AnimatedSection'
import { DownloadHero } from './DownloadHero'
import { DevHub } from './DevHub'
export default function DownloadPage() {
return (
<>
<AnimatedSection>
<DownloadHero />
</AnimatedSection>
<AnimatedSection>
<DevHub />
</AnimatedSection>
</>
)
}