ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

refactor: replace hardcoded text styles with reusable Text components

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 13:07:51 +02:00
parent bca730681e
commit d03b67df7d
10 changed files with 223 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/DownloadHero.tsx
View File

@@ -1,6 +1,12 @@
'use client'
import Image from 'next/image';
import {
DownloadCardDescription,
DownloadCardTitle,
P,
PageHeader,
} from './Texts'
import { motion } from 'framer-motion';
import appleIcon from '@/images/apple.svg';
import windowsIcon from '@/images/windows.svg';
@@ -39,25 +45,30 @@ export default function DownloadHero() {
<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
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900"
>
Download Mycelium
</motion.h2>
<motion.p
<PageHeader>Download Mycelium</PageHeader>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
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://threefold.info/mycelium_network/docs/" className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline">
Read the manual.
</a>
</motion.p>
<P color="secondary" className="mt-6 text-lg/8">
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://threefold.info/mycelium_network/docs/"
className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline"
>
Read the manual.
</a>
</P>
</motion.div>
</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">
@@ -66,20 +77,27 @@ export default function DownloadHero() {
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/7 font-semibold text-gray-900">
<DownloadCardTitle color="primary">
<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">
</DownloadCardTitle>
<DownloadCardDescription
as="dd"
color="secondary"
className="mt-1 flex flex-auto flex-col"
>
<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">
<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>
</DownloadCardDescription>
</div>
))}
</dl>