diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx deleted file mode 100644 index 013dbbd..0000000 --- a/src/app/(auth)/login/page.tsx +++ /dev/null @@ -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 ( - - Don’t have an account?{' '} - - Sign up - {' '} - for a free trial. - - } - > -
-
- - -
- -
- - ) -} diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx deleted file mode 100644 index 1434f9b..0000000 --- a/src/app/(auth)/register/page.tsx +++ /dev/null @@ -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 ( - - Already registered?{' '} - - Sign in - {' '} - to your account. - - } - > -
-
- - - - - - - - - - -
- -
- - ) -} diff --git a/src/components/AndroidLink.tsx b/src/components/AndroidLink.tsx deleted file mode 100644 index eb1a12f..0000000 --- a/src/components/AndroidLink.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import Link from 'next/link' -import clsx from 'clsx' - -export function AndroidLink({ - color = 'black', -}: { - color?: 'black' | 'white' -}) { - return ( - - {/* Android SVG (converted for JSX) */} - - - {/* Text */} -
- Download for - Android -
- - ) -} diff --git a/src/components/AppDemo.tsx b/src/components/AppDemo.tsx deleted file mode 100644 index 4ee97a0..0000000 --- a/src/components/AppDemo.tsx +++ /dev/null @@ -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>(null) - let pathRef = useRef>(null) - let isInView = useInView(svgRef as React.RefObject, { 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 ( - 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} - > - - - - - - - - - - {[...Array(gridLines - 1).keys()].map((index) => ( - - ))} - - { - if (pathRef.current && typeof pathLength === 'number') { - pathWidth.set( - pathRef.current.getPointAtLength( - pathLength * pathRef.current.getTotalLength(), - ).x, - ) - } - }} - onAnimationComplete={() => setInteractionEnabled(true)} - /> - {activePointIndex !== null && ( - <> - - - - )} - - ) -} - -export function AppDemo() { - let [activePointIndex, setActivePointIndex] = useState(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 ( - - -
-
-
Tailwind Labs, Inc.
-
$CSS
- - - -
-
-
-
- {activeValue.toFixed(2)} -
-
USD
- {percentageChange && ( -
= 0 ? 'text-cyan-500' : 'text-gray-500', - )} - > - {`${ - percentageChange >= 0 ? '+' : '' - }${percentageChange.toFixed(2)}%`} -
- )} -
-
-
1D
-
5D
-
1M
-
6M
-
1Y
-
5Y
-
-
- -
-
- Trade -
-
-
-
Open
-
6,387.55
-
-
-
Closed
-
6,487.09
-
-
-
Low
-
6,322.01
-
-
-
-
- - - ) -} diff --git a/src/components/AppScreen.tsx b/src/components/AppScreen.tsx deleted file mode 100644 index 9f281a9..0000000 --- a/src/components/AppScreen.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { forwardRef } from 'react' -import clsx from 'clsx' - -function Logo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function AppScreen({ - children, - className, - ...props -}: React.ComponentPropsWithoutRef<'div'>) { - return ( -
-
- - - -
- {children} -
- ) -} - -AppScreen.Header = forwardRef< - React.ElementRef<'div'>, - { children: React.ReactNode } ->(function AppScreenHeader({ children }, ref) { - return ( -
- {children} -
- ) -}) - -AppScreen.Title = forwardRef< - React.ElementRef<'div'>, - { children: React.ReactNode } ->(function AppScreenTitle({ children }, ref) { - return ( -
- {children} -
- ) -}) - -AppScreen.Subtitle = forwardRef< - React.ElementRef<'div'>, - { children: React.ReactNode } ->(function AppScreenSubtitle({ children }, ref) { - return ( -
- {children} -
- ) -}) - -AppScreen.Body = forwardRef< - React.ElementRef<'div'>, - { className?: string; children: React.ReactNode } ->(function AppScreenBody({ children, className }, ref) { - return ( -
- {children} -
- ) -}) diff --git a/src/components/AppStoreLink.tsx b/src/components/AppStoreLink.tsx deleted file mode 100644 index 24b4dc0..0000000 --- a/src/components/AppStoreLink.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import Link from 'next/link' -import clsx from 'clsx' - -export function AppStoreLink({ - color = 'black', -}: { - color?: 'black' | 'white' -}) { - return ( - - - - ) -} diff --git a/src/components/AuthLayout.tsx b/src/components/AuthLayout.tsx deleted file mode 100644 index 163f2fa..0000000 --- a/src/components/AuthLayout.tsx +++ /dev/null @@ -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 ( -
-
- - - -
- -

- {title} -

- {subtitle && ( -

{subtitle}

- )} -
-
- {children} -
-
-
- ) -} diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx deleted file mode 100644 index 2493e09..0000000 --- a/src/components/CallToAction.tsx +++ /dev/null @@ -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 ( -
-
- -
- -
-

- Get Started Today -

-

- Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized. -

-
- - - - -
-
- -
- ) -} diff --git a/src/components/DownloadLink.tsx b/src/components/DownloadLink.tsx index 70aa105..e90abf5 100644 --- a/src/components/DownloadLink.tsx +++ b/src/components/DownloadLink.tsx @@ -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" > - Get Mycelium + Get Started ) } diff --git a/src/components/GridStats.tsx b/src/components/GridStats.tsx index e69de29..b7bfc97 100644 --- a/src/components/GridStats.tsx +++ b/src/components/GridStats.tsx @@ -0,0 +1,119 @@ +"use client"; + +import CountUp from "react-countup"; +import React from "react"; +import { Button } from "./Button"; + +export function GridStats() { + return ( +
+
+
+ {/* Column 1: Title & NODES */} +
+ {/* Title + Description */} +
+

+ Powered by a Global Community +

+

+ ThreeFold’s groundbreaking technology enables anyone – individuals, organizations, and communities – to deploy their own Internet infrastructure. +

+ +
+ + +
+ + {/* Column 2: CORES (staggered) + SSD */} +
+ } + note="Total Central Processing Unit Cores available on the grid." + className="mt-24" + /> + + } + unit="GB" + note="The total amount of storage (SSD, HDD, & RAM) on the grid." + /> +
+ + + + {/* Column 3: nodes countries */} +
+ } + note="The total number of nodes on the grid." + + /> + + } + note="The total number of countries with active nodes." + /> +
+
+
+
+ ); +} + +// 🧱 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 ( +
{ + e.currentTarget.style.filter = 'brightness(0.8)'; + }} + onMouseLeave={(e) => { + e.currentTarget.style.filter = 'brightness(1)'; + }} + > +

{label}

+

+ {description} +

+
+ • +
+ {value} + {unit && ( + {unit} + )} +
+
+

+ {note} +

+
+ ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f8490e9..ffed19e 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -125,7 +125,7 @@ export function Header() { - + @@ -138,7 +138,7 @@ export function Header() { - + diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx deleted file mode 100644 index 7994fed..0000000 --- a/src/components/Hero.tsx +++ /dev/null @@ -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 ( -
- - -
- ) -} - -function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function Hero() { - return ( -
- -
-
-

- Mycelium -

-

- Unleashing the Power of Decentralized Networks -

-

- Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking. -

-

- Coming Soon: New Decentralized Features -

-
- - -
-
-
- -
- - - -
-
-
-

- As featured in -

-
    - {[ - ['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]) => ( -
  • - {name} -
    • - ))} -
-
-
- -
- ) -} diff --git a/src/components/LinuxLink.tsx b/src/components/LinuxLink.tsx deleted file mode 100644 index ede0070..0000000 --- a/src/components/LinuxLink.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import Link from 'next/link' -import clsx from 'clsx' - -export function LinuxLink({ - color = 'black', -}: { - color?: 'black' | 'white' -}) { - return ( - - {/* Linux SVG */} - - - {/* Text */} -
- Download for - Linux -
- - ) -} diff --git a/src/components/PhoneFrame.tsx b/src/components/PhoneFrame.tsx deleted file mode 100644 index 6ca4cb5..0000000 --- a/src/components/PhoneFrame.tsx +++ /dev/null @@ -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 ( - - ) -} - -export function PhoneFrame({ - className, - children, - priority = false, - ...props -}: React.ComponentPropsWithoutRef<'div'> & { priority?: boolean }) { - return ( -
-
-
- {children} -
- - -
- ) -} diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx deleted file mode 100644 index 70015cb..0000000 --- a/src/components/Pricing.tsx +++ /dev/null @@ -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 ( - - ) -} - -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 - activePeriod: 'Monthly' | 'Annually' - logomarkClassName?: string - featured?: boolean -}) { - return ( -
-

- - {name} -

-

- {price.Monthly === price.Annually ? ( - price.Monthly - ) : ( - <> - - {price.Monthly} - - - {price.Annually} - - - )} -

-

- {description} -

-
-
    - {features.map((feature) => ( -
  • - - {feature} -
    • - ))} -
-
- -
- ) -} - -export function Pricing() { - let [activePeriod, setActivePeriod] = useState<'Monthly' | 'Annually'>( - 'Monthly', - ) - - return ( -
- -
-

- Flat pricing, no management fees. -

-

- 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. -

-
- -
-
- - {['Monthly', 'Annually'].map((period) => ( - - {period} - - ))} - - -
-
- -
- {plans.map((plan) => ( - - ))} -
- -
- ) -} diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx deleted file mode 100644 index 5e5d506..0000000 --- a/src/components/PrimaryFeatures.tsx +++ /dev/null @@ -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 ( - - ) -} - -function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - let id = useId() - - return ( - - ) -} - -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 ( - - - Invite people - - Get tips 5s sooner for every - invite. - - - -
-
- {[ - { label: 'Full name', value: 'Albert H. Wiggin' }, - { label: 'Email address', value: 'awiggin@chase.com' }, - ].map((field) => ( -
-
{field.label}
-
- {field.value} -
-
- ))} -
-
- Invite person -
-
- - - ) -} - -function StocksScreen(props: ScreenProps) { - return ( - - - Stocks - March 9, 2022 - - -
- {[ - { - 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) => ( -
-
- -
-
- {stock.name} -
-
-
- {stock.price} -
-
- {stock.change} -
-
-
- ))} -
- - - ) -} - -function InvestScreen(props: ScreenProps) { - return ( - - - Buy $LA - - $34.28 per share - - - -
-
- {[ - { label: 'Number of shares', value: '100' }, - { - label: 'Current market price', - value: ( -
- $34.28 - - - -
- ), - }, - { label: 'Estimated cost', value: '$3,428.00' }, - ].map((item) => ( -
-
{item.label}
-
- {item.value} -
-
- ))} -
- Buy shares -
-
-
- - - ) -} - -function usePrevious(value: T) { - let ref = useRef() - - 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 ( - - - {features.map((feature, featureIndex) => ( -
- {featureIndex === selectedIndex && ( - - )} -
- -

- - - {feature.name} - -

-

- {feature.description} -

-
-
- ))} - -
-
- -
- - - - {features.map((feature, featureIndex) => - selectedIndex === featureIndex ? ( - - - - ) : null, - )} - - - -
- - ) -} - -function FeaturesMobile() { - let [activeIndex, setActiveIndex] = useState(0) - let slideContainerRef = useRef>(null) - let slideRefs = useRef>>([]) - - 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 ( - <> -
- {features.map((feature, featureIndex) => ( -
{ - if (ref) { - slideRefs.current[featureIndex] = ref - } - }} - className="w-full flex-none snap-center px-4 sm:px-6" - > -
-
- -
- - - -
- -

- {feature.name} -

-

- {feature.description} -

-
-
-
- ))} -
-
- {features.map((_, featureIndex) => ( - - ))} -
- - ) -} - -export function PrimaryFeatures() { - return ( -
- -
-

- How Mycelium Operates -

-

- Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks. -

-
- -
- -
- - - -
- ) -} diff --git a/src/components/SecondaryFeatures.tsx b/src/components/SecondaryFeatures.tsx deleted file mode 100644 index 68e4959..0000000 --- a/src/components/SecondaryFeatures.tsx +++ /dev/null @@ -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 ( - - ) -} - -function DeviceCardsIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - let id = useId() - - return ( - - ) -} - -function DeviceClockIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function DeviceListIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function DeviceLockIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -function DeviceChartIcon(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function SecondaryFeatures() { - return ( -
- -
-

- Coming Soon: The Future of Mycelium -

-

- 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. -

-
-
    - {features.map((feature) => ( -
  • - -

    - {feature.name} -

    -

    {feature.description}

    -
    • - ))} -
- -
- ) -} diff --git a/src/components/StockLogos.tsx b/src/components/StockLogos.tsx deleted file mode 100644 index d2b1a8c..0000000 --- a/src/components/StockLogos.tsx +++ /dev/null @@ -1,100 +0,0 @@ -export function LaravelLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function TupleLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function TransistorLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function DiageoLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function StaticKitLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function StatamicLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function MirageLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} - -export function ReversableLogo(props: React.ComponentPropsWithoutRef<'svg'>) { - return ( - - ) -} diff --git a/src/components/WindowsLink.tsx b/src/components/WindowsLink.tsx deleted file mode 100644 index df72ec6..0000000 --- a/src/components/WindowsLink.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Link from 'next/link' -import clsx from 'clsx' - -export function WindowsLink({ - color = 'black', -}: { - color?: 'black' | 'white' -}) { - return ( - - {/* Windows logo */} - - - {/* Text */} -
- Download for - Windows -
- - ) -} diff --git a/src/components/logos/Ai21.tsx b/src/components/logos/Ai21.tsx index 711bc08..ba4db0d 100644 --- a/src/components/logos/Ai21.tsx +++ b/src/components/logos/Ai21.tsx @@ -1,3 +1,3 @@ import { Ai21 } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/AlibabaCloud.tsx b/src/components/logos/AlibabaCloud.tsx index 5e4fc96..3f8660e 100644 --- a/src/components/logos/AlibabaCloud.tsx +++ b/src/components/logos/AlibabaCloud.tsx @@ -1,3 +1,3 @@ import { AlibabaCloud } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/BaiduCloud.tsx b/src/components/logos/BaiduCloud.tsx index cf85a86..be191c9 100644 --- a/src/components/logos/BaiduCloud.tsx +++ b/src/components/logos/BaiduCloud.tsx @@ -1,3 +1,3 @@ import { BaiduCloud } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/ByteDance.tsx b/src/components/logos/ByteDance.tsx index 67b14be..97b9741 100644 --- a/src/components/logos/ByteDance.tsx +++ b/src/components/logos/ByteDance.tsx @@ -1,3 +1,3 @@ import { ByteDance } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/Claude.tsx b/src/components/logos/Claude.tsx index a5f61ec..963ae0c 100644 --- a/src/components/logos/Claude.tsx +++ b/src/components/logos/Claude.tsx @@ -1,3 +1,3 @@ import { Claude } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/DeepMind.tsx b/src/components/logos/DeepMind.tsx index d2807dd..c5b8578 100644 --- a/src/components/logos/DeepMind.tsx +++ b/src/components/logos/DeepMind.tsx @@ -1,3 +1,3 @@ import { DeepMind } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/DeepSeek.tsx b/src/components/logos/DeepSeek.tsx index 418cc5a..cb0884f 100644 --- a/src/components/logos/DeepSeek.tsx +++ b/src/components/logos/DeepSeek.tsx @@ -1,3 +1,3 @@ import { DeepSeek } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/Minimax.tsx b/src/components/logos/Minimax.tsx index 4369f5b..8e3595e 100644 --- a/src/components/logos/Minimax.tsx +++ b/src/components/logos/Minimax.tsx @@ -1,3 +1,3 @@ import { Minimax } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/Mistral.tsx b/src/components/logos/Mistral.tsx index eac96de..85a4ffb 100644 --- a/src/components/logos/Mistral.tsx +++ b/src/components/logos/Mistral.tsx @@ -1,3 +1,3 @@ import { Mistral } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/Moonshot.tsx b/src/components/logos/Moonshot.tsx index ac51933..25ec61c 100644 --- a/src/components/logos/Moonshot.tsx +++ b/src/components/logos/Moonshot.tsx @@ -1,3 +1,3 @@ import { Moonshot } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/OpenAI.tsx b/src/components/logos/OpenAI.tsx index 0ef51e7..8a65e7f 100644 --- a/src/components/logos/OpenAI.tsx +++ b/src/components/logos/OpenAI.tsx @@ -1,3 +1,3 @@ import { OpenAI } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/TencentCloud.tsx b/src/components/logos/TencentCloud.tsx index f3fcc5b..915ace8 100644 --- a/src/components/logos/TencentCloud.tsx +++ b/src/components/logos/TencentCloud.tsx @@ -1,3 +1,3 @@ import { TencentCloud } from '@lobehub/icons'; -export default () => ; +export default () => ; diff --git a/src/components/logos/XAI.tsx b/src/components/logos/XAI.tsx index 6923777..24d672f 100644 --- a/src/components/logos/XAI.tsx +++ b/src/components/logos/XAI.tsx @@ -1,3 +1,3 @@ import { XAI } from '@lobehub/icons'; -export default () => ; +export default () => ;