forked from emre/www_projectmycelium_com
feat: add network download section and update network page styling
- Created NetworkDownload component with platform-specific download cards for iOS, macOS, Windows, Android, and Linux - Added hover effects and external links to app stores and GitHub releases - Replaced NetworkUsecases with NetworkDownload in NetworkPage component order - Renamed CloudPros to NetworkPros for consistency - Updated NetworkPros styling from light theme to dark theme with improved contrast and hover states - Change
This commit is contained in:
114
src/pages/network/NetworkDownload.tsx
Normal file
114
src/pages/network/NetworkDownload.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
'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'
|
||||
|
||||
import { H3, P, Eyebrow, CT, CP } from '@/components/Texts'
|
||||
|
||||
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 NetworkDownload() {
|
||||
return (
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
<div className="w-full border border-l border-r border-gray-100" />
|
||||
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8 bg-white py-12 border border-t-0 border-b-0 border-gray-100">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<motion.H3
|
||||
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.H3>
|
||||
<motion.P
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-8 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-8 max-w-2xl lg:mt-12 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">
|
||||
<CP className="flex-auto mt-2">{feature.description}</CP>
|
||||
<CT className="mt-4">
|
||||
<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>
|
||||
</CT>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-100" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -5,8 +5,8 @@ import { PrimaryFeatures } from './PrimaryFeatures'
|
||||
import { SecondaryFeatures } from './SecondaryFeatures'
|
||||
import { CallToAction } from './CallToAction'
|
||||
import { NetworkCapabilities } from './NetworkCapabilities'
|
||||
import { NetworkUsecases } from './NetworkUsecases'
|
||||
import { CloudPros } from './NetworkPros'
|
||||
import { NetworkDownload } from './NetworkDownload'
|
||||
import { NetworkPros } from './NetworkPros'
|
||||
|
||||
|
||||
export default function NetworkPage() {
|
||||
@@ -33,14 +33,14 @@ export default function NetworkPage() {
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<CloudPros />
|
||||
<NetworkPros />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
<AnimatedSection>
|
||||
<NetworkUsecases />
|
||||
<NetworkDownload />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
<AnimatedSection>
|
||||
<CallToAction />
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -27,33 +27,34 @@ const highlights = [
|
||||
},
|
||||
]
|
||||
|
||||
export function CloudPros() {
|
||||
export function NetworkPros() {
|
||||
return (
|
||||
<section className="relative w-full bg-[#FDFDFD] overflow-hidden">
|
||||
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
|
||||
{/* Top spacing line */}
|
||||
<div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
<div className="max-w-7xl py-6 mx-auto border border-t-0 border-b-0 border-gray-800" />
|
||||
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||
|
||||
<div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-200">
|
||||
{/* Main framed content */}
|
||||
<div className="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
|
||||
<div className="grid lg:grid-cols-4">
|
||||
{highlights.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="group relative overflow-hidden border border-gray-200 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
|
||||
className="group relative overflow-hidden border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:border-cyan-300/50 hover:bg-white/8"
|
||||
>
|
||||
{/* Hover glow */}
|
||||
<div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
||||
<div className="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
|
||||
|
||||
<div className="relative">
|
||||
<Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
|
||||
<Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
|
||||
{item.label}
|
||||
</Small>
|
||||
|
||||
<h3 className="mt-4 text-lg font-semibold leading-tight text-black">
|
||||
<h3 className="mt-4 text-lg font-semibold text-white">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -62,8 +63,9 @@ export function CloudPros() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full border-b border-gray-200 bg-[#FDFDFD]" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
|
||||
{/* Bottom spacing line */}
|
||||
<div className="w-full border-b border-gray-800 bg-[#121212]" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user