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

Compare commits

base: ourworld_web:development
Branches Tags
ourworld_web:main ourworld_web:development sashaastiadi:development sashaastiadi:main
..
compare: sashaastiadi:development
Branches Tags
sashaastiadi:development sashaastiadi:main ourworld_web:main ourworld_web:development

2 Commits
developmen ... developmen

Author SHA1 Message Date
sasha-astiadi
409535d9dc ok 2025-09-25 16:27:28 +02:00
sasha-astiadi
b08de471ae replace logo 2025-09-25 15:36:30 +02:00
6 changed files with 120 additions and 49 deletions
Expand all files Collapse all files

2
src/components/DownloadLink.tsx
View File

@@ -6,7 +6,7 @@ export function DownloadLink() {
<Link
href="#"
aria-label="Download Mycelium"
className="inline-flex items-center rounded-lg bg-gray-800 px-4 py-2 text-sm font-semibold text-white hover:bg-gray-900 transition-colors"
className="inline-flex items-center rounded-lg bg-cyan-500 px-4 py-2 text-sm font-semibold text-white hover:bg-cyan-600 transition-colors"
>
<ArrowDownTrayIcon className="h-5 w-5 mr-2" />
Get Mycelium

3
src/components/Footer.tsx
View File

@@ -4,7 +4,6 @@ import Link from 'next/link'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { TextField } from '@/components/Fields'
import { Logomark } from '@/components/Logo'
import { NavLinks } from '@/components/NavLinks'
import qrCode from '@/images/qr-code.svg'
@@ -27,7 +26,7 @@ export function Footer() {
<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>
<div className="flex items-center text-gray-900">
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
<Image src="/images/logo.svg" alt="Mycelium Logomark" width={40} height={40} className="h-10 w-10 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>

4
src/components/Header.tsx
View File

@@ -126,7 +126,7 @@ export function Header() {
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
Docs
</Button>
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
<Button variant="solid" color="cyan" href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
</div>
</PopoverPanel>
</>
@@ -139,7 +139,7 @@ export function Header() {
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
Docs
</Button>
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
<Button href="https://www.mycelium.threefold.io/download/" variant="solid" color="cyan">Get Mycelium</Button>
</div>
</div>
</Container>

13
src/components/Hero.tsx
View File

@@ -2,11 +2,9 @@ import { useId } from 'react'
import Image from 'next/image'
import clsx from 'clsx'
import { AppDemo } from '@/components/AppDemo'
import { DownloadLink } from '@/components/DownloadLink'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { PhoneFrame } from '@/components/PhoneFrame'
import logoBbc from '@/images/logos/bbc.svg'
import logoCbs from '@/images/logos/cbs.svg'
import logoCnn from '@/images/logos/cnn.svg'
@@ -130,9 +128,14 @@ export function Hero() {
<div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
<BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/3 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/70 sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
<div className="-mx-4 h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] px-9 sm:mx-0 lg:absolute lg:-inset-x-10 lg:-top-10 lg:-bottom-20 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
<PhoneFrame className="mx-auto max-w-[366px]" priority>
<AppDemo />
</PhoneFrame>
<Image
src="/images/phoneframe.png"
alt="Mycelium application demo"
className="mx-auto max-w-[366px]"
width={366}
height={729}
priority
/>
</div>
</div>
<div className="relative -mt-4 lg:col-span-7 lg:mt-0 xl:col-span-6">

115
src/components/Logo.tsx
View File

File diff suppressed because one or more lines are too long

32
src/components/PhoneFrame.tsx
View File

@@ -1,22 +1,6 @@
import Image from 'next/image'
import clsx from 'clsx'
import frame from '@/images/phone-frame.svg'
function PlaceholderFrame(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 366 729" aria-hidden="true" {...props}>
<path
fill="#F2F2F2"
fillRule="evenodd"
clipRule="evenodd"
d="M300.092 1c41.22 0 63.223 21.99 63.223 63.213V184.94c-.173.184-.329.476-.458.851.188-.282.404-.547.647-.791.844-.073 2.496.257 2.496 2.157V268.719c-.406 2.023-2.605 2.023-2.605 2.023a7.119 7.119 0 0 1-.08-.102v394.462c0 41.213-22.001 63.212-63.223 63.212h-95.074c-.881-.468-2.474-.795-4.323-.838l-33.704-.005-.049.001h-.231l-.141-.001c-2.028 0-3.798.339-4.745.843H66.751c-41.223 0-63.223-21.995-63.223-63.208V287.739c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 284.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-16.289c-.402-.024-2.165-.23-2.524-2.02v-.973A2.039 2.039 0 0 1 1 214.62v-47.611c0-.042.001-.084.004-.126v-.726c0-1.9 1.652-2.23 2.496-2.157l.028.028v-26.041a2.26 2.26 0 0 0 .093-.236l-.064-.01a3.337 3.337 0 0 1-.72-.12l-.166-.028A2 2 0 0 1 1 135.62v-24.611a2 2 0 0 1 1.671-1.973l.857-.143v-44.68C3.528 22.99 25.53 1 66.75 1h233.341ZM3.952 234.516a5.481 5.481 0 0 0-.229-.278c.082.071.159.163.228.278Zm89.99-206.304A4.213 4.213 0 0 0 89.727 24H56.864C38.714 24 24 38.708 24 56.852v618.296C24 693.292 38.714 708 56.864 708h250.272c18.15 0 32.864-14.708 32.864-32.852V56.852C340 38.708 325.286 24 307.136 24h-32.864a4.212 4.212 0 0 0-4.213 4.212v2.527c0 10.235-8.3 18.532-18.539 18.532H112.48c-10.239 0-18.539-8.297-18.539-18.532v-2.527Z"
/>
<rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
</svg>
)
}
export function PhoneFrame({
className,
children,
@@ -24,19 +8,17 @@ export function PhoneFrame({
...props
}: React.ComponentPropsWithoutRef<'div'> & { priority?: boolean }) {
return (
<div className={clsx('relative aspect-366/729', className)} {...props}>
<div className="absolute inset-y-[calc(1/729*100%)] right-[calc(5/729*100%)] left-[calc(7/729*100%)] rounded-[calc(58/366*100%)/calc(58/729*100%)] shadow-2xl" />
<div className="absolute top-[calc(23/729*100%)] left-[calc(23/366*100%)] grid h-[calc(686/729*100%)] w-[calc(318/366*100%)] transform grid-cols-1 overflow-hidden bg-gray-900 pt-[calc(23/318*100%)]">
{children}
</div>
<PlaceholderFrame className="pointer-events-none absolute inset-0 h-full w-full fill-gray-100" />
<div className={clsx('relative aspect-[366/729]', className)} {...props}>
<Image
src={frame}
src="/images/phoneframe.png"
alt=""
className="pointer-events-none absolute inset-0 h-full w-full"
unoptimized
className="pointer-events-none absolute inset-0"
fill
priority={priority}
/>
<div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-hidden bg-gray-900">
{children}
</div>
</div>
)
}