Finish revert and apply stashed changes
This commit is contained in:
@@ -1,49 +0,0 @@
|
||||
import { type Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { AuthLayout } from '@/components/AuthLayout'
|
||||
import { Button } from '@/components/Button'
|
||||
import { TextField } from '@/components/Fields'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Sign In',
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Sign in to account"
|
||||
subtitle={
|
||||
<>
|
||||
Don’t have an account?{' '}
|
||||
<Link href="/register" className="text-cyan-600">
|
||||
Sign up
|
||||
</Link>{' '}
|
||||
for a free trial.
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form>
|
||||
<div className="space-y-6">
|
||||
<TextField
|
||||
label="Email address"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" color="cyan" className="mt-8 w-full">
|
||||
Sign in to account
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import { type Metadata } from 'next'
|
||||
import Link from 'next/link'
|
||||
|
||||
import { AuthLayout } from '@/components/AuthLayout'
|
||||
import { Button } from '@/components/Button'
|
||||
import { SelectField, TextField } from '@/components/Fields'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Sign Up',
|
||||
}
|
||||
|
||||
export default function Register() {
|
||||
return (
|
||||
<AuthLayout
|
||||
title="Sign up for an account"
|
||||
subtitle={
|
||||
<>
|
||||
Already registered?{' '}
|
||||
<Link href="/login" className="text-cyan-600">
|
||||
Sign in
|
||||
</Link>{' '}
|
||||
to your account.
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<TextField
|
||||
label="First name"
|
||||
name="first_name"
|
||||
type="text"
|
||||
autoComplete="given-name"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
label="Last name"
|
||||
name="last_name"
|
||||
type="text"
|
||||
autoComplete="family-name"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
className="col-span-full"
|
||||
label="Email address"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
<TextField
|
||||
className="col-span-full"
|
||||
label="Password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
/>
|
||||
<SelectField
|
||||
className="col-span-full"
|
||||
label="How did you hear about us?"
|
||||
name="referral_source"
|
||||
>
|
||||
<option>AltaVista search</option>
|
||||
<option>Super Bowl commercial</option>
|
||||
<option>Our route 34 city bus ad</option>
|
||||
<option>The “Never Use This” podcast</option>
|
||||
</SelectField>
|
||||
</div>
|
||||
<Button type="submit" color="cyan" className="mt-8 w-full">
|
||||
Get started today
|
||||
</Button>
|
||||
</form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,250 +0,0 @@
|
||||
'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 as React.RefObject<Element>, { 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>
|
||||
)
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
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>
|
||||
)
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
@@ -1,40 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -9,7 +9,7 @@ export function DownloadLink() {
|
||||
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
|
||||
Get Started
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import CountUp from "react-countup";
|
||||
import React from "react";
|
||||
import { Button } from "./Button";
|
||||
|
||||
export function GridStats() {
|
||||
return (
|
||||
<div id="grid-stats" className="py-24 bg-transparent relative">
|
||||
<div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
|
||||
<div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
|
||||
{/* Column 1: Title & NODES */}
|
||||
<div className="flex flex-col space-y-10">
|
||||
{/* Title + Description */}
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-tight leading-tight text-black lg:text-4xl">
|
||||
Powered by a Global Community
|
||||
</h2>
|
||||
<p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-black lg:text-base">
|
||||
ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure.
|
||||
</p>
|
||||
<Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Column 2: CORES (staggered) + SSD */}
|
||||
<div className="flex flex-col space-y-10">
|
||||
<StatCard
|
||||
label="CORES"
|
||||
description="A globally distributed mesh of CPU cores powering decentralized applications, AI workloads, and edge computing — without central bottlenecks."
|
||||
value={<CountUp end={54_958} duration={2.5} separator="," />}
|
||||
note="Total Central Processing Unit Cores available on the grid."
|
||||
className="mt-24"
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
label="SSD CAPACITY"
|
||||
description="A distributed network of storage capacity — ready to support Web3, AI, and edge computing workloads around the world."
|
||||
value={<CountUp end={7_364_506} duration={2.5} separator="," />}
|
||||
unit="GB"
|
||||
note="The total amount of storage (SSD, HDD, & RAM) on the grid."
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Column 3: nodes countries */}
|
||||
<div className="flex flex-col space-y-10 justify-start">
|
||||
<StatCard
|
||||
label="NODES"
|
||||
description="A computer server 100% dedicated to the network. It is a building block of the ThreeFold Grid, providing compute, storage, and network resources."
|
||||
value={<CountUp end={1778} duration={2.5} separator="," />}
|
||||
note="The total number of nodes on the grid."
|
||||
|
||||
/>
|
||||
|
||||
<StatCard
|
||||
label="COUNTRIES"
|
||||
description="The number of countries where at least one node is connected and operational on the grid."
|
||||
value={<CountUp end={51} duration={2.5} separator="," />}
|
||||
note="The total number of countries with active nodes."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 🧱 Stat Card Component
|
||||
function StatCard({
|
||||
label,
|
||||
description,
|
||||
value,
|
||||
unit,
|
||||
note,
|
||||
className = "",
|
||||
}: {
|
||||
label: string;
|
||||
description: string;
|
||||
value: React.ReactNode;
|
||||
unit?: string;
|
||||
note: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`relative flex flex-col overflow-hidden rounded-3xl bg-white opacity-0 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
|
||||
style={{
|
||||
filter: 'brightness(1)',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(0.8)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.filter = 'brightness(1)';
|
||||
}}
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-gradient-neutral-vertical" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
|
||||
<p className="mt-2 text-sm font-light text-pretty text-black lg:text-base">
|
||||
{description}
|
||||
</p>
|
||||
<div className="mt-8 flex items-center space-x-3">
|
||||
<span className="text-gradient-neutral-vertical text-3xl">•</span>
|
||||
<div className="text-5xl font-semibold tracking-tight text-black tabular-nums">
|
||||
{value}
|
||||
{unit && (
|
||||
<span className="ml-2 text-lg font-normal text-gray-800">{unit}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-800 uppercase tracking-wider">
|
||||
{note}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -125,7 +125,7 @@ export function Header() {
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</>
|
||||
@@ -138,7 +138,7 @@ export function Header() {
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,288 +0,0 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
@@ -1,599 +0,0 @@
|
||||
'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) => {
|
||||
if (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>
|
||||
)
|
||||
}
|
||||
@@ -1,225 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Ai21 } from '@lobehub/icons';
|
||||
|
||||
export default () => <Ai21.Brand size={45} />;
|
||||
export default () => <Ai21.Brand size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { AlibabaCloud } from '@lobehub/icons';
|
||||
|
||||
export default () => <AlibabaCloud.Text size={45} />;
|
||||
export default () => <AlibabaCloud.Text size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { BaiduCloud } from '@lobehub/icons';
|
||||
|
||||
export default () => <BaiduCloud.Combine size={45} />;
|
||||
export default () => <BaiduCloud.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { ByteDance } from '@lobehub/icons';
|
||||
|
||||
export default () => <ByteDance.Text size={45} />;
|
||||
export default () => <ByteDance.Text size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Claude } from '@lobehub/icons';
|
||||
|
||||
export default () => <Claude.Combine size={45} />;
|
||||
export default () => <Claude.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { DeepMind } from '@lobehub/icons';
|
||||
|
||||
export default () => <DeepMind.Combine size={45} />;
|
||||
export default () => <DeepMind.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { DeepSeek } from '@lobehub/icons';
|
||||
|
||||
export default () => <DeepSeek.Combine size={45} />;
|
||||
export default () => <DeepSeek.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Minimax } from '@lobehub/icons';
|
||||
|
||||
export default () => <Minimax.Combine size={45} />;
|
||||
export default () => <Minimax.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Mistral } from '@lobehub/icons';
|
||||
|
||||
export default () => <Mistral.Combine size={45} />;
|
||||
export default () => <Mistral.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { Moonshot } from '@lobehub/icons';
|
||||
|
||||
export default () => <Moonshot.Combine size={45} />;
|
||||
export default () => <Moonshot.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { OpenAI } from '@lobehub/icons';
|
||||
|
||||
export default () => <OpenAI.Combine size={45} />;
|
||||
export default () => <OpenAI.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { TencentCloud } from '@lobehub/icons';
|
||||
|
||||
export default () => <TencentCloud.Combine size={45} />;
|
||||
export default () => <TencentCloud.Combine size={40} />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { XAI } from '@lobehub/icons';
|
||||
|
||||
export default () => <XAI.Text size={45} />;
|
||||
export default () => <XAI.Text size={40} />;
|
||||
|
||||
Reference in New Issue
Block a user