From 8f860926bbb7912a97dccfe6fcb4e7add25df753 Mon Sep 17 00:00:00 2001
From: sasha-astiadi
Date: Tue, 14 Oct 2025 12:41:18 +0200
Subject: [PATCH] refactor: reorganize landing page sections and add hover
animations to feature cards
---
src/app/(main)/download/page.tsx | 4 +-
src/app/(main)/page.tsx | 5 +-
src/components/About.tsx | 3 --
src/components/DownloadHero.tsx | 77 ++++++++++++++++++++++++++++
src/components/Features.tsx | 12 ++---
src/components/Footer.tsx | 31 ++++-------
src/components/Header.tsx | 2 +-
src/components/PrimaryFeatures.tsx | 4 +-
src/components/SecondaryFeatures.tsx | 2 +-
src/images/android.svg | 2 +-
src/images/apple.svg | 1 +
src/images/github.svg | 4 ++
src/images/linux.svg | 4 +-
src/images/windows.svg | 1 +
14 files changed, 107 insertions(+), 45 deletions(-)
create mode 100644 src/components/DownloadHero.tsx
create mode 100644 src/images/apple.svg
create mode 100644 src/images/github.svg
create mode 100644 src/images/windows.svg
diff --git a/src/app/(main)/download/page.tsx b/src/app/(main)/download/page.tsx
index 3e3373f..dc253a5 100644
--- a/src/app/(main)/download/page.tsx
+++ b/src/app/(main)/download/page.tsx
@@ -1,11 +1,11 @@
import { AnimatedSection } from '@/components/AnimatedSection'
-import { Hero } from '@/components/Hero'
+import DownloadHero from '@/components/DownloadHero'
export default function Download() {
return (
<>
-
+
>
)
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 6e175fe..db00e55 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -25,14 +25,11 @@ export default function Home() {
-
+
-
-
-
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 8641491..7c280fc 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -22,9 +22,6 @@ export function About() {
Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
-
diff --git a/src/components/DownloadHero.tsx b/src/components/DownloadHero.tsx
new file mode 100644
index 0000000..eaf5810
--- /dev/null
+++ b/src/components/DownloadHero.tsx
@@ -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 (
+
+
+
+
+ Download Mycelium
+
+
+ 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?{' '}
+
+ Read the manual.
+
+
+
+
+
+ {features.map((feature) => (
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index cc6614e..c43179a 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -21,8 +21,8 @@ export function Features() {
.
-
-
+
+
@@ -39,7 +39,7 @@ export function Features() {
-
+
@@ -56,7 +56,7 @@ export function Features() {
-
+
@@ -73,7 +73,7 @@ export function Features() {
-
+
@@ -90,7 +90,7 @@ export function Features() {
-
+
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index d8587c3..9ee891d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -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 (
-
-
-
- )
-}
+import github from '@/images/github.svg'
export function Footer() {
return (
-
+
-
+
Mycelium
Unleash the Power of Decentralized Networks
@@ -37,19 +25,18 @@ export function Footer() {
-
-
-
+
+
-
+
-
+
- Download the app
+ Download Mycelium
- 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.
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 34a7ff8..e8a7e97 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -139,7 +139,7 @@ export function Header() {
Docs
-
Get Mycelium
+
Get Mycelium
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index 84ed8eb..d34033e 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -419,7 +419,7 @@ function FeaturesDesktop() {
{features.map((feature, featureIndex) => (
{featureIndex === selectedIndex && (
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"
>
diff --git a/src/components/SecondaryFeatures.tsx b/src/components/SecondaryFeatures.tsx
index 68e4959..dbfdfbb 100644
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -209,7 +209,7 @@ export function SecondaryFeatures() {
{features.map((feature) => (
diff --git a/src/images/android.svg b/src/images/android.svg
index 94353d8..0f0c2f1 100644
--- a/src/images/android.svg
+++ b/src/images/android.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/images/apple.svg b/src/images/apple.svg
new file mode 100644
index 0000000..74c6984
--- /dev/null
+++ b/src/images/apple.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/images/github.svg b/src/images/github.svg
new file mode 100644
index 0000000..daa8847
--- /dev/null
+++ b/src/images/github.svg
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/src/images/linux.svg b/src/images/linux.svg
index 91ffe3e..ff15420 100644
--- a/src/images/linux.svg
+++ b/src/images/linux.svg
@@ -1,3 +1 @@
-
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/images/windows.svg b/src/images/windows.svg
new file mode 100644
index 0000000..ba9ac2c
--- /dev/null
+++ b/src/images/windows.svg
@@ -0,0 +1 @@
+
\ No newline at end of file