forked from emre/www_projectmycelium_com
105 lines
4.0 KiB
TypeScript
105 lines
4.0 KiB
TypeScript
'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-100 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>
|
|
)
|
|
}
|