sashaastiadi/www_mycelium_net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorganize landing page sections and add hover animations to feature cards

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-14 12:41:18 +02:00
parent 34956dc5b3
commit 8f860926bb
14 changed files with 107 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Footer.tsx
View File

@@ -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>