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) => ( +
+
+
+ +
+ {feature.name} +
+
+

{feature.description}

+

+ + Download Now + +

+
+
+ ))} +
+
+
+
+ ); +} 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 (