forked from sashaastiadi/www_mycelium_net
Compare commits
3 Commits
developmen
...
02da6bb5ed
| Author | SHA1 | Date | |
|---|---|---|---|
| 02da6bb5ed | |||
| d344652a2f | |||
| 4d89745a57 |
@@ -1,9 +1,12 @@
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
trailingSlash: true,
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
out/404/index.html
Normal file
1
out/404/index.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
out/_next/static/chunks/184-d56c7ceab3510cb8.js
Normal file
1
out/_next/static/chunks/184-d56c7ceab3510cb8.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{7499:function(e,n,_){Promise.resolve().then(_.t.bind(_,7856,23)),Promise.resolve().then(_.t.bind(_,1983,23))},1983:function(){},7856:function(e){e.exports={style:{fontFamily:"'__Inter_f367f3', '__Inter_Fallback_f367f3'",fontStyle:"normal"},className:"__className_f367f3",variable:"__variable_f367f3"}}},function(e){e.O(0,[348,971,23,744],function(){return e(e.s=7499)}),_N_E=e.O()}]);
|
||||
1
out/_next/static/chunks/app/layout-7fe298ab6783ed17.js
Normal file
1
out/_next/static/chunks/app/layout-7fe298ab6783ed17.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
out/_next/static/chunks/main-e75e1c8aa841404e.js
Normal file
1
out/_next/static/chunks/main-e75e1c8aa841404e.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
out/download/index.html
Normal file
1
out/download/index.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
out/favicon.ico
BIN
out/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
20
package-lock.json
generated
20
package-lock.json
generated
@@ -14,11 +14,12 @@
|
||||
"@types/node": "^20.10.8",
|
||||
"@types/react": "^18.2.47",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"clsx": "^2.1.0",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^10.15.0",
|
||||
"next": "^14.0.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"typescript": "^5.3.3",
|
||||
"use-debounce": "^10.0.0"
|
||||
@@ -1881,9 +1882,10 @@
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
|
||||
"integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
@@ -4942,6 +4944,16 @@
|
||||
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
|
||||
"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
|
||||
},
|
||||
"node_modules/tailwind-merge": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
|
||||
"integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/dcastil"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
|
||||
|
||||
@@ -16,11 +16,12 @@
|
||||
"@types/node": "^20.10.8",
|
||||
"@types/react": "^18.2.47",
|
||||
"@types/react-dom": "^18.2.18",
|
||||
"clsx": "^2.1.0",
|
||||
"clsx": "^2.1.1",
|
||||
"framer-motion": "^10.15.0",
|
||||
"next": "^14.0.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"typescript": "^5.3.3",
|
||||
"use-debounce": "^10.0.0"
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { type Metadata } from 'next'
|
||||
import { Inter } from 'next/font/google'
|
||||
import Script from 'next/script'
|
||||
import clsx from 'clsx'
|
||||
|
||||
import '@/styles/tailwind.css'
|
||||
@@ -28,8 +29,29 @@ export default function RootLayout({
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" className={clsx('bg-gray-900 antialiased', inter.variable)}>
|
||||
<body>{children}</body>
|
||||
<html lang="en" className={clsx('bg-gray-50 antialiased', inter.variable)}>
|
||||
<body>
|
||||
{children}
|
||||
|
||||
{/* Crisp Chat */}
|
||||
<Script
|
||||
id="crisp-init"
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.$crisp = [];
|
||||
window.CRISP_WEBSITE_ID = "1a5a5241-91cb-4a41-8323-5ba5ec574da0";
|
||||
(function () {
|
||||
d = document;
|
||||
s = d.createElement("script");
|
||||
s.src = "https://client.crisp.chat/l.js";
|
||||
s.async = 1;
|
||||
d.getElementsByTagName("head")[0].appendChild(s);
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function DownloadHero() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-100"
|
||||
className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900"
|
||||
>
|
||||
Download Mycelium
|
||||
</motion.h2>
|
||||
@@ -51,10 +51,10 @@ export default function DownloadHero() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-6 text-lg/8 text-gray-300"
|
||||
className="mt-6 text-lg/8 text-gray-600"
|
||||
>
|
||||
Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
|
||||
<a href="https://threefold.info/mycelium_network/docs/" className="text-gray-200 hover:text-cyan-500 transition-colors font-semibold underline">
|
||||
<a href="https://threefold.info/mycelium_network/docs/" className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline">
|
||||
Read the manual.
|
||||
</a>
|
||||
</motion.p>
|
||||
@@ -64,15 +64,15 @@ export default function DownloadHero() {
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className="flex flex-col rounded-lg border border-gray-700 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
>
|
||||
<dt className="text-base/7 font-semibold text-gray-100">
|
||||
<dt className="text-base/7 font-semibold text-gray-900">
|
||||
<div className="mb-6 flex h-10 w-10 items-center justify-center">
|
||||
<Image src={feature.icon} alt="" className="h-10 w-10" />
|
||||
</div>
|
||||
{feature.name}
|
||||
</dt>
|
||||
<dd className="mt-1 flex flex-auto flex-col text-base/7 text-gray-400">
|
||||
<dd className="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
|
||||
<p className="flex-auto">{feature.description}</p>
|
||||
<p className="mt-6">
|
||||
<a href={feature.href} className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500">
|
||||
|
||||
@@ -59,7 +59,7 @@ export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<Container className="relative z-50 flex justify-between py-8 bg-gray-900">
|
||||
<Container className="relative z-50 flex justify-between py-8">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="h-10 w-auto" />
|
||||
@@ -105,7 +105,7 @@ export function Header() {
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-900 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
|
||||
>
|
||||
<div className="mt-6 flex flex-col gap-4">
|
||||
<Button href="https://threefold.info/mycelium_network/docs/" variant="outline" target="_blank" rel="noopener noreferrer">
|
||||
|
||||
@@ -103,16 +103,16 @@ export function Hero() {
|
||||
<Container>
|
||||
<div className="flex flex-col-reverse gap-y-16 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 lg:text-6xl font-medium tracking-tight text-gray-100">
|
||||
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium
|
||||
</h1>
|
||||
<h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-300">
|
||||
<h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
|
||||
Unleashing the Power of Decentralized Networks
|
||||
</h2>
|
||||
<p className="mt-6 lg:text-xl text-lg text-gray-400 lg:leading-normal leading-tight">
|
||||
<p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
|
||||
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-400 ">
|
||||
<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">
|
||||
|
||||
68
src/components/Texts.tsx
Normal file
68
src/components/Texts.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const colorVariants = {
|
||||
primary: 'text-gray-900',
|
||||
secondary: 'text-gray-600',
|
||||
light: 'text-gray-50',
|
||||
} as const
|
||||
|
||||
type TextOwnProps = {
|
||||
color?: keyof typeof colorVariants
|
||||
className?: string
|
||||
}
|
||||
|
||||
// Polymorphic helpers
|
||||
type PolymorphicProps<E extends React.ElementType, P> = P & {
|
||||
as?: E
|
||||
} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
|
||||
|
||||
const createTextComponent = <DefaultElement extends React.ElementType>(
|
||||
defaultElement: DefaultElement,
|
||||
defaultClassName: string
|
||||
) => {
|
||||
type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
|
||||
E,
|
||||
TextOwnProps
|
||||
>
|
||||
|
||||
function Text<E extends React.ElementType = DefaultElement>({
|
||||
as,
|
||||
color = 'primary',
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: Props<E>) {
|
||||
const Tag = (as || defaultElement) as React.ElementType
|
||||
return (
|
||||
<Tag
|
||||
className={cn(defaultClassName, colorVariants[color], className)}
|
||||
{...(props as object)}
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
)
|
||||
}
|
||||
|
||||
;(Text as any).displayName = `Text(${
|
||||
typeof defaultElement === 'string' ? defaultElement : 'Component'
|
||||
})`
|
||||
return Text
|
||||
}
|
||||
|
||||
// Exports based on your tailwind.css and the example
|
||||
export const H1 = createTextComponent(
|
||||
'h1',
|
||||
'text-5xl lg:text-8xl font-medium tracking-tight'
|
||||
)
|
||||
export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium')
|
||||
export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium')
|
||||
export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-semibold')
|
||||
export const P = createTextComponent(
|
||||
'p',
|
||||
'text-base lg:text-lg leading-relaxed'
|
||||
)
|
||||
export const Small = createTextComponent('small', 'text-sm font-medium')
|
||||
export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
|
||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { type ClassValue, clsx } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
Reference in New Issue
Block a user