ok
This commit is contained in:
32
src/components/About.tsx
Normal file
32
src/components/About.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { AppStoreLink } from '@/components/AppStoreLink'
|
||||
import { CircleBackground } from '@/components/CircleBackground'
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
export function About() {
|
||||
return (
|
||||
<section
|
||||
id="about"
|
||||
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
|
||||
>
|
||||
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
|
||||
<CircleBackground color="#fff" className="animate-spin-slower" />
|
||||
</div>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl sm:text-center">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Discover Mycelium
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
|
||||
</p>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
|
||||
</p>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<AppStoreLink color="white" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
71
src/components/AndroidLink.tsx
Normal file
71
src/components/AndroidLink.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export function AndroidLink({
|
||||
color = 'black',
|
||||
}: {
|
||||
color?: 'black' | 'white'
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href="#"
|
||||
aria-label="Download for Android"
|
||||
className={clsx(
|
||||
'flex items-center rounded-lg transition-colors px-4 py-2',
|
||||
color === 'black'
|
||||
? 'bg-gray-800 text-white hover:bg-gray-900'
|
||||
: 'bg-white text-gray-900 hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
{/* Android SVG (converted for JSX) */}
|
||||
<svg
|
||||
viewBox="0 0 60 60"
|
||||
aria-hidden="true"
|
||||
className="h-5 w-5 mr-3"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="android_clip_a">
|
||||
<path d="M 1.566406 25 L 8 25 L 8 43 L 1.566406 43 Z M 1.566406 25 " clipRule="nonzero" />
|
||||
</clipPath>
|
||||
<clipPath id="android_clip_b">
|
||||
<path d="M 10 25 L 34 25 L 34 53.640625 L 10 53.640625 Z M 10 25 " clipRule="nonzero" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g clipPath="url(#android_clip_a)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M 4.445312 25.296875 C 2.855469 25.296875 1.5625 26.582031 1.5625 28.164062 L 1.5625 39.636719 C 1.5625 41.21875 2.855469 42.503906 4.445312 42.503906 C 6.035156 42.503906 7.324219 41.21875 7.324219 39.636719 L 7.324219 28.164062 C 7.324219 26.582031 6.035156 25.296875 4.445312 25.296875 Z M 4.445312 25.296875 "
|
||||
fillOpacity="1"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M 39.015625 25.296875 C 37.425781 25.296875 36.132812 26.582031 36.132812 28.164062 L 36.132812 39.636719 C 36.132812 41.21875 37.425781 42.503906 39.015625 42.503906 C 40.605469 42.503906 41.894531 41.21875 41.894531 39.636719 L 41.894531 28.164062 C 41.894531 26.582031 40.605469 25.296875 39.015625 25.296875 Z M 39.015625 25.296875 "
|
||||
fillOpacity="1"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
<g clipPath="url(#android_clip_b)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M 10.207031 42.667969 C 10.207031 44.253906 11.496094 45.535156 13.085938 45.535156 L 13.085938 51.105469 C 13.085938 52.6875 14.378906 53.972656 15.96875 53.972656 C 17.558594 53.972656 18.847656 52.6875 18.847656 51.105469 L 18.847656 45.535156 L 24.609375 45.535156 L 24.609375 51.105469 C 24.609375 52.6875 25.902344 53.972656 27.492188 53.972656 C 29.082031 53.972656 30.371094 52.6875 30.371094 51.105469 L 30.371094 45.535156 C 31.960938 45.535156 33.253906 44.253906 33.253906 42.667969 L 33.253906 25.464844 L 10.207031 25.464844 Z M 10.207031 42.667969 "
|
||||
fillOpacity="1"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</g>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M 28.921875 13.53125 L 31.484375 10.4375 C 31.992188 9.824219 31.90625 8.921875 31.292969 8.417969 C 30.675781 7.914062 29.769531 8 29.261719 8.609375 L 26.460938 11.992188 C 25.015625 11.339844 23.421875 10.957031 21.730469 10.957031 C 20.015625 10.957031 18.402344 11.355469 16.941406 12.023438 L 14.214844 8.628906 C 13.714844 8.011719 12.808594 7.910156 12.1875 8.40625 C 11.570312 8.902344 11.46875 9.804688 11.964844 10.421875 L 14.492188 13.570312 C 11.898438 15.671875 10.207031 18.839844 10.207031 22.429688 L 33.253906 22.429688 C 33.253906 18.816406 31.542969 15.632812 28.921875 13.53125 Z M 18.847656 18.128906 C 18.054688 18.128906 17.410156 17.484375 17.410156 16.695312 C 17.410156 15.902344 18.054688 15.261719 18.847656 15.261719 C 19.644531 15.261719 20.289062 15.902344 20.289062 16.695312 C 20.289062 17.484375 19.644531 18.128906 18.847656 18.128906 Z M 24.609375 18.128906 C 23.816406 18.128906 23.171875 17.484375 23.171875 16.695312 C 23.171875 15.902344 23.816406 15.261719 24.609375 15.261719 C 25.40625 15.261719 26.050781 15.902344 26.050781 16.695312 C 26.050781 17.484375 25.40625 18.128906 24.609375 18.128906 Z M 24.609375 18.128906 "
|
||||
fillOpacity="1"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex flex-col text-left leading-tight">
|
||||
<span className="text-[9px] mt-0">Download for</span>
|
||||
<span className="text-sm font-semibold -mt-1.5">Android</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
250
src/components/AppDemo.tsx
Normal file
250
src/components/AppDemo.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
'use client'
|
||||
|
||||
import { useId, useRef, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { motion, useInView, useMotionValue } from 'framer-motion'
|
||||
|
||||
import { AppScreen } from '@/components/AppScreen'
|
||||
|
||||
const prices = [
|
||||
997.56, 944.34, 972.25, 832.4, 888.76, 834.8, 805.56, 767.38, 861.21, 669.6,
|
||||
694.39, 721.32, 694.03, 610.1, 502.2, 549.56, 611.03, 583.4, 610.14, 660.6,
|
||||
752.11, 721.19, 638.89, 661.7, 694.51, 580.3, 638.0, 613.3, 651.64, 560.51,
|
||||
611.45, 670.68, 752.56,
|
||||
]
|
||||
const maxPrice = Math.max(...prices)
|
||||
const minPrice = Math.min(...prices)
|
||||
|
||||
function Chart({
|
||||
className,
|
||||
activePointIndex,
|
||||
onChangeActivePointIndex,
|
||||
width: totalWidth,
|
||||
height: totalHeight,
|
||||
paddingX = 0,
|
||||
paddingY = 0,
|
||||
gridLines = 6,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'svg'> & {
|
||||
activePointIndex: number | null
|
||||
onChangeActivePointIndex: (index: number | null) => void
|
||||
width: number
|
||||
height: number
|
||||
paddingX?: number
|
||||
paddingY?: number
|
||||
gridLines?: number
|
||||
}) {
|
||||
let width = totalWidth - paddingX * 2
|
||||
let height = totalHeight - paddingY * 2
|
||||
|
||||
let id = useId()
|
||||
let svgRef = useRef<React.ElementRef<'svg'>>(null)
|
||||
let pathRef = useRef<React.ElementRef<'path'>>(null)
|
||||
let isInView = useInView(svgRef, { amount: 0.5, once: true })
|
||||
let pathWidth = useMotionValue(0)
|
||||
let [interactionEnabled, setInteractionEnabled] = useState(false)
|
||||
|
||||
let path = ''
|
||||
let points: Array<{ x: number; y: number }> = []
|
||||
|
||||
for (let index = 0; index < prices.length; index++) {
|
||||
let x = paddingX + (index / (prices.length - 1)) * width
|
||||
let y =
|
||||
paddingY +
|
||||
(1 - (prices[index] - minPrice) / (maxPrice - minPrice)) * height
|
||||
points.push({ x, y })
|
||||
path += `${index === 0 ? 'M' : 'L'} ${x.toFixed(4)} ${y.toFixed(4)}`
|
||||
}
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={`0 0 ${totalWidth} ${totalHeight}`}
|
||||
className={clsx(className, 'overflow-visible')}
|
||||
{...(interactionEnabled
|
||||
? {
|
||||
onPointerLeave: () => onChangeActivePointIndex(null),
|
||||
onPointerMove: (event) => {
|
||||
let x = event.nativeEvent.offsetX
|
||||
let closestPointIndex: number | null = null
|
||||
let closestDistance = Infinity
|
||||
for (
|
||||
let pointIndex = 0;
|
||||
pointIndex < points.length;
|
||||
pointIndex++
|
||||
) {
|
||||
let point = points[pointIndex]
|
||||
let distance = Math.abs(point.x - x)
|
||||
if (distance < closestDistance) {
|
||||
closestDistance = distance
|
||||
closestPointIndex = pointIndex
|
||||
} else {
|
||||
break
|
||||
}
|
||||
}
|
||||
onChangeActivePointIndex(closestPointIndex)
|
||||
},
|
||||
}
|
||||
: {})}
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id={`${id}-clip`}>
|
||||
<path d={`${path} V ${height + paddingY} H ${paddingX} Z`} />
|
||||
</clipPath>
|
||||
<linearGradient id={`${id}-gradient`} x1="0" x2="0" y1="0" y2="1">
|
||||
<stop offset="0%" stopColor="#13B5C8" />
|
||||
<stop offset="100%" stopColor="#13B5C8" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{[...Array(gridLines - 1).keys()].map((index) => (
|
||||
<line
|
||||
key={index}
|
||||
stroke="#a3a3a3"
|
||||
opacity="0.1"
|
||||
x1="0"
|
||||
y1={(totalHeight / gridLines) * (index + 1)}
|
||||
x2={totalWidth}
|
||||
y2={(totalHeight / gridLines) * (index + 1)}
|
||||
/>
|
||||
))}
|
||||
<motion.rect
|
||||
y={paddingY}
|
||||
width={pathWidth}
|
||||
height={height}
|
||||
fill={`url(#${id}-gradient)`}
|
||||
clipPath={`url(#${id}-clip)`}
|
||||
opacity="0.5"
|
||||
/>
|
||||
<motion.path
|
||||
ref={pathRef}
|
||||
d={path}
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
initial={{ pathLength: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
{...(isInView ? { stroke: '#06b6d4', animate: { pathLength: 1 } } : {})}
|
||||
onUpdate={({ pathLength }) => {
|
||||
if (pathRef.current && typeof pathLength === 'number') {
|
||||
pathWidth.set(
|
||||
pathRef.current.getPointAtLength(
|
||||
pathLength * pathRef.current.getTotalLength(),
|
||||
).x,
|
||||
)
|
||||
}
|
||||
}}
|
||||
onAnimationComplete={() => setInteractionEnabled(true)}
|
||||
/>
|
||||
{activePointIndex !== null && (
|
||||
<>
|
||||
<line
|
||||
x1="0"
|
||||
y1={points[activePointIndex].y}
|
||||
x2={totalWidth}
|
||||
y2={points[activePointIndex].y}
|
||||
stroke="#06b6d4"
|
||||
strokeDasharray="1 3"
|
||||
/>
|
||||
<circle
|
||||
r="4"
|
||||
cx={points[activePointIndex].x}
|
||||
cy={points[activePointIndex].y}
|
||||
fill="#fff"
|
||||
strokeWidth="2"
|
||||
stroke="#06b6d4"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function AppDemo() {
|
||||
let [activePointIndex, setActivePointIndex] = useState<number | null>(null)
|
||||
let activePriceIndex = activePointIndex ?? prices.length - 1
|
||||
let activeValue = prices[activePriceIndex]
|
||||
let previousValue = prices[activePriceIndex - 1]
|
||||
let percentageChange =
|
||||
activePriceIndex === 0
|
||||
? null
|
||||
: ((activeValue - previousValue) / previousValue) * 100
|
||||
|
||||
return (
|
||||
<AppScreen>
|
||||
<AppScreen.Body>
|
||||
<div className="p-4">
|
||||
<div className="flex gap-2">
|
||||
<div className="text-xs/6 text-gray-500">Tailwind Labs, Inc.</div>
|
||||
<div className="text-sm text-gray-900">$CSS</div>
|
||||
<svg viewBox="0 0 24 24" className="ml-auto h-6 w-6" fill="none">
|
||||
<path
|
||||
d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0ZM12 9v6M15 12H9"
|
||||
stroke="#171717"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mt-3 border-t border-gray-200 pt-5">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<div className="text-2xl tracking-tight text-gray-900 tabular-nums">
|
||||
{activeValue.toFixed(2)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-900">USD</div>
|
||||
{percentageChange && (
|
||||
<div
|
||||
className={clsx(
|
||||
'ml-auto text-sm tracking-tight tabular-nums',
|
||||
percentageChange >= 0 ? 'text-cyan-500' : 'text-gray-500',
|
||||
)}
|
||||
>
|
||||
{`${
|
||||
percentageChange >= 0 ? '+' : ''
|
||||
}${percentageChange.toFixed(2)}%`}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6 flex gap-4 text-xs text-gray-500">
|
||||
<div>1D</div>
|
||||
<div>5D</div>
|
||||
<div className="font-semibold text-cyan-600">1M</div>
|
||||
<div>6M</div>
|
||||
<div>1Y</div>
|
||||
<div>5Y</div>
|
||||
</div>
|
||||
<div className="mt-3 rounded-lg bg-gray-50 ring-1 ring-black/5 ring-inset">
|
||||
<Chart
|
||||
width={286}
|
||||
height={208}
|
||||
paddingX={16}
|
||||
paddingY={32}
|
||||
activePointIndex={activePointIndex}
|
||||
onChangeActivePointIndex={setActivePointIndex}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 rounded-lg bg-cyan-500 px-4 py-2 text-center text-sm font-semibold text-white">
|
||||
Trade
|
||||
</div>
|
||||
<div className="mt-3 divide-y divide-gray-100 text-sm">
|
||||
<div className="flex justify-between py-1">
|
||||
<div className="text-gray-500">Open</div>
|
||||
<div className="font-medium text-gray-900">6,387.55</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-1">
|
||||
<div className="text-gray-500">Closed</div>
|
||||
<div className="font-medium text-gray-900">6,487.09</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-1">
|
||||
<div className="text-gray-500">Low</div>
|
||||
<div className="font-medium text-gray-900">6,322.01</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppScreen.Body>
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
109
src/components/AppScreen.tsx
Normal file
109
src/components/AppScreen.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { forwardRef } from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 79 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12ZM2.4 12a9.004 9.004 0 0 0 6.055 8.507c1.565.542 2.945-.85 2.945-2.507V6c0-1.657-1.38-3.049-2.945-2.507A9.004 9.004 0 0 0 2.4 12Z"
|
||||
fill="#06B6D4"
|
||||
/>
|
||||
<path
|
||||
d="M33.004 17V6.818h3.818c.783 0 1.439.146 1.97.438.533.291.935.692 1.207 1.203.275.507.413 1.084.413 1.73 0 .653-.138 1.233-.413 1.74a2.948 2.948 0 0 1-1.218 1.198c-.537.288-1.198.433-1.983.433h-2.531v-1.517h2.282c.457 0 .832-.08 1.124-.238.291-.16.507-.378.646-.657.142-.278.214-.598.214-.96 0-.36-.072-.679-.214-.954a1.452 1.452 0 0 0-.651-.641c-.292-.156-.668-.234-1.129-.234h-1.69V17h-1.845Zm12.152.15c-.746 0-1.392-.165-1.939-.493a3.343 3.343 0 0 1-1.273-1.377c-.298-.59-.447-1.28-.447-2.068 0-.79.15-1.48.447-2.073a3.335 3.335 0 0 1 1.273-1.383c.547-.328 1.193-.492 1.94-.492.745 0 1.391.164 1.938.492.547.329.97.79 1.268 1.383.301.593.452 1.284.452 2.073 0 .789-.15 1.478-.452 2.068a3.309 3.309 0 0 1-1.268 1.377c-.547.328-1.193.492-1.939.492Zm.01-1.443c.404 0 .742-.11 1.014-.333.272-.225.474-.527.607-.905.136-.377.204-.798.204-1.262 0-.468-.068-.89-.204-1.268a2.007 2.007 0 0 0-.607-.91c-.272-.225-.61-.338-1.014-.338-.414 0-.759.113-1.034.338a2.041 2.041 0 0 0-.612.91 3.81 3.81 0 0 0-.198 1.268c0 .464.066.885.198 1.262.136.378.34.68.612.905.275.222.62.333 1.034.333Zm8.508 1.442c-.763 0-1.417-.167-1.964-.502a3.352 3.352 0 0 1-1.258-1.387c-.292-.593-.437-1.276-.437-2.048 0-.776.149-1.46.447-2.054a3.34 3.34 0 0 1 1.263-1.392c.547-.334 1.193-.502 1.939-.502.62 0 1.168.115 1.645.343.48.226.864.546 1.149.96.285.41.447.891.487 1.441h-1.72a1.644 1.644 0 0 0-.497-.92c-.259-.248-.605-.372-1.04-.372-.367 0-.69.1-.969.298-.278.196-.495.478-.651.845-.153.368-.229.81-.229 1.323 0 .52.076.968.229 1.342.152.371.366.658.641.86.279.2.605.298.98.298.265 0 .502-.05.71-.149.213-.102.39-.25.532-.442.143-.192.24-.426.294-.701h1.72a2.999 2.999 0 0 1-.477 1.437c-.275.414-.65.739-1.124.974-.474.232-1.03.348-1.67.348Zm6.39-2.545-.006-2.173h.289l2.744-3.067h2.103l-3.376 3.758h-.372l-1.383 1.482ZM58.422 17V6.818h1.8V17h-1.8Zm4.792 0-2.485-3.475 1.213-1.268L65.368 17h-2.153Zm6.245.15c-.766 0-1.427-.16-1.984-.478a3.233 3.233 0 0 1-1.278-1.362c-.298-.59-.447-1.285-.447-2.083 0-.786.149-1.475.447-2.069a3.384 3.384 0 0 1 1.263-1.392c.54-.334 1.175-.502 1.904-.502.47 0 .915.076 1.333.229.42.149.792.381 1.113.696.325.315.58.716.766 1.203.186.484.278 1.06.278 1.73v.552h-6.259v-1.213h4.534a1.935 1.935 0 0 0-.224-.92 1.625 1.625 0 0 0-.611-.641 1.719 1.719 0 0 0-.905-.234c-.368 0-.691.09-.97.269a1.848 1.848 0 0 0-.65.696c-.153.285-.231.598-.234.94v1.058c0 .444.08.825.243 1.144.163.315.39.556.681.726.292.165.634.248 1.025.248.261 0 .498-.036.71-.11.213-.075.397-.187.552-.332.156-.146.274-.327.353-.542l1.68.189a2.62 2.62 0 0 1-.606 1.163 2.958 2.958 0 0 1-1.133.766c-.461.179-.988.268-1.581.268Zm8.731-7.786v1.392h-4.39V9.364h4.39Zm-3.306-1.83h1.8v7.17c0 .241.036.427.109.556a.59.59 0 0 0 .298.258c.123.047.259.07.408.07.113 0 .215-.008.308-.025.096-.016.17-.031.219-.045l.303 1.407c-.096.034-.233.07-.412.11-.176.04-.392.063-.647.07a2.934 2.934 0 0 1-1.218-.204 1.895 1.895 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194V7.534Z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M5 6h14M5 18h14M5 12h14"
|
||||
stroke="#fff"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.696 19h10.608c1.175 0 2.08-.935 1.532-1.897C18.028 15.69 16.187 14 12 14s-6.028 1.689-6.836 3.103C4.616 18.065 5.521 19 6.696 19Z"
|
||||
stroke="#fff"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function AppScreen({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'div'>) {
|
||||
return (
|
||||
<div className={clsx('flex flex-col', className)} {...props}>
|
||||
<div className="flex justify-between px-4 pt-4">
|
||||
<MenuIcon className="h-6 w-6 flex-none" />
|
||||
<Logo className="h-6 flex-none" />
|
||||
<UserIcon className="h-6 w-6 flex-none" />
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
AppScreen.Header = forwardRef<
|
||||
React.ElementRef<'div'>,
|
||||
{ children: React.ReactNode }
|
||||
>(function AppScreenHeader({ children }, ref) {
|
||||
return (
|
||||
<div ref={ref} className="mt-6 px-4 text-white">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
AppScreen.Title = forwardRef<
|
||||
React.ElementRef<'div'>,
|
||||
{ children: React.ReactNode }
|
||||
>(function AppScreenTitle({ children }, ref) {
|
||||
return (
|
||||
<div ref={ref} className="text-2xl text-white">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
AppScreen.Subtitle = forwardRef<
|
||||
React.ElementRef<'div'>,
|
||||
{ children: React.ReactNode }
|
||||
>(function AppScreenSubtitle({ children }, ref) {
|
||||
return (
|
||||
<div ref={ref} className="text-sm text-gray-500">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
||||
AppScreen.Body = forwardRef<
|
||||
React.ElementRef<'div'>,
|
||||
{ className?: string; children: React.ReactNode }
|
||||
>(function AppScreenBody({ children, className }, ref) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={clsx('mt-6 flex-auto rounded-t-2xl bg-white', className)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
28
src/components/AppStoreLink.tsx
Normal file
28
src/components/AppStoreLink.tsx
Normal file
File diff suppressed because one or more lines are too long
40
src/components/AuthLayout.tsx
Normal file
40
src/components/AuthLayout.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import Link from 'next/link'
|
||||
|
||||
import { CirclesBackground } from '@/components/CirclesBackground'
|
||||
import { Logo } from '@/components/Logo'
|
||||
|
||||
export function AuthLayout({
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
}: {
|
||||
title: string
|
||||
subtitle: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<main className="flex min-h-full overflow-hidden pt-16 sm:py-28">
|
||||
<div className="mx-auto flex w-full max-w-2xl flex-col px-4 sm:px-6">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="mx-auto h-10 w-auto" />
|
||||
</Link>
|
||||
<div className="relative mt-12 sm:mt-16">
|
||||
<CirclesBackground
|
||||
width="1090"
|
||||
height="1090"
|
||||
className="absolute -top-7 left-1/2 -z-10 h-[788px] -translate-x-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30 sm:-top-9 sm:h-auto"
|
||||
/>
|
||||
<h1 className="text-center text-2xl font-medium tracking-tight text-gray-900">
|
||||
{title}
|
||||
</h1>
|
||||
{subtitle && (
|
||||
<p className="mt-3 text-center text-lg text-gray-600">{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="-mx-4 mt-10 flex-auto bg-white px-4 py-10 shadow-2xl shadow-gray-900/10 sm:mx-0 sm:flex-none sm:rounded-5xl sm:p-24">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
60
src/components/Benefits.tsx
Normal file
60
src/components/Benefits.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { useInView } from 'framer-motion'
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Decentralization',
|
||||
description: 'Designed to operate in a decentralized manner, it connects nodes and enables efficient data transfer and communication without relying on a single central authority.',
|
||||
},
|
||||
{
|
||||
name: 'Efficiency',
|
||||
description:
|
||||
'Mycelium provides an efficient digital communication network where data travels along the most efficient paths, reducing latency and optimizing resource utilization.',
|
||||
},
|
||||
{
|
||||
name: 'Resilience',
|
||||
description:
|
||||
'Inspired by nature\'s resilience, it creates a network that can adapt and continue to function even in the presence of challenges, ensuring uninterrupted communication.',
|
||||
},
|
||||
]
|
||||
|
||||
export function Benefits() {
|
||||
return (
|
||||
<section id="benefits" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-5xl lg:mx-0">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-gray-900">
|
||||
Nature's Blueprint for Digital Connectivity
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Just as nature's mycelium network serves as a critical component in the ecosystems of forests, connecting trees and plants underground, the Mycelium technology offers reliable connectivity in an efficient and resilient way.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
|
||||
>
|
||||
<img
|
||||
src={`/images/${feature.name.toLowerCase()}.svg`}
|
||||
alt={feature.name}
|
||||
className="h-8 w-8 mb-4"
|
||||
/>
|
||||
<h3 className="font-semibold text-gray-900 dark:text-white">{feature.name}</h3>
|
||||
<p className="mt-2 text-gray-700 text-sm dark:text-gray-400">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
59
src/components/Button.tsx
Normal file
59
src/components/Button.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
solid:
|
||||
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
|
||||
outline:
|
||||
'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
|
||||
}
|
||||
|
||||
const variantStyles = {
|
||||
solid: {
|
||||
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
|
||||
white:
|
||||
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
|
||||
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
|
||||
},
|
||||
outline: {
|
||||
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
|
||||
},
|
||||
}
|
||||
|
||||
type ButtonProps = (
|
||||
| {
|
||||
variant?: 'solid'
|
||||
color?: keyof typeof variantStyles.solid
|
||||
}
|
||||
| {
|
||||
variant: 'outline'
|
||||
color?: keyof typeof variantStyles.outline
|
||||
}
|
||||
) &
|
||||
(
|
||||
| Omit<React.ComponentPropsWithoutRef<typeof Link>, 'color'>
|
||||
| (Omit<React.ComponentPropsWithoutRef<'button'>, 'color'> & {
|
||||
href?: undefined
|
||||
})
|
||||
)
|
||||
|
||||
export function Button({ className, ...props }: ButtonProps) {
|
||||
props.variant ??= 'solid'
|
||||
props.color ??= 'gray'
|
||||
|
||||
className = clsx(
|
||||
baseStyles[props.variant],
|
||||
props.variant === 'outline'
|
||||
? variantStyles.outline[props.color]
|
||||
: props.variant === 'solid'
|
||||
? variantStyles.solid[props.color]
|
||||
: undefined,
|
||||
className,
|
||||
)
|
||||
|
||||
return typeof props.href === 'undefined' ? (
|
||||
<button className={className} {...props} />
|
||||
) : (
|
||||
<Link className={className} {...props} />
|
||||
)
|
||||
}
|
||||
35
src/components/CallToAction.tsx
Normal file
35
src/components/CallToAction.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { AppStoreLink } from '@/components/AppStoreLink'
|
||||
import { WindowsLink } from '@/components/WindowsLink'
|
||||
import { AndroidLink } from './AndroidLink'
|
||||
import { LinuxLink } from '@/components/LinuxLink'
|
||||
import { CircleBackground } from '@/components/CircleBackground'
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
export function CallToAction() {
|
||||
return (
|
||||
<section
|
||||
id="get-free-shares-today"
|
||||
className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
|
||||
>
|
||||
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
|
||||
<CircleBackground color="#fff" className="animate-spin-slower" />
|
||||
</div>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-2xl sm:text-center">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
|
||||
Get Started Today
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
|
||||
</p>
|
||||
<div className="mt-8 flex justify-center gap-4">
|
||||
<AppStoreLink color="white" />
|
||||
<WindowsLink color="white" />
|
||||
<AndroidLink color="white" />
|
||||
<LinuxLink color="white" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
45
src/components/CircleBackground.tsx
Normal file
45
src/components/CircleBackground.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useId } from 'react'
|
||||
|
||||
export function CircleBackground({
|
||||
color,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'svg'> & {
|
||||
color: string
|
||||
}) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 558 558"
|
||||
width="558"
|
||||
height="558"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={id}
|
||||
x1="79"
|
||||
y1="16"
|
||||
x2="105"
|
||||
y2="237"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor={color} />
|
||||
<stop offset="1" stopColor={color} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
opacity=".2"
|
||||
d="M1 279C1 125.465 125.465 1 279 1s278 124.465 278 278-124.465 278-278 278S1 432.535 1 279Z"
|
||||
stroke={color}
|
||||
/>
|
||||
<path
|
||||
d="M1 279C1 125.465 125.465 1 279 1"
|
||||
stroke={`url(#${id})`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
18
src/components/CirclesBackground.tsx
Normal file
18
src/components/CirclesBackground.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
export function CirclesBackground(
|
||||
props: React.ComponentPropsWithoutRef<'svg'>,
|
||||
) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 1090 1090"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
{...props}
|
||||
>
|
||||
<circle cx={545} cy={545} r="544.5" />
|
||||
<circle cx={545} cy={545} r="480.5" />
|
||||
<circle cx={545} cy={545} r="416.5" />
|
||||
<circle cx={545} cy={545} r="352.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
13
src/components/Container.tsx
Normal file
13
src/components/Container.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import clsx from 'clsx'
|
||||
|
||||
export function Container({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'div'>) {
|
||||
return (
|
||||
<div
|
||||
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
15
src/components/DownloadLink.tsx
Normal file
15
src/components/DownloadLink.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import Link from 'next/link'
|
||||
import { ArrowDownTrayIcon } from '@heroicons/react/24/solid'
|
||||
|
||||
export function DownloadLink() {
|
||||
return (
|
||||
<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"
|
||||
>
|
||||
<ArrowDownTrayIcon className="h-5 w-5 mr-2" />
|
||||
Get Mycelium
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
100
src/components/Faqs.tsx
Normal file
100
src/components/Faqs.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
const faqs = [
|
||||
[
|
||||
{
|
||||
question: 'What is Mycelium?',
|
||||
answer:
|
||||
'Mycelium is an end-to-end encrypted IPv6 overlay network written in Rust. Each node joining the network receives an IP in the 400::/7 range, facilitating secure and private communications.',
|
||||
},
|
||||
{
|
||||
question: 'Is mycelium ready to scale to the world?',
|
||||
answer:
|
||||
'No, Mycelium is not yet fully scalable to a global level. Currently, each network can support around 100,000 users, but multiple networks can be deployed to expand capacity. We anticipate resolving these scalability challenges by 2025.',
|
||||
},
|
||||
{
|
||||
question: 'How do I install Mycelium?',
|
||||
answer:
|
||||
'The Mycelium app supports iOS, macOS, Android and Windows. For Linux, a binary is available. Installation guides are available for both local machines and virtual machines running on the TFGrid. Note that Windows users need to have wintun.dll in the same directory as the Mycelium executable.',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: 'How can I find and use my Mycelium address?',
|
||||
answer:
|
||||
'Upon using the Mycelium app, you\'re assigned a unique Mycelium address. To copy this address, click the button located to the right of the displayed address in the app interface.',
|
||||
},
|
||||
{
|
||||
question: 'Can I deploy workloads on the TFGrid using Mycelium?',
|
||||
answer:
|
||||
'Yes, after installing Mycelium, you can deploy workloads on the TFGrid and connect to them using the Mycelium network. Detailed deployment guides are available in the documentation.',
|
||||
},
|
||||
{
|
||||
question: 'Is there an API available for Mycelium?',
|
||||
answer:
|
||||
'Yes, Mycelium offers an API for administrative operations, peer management, and message subsystem operations. Comprehensive API documentation can be found in the official Mycelium GitHub repository.',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
question: 'What should I do if I encounter issues during installation or usage?',
|
||||
answer:
|
||||
'If you face any challenges, refer to the troubleshooting section in the Mycelium documentation. Additionally, ensure that all prerequisites are met, such as having wintun.dll in the correct directory for Windows installations.',
|
||||
},
|
||||
{
|
||||
question: 'How does Mycelium handle routing within its network?',
|
||||
answer:
|
||||
'Mycelium incorporates core principles of the Babel routing protocol, enabling efficient and dynamic routing within its encrypted IPv6 overlay network.',
|
||||
},
|
||||
],
|
||||
]
|
||||
|
||||
export function Faqs() {
|
||||
return (
|
||||
<section
|
||||
id="faqs"
|
||||
aria-labelledby="faqs-title"
|
||||
className="border-t border-gray-200 py-20 sm:py-32"
|
||||
>
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<h2
|
||||
id="faqs-title"
|
||||
className="text-3xl font-medium tracking-tight text-gray-900"
|
||||
>
|
||||
Frequently asked questions
|
||||
</h2>
|
||||
<p className="mt-2 text-lg text-gray-600">
|
||||
If you have anything else you want to ask,{' '}
|
||||
<a
|
||||
href="mailto:info@example.com"
|
||||
className="text-gray-900 underline"
|
||||
>
|
||||
reach out to us
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-8 sm:mt-20 lg:max-w-none lg:grid-cols-3"
|
||||
>
|
||||
{faqs.map((column, columnIndex) => (
|
||||
<li key={columnIndex}>
|
||||
<ul role="list" className="space-y-10">
|
||||
{column.map((faq, faqIndex) => (
|
||||
<li key={faqIndex}>
|
||||
<h3 className="text-lg/6 font-semibold text-gray-900">
|
||||
{faq.question}
|
||||
</h3>
|
||||
<p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
47
src/components/Fields.tsx
Normal file
47
src/components/Fields.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import { useId } from 'react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
const formClasses =
|
||||
'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-hidden focus:ring-cyan-500 sm:text-sm'
|
||||
|
||||
function Label({ id, children }: { id: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<label
|
||||
htmlFor={id}
|
||||
className="mb-2 block text-sm font-semibold text-gray-900"
|
||||
>
|
||||
{children}
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
export function TextField({
|
||||
label,
|
||||
type = 'text',
|
||||
className,
|
||||
...props
|
||||
}: Omit<React.ComponentPropsWithoutRef<'input'>, 'id'> & { label?: string }) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{label && <Label id={id}>{label}</Label>}
|
||||
<input id={id} type={type} {...props} className={formClasses} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function SelectField({
|
||||
label,
|
||||
className,
|
||||
...props
|
||||
}: Omit<React.ComponentPropsWithoutRef<'select'>, 'id'> & { label?: string }) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{label && <Label id={id}>{label}</Label>}
|
||||
<select id={id} {...props} className={clsx(formClasses, 'pr-8')} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
80
src/components/Footer.tsx
Normal file
80
src/components/Footer.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import Image from 'next/image'
|
||||
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'
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
<div className="flex items-center text-gray-900">
|
||||
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="mt-11 flex gap-8">
|
||||
<NavLinks />
|
||||
</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>
|
||||
<div className="ml-8 lg:w-64">
|
||||
<p className="text-base font-semibold text-gray-900">
|
||||
<Link href="#">
|
||||
<span className="absolute inset-0 sm:rounded-2xl" />
|
||||
Download the app
|
||||
</Link>
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-700">
|
||||
Scan the QR code to download the app from the App Store.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center border-t border-gray-200 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
|
||||
<form className="flex w-full justify-center md:w-auto">
|
||||
<TextField
|
||||
type="email"
|
||||
aria-label="Email address"
|
||||
placeholder="Email address"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="w-60 min-w-0 shrink"
|
||||
/>
|
||||
<Button type="submit" color="cyan" className="ml-4 flex-none">
|
||||
<span className="hidden lg:inline">Join our newsletter</span>
|
||||
<span className="lg:hidden">Join newsletter</span>
|
||||
</Button>
|
||||
</form>
|
||||
<p className="mt-6 text-sm text-gray-500 md:mt-0">
|
||||
© Copyright ThreeFold {new Date().getFullYear()}. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
149
src/components/Header.tsx
Normal file
149
src/components/Header.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
Popover,
|
||||
PopoverButton,
|
||||
PopoverBackdrop,
|
||||
PopoverPanel,
|
||||
} from '@headlessui/react'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Logo } from '@/components/Logo'
|
||||
import { NavLinks } from '@/components/NavLinks'
|
||||
|
||||
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M5 6h14M5 18h14M5 12h14"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function ChevronUpIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M17 14l-5-5-5 5"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function MobileNavLink(
|
||||
props: Omit<
|
||||
React.ComponentPropsWithoutRef<typeof PopoverButton<typeof Link>>,
|
||||
'as' | 'className'
|
||||
>,
|
||||
) {
|
||||
return (
|
||||
<PopoverButton
|
||||
as={Link}
|
||||
className="block text-base/7 tracking-tight text-gray-700"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<Container className="relative z-50 flex justify-between py-8">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="h-10 w-auto" />
|
||||
</Link>
|
||||
<div className="hidden lg:flex lg:gap-10">
|
||||
<NavLinks />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Popover className="lg:hidden">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<PopoverButton
|
||||
className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 focus:not-data-focus:outline-hidden active:stroke-gray-900"
|
||||
aria-label="Toggle site navigation"
|
||||
>
|
||||
{({ open }) =>
|
||||
open ? (
|
||||
<ChevronUpIcon className="h-6 w-6" />
|
||||
) : (
|
||||
<MenuIcon className="h-6 w-6" />
|
||||
)
|
||||
}
|
||||
</PopoverButton>
|
||||
<AnimatePresence initial={false}>
|
||||
{open && (
|
||||
<>
|
||||
<PopoverBackdrop
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur-sm"
|
||||
/>
|
||||
<PopoverPanel
|
||||
static
|
||||
as={motion.div}
|
||||
initial={{ opacity: 0, y: -32 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<MobileNavLink href="/#about">
|
||||
About
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#benefits">
|
||||
Benefits
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#features">
|
||||
Features
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#usecases">
|
||||
Use Cases
|
||||
</MobileNavLink>
|
||||
<MobileNavLink href="/#faqs">FAQs</MobileNavLink>
|
||||
</div>
|
||||
<div className="mt-8 flex flex-col gap-4">
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<div className="flex items-center gap-6 max-lg:hidden">
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
166
src/components/Hero.tsx
Normal file
166
src/components/Hero.tsx
Normal file
@@ -0,0 +1,166 @@
|
||||
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'
|
||||
import logoFastCompany from '@/images/logos/fast-company.svg'
|
||||
import logoForbes from '@/images/logos/forbes.svg'
|
||||
import logoHuffpost from '@/images/logos/huffpost.svg'
|
||||
import logoTechcrunch from '@/images/logos/techcrunch.svg'
|
||||
import logoWired from '@/images/logos/wired.svg'
|
||||
|
||||
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-slow"
|
||||
>
|
||||
<path
|
||||
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M513 1025C230.23 1025 1 795.77 1 513"
|
||||
stroke={`url(#${id}-gradient-1)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-1`}
|
||||
x1="1"
|
||||
y1="513"
|
||||
x2="1"
|
||||
y2="1025"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
|
||||
>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400"
|
||||
stroke={`url(#${id}-gradient-2)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-2`}
|
||||
x1="913"
|
||||
y1="513"
|
||||
x2="913"
|
||||
y2="913"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||
<circle cx="12" cy="12" r="11.5" stroke="#D4D4D4" />
|
||||
<path
|
||||
d="M9.5 14.382V9.618a.5.5 0 0 1 .724-.447l4.764 2.382a.5.5 0 0 1 0 .894l-4.764 2.382a.5.5 0 0 1-.724-.447Z"
|
||||
fill="#A3A3A3"
|
||||
stroke="#A3A3A3"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function Hero() {
|
||||
return (
|
||||
<div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
|
||||
<Container>
|
||||
<div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
|
||||
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
|
||||
<h1 className="text-4xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium
|
||||
</h1>
|
||||
<h2 className="mt-6 text-2xl tracking-tight text-gray-600">
|
||||
Unleashing the Power of Decentralized Networks
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
|
||||
</p>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Coming Soon: New Decentralized Features
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
|
||||
<DownloadLink />
|
||||
<Button
|
||||
href="https://youtu.be/4oq15lxvkts?si=Heh_8DHqHaNpy3_F"
|
||||
variant="outline"
|
||||
>
|
||||
<PlayIcon className="h-6 w-6 flex-none" />
|
||||
<span className="ml-2.5">Watch the Demo</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative -mt-4 lg:col-span-7 lg:mt-0 xl:col-span-6">
|
||||
<p className="text-center text-sm font-semibold text-gray-900 lg:text-left">
|
||||
As featured in
|
||||
</p>
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-8 flex max-w-xl flex-wrap justify-center gap-x-10 gap-y-8 lg:mx-0 lg:justify-start"
|
||||
>
|
||||
{[
|
||||
['Forbes', logoForbes],
|
||||
['TechCrunch', logoTechcrunch],
|
||||
['Wired', logoWired],
|
||||
['CNN', logoCnn, 'hidden xl:block'],
|
||||
['BBC', logoBbc],
|
||||
['CBS', logoCbs],
|
||||
['Fast Company', logoFastCompany],
|
||||
['HuffPost', logoHuffpost, 'hidden xl:block'],
|
||||
].map(([name, logo, className]) => (
|
||||
<li key={name} className={clsx('flex', className)}>
|
||||
<Image src={logo} alt={name} className="h-8" unoptimized />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
12
src/components/Layout.tsx
Normal file
12
src/components/Layout.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Footer } from '@/components/Footer'
|
||||
import { Header } from '@/components/Header'
|
||||
|
||||
export function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="flex-auto">{children}</main>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
36
src/components/LinuxLink.tsx
Normal file
36
src/components/LinuxLink.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export function LinuxLink({
|
||||
color = 'black',
|
||||
}: {
|
||||
color?: 'black' | 'white'
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href="#"
|
||||
aria-label="Download for Linux"
|
||||
className={clsx(
|
||||
'flex items-center rounded-lg transition-colors px-4 py-2',
|
||||
color === 'black'
|
||||
? 'bg-gray-800 text-white hover:bg-gray-900'
|
||||
: 'bg-white text-gray-900 hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
{/* Linux SVG */}
|
||||
<svg
|
||||
viewBox="0 0 266 312"
|
||||
aria-hidden="true"
|
||||
className="h-5 w-5 mr-3"
|
||||
>
|
||||
<path d="M128.6640625 79.2793c0 1-1 1-1 1h-1c-1 0-1-1-2-2 0 0-1-1-1-2s0-1 1-1l2 1c1 1 2 2 2 3m-18-10c0-5-2-8-5-8 0 0 0 1-1 1v2h3c0 2 1 3 1 5h2m35-5c2 0 3 2 4 5h2c-1-1-1-2-1-3s0-2-1-3-2-2-3-2c0 0-1 1-2 1 0 1 1 1 1 2m-30 16c-1 0-1 0-1-1s0-2 1-3c2 0 3-1 3-1 1 0 1 1 1 1 0 1-1 2-3 4h-1m-11-1c-4-2-5-5-5-10 0-3 0-5 2-7 1-2 3-3 5-3s3 1 5 3c1 3 2 6 2 9v2h1v-1c1 0 1-2 1-6 0-3 0-6-2-9s-4-5-8-5c-3 0-6 2-7 5-2 4-2.4 7-2.4 12 0 4 1.4 8 5.4 12 1-1 2-1 3-2m125 141c1 0 1-.4 1-1.3 0-2.2-1-4.8-4-7.7-3-3-8-4.9-14-5.7-1-.1-2-.1-2-.1-1-.2-1-.2-2-.2-1-.1-3-.3-4-.5 3-9.3 4-17.5 4-24.7 0-10-2-17-6-23s-8-9-13-10c-1 1-1 1-1 2 5 2 10 6 13 12 3 7 4 13 4 20 0 5.6-1 13.9-5 24.5-4 1.6-8 5.3-11 11.1 0 .9 0 1.4 1 1.4 0 0 1-.9 2-2.6 2-1.7 3-3.4 5-5.1 3-1.7 5-2.6 8-2.6 5 0 10 .7 13 2.1 4 1.3 6 2.7 7 4.3 1 1.5 2 2.9 3 4.2 0 1.3 1 1.9 1 1.9m-92-145c-1-1-1-3-1-5 0-4 0-6 2-9 2-2 4-3 6-3 3 0 5 2 7 4 1 3 2 5 2 8 0 5-2 8-6 9 0 0 1 1 2 1 2 0 3 1 5 2 1-6 2-10 2-15 0-6-1-10-3-13-3-3-6-4-10-4-3 0-6 1-9 3-2 3-3 5-3 8 0 5 1 9 3 13 1 0 2 1 3 1m12 16c-13 9-23 13-31 13-7 0-14-3-20-8 1 2 2 4 3 5l6 6c4 4 9 6 14 6 7 0 15-4 25-11l9-6c2-2 4-4 4-7 0-1 0-2-1-2-1-2-6-5-16-8-9-4-16-6-20-6-3 0-8 2-15 6-6 4-10 8-10 12 0 0 1 1 2 3 6 5 12 8 18 8 8 0 18-4 31-14v2c1 0 1 1 1 1m23 202c4 7.52 11 11.3 19 11.3 2 0 4-.3 6-.9 2-.4 4-1.1 5-1.9 1-.7 2-1.4 3-2.2 2-.7 2-1.2 3-1.7l17-14.7c4-3.19 8-5.98 13-8.4 4-2.4 8-4 10-4.9 3-.8 5-2 7-3.6 1-1.5 2-3.4 2-5.8 0-2.9-2-5.1-4-6.7s-4-2.7-6-3.4-4-2.3-7-5c-2-2.6-4-6.2-5-10.9l-1-5.8c-1-2.7-1-4.7-2-5.8 0-.3 0-.4-1-.4s-3 .9-4 2.6c-2 1.7-4 3.6-6 5.6-1 2-4 3.8-6 5.5-3 1.7-6 2.6-8 2.6-8 0-12-2.2-15-6.5-2-3.2-3-6.9-4-11.1-2-1.7-3-2.6-5-2.6-5 0-7 5.2-7 15.7v31.1c0 .9-1 2.9-1 6-1 3.1-1 6.62-1 10.6l-2 11.1v.17m-145-5.29c9.3 1.36 20 4.27 32.1 8.71 12.1 4.4 19.5 6.7 22.2 6.7 7 0 12.8-3.1 17.6-9.09 1-1.94 1-4.22 1-6.84 0-9.45-5.7-21.4-17.1-35.9l-6.8-9.1c-1.4-1.9-3.1-4.8-5.3-8.7-2.1-3.9-4-6.9-5.5-9-1.3-2.3-3.4-4.6-6.1-6.9-2.6-2.3-5.6-3.8-8.9-4.6-4.2.8-7.1 2.2-8.5 4.1s-2.2 4-2.4 6.2c-.3 2.1-.9 3.5-1.9 4.2-1 .6-2.7 1.1-5 1.6-.5 0-1.4 0-2.7.1h-2.7c-5.3 0-8.9.6-10.8 1.6-2.5 2.9-3.8 6.2-3.8 9.7 0 1.6.4 4.3 1.2 8.1.8 3.7 1.2 6.7 1.2 8.8 0 4.1-1.2 8.2-3.7 12.3-2.5 4.3-3.8 7.5-3.8 9.78 1 3.88 7.6 6.61 19.7 8.21m33.3-90.9c0-6.9 1.8-14.5 5.5-23.5 3.6-9 7.2-15 10.7-19-.2-1-.7-1-1.5-1l-1-1c-2.9 3-6.4 10-10.6 20-4.2 9-6.4 17.3-6.4 23.4 0 4.5 1.1 8.4 3.1 11.8 2.2 3.3 7.5 8.1 15.9 14.2l10.6 6.9c11.3 9.8 17.3 16.6 17.3 20.6 0 2.1-1 4.2-4 6.5-2 2.4-4.7 3.6-7 3.6-.2 0-.3.2-.3.7 0 .1 1 2.1 3.1 6 4.2 5.7 13.2 8.5 25.2 8.5 22 0 39-9 52-27 0-5 0-8.1-1-9.4v-3.7c0-6.5 1-11.4 3-14.6s4-4.7 7-4.7c2 0 4 .7 6 2.2 1-7.7 1-14.4 1-20.4 0-9.1 0-16.6-2-23.6-1-6-3-11-5-15l-6-9c-2-3-3-6-5-9-1-4-2-7-2-12-3-5-5-10-8-15-2-5-4-10-6-14l-9 7c-10 7-18 10-25 10-6 0-11-1-14-5l-6-5c0 3-1 7-3 11l-6.3 12c-2.8 7-4.3 11-4.6 14-.4 2-.7 4-.9 4l-7.5 15c-8.1 15-12.2 28.9-12.2 40.4 0 2.3.2 4.7.6 7.1-4.5-3.1-6.7-7.4-6.7-13m71.6 94.6c-13 0-23 1.76-30 5.25v-.3c-5 6-10.6 9.1-18.4 9.1-4.9 0-12.6-1.9-23-5.7-10.5-3.6-19.8-6.36-27.9-8.18-.8-.23-2.6-.57-5.5-1.03-2.8-.45-5.4-.91-7.7-1.37-2.1-.45-4.5-1.13-7.1-2.05-2.5-.79-4.5-1.82-6-3.07-1.38-1.26-2.06-2.68-2.06-4.27 0-1.6.34-3.31 1.02-5.13.64-1.1 1.34-2.2 2.04-3.2.7-1.1 1.3-2.1 1.7-3.1.6-.9 1-1.8 1.4-2.8.4-.9.8-1.8 1-2.9.2-1 .4-2 .4-3s-.4-4-1.2-9.3c-.8-5.2-1.2-8.5-1.2-9.9 0-4.4 1-7.9 3.2-10.4s4.3-3.8 6.5-3.8h11.5c.9 0 2.3-.5 4.4-1.7.7-1.6 1.3-2.9 1.7-4.1.5-1.2.7-2.1.9-2.5.2-.6.4-1.2.6-1.7.4-.7.9-1.5 1.6-2.3-.8-1-1.2-2.3-1.2-3.9 0-1.1 0-2.1.2-2.7 0-3.6 1.7-8.7 5.3-15.4l3.5-6.3c2.9-5.4 5.1-9.4 6.7-13.4 1.7-4 3.5-10 5.5-18 1.6-7 5.4-14 11.4-21l7.5-9c5.2-6 8.6-11 10.5-15s2.9-9 2.9-13c0-2-.5-8-1.6-18-1-10-1.5-20-1.5-29 0-7 .6-12 1.9-17s3.6-10 7-14c3-4 7-8 13-10s13-3 21-3c3 0 6 0 9 1 3 0 7 1 12 3 4 2 8 4 11 7 4 3 7 8 10 13 2 6 4 12 5 20 1 5 1 10 2 17 0 6 1 10 1 13 1 3 1 7 2 12 1 4 2 8 4 11 2 4 4 8 7 12 3 5 7 10 11 16 9 10 16 21 20 32 5 10 8 23 8 36.9 0 6.9-1 13.6-3 20.1 2 0 3 .8 4 2.2s2 4.4 3 9.1l1 7.4c1 2.2 2 4.3 5 6.1 2 1.8 4 3.3 7 4.5 2 1 5 2.4 7 4.2 2 2 3 4.1 3 6.3 0 3.4-1 5.9-3 7.7-2 2-4 3.4-7 4.3-2 1-6 3-12 5.82-5 2.96-10 6.55-15 10.8l-10 8.51c-4 3.9-8 6.7-11 8.4-3 1.8-7 2.7-11 2.7l-7-.8c-8-2.1-13-6.1-16-12.2-16-1.94-29-2.9-37-2.9" fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex flex-col text-left leading-tight">
|
||||
<span className="text-[9px] mt-0">Download for</span>
|
||||
<span className="text-sm font-semibold -mt-1.5">Linux</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
95
src/components/Logo.tsx
Normal file
95
src/components/Logo.tsx
Normal file
File diff suppressed because one or more lines are too long
51
src/components/NavLinks.tsx
Normal file
51
src/components/NavLinks.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
'use client'
|
||||
|
||||
import { useRef, useState } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
|
||||
export function NavLinks() {
|
||||
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
||||
let timeoutRef = useRef<number | null>(null)
|
||||
|
||||
return [
|
||||
['About', '/#about'],
|
||||
['Benefits', '/#benefits'],
|
||||
['Features', '/#features'],
|
||||
['Use Cases', '/#usecases'],
|
||||
['FAQs', '/#faqs'],
|
||||
].map(([label, href], index) => (
|
||||
<Link
|
||||
key={label}
|
||||
href={href}
|
||||
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
|
||||
onMouseEnter={() => {
|
||||
if (timeoutRef.current) {
|
||||
window.clearTimeout(timeoutRef.current)
|
||||
}
|
||||
setHoveredIndex(index)
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
timeoutRef.current = window.setTimeout(() => {
|
||||
setHoveredIndex(null)
|
||||
}, 200)
|
||||
}}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{hoveredIndex === index && (
|
||||
<motion.span
|
||||
className="absolute inset-0 rounded-lg bg-gray-100"
|
||||
layoutId="hoverBackground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { duration: 0.15 } }}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { duration: 0.15 },
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<span className="relative z-10">{label}</span>
|
||||
</Link>
|
||||
))
|
||||
}
|
||||
42
src/components/PhoneFrame.tsx
Normal file
42
src/components/PhoneFrame.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
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,
|
||||
priority = false,
|
||||
...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" />
|
||||
<Image
|
||||
src={frame}
|
||||
alt=""
|
||||
className="pointer-events-none absolute inset-0 h-full w-full"
|
||||
unoptimized
|
||||
priority={priority}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
288
src/components/Pricing.tsx
Normal file
288
src/components/Pricing.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Radio, RadioGroup } from '@headlessui/react'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Logomark } from '@/components/Logo'
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: 'Starter',
|
||||
featured: false,
|
||||
price: { Monthly: '$0', Annually: '$0' },
|
||||
description:
|
||||
'You’re new to investing but want to do it right. Get started for free.',
|
||||
button: {
|
||||
label: 'Get started for free',
|
||||
href: '/register',
|
||||
},
|
||||
features: [
|
||||
'Commission-free trading',
|
||||
'Multi-layered encryption',
|
||||
'One tip every day',
|
||||
'Invest up to $1,500 each month',
|
||||
],
|
||||
logomarkClassName: 'fill-gray-300',
|
||||
},
|
||||
{
|
||||
name: 'Investor',
|
||||
featured: false,
|
||||
price: { Monthly: '$7', Annually: '$70' },
|
||||
description:
|
||||
'You’ve been investing for a while. Invest more and grow your wealth faster.',
|
||||
button: {
|
||||
label: 'Subscribe',
|
||||
href: '/register',
|
||||
},
|
||||
features: [
|
||||
'Commission-free trading',
|
||||
'Multi-layered encryption',
|
||||
'One tip every hour',
|
||||
'Invest up to $15,000 each month',
|
||||
'Basic transaction anonymization',
|
||||
],
|
||||
logomarkClassName: 'fill-gray-500',
|
||||
},
|
||||
{
|
||||
name: 'VIP',
|
||||
featured: true,
|
||||
price: { Monthly: '$199', Annually: '$1,990' },
|
||||
description:
|
||||
'You’ve got a huge amount of assets but it’s not enough. To the moon.',
|
||||
button: {
|
||||
label: 'Subscribe',
|
||||
href: '/register',
|
||||
},
|
||||
features: [
|
||||
'Commission-free trading',
|
||||
'Multi-layered encryption',
|
||||
'Real-time tip notifications',
|
||||
'No investment limits',
|
||||
'Advanced transaction anonymization',
|
||||
'Automated tax-loss harvesting',
|
||||
],
|
||||
logomarkClassName: 'fill-cyan-500',
|
||||
},
|
||||
]
|
||||
|
||||
function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
|
||||
<path
|
||||
d="M9.307 12.248a.75.75 0 1 0-1.114 1.004l1.114-1.004ZM11 15.25l-.557.502a.75.75 0 0 0 1.15-.043L11 15.25Zm4.844-5.041a.75.75 0 0 0-1.188-.918l1.188.918Zm-7.651 3.043 2.25 2.5 1.114-1.004-2.25-2.5-1.114 1.004Zm3.4 2.457 4.25-5.5-1.187-.918-4.25 5.5 1.188.918Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="8.25"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function Plan({
|
||||
name,
|
||||
price,
|
||||
description,
|
||||
button,
|
||||
features,
|
||||
activePeriod,
|
||||
logomarkClassName,
|
||||
featured = false,
|
||||
}: {
|
||||
name: string
|
||||
price: {
|
||||
Monthly: string
|
||||
Annually: string
|
||||
}
|
||||
description: string
|
||||
button: {
|
||||
label: string
|
||||
href: string
|
||||
}
|
||||
features: Array<string>
|
||||
activePeriod: 'Monthly' | 'Annually'
|
||||
logomarkClassName?: string
|
||||
featured?: boolean
|
||||
}) {
|
||||
return (
|
||||
<section
|
||||
className={clsx(
|
||||
'flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg shadow-gray-900/5',
|
||||
featured ? 'order-first bg-gray-900 lg:order-none' : 'bg-white',
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
className={clsx(
|
||||
'flex items-center text-sm font-semibold',
|
||||
featured ? 'text-white' : 'text-gray-900',
|
||||
)}
|
||||
>
|
||||
<Logomark className={clsx('h-6 w-6 flex-none', logomarkClassName)} />
|
||||
<span className="ml-4">{name}</span>
|
||||
</h3>
|
||||
<p
|
||||
className={clsx(
|
||||
'relative mt-5 flex text-3xl tracking-tight',
|
||||
featured ? 'text-white' : 'text-gray-900',
|
||||
)}
|
||||
>
|
||||
{price.Monthly === price.Annually ? (
|
||||
price.Monthly
|
||||
) : (
|
||||
<>
|
||||
<span
|
||||
aria-hidden={activePeriod === 'Annually'}
|
||||
className={clsx(
|
||||
'transition duration-300',
|
||||
activePeriod === 'Annually' &&
|
||||
'pointer-events-none translate-x-6 opacity-0 select-none',
|
||||
)}
|
||||
>
|
||||
{price.Monthly}
|
||||
</span>
|
||||
<span
|
||||
aria-hidden={activePeriod === 'Monthly'}
|
||||
className={clsx(
|
||||
'absolute top-0 left-0 transition duration-300',
|
||||
activePeriod === 'Monthly' &&
|
||||
'pointer-events-none -translate-x-6 opacity-0 select-none',
|
||||
)}
|
||||
>
|
||||
{price.Annually}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
<p
|
||||
className={clsx(
|
||||
'mt-3 text-sm',
|
||||
featured ? 'text-gray-300' : 'text-gray-700',
|
||||
)}
|
||||
>
|
||||
{description}
|
||||
</p>
|
||||
<div className="order-last mt-6">
|
||||
<ul
|
||||
role="list"
|
||||
className={clsx(
|
||||
'-my-2 divide-y text-sm',
|
||||
featured
|
||||
? 'divide-gray-800 text-gray-300'
|
||||
: 'divide-gray-200 text-gray-700',
|
||||
)}
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<li key={feature} className="flex py-2">
|
||||
<CheckIcon
|
||||
className={clsx(
|
||||
'h-6 w-6 flex-none',
|
||||
featured ? 'text-white' : 'text-cyan-500',
|
||||
)}
|
||||
/>
|
||||
<span className="ml-4">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<Button
|
||||
href={button.href}
|
||||
color={featured ? 'cyan' : 'gray'}
|
||||
className="mt-6"
|
||||
aria-label={`Get started with the ${name} plan for ${price}`}
|
||||
>
|
||||
{button.label}
|
||||
</Button>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export function Pricing() {
|
||||
let [activePeriod, setActivePeriod] = useState<'Monthly' | 'Annually'>(
|
||||
'Monthly',
|
||||
)
|
||||
|
||||
return (
|
||||
<section
|
||||
id="pricing"
|
||||
aria-labelledby="pricing-title"
|
||||
className="border-t border-gray-200 bg-gray-100 py-20 sm:py-32"
|
||||
>
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h2
|
||||
id="pricing-title"
|
||||
className="text-3xl font-medium tracking-tight text-gray-900"
|
||||
>
|
||||
Flat pricing, no management fees.
|
||||
</h2>
|
||||
<p className="mt-2 text-lg text-gray-600">
|
||||
Whether you’re one person trying to get ahead or a big firm trying
|
||||
to take over the world, we’ve got a plan for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 flex justify-center">
|
||||
<div className="relative">
|
||||
<RadioGroup
|
||||
value={activePeriod}
|
||||
onChange={setActivePeriod}
|
||||
className="grid grid-cols-2"
|
||||
>
|
||||
{['Monthly', 'Annually'].map((period) => (
|
||||
<Radio
|
||||
key={period}
|
||||
value={period}
|
||||
className={clsx(
|
||||
'cursor-pointer border border-gray-300 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(2)-1px)] text-sm text-gray-700 transition-colors hover:border-gray-400 data-focus:outline-2 data-focus:outline-offset-2',
|
||||
period === 'Monthly'
|
||||
? 'rounded-l-lg'
|
||||
: '-ml-px rounded-r-lg',
|
||||
)}
|
||||
>
|
||||
{period}
|
||||
</Radio>
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={clsx(
|
||||
'pointer-events-none absolute inset-0 z-10 grid grid-cols-2 overflow-hidden rounded-lg bg-cyan-500 transition-all duration-300',
|
||||
activePeriod === 'Monthly'
|
||||
? '[clip-path:inset(0_50%_0_0)]'
|
||||
: '[clip-path:inset(0_0_0_calc(50%-1px))]',
|
||||
)}
|
||||
>
|
||||
{['Monthly', 'Annually'].map((period) => (
|
||||
<div
|
||||
key={period}
|
||||
className={clsx(
|
||||
'py-2 text-center text-sm font-semibold text-white',
|
||||
period === 'Annually' && '-ml-px',
|
||||
)}
|
||||
>
|
||||
{period}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 items-start gap-x-8 gap-y-10 sm:mt-20 lg:max-w-none lg:grid-cols-3">
|
||||
{plans.map((plan) => (
|
||||
<Plan key={plan.name} {...plan} activePeriod={activePeriod} />
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
595
src/components/PrimaryFeatures.tsx
Normal file
595
src/components/PrimaryFeatures.tsx
Normal file
@@ -0,0 +1,595 @@
|
||||
'use client'
|
||||
|
||||
import { Fragment, useEffect, useId, useRef, useState } from 'react'
|
||||
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
|
||||
import clsx from 'clsx'
|
||||
import {
|
||||
type MotionProps,
|
||||
type Variant,
|
||||
type Variants,
|
||||
AnimatePresence,
|
||||
motion,
|
||||
} from 'framer-motion'
|
||||
import { useDebouncedCallback } from 'use-debounce'
|
||||
|
||||
import { AppScreen } from '@/components/AppScreen'
|
||||
import { CircleBackground } from '@/components/CircleBackground'
|
||||
import { Container } from '@/components/Container'
|
||||
import { PhoneFrame } from '@/components/PhoneFrame'
|
||||
import {
|
||||
DiageoLogo,
|
||||
LaravelLogo,
|
||||
MirageLogo,
|
||||
ReversableLogo,
|
||||
StatamicLogo,
|
||||
StaticKitLogo,
|
||||
TransistorLogo,
|
||||
TupleLogo,
|
||||
} from '@/components/StockLogos'
|
||||
|
||||
const MotionAppScreenHeader = motion(AppScreen.Header)
|
||||
const MotionAppScreenBody = motion(AppScreen.Body)
|
||||
|
||||
interface CustomAnimationProps {
|
||||
isForwards: boolean
|
||||
changeCount: number
|
||||
}
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Decentralized Nodes',
|
||||
description:
|
||||
"Mycelium operates through a network of decentralized nodes, similar to how nature's mycelium forms a decentralized network of threads. Each node acts as a connection point in the overall digital ecosystem.",
|
||||
icon: DeviceUserIcon,
|
||||
screen: InviteScreen,
|
||||
},
|
||||
{
|
||||
name: 'Efficient Data Routing',
|
||||
description:
|
||||
'Mycelium optimizes data routing by choosing the most efficient path for communication. Data travels along the shortest path in terms of latency, ensuring that information reaches its destination swiftly.',
|
||||
icon: DeviceNotificationIcon,
|
||||
screen: StocksScreen,
|
||||
},
|
||||
{
|
||||
name: 'End-to-End Encryption',
|
||||
description:
|
||||
'Each node in the system is identified by a unique key pair. Data between nodes is encrypted using secret keys derived from these pairs. This ensures that data remains confidential, enhancing the privacy of the network.',
|
||||
icon: DeviceTouchIcon,
|
||||
screen: InvestScreen,
|
||||
},
|
||||
]
|
||||
|
||||
function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 23a3 3 0 100-6 3 3 0 000 6zm-1 2a4 4 0 00-4 4v1a2 2 0 002 2h6a2 2 0 002-2v-1a4 4 0 00-4-4h-2z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v24a4.002 4.002 0 01-3.01 3.877c-.535.136-.99-.325-.99-.877s.474-.98.959-1.244A2 2 0 0025 28V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 001.041 1.756C8.525 30.02 9 30.448 9 31s-.455 1.013-.99.877A4.002 4.002 0 015 28V4z"
|
||||
fill="#A3A3A3"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#A3A3A3"
|
||||
/>
|
||||
<path
|
||||
d="M9 8a2 2 0 012-2h10a2 2 0 012 2v2a2 2 0 01-2 2H11a2 2 0 01-2-2V8z"
|
||||
fill="#737373"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient`}
|
||||
x1={14}
|
||||
y1={14.5}
|
||||
x2={7}
|
||||
y2={17}
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#737373" />
|
||||
<stop offset={1} stopColor="#D4D4D4" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v13h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h4v2H9a4 4 0 01-4-4V4z"
|
||||
fill="#A3A3A3"
|
||||
/>
|
||||
<path
|
||||
d="M7 22c0-4.694 3.5-8 8-8"
|
||||
stroke={`url(#${id}-gradient)`}
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M21 20l.217-5.513a1.431 1.431 0 00-2.85-.226L17.5 21.5l-1.51-1.51a2.107 2.107 0 00-2.98 0 .024.024 0 00-.005.024l3.083 9.25A4 4 0 0019.883 32H25a4 4 0 004-4v-5a3 3 0 00-3-3h-5z"
|
||||
fill="#A3A3A3"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const headerAnimation: Variants = {
|
||||
initial: { opacity: 0, transition: { duration: 0.3 } },
|
||||
animate: { opacity: 1, transition: { duration: 0.3, delay: 0.3 } },
|
||||
exit: { opacity: 0, transition: { duration: 0.3 } },
|
||||
}
|
||||
|
||||
const maxZIndex = 2147483647
|
||||
|
||||
const bodyVariantBackwards: Variant = {
|
||||
opacity: 0.4,
|
||||
scale: 0.8,
|
||||
zIndex: 0,
|
||||
filter: 'blur(4px)',
|
||||
transition: { duration: 0.4 },
|
||||
}
|
||||
|
||||
const bodyVariantForwards: Variant = (custom: CustomAnimationProps) => ({
|
||||
y: '100%',
|
||||
zIndex: maxZIndex - custom.changeCount,
|
||||
transition: { duration: 0.4 },
|
||||
})
|
||||
|
||||
const bodyAnimation: MotionProps = {
|
||||
initial: 'initial',
|
||||
animate: 'animate',
|
||||
exit: 'exit',
|
||||
variants: {
|
||||
initial: (custom: CustomAnimationProps, ...props) =>
|
||||
custom.isForwards
|
||||
? bodyVariantForwards(custom, ...props)
|
||||
: bodyVariantBackwards,
|
||||
animate: (custom: CustomAnimationProps) => ({
|
||||
y: '0%',
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
zIndex: maxZIndex / 2 - custom.changeCount,
|
||||
filter: 'blur(0px)',
|
||||
transition: { duration: 0.4 },
|
||||
}),
|
||||
exit: (custom: CustomAnimationProps, ...props) =>
|
||||
custom.isForwards
|
||||
? bodyVariantBackwards
|
||||
: bodyVariantForwards(custom, ...props),
|
||||
},
|
||||
}
|
||||
|
||||
type ScreenProps =
|
||||
| {
|
||||
animated: true
|
||||
custom: CustomAnimationProps
|
||||
}
|
||||
| { animated?: false }
|
||||
|
||||
function InviteScreen(props: ScreenProps) {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
|
||||
<AppScreen.Title>Invite people</AppScreen.Title>
|
||||
<AppScreen.Subtitle>
|
||||
Get tips <span className="text-white">5s sooner</span> for every
|
||||
invite.
|
||||
</AppScreen.Subtitle>
|
||||
</MotionAppScreenHeader>
|
||||
<MotionAppScreenBody
|
||||
{...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
|
||||
>
|
||||
<div className="px-4 py-6">
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ label: 'Full name', value: 'Albert H. Wiggin' },
|
||||
{ label: 'Email address', value: 'awiggin@chase.com' },
|
||||
].map((field) => (
|
||||
<div key={field.label}>
|
||||
<div className="text-sm text-gray-500">{field.label}</div>
|
||||
<div className="mt-2 border-b border-gray-200 pb-2 text-sm text-gray-900">
|
||||
{field.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
|
||||
Invite person
|
||||
</div>
|
||||
</div>
|
||||
</MotionAppScreenBody>
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
|
||||
function StocksScreen(props: ScreenProps) {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
|
||||
<AppScreen.Title>Stocks</AppScreen.Title>
|
||||
<AppScreen.Subtitle>March 9, 2022</AppScreen.Subtitle>
|
||||
</MotionAppScreenHeader>
|
||||
<MotionAppScreenBody
|
||||
{...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
|
||||
>
|
||||
<div className="divide-y divide-gray-100">
|
||||
{[
|
||||
{
|
||||
name: 'Laravel',
|
||||
price: '4,098.01',
|
||||
change: '+4.98%',
|
||||
color: '#F9322C',
|
||||
logo: LaravelLogo,
|
||||
},
|
||||
{
|
||||
name: 'Tuple',
|
||||
price: '5,451.10',
|
||||
change: '-3.38%',
|
||||
color: '#5A67D8',
|
||||
logo: TupleLogo,
|
||||
},
|
||||
{
|
||||
name: 'Transistor',
|
||||
price: '4,098.41',
|
||||
change: '+6.25%',
|
||||
color: '#2A5B94',
|
||||
logo: TransistorLogo,
|
||||
},
|
||||
{
|
||||
name: 'Diageo',
|
||||
price: '250.65',
|
||||
change: '+1.25%',
|
||||
color: '#3320A7',
|
||||
logo: DiageoLogo,
|
||||
},
|
||||
{
|
||||
name: 'StaticKit',
|
||||
price: '250.65',
|
||||
change: '-3.38%',
|
||||
color: '#2A3034',
|
||||
logo: StaticKitLogo,
|
||||
},
|
||||
{
|
||||
name: 'Statamic',
|
||||
price: '5,040.85',
|
||||
change: '-3.11%',
|
||||
color: '#0EA5E9',
|
||||
logo: StatamicLogo,
|
||||
},
|
||||
{
|
||||
name: 'Mirage',
|
||||
price: '140.44',
|
||||
change: '+9.09%',
|
||||
color: '#16A34A',
|
||||
logo: MirageLogo,
|
||||
},
|
||||
{
|
||||
name: 'Reversable',
|
||||
price: '550.60',
|
||||
change: '-1.25%',
|
||||
color: '#8D8D8D',
|
||||
logo: ReversableLogo,
|
||||
},
|
||||
].map((stock) => (
|
||||
<div key={stock.name} className="flex items-center gap-4 px-4 py-3">
|
||||
<div
|
||||
className="flex-none rounded-full"
|
||||
style={{ backgroundColor: stock.color }}
|
||||
>
|
||||
<stock.logo className="h-10 w-10" />
|
||||
</div>
|
||||
<div className="flex-auto text-sm text-gray-900">
|
||||
{stock.name}
|
||||
</div>
|
||||
<div className="flex-none text-right">
|
||||
<div className="text-sm font-medium text-gray-900">
|
||||
{stock.price}
|
||||
</div>
|
||||
<div
|
||||
className={clsx(
|
||||
'text-xs/5',
|
||||
stock.change.startsWith('+')
|
||||
? 'text-cyan-500'
|
||||
: 'text-gray-500',
|
||||
)}
|
||||
>
|
||||
{stock.change}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</MotionAppScreenBody>
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
|
||||
function InvestScreen(props: ScreenProps) {
|
||||
return (
|
||||
<AppScreen className="w-full">
|
||||
<MotionAppScreenHeader {...(props.animated ? headerAnimation : {})}>
|
||||
<AppScreen.Title>Buy $LA</AppScreen.Title>
|
||||
<AppScreen.Subtitle>
|
||||
<span className="text-white">$34.28</span> per share
|
||||
</AppScreen.Subtitle>
|
||||
</MotionAppScreenHeader>
|
||||
<MotionAppScreenBody
|
||||
{...(props.animated ? { ...bodyAnimation, custom: props.custom } : {})}
|
||||
>
|
||||
<div className="px-4 py-6">
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ label: 'Number of shares', value: '100' },
|
||||
{
|
||||
label: 'Current market price',
|
||||
value: (
|
||||
<div className="flex">
|
||||
$34.28
|
||||
<svg viewBox="0 0 24 24" fill="none" className="h-6 w-6">
|
||||
<path
|
||||
d="M17 15V7H9M17 7 7 17"
|
||||
stroke="#06B6D4"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ label: 'Estimated cost', value: '$3,428.00' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.label}
|
||||
className="flex justify-between border-b border-gray-100 pb-4"
|
||||
>
|
||||
<div className="text-sm text-gray-500">{item.label}</div>
|
||||
<div className="text-sm font-semibold text-gray-900">
|
||||
{item.value}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="rounded-lg bg-cyan-500 px-3 py-2 text-center text-sm font-semibold text-white">
|
||||
Buy shares
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MotionAppScreenBody>
|
||||
</AppScreen>
|
||||
)
|
||||
}
|
||||
|
||||
function usePrevious<T>(value: T) {
|
||||
let ref = useRef<T>()
|
||||
|
||||
useEffect(() => {
|
||||
ref.current = value
|
||||
}, [value])
|
||||
|
||||
return ref.current
|
||||
}
|
||||
|
||||
function FeaturesDesktop() {
|
||||
let [changeCount, setChangeCount] = useState(0)
|
||||
let [selectedIndex, setSelectedIndex] = useState(0)
|
||||
let prevIndex = usePrevious(selectedIndex)
|
||||
let isForwards = prevIndex === undefined ? true : selectedIndex > prevIndex
|
||||
|
||||
let onChange = useDebouncedCallback(
|
||||
(selectedIndex) => {
|
||||
setSelectedIndex(selectedIndex)
|
||||
setChangeCount((changeCount) => changeCount + 1)
|
||||
},
|
||||
100,
|
||||
{ leading: true },
|
||||
)
|
||||
|
||||
return (
|
||||
<TabGroup
|
||||
className="grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24"
|
||||
selectedIndex={selectedIndex}
|
||||
onChange={onChange}
|
||||
vertical
|
||||
>
|
||||
<TabList className="relative z-10 order-last col-span-6 space-y-6">
|
||||
{features.map((feature, featureIndex) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className="relative rounded-2xl transition-colors hover:bg-gray-800/30"
|
||||
>
|
||||
{featureIndex === selectedIndex && (
|
||||
<motion.div
|
||||
layoutId="activeBackground"
|
||||
className="absolute inset-0 bg-gray-800"
|
||||
initial={{ borderRadius: 16 }}
|
||||
/>
|
||||
)}
|
||||
<div className="relative z-10 p-8">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 text-lg font-semibold text-white">
|
||||
<Tab className="text-left data-selected:not-data-focus:outline-hidden">
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
{feature.name}
|
||||
</Tab>
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-gray-400">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</TabList>
|
||||
<div className="relative col-span-6">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<CircleBackground color="#13B5C8" className="animate-spin-slower" />
|
||||
</div>
|
||||
<PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
|
||||
<TabPanels as={Fragment}>
|
||||
<AnimatePresence
|
||||
initial={false}
|
||||
custom={{ isForwards, changeCount }}
|
||||
>
|
||||
{features.map((feature, featureIndex) =>
|
||||
selectedIndex === featureIndex ? (
|
||||
<TabPanel
|
||||
static
|
||||
key={feature.name + changeCount}
|
||||
className="col-start-1 row-start-1 flex focus:outline-offset-32 data-selected:not-data-focus:outline-hidden"
|
||||
>
|
||||
<feature.screen
|
||||
animated
|
||||
custom={{ isForwards, changeCount }}
|
||||
/>
|
||||
</TabPanel>
|
||||
) : null,
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</TabPanels>
|
||||
</PhoneFrame>
|
||||
</div>
|
||||
</TabGroup>
|
||||
)
|
||||
}
|
||||
|
||||
function FeaturesMobile() {
|
||||
let [activeIndex, setActiveIndex] = useState(0)
|
||||
let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
|
||||
let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
|
||||
|
||||
useEffect(() => {
|
||||
let observer = new window.IntersectionObserver(
|
||||
(entries) => {
|
||||
for (let entry of entries) {
|
||||
if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
|
||||
setActiveIndex(slideRefs.current.indexOf(entry.target))
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
root: slideContainerRef.current,
|
||||
threshold: 0.6,
|
||||
},
|
||||
)
|
||||
|
||||
for (let slide of slideRefs.current) {
|
||||
if (slide) {
|
||||
observer.observe(slide)
|
||||
}
|
||||
}
|
||||
|
||||
return () => {
|
||||
observer.disconnect()
|
||||
}
|
||||
}, [slideContainerRef, slideRefs])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={slideContainerRef}
|
||||
className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
|
||||
>
|
||||
{features.map((feature, featureIndex) => (
|
||||
<div
|
||||
key={featureIndex}
|
||||
ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
|
||||
className="w-full flex-none snap-center px-4 sm:px-6"
|
||||
>
|
||||
<div className="relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6">
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<CircleBackground
|
||||
color="#13B5C8"
|
||||
className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
|
||||
/>
|
||||
</div>
|
||||
<PhoneFrame className="relative mx-auto w-full max-w-[366px]">
|
||||
<feature.screen />
|
||||
</PhoneFrame>
|
||||
<div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
|
||||
{feature.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-sm text-gray-400">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-6 flex justify-center gap-3">
|
||||
{features.map((_, featureIndex) => (
|
||||
<button
|
||||
type="button"
|
||||
key={featureIndex}
|
||||
className={clsx(
|
||||
'relative h-0.5 w-4 rounded-full',
|
||||
featureIndex === activeIndex ? 'bg-gray-300' : 'bg-gray-500',
|
||||
)}
|
||||
aria-label={`Go to slide ${featureIndex + 1}`}
|
||||
onClick={() => {
|
||||
slideRefs.current[featureIndex].scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
})
|
||||
}}
|
||||
>
|
||||
<span className="absolute -inset-x-1.5 -inset-y-3" />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export function PrimaryFeatures() {
|
||||
return (
|
||||
<section
|
||||
id="features"
|
||||
aria-label="Features for investing all your money"
|
||||
className="bg-gray-900 py-20 sm:py-32"
|
||||
>
|
||||
<Container>
|
||||
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-white">
|
||||
How Mycelium Operates
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
<div className="mt-16 md:hidden">
|
||||
<FeaturesMobile />
|
||||
</div>
|
||||
<Container className="hidden md:mt-20 md:block">
|
||||
<FeaturesDesktop />
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
225
src/components/SecondaryFeatures.tsx
Normal file
225
src/components/SecondaryFeatures.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { useId } from 'react'
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Quantum Safe Storage Functionality',
|
||||
description:
|
||||
"Mycelium's quantum safe storage enables flexible, scalable, and efficient data distribution across a decentralized network, ensuring redundancy and security.",
|
||||
icon: DeviceArrowIcon,
|
||||
},
|
||||
{
|
||||
name: 'Entry and Exit Points for AI Workloads',
|
||||
description:
|
||||
'Seamlessly connect AI applications to Mycelium, providing optimized and secured data pipelines for training, inference, and real-time processing.',
|
||||
icon: DeviceCardsIcon,
|
||||
},
|
||||
{
|
||||
name: 'Data Storage and Retrieval Mechanisms',
|
||||
description:
|
||||
'Users can choose between storing data locally for quick access or utilizing the distributed grid for enhanced scalability and resilience.',
|
||||
icon: DeviceClockIcon,
|
||||
},
|
||||
{
|
||||
name: 'Integrated Name Services (DNS)',
|
||||
description:
|
||||
'The Integrated DNS system efficiently finds the shortest path between users and websites, automatically balancing loads and identifying alternative routes in case of internet issues.',
|
||||
icon: DeviceListIcon,
|
||||
},
|
||||
{
|
||||
name: 'Frontend/Backend Integration',
|
||||
description:
|
||||
'Mycelium provides seamless integration with existing applications, enabling developers to leverage decentralized storage across both frontend and backend architectures.',
|
||||
icon: DeviceLockIcon,
|
||||
},
|
||||
{
|
||||
name: 'CDN (Content Delivery Network)',
|
||||
description:
|
||||
'Mycelium accelerates data distribution by acting as a decentralized CDN, ensuring fast, secure, and efficient content delivery across global nodes with minimal latency.',
|
||||
icon: DeviceChartIcon,
|
||||
},
|
||||
]
|
||||
|
||||
function DeviceArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
d="M12 25l8-8m0 0h-6m6 0v6"
|
||||
stroke="#171717"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceCardsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
let id = useId()
|
||||
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 13a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm0 6a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H10a1 1 0 01-1-1v-2zm1 5a1 1 0 00-1 1v2a1 1 0 001 1h12a1 1 0 001-1v-2a1 1 0 00-1-1H10z"
|
||||
fill={`url(#${id}-gradient)`}
|
||||
/>
|
||||
<rect x={9} y={6} width={14} height={4} rx={1} fill="#171717" />
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient`}
|
||||
x1={16}
|
||||
y1={12}
|
||||
x2={16}
|
||||
y2={28}
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#737373" />
|
||||
<stop offset={1} stopColor="#737373" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceClockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M24 32a8 8 0 100-16 8 8 0 000 16zm1-8.414V19h-2v5.414l4 4L28.414 27 25 23.586z"
|
||||
fill="#171717"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceListIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<circle cx={11} cy={14} r={2} fill="#171717" />
|
||||
<circle cx={11} cy={20} r={2} fill="#171717" />
|
||||
<circle cx={11} cy={26} r={2} fill="#171717" />
|
||||
<path
|
||||
d="M16 14h6M16 20h6M16 26h6"
|
||||
stroke="#737373"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="square"
|
||||
/>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceLockIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true" {...props}>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M5 4a4 4 0 014-4h14a4 4 0 014 4v10h-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9a2 2 0 00-2 2v24a2 2 0 002 2h5v2H9a4 4 0 01-4-4V4z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18 19.5a3.5 3.5 0 117 0V22a2 2 0 012 2v6a2 2 0 01-2 2h-7a2 2 0 01-2-2v-6a2 2 0 012-2v-2.5zm2 2.5h3v-2.5a1.5 1.5 0 00-3 0V22z"
|
||||
fill="#171717"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 32 32" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M9 0a4 4 0 00-4 4v24a4 4 0 004 4h14a4 4 0 004-4V4a4 4 0 00-4-4H9zm0 2a2 2 0 00-2 2v24a2 2 0 002 2h14a2 2 0 002-2V4a2 2 0 00-2-2h-1.382a1 1 0 00-.894.553l-.448.894a1 1 0 01-.894.553h-6.764a1 1 0 01-.894-.553l-.448-.894A1 1 0 0010.382 2H9z"
|
||||
fill="#737373"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M23 13.838V26a2 2 0 01-2 2H11a2 2 0 01-2-2V15.65l2.57 3.212a1 1 0 001.38.175L15.4 17.2a1 1 0 011.494.353l1.841 3.681c.399.797 1.562.714 1.843-.13L23 13.837z"
|
||||
fill="#171717"
|
||||
/>
|
||||
<path
|
||||
d="M10 12h12"
|
||||
stroke="#737373"
|
||||
strokeWidth={2}
|
||||
strokeLinecap="square"
|
||||
/>
|
||||
<circle cx={16} cy={16} r={16} fill="#A3A3A3" fillOpacity={0.2} />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function SecondaryFeatures() {
|
||||
return (
|
||||
<section
|
||||
id="secondary-features"
|
||||
aria-label="Features for building a portfolio"
|
||||
className="py-20 sm:py-32"
|
||||
>
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl sm:text-center">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-gray-900">
|
||||
Coming Soon: The Future of Mycelium
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
|
||||
</p>
|
||||
</div>
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3"
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 p-8"
|
||||
>
|
||||
<feature.icon className="h-8 w-8" />
|
||||
<h3 className="mt-6 font-semibold text-gray-900">
|
||||
{feature.name}
|
||||
</h3>
|
||||
<p className="mt-2 text-gray-700">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
100
src/components/StockLogos.tsx
Normal file
100
src/components/StockLogos.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
export function LaravelLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M29.982 14.509c.002.005.006.01.007.015a.316.316 0 0 1 .011.082v4.293a.304.304 0 0 1-.043.156.32.32 0 0 1-.119.115l-3.709 2.075v4.112a.305.305 0 0 1-.043.157.32.32 0 0 1-.119.114l-7.742 4.33a.286.286 0 0 1-.056.023l-.022.008a.33.33 0 0 1-.18-.005l-.01-.005c-.018-.006-.036-.011-.053-.021l-7.742-4.33a.32.32 0 0 1-.119-.115.304.304 0 0 1-.043-.156v-12.88a.33.33 0 0 1 .01-.08c.004-.01.01-.018.012-.027l.01-.027a.158.158 0 0 1 .011-.022c.006-.01.015-.018.023-.028.009-.012.017-.025.028-.036.01-.01.02-.016.031-.024.012-.009.023-.019.036-.026l3.871-2.165a.33.33 0 0 1 .322 0l3.872 2.165c.013.007.024.017.036.026l.01.008c.008.005.015.01.021.016a.175.175 0 0 1 .021.025l.008.011.022.028c.008.015.014.032.02.049l.006.01.006.016a.307.307 0 0 1 .01.082v8.044l3.227-1.804v-4.112c0-.028.004-.055.011-.082.003-.01.008-.017.011-.026l.004-.01a.228.228 0 0 1 .017-.039.132.132 0 0 1 .013-.018.203.203 0 0 0 .01-.01c.009-.012.017-.025.028-.036l.015-.013.016-.01.019-.016a.126.126 0 0 1 .017-.011l3.871-2.165a.33.33 0 0 1 .322 0l3.871 2.165c.014.007.024.018.036.026l.012.008.02.016a.162.162 0 0 1 .02.026l.009.01.008.01c.005.006.01.012.013.018a.254.254 0 0 1 .018.04l.003.009.005.01Zm-15.138 8.717 3.22 1.77 7.094-3.933-3.223-1.803-7.091 3.966Zm10.64-2.704v-3.57l-3.226-1.804v3.57l3.225 1.804Zm3.547-5.916-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-14.515.218v7.863l3.226-1.805V13.02l-3.226 1.804Zm2.902-2.346-3.225-1.803-3.224 1.803 3.224 1.803 3.225-1.803Zm-3.547 2.347-3.226-1.805v12.155l7.098 3.97V25.54l-3.708-2.038h-.001l-.002-.002c-.013-.008-.024-.018-.035-.027a.28.28 0 0 0-.011-.007.133.133 0 0 1-.02-.015v-.001l-.019-.022a.452.452 0 0 0-.008-.011l-.016-.02a.086.086 0 0 1-.008-.01v-.002a.123.123 0 0 1-.013-.027l-.005-.012-.008-.016a.115.115 0 0 1-.007-.02.18.18 0 0 1-.005-.033l-.002-.013a.293.293 0 0 0-.002-.013l-.002-.022v-8.405Zm4.516 10.715v3.605l7.096-3.969v-3.572l-7.096 3.935Zm7.742-5.019 3.226-1.804v-3.57l-3.226 1.805v3.57Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function TupleLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M22.5 8 12 11.692v12l3.5 1.231v3.385L26 32V12.615l-3.5 1.231V8Zm-5.833 17.334 5.833 2.05v-12.24l2.333-.82v15.968l-8.166-2.87v-2.088Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function TransistorLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path d="M20 32c-6.617 0-12-5.383-12-12S13.383 8 20 8s12 5.383 12 12-5.383 12-12 12Zm0-22.4C14.267 9.6 9.6 14.266 9.6 20S14.267 30.4 20 30.4c5.734 0 10.4-4.666 10.4-10.4S25.734 9.6 20 9.6Z" />
|
||||
<path d="M19.434 27.749c.15.15.354.234.566.235.433 0 .8-.368.8-.8V12.815a.8.8 0 0 0-1.6 0v14.368c0 .212.084.415.234.565ZM12.833 20.8h3.833a.802.802 0 0 0 .802-.8.8.8 0 0 0-.801-.8h-3.834c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8ZM23.333 20.8h3.85c.433 0 .783-.35.783-.8a.799.799 0 0 0-.8-.8h-3.833c-.45 0-.8.35-.8.8a.8.8 0 0 0 .8.8Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function DiageoLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 40 40"
|
||||
fill="#fff"
|
||||
stroke="#fff"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
{...props}
|
||||
>
|
||||
<path d="M22.16 19 26 13H14l3.84 6" fill="none" />
|
||||
<path d="M25 24a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function StaticKitLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path d="m26.068 10.555-11.49 13.089L12 21.089 23.489 8l2.58 2.555ZM28 18.91 16.512 32l-2.579-2.555 11.489-13.089L28 18.911Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function StatamicLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M30.177 27.293c0 1.921-.644 2.707-2.398 2.707H12.22c-1.754 0-2.397-.786-2.397-2.707v-3.741c0-1.805-.837-2.824-1.642-3.291a.385.385 0 0 1-.133-.143.403.403 0 0 1 .133-.526c.837-.551 1.642-1.704 1.642-3.241v-3.677c0-2.072.547-2.674 2.3-2.674h15.754c1.754 0 2.3.602 2.3 2.674v3.675c0 1.537.805 2.69 1.641 3.24.243.168.243.52 0 .67-.804.484-1.64 1.503-1.64 3.29v3.743h-.001Zm-14.739-2.455c1.271 1.152 2.64 1.737 4.522 1.737 2.96 0 4.891-1.537 4.891-4.026 0-2.637-2.3-3.31-4.17-3.856-1.282-.375-2.363-.691-2.363-1.54 0-.551.564-1.086 1.513-1.086.917 0 1.674.2 2.397.584.242.117.467.2.676.2.306 0 .547-.15.756-.45l.29-.451a.955.955 0 0 0 .161-.55c0-.336-.161-.67-.402-.837-.966-.635-2.27-1.17-4.039-1.17-2.51 0-4.44 1.37-4.44 3.826 0 2.746 2.349 3.443 4.23 4h.001c1.255.372 2.3.681 2.3 1.497 0 .785-.707 1.17-1.592 1.17a5.19 5.19 0 0 1-2.992-.92c-.274-.183-.532-.3-.805-.3-.242 0-.451.117-.644.368l-.387.517a.888.888 0 0 0-.192.585c0 .25.08.501.29.702Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function MirageLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 40 40" fill="#fff" aria-hidden="true" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M24.05 9c2.307 0 4.177 1.885 4.177 4.21a4.21 4.21 0 0 1-2.762 3.964l3.366 6.057h2.304c.355 0 .642.29.642.647a.645.645 0 0 1-.642.647H7.142a.645.645 0 0 1-.642-.647c0-.358.288-.647.643-.647h2.304l5.994-10.747a.641.641 0 0 1 1.097-.036l3.444 5.32 1.071-1.627a4.214 4.214 0 0 1-1.178-2.93c0-2.326 1.87-4.211 4.176-4.211Zm-3.304 9.948 2.772 4.283h3.84l-4.317-7.769-2.295 3.486Zm1.239 4.283-5.944-9.183-5.121 9.183h11.065Zm5.038-10.02a2.995 2.995 0 0 1-2.159 2.883l-1.216-2.19a.64.64 0 0 0-1.096-.04l-.811 1.232a3 3 0 0 1-.663-1.885c0-1.655 1.332-2.997 2.973-2.997 1.641 0 2.972 1.341 2.972 2.997Z"
|
||||
/>
|
||||
<path d="M12.069 26.469c-.354 0-.641.289-.641.646 0 .358.287.646.64.646h14.139c.354 0 .641-.29.641-.646a.644.644 0 0 0-.64-.646h-14.14Zm4.928 3.236a.645.645 0 0 0-.642.648c0 .357.288.647.642.647h4.282c.355 0 .643-.29.643-.647a.645.645 0 0 0-.643-.648h-4.282Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function ReversableLogo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
stroke="#fff"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="square"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
{...props}
|
||||
>
|
||||
<path d="M15 26v-5.25m0 0V16a2 2 0 0 1 2-2h4.21c.968 0 1.37 1.24.587 1.809L15 20.75Zm0 0L25 26" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
374
src/components/UseCases.tsx
Normal file
374
src/components/UseCases.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import clsx from 'clsx'
|
||||
import { useInView } from 'framer-motion'
|
||||
import {
|
||||
ArchiveBoxIcon,
|
||||
ChatBubbleBottomCenterIcon,
|
||||
CloudIcon,
|
||||
CodeBracketIcon,
|
||||
ComputerDesktopIcon,
|
||||
CpuChipIcon,
|
||||
DocumentIcon,
|
||||
EnvelopeIcon,
|
||||
GlobeAltIcon,
|
||||
GlobeAmericasIcon,
|
||||
PlayCircleIcon,
|
||||
ShareIcon,
|
||||
EyeSlashIcon,
|
||||
UserGroupIcon,
|
||||
VideoCameraIcon,
|
||||
} from '@heroicons/react/24/solid'
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
|
||||
interface Review {
|
||||
title: string
|
||||
body: string
|
||||
author: string
|
||||
rating: 1 | 2 | 3 | 4 | 5
|
||||
}
|
||||
|
||||
const reviews: Array<Review> = [
|
||||
{
|
||||
title: 'Secure remote work collaboration.',
|
||||
body: 'Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.',
|
||||
author: 'CrazyInvestor',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Private file sharing between trusted nodes.',
|
||||
body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
|
||||
author: 'CluelessButRich',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Encrypted voice/video calls.',
|
||||
body: 'Mycelium enables secure voice and video calls between users, ensuring that conversations remain private and protected from eavesdropping.',
|
||||
author: 'LivingDaDream',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Self-hosted messaging systems.',
|
||||
body: 'Mycelium allows users to create their own self-hosted messaging systems, ensuring complete control over their communications.',
|
||||
author: 'JordanBelfort1962',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Secure document collaboration.',
|
||||
body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
|
||||
author: 'MrBurns',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Private cloud computing resources.',
|
||||
body: 'Mycelium provides private cloud computing resources, allowing users to run their applications in a secure and isolated environment.',
|
||||
author: 'LazyRich99',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Secure IoT device networks.',
|
||||
body: 'Mycelium provides secure IoT device networks, ensuring that all connected devices can communicate privately and securely.',
|
||||
author: 'SarahLuvzCash',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Remote system administration.',
|
||||
body: 'Mycelium enables secure remote system administration, allowing users to manage their systems from anywhere without compromising security.',
|
||||
author: 'ScroogeMcduck',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Virtual private networks (VPNs).',
|
||||
body: 'Mycelium enables the creation of virtual private networks (VPNs), allowing users to securely connect to remote networks and access resources without compromising their privacy.',
|
||||
author: 'BruceWayne',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Secure backup systems.',
|
||||
body: 'Mycelium provides secure backup systems, ensuring that users can easily and safely back up their important data without the risk of unauthorized access.',
|
||||
author: 'RichieRich',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Self-hosted web services.',
|
||||
body: 'Mycelium allows users to create their own self-hosted web services, ensuring complete control over their data and applications.',
|
||||
author: 'TheCountOfMonteChristo',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Private file sharing between trusted nodes.',
|
||||
body: 'Mycelium enables private file sharing between trusted nodes, ensuring that sensitive information remains confidential and secure.',
|
||||
author: 'ClarkKent',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Private DNS systems.',
|
||||
body: 'Mycelium enables the creation of private DNS systems, allowing users to maintain control over their domain name resolution and protect their privacy.',
|
||||
author: 'GeorgeCostanza',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Personal email servers.',
|
||||
body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Secure document collaboration.',
|
||||
body: 'Mycelium enables secure document collaboration between users, ensuring that sensitive information remains confidential and protected.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Private media streaming.',
|
||||
body: 'Mycelium enables private media streaming between users, ensuring that sensitive content remains confidential and protected.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Personal cloud storage.',
|
||||
body: 'Mycelium allows users to create their own personal cloud storage solutions, ensuring complete control over their data and privacy.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Personal email servers.',
|
||||
body: 'Mycelium allows users to create their own personal email servers, ensuring complete control over their communications and data.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Protected content distribution.',
|
||||
body: 'Mycelium enables protected content distribution, allowing users to securely share and distribute sensitive information without compromising its confidentiality.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'Secure game servers.',
|
||||
body: 'Mycelium enables the creation of secure game servers, allowing users to host and manage their own gaming environments with complete control over their data and privacy.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
}, {
|
||||
title: 'Private git repositories.',
|
||||
body: 'Mycelium enables the creation of private git repositories, allowing users to host and manage their own version control systems with complete control over their data and privacy.',
|
||||
author: 'JeffBezos',
|
||||
rating: 5,
|
||||
},
|
||||
]
|
||||
|
||||
function StarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function StarRating({ rating }: { rating: Review['rating'] }) {
|
||||
return (
|
||||
<div className="flex">
|
||||
{[...Array(5).keys()].map((index) => (
|
||||
<StarIcon
|
||||
key={index}
|
||||
className={clsx(
|
||||
'h-5 w-5',
|
||||
rating > index ? 'fill-cyan-500' : 'fill-gray-300',
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getReviewIcon(title: string) {
|
||||
if (title.toLowerCase().includes('collaboration')) return UserGroupIcon;
|
||||
if (title.toLowerCase().includes('file sharing')) return ShareIcon;
|
||||
if (title.toLowerCase().includes('voice') || title.toLowerCase().includes('video')) return VideoCameraIcon;
|
||||
if (title.toLowerCase().includes('messaging')) return ChatBubbleBottomCenterIcon;
|
||||
if (title.toLowerCase().includes('document')) return DocumentIcon;
|
||||
if (title.toLowerCase().includes('cloud')) return CloudIcon;
|
||||
if (title.toLowerCase().includes('iot')) return CpuChipIcon;
|
||||
if (title.toLowerCase().includes('administration')) return ComputerDesktopIcon;
|
||||
if (title.toLowerCase().includes('vpn')) return GlobeAmericasIcon;
|
||||
if (title.toLowerCase().includes('backup')) return ArchiveBoxIcon;
|
||||
if (title.toLowerCase().includes('web services')) return GlobeAltIcon;
|
||||
if (title.toLowerCase().includes('dns')) return GlobeAmericasIcon;
|
||||
if (title.toLowerCase().includes('email')) return EnvelopeIcon;
|
||||
if (title.toLowerCase().includes('media streaming') || title.toLowerCase().includes('streaming')) return PlayCircleIcon;
|
||||
if (title.toLowerCase().includes('storage')) return CloudIcon;
|
||||
if (title.toLowerCase().includes('distribution')) return EyeSlashIcon;
|
||||
if (title.toLowerCase().includes('game')) return ComputerDesktopIcon;
|
||||
if (title.toLowerCase().includes('git')) return CodeBracketIcon;
|
||||
return ComputerDesktopIcon; // default
|
||||
}
|
||||
|
||||
function Review({
|
||||
title,
|
||||
body,
|
||||
author,
|
||||
rating,
|
||||
className,
|
||||
...props
|
||||
}: Omit<React.ComponentPropsWithoutRef<'figure'>, keyof Review> & Review) {
|
||||
let animationDelay = useMemo(() => {
|
||||
let possibleAnimationDelays = ['0s', '0.1s', '0.2s', '0.3s', '0.4s', '0.5s']
|
||||
return possibleAnimationDelays[
|
||||
Math.floor(Math.random() * possibleAnimationDelays.length)
|
||||
]
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<figure
|
||||
className={clsx(
|
||||
'animate-fade-in rounded-3xl bg-white p-6 opacity-0 shadow-md shadow-gray-900/5',
|
||||
className,
|
||||
)}
|
||||
style={{ animationDelay }}
|
||||
{...props}
|
||||
>
|
||||
<blockquote className="text-gray-900">
|
||||
{React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-gray-700 mb-2" })}
|
||||
<p className="mt-4 text-lg/6 font-semibold">
|
||||
{title}
|
||||
</p>
|
||||
<p className="mt-3 text-sm text-gray-600">{body}</p>
|
||||
</blockquote>
|
||||
|
||||
</figure>
|
||||
)
|
||||
}
|
||||
|
||||
function splitArray<T>(array: Array<T>, numParts: number) {
|
||||
let result: Array<Array<T>> = []
|
||||
for (let i = 0; i < array.length; i++) {
|
||||
let index = i % numParts
|
||||
if (!result[index]) {
|
||||
result[index] = []
|
||||
}
|
||||
result[index].push(array[i])
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
function ReviewColumn({
|
||||
reviews,
|
||||
className,
|
||||
reviewClassName,
|
||||
msPerPixel = 0,
|
||||
}: {
|
||||
reviews: Array<Review>
|
||||
className?: string
|
||||
reviewClassName?: (reviewIndex: number) => string
|
||||
msPerPixel?: number
|
||||
}) {
|
||||
let columnRef = useRef<React.ElementRef<'div'>>(null)
|
||||
let [columnHeight, setColumnHeight] = useState(0)
|
||||
let duration = `${columnHeight * msPerPixel}ms`
|
||||
|
||||
useEffect(() => {
|
||||
if (!columnRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
let resizeObserver = new window.ResizeObserver(() => {
|
||||
setColumnHeight(columnRef.current?.offsetHeight ?? 0)
|
||||
})
|
||||
|
||||
resizeObserver.observe(columnRef.current)
|
||||
|
||||
return () => {
|
||||
resizeObserver.disconnect()
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={columnRef}
|
||||
className={clsx('animate-marquee space-y-8 py-4', className)}
|
||||
style={{ '--marquee-duration': duration } as React.CSSProperties}
|
||||
>
|
||||
{reviews.concat(reviews).map((review, reviewIndex) => (
|
||||
<Review
|
||||
key={reviewIndex}
|
||||
aria-hidden={reviewIndex >= reviews.length}
|
||||
className={reviewClassName?.(reviewIndex % reviews.length)}
|
||||
{...review}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReviewGrid() {
|
||||
let containerRef = useRef<React.ElementRef<'div'>>(null)
|
||||
let isInView = useInView(containerRef, { once: true, amount: 0.4 })
|
||||
let columns = splitArray(reviews, 3)
|
||||
let column1 = columns[0]
|
||||
let column2 = columns[1]
|
||||
let column3 = splitArray(columns[2], 2)
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative -mx-4 mt-16 grid h-196 max-h-[150vh] grid-cols-1 items-start gap-8 overflow-hidden px-4 sm:mt-20 md:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{isInView && (
|
||||
<>
|
||||
<ReviewColumn
|
||||
reviews={[...column1, ...column3.flat(), ...column2]}
|
||||
reviewClassName={(reviewIndex) =>
|
||||
clsx(
|
||||
reviewIndex >= column1.length + column3[0].length &&
|
||||
'md:hidden',
|
||||
reviewIndex >= column1.length && 'lg:hidden',
|
||||
)
|
||||
}
|
||||
msPerPixel={10}
|
||||
/>
|
||||
<ReviewColumn
|
||||
reviews={[...column2, ...column3[1]]}
|
||||
className="hidden md:block"
|
||||
reviewClassName={(reviewIndex) =>
|
||||
reviewIndex >= column2.length ? 'lg:hidden' : ''
|
||||
}
|
||||
msPerPixel={15}
|
||||
/>
|
||||
<ReviewColumn
|
||||
reviews={column3.flat()}
|
||||
className="hidden lg:block"
|
||||
msPerPixel={10}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-gray-50" />
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-linear-to-t from-gray-50" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function UseCases() {
|
||||
return (
|
||||
<section
|
||||
id="usecases"
|
||||
aria-labelledby="usecases-title"
|
||||
className="pt-20 pb-16 sm:pt-32 sm:pb-24"
|
||||
>
|
||||
<Container className=''>
|
||||
<div className="mx-auto max-w-2xl lg:max-w-5xl">
|
||||
<h2
|
||||
id="usecases-title"
|
||||
className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
|
||||
>
|
||||
Powering Secure & Decentralized Connectivity
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600 sm:text-center">
|
||||
The ThreeFold Dashboard offers dozens of applications with built-in Mycelium support, making it easy to deploy and utilize. Once installed, Mycelium provides a secure, encrypted network for a wide range of use cases, from private communication to decentralized infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
<ReviewGrid />
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
39
src/components/WindowsLink.tsx
Normal file
39
src/components/WindowsLink.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export function WindowsLink({
|
||||
color = 'black',
|
||||
}: {
|
||||
color?: 'black' | 'white'
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href="#"
|
||||
aria-label="Download for Windows"
|
||||
className={clsx(
|
||||
'flex items-center rounded-lg transition-colors px-4 py-2',
|
||||
color === 'black'
|
||||
? 'bg-gray-800 text-white hover:bg-gray-900'
|
||||
: 'bg-white text-gray-900 hover:bg-gray-50',
|
||||
)}
|
||||
>
|
||||
{/* Windows logo */}
|
||||
<svg
|
||||
viewBox="0 0 88 88"
|
||||
aria-hidden="true"
|
||||
className="h-5 w-5 mr-3"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M0 12.2L35.6 7v34.2H0V12.2Zm0 63.6L35.6 76V44.8H0v31ZM41.2 6l46.8-6v41.2H41.2V6Zm0 76l46.8 6V46.8H41.2V82Z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
{/* Text */}
|
||||
<div className="flex flex-col text-left leading-tight">
|
||||
<span className="text-[9px] mt-0">Download for</span>
|
||||
<span className="text-sm font-semibold -mt-1.5">Windows</span>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user