forked from sashaastiadi/www_mycelium_net
refactor: reorganize landing page sections and add hover animations to feature cards
This commit is contained in:
@@ -22,9 +22,6 @@ export function About() {
|
||||
<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>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<AppStoreLink color="white" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
77
src/components/DownloadHero.tsx
Normal file
77
src/components/DownloadHero.tsx
Normal file
@@ -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 (
|
||||
<div className="bg-white py-24 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-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
|
||||
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-500">
|
||||
Read the manual.
|
||||
</a>
|
||||
</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"
|
||||
>
|
||||
<dt className="text-base/7 font-semibold text-gray-900">
|
||||
<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">
|
||||
<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">
|
||||
Download Now <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -21,8 +21,8 @@ export function Features() {
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
|
||||
<div className="relative lg:col-span-3">
|
||||
<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="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 />
|
||||
@@ -39,7 +39,7 @@ export function Features() {
|
||||
</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>
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="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 />
|
||||
@@ -56,7 +56,7 @@ export function Features() {
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
|
||||
</div>
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="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" />
|
||||
@@ -73,7 +73,7 @@ export function Features() {
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
|
||||
</div>
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="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" />
|
||||
@@ -90,7 +90,7 @@ export function Features() {
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="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" />
|
||||
|
||||
@@ -5,28 +5,16 @@ import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
import { TextField } from '@/components/Fields'
|
||||
import { NavLinks } from '@/components/NavLinks'
|
||||
import qrCode from '@/images/qr-code.svg'
|
||||
|
||||
function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 96 96" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M1 17V9a8 8 0 0 1 8-8h8M95 17V9a8 8 0 0 0-8-8h-8M1 79v8a8 8 0 0 0 8 8h8M95 79v8a8 8 0 0 1-8 8h-8"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
import github from '@/images/github.svg'
|
||||
|
||||
export function Footer() {
|
||||
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-16">
|
||||
<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={40} height={40} className="h-10 w-10 flex-none" />
|
||||
<Image src="/images/logo.svg" 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>
|
||||
@@ -37,19 +25,18 @@ export function Footer() {
|
||||
</nav>
|
||||
</div>
|
||||
<div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-100 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
|
||||
<div className="relative flex h-24 w-24 flex-none items-center justify-center">
|
||||
<QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-300 transition-colors group-hover:stroke-cyan-500" />
|
||||
<Image src={qrCode} alt="" unoptimized />
|
||||
<div className="relative flex h-16 w-16 flex-none items-center justify-center">
|
||||
<Image src={github} alt="GitHub" unoptimized />
|
||||
</div>
|
||||
<div className="ml-8 lg:w-64">
|
||||
<div className="ml-4 lg:w-72">
|
||||
<p className="text-base font-semibold text-gray-900">
|
||||
<Link href="#">
|
||||
<Link href="https://github.com/threefoldtech/mycelium/releases/" target='_blank'>
|
||||
<span className="absolute inset-0 sm:rounded-2xl" />
|
||||
Download the app
|
||||
Download Mycelium
|
||||
</Link>
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-700">
|
||||
Scan the QR code to download the app from the App Store.
|
||||
Head to the GitHub to access the latest Mycelium builds for your devices.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -139,7 +139,7 @@ export function Header() {
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" variant="solid" color="cyan">Get Mycelium</Button>
|
||||
<Button href="/download/" variant="solid" color="cyan">Get Mycelium</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -419,7 +419,7 @@ function FeaturesDesktop() {
|
||||
{features.map((feature, featureIndex) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className="relative rounded-2xl transition-colors hover:bg-gray-800/30"
|
||||
className="relative rounded-2xl transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30"
|
||||
>
|
||||
{featureIndex === selectedIndex && (
|
||||
<motion.div
|
||||
@@ -517,7 +517,7 @@ function FeaturesMobile() {
|
||||
<div
|
||||
key={featureIndex}
|
||||
ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
|
||||
className="w-full flex-none snap-center px-4 sm:px-6"
|
||||
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="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
|
||||
@@ -209,7 +209,7 @@ export function SecondaryFeatures() {
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 p-8"
|
||||
className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105"
|
||||
>
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 font-semibold text-gray-900">
|
||||
|
||||
Reference in New Issue
Block a user