Compare commits
21 Commits
205c8fd0d9
...
a3cd28fc6b
| Author | SHA1 | Date | |
|---|---|---|---|
| a3cd28fc6b | |||
| 758a004ce9 | |||
| 73832e2686 | |||
| 4cc98af570 | |||
| 8f8d45c7ff | |||
| f2cb22ef66 | |||
| 82e730346e | |||
| c9129c5c66 | |||
| 8f1df965f2 | |||
| af77948679 | |||
| ce33e0f7c3 | |||
| 1f0f18105e | |||
| 48979de1c7 | |||
| 31f5e53a71 | |||
| 8ea15271d3 | |||
| f30006a983 | |||
| 044f9cf38b | |||
| 5bd2459855 | |||
| 6c0ed3cd65 | |||
| fa0a55d846 | |||
| 886e7557df |
25
components.json
Normal file
25
components.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/styles/tailwind.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {
|
||||||
|
"@aceternity": "https://ui.aceternity.com/registry/{name}.json",
|
||||||
|
"@magicui": "https://magicui.design/r/{name}.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -8,12 +8,6 @@
|
|||||||
<meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
|
<meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--font-inter: 'Inter', sans-serif;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
9683
package-lock.json
generated
9683
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
@@ -10,33 +10,47 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^19.1.1",
|
"@headlessui/react": "^2.2.9",
|
||||||
"react-dom": "^19.1.1",
|
"@heroicons/react": "^2.2.0",
|
||||||
"react-router-dom": "^7.1.3",
|
"@lobehub/icons": "^1.97.2",
|
||||||
"framer-motion": "^11.18.0",
|
"@react-three/drei": "^9.89.2",
|
||||||
|
"@react-three/fiber": "^8.15.12",
|
||||||
|
"@tabler/icons-react": "^3.35.0",
|
||||||
|
"@tailwindcss/forms": "^0.5.10",
|
||||||
|
"@types/node": "^20.19.23",
|
||||||
|
"@types/react": "^18.3.26",
|
||||||
|
"@types/react-dom": "^18.3.7",
|
||||||
|
"@types/react-router-dom": "^5.3.3",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"react-type-animation": "^3.2.0",
|
"cobe": "^0.6.5",
|
||||||
|
"dotted-map": "^2.2.3",
|
||||||
|
"framer-motion": "^10.18.0",
|
||||||
|
"lucide-react": "^0.544.0",
|
||||||
|
"motion": "^12.23.24",
|
||||||
|
"popmotion": "^11.0.5",
|
||||||
|
"react": "^18.3.1",
|
||||||
"react-countup": "^6.5.3",
|
"react-countup": "^6.5.3",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
"react-icons": "^5.5.0",
|
"react-icons": "^5.5.0",
|
||||||
"cobe": "^0.6.4"
|
"react-router-dom": "^7.9.4",
|
||||||
|
"react-type-animation": "^3.2.0",
|
||||||
|
"tailwind-merge": "^3.3.1",
|
||||||
|
"tailwindcss": "^4.1.15",
|
||||||
|
"three": "^0.151.0",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"use-debounce": "^10.0.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.36.0",
|
"@tailwindcss/postcss": "^4.1.15",
|
||||||
"@tailwindcss/forms": "^0.5.9",
|
"@types/three": "^0.151.0",
|
||||||
"@tailwindcss/postcss": "^4.1.7",
|
|
||||||
"@types/node": "^24.6.0",
|
|
||||||
"@types/react": "^19.1.16",
|
|
||||||
"@types/react-dom": "^19.1.9",
|
|
||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
"autoprefixer": "^10.4.20",
|
"autoprefixer": "^10.4.20",
|
||||||
"eslint": "^9.36.0",
|
"eslint": "^8.57.1",
|
||||||
"eslint-plugin-react-hooks": "^5.2.0",
|
"prettier": "^3.6.2",
|
||||||
"eslint-plugin-react-refresh": "^0.4.22",
|
"prettier-plugin-tailwindcss": "^0.6.14",
|
||||||
"globals": "^16.4.0",
|
"sharp": "^0.33.1",
|
||||||
"postcss": "^8.5.1",
|
"tw-animate-css": "^1.4.0",
|
||||||
"tailwindcss": "^4.1.7",
|
|
||||||
"typescript": "~5.9.3",
|
|
||||||
"typescript-eslint": "^8.45.0",
|
|
||||||
"vite": "^7.1.7"
|
"vite": "^7.1.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
public/images/agent_icon.png
Normal file
BIN
public/images/agent_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 802 KiB |
BIN
public/images/cloud.png
Normal file
BIN
public/images/cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
public/images/cloud1.png
Normal file
BIN
public/images/cloud1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
public/images/cloud_icon.png
Normal file
BIN
public/images/cloud_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
BIN
public/images/cloudimg.png
Normal file
BIN
public/images/cloudimg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
public/images/kubernetes.png
Normal file
BIN
public/images/kubernetes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1024 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 718 KiB |
BIN
public/images/mchip.webp
Normal file
BIN
public/images/mchip.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/images/mchip2.webp
Normal file
BIN
public/images/mchip2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
public/images/network_icon.png
Normal file
BIN
public/images/network_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 835 KiB |
231
public/images/phone-frame.svg
Normal file
231
public/images/phone-frame.svg
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
<svg width="366" height="729" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g mask="url(#mask)">
|
||||||
|
<g filter="url(#a)">
|
||||||
|
<path
|
||||||
|
d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
|
||||||
|
fill="url(#b)" />
|
||||||
|
<path
|
||||||
|
d="M363.315 64.213C363.315 22.99 341.312 1 300.092 1H66.751C25.53 1 3.528 22.99 3.528 64.213v44.68l-.857.143A2 2 0 0 0 1 111.009v24.611a2 2 0 0 0 1.671 1.973l.95.158a2.26 2.26 0 0 1-.093.236v26.173c.212.1.398.296.541.643l-1.398.233A2 2 0 0 0 1 167.009v47.611a2 2 0 0 0 1.671 1.973l1.368.228c-.139.319-.314.533-.511.653v16.637c.221.104.414.313.56.689l-1.417.236A2 2 0 0 0 1 237.009v47.611a2 2 0 0 0 1.671 1.973l1.347.225c-.135.294-.302.493-.49.607v377.681c0 41.213 22 63.208 63.223 63.208h95.074c.947-.504 2.717-.843 4.745-.843l.141.001h.194l.086-.001 33.704.005c1.849.043 3.442.37 4.323.838h95.074c41.222 0 63.223-21.999 63.223-63.212v-394.63c-.259-.275-.48-.796-.63-1.47l-.011-.133 1.655-.276A2 2 0 0 0 366 266.62v-77.611a2 2 0 0 0-1.671-1.973l-1.712-.285c.148-.839.396-1.491.698-1.811V64.213Z"
|
||||||
|
fill="url(#c)" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#d)">
|
||||||
|
<path
|
||||||
|
d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
|
||||||
|
fill="url(#e)" />
|
||||||
|
<path
|
||||||
|
d="M5 133.772v-21.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v24.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 133.772Z"
|
||||||
|
fill="url(#f)" fill-opacity=".1" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#g)">
|
||||||
|
<path
|
||||||
|
d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
|
||||||
|
fill="url(#h)" />
|
||||||
|
<path
|
||||||
|
d="M5 213.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 213.772Z"
|
||||||
|
fill="url(#i)" fill-opacity=".1" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#j)">
|
||||||
|
<path
|
||||||
|
d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
|
||||||
|
fill="url(#k)" />
|
||||||
|
<path
|
||||||
|
d="M5 283.772v-46.15c0-1.359-.54-2.661-1.5-3.622-.844-.073-2.496.257-2.496 2.157v49.562c.406 2.023 2.605 2.023 2.605 2.023A6.363 6.363 0 0 0 5 283.772Z"
|
||||||
|
fill="url(#l)" fill-opacity=".1" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#m)">
|
||||||
|
<path
|
||||||
|
d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
|
||||||
|
fill="url(#n)" />
|
||||||
|
<path
|
||||||
|
d="M362.004 266.772v-78.15a5.12 5.12 0 0 1 1.5-3.622c.844-.073 2.496.257 2.496 2.157v81.562c-.406 2.023-2.605 2.023-2.605 2.023a6.359 6.359 0 0 1-1.391-3.97Z"
|
||||||
|
fill="url(#o)" fill-opacity=".1" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
d="M305 14.5H59c-24.577 0-44.5 19.923-44.5 44.5v615c0 23.472 19.028 42.5 42.5 42.5h250c23.472 0 42.5-19.028 42.5-42.5V59c0-24.577-19.923-44.5-44.5-44.5Z"
|
||||||
|
stroke="url(#p)" stroke-opacity=".5" />
|
||||||
|
<g filter="url(#q)" shape-rendering="crispEdges">
|
||||||
|
<path
|
||||||
|
d="M16 59c0-23.748 19.252-43 43-43h246c23.748 0 43 19.252 43 43v615c0 23.196-18.804 42-42 42H58c-23.196 0-42-18.804-42-42V59Z"
|
||||||
|
fill="url(#r)" fill-opacity=".3" />
|
||||||
|
<path
|
||||||
|
d="M305 15.5H59c-24.024 0-43.5 19.476-43.5 43.5v615c0 23.472 19.028 42.5 42.5 42.5h248c23.472 0 42.5-19.028 42.5-42.5V59c0-24.024-19.476-43.5-43.5-43.5Z"
|
||||||
|
stroke="#000" stroke-opacity=".07" />
|
||||||
|
</g>
|
||||||
|
<g filter="url(#s)">
|
||||||
|
<rect x="154" y="29" width="56" height="5" rx="2.5" fill="#D4D4D4" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<mask id="mask">
|
||||||
|
<rect width="366" height="729" fill="#fff" />
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||||
|
d="M89.728 24a4.213 4.213 0 0 1 4.213 4.212v2.527c0 10.235 8.3 18.532 18.539 18.532h139.04c10.239 0 18.539-8.297 18.539-18.532v-2.527A4.212 4.212 0 0 1 274.272 24h32.864C325.286 24 340 38.71 340 56.853v618.295c0 18.144-14.714 32.853-32.864 32.853H56.864c-18.15 0-32.864-14.709-32.864-32.853V56.853C24 38.709 38.714 24 56.864 24h32.864Z"
|
||||||
|
fill="#000" />
|
||||||
|
</mask>
|
||||||
|
<linearGradient id="e" x1="1.004" y1="123.367" x2="5" y2="123.367" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#D4D4D4" />
|
||||||
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="f" x1="3.002" y1="108.991" x2="3.002" y2="116.75" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#171717" />
|
||||||
|
<stop offset=".783" stop-color="#171717" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="h" x1="1.004" y1="190.867" x2="5" y2="190.867" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#D4D4D4" />
|
||||||
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="i" x1="3.002" y1="163.991" x2="3.002" y2="178.497" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#171717" />
|
||||||
|
<stop offset=".783" stop-color="#171717" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="k" x1="1.004" y1="260.867" x2="5" y2="260.867" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#D4D4D4" />
|
||||||
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="l" x1="3.002" y1="233.991" x2="3.002" y2="248.497" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#171717" />
|
||||||
|
<stop offset=".783" stop-color="#171717" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="n" x1="362.004" y1="226.25" x2="366" y2="226.25" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset=".124" stop-color="#E6E6E6" />
|
||||||
|
<stop offset="1" stop-color="#D4D4D4" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="o" x1="364.002" y1="184.991" x2="364.002" y2="208.134" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#171717" />
|
||||||
|
<stop offset=".783" stop-color="#171717" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="p" x1="182" y1="15" x2="182" y2="716" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="#fff" />
|
||||||
|
<stop offset=".381" stop-color="#fff" stop-opacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
<filter id="a" x="-1" y="-1" width="367" height="730.314" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="-2" />
|
||||||
|
<feGaussianBlur stdDeviation="1.5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
|
||||||
|
<feBlend in2="shape" result="effect1_innerShadow_104_2007" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="-2" />
|
||||||
|
<feGaussianBlur stdDeviation="2" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0 0.0901961 0 0 0 0.17 0" />
|
||||||
|
<feBlend in2="effect1_innerShadow_104_2007" result="effect2_innerShadow_104_2007" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="2" />
|
||||||
|
<feGaussianBlur stdDeviation=".5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" />
|
||||||
|
<feBlend in2="effect2_innerShadow_104_2007" result="effect3_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="d" x="1.004" y="108.991" width="4.996" height="28.751" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="-1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="g" x="1.004" y="163.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="-1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="j" x="1.004" y="233.991" width="4.996" height="53.751" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="-1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="m" x="361.004" y="184.991" width="4.996" height="85.751" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="-1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dx="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="q" x="15" y="15" width="334" height="703" filterUnits="userSpaceOnUse"
|
||||||
|
color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feGaussianBlur stdDeviation="2.5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<filter id="s" x="154" y="29" width="56" height="6" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feComposite in2="hardAlpha" operator="out" />
|
||||||
|
<feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0" />
|
||||||
|
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_104_2007" />
|
||||||
|
<feBlend in="SourceGraphic" in2="effect1_dropShadow_104_2007" result="shape" />
|
||||||
|
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
|
||||||
|
<feOffset dy="1" />
|
||||||
|
<feGaussianBlur stdDeviation=".5" />
|
||||||
|
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||||
|
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
|
||||||
|
<feBlend in2="shape" result="effect2_innerShadow_104_2007" />
|
||||||
|
</filter>
|
||||||
|
<radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0 727 -642 0 184 1)">
|
||||||
|
<stop stop-color="#FFFFFF" />
|
||||||
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0 319 -295.5 0 183.5 1)">
|
||||||
|
<stop stop-color="#fff" />
|
||||||
|
<stop offset=".533" stop-color="#fff" stop-opacity="0" />
|
||||||
|
</radialGradient>
|
||||||
|
<radialGradient id="r" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="matrix(0 689 -326.783 0 182 27)">
|
||||||
|
<stop offset=".319" stop-color="#D4D4D4" />
|
||||||
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 15 KiB |
BIN
public/images/phoneframe.png
Normal file
BIN
public/images/phoneframe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 537 KiB |
BIN
public/videos/cloud.mp4
Normal file
BIN
public/videos/cloud.mp4
Normal file
Binary file not shown.
@@ -1,12 +1,13 @@
|
|||||||
import { useRef } from 'react'
|
import { useRef } from 'react'
|
||||||
import { motion, useInView } from 'framer-motion'
|
import { motion, useInView } from 'framer-motion'
|
||||||
|
|
||||||
export function AnimatedSection({ children }: { children: React.ReactNode }) {
|
export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
|
||||||
const ref = useRef(null)
|
const ref = useRef(null)
|
||||||
const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
|
const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.section
|
<motion.section
|
||||||
|
id={id}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
initial={{ opacity: 0, y: 50 }}
|
initial={{ opacity: 0, y: 50 }}
|
||||||
animate={{
|
animate={{
|
||||||
|
|||||||
@@ -3,9 +3,9 @@ import clsx from 'clsx'
|
|||||||
|
|
||||||
const baseStyles = {
|
const baseStyles = {
|
||||||
solid:
|
solid:
|
||||||
'inline-flex justify-center rounded-lg py-2 px-3 text-sm font-semibold transition-colors',
|
'inline-flex justify-center rounded-full py-2 px-4 text-sm font-semibold transition-colors',
|
||||||
outline:
|
outline:
|
||||||
'inline-flex justify-center rounded-lg border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-sm transition-colors',
|
'inline-flex justify-center rounded-full border py-[calc(--spacing(2)-1px)] px-[calc(--spacing(4)-1px)] text-sm transition-colors',
|
||||||
}
|
}
|
||||||
|
|
||||||
const variantStyles = {
|
const variantStyles = {
|
||||||
|
|||||||
28
src/components/FadeIn.tsx
Normal file
28
src/components/FadeIn.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion, type Transition } from 'framer-motion'
|
||||||
|
import React from 'react'
|
||||||
|
import { useMediaQuery } from '@/hooks/useMediaQuery'
|
||||||
|
|
||||||
|
type FadeInProps = {
|
||||||
|
children: React.ReactNode
|
||||||
|
transition?: Transition
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FadeIn({ children, transition, className }: FadeInProps) {
|
||||||
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={className}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
|
||||||
|
transition={transition || { duration: 0.5 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,44 +1,107 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { Container } from './Container'
|
import { AnimatePresence, motion } from 'framer-motion'
|
||||||
|
import clsx from 'clsx'
|
||||||
import { Button } from './Button'
|
import { Button } from './Button'
|
||||||
|
|
||||||
export function Header() {
|
|
||||||
|
function NavLinks() {
|
||||||
|
let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
|
||||||
|
let timeoutRef = useRef<number | null>(null)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header>
|
<>
|
||||||
<nav>
|
{[
|
||||||
<Container className="relative z-50 flex justify-between py-8">
|
['Home', '/'],
|
||||||
<div className="relative z-10 flex items-center gap-16">
|
['Cloud', '/cloud'],
|
||||||
|
['Network', '/network'],
|
||||||
|
['Agents', '/agents'],
|
||||||
|
].map(([label, href], index) => (
|
||||||
|
<Link
|
||||||
|
key={label}
|
||||||
|
to={href}
|
||||||
|
className={clsx(
|
||||||
|
'relative rounded-lg px-3 py-2 text-sm text-black transition-colors delay-150 hover:text-cyan-500 hover:delay-0',
|
||||||
|
)}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
if (timeoutRef.current) {
|
||||||
|
window.clearTimeout(timeoutRef.current)
|
||||||
|
}
|
||||||
|
setHoveredIndex(index)
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
timeoutRef.current = window.setTimeout(() => {
|
||||||
|
setHoveredIndex(null)
|
||||||
|
}, 200)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AnimatePresence>
|
||||||
|
{hoveredIndex === index && (
|
||||||
|
<motion.span
|
||||||
|
className="absolute inset-0 rounded-lg bg-white/50"
|
||||||
|
layoutId="hoverBackground"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1, transition: { duration: 0.15 } }}
|
||||||
|
exit={{
|
||||||
|
opacity: 0,
|
||||||
|
transition: { duration: 0.15 },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
<span className="relative z-10">{label}</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const [isVisible, setIsVisible] = useState(true)
|
||||||
|
const [lastScrollY, setLastScrollY] = useState(0)
|
||||||
|
|
||||||
|
const controlHeader = () => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
if (window.scrollY > lastScrollY && window.scrollY > 100) {
|
||||||
|
// Hides when scrolling down past 100px
|
||||||
|
setIsVisible(false)
|
||||||
|
} else {
|
||||||
|
// Shows when scrolling up
|
||||||
|
setIsVisible(true)
|
||||||
|
}
|
||||||
|
setLastScrollY(window.scrollY)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
window.addEventListener('scroll', controlHeader)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('scroll', controlHeader)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [lastScrollY])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.header
|
||||||
|
className="fixed top-0 left-0 right-0 z-50 bg-white/10 shadow-lg ring-1 ring-white/10 backdrop-blur-sm"
|
||||||
|
initial={{ y: 0, opacity: 1 }}
|
||||||
|
animate={{ y: isVisible ? 0 : -100, opacity: isVisible ? 1 : 0 }}
|
||||||
|
transition={{ duration: 0.3, ease: 'easeInOut' }}
|
||||||
|
>
|
||||||
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-center gap-x-5">
|
||||||
<Link to="/" aria-label="Home">
|
<Link to="/" aria-label="Home">
|
||||||
<img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
|
<img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
|
||||||
</Link>
|
</Link>
|
||||||
<div className="hidden lg:flex lg:gap-10">
|
|
||||||
<Link
|
|
||||||
to="/"
|
|
||||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
||||||
>
|
|
||||||
Home
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/cloud"
|
|
||||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
||||||
>
|
|
||||||
Cloud
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/network"
|
|
||||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
||||||
>
|
|
||||||
Network
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/agents"
|
|
||||||
className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
|
|
||||||
>
|
|
||||||
Agents
|
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex items-center gap-x-5">
|
||||||
|
<NavLinks />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-6">
|
<div className="flex items-center gap-8">
|
||||||
<div className="flex items-center gap-6 max-lg:hidden">
|
<div className="flex items-center gap-6 max-lg:hidden">
|
||||||
<Button
|
<Button
|
||||||
to="https://threefold.info/mycelium_network/docs/"
|
to="https://threefold.info/mycelium_network/docs/"
|
||||||
@@ -54,8 +117,7 @@ export function Header() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</div>
|
||||||
</nav>
|
</motion.header>
|
||||||
</header>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,18 @@
|
|||||||
import { Outlet } from 'react-router-dom'
|
import { Outlet } from 'react-router-dom'
|
||||||
import { Header } from './Header'
|
import { FloatingNav } from './ui/floating-navbar'
|
||||||
import { Footer } from './Footer'
|
import { Footer } from './Footer'
|
||||||
|
import { Header } from './Header'
|
||||||
|
|
||||||
export function Layout() {
|
export function Layout() {
|
||||||
|
const navItems = [
|
||||||
|
{ name: 'Home', link: '/' },
|
||||||
|
{ name: 'Cloud', link: '/cloud' },
|
||||||
|
{ name: 'Network', link: '/network' },
|
||||||
|
{ name: 'Agents', link: '/agents' },
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
|
<div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
|
||||||
<Header />
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|||||||
22
src/components/PhoneFrame.tsx
Normal file
22
src/components/PhoneFrame.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
import phoneFrame from '@/images/phone-frame.svg'
|
||||||
|
|
||||||
|
export function PhoneFrame({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: React.ComponentPropsWithoutRef<'div'>) {
|
||||||
|
return (
|
||||||
|
<div className={clsx('relative aspect-[366/729]', className)} {...props}>
|
||||||
|
<img
|
||||||
|
src={phoneFrame}
|
||||||
|
alt=""
|
||||||
|
className="pointer-events-none absolute inset-0 w-full h-full"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-x-[6.3%] top-[3.15%] bottom-[2.75%] rounded-3xl overflow-y-auto bg-gray-900">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
src/components/ScrollDownArrow.tsx
Normal file
22
src/components/ScrollDownArrow.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ChevronDown } from 'lucide-react'
|
||||||
|
|
||||||
|
export function ScrollDownArrow() {
|
||||||
|
const scrollToNextSection = () => {
|
||||||
|
const nextSection = document.querySelector('#next-section') // Assuming the next section has this id
|
||||||
|
if (nextSection) {
|
||||||
|
nextSection.scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={scrollToNextSection}
|
||||||
|
className="animate-bounce text-gray-500 hover:text-gray-700"
|
||||||
|
aria-label="Scroll to next section"
|
||||||
|
>
|
||||||
|
<ChevronDown size={32} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
162
src/components/Texts.tsx
Normal file
162
src/components/Texts.tsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React from 'react'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const fontVariants = {
|
||||||
|
sans: 'font-sans',
|
||||||
|
neuton: 'font-neuton',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
const colorVariants = {
|
||||||
|
primary: 'text-gray-900',
|
||||||
|
secondary: 'text-gray-600',
|
||||||
|
light: 'text-gray-50',
|
||||||
|
accent: 'text-cyan-500',
|
||||||
|
white: 'text-white',
|
||||||
|
dark: 'text-gray-950',
|
||||||
|
tertiary: 'text-gray-700',
|
||||||
|
lightSecondary: 'text-gray-300',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
type TextOwnProps = {
|
||||||
|
font?: keyof typeof fontVariants
|
||||||
|
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>({
|
||||||
|
font = 'sans',
|
||||||
|
as,
|
||||||
|
color = 'primary',
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: Props<E>) {
|
||||||
|
const Tag = (as || defaultElement) as React.ElementType
|
||||||
|
return (
|
||||||
|
<Tag
|
||||||
|
className={cn(
|
||||||
|
defaultClassName,
|
||||||
|
fontVariants[font],
|
||||||
|
colorVariants[color],
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{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-6xl lg:text-7xl font-medium leading-tight tracking-tight'
|
||||||
|
)
|
||||||
|
export const H2 = createTextComponent(
|
||||||
|
'h2',
|
||||||
|
'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
|
||||||
|
)
|
||||||
|
export const H3 = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
|
||||||
|
)
|
||||||
|
export const H4 = createTextComponent(
|
||||||
|
'h4',
|
||||||
|
'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
|
||||||
|
)
|
||||||
|
export const P = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-base lg:text-lg leading-relaxed'
|
||||||
|
)
|
||||||
|
export const Small = createTextComponent(
|
||||||
|
'small',
|
||||||
|
'text-sm font-medium leading-normal tracking-normal'
|
||||||
|
)
|
||||||
|
export const Subtle = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-sm leading-normal tracking-normal text-gray-500'
|
||||||
|
)
|
||||||
|
export const H5 = createTextComponent(
|
||||||
|
'h5',
|
||||||
|
'text-xl lg:text-2xl font-light leading-snug tracking-normal'
|
||||||
|
)
|
||||||
|
export const Eyebrow = createTextComponent(
|
||||||
|
'h2',
|
||||||
|
'text-base/7 font-semibold tracking-wide'
|
||||||
|
)
|
||||||
|
export const SectionHeader = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
|
||||||
|
)
|
||||||
|
export const CardEyebrow = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-sm/4 font-semibold tracking-wide'
|
||||||
|
)
|
||||||
|
export const CardTitle = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-lg font-medium leading-snug tracking-tight'
|
||||||
|
)
|
||||||
|
export const CardDescription = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-sm/6 leading-normal tracking-normal'
|
||||||
|
)
|
||||||
|
export const FeatureTitle = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-lg font-semibold leading-snug tracking-tight'
|
||||||
|
)
|
||||||
|
export const FeatureDescription = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'text-sm leading-normal tracking-normal'
|
||||||
|
)
|
||||||
|
export const MobileFeatureTitle = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
|
||||||
|
)
|
||||||
|
export const SecondaryFeatureTitle = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-base font-semibold leading-snug tracking-tight'
|
||||||
|
)
|
||||||
|
export const Question = createTextComponent(
|
||||||
|
'h3',
|
||||||
|
'text-lg/6 font-semibold tracking-tight'
|
||||||
|
)
|
||||||
|
export const Answer = createTextComponent(
|
||||||
|
'p',
|
||||||
|
'mt-4 text-sm leading-normal tracking-normal'
|
||||||
|
)
|
||||||
|
export const PageHeader = createTextComponent(
|
||||||
|
'h2',
|
||||||
|
'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
|
||||||
|
)
|
||||||
|
export const DownloadCardTitle = createTextComponent(
|
||||||
|
'dt',
|
||||||
|
'text-base/7 font-semibold tracking-wide'
|
||||||
|
)
|
||||||
|
export const DownloadCardDescription = createTextComponent(
|
||||||
|
'dd',
|
||||||
|
'text-base/7 leading-normal tracking-normal'
|
||||||
|
)
|
||||||
|
|
||||||
|
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
|
||||||
|
export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light')
|
||||||
139
src/components/features-section-demo-1.tsx
Normal file
139
src/components/features-section-demo-1.tsx
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useId } from "react";
|
||||||
|
|
||||||
|
export default function FeaturesSectionDemo() {
|
||||||
|
return (
|
||||||
|
<div className="py-20 lg:py-40">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-2 max-w-7xl mx-auto">
|
||||||
|
{grid.map((feature) => (
|
||||||
|
<div
|
||||||
|
key={feature.title}
|
||||||
|
className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white p-6 rounded-3xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<Grid size={20} />
|
||||||
|
<p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
|
||||||
|
{feature.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-neutral-600 dark:text-neutral-400 mt-4 text-base font-normal relative z-20">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const grid = [
|
||||||
|
{
|
||||||
|
title: "HIPAA and SOC2 Compliant",
|
||||||
|
description:
|
||||||
|
"Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Automated Social Media Posting",
|
||||||
|
description:
|
||||||
|
"Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Advanced Analytics",
|
||||||
|
description:
|
||||||
|
"Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Content Calendar",
|
||||||
|
description:
|
||||||
|
"Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Audience Targeting",
|
||||||
|
description:
|
||||||
|
"Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Social Listening",
|
||||||
|
description:
|
||||||
|
"Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Customizable Templates",
|
||||||
|
description:
|
||||||
|
"Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Collaboration Tools",
|
||||||
|
description:
|
||||||
|
"Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Grid = ({
|
||||||
|
pattern,
|
||||||
|
size,
|
||||||
|
}: {
|
||||||
|
pattern?: number[][];
|
||||||
|
size?: number;
|
||||||
|
}) => {
|
||||||
|
const p = pattern ?? [
|
||||||
|
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||||
|
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||||
|
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||||
|
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||||
|
[Math.floor(Math.random() * 4) + 7, Math.floor(Math.random() * 6) + 1],
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className="pointer-events-none absolute left-1/2 top-0 -ml-20 -mt-2 h-full w-full [mask-image:linear-gradient(white,transparent)]">
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-r [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-zinc-900/30 from-zinc-100/30 to-zinc-300/30 dark:to-zinc-900/30 opacity-100">
|
||||||
|
<GridPattern
|
||||||
|
width={size ?? 20}
|
||||||
|
height={size ?? 20}
|
||||||
|
x="-12"
|
||||||
|
y="4"
|
||||||
|
squares={p}
|
||||||
|
className="absolute inset-0 h-full w-full mix-blend-overlay dark:fill-white/10 dark:stroke-white/10 stroke-black/10 fill-black/10"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function GridPattern({ width, height, x, y, squares, ...props }: any) {
|
||||||
|
const patternId = useId();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg aria-hidden="true" {...props}>
|
||||||
|
<defs>
|
||||||
|
<pattern
|
||||||
|
id={patternId}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
patternUnits="userSpaceOnUse"
|
||||||
|
x={x}
|
||||||
|
y={y}
|
||||||
|
>
|
||||||
|
<path d={`M.5 ${height}V.5H${width}`} fill="none" />
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
strokeWidth={0}
|
||||||
|
fill={`url(#${patternId})`}
|
||||||
|
/>
|
||||||
|
{squares && (
|
||||||
|
<svg x={x} y={y} className="overflow-visible">
|
||||||
|
{squares.map(([x, y]: any) => (
|
||||||
|
<rect
|
||||||
|
strokeWidth="0"
|
||||||
|
key={`${x}-${y}`}
|
||||||
|
width={width + 1}
|
||||||
|
height={height + 1}
|
||||||
|
x={x * width}
|
||||||
|
y={y * height}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
109
src/components/features-section-demo-2.tsx
Normal file
109
src/components/features-section-demo-2.tsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
IconAdjustmentsBolt,
|
||||||
|
IconCloud,
|
||||||
|
IconCurrencyDollar,
|
||||||
|
IconEaseInOut,
|
||||||
|
IconHeart,
|
||||||
|
IconHelp,
|
||||||
|
IconRouteAltLeft,
|
||||||
|
IconTerminal2,
|
||||||
|
} from "@tabler/icons-react";
|
||||||
|
|
||||||
|
export default function FeaturesSectionDemo() {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Built for developers",
|
||||||
|
description:
|
||||||
|
"Built for engineers, developers, dreamers, thinkers and doers.",
|
||||||
|
icon: <IconTerminal2 />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Ease of use",
|
||||||
|
description:
|
||||||
|
"It's as easy as using an Apple, and as expensive as buying one.",
|
||||||
|
icon: <IconEaseInOut />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Pricing like no other",
|
||||||
|
description:
|
||||||
|
"Our prices are best in the market. No cap, no lock, no credit card required.",
|
||||||
|
icon: <IconCurrencyDollar />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "100% Uptime guarantee",
|
||||||
|
description: "We just cannot be taken down by anyone.",
|
||||||
|
icon: <IconCloud />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Multi-tenant Architecture",
|
||||||
|
description: "You can simply share passwords instead of buying new seats",
|
||||||
|
icon: <IconRouteAltLeft />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "24/7 Customer Support",
|
||||||
|
description:
|
||||||
|
"We are available a 100% of the time. Atleast our AI Agents are.",
|
||||||
|
icon: <IconHelp />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Money back guarantee",
|
||||||
|
description:
|
||||||
|
"If you donot like EveryAI, we will convince you to like us.",
|
||||||
|
icon: <IconAdjustmentsBolt />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "And everything else",
|
||||||
|
description: "I just ran out of copy ideas. Accept my sincere apologies",
|
||||||
|
icon: <IconHeart />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<Feature key={feature.title} {...feature} index={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const Feature = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
icon,
|
||||||
|
index,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: React.ReactNode;
|
||||||
|
index: number;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
|
||||||
|
(index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
|
||||||
|
index < 4 && "lg:border-b dark:border-neutral-800"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{index < 4 && (
|
||||||
|
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||||
|
)}
|
||||||
|
{index >= 4 && (
|
||||||
|
<div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
|
||||||
|
)}
|
||||||
|
<div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold mb-2 relative z-10 px-10">
|
||||||
|
<div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
|
||||||
|
<span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
281
src/components/features-section-demo-3.tsx
Normal file
281
src/components/features-section-demo-3.tsx
Normal file
@@ -0,0 +1,281 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import createGlobe from "cobe";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
|
||||||
|
|
||||||
|
|
||||||
|
export default function FeaturesSectionDemo() {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Track issues effectively",
|
||||||
|
description:
|
||||||
|
"Track and manage your project issues with ease using our intuitive interface.",
|
||||||
|
skeleton: <SkeletonOne />,
|
||||||
|
className:
|
||||||
|
"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Capture pictures with AI",
|
||||||
|
description:
|
||||||
|
"Capture stunning photos effortlessly using our advanced AI technology.",
|
||||||
|
skeleton: <SkeletonTwo />,
|
||||||
|
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Watch our AI on YouTube",
|
||||||
|
description:
|
||||||
|
"Whether its you or Tyler Durden, you can get to know about our product on YouTube",
|
||||||
|
skeleton: <SkeletonThree />,
|
||||||
|
className:
|
||||||
|
"col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Deploy in seconds",
|
||||||
|
description:
|
||||||
|
"With our blazing fast, state of the art, cutting edge, we are so back cloud servies (read AWS) - you can deploy your model in seconds.",
|
||||||
|
skeleton: <SkeletonFour />,
|
||||||
|
className: "col-span-1 lg:col-span-3 border-b lg:border-none",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
|
||||||
|
<div className="px-8">
|
||||||
|
<h4 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
|
||||||
|
Packed with thousands of features
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<p className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
|
||||||
|
From Image generation to video generation, Everything AI has APIs for
|
||||||
|
literally everything. It can even create this website copy for you.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative ">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<FeatureCard key={feature.title} className={feature.className}>
|
||||||
|
<FeatureTitle>{feature.title}</FeatureTitle>
|
||||||
|
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||||
|
<div className=" h-full w-full">{feature.skeleton}</div>
|
||||||
|
</FeatureCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const FeatureCard = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FeatureTitle = ({ children }: { children?: React.ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<p className=" max-w-5xl mx-auto text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
"text-sm md:text-base max-w-4xl text-left mx-auto",
|
||||||
|
"text-neutral-500 text-center font-normal dark:text-neutral-300",
|
||||||
|
"text-left max-w-sm mx-0 md:text-sm my-2"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonOne = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative flex py-8 px-2 gap-10 h-full">
|
||||||
|
<div className="w-full p-5 mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
|
||||||
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 ">
|
||||||
|
{/* TODO */}
|
||||||
|
<img
|
||||||
|
src="/linear.webp"
|
||||||
|
alt="header"
|
||||||
|
width={800}
|
||||||
|
height={800}
|
||||||
|
className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
|
||||||
|
<div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonThree = () => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
|
||||||
|
target="__blank"
|
||||||
|
className="relative flex gap-10 h-full group/image"
|
||||||
|
>
|
||||||
|
<div className="w-full mx-auto bg-transparent dark:bg-transparent group h-full">
|
||||||
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 relative">
|
||||||
|
{/* TODO */}
|
||||||
|
<IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
|
||||||
|
<img
|
||||||
|
src="https://assets.aceternity.com/fireship.jpg"
|
||||||
|
alt="header"
|
||||||
|
width={800}
|
||||||
|
height={800}
|
||||||
|
className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonTwo = () => {
|
||||||
|
const images = [
|
||||||
|
"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
];
|
||||||
|
|
||||||
|
const imageVariants = {
|
||||||
|
whileHover: {
|
||||||
|
scale: 1.1,
|
||||||
|
rotate: 0,
|
||||||
|
zIndex: 100,
|
||||||
|
},
|
||||||
|
whileTap: {
|
||||||
|
scale: 1.1,
|
||||||
|
rotate: 0,
|
||||||
|
zIndex: 100,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
|
||||||
|
{/* TODO */}
|
||||||
|
<div className="flex flex-row -ml-20">
|
||||||
|
{images.map((image, idx) => (
|
||||||
|
<motion.div
|
||||||
|
variants={imageVariants}
|
||||||
|
key={"images-first" + idx}
|
||||||
|
style={{
|
||||||
|
rotate: Math.random() * 20 - 10,
|
||||||
|
}}
|
||||||
|
whileHover="whileHover"
|
||||||
|
whileTap="whileTap"
|
||||||
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt="bali images"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row">
|
||||||
|
{images.map((image, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={"images-second" + idx}
|
||||||
|
style={{
|
||||||
|
rotate: Math.random() * 20 - 10,
|
||||||
|
}}
|
||||||
|
variants={imageVariants}
|
||||||
|
whileHover="whileHover"
|
||||||
|
whileTap="whileTap"
|
||||||
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt="bali images"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent h-full pointer-events-none" />
|
||||||
|
<div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black to-transparent h-full pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonFour = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-60 md:h-60 flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
|
||||||
|
<Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Globe = ({ className }: { className?: string }) => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let phi = 0;
|
||||||
|
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
|
||||||
|
const globe = createGlobe(canvasRef.current, {
|
||||||
|
devicePixelRatio: 2,
|
||||||
|
width: 600 * 2,
|
||||||
|
height: 600 * 2,
|
||||||
|
phi: 0,
|
||||||
|
theta: 0,
|
||||||
|
dark: 1,
|
||||||
|
diffuse: 1.2,
|
||||||
|
mapSamples: 16000,
|
||||||
|
mapBrightness: 6,
|
||||||
|
baseColor: [0.3, 0.3, 0.3],
|
||||||
|
markerColor: [0.1, 0.8, 1],
|
||||||
|
glowColor: [1, 1, 1],
|
||||||
|
markers: [
|
||||||
|
// longitude latitude
|
||||||
|
{ location: [37.7595, -122.4367], size: 0.03 },
|
||||||
|
{ location: [40.7128, -74.006], size: 0.1 },
|
||||||
|
],
|
||||||
|
onRender: (state) => {
|
||||||
|
// Called on every animation frame.
|
||||||
|
// `state` will be an empty object, return updated params.
|
||||||
|
state.phi = phi;
|
||||||
|
phi += 0.01;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
globe.destroy();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
3
src/components/logos/Ai21.tsx
Normal file
3
src/components/logos/Ai21.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Ai21 } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <Ai21.Brand size={30} />;
|
||||||
3
src/components/logos/AlibabaCloud.tsx
Normal file
3
src/components/logos/AlibabaCloud.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { AlibabaCloud } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <AlibabaCloud.Text size={30} />;
|
||||||
3
src/components/logos/BaiduCloud.tsx
Normal file
3
src/components/logos/BaiduCloud.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { BaiduCloud } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <BaiduCloud.Combine size={30} />;
|
||||||
3
src/components/logos/ByteDance.tsx
Normal file
3
src/components/logos/ByteDance.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { ByteDance } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <ByteDance.Text size={30} />;
|
||||||
3
src/components/logos/Claude.tsx
Normal file
3
src/components/logos/Claude.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Claude } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <Claude.Combine size={30} />;
|
||||||
3
src/components/logos/DeepMind.tsx
Normal file
3
src/components/logos/DeepMind.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { DeepMind } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <DeepMind.Combine size={30} />;
|
||||||
3
src/components/logos/DeepSeek.tsx
Normal file
3
src/components/logos/DeepSeek.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { DeepSeek } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <DeepSeek.Combine size={30} />;
|
||||||
3
src/components/logos/Minimax.tsx
Normal file
3
src/components/logos/Minimax.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Minimax } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <Minimax.Combine size={30} />;
|
||||||
3
src/components/logos/Mistral.tsx
Normal file
3
src/components/logos/Mistral.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Mistral } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <Mistral.Combine size={30} />;
|
||||||
3
src/components/logos/Moonshot.tsx
Normal file
3
src/components/logos/Moonshot.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { Moonshot } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <Moonshot.Combine size={30} />;
|
||||||
0
src/components/logos/NousResearch.tsx
Normal file
0
src/components/logos/NousResearch.tsx
Normal file
3
src/components/logos/OpenAI.tsx
Normal file
3
src/components/logos/OpenAI.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { OpenAI } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <OpenAI.Combine size={30} />;
|
||||||
3
src/components/logos/TencentCloud.tsx
Normal file
3
src/components/logos/TencentCloud.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
import { TencentCloud } from '@lobehub/icons';
|
||||||
|
|
||||||
|
export default () => <TencentCloud.Combine size={30} />;
|
||||||
23
src/components/logos/XAI.tsx
Normal file
23
src/components/logos/XAI.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
const XAILogo = () => (
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="katman_1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
x="0px"
|
||||||
|
y="0px"
|
||||||
|
viewBox="0 0 841.89 595.28"
|
||||||
|
xmlSpace="preserve"
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<polygon points="557.09,211.99 565.4,538.36 631.96,538.36 640.28,93.18 " />
|
||||||
|
<polygon points="640.28,56.91 538.72,56.91 379.35,284.53 430.13,357.05 " />
|
||||||
|
<polygon points="201.61,538.36 303.17,538.36 353.96,465.84 303.17,393.31 " />
|
||||||
|
<polygon points="201.61,211.99 430.13,538.36 531.69,538.36 303.17,211.99 " />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default XAILogo;
|
||||||
87
src/components/magicui/infinite-moving-cards.tsx
Normal file
87
src/components/magicui/infinite-moving-cards.tsx
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import React, { useCallback, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export const InfiniteMovingCards = ({
|
||||||
|
items,
|
||||||
|
direction = "left",
|
||||||
|
speed = "fast",
|
||||||
|
pauseOnHover = true,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
items: React.ReactNode[];
|
||||||
|
direction?: "left" | "right";
|
||||||
|
speed?: "fast" | "normal" | "slow";
|
||||||
|
pauseOnHover?: boolean;
|
||||||
|
className?: string;
|
||||||
|
}): JSX.Element => {
|
||||||
|
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||||
|
const scrollerRef = React.useRef<HTMLUListElement>(null);
|
||||||
|
const [start, setStart] = useState(false);
|
||||||
|
|
||||||
|
const getDirection = useCallback(() => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
if (direction === "left") {
|
||||||
|
containerRef.current.style.setProperty("--animation-direction", "forwards");
|
||||||
|
} else {
|
||||||
|
containerRef.current.style.setProperty("--animation-direction", "reverse");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [direction]);
|
||||||
|
|
||||||
|
const getSpeed = useCallback(() => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
if (speed === "fast") {
|
||||||
|
containerRef.current.style.setProperty("--animation-duration", "20s");
|
||||||
|
} else if (speed === "normal") {
|
||||||
|
containerRef.current.style.setProperty("--animation-duration", "40s");
|
||||||
|
} else {
|
||||||
|
containerRef.current.style.setProperty("--animation-duration", "80s");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [speed]);
|
||||||
|
|
||||||
|
const addAnimation = useCallback(() => {
|
||||||
|
if (containerRef.current && scrollerRef.current) {
|
||||||
|
const scrollerContent = Array.from(scrollerRef.current.children);
|
||||||
|
|
||||||
|
scrollerContent.forEach((item) => {
|
||||||
|
const duplicatedItem = item.cloneNode(true);
|
||||||
|
if (scrollerRef.current) {
|
||||||
|
scrollerRef.current.appendChild(duplicatedItem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
getDirection();
|
||||||
|
getSpeed();
|
||||||
|
setStart(true);
|
||||||
|
}
|
||||||
|
}, [getDirection, getSpeed]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
addAnimation();
|
||||||
|
}, [addAnimation]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className={cn("scroller relative z-20 overflow-hidden", className)}
|
||||||
|
>
|
||||||
|
<ul
|
||||||
|
ref={scrollerRef}
|
||||||
|
className={cn(
|
||||||
|
"flex min-w-full shrink-0 gap-16 py-4 w-max flex-nowrap",
|
||||||
|
start && "animate-scroll",
|
||||||
|
pauseOnHover && "hover:[animation-play-state:paused]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{items.map((item, idx) => (
|
||||||
|
<li className="relative flex-shrink-0" key={idx}>
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
18
src/components/ui/CountUpNumber.tsx
Normal file
18
src/components/ui/CountUpNumber.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import CountUp from 'react-countup'
|
||||||
|
import { SectionHeader } from '@/components/Texts'
|
||||||
|
|
||||||
|
interface CountUpNumberProps {
|
||||||
|
end: number
|
||||||
|
className?: string
|
||||||
|
color?: 'light' | 'primary' | 'secondary' | 'white'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
|
||||||
|
return (
|
||||||
|
<SectionHeader color={color} className={className}>
|
||||||
|
<CountUp end={end} duration={2.75} separator="," />
|
||||||
|
</SectionHeader>
|
||||||
|
)
|
||||||
|
}
|
||||||
131
src/components/ui/Cube.tsx
Normal file
131
src/components/ui/Cube.tsx
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface CubeProps {
|
||||||
|
title: string;
|
||||||
|
descriptionTitle: string;
|
||||||
|
description: string;
|
||||||
|
isActive: boolean;
|
||||||
|
index: number;
|
||||||
|
onHover: () => void;
|
||||||
|
onLeave: () => void;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="507"
|
||||||
|
height="234"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 507 234"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill={`url(#cube-gradient-${index})`}
|
||||||
|
d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id={`cube-gradient-${index}`}
|
||||||
|
x1="185.298"
|
||||||
|
x2="185.298"
|
||||||
|
y1="-27.5515"
|
||||||
|
y2="206.448"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop />
|
||||||
|
<stop offset="1" stopColor="#3F3B3E" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export function Cube({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col items-center">
|
||||||
|
<motion.div
|
||||||
|
className="relative cursor-pointer"
|
||||||
|
onMouseEnter={onHover}
|
||||||
|
onMouseLeave={onLeave}
|
||||||
|
onClick={onClick}
|
||||||
|
style={{
|
||||||
|
zIndex: 10 - index,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: isActive ? 1.05 : 1,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* SVG Cube */}
|
||||||
|
<CubeSvg
|
||||||
|
index={index}
|
||||||
|
className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-50"
|
||||||
|
style={{
|
||||||
|
filter: isActive ? 'brightness(1.2) drop-shadow(0 0 20px rgba(156, 163, 175, 0.5))' : 'brightness(0.9)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Title overlay */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<h3
|
||||||
|
className="text-white text-sm lg:text-base font-medium text-center px-4 drop-shadow-lg"
|
||||||
|
style={{
|
||||||
|
transform: 'rotate(0deg) skewX(0deg)',
|
||||||
|
transformOrigin: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description with arrow line - Desktop */}
|
||||||
|
{isActive && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
|
||||||
|
>
|
||||||
|
{/* Arrow line */}
|
||||||
|
<svg
|
||||||
|
className="absolute left-0 top-1/2 -translate-y-1/2"
|
||||||
|
width="120"
|
||||||
|
height="2"
|
||||||
|
viewBox="0 0 120 2"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<line
|
||||||
|
x1="0"
|
||||||
|
y1="1"
|
||||||
|
x2="120"
|
||||||
|
y2="1"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="1"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Description text */}
|
||||||
|
<div className="ml-32 w-80">
|
||||||
|
<h4 className="text-white text-base font-semibold mb-2">
|
||||||
|
{descriptionTitle}
|
||||||
|
</h4>
|
||||||
|
<p className="text-white text-sm leading-relaxed font-light">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Description for Mobile - Below cube */}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
131
src/components/ui/CubeLight.tsx
Normal file
131
src/components/ui/CubeLight.tsx
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface CubeProps {
|
||||||
|
title: string;
|
||||||
|
descriptionTitle: string;
|
||||||
|
description: string;
|
||||||
|
isActive: boolean;
|
||||||
|
index: number;
|
||||||
|
onHover: () => void;
|
||||||
|
onLeave: () => void;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CubeSvg: React.FC<React.SVGProps<SVGSVGElement> & { index: number }> = ({ index, ...props }) => (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="507"
|
||||||
|
height="234"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 507 234"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill={`url(#cube-gradient-${index})`}
|
||||||
|
d="M491.651 144.747L287.198 227.339C265.219 236.22 241.783 236.22 219.802 227.339L15.3486 144.747C-5.11621 136.479 -5.11621 97.5191 15.3486 89.2539L219.802 6.65884C241.783 -2.21961 265.219 -2.21961 287.198 6.65884L491.651 89.2539C512.116 97.5191 512.116 136.479 491.651 144.747Z"
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id={`cube-gradient-${index}`}
|
||||||
|
x1="185.298"
|
||||||
|
x2="185.298"
|
||||||
|
y1="-27.5515"
|
||||||
|
y2="206.448"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stopColor="#E5E7EB" />
|
||||||
|
<stop offset="1" stopColor="#9CA3AF" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export function CubeLight({ title, descriptionTitle, description, isActive, index, onHover, onLeave, onClick }: CubeProps) {
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col items-center">
|
||||||
|
<motion.div
|
||||||
|
className="relative cursor-pointer"
|
||||||
|
onMouseEnter={onHover}
|
||||||
|
onMouseLeave={onLeave}
|
||||||
|
onClick={onClick}
|
||||||
|
style={{
|
||||||
|
zIndex: 10 - index,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: isActive ? 1.05 : 1,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* SVG Cube */}
|
||||||
|
<CubeSvg
|
||||||
|
index={index}
|
||||||
|
className="w-48 sm:w-64 lg:w-80 h-auto drop-shadow-lg opacity-80"
|
||||||
|
style={{
|
||||||
|
filter: isActive ? 'brightness(1.1) drop-shadow(0 0 15px rgba(0, 0, 0, 0.2))' : 'brightness(1)',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Title overlay */}
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<h3
|
||||||
|
className="text-black text-sm lg:text-base font-medium text-center px-4 drop-shadow-sm"
|
||||||
|
style={{
|
||||||
|
transform: 'rotate(0deg) skewX(0deg)',
|
||||||
|
transformOrigin: 'center'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Description with arrow line - Desktop */}
|
||||||
|
{isActive && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="hidden lg:block absolute left-full top-1/2 -translate-y-1/2 z-50"
|
||||||
|
>
|
||||||
|
{/* Arrow line */}
|
||||||
|
<svg
|
||||||
|
className="absolute left-0 top-1/2 -translate-y-1/2"
|
||||||
|
width="120"
|
||||||
|
height="2"
|
||||||
|
viewBox="0 0 120 2"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<line
|
||||||
|
x1="0"
|
||||||
|
y1="1"
|
||||||
|
x2="120"
|
||||||
|
y2="1"
|
||||||
|
stroke="black"
|
||||||
|
strokeWidth="1"
|
||||||
|
opacity="0.6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
{/* Description text */}
|
||||||
|
<div className="ml-32 w-80">
|
||||||
|
<h4 className="text-black text-base font-semibold mb-2">
|
||||||
|
{descriptionTitle}
|
||||||
|
</h4>
|
||||||
|
<p className="text-gray-800 text-sm leading-relaxed font-light">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Description for Mobile - Below cube */}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
28
src/components/ui/FadeIn.tsx
Normal file
28
src/components/ui/FadeIn.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { motion, type Transition } from 'framer-motion'
|
||||||
|
import React from 'react'
|
||||||
|
import { useMediaQuery } from '@/hooks/useMediaQuery'
|
||||||
|
|
||||||
|
type FadeInProps = {
|
||||||
|
children: React.ReactNode
|
||||||
|
transition?: Transition
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FadeIn({ children, transition, className }: FadeInProps) {
|
||||||
|
const isMobile = useMediaQuery('(max-width: 768px)')
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={className}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: false, margin: isMobile ? '0px 0px -50px 0px' : '0px 0px -100px 0px' }}
|
||||||
|
transition={transition || { duration: 0.5 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,47 +1,159 @@
|
|||||||
import { useEffect, useRef } from 'react'
|
"use client";
|
||||||
import createGlobe from 'cobe'
|
|
||||||
|
|
||||||
export function Globe({ className }: { className?: string }) {
|
import createGlobe, { type COBEOptions } from "cobe";
|
||||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
import { useMotionValue, useSpring } from "motion/react";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const MOVEMENT_DAMPING = 1400;
|
||||||
|
|
||||||
|
const GLOBE_CONFIG: COBEOptions = {
|
||||||
|
width: 800,
|
||||||
|
height: 800,
|
||||||
|
onRender: () => {},
|
||||||
|
devicePixelRatio: 2,
|
||||||
|
phi: 0,
|
||||||
|
theta: 0.3,
|
||||||
|
dark: 0,
|
||||||
|
diffuse: 0.25, // softer shading for premium look
|
||||||
|
mapSamples: 16000,
|
||||||
|
mapBrightness: 1.1,
|
||||||
|
baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
|
||||||
|
markerColor: [0.02, 0.71, 0.83], // cyan-500
|
||||||
|
glowColor: [0.8, 0.8, 0.85], // grey
|
||||||
|
|
||||||
|
markers: [
|
||||||
|
// --- Core Global Markers ---
|
||||||
|
{ location: [14.5995, 120.9842], size: 0.03 }, // Manila
|
||||||
|
{ location: [19.076, 72.8777], size: 0.1 }, // Mumbai
|
||||||
|
{ location: [23.8103, 90.4125], size: 0.05 }, // Dhaka
|
||||||
|
{ location: [30.0444, 31.2357], size: 0.07 }, // Cairo
|
||||||
|
{ location: [39.9042, 116.4074], size: 0.08 }, // Beijing
|
||||||
|
{ location: [-23.5505, -46.6333], size: 0.1 }, // São Paulo
|
||||||
|
{ location: [19.4326, -99.1332], size: 0.1 }, // Mexico City
|
||||||
|
{ location: [40.7128, -74.006], size: 0.1 }, // New York
|
||||||
|
{ location: [34.6937, 135.5022], size: 0.05 }, // Osaka
|
||||||
|
{ location: [41.0082, 28.9784], size: 0.06 }, // Istanbul
|
||||||
|
{ location: [48.8566, 2.3522], size: 0.08 }, // Paris
|
||||||
|
{ location: [51.5072, -0.1276], size: 0.08 }, // London
|
||||||
|
{ location: [52.52, 13.405], size: 0.07 }, // Berlin
|
||||||
|
{ location: [35.6895, 139.6917], size: 0.06 }, // Tokyo
|
||||||
|
{ location: [-33.8688, 151.2093], size: 0.06 }, // Sydney
|
||||||
|
{ location: [-1.2921, 36.8219], size: 0.05 }, // Nairobi
|
||||||
|
{ location: [-34.6037, -58.3816], size: 0.07 }, // Buenos Aires
|
||||||
|
{ location: [37.7749, -122.4194], size: 0.08 }, // San Francisco
|
||||||
|
{ location: [1.3521, 103.8198], size: 0.06 }, // Singapore
|
||||||
|
{ location: [28.6139, 77.2090], size: 0.08 }, // New Delhi
|
||||||
|
{ location: [13.7563, 100.5018], size: 0.06 }, // Bangkok
|
||||||
|
{ location: [59.9343, 30.3351], size: 0.05 }, // St. Petersburg
|
||||||
|
{ location: [33.6844, 73.0479], size: 0.05 }, // Islamabad
|
||||||
|
{ location: [25.276987, 55.296249], size: 0.07 }, // Dubai
|
||||||
|
{ location: [60.1699, 24.9384], size: 0.05 }, // Helsinki
|
||||||
|
{ location: [43.6532, -79.3832], size: 0.07 }, // Toronto
|
||||||
|
{ location: [6.5244, 3.3792], size: 0.08 }, // Lagos
|
||||||
|
{ location: [50.1109, 8.6821], size: 0.06 }, // Frankfurt
|
||||||
|
|
||||||
|
// --- 12 New US + European Cities ---
|
||||||
|
{ location: [34.0522, -118.2437], size: 0.08 }, // Los Angeles
|
||||||
|
{ location: [41.8781, -87.6298], size: 0.07 }, // Chicago
|
||||||
|
{ location: [29.7604, -95.3698], size: 0.07 }, // Houston
|
||||||
|
{ location: [25.7617, -80.1918], size: 0.07 }, // Miami
|
||||||
|
{ location: [45.5017, -73.5673], size: 0.06 }, // Montreal
|
||||||
|
{ location: [47.6062, -122.3321], size: 0.06 }, // Seattle
|
||||||
|
{ location: [40.4406, -79.9959], size: 0.05 }, // Pittsburgh
|
||||||
|
{ location: [41.3851, 2.1734], size: 0.06 }, // Barcelona
|
||||||
|
{ location: [45.4642, 9.19], size: 0.06 }, // Milan
|
||||||
|
{ location: [52.3676, 4.9041], size: 0.06 }, // Amsterdam
|
||||||
|
{ location: [38.7169, -9.139], size: 0.05 }, // Lisbon
|
||||||
|
{ location: [59.3293, 18.0686], size: 0.05 }, // Stockholmx
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Globe({
|
||||||
|
className,
|
||||||
|
config = GLOBE_CONFIG,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
config?: COBEOptions;
|
||||||
|
}) {
|
||||||
|
let phi = 0;
|
||||||
|
let width = 0;
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
const pointerInteracting = useRef<number | null>(null);
|
||||||
|
|
||||||
|
const r = useMotionValue(0);
|
||||||
|
const rs = useSpring(r, {
|
||||||
|
mass: 1,
|
||||||
|
damping: 35, // slightly smoother motion
|
||||||
|
stiffness: 100,
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatePointerInteraction = (value: number | null) => {
|
||||||
|
pointerInteracting.current = value;
|
||||||
|
if (canvasRef.current) {
|
||||||
|
canvasRef.current.style.cursor = value !== null ? "grabbing" : "grab";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateMovement = (clientX: number) => {
|
||||||
|
if (pointerInteracting.current !== null) {
|
||||||
|
const delta = clientX - pointerInteracting.current;
|
||||||
|
r.set(r.get() + delta / MOVEMENT_DAMPING);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let phi = 0
|
const onResize = () => {
|
||||||
|
if (canvasRef.current) width = canvasRef.current.offsetWidth;
|
||||||
|
};
|
||||||
|
|
||||||
if (!canvasRef.current) return
|
window.addEventListener("resize", onResize);
|
||||||
|
onResize();
|
||||||
|
|
||||||
const globe = createGlobe(canvasRef.current, {
|
const globe = createGlobe(canvasRef.current!, {
|
||||||
devicePixelRatio: 2,
|
...config,
|
||||||
width: 600 * 2,
|
width: width * 2,
|
||||||
height: 600 * 2,
|
height: width * 2,
|
||||||
phi: 0,
|
|
||||||
theta: 0,
|
|
||||||
dark: 0,
|
|
||||||
diffuse: 1.2,
|
|
||||||
mapSamples: 16000,
|
|
||||||
mapBrightness: 6,
|
|
||||||
baseColor: [0.3, 0.3, 0.3],
|
|
||||||
markerColor: [0.1, 0.8, 1],
|
|
||||||
glowColor: [1, 1, 1],
|
|
||||||
markers: [
|
|
||||||
{ location: [37.7595, -122.4367], size: 0.03 },
|
|
||||||
{ location: [40.7128, -74.006], size: 0.1 },
|
|
||||||
],
|
|
||||||
onRender: (state) => {
|
onRender: (state) => {
|
||||||
state.phi = phi
|
if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
|
||||||
phi += 0.01
|
state.phi = phi + rs.get();
|
||||||
|
state.width = width * 2;
|
||||||
|
state.height = width * 2;
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
|
setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
|
||||||
return () => {
|
return () => {
|
||||||
globe.destroy()
|
globe.destroy();
|
||||||
}
|
window.removeEventListener("resize", onResize);
|
||||||
}, [])
|
};
|
||||||
|
}, [rs, config]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
// Radial gradient background that fades to pure black at edges
|
||||||
|
"absolute inset-0 mx-auto aspect-[1/1] w-full max-w-[600px] rounded-full",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
<canvas
|
<canvas
|
||||||
|
className={cn(
|
||||||
|
"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
|
||||||
|
)}
|
||||||
ref={canvasRef}
|
ref={canvasRef}
|
||||||
className={className}
|
onPointerDown={(e) => {
|
||||||
style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
|
pointerInteracting.current = e.clientX;
|
||||||
/>
|
updatePointerInteraction(e.clientX);
|
||||||
)
|
}}
|
||||||
|
onPointerUp={() => updatePointerInteraction(null)}
|
||||||
|
onPointerOut={() => updatePointerInteraction(null)}
|
||||||
|
onMouseMove={(e) => updateMovement(e.clientX)}
|
||||||
|
onTouchMove={(e) =>
|
||||||
|
e.touches[0] && updateMovement(e.touches[0].clientX)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
47
src/components/ui/Globe2.tsx
Normal file
47
src/components/ui/Globe2.tsx
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
import createGlobe from 'cobe'
|
||||||
|
|
||||||
|
export function Globe({ className }: { className?: string }) {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let phi = 0
|
||||||
|
|
||||||
|
if (!canvasRef.current) return
|
||||||
|
|
||||||
|
const globe = createGlobe(canvasRef.current, {
|
||||||
|
devicePixelRatio: 2,
|
||||||
|
width: 600 * 2,
|
||||||
|
height: 600 * 2,
|
||||||
|
phi: 0,
|
||||||
|
theta: 0,
|
||||||
|
dark: 0,
|
||||||
|
diffuse: 1.2,
|
||||||
|
mapSamples: 16000,
|
||||||
|
mapBrightness: 6,
|
||||||
|
baseColor: [0.3, 0.3, 0.3],
|
||||||
|
markerColor: [0.1, 0.8, 1],
|
||||||
|
glowColor: [1, 1, 1],
|
||||||
|
markers: [
|
||||||
|
{ location: [37.7595, -122.4367], size: 0.03 },
|
||||||
|
{ location: [40.7128, -74.006], size: 0.1 },
|
||||||
|
],
|
||||||
|
onRender: (state) => {
|
||||||
|
state.phi = phi
|
||||||
|
phi += 0.01
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
globe.destroy()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className={className}
|
||||||
|
style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
81
src/components/ui/HalfGlobe.tsx
Normal file
81
src/components/ui/HalfGlobe.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as THREE from "three";
|
||||||
|
import { Canvas, useFrame } from "@react-three/fiber";
|
||||||
|
import { OrbitControls, useTexture } from "@react-three/drei";
|
||||||
|
import { useRef } from "react";
|
||||||
|
|
||||||
|
function Globe() {
|
||||||
|
const groupRef = useRef<THREE.Group>(null);
|
||||||
|
const cloudTexture = useTexture("/images/cloud1.png");
|
||||||
|
|
||||||
|
// Rotate the globe slowly
|
||||||
|
useFrame(() => {
|
||||||
|
if (groupRef.current) {
|
||||||
|
groupRef.current.rotation.y += 0.002;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Coordinates for markers (half-globe)
|
||||||
|
const points = [
|
||||||
|
[0, 1, 0],
|
||||||
|
[0.7, 0.5, 0.2],
|
||||||
|
[-0.5, 0.4, 0.5],
|
||||||
|
[0.4, 0.3, -0.7],
|
||||||
|
[-0.6, -0.1, 0.3],
|
||||||
|
[0.3, -0.2, 0.8],
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group ref={groupRef}>
|
||||||
|
{/* Cyan arcs */}
|
||||||
|
{Array.from({ length: 8 }).map((_, i) => {
|
||||||
|
const radius = 2.5;
|
||||||
|
const curve = new THREE.EllipseCurve(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
radius,
|
||||||
|
radius / 2,
|
||||||
|
0,
|
||||||
|
Math.PI,
|
||||||
|
false,
|
||||||
|
0
|
||||||
|
);
|
||||||
|
const points = curve.getPoints(100);
|
||||||
|
const geometry = new THREE.BufferGeometry().setFromPoints(
|
||||||
|
points.map((p) => new THREE.Vector3(p.x, Math.sin(p.x / radius) * 0.5, p.y))
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<line key={i} geometry={geometry}>
|
||||||
|
<lineBasicMaterial color="#00e5ff" linewidth={1} transparent opacity={0.5} />
|
||||||
|
</line>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Cloud markers */}
|
||||||
|
{points.map(([x, y, z], i) => (
|
||||||
|
<mesh key={i} position={[x * 2.5, y * 2.5, z * 2.5]}>
|
||||||
|
<planeGeometry args={[0.3, 0.3]} />
|
||||||
|
<meshBasicMaterial
|
||||||
|
map={cloudTexture}
|
||||||
|
transparent
|
||||||
|
opacity={1}
|
||||||
|
side={THREE.DoubleSide}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
))}
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HalfGlobe() {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-[500px] bg-white flex items-center justify-center">
|
||||||
|
<Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
|
||||||
|
<ambientLight intensity={0.8} />
|
||||||
|
<Globe />
|
||||||
|
<OrbitControls enableZoom={false} enablePan={false} />
|
||||||
|
</Canvas>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
22
src/components/ui/ScrollDown.tsx
Normal file
22
src/components/ui/ScrollDown.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
|
||||||
|
import { useScroll } from '@/hooks/useScroll'
|
||||||
|
|
||||||
|
export function ScrollDown() {
|
||||||
|
const { isAtBottom, scrollToNext } = useScroll()
|
||||||
|
|
||||||
|
if (isAtBottom) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={scrollToNext}
|
||||||
|
className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-black/20 p-2 text-2xl font-medium text-white backdrop-blur-sm lg:text-3xl animate-blink"
|
||||||
|
>
|
||||||
|
<span>scroll</span>
|
||||||
|
<ChevronDoubleDownIcon className="h-6 w-6" />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
22
src/components/ui/ScrollUp.tsx
Normal file
22
src/components/ui/ScrollUp.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { ChevronDoubleUpIcon } from '@heroicons/react/24/outline'
|
||||||
|
import { useScroll } from '@/hooks/useScroll'
|
||||||
|
|
||||||
|
export function ScrollUp() {
|
||||||
|
const { isAtBottom, scrollToTop } = useScroll()
|
||||||
|
|
||||||
|
if (!isAtBottom) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={scrollToTop}
|
||||||
|
className="fixed bottom-8 right-8 z-50 flex items-center gap-x-2 rounded-full bg-white/20 p-2 text-2xl font-medium text-[#1c1c49] backdrop-blur-sm lg:text-3xl animate-blink"
|
||||||
|
>
|
||||||
|
<span>top</span>
|
||||||
|
<ChevronDoubleUpIcon className="h-6 w-6" />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
95
src/components/ui/StackedCubes.tsx
Normal file
95
src/components/ui/StackedCubes.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Cube } from "@/components/ui/Cube"
|
||||||
|
|
||||||
|
const stackData = [
|
||||||
|
{
|
||||||
|
id: "agent",
|
||||||
|
title: "Agent Layer",
|
||||||
|
descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
|
||||||
|
description:
|
||||||
|
"Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "network",
|
||||||
|
title: "Network Layer",
|
||||||
|
descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
|
||||||
|
description:
|
||||||
|
"Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cloud",
|
||||||
|
title: "Cloud Layer",
|
||||||
|
descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
|
||||||
|
description:
|
||||||
|
"Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
|
||||||
|
position: "bottom",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function StackedCubes() {
|
||||||
|
const [active, setActive] = useState<string | null>("agent");
|
||||||
|
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
|
||||||
|
|
||||||
|
const handleCubeClick = (id: string) => {
|
||||||
|
setSelectedForMobile(prev => (prev === id ? null : id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div
|
||||||
|
className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
|
||||||
|
onMouseLeave={() => setActive("agent")}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
|
||||||
|
animate={{ y: ["-8px", "8px"] }}
|
||||||
|
transition={{
|
||||||
|
duration: 4,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatType: "reverse",
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{stackData.map((layer, index) => (
|
||||||
|
<div
|
||||||
|
key={layer.id}
|
||||||
|
className="absolute"
|
||||||
|
style={{
|
||||||
|
top: `calc(${index * 30}% - ${index * 10}px)`,
|
||||||
|
zIndex: active === layer.id ? 20 : 10 - index,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Cube
|
||||||
|
title={layer.title}
|
||||||
|
descriptionTitle={layer.descriptionTitle}
|
||||||
|
description={layer.description}
|
||||||
|
isActive={active === layer.id}
|
||||||
|
index={index}
|
||||||
|
onHover={() => setActive(layer.id)}
|
||||||
|
onLeave={() => {}}
|
||||||
|
onClick={() => handleCubeClick(layer.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
{selectedMobileLayer && (
|
||||||
|
<div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-800/50 rounded-lg">
|
||||||
|
<h4 className="text-white text-lg font-semibold mb-2 text-center">
|
||||||
|
{selectedMobileLayer.descriptionTitle}
|
||||||
|
</h4>
|
||||||
|
<p className="text-gray-300 text-sm leading-relaxed text-center">
|
||||||
|
{selectedMobileLayer.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
95
src/components/ui/StackedCubesLight.tsx
Normal file
95
src/components/ui/StackedCubesLight.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { CubeLight } from "@/components/ui/CubeLight"
|
||||||
|
|
||||||
|
const stackData = [
|
||||||
|
{
|
||||||
|
id: "agent",
|
||||||
|
title: "Agent Layer",
|
||||||
|
descriptionTitle: "Your sovereign agent with private memory and permissioned data access—always under your control.",
|
||||||
|
description:
|
||||||
|
"Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.\nIt coordinates across people, apps, and other agents to plan, create, and execute.\nIt operates inside a compliant legal & financial sandbox, ready for real-world transactions and operations.\nMore than just an assistant—an intelligent partner that learns and does your way.",
|
||||||
|
position: "top",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "network",
|
||||||
|
title: "Network Layer",
|
||||||
|
descriptionTitle: "A global, end-to-end encrypted overlay that simply doesn’t break.",
|
||||||
|
description:
|
||||||
|
"Shortest-path routing moves your traffic the fastest way, every time.\nInstant discovery with integrated DNS, semantic search, and indexing.\nA distributed CDN and edge delivery keep content available and tamper-resistant worldwide.\nBuilt-in tool services and secure coding sandboxes—seamless on phones, desktops, and edge.",
|
||||||
|
position: "middle",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cloud",
|
||||||
|
title: "Cloud Layer",
|
||||||
|
descriptionTitle: "An autonomous, stateless OS that enforces pre-deterministic deployments you define.",
|
||||||
|
description:
|
||||||
|
"Workloads are cryptographically bound to your private key—location and access are yours.\nNo cloud vendor or middleman in the path: end-to-end ownership and isolation by default.\nGeo-aware placement delivers locality, compliance, and ultra-low latency where it matters.\nEncrypted, erasure-coded storage, decentralized compute and GPU on demand—including LLMs.",
|
||||||
|
position: "bottom",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function StackedCubesLight() {
|
||||||
|
const [active, setActive] = useState<string | null>("agent");
|
||||||
|
const [selectedForMobile, setSelectedForMobile] = useState<string | null>("agent");
|
||||||
|
|
||||||
|
const handleCubeClick = (id: string) => {
|
||||||
|
setSelectedForMobile(prev => (prev === id ? null : id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectedMobileLayer = stackData.find(layer => layer.id === selectedForMobile);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div
|
||||||
|
className="relative w-full flex items-center justify-center lg:justify-center min-h-[450px] lg:min-h-[400px]"
|
||||||
|
onMouseLeave={() => setActive("agent")}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="relative lg:pl-0 pl-6 h-[300px] lg:h-[400px] w-64 sm:w-80 lg:w-96 scale-120 lg:scale-100"
|
||||||
|
animate={{ y: ["-8px", "8px"] }}
|
||||||
|
transition={{
|
||||||
|
duration: 4,
|
||||||
|
repeat: Infinity,
|
||||||
|
repeatType: "reverse",
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{stackData.map((layer, index) => (
|
||||||
|
<div
|
||||||
|
key={layer.id}
|
||||||
|
className="absolute"
|
||||||
|
style={{
|
||||||
|
top: `calc(${index * 30}% - ${index * 10}px)`,
|
||||||
|
zIndex: active === layer.id ? 20 : 10 - index,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CubeLight
|
||||||
|
title={layer.title}
|
||||||
|
descriptionTitle={layer.descriptionTitle}
|
||||||
|
description={layer.description}
|
||||||
|
isActive={active === layer.id}
|
||||||
|
index={index}
|
||||||
|
onHover={() => setActive(layer.id)}
|
||||||
|
onLeave={() => {}}
|
||||||
|
onClick={() => handleCubeClick(layer.id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
{selectedMobileLayer && (
|
||||||
|
<div className="lg:hidden w-full max-w-md p-6 -mt-8 bg-gray-200/50 rounded-lg">
|
||||||
|
<h4 className="text-black text-lg font-semibold mb-2 text-center">
|
||||||
|
{selectedMobileLayer.descriptionTitle}
|
||||||
|
</h4>
|
||||||
|
<p className="text-gray-700 text-sm leading-relaxed text-center">
|
||||||
|
{selectedMobileLayer.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
64
src/components/ui/aurora-background.tsx
Normal file
64
src/components/ui/aurora-background.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
"use client";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import React, { ReactNode } from "react";
|
||||||
|
|
||||||
|
interface AuroraBackgroundProps extends React.HTMLProps<HTMLDivElement> {
|
||||||
|
children: ReactNode;
|
||||||
|
showRadialGradient?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AuroraBackground = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
showRadialGradient = true,
|
||||||
|
...props
|
||||||
|
}: AuroraBackgroundProps) => {
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"transition-bg relative flex h-[110vh] flex-col items-center justify-center bg-cover bg-center",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url('/images/mchip.webp')",
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 overflow-hidden"
|
||||||
|
style={
|
||||||
|
{
|
||||||
|
"--aurora":
|
||||||
|
"repeating-linear-gradient(100deg,#3b82f6_10%,#a5b4fc_15%,#93c5fd_20%,#ddd6fe_25%,#60a5fa_30%)",
|
||||||
|
"--dark-gradient":
|
||||||
|
"repeating-linear-gradient(100deg,#000_0%,#000_7%,transparent_10%,transparent_12%,#000_16%)",
|
||||||
|
"--white-gradient":
|
||||||
|
"repeating-linear-gradient(100deg,#fff_0%,#fff_7%,transparent_10%,transparent_12%,#fff_16%)",
|
||||||
|
|
||||||
|
"--blue-300": "#93c5fd",
|
||||||
|
"--blue-400": "#60a5fa",
|
||||||
|
"--blue-500": "#3b82f6",
|
||||||
|
"--indigo-300": "#a5b4fc",
|
||||||
|
"--violet-200": "#ddd6fe",
|
||||||
|
"--black": "#000",
|
||||||
|
"--white": "#fff",
|
||||||
|
"--transparent": "transparent",
|
||||||
|
} as React.CSSProperties
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
// I'm sorry but this is what peak developer performance looks like // trigger warning
|
||||||
|
className={cn(
|
||||||
|
`after:animate-aurora pointer-events-none absolute -inset-[10px] [background-image:var(--white-gradient),var(--aurora)] [background-size:300%,_200%] [background-position:50%_50%,50%_50%] opacity-50 blur-[10px] invert filter will-change-transform [--aurora:repeating-linear-gradient(100deg,var(--blue-500)_10%,var(--indigo-300)_15%,var(--blue-300)_20%,var(--violet-200)_25%,var(--blue-400)_30%)] [--dark-gradient:repeating-linear-gradient(100deg,var(--black)_0%,var(--black)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--black)_16%)] [--white-gradient:repeating-linear-gradient(100deg,var(--white)_0%,var(--white)_7%,var(--transparent)_10%,var(--transparent)_12%,var(--white)_16%)] after:absolute after:inset-0 after:[background-image:var(--white-gradient),var(--aurora)] after:[background-size:200%,_100%] after:[background-attachment:fixed] after:mix-blend-difference after:content-[""] dark:[background-image:var(--dark-gradient),var(--aurora)] dark:invert-0 after:dark:[background-image:var(--dark-gradient),var(--aurora)]`,
|
||||||
|
|
||||||
|
showRadialGradient &&
|
||||||
|
`[mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,var(--transparent)_70%)]`,
|
||||||
|
)}
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
76
src/components/ui/bento-grid.tsx
Normal file
76
src/components/ui/bento-grid.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { CT, CP } from "@/components/Texts";
|
||||||
|
import React from 'react';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
|
export const BentoGrid = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface BentoGridItemProps {
|
||||||
|
className?: string;
|
||||||
|
title?: string | React.ReactNode;
|
||||||
|
subtitle?: string | React.ReactNode;
|
||||||
|
description?: string | React.ReactNode;
|
||||||
|
img?: string;
|
||||||
|
video?: string;
|
||||||
|
rowHeight?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
|
||||||
|
({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
|
||||||
|
rowHeight ? rowHeight : "h-full",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="relative w-full h-[65%] min-h-[6rem] bg-transparent overflow-hidden">
|
||||||
|
{video ? (
|
||||||
|
<video
|
||||||
|
src={video}
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
|
||||||
|
/>
|
||||||
|
) : img ? (
|
||||||
|
<img
|
||||||
|
src={img}
|
||||||
|
alt={title as string}
|
||||||
|
className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
|
||||||
|
<CT>{title}</CT>
|
||||||
|
<CP className="font-medium">{subtitle}</CP>
|
||||||
|
<CP className="mt-2">{description}</CP>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
BentoGridItem.displayName = "BentoGridItem";
|
||||||
|
|
||||||
|
export const MotionBentoGridItem = motion(BentoGridItem);
|
||||||
308
src/components/ui/dotted-glow-background.tsx
Normal file
308
src/components/ui/dotted-glow-background.tsx
Normal file
@@ -0,0 +1,308 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
type DottedGlowBackgroundProps = {
|
||||||
|
className?: string;
|
||||||
|
/** distance between dot centers in pixels */
|
||||||
|
gap?: number;
|
||||||
|
/** base radius of each dot in CSS px */
|
||||||
|
radius?: number;
|
||||||
|
/** dot color (will pulse by alpha) */
|
||||||
|
color?: string;
|
||||||
|
/** optional dot color for dark mode */
|
||||||
|
darkColor?: string;
|
||||||
|
/** shadow/glow color for bright dots */
|
||||||
|
glowColor?: string;
|
||||||
|
/** optional glow color for dark mode */
|
||||||
|
darkGlowColor?: string;
|
||||||
|
/** optional CSS variable name for light dot color (e.g. --color-zinc-900) */
|
||||||
|
colorLightVar?: string;
|
||||||
|
/** optional CSS variable name for dark dot color (e.g. --color-zinc-100) */
|
||||||
|
colorDarkVar?: string;
|
||||||
|
/** optional CSS variable name for light glow color */
|
||||||
|
glowColorLightVar?: string;
|
||||||
|
/** optional CSS variable name for dark glow color */
|
||||||
|
glowColorDarkVar?: string;
|
||||||
|
/** global opacity for the whole layer */
|
||||||
|
opacity?: number;
|
||||||
|
/** background radial fade opacity (0 = transparent background) */
|
||||||
|
backgroundOpacity?: number;
|
||||||
|
/** minimum per-dot speed in rad/s */
|
||||||
|
speedMin?: number;
|
||||||
|
/** maximum per-dot speed in rad/s */
|
||||||
|
speedMax?: number;
|
||||||
|
/** global speed multiplier for all dots */
|
||||||
|
speedScale?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Canvas-based dotted background that randomly glows and dims.
|
||||||
|
* - Uses a stable grid of dots.
|
||||||
|
* - Each dot gets its own phase + speed producing organic shimmering.
|
||||||
|
* - Handles high-DPI and resizes via ResizeObserver.
|
||||||
|
*/
|
||||||
|
export function DottedGlowBackground({
|
||||||
|
className,
|
||||||
|
gap = 12,
|
||||||
|
radius = 2,
|
||||||
|
color = "rgba(0,0,0,0.7)",
|
||||||
|
darkColor,
|
||||||
|
glowColor = "rgba(0, 170, 255, 0.85)",
|
||||||
|
darkGlowColor,
|
||||||
|
colorLightVar,
|
||||||
|
colorDarkVar,
|
||||||
|
glowColorLightVar,
|
||||||
|
glowColorDarkVar,
|
||||||
|
opacity = 0.6,
|
||||||
|
backgroundOpacity = 0,
|
||||||
|
speedMin = 0.4,
|
||||||
|
speedMax = 1.3,
|
||||||
|
speedScale = 1,
|
||||||
|
}: DottedGlowBackgroundProps) {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||||
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const [resolvedColor, setResolvedColor] = useState<string>(color);
|
||||||
|
const [resolvedGlowColor, setResolvedGlowColor] = useState<string>(glowColor);
|
||||||
|
|
||||||
|
// Resolve CSS variable value from the container or root
|
||||||
|
const resolveCssVariable = (
|
||||||
|
el: Element,
|
||||||
|
variableName?: string,
|
||||||
|
): string | null => {
|
||||||
|
if (!variableName) return null;
|
||||||
|
const normalized = variableName.startsWith("--")
|
||||||
|
? variableName
|
||||||
|
: `--${variableName}`;
|
||||||
|
const fromEl = getComputedStyle(el as Element)
|
||||||
|
.getPropertyValue(normalized)
|
||||||
|
.trim();
|
||||||
|
if (fromEl) return fromEl;
|
||||||
|
const root = document.documentElement;
|
||||||
|
const fromRoot = getComputedStyle(root).getPropertyValue(normalized).trim();
|
||||||
|
return fromRoot || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const detectDarkMode = (): boolean => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
if (root.classList.contains("dark")) return true;
|
||||||
|
if (root.classList.contains("light")) return false;
|
||||||
|
return (
|
||||||
|
window.matchMedia &&
|
||||||
|
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Keep resolved colors in sync with theme changes and prop updates
|
||||||
|
useEffect(() => {
|
||||||
|
const container = containerRef.current ?? document.documentElement;
|
||||||
|
|
||||||
|
const compute = () => {
|
||||||
|
const isDark = detectDarkMode();
|
||||||
|
|
||||||
|
let nextColor: string = color;
|
||||||
|
let nextGlow: string = glowColor;
|
||||||
|
|
||||||
|
if (isDark) {
|
||||||
|
const varDot = resolveCssVariable(container, colorDarkVar);
|
||||||
|
const varGlow = resolveCssVariable(container, glowColorDarkVar);
|
||||||
|
nextColor = varDot || darkColor || nextColor;
|
||||||
|
nextGlow = varGlow || darkGlowColor || nextGlow;
|
||||||
|
} else {
|
||||||
|
const varDot = resolveCssVariable(container, colorLightVar);
|
||||||
|
const varGlow = resolveCssVariable(container, glowColorLightVar);
|
||||||
|
nextColor = varDot || nextColor;
|
||||||
|
nextGlow = varGlow || nextGlow;
|
||||||
|
}
|
||||||
|
|
||||||
|
setResolvedColor(nextColor);
|
||||||
|
setResolvedGlowColor(nextGlow);
|
||||||
|
};
|
||||||
|
|
||||||
|
compute();
|
||||||
|
|
||||||
|
const mql = window.matchMedia
|
||||||
|
? window.matchMedia("(prefers-color-scheme: dark)")
|
||||||
|
: null;
|
||||||
|
const handleMql = () => compute();
|
||||||
|
mql?.addEventListener?.("change", handleMql);
|
||||||
|
|
||||||
|
const mo = new MutationObserver(() => compute());
|
||||||
|
mo.observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ["class", "style"],
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
mql?.removeEventListener?.("change", handleMql);
|
||||||
|
mo.disconnect();
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
color,
|
||||||
|
darkColor,
|
||||||
|
glowColor,
|
||||||
|
darkGlowColor,
|
||||||
|
colorLightVar,
|
||||||
|
colorDarkVar,
|
||||||
|
glowColorLightVar,
|
||||||
|
glowColorDarkVar,
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = canvasRef.current;
|
||||||
|
const container = containerRef.current;
|
||||||
|
if (!el || !container) return;
|
||||||
|
|
||||||
|
const ctx = el.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
let raf = 0;
|
||||||
|
let stopped = false;
|
||||||
|
|
||||||
|
const dpr = Math.max(1, window.devicePixelRatio || 1);
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
const { width, height } = container.getBoundingClientRect();
|
||||||
|
el.width = Math.max(1, Math.floor(width * dpr));
|
||||||
|
el.height = Math.max(1, Math.floor(height * dpr));
|
||||||
|
el.style.width = `${Math.floor(width)}px`;
|
||||||
|
el.style.height = `${Math.floor(height)}px`;
|
||||||
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const ro = new ResizeObserver(resize);
|
||||||
|
ro.observe(container);
|
||||||
|
resize();
|
||||||
|
|
||||||
|
// Precompute dot metadata for a medium-sized grid and regenerate on resize
|
||||||
|
let dots: { x: number; y: number; phase: number; speed: number }[] = [];
|
||||||
|
|
||||||
|
const regenDots = () => {
|
||||||
|
dots = [];
|
||||||
|
const { width, height } = container.getBoundingClientRect();
|
||||||
|
const cols = Math.ceil(width / gap) + 2;
|
||||||
|
const rows = Math.ceil(height / gap) + 2;
|
||||||
|
const min = Math.min(speedMin, speedMax);
|
||||||
|
const max = Math.max(speedMin, speedMax);
|
||||||
|
for (let i = -1; i < cols; i++) {
|
||||||
|
for (let j = -1; j < rows; j++) {
|
||||||
|
const x = i * gap + (j % 2 === 0 ? 0 : gap * 0.5); // offset every other row
|
||||||
|
const y = j * gap;
|
||||||
|
// Randomize phase and speed slightly per dot
|
||||||
|
const phase = Math.random() * Math.PI * 2;
|
||||||
|
const span = Math.max(max - min, 0);
|
||||||
|
const speed = min + Math.random() * span; // configurable rad/s
|
||||||
|
dots.push({ x, y, phase, speed });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const regenThrottled = () => {
|
||||||
|
regenDots();
|
||||||
|
};
|
||||||
|
|
||||||
|
regenDots();
|
||||||
|
|
||||||
|
let last = performance.now();
|
||||||
|
|
||||||
|
const draw = (now: number) => {
|
||||||
|
if (stopped) return;
|
||||||
|
const dt = (now - last) / 1000; // seconds
|
||||||
|
last = now;
|
||||||
|
const { width, height } = container.getBoundingClientRect();
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, el.width, el.height);
|
||||||
|
ctx.globalAlpha = opacity;
|
||||||
|
|
||||||
|
// optional subtle background fade for depth (defaults to 0 = transparent)
|
||||||
|
if (backgroundOpacity > 0) {
|
||||||
|
const grad = ctx.createRadialGradient(
|
||||||
|
width * 0.5,
|
||||||
|
height * 0.4,
|
||||||
|
Math.min(width, height) * 0.1,
|
||||||
|
width * 0.5,
|
||||||
|
height * 0.5,
|
||||||
|
Math.max(width, height) * 0.7,
|
||||||
|
);
|
||||||
|
grad.addColorStop(0, "rgba(0,0,0,0)");
|
||||||
|
grad.addColorStop(
|
||||||
|
1,
|
||||||
|
`rgba(0,0,0,${Math.min(Math.max(backgroundOpacity, 0), 1)})`,
|
||||||
|
);
|
||||||
|
ctx.fillStyle = grad as unknown as CanvasGradient;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
}
|
||||||
|
|
||||||
|
// animate dots
|
||||||
|
ctx.save();
|
||||||
|
ctx.fillStyle = resolvedColor;
|
||||||
|
|
||||||
|
const time = (now / 1000) * Math.max(speedScale, 0);
|
||||||
|
for (let i = 0; i < dots.length; i++) {
|
||||||
|
const d = dots[i];
|
||||||
|
// Linear triangle wave 0..1..0 for linear glow/dim
|
||||||
|
const mod = (time * d.speed + d.phase) % 2;
|
||||||
|
const lin = mod < 1 ? mod : 2 - mod; // 0..1..0
|
||||||
|
const a = 0.25 + 0.55 * lin; // 0.25..0.8 linearly
|
||||||
|
|
||||||
|
// draw glow when bright
|
||||||
|
if (a > 0.6) {
|
||||||
|
const glow = (a - 0.6) / 0.4; // 0..1
|
||||||
|
ctx.shadowColor = resolvedGlowColor;
|
||||||
|
ctx.shadowBlur = 6 * glow;
|
||||||
|
} else {
|
||||||
|
ctx.shadowColor = "transparent";
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.globalAlpha = a * opacity;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(d.x, d.y, radius, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
raf = requestAnimationFrame(draw);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
resize();
|
||||||
|
regenThrottled();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
raf = requestAnimationFrame(draw);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
stopped = true;
|
||||||
|
cancelAnimationFrame(raf);
|
||||||
|
window.removeEventListener("resize", handleResize);
|
||||||
|
ro.disconnect();
|
||||||
|
};
|
||||||
|
}, [
|
||||||
|
gap,
|
||||||
|
radius,
|
||||||
|
resolvedColor,
|
||||||
|
resolvedGlowColor,
|
||||||
|
opacity,
|
||||||
|
backgroundOpacity,
|
||||||
|
speedMin,
|
||||||
|
speedMax,
|
||||||
|
speedScale,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className={className}
|
||||||
|
style={{ position: "absolute", inset: 0 }}
|
||||||
|
>
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{ display: "block", width: "100%", height: "100%" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DottedGlowBackground;
|
||||||
106
src/components/ui/evervault-card.tsx
Normal file
106
src/components/ui/evervault-card.tsx
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
"use client";
|
||||||
|
import { useMotionValue } from "motion/react";
|
||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import { useMotionTemplate, motion } from "motion/react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export const EvervaultCard = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
let mouseX = useMotionValue(0);
|
||||||
|
let mouseY = useMotionValue(0);
|
||||||
|
|
||||||
|
const [randomString, setRandomString] = useState("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let str = generateRandomString(1500);
|
||||||
|
setRandomString(str);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function onMouseMove({ currentTarget, clientX, clientY }: any) {
|
||||||
|
let { left, top } = currentTarget.getBoundingClientRect();
|
||||||
|
mouseX.set(clientX - left);
|
||||||
|
mouseY.set(clientY - top);
|
||||||
|
|
||||||
|
const str = generateRandomString(1500);
|
||||||
|
setRandomString(str);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"p-0.5 bg-transparent aspect-square flex items-center justify-center w-full h-full relative",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onMouseMove={onMouseMove}
|
||||||
|
className="group/card rounded-3xl w-full relative overflow-hidden bg-transparent flex items-center justify-center h-full"
|
||||||
|
>
|
||||||
|
<CardPattern
|
||||||
|
mouseX={mouseX}
|
||||||
|
mouseY={mouseY}
|
||||||
|
randomString={randomString}
|
||||||
|
/>
|
||||||
|
<div className="relative z-10 flex items-center justify-center">
|
||||||
|
<div className="relative p-4">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CardPattern({ mouseX, mouseY, randomString }: any) {
|
||||||
|
let maskImage = useMotionTemplate`radial-gradient(250px at ${mouseX}px ${mouseY}px, white, transparent)`;
|
||||||
|
let style = { maskImage, WebkitMaskImage: maskImage };
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pointer-events-none">
|
||||||
|
<div className="absolute inset-0 rounded-2xl [mask-image:linear-gradient(white,transparent)] group-hover/card:opacity-50"></div>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-green-500 to-blue-700 opacity-0 group-hover/card:opacity-100 backdrop-blur-xl transition duration-500"
|
||||||
|
style={style}
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay group-hover/card:opacity-100"
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<p className="absolute inset-x-0 text-xs h-full break-words whitespace-pre-wrap text-white font-mono font-bold transition duration-500">
|
||||||
|
{randomString}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const characters =
|
||||||
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||||
|
export const generateRandomString = (length: number) => {
|
||||||
|
let result = "";
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Icon = ({ className, ...rest }: any) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
className={className}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
90
src/components/ui/floating-navbar.tsx
Normal file
90
src/components/ui/floating-navbar.tsx
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
motion,
|
||||||
|
AnimatePresence,
|
||||||
|
useScroll,
|
||||||
|
useMotionValueEvent,
|
||||||
|
} from "motion/react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
|
||||||
|
|
||||||
|
export const FloatingNav = ({
|
||||||
|
navItems,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
navItems: {
|
||||||
|
name: string;
|
||||||
|
link: string;
|
||||||
|
icon?: JSX.Element;
|
||||||
|
}[];
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
const { scrollYProgress } = useScroll();
|
||||||
|
|
||||||
|
const [visible, setVisible] = useState(true);
|
||||||
|
|
||||||
|
useMotionValueEvent(scrollYProgress, "change", (current) => {
|
||||||
|
if (typeof current === "number") {
|
||||||
|
const previous = scrollYProgress.getPrevious();
|
||||||
|
// Check if previous is a number to avoid errors
|
||||||
|
if (typeof previous === "number" && current > previous) {
|
||||||
|
setVisible(false); // Scrolling down
|
||||||
|
} else {
|
||||||
|
setVisible(true); // Scrolling up or at the top
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
<motion.div
|
||||||
|
initial={{
|
||||||
|
opacity: 1,
|
||||||
|
y: -100,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
y: visible ? 0 : -100,
|
||||||
|
opacity: visible ? 1 : 0,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 0.2,
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-xl dark:bg-black bg-gray-700/50 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-4 pl-8 py-2 items-center justify-center space-x-12",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{navItems.map((navItem, idx: number) => (
|
||||||
|
<Link
|
||||||
|
key={`link=${idx}`}
|
||||||
|
to={navItem.link}
|
||||||
|
className={cn(
|
||||||
|
"relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="block sm:hidden">{navItem.icon}</span>
|
||||||
|
<span className="hidden sm:block text-sm">{navItem.name}</span>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<a
|
||||||
|
href="https://threefold.info/mycelium_network/docs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={cn(
|
||||||
|
"relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-200 dark:hover:text-neutral-300 hover:text-cyan-500"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span className="hidden sm:block text-sm">Docs</span>
|
||||||
|
</a>
|
||||||
|
<Button to="/download" variant="solid" color="cyan">
|
||||||
|
Get Mycelium
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
158
src/components/ui/glowing-stars.tsx
Normal file
158
src/components/ui/glowing-stars.tsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
|
import { AnimatePresence, motion } from "motion/react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export const GlowingStarsBackgroundCard = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
const [mouseEnter, setMouseEnter] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setMouseEnter(true);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
setMouseEnter(false);
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"bg-[linear-gradient(110deg,#333_0.6%,#222)] p-4 max-w-md max-h-[20rem] h-full w-full rounded-xl border border-[#eaeaea] dark:border-neutral-600",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex justify-center items-center">
|
||||||
|
<Illustration mouseEnter={mouseEnter} />
|
||||||
|
</div>
|
||||||
|
<div className="px-2 pb-6">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GlowingStarsDescription = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<p className={cn("text-base text-white max-w-[16rem]", className)}>
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GlowingStarsTitle = ({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<h2 className={cn("font-bold text-2xl text-[#eaeaea]", className)}>
|
||||||
|
{children}
|
||||||
|
</h2>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Illustration = ({ mouseEnter }: { mouseEnter: boolean }) => {
|
||||||
|
const stars = 108;
|
||||||
|
const columns = 18;
|
||||||
|
|
||||||
|
const [glowingStars, setGlowingStars] = useState<number[]>([]);
|
||||||
|
|
||||||
|
const highlightedStars = useRef<number[]>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
highlightedStars.current = Array.from({ length: 5 }, () =>
|
||||||
|
Math.floor(Math.random() * stars)
|
||||||
|
);
|
||||||
|
setGlowingStars([...highlightedStars.current]);
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="h-48 p-1 w-full"
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
||||||
|
gap: `1px`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[...Array(stars)].map((_, starIdx) => {
|
||||||
|
const isGlowing = glowingStars.includes(starIdx);
|
||||||
|
const delay = (starIdx % 10) * 0.1;
|
||||||
|
const staticDelay = starIdx * 0.01;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`matrix-col-${starIdx}}`}
|
||||||
|
className="relative flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
isGlowing={mouseEnter ? true : isGlowing}
|
||||||
|
delay={mouseEnter ? staticDelay : delay}
|
||||||
|
/>
|
||||||
|
{mouseEnter && <Glow delay={staticDelay} />}
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{isGlowing && <Glow delay={delay} />}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Star = ({ isGlowing, delay }: { isGlowing: boolean; delay: number }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={delay}
|
||||||
|
initial={{
|
||||||
|
scale: 1,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
scale: isGlowing ? [1, 1.2, 2.5, 2.2, 1.5] : 1,
|
||||||
|
background: isGlowing ? "#fff" : "#666",
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2,
|
||||||
|
ease: "easeInOut",
|
||||||
|
delay: delay,
|
||||||
|
}}
|
||||||
|
className={cn("bg-[#666] h-[1px] w-[1px] rounded-full relative z-20")}
|
||||||
|
></motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Glow = ({ delay }: { delay: number }) => {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
opacity: 1,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 2,
|
||||||
|
ease: "easeInOut",
|
||||||
|
delay: delay,
|
||||||
|
}}
|
||||||
|
exit={{
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
className="absolute left-1/2 -translate-x-1/2 z-10 h-[4px] w-[4px] rounded-full bg-blue-500 blur-[1px] shadow-2xl shadow-blue-400"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
104
src/components/ui/lamp.tsx
Normal file
104
src/components/ui/lamp.tsx
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export default function LampDemo() {
|
||||||
|
return (
|
||||||
|
<LampContainer>
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0.5, y: 100 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.3,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="mt-8 bg-gradient-to-br from-gray-300 to-gray-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
|
||||||
|
>
|
||||||
|
Build lamps <br /> the right way
|
||||||
|
</motion.h1>
|
||||||
|
</LampContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LampContainer = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"relative flex h-screen flex-col items-center justify-start pt-32 overflow-hidden bg-gray-950 w-full z-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0.5, width: "15rem" }}
|
||||||
|
whileInView={{ opacity: 1, width: "30rem" }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.5,
|
||||||
|
duration: 1.0,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
|
||||||
|
}}
|
||||||
|
className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
|
||||||
|
>
|
||||||
|
<div className="absolute w-[100%] left-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
|
||||||
|
<div className="absolute w-40 h-[100%] left-0 bg-gray-950 bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0.5, width: "15rem" }}
|
||||||
|
whileInView={{ opacity: 1, width: "30rem" }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.3,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
|
||||||
|
}}
|
||||||
|
className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
|
||||||
|
>
|
||||||
|
<div className="absolute w-40 h-[100%] right-0 bg-gray-950 bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
|
||||||
|
<div className="absolute w-[100%] right-0 bg-gray-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
|
||||||
|
</motion.div>
|
||||||
|
<div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-gray-950 blur-2xl"></div>
|
||||||
|
<div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
|
||||||
|
<div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ width: "8rem" }}
|
||||||
|
whileInView={{ width: "16rem" }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.3,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
|
||||||
|
></motion.div>
|
||||||
|
<motion.div
|
||||||
|
initial={{ width: "15rem" }}
|
||||||
|
whileInView={{ width: "30rem" }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.3,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
|
||||||
|
></motion.div>
|
||||||
|
|
||||||
|
<div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-gray-950 "></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative z-50 flex -translate-y-32 flex-col items-center px-5">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
58
src/components/ui/layout-text-flip.tsx
Normal file
58
src/components/ui/layout-text-flip.tsx
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
"use client";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export const LayoutTextFlip = ({
|
||||||
|
text = "Build Amazing",
|
||||||
|
words = ["Landing Pages", "Component Blocks", "Page Sections", "3D Shaders"],
|
||||||
|
duration = 1500,
|
||||||
|
}: {
|
||||||
|
text: string;
|
||||||
|
words: string[];
|
||||||
|
duration?: number;
|
||||||
|
}) => {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
|
||||||
|
}, duration);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<motion.span
|
||||||
|
layoutId="subtext"
|
||||||
|
className="text-2xl font-bold tracking-tight drop-shadow-lg md:text-4xl"
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</motion.span>
|
||||||
|
|
||||||
|
<motion.span
|
||||||
|
layout
|
||||||
|
className="relative w-fit overflow-hidden px-2 py-2 font-medium italic tracking-tight"
|
||||||
|
>
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
<motion.span
|
||||||
|
key={currentIndex}
|
||||||
|
initial={{ y: -40, filter: "blur(10px)" }}
|
||||||
|
animate={{
|
||||||
|
y: 0,
|
||||||
|
filter: "blur(0px)",
|
||||||
|
}}
|
||||||
|
exit={{ y: 50, filter: "blur(10px)", opacity: 0 }}
|
||||||
|
transition={{
|
||||||
|
duration: 0.5,
|
||||||
|
}}
|
||||||
|
className={cn("inline-block whitespace-nowrap")}
|
||||||
|
>
|
||||||
|
{words[currentIndex]}
|
||||||
|
</motion.span>
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.span>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
119
src/components/ui/pointer-highlight.tsx
Normal file
119
src/components/ui/pointer-highlight.tsx
Normal file
@@ -0,0 +1,119 @@
|
|||||||
|
"use client";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { useRef, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export function PointerHighlight({
|
||||||
|
children,
|
||||||
|
rectangleClassName,
|
||||||
|
pointerClassName,
|
||||||
|
containerClassName,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
rectangleClassName?: string;
|
||||||
|
pointerClassName?: string;
|
||||||
|
containerClassName?: string;
|
||||||
|
}) {
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
const { width, height } = containerRef.current.getBoundingClientRect();
|
||||||
|
setDimensions({ width, height });
|
||||||
|
}
|
||||||
|
|
||||||
|
const resizeObserver = new ResizeObserver((entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
const { width, height } = entry.contentRect;
|
||||||
|
setDimensions({ width, height });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (containerRef.current) {
|
||||||
|
resizeObserver.observe(containerRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (containerRef.current) {
|
||||||
|
resizeObserver.unobserve(containerRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("relative w-fit", containerClassName)}
|
||||||
|
ref={containerRef}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{dimensions.width > 0 && dimensions.height > 0 && (
|
||||||
|
<motion.div
|
||||||
|
className="pointer-events-none absolute inset-0 z-0"
|
||||||
|
initial={{ opacity: 0, scale: 0.95, originX: 0, originY: 0 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className={cn(
|
||||||
|
"absolute inset-0 border border-neutral-800 dark:border-neutral-200",
|
||||||
|
rectangleClassName,
|
||||||
|
)}
|
||||||
|
initial={{
|
||||||
|
width: 0,
|
||||||
|
height: 0,
|
||||||
|
}}
|
||||||
|
whileInView={{
|
||||||
|
width: dimensions.width,
|
||||||
|
height: dimensions.height,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 1,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="pointer-events-none absolute"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{
|
||||||
|
opacity: 1,
|
||||||
|
x: dimensions.width + 4,
|
||||||
|
y: dimensions.height + 4,
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
rotate: -90,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
opacity: { duration: 0.1, ease: "easeInOut" },
|
||||||
|
duration: 1,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Pointer
|
||||||
|
className={cn("h-5 w-5 text-blue-500", pointerClassName)}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const Pointer = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
stroke="currentColor"
|
||||||
|
fill="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
height="1em"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
166
src/components/ui/world-map.tsx
Normal file
166
src/components/ui/world-map.tsx
Normal file
@@ -0,0 +1,166 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import DottedMap from "dotted-map";
|
||||||
|
|
||||||
|
interface MapProps {
|
||||||
|
dots?: Array<{
|
||||||
|
start: { lat: number; lng: number; label?: string };
|
||||||
|
end: { lat: number; lng: number; label?: string };
|
||||||
|
}>;
|
||||||
|
lineColor?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function WorldMap({
|
||||||
|
dots = [],
|
||||||
|
lineColor = "#06b6d4",
|
||||||
|
}: MapProps) {
|
||||||
|
const svgRef = useRef<SVGSVGElement>(null);
|
||||||
|
const map = new DottedMap({ height: 100, grid: "diagonal" });
|
||||||
|
|
||||||
|
const svgMap = map.getSVG({
|
||||||
|
radius: 0.22,
|
||||||
|
color: "#FFFFFF40", // Hardcoded for dark theme
|
||||||
|
shape: "circle",
|
||||||
|
backgroundColor: "black", // Hardcoded for dark theme
|
||||||
|
});
|
||||||
|
|
||||||
|
const projectPoint = (lat: number, lng: number) => {
|
||||||
|
const x = (lng + 180) * (800 / 360);
|
||||||
|
const y = (90 - lat) * (400 / 180);
|
||||||
|
return { x, y };
|
||||||
|
};
|
||||||
|
|
||||||
|
const createCurvedPath = (
|
||||||
|
start: { x: number; y: number },
|
||||||
|
end: { x: number; y: number }
|
||||||
|
) => {
|
||||||
|
const midX = (start.x + end.x) / 2;
|
||||||
|
const midY = Math.min(start.y, end.y) - 50;
|
||||||
|
return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
|
||||||
|
<img
|
||||||
|
src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
|
||||||
|
className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
|
||||||
|
alt="world map"
|
||||||
|
height="495"
|
||||||
|
width="1056"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
ref={svgRef}
|
||||||
|
viewBox="0 0 800 400"
|
||||||
|
className="w-full h-full absolute inset-0 pointer-events-none select-none"
|
||||||
|
>
|
||||||
|
{dots.map((dot, i) => {
|
||||||
|
const startPoint = projectPoint(dot.start.lat, dot.start.lng);
|
||||||
|
const endPoint = projectPoint(dot.end.lat, dot.end.lng);
|
||||||
|
return (
|
||||||
|
<g key={`path-group-${i}`}>
|
||||||
|
<motion.path
|
||||||
|
d={createCurvedPath(startPoint, endPoint)}
|
||||||
|
fill="none"
|
||||||
|
stroke="url(#path-gradient)"
|
||||||
|
strokeWidth="1"
|
||||||
|
initial={{
|
||||||
|
pathLength: 0,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
pathLength: 1,
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 1,
|
||||||
|
delay: 0.5 * i,
|
||||||
|
ease: "easeOut",
|
||||||
|
}}
|
||||||
|
key={`start-upper-${i}`}
|
||||||
|
></motion.path>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
<stop offset="0%" stopColor="white" stopOpacity="0" />
|
||||||
|
<stop offset="5%" stopColor={lineColor} stopOpacity="1" />
|
||||||
|
<stop offset="95%" stopColor={lineColor} stopOpacity="1" />
|
||||||
|
<stop offset="100%" stopColor="white" stopOpacity="0" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
{dots.map((dot, i) => (
|
||||||
|
<g key={`points-group-${i}`}>
|
||||||
|
<g key={`start-${i}`}>
|
||||||
|
<circle
|
||||||
|
cx={projectPoint(dot.start.lat, dot.start.lng).x}
|
||||||
|
cy={projectPoint(dot.start.lat, dot.start.lng).y}
|
||||||
|
r="2"
|
||||||
|
fill={lineColor}
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx={projectPoint(dot.start.lat, dot.start.lng).x}
|
||||||
|
cy={projectPoint(dot.start.lat, dot.start.lng).y}
|
||||||
|
r="2"
|
||||||
|
fill={lineColor}
|
||||||
|
opacity="0.5"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="r"
|
||||||
|
from="2"
|
||||||
|
to="8"
|
||||||
|
dur="1.5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
from="0.5"
|
||||||
|
to="0"
|
||||||
|
dur="1.5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</g>
|
||||||
|
<g key={`end-${i}`}>
|
||||||
|
<circle
|
||||||
|
cx={projectPoint(dot.end.lat, dot.end.lng).x}
|
||||||
|
cy={projectPoint(dot.end.lat, dot.end.lng).y}
|
||||||
|
r="2"
|
||||||
|
fill={lineColor}
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
cx={projectPoint(dot.end.lat, dot.end.lng).x}
|
||||||
|
cy={projectPoint(dot.end.lat, dot.end.lng).y}
|
||||||
|
r="2"
|
||||||
|
fill={lineColor}
|
||||||
|
opacity="0.5"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="r"
|
||||||
|
from="2"
|
||||||
|
to="8"
|
||||||
|
dur="1.5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
<animate
|
||||||
|
attributeName="opacity"
|
||||||
|
from="0.5"
|
||||||
|
to="0"
|
||||||
|
dur="1.5s"
|
||||||
|
begin="0s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
src/hooks/useMediaQuery.ts
Normal file
21
src/hooks/useMediaQuery.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
export function useMediaQuery(query: string) {
|
||||||
|
const [matches, setMatches] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = window.matchMedia(query)
|
||||||
|
if (media.matches !== matches) {
|
||||||
|
setMatches(media.matches)
|
||||||
|
}
|
||||||
|
const listener = () => {
|
||||||
|
setMatches(media.matches)
|
||||||
|
}
|
||||||
|
media.addEventListener('change', listener)
|
||||||
|
return () => media.removeEventListener('change', listener)
|
||||||
|
}, [matches, query])
|
||||||
|
|
||||||
|
return matches
|
||||||
|
}
|
||||||
39
src/hooks/useResponsiveCarousel.ts
Normal file
39
src/hooks/useResponsiveCarousel.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
// 🔧 Carousel Config
|
||||||
|
const desktopConfig = {
|
||||||
|
GAP: 300,
|
||||||
|
ROT_Y: 18,
|
||||||
|
DEPTH: 210,
|
||||||
|
SCALE_DROP: 0.12,
|
||||||
|
};
|
||||||
|
|
||||||
|
const mobileConfig = {
|
||||||
|
GAP: 110, // Smaller gap for mobile
|
||||||
|
ROT_Y: 0, // Flatter view on mobile
|
||||||
|
DEPTH: 150, // Less depth
|
||||||
|
SCALE_DROP: 0.1, // Less aggressive scaling
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useResponsiveCarousel = () => {
|
||||||
|
const [config, setConfig] = useState(desktopConfig);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkScreenSize = () => {
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
setConfig(mobileConfig);
|
||||||
|
} else {
|
||||||
|
setConfig(desktopConfig);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkScreenSize();
|
||||||
|
window.addEventListener('resize', checkScreenSize);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', checkScreenSize);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return config;
|
||||||
|
};
|
||||||
45
src/hooks/useScroll.ts
Normal file
45
src/hooks/useScroll.ts
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react'
|
||||||
|
|
||||||
|
export function useScroll() {
|
||||||
|
const [isAtBottom, setIsAtBottom] = useState(false)
|
||||||
|
|
||||||
|
const handleScroll = useCallback(() => {
|
||||||
|
const footer = document.querySelector('footer')
|
||||||
|
if (footer) {
|
||||||
|
const footerTop = footer.getBoundingClientRect().top
|
||||||
|
setIsAtBottom(footerTop < window.innerHeight)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener('scroll', handleScroll)
|
||||||
|
handleScroll() // Initial check
|
||||||
|
return () => window.removeEventListener('scroll', handleScroll)
|
||||||
|
}, [handleScroll])
|
||||||
|
|
||||||
|
const scrollToNext = () => {
|
||||||
|
const sections = Array.from(
|
||||||
|
document.querySelectorAll('section[id]')
|
||||||
|
) as HTMLElement[]
|
||||||
|
const scrollPosition = window.scrollY + window.innerHeight / 2
|
||||||
|
|
||||||
|
const currentSection = sections.reduce((acc, section) => {
|
||||||
|
return section.offsetTop < scrollPosition ? section : acc
|
||||||
|
}, sections[0])
|
||||||
|
|
||||||
|
const currentIndex = sections.findIndex((sec) => sec.id === currentSection.id)
|
||||||
|
const nextIndex = currentIndex + 1
|
||||||
|
|
||||||
|
if (nextIndex < sections.length) {
|
||||||
|
sections[nextIndex].scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const scrollToTop = () => {
|
||||||
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
|
||||||
|
return { isAtBottom, scrollToNext, scrollToTop }
|
||||||
|
}
|
||||||
BIN
src/images/cloudlayer.png
Normal file
BIN
src/images/cloudlayer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
src/images/kubernetes.png
Normal file
BIN
src/images/kubernetes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1024 KiB |
BIN
src/images/linux copy.png
Normal file
BIN
src/images/linux copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
@@ -214,7 +214,7 @@
|
|||||||
</filter>
|
</filter>
|
||||||
<radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
<radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
gradientTransform="matrix(0 727 -642 0 184 1)">
|
gradientTransform="matrix(0 727 -642 0 184 1)">
|
||||||
<stop stop-color="#FAFAFA" />
|
<stop stop-color="#FFFFFF" />
|
||||||
<stop offset="1" stop-color="#E6E6E6" />
|
<stop offset="1" stop-color="#E6E6E6" />
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
<radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
<radialGradient id="c" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@@ -1,5 +1,8 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Neuton&display=swap');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;700&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
font-family: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
|
|||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||||
import { DeploySection } from './DeploySection'
|
import { DeploySection } from './DeploySection'
|
||||||
import { GallerySection } from './GallerySection'
|
import { GallerySection } from './GallerySection'
|
||||||
|
import { Companies } from './Companies'
|
||||||
import { BentoSection } from './BentoSection'
|
import { BentoSection } from './BentoSection'
|
||||||
|
|
||||||
export default function AgentsPage() {
|
export default function AgentsPage() {
|
||||||
@@ -10,6 +11,11 @@ export default function AgentsPage() {
|
|||||||
<DeploySection />
|
<DeploySection />
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
|
<AnimatedSection>
|
||||||
|
<Companies />
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
|
|
||||||
<AnimatedSection>
|
<AnimatedSection>
|
||||||
<GallerySection />
|
<GallerySection />
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|||||||
@@ -1,42 +1,49 @@
|
|||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
|
import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts'
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
title: 'FungiStor',
|
title: 'FungiStor',
|
||||||
subtitle: 'Long-Term AI Memory',
|
subtitle: 'Long-Term AI Memory',
|
||||||
description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.',
|
description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.',
|
||||||
|
video: '/videos/fungistor.mp4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'HeroDB',
|
title: 'HeroDB',
|
||||||
subtitle: 'Active AI Memory',
|
subtitle: 'Active AI Memory',
|
||||||
description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.',
|
description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.',
|
||||||
|
video: '/videos/herodb.mp4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'MOS Sandboxes',
|
title: 'MOS Sandboxes',
|
||||||
subtitle: 'Secure Agent Workspaces',
|
subtitle: 'Secure Agent Workspaces',
|
||||||
description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
|
description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.',
|
||||||
|
video: '/videos/sandbox.mp4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Mycelium Mesh',
|
title: 'Mycelium Mesh',
|
||||||
subtitle: 'Secure Communication Network',
|
subtitle: 'Secure Communication Network',
|
||||||
description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.',
|
description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.',
|
||||||
|
video: '/videos/mesh.mp4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Deterministic Deployment',
|
title: 'Deterministic Deployment',
|
||||||
subtitle: 'Verifiable Code Execution',
|
subtitle: 'Verifiable Code Execution',
|
||||||
description: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
|
description: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.',
|
||||||
|
video: '/videos/deterministic.mp4',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Agent Coordination',
|
title: 'Agent Coordination',
|
||||||
subtitle: 'Sovereign Workflow Management',
|
subtitle: 'Sovereign Workflow Management',
|
||||||
description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
|
description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.',
|
||||||
|
video: '/videos/agent.mp4',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
export function BentoSection() {
|
export function BentoSection() {
|
||||||
return (
|
return (
|
||||||
<section className="bg-white py-20 lg:py-32">
|
<section className="bg-black py-20 lg:py-32">
|
||||||
<Container>
|
<Container>
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
@@ -45,12 +52,13 @@ export function BentoSection() {
|
|||||||
transition={{ duration: 0.8 }}
|
transition={{ duration: 0.8 }}
|
||||||
className="mx-auto max-w-3xl text-center mb-16"
|
className="mx-auto max-w-3xl text-center mb-16"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
<Eyebrow color="accent">Components</Eyebrow>
|
||||||
|
<SectionHeader color="light">
|
||||||
Augmented Intelligence Fabric
|
Augmented Intelligence Fabric
|
||||||
</h2>
|
</SectionHeader>
|
||||||
<p className="mt-6 text-lg text-gray-600">
|
<P className="mt-6" color="lightSecondary">
|
||||||
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
|
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
|
||||||
</p>
|
</P>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
@@ -61,11 +69,19 @@ export function BentoSection() {
|
|||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||||
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
className="rounded-2xl bg-gray-900 border border-gray-800 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 hover:scale-105 overflow-hidden"
|
||||||
>
|
>
|
||||||
<h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
|
<video
|
||||||
<p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
|
src={item.video}
|
||||||
<p className="mt-3 text-sm text-gray-600">{item.description}</p>
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
className="w-full h-40 object-cover mb-4 rounded-lg"
|
||||||
|
/>
|
||||||
|
<p className="text-sm font-medium text-cyan-500">{item.subtitle}</p>
|
||||||
|
<CT as="h3" className="mt-2" color="light">{item.title}</CT>
|
||||||
|
<CP className="mt-3" color="lightSecondary">{item.description}</CP>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
76
src/pages/agents/Companies.tsx
Normal file
76
src/pages/agents/Companies.tsx
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { P, Eyebrow } from '@/components/Texts';
|
||||||
|
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import Ai21 from '@/components/logos/Ai21';
|
||||||
|
import Claude from '@/components/logos/Claude';
|
||||||
|
import BaiduCloud from '@/components/logos/BaiduCloud';
|
||||||
|
import ByteDance from '@/components/logos/ByteDance';
|
||||||
|
import DeepSeek from '@/components/logos/DeepSeek';
|
||||||
|
import DeepMind from '@/components/logos/DeepMind';
|
||||||
|
import Minimax from '@/components/logos/Minimax';
|
||||||
|
import Mistral from '@/components/logos/Mistral';
|
||||||
|
import Moonshot from '@/components/logos/Moonshot';
|
||||||
|
import TencentCloud from '@/components/logos/TencentCloud';
|
||||||
|
import OpenAI from '@/components/logos/OpenAI';
|
||||||
|
import XAI from '@/components/logos/XAI';
|
||||||
|
|
||||||
|
const logos = [
|
||||||
|
<Ai21 key="ai21" />,
|
||||||
|
<Claude key="claude" />,
|
||||||
|
<BaiduCloud key="baidu" />,
|
||||||
|
<ByteDance key="bytedance" />,
|
||||||
|
<DeepSeek key="deepseek" />,
|
||||||
|
<DeepMind key="deepmind" />,
|
||||||
|
<Minimax key="minimax" />,
|
||||||
|
<Mistral key="mistral" />,
|
||||||
|
<Moonshot key="moonshot" />,
|
||||||
|
<TencentCloud key="tencent" />,
|
||||||
|
<OpenAI key="openai" />,
|
||||||
|
<XAI key="xai" />,
|
||||||
|
];
|
||||||
|
|
||||||
|
const row1 = logos.slice(0, 6);
|
||||||
|
const row2 = logos.slice(6);
|
||||||
|
|
||||||
|
export function Companies() {
|
||||||
|
return (
|
||||||
|
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-4 mb-12">
|
||||||
|
<div className="relative z-10 mx-auto w-full max-w-6xl p-4">
|
||||||
|
|
||||||
|
{/* Heading */}
|
||||||
|
<motion.div
|
||||||
|
className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 1 }}
|
||||||
|
>
|
||||||
|
<Eyebrow color="accent"></Eyebrow>
|
||||||
|
<P className="hidden min-xl:text-gray-100 text-center mb-6">
|
||||||
|
Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
|
||||||
|
</P>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Logos grid */}
|
||||||
|
<div className="flex flex-col items-center gap-y-6 text-white">
|
||||||
|
<InfiniteMovingCards
|
||||||
|
items={row1}
|
||||||
|
direction="right"
|
||||||
|
speed="slow"
|
||||||
|
/>
|
||||||
|
<InfiniteMovingCards
|
||||||
|
className=""
|
||||||
|
items={row2}
|
||||||
|
direction="left"
|
||||||
|
speed="slow"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,7 +1,9 @@
|
|||||||
import { motion, useInView } from 'framer-motion'
|
'use client'
|
||||||
|
|
||||||
import { useRef } from 'react'
|
import { useRef } from 'react'
|
||||||
|
import { motion, useInView } from 'framer-motion'
|
||||||
|
import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
|
||||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
|
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
|
||||||
import { Container } from '../../components/Container'
|
|
||||||
|
|
||||||
const features = [
|
const features = [
|
||||||
{
|
{
|
||||||
@@ -24,30 +26,31 @@ const features = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export function DeploySection() {
|
export function DeploySection() {
|
||||||
const ref = useRef(null)
|
const ref = useRef(null);
|
||||||
const isInView = useInView(ref, { once: true })
|
const isInView = useInView(ref, { once: true });
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section ref={ref} className="bg-white py-20 lg:py-32">
|
<section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12 text-white bg-black">
|
||||||
<Container>
|
<div className="relative px-6 lg:px-12">
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.8, delay: 0.1 }}
|
transition={{ duration: 0.8, delay: 0.1 }}
|
||||||
className="mx-auto max-w-3xl text-center"
|
className="mx-auto max-w-5xl text-center"
|
||||||
>
|
>
|
||||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
<Eyebrow color="accent">Get Started</Eyebrow>
|
||||||
|
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
|
||||||
Deploy Scalable LLMs and AI Agents in Seconds
|
Deploy Scalable LLMs and AI Agents in Seconds
|
||||||
</h2>
|
</SectionHeader>
|
||||||
<p className="mt-6 text-lg text-gray-600">
|
<P className="mt-6" color="light">
|
||||||
Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
|
Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
|
||||||
</p>
|
</P>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
<motion.ul
|
<motion.ul
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
||||||
transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
|
transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
|
||||||
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
|
className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
|
||||||
>
|
>
|
||||||
{features.map((feature, index) => (
|
{features.map((feature, index) => (
|
||||||
<motion.li
|
<motion.li
|
||||||
@@ -55,15 +58,15 @@ export function DeploySection() {
|
|||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||||
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
|
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
|
||||||
className="rounded-2xl border border-gray-200 bg-gray-50 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||||
>
|
>
|
||||||
<feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
|
<feature.icon className="h-8 w-8 mb-4 text-white" />
|
||||||
<h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
|
<CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
|
||||||
<p className="mt-3 text-sm text-gray-600">{feature.description}</p>
|
<CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
|
||||||
</motion.li>
|
</motion.li>
|
||||||
))}
|
))}
|
||||||
</motion.ul>
|
</motion.ul>
|
||||||
</Container>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,58 +1,178 @@
|
|||||||
import { motion } from 'framer-motion'
|
'use client'
|
||||||
import { Container } from '../../components/Container'
|
|
||||||
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { wrap } from 'popmotion'
|
||||||
|
import { Button } from '@/components/Button';
|
||||||
|
import { SectionHeader, P, Eyebrow, CP } from '@/components/Texts';
|
||||||
|
import { TypeAnimation } from 'react-type-animation'
|
||||||
|
import { FadeIn } from '@/components/FadeIn';
|
||||||
|
|
||||||
const galleryItems = [
|
const galleryItems = [
|
||||||
{ text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
|
{ text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg', width: 448, height: 277 },
|
||||||
{ text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
|
{ text: 'Process documents across all formats', image: '/images/gallery/docs.jpg', width: 448, height: 277 },
|
||||||
{ text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
|
{ text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg', width: 448, height: 277 },
|
||||||
{ text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
|
{ text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg', width: 448, height: 277 },
|
||||||
{ text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
|
{ text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg', width: 448, height: 277 },
|
||||||
{ text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg' },
|
{ text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.jpg', width: 448, height: 277 },
|
||||||
|
{ text: 'Provide real-time market intelligence', image: '/images/gallery/market.jpg', width: 448, height: 277 },
|
||||||
|
{ text: 'Generate and debug code in multiple languages', image: '/images/gallery/code.jpg', width: 448, height: 277 },
|
||||||
|
{ text: 'Create consistent branded content', image: '/images/gallery/branding.jpg', width: 448, height: 277 },
|
||||||
|
{ text: 'Translate and localize materials', image: '/images/gallery/translate.jpg', width: 448, height: 277 },
|
||||||
|
{ text: 'Transform and migrate data structures', image: '/images/gallery/structure.jpg', width: 448, height: 277 },
|
||||||
]
|
]
|
||||||
|
|
||||||
export function GallerySection() {
|
// 🔧 Carousel Config
|
||||||
return (
|
const VISIBLE = 4;
|
||||||
<section className="bg-gray-50 py-20 lg:py-32">
|
const AUTOPLAY_MS = 3200;
|
||||||
<Container>
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.8 }}
|
|
||||||
className="mx-auto max-w-3xl text-center mb-16"
|
|
||||||
>
|
|
||||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
|
||||||
Agents with Endless Possibilities.
|
|
||||||
</h2>
|
|
||||||
<p className="mt-6 text-lg text-gray-600">
|
|
||||||
Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results. Many agents, one intelligence—yours.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
export function GallerySection() {
|
||||||
{galleryItems.map((item, index) => (
|
const [active, setActive] = useState(0);
|
||||||
<motion.div
|
const [hovering, setHovering] = useState(false);
|
||||||
key={index}
|
const { GAP, ROT_Y, DEPTH, SCALE_DROP } = useResponsiveCarousel();
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
// autoplay
|
||||||
viewport={{ once: true }}
|
useEffect(() => {
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
if (hovering) return
|
||||||
className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
const id = setInterval(() => setActive((i) => wrap(0, galleryItems.length, i + 1)), AUTOPLAY_MS)
|
||||||
|
return () => clearInterval(id)
|
||||||
|
}, [hovering])
|
||||||
|
|
||||||
|
const indices = useMemo(
|
||||||
|
() => [...Array(VISIBLE * 2 + 1)].map((_, i) => wrap(0, galleryItems.length, active + i - VISIBLE)),
|
||||||
|
[active]
|
||||||
|
)
|
||||||
|
|
||||||
|
const next = () => setActive((i) => wrap(0, galleryItems.length, i + 1))
|
||||||
|
const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white">
|
||||||
|
<div className="relative isolate pt-8 pb-0 text-center w-full">
|
||||||
|
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
|
||||||
|
<div className="mx-auto max-w-5xl lg:mt-12">
|
||||||
|
<Eyebrow color="accent">Use Cases</Eyebrow>
|
||||||
|
<SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
|
||||||
|
</div>
|
||||||
|
</FadeIn>
|
||||||
|
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
|
||||||
|
<div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
|
||||||
|
<P className="text-center" color="dark">
|
||||||
|
Your private agent coordinates a team of specialists that spin up on demand, collaborate across your world, and deliver end-to-end results.
|
||||||
|
Many agents, one intelligence—yours.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</FadeIn>
|
||||||
|
</div>
|
||||||
|
<FadeIn transition={{ duration: 1, delay: 0.4 }}>
|
||||||
|
<section
|
||||||
|
className="relative w-full flex items-center justify-center overflow-hidden -mt-8 pt-0 pb-0"
|
||||||
|
onMouseEnter={() => setHovering(true)}
|
||||||
|
onMouseLeave={() => setHovering(false)}
|
||||||
>
|
>
|
||||||
<div className="aspect-video overflow-hidden">
|
<div className="relative w-full max-w-[1800px] h-[300px] md:h-[500px]" style={{ perspective: '1600px' }}>
|
||||||
|
<div className="absolute inset-0" style={{ transformStyle: 'preserve-3d' }}>
|
||||||
|
<AnimatePresence initial={false}>
|
||||||
|
{indices.map((idx, i) => {
|
||||||
|
const distance = i - VISIBLE;
|
||||||
|
const item = galleryItems[idx];
|
||||||
|
|
||||||
|
const x = distance * GAP;
|
||||||
|
const z = -Math.abs(distance) * DEPTH;
|
||||||
|
const r = distance * ROT_Y;
|
||||||
|
const s = 1 - Math.abs(distance) * SCALE_DROP;
|
||||||
|
const o = distance === 0 ? 1 : 0.80;
|
||||||
|
const zIndex = 100 - Math.abs(distance);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={`${idx}-${i}`}
|
||||||
|
className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 will-change-transform overflow-hidden ${distance === 0 ? 'rounded-xl' : ''}`}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{
|
||||||
|
transform: `translateX(${x}px) translateZ(${z}px) rotateY(${r}deg) scale(${s})`,
|
||||||
|
zIndex,
|
||||||
|
opacity: o,
|
||||||
|
boxShadow: distance === 0 ? '0 0 20px 5px rgba(0, 0, 0, 0.1)' : 'none',
|
||||||
|
}}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ type: 'spring', stiffness: 220, damping: 26 }}
|
||||||
|
onClick={() => setActive(idx)}
|
||||||
|
>
|
||||||
|
<div className="relative bg-gray-100 flex items-center justify-center">
|
||||||
<img
|
<img
|
||||||
src={item.image}
|
src={item.image}
|
||||||
alt={item.text}
|
alt={item.text}
|
||||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
width={item.width}
|
||||||
|
height={item.height}
|
||||||
|
className="object-contain"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-6">
|
|
||||||
<p className="text-sm font-medium text-gray-900">{item.text}</p>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Arrows */}
|
||||||
|
<div className="absolute inset-y-0 left-8 hidden md:flex items-center z-50">
|
||||||
|
<button
|
||||||
|
onClick={prev}
|
||||||
|
className="bg-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
|
||||||
|
aria-label="Previous"
|
||||||
|
>
|
||||||
|
<svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M15 19L8 12l7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-y-0 right-8 hidden md:flex items-center z-50">
|
||||||
|
<button
|
||||||
|
onClick={next}
|
||||||
|
className="bg-white/50 rounded-full p-2 shadow-lg backdrop-blur-md text-black"
|
||||||
|
aria-label="Next"
|
||||||
|
>
|
||||||
|
<svg className="size-8" viewBox="0 0 24 24" fill="none" dangerouslySetInnerHTML={{ __html: '<path d="M9 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>' }} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Foreground pill (Desktop) */}
|
||||||
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
|
||||||
|
<div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
|
||||||
|
<CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
|
||||||
|
<TypeAnimation
|
||||||
|
key={active}
|
||||||
|
sequence={[galleryItems[active].text]}
|
||||||
|
wrapper="span"
|
||||||
|
speed={50}
|
||||||
|
repeat={0}
|
||||||
|
/>
|
||||||
|
</CP>
|
||||||
|
<Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base whitespace-nowrap">
|
||||||
|
Start
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
|
||||||
</section>
|
</section>
|
||||||
)
|
|
||||||
|
{/* Text box (Mobile) */}
|
||||||
|
<div className="md:hidden w-full px-4 -mt-12 mb-16">
|
||||||
|
<div className="flex flex-row items-center justify-between w-full gap-x-4 rounded-2xl bg-gray-100/80 p-4 backdrop-blur-md">
|
||||||
|
<CP as="h4" className="w-full text-left h-[72px] leading-tight flex items-center" color="dark">
|
||||||
|
<TypeAnimation
|
||||||
|
key={active}
|
||||||
|
sequence={[galleryItems[active].text]}
|
||||||
|
wrapper="span"
|
||||||
|
speed={50}
|
||||||
|
repeat={0}
|
||||||
|
/>
|
||||||
|
</CP>
|
||||||
|
<Button href="#" color="cyan" className="text-xs px-3 py-1.5 whitespace-nowrap">
|
||||||
|
Start
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FadeIn>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import { Globe } from '../../components/ui/Globe'
|
import { Globe } from '../../components/ui/Globe2'
|
||||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
|
|
||||||
|
|||||||
40
src/pages/home/CallToAction.tsx
Normal file
40
src/pages/home/CallToAction.tsx
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { CircleBackground } from '../../components/CircleBackground'
|
||||||
|
import { Container } from '../../components/Container'
|
||||||
|
import { Button } from '../../components/Button'
|
||||||
|
|
||||||
|
export function CallToAction() {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="get-started"
|
||||||
|
className="relative overflow-hidden bg-gray-900 py-32"
|
||||||
|
>
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
|
||||||
|
</div>
|
||||||
|
<Container className="relative">
|
||||||
|
<div className="mx-auto max-w-2xl text-center">
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
|
||||||
|
Build the Future, Today
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-lg text-gray-300">
|
||||||
|
Ready to reclaim your digital freedom? Start building on a cloud that’s autonomous, efficient, and truly yours. Explore the documentation or join our community to get started.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||||
|
<Button to="/cloud" variant="solid" color="white">
|
||||||
|
Start Building
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
to="https://threefold.info/mycelium_network/docs/"
|
||||||
|
as="a"
|
||||||
|
target="_blank"
|
||||||
|
variant="outline"
|
||||||
|
color="white"
|
||||||
|
>
|
||||||
|
Read Docs
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
65
src/pages/home/HomeAgent.tsx
Normal file
65
src/pages/home/HomeAgent.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import { H2, P } from '@/components/Texts'
|
||||||
|
import { Button } from '@/components/Button'
|
||||||
|
import { LayoutTextFlip } from '@/components/ui/layout-text-flip' // make sure this import path is correct
|
||||||
|
|
||||||
|
export function HomeAgent() {
|
||||||
|
return (
|
||||||
|
<div className="relative isolate overflow-hidden bg-white">
|
||||||
|
<div className="px-6 py-24 sm:py-32 lg:px-8">
|
||||||
|
<div className="mx-auto max-w-4xl text-center">
|
||||||
|
<H2>
|
||||||
|
Deploy your own{" "}
|
||||||
|
<span className="text-left text-black font-medium text-7xl italic bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-violet-400">
|
||||||
|
<LayoutTextFlip
|
||||||
|
text=""
|
||||||
|
words={[
|
||||||
|
"GPT-5",
|
||||||
|
"Claude 3.5",
|
||||||
|
"Gemini 1.5",
|
||||||
|
"Mistral 7B",
|
||||||
|
"Llama 3.1",
|
||||||
|
|
||||||
|
"AI Agents",
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</H2>
|
||||||
|
|
||||||
|
<P className="mx-auto mt-6 max-w-xl text-lg/8 text-pretty text-gray-600">
|
||||||
|
Mycelium delivers enterprise-grade AI agents with unmatched customizability and the fastest time to production — all in the agent platform designed for real business use cases.
|
||||||
|
</P>
|
||||||
|
|
||||||
|
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||||
|
<Button variant="solid" color="cyan" href="/signup">
|
||||||
|
Get started
|
||||||
|
</Button>
|
||||||
|
<a href="/agents" className="text-sm/6 font-semibold text-gray-900 hover:text-gray-600">
|
||||||
|
Learn more <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute top-1/2 left-1/2 -z-10 size-256 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)]"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
r={512}
|
||||||
|
cx={512}
|
||||||
|
cy={512}
|
||||||
|
fill="url(#8d958450-c69f-4251-94bc-4e091a323369)"
|
||||||
|
fillOpacity="0.7"
|
||||||
|
/>
|
||||||
|
<defs>
|
||||||
|
<radialGradient id="8d958450-c69f-4251-94bc-4e091a323369" cx="50%" cy="50%" r="50%">
|
||||||
|
<stop offset="0%" stopColor="#60A5FA" /> {/* blue-400 */}
|
||||||
|
<stop offset="50%" stopColor="#06B6D4" /> {/* cyan-500 */}
|
||||||
|
<stop offset="100%" stopColor="#A78BFA" /> {/* violet-400 */}
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
35
src/pages/home/HomeAurora.tsx
Normal file
35
src/pages/home/HomeAurora.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { H1, H2, H3, H4, H5 } from "@/components/Texts";
|
||||||
|
import { ScrollDownArrow } from '@/components/ScrollDownArrow';
|
||||||
|
|
||||||
|
export function HomeAurora() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0.0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.5,
|
||||||
|
duration: 1,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
backgroundImage: "url(/images/mchip2.webp)",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
}}
|
||||||
|
className="relative mx-auto py-24 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
|
||||||
|
>
|
||||||
|
<div className="text-center text-gray-800">
|
||||||
|
<H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>
|
||||||
|
</div>
|
||||||
|
<div className="pt-8 text-center font-light text-gray-500 max-w-4xl">
|
||||||
|
<H5>Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.</H5>
|
||||||
|
</div>
|
||||||
|
<div className="pt-8">
|
||||||
|
<ScrollDownArrow />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
284
src/pages/home/HomeBenefits.tsx
Normal file
284
src/pages/home/HomeBenefits.tsx
Normal file
@@ -0,0 +1,284 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import createGlobe from "cobe";
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
|
||||||
|
import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
|
||||||
|
import { H2, P } from '@/components/Texts'
|
||||||
|
|
||||||
|
|
||||||
|
export function HomeBenefits() {
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
title: "Sovereign",
|
||||||
|
description:
|
||||||
|
"Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
|
||||||
|
icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
|
||||||
|
className:
|
||||||
|
"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Autonomous",
|
||||||
|
description:
|
||||||
|
"The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
|
||||||
|
icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
|
||||||
|
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Energy Efficient",
|
||||||
|
description:
|
||||||
|
"Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
|
||||||
|
icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
|
||||||
|
className:
|
||||||
|
"col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Cost Efficient",
|
||||||
|
description:
|
||||||
|
"No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
|
||||||
|
icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
|
||||||
|
className: "col-span-1 lg:col-span-3 border-b lg:border-none",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
|
||||||
|
<div className="px-8">
|
||||||
|
<H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
|
||||||
|
Why It Changes Everything
|
||||||
|
</H2>
|
||||||
|
|
||||||
|
<P className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
|
||||||
|
Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative ">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<FeatureCard key={feature.title} className={feature.className}>
|
||||||
|
<FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
|
||||||
|
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||||
|
</FeatureCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const FeatureCard = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{icon}
|
||||||
|
<p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
"text-sm md:text-base max-w-4xl text-left mx-auto",
|
||||||
|
"text-neutral-500 text-center font-normal dark:text-neutral-300",
|
||||||
|
"text-left max-w-sm mx-0 md:text-sm my-2"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonOne = () => {
|
||||||
|
return (
|
||||||
|
<div className="relative flex py-8 px-2 gap-10 h-full">
|
||||||
|
<div className="w-full p-5 mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
|
||||||
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 ">
|
||||||
|
{/* TODO */}
|
||||||
|
<img
|
||||||
|
src="/linear.webp"
|
||||||
|
alt="header"
|
||||||
|
width={800}
|
||||||
|
height={800}
|
||||||
|
className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
|
||||||
|
<div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonThree = () => {
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
|
||||||
|
target="__blank"
|
||||||
|
className="relative flex gap-10 h-full group/image"
|
||||||
|
>
|
||||||
|
<div className="w-full mx-auto bg-transparent dark:bg-transparent group h-full">
|
||||||
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 relative">
|
||||||
|
{/* TODO */}
|
||||||
|
<IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
|
||||||
|
<img
|
||||||
|
src="https://assets.aceternity.com/fireship.jpg"
|
||||||
|
alt="header"
|
||||||
|
width={800}
|
||||||
|
height={800}
|
||||||
|
className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonTwo = () => {
|
||||||
|
const images = [
|
||||||
|
"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
||||||
|
];
|
||||||
|
|
||||||
|
const imageVariants = {
|
||||||
|
whileHover: {
|
||||||
|
scale: 1.1,
|
||||||
|
rotate: 0,
|
||||||
|
zIndex: 100,
|
||||||
|
},
|
||||||
|
whileTap: {
|
||||||
|
scale: 1.1,
|
||||||
|
rotate: 0,
|
||||||
|
zIndex: 100,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
|
||||||
|
{/* TODO */}
|
||||||
|
<div className="flex flex-row -ml-20">
|
||||||
|
{images.map((image, idx) => (
|
||||||
|
<motion.div
|
||||||
|
variants={imageVariants}
|
||||||
|
key={"images-first" + idx}
|
||||||
|
style={{
|
||||||
|
rotate: Math.random() * 20 - 10,
|
||||||
|
}}
|
||||||
|
whileHover="whileHover"
|
||||||
|
whileTap="whileTap"
|
||||||
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt="bali images"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row">
|
||||||
|
{images.map((image, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={"images-second" + idx}
|
||||||
|
style={{
|
||||||
|
rotate: Math.random() * 20 - 10,
|
||||||
|
}}
|
||||||
|
variants={imageVariants}
|
||||||
|
whileHover="whileHover"
|
||||||
|
whileTap="whileTap"
|
||||||
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt="bali images"
|
||||||
|
width="500"
|
||||||
|
height="500"
|
||||||
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent h-full pointer-events-none" />
|
||||||
|
<div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black to-transparent h-full pointer-events-none" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SkeletonFour = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-60 md:h-60 flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
|
||||||
|
<Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Globe = ({ className }: { className?: string }) => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let phi = 0;
|
||||||
|
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
|
||||||
|
const globe = createGlobe(canvasRef.current, {
|
||||||
|
devicePixelRatio: 2,
|
||||||
|
width: 600 * 2,
|
||||||
|
height: 600 * 2,
|
||||||
|
phi: 0,
|
||||||
|
theta: 0,
|
||||||
|
dark: 1,
|
||||||
|
diffuse: 1.2,
|
||||||
|
mapSamples: 16000,
|
||||||
|
mapBrightness: 6,
|
||||||
|
baseColor: [0.3, 0.3, 0.3],
|
||||||
|
markerColor: [0.1, 0.8, 1],
|
||||||
|
glowColor: [1, 1, 1],
|
||||||
|
markers: [
|
||||||
|
// longitude latitude
|
||||||
|
{ location: [37.7595, -122.4367], size: 0.03 },
|
||||||
|
{ location: [40.7128, -74.006], size: 0.1 },
|
||||||
|
],
|
||||||
|
onRender: (state) => {
|
||||||
|
// Called on every animation frame.
|
||||||
|
// `state` will be an empty object, return updated params.
|
||||||
|
state.phi = phi;
|
||||||
|
phi += 0.01;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
globe.destroy();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
66
src/pages/home/HomeCloud.tsx
Normal file
66
src/pages/home/HomeCloud.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import { CheckCircleIcon } from '@heroicons/react/20/solid'
|
||||||
|
import { H2, P } from '@/components/Texts'
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
'Decentralized Infrastructure',
|
||||||
|
'End-to-End Encryption',
|
||||||
|
'Sovereign Data Control',
|
||||||
|
'Scalable Kubernetes Clusters',
|
||||||
|
'Censorship-Resistant',
|
||||||
|
'Peer-to-Peer Networking',
|
||||||
|
]
|
||||||
|
|
||||||
|
export function HomeCloud() {
|
||||||
|
return (
|
||||||
|
<div className="overflow-hidden bg-white py-24">
|
||||||
|
<div className="relative isolate">
|
||||||
|
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||||
|
<div className="mx-auto flex max-w-2xl flex-col gap-16 bg-white px-6 py-16 shadow-lg ring-1 ring-gray-200/5 sm:rounded-3xl sm:p-8 lg:mx-0 lg:max-w-none lg:flex-row lg:items-center lg:py-20 xl:gap-x-20 xl:px-20">
|
||||||
|
<img
|
||||||
|
alt=""
|
||||||
|
src="/images/kubernetes.png"
|
||||||
|
className="h-96 w-full flex-none rounded-2xl object-cover lg:aspect-square lg:h-auto lg:max-w-sm"
|
||||||
|
/>
|
||||||
|
<div className="w-full flex-auto">
|
||||||
|
<H2 className="">
|
||||||
|
Mycelium <span className="font-medium text-7xl italic">Cloud</span>
|
||||||
|
</H2>
|
||||||
|
<P className="mt-6 text-lg/8 text-pretty text-gray-600">
|
||||||
|
A comprehensive platform for deploying and managing Kubernetes clusters on the decentralized Mycelium Grid infrastructure
|
||||||
|
</P>
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
className="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base/7 text-gray-950 sm:grid-cols-2"
|
||||||
|
>
|
||||||
|
{benefits.map((benefit) => (
|
||||||
|
<li key={benefit} className="flex gap-x-3">
|
||||||
|
<CheckCircleIcon aria-hidden="true" className="h-7 w-5 flex-none text-cyan-500" />
|
||||||
|
{benefit}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="mt-10 flex">
|
||||||
|
<a href="/cloud" className="text-sm/6 font-semibold text-cyan-600 hover:text-cyan-500">
|
||||||
|
Learn more
|
||||||
|
<span aria-hidden="true"> →</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="absolute inset-x-0 -top-16 -z-10 flex transform-gpu justify-center overflow-hidden blur-3xl"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
clipPath:
|
||||||
|
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||||
|
}}
|
||||||
|
className="aspect-1318/752 w-329.5 flex-none bg-linear-to-r from-[#9fe8fc] to-[#c6c4fa] opacity-50"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
63
src/pages/home/HomeFeatures.tsx
Normal file
63
src/pages/home/HomeFeatures.tsx
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
import { InboxIcon, TrashIcon, UsersIcon } from '@heroicons/react/24/outline'
|
||||||
|
import { H2, P } from '@/components/Texts'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
name: 'Mycelium Network',
|
||||||
|
description:
|
||||||
|
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
||||||
|
href: '/network',
|
||||||
|
icon: UsersIcon,
|
||||||
|
image: '/images/network_icon.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mycelium Cloud',
|
||||||
|
description:
|
||||||
|
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
||||||
|
href: '/cloud',
|
||||||
|
icon: TrashIcon,
|
||||||
|
image: '/images/cloud_icon.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mycelium Agents',
|
||||||
|
description:
|
||||||
|
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
||||||
|
href: '/agents',
|
||||||
|
icon: InboxIcon,
|
||||||
|
image: '/images/agent_icon.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export function HomeFeatures() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="">
|
||||||
|
<div className="relative bg-transparent pb-24 Pt-0 overflow-hidden">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
|
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||||
|
<H2 className="">
|
||||||
|
The Building Blocks of <span className="font-medium text-7xl">Decentralized Future</span>
|
||||||
|
</H2>
|
||||||
|
<P className="mt-6 ">
|
||||||
|
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
||||||
|
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-100 bg-white backdrop-blur-lg overflow-hidden shadow-lg hover:shadow-xl hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
||||||
|
<div className="w-30 h-30 bg-white/80 rounded-full flex items-center justify-center">
|
||||||
|
<img src={feature.image} alt="" className="w-25 h-25" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-6 text-xl font-semibold text-black">{feature.name}</h3>
|
||||||
|
<p className="mt-4 text-base text-gray-800">{feature.description}</p>
|
||||||
|
<a href={feature.href} className="mt-6 text-base font-semibold text-black">Learn more <span aria-hidden="true"> →</span></a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
60
src/pages/home/HomeFeaturesDark.tsx
Normal file
60
src/pages/home/HomeFeaturesDark.tsx
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
import { GlobeAltIcon, ServerStackIcon, CpuChipIcon } from '@heroicons/react/24/solid'
|
||||||
|
import { H2, P } from '@/components/Texts'
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
name: 'Mycelium Network',
|
||||||
|
description:
|
||||||
|
"A global, end-to-end encrypted overlay that simply doesn't break.",
|
||||||
|
href: '/network',
|
||||||
|
icon: GlobeAltIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mycelium Cloud',
|
||||||
|
description:
|
||||||
|
'An autonomous, stateless OS that enforces pre-deterministic deployments you define.',
|
||||||
|
href: '/cloud',
|
||||||
|
icon: ServerStackIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mycelium Agents',
|
||||||
|
description:
|
||||||
|
'Your sovereign agent with private memory and permissioned data access—always under your control.',
|
||||||
|
href: '/agents',
|
||||||
|
icon: CpuChipIcon,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export function HomeFeaturesDark() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="">
|
||||||
|
<div className="relative bg-black py-24 overflow-hidden">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||||
|
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||||
|
<H2 className="text-white">
|
||||||
|
The Building Blocks of Decentralized Future
|
||||||
|
</H2>
|
||||||
|
<P className="mt-6 text-gray-300">
|
||||||
|
From compute and networking to intelligent automation, these components work together to empower users, developers, and organizations to build freely, without intermediaries.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
<div className="mx-auto mt-16 max-w-2xl lg:max-w-7xl">
|
||||||
|
<div className="grid grid-cols-1 gap-x-12 gap-y-12 lg:grid-cols-3">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<div key={feature.name} className="relative flex flex-col p-8 rounded-3xl border border-gray-700 bg-gray-900/50 backdrop-blur-lg overflow-hidden shadow-2xl hover:shadow-cyan-500/40 hover:border-cyan-500 hover:scale-105 transform transition-all duration-300">
|
||||||
|
<div className="w-20 h-20 bg-gray-800/80 rounded-full flex items-center justify-center">
|
||||||
|
<feature.icon className="h-12 w-12 text-cyan-500" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-6 text-xl font-semibold text-white">{feature.name}</h3>
|
||||||
|
<p className="mt-4 text-base text-gray-300">{feature.description}</p>
|
||||||
|
<a href={feature.href} className="mt-6 text-base font-semibold text-white">Learn more <span aria-hidden="true"> →</span></a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
117
src/pages/home/HomeGlobe.tsx
Normal file
117
src/pages/home/HomeGlobe.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { Globe } from "@/components/ui/Globe"
|
||||||
|
import { motion } from "framer-motion"
|
||||||
|
import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
|
||||||
|
import { CountUpNumber } from '@/components/CountUpNumber'
|
||||||
|
|
||||||
|
export function WorldMap() {
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
|
||||||
|
{/* Background video */}
|
||||||
|
<video
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
className="absolute inset-0 w-full h-full object-cover"
|
||||||
|
>
|
||||||
|
<source src="/videos/benefits.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
|
||||||
|
{/* Dark overlay */}
|
||||||
|
<div className="absolute inset-0 bg-black/10" />
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
|
||||||
|
{/* Title + Subtitle */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
className="max-w-xl"
|
||||||
|
>
|
||||||
|
<Eyebrow color="accent">Network</Eyebrow>
|
||||||
|
<SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
|
||||||
|
<P className=" mt-4 text-base leading-relaxed" color="light">
|
||||||
|
Mycelium Cloud's advancement technology enables anyone to deploy
|
||||||
|
their own Internet infrastructure, anywhere.
|
||||||
|
</P>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Bottom Layout: Globe + Cards */}
|
||||||
|
<div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
|
||||||
|
{/* Globe Left Column */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.2 }}
|
||||||
|
className="flex-1 flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
|
||||||
|
<Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Cards Right Column */}
|
||||||
|
<div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.4 }}
|
||||||
|
className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||||
|
>
|
||||||
|
<div><CT color="light" className="uppercase tracking-wide">CORES</CT></div>
|
||||||
|
<div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||||
|
<CP color="light" className="mt-2 text-sm">
|
||||||
|
Total Central Processing Unit Cores available on the grid.
|
||||||
|
</CP>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.5 }}
|
||||||
|
className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||||
|
>
|
||||||
|
<div><CT color="light" className="uppercase tracking-wide">NODES</CT></div>
|
||||||
|
<div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white" /></div>
|
||||||
|
<CP color="light" className="mt-2 text-sm">
|
||||||
|
Total number of nodes on the grid.
|
||||||
|
</CP>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.6 }}
|
||||||
|
className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||||
|
>
|
||||||
|
<div><CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT></div>
|
||||||
|
<div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||||
|
<CP color="light" className="mt-2 text-sm">
|
||||||
|
Total GB amount of storage (SSD, HDD, & RAM) on the grid.
|
||||||
|
</CP>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.5, delay: 0.7 }}
|
||||||
|
className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||||
|
>
|
||||||
|
<div><CT color="light" className="uppercase tracking-wide">COUNTRIES</CT></div>
|
||||||
|
<div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white" /></div>
|
||||||
|
<CP color="light" className="mt-2 text-sm">
|
||||||
|
Total number of countries with active nodes.
|
||||||
|
</CP>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Radial fade overlay */}
|
||||||
|
<div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,36 +1,37 @@
|
|||||||
import { motion } from 'framer-motion'
|
'use client'
|
||||||
import { TypeAnimation } from 'react-type-animation'
|
|
||||||
import { Container } from '../../components/Container'
|
import { H1, P } from '@/components/Texts'
|
||||||
|
import { FadeIn } from '@/components/FadeIn'
|
||||||
|
import { Button } from '@/components/Button'
|
||||||
|
|
||||||
export function HomeHero() {
|
export function HomeHero() {
|
||||||
return (
|
return (
|
||||||
<section className="relative bg-white py-20 lg:py-32">
|
<div
|
||||||
<Container>
|
className="relative isolate overflow-hidden bg-white"
|
||||||
<div className="mx-auto max-w-4xl text-center">
|
style={{
|
||||||
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
backgroundImage: 'url(/images/cloud.png)',
|
||||||
<TypeAnimation
|
backgroundSize: 'cover',
|
||||||
sequence={[
|
backgroundPosition: 'center',
|
||||||
'Decentralized Autonomous Agentic Cloud.',
|
}}
|
||||||
1000,
|
|
||||||
]}
|
|
||||||
wrapper="span"
|
|
||||||
speed={50}
|
|
||||||
repeat={0}
|
|
||||||
/>
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
animate={{ opacity: 1 }}
|
|
||||||
transition={{ duration: 1, delay: 1 }}
|
|
||||||
className="mt-8"
|
|
||||||
>
|
>
|
||||||
<p className="text-lg lg:text-xl text-gray-600">
|
<div className="mx-auto max-w-7xl px-6 py-24 lg:py-32 lg:flex lg:px-8">
|
||||||
|
<div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
||||||
|
<H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
|
||||||
|
Decentralized Autonomous Agentic Cloud.
|
||||||
|
</H1>
|
||||||
|
<P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
|
||||||
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
|
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
|
||||||
</p>
|
</P>
|
||||||
</motion.div>
|
<div className="mt-10 flex items-center gap-x-6">
|
||||||
|
<Button variant="solid" color="cyan" href="#">
|
||||||
|
Get started
|
||||||
|
</Button>
|
||||||
|
<a href="#" className="text-sm/6 font-semibold text-gray-50">
|
||||||
|
Learn more <span aria-hidden="true">→</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
|
||||||
</section>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
35
src/pages/home/HomeHeroDark.tsx
Normal file
35
src/pages/home/HomeHeroDark.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { LampContainer } from "@/components/ui/lamp";
|
||||||
|
|
||||||
|
export function HomeHeroDark() {
|
||||||
|
return (
|
||||||
|
<LampContainer>
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0.5, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.3,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl max-w-4xl"
|
||||||
|
>
|
||||||
|
Decentralized Autonomous Agentic Cloud.
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0.5, y: 60 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{
|
||||||
|
delay: 0.5,
|
||||||
|
duration: 0.8,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-lg font-medium tracking-tight text-transparent md:text-xl max-w-3xl"
|
||||||
|
>
|
||||||
|
Mycelium Project is a decentralized platform for autonomous AI, powered by distributed compute, sovereign memory, encrypted networking, and stateless GPU orchestration.
|
||||||
|
</motion.p>
|
||||||
|
</LampContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
69
src/pages/home/HomeHeroLight2.tsx
Normal file
69
src/pages/home/HomeHeroLight2.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useRef, useEffect } from 'react'
|
||||||
|
import { H1, H5 } from '@/components/Texts'
|
||||||
|
|
||||||
|
export function HomeHeroLight2() {
|
||||||
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const video = videoRef.current;
|
||||||
|
if (video) {
|
||||||
|
video.playbackRate = 0.4;
|
||||||
|
const playPromise = video.play();
|
||||||
|
if (playPromise !== undefined) {
|
||||||
|
playPromise.catch(error => {
|
||||||
|
console.error("Video autoplay was prevented:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="relative h-screen overflow-hidden">
|
||||||
|
{/* Background video */}
|
||||||
|
<video
|
||||||
|
ref={videoRef}
|
||||||
|
src="/videos/cloud.mp4"
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
className="absolute inset-0 h-full w-full object-cover z-[-10]"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Global soft wash + blur (Temporarily commented out for debugging) */}
|
||||||
|
{/* <div className="absolute inset-0 bg-white opacity-30 backdrop-blur-md z-0" /> */}
|
||||||
|
|
||||||
|
{/* Center “halo” for text legibility (Temporarily commented out for debugging) */}
|
||||||
|
{/* <div
|
||||||
|
className="absolute inset-0 z-0"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
'radial-gradient(ellipse at center, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.88) 15%, rgba(255,255,255,0.72) 35%, rgba(255,255,255,0.08) 75%)'
|
||||||
|
}}
|
||||||
|
/> */}
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative z-10 h-full flex items-center justify-center">
|
||||||
|
<div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
|
||||||
|
|
||||||
|
<H1
|
||||||
|
className="pt-6"
|
||||||
|
style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
|
||||||
|
>
|
||||||
|
Decentralized Autonomous Agentic Cloud.
|
||||||
|
</H1>
|
||||||
|
|
||||||
|
<H5
|
||||||
|
className="mt-8"
|
||||||
|
style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
|
||||||
|
>
|
||||||
|
Mycelium's advancements in Agentic infrastructure support private, secure, and
|
||||||
|
autonomous Agents that connect, learn, and grow with you.
|
||||||
|
</H5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
69
src/pages/home/HomeMap.tsx
Normal file
69
src/pages/home/HomeMap.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
import WorldMap from "@/components/ui/world-map";
|
||||||
|
import { motion } from "motion/react";
|
||||||
|
import { H2, P } from "@/components/Texts";
|
||||||
|
|
||||||
|
export function HomeMapSection() {
|
||||||
|
return (
|
||||||
|
<div className=" py-24 dark:bg-black bg-tra w-full">
|
||||||
|
<div className="max-w-7xl mx-auto text-center">
|
||||||
|
<H2 className="font-medium text-xl md:text-4xl dark:text-white text-gray-800">
|
||||||
|
Mycelium Network is{" "}
|
||||||
|
<span className="text-black text-bold italic">
|
||||||
|
{"Live.".split("").map((word, idx) => (
|
||||||
|
<motion.span
|
||||||
|
key={idx}
|
||||||
|
className="inline-block"
|
||||||
|
initial={{ x: -10, opacity: 0 }}
|
||||||
|
animate={{ x: 0, opacity: 1 }}
|
||||||
|
transition={{ duration: 0.5, delay: idx * 0.04 }}
|
||||||
|
>
|
||||||
|
{word}
|
||||||
|
</motion.span>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
</H2>
|
||||||
|
<P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
|
||||||
|
Mycelium Network's advancement technology enables anyone to deploy
|
||||||
|
their own Internet infrastructure, anywhere.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
<div className="max-w-5xl mx-auto">
|
||||||
|
<WorldMap
|
||||||
|
dots={[
|
||||||
|
{
|
||||||
|
start: {
|
||||||
|
lat: 64.2008,
|
||||||
|
lng: -149.4937,
|
||||||
|
}, // Alaska (Fairbanks)
|
||||||
|
end: {
|
||||||
|
lat: 34.0522,
|
||||||
|
lng: -118.2437,
|
||||||
|
}, // Los Angeles
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: { lat: 64.2008, lng: -149.4937 }, // Alaska (Fairbanks)
|
||||||
|
end: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
|
||||||
|
end: { lat: 38.7223, lng: -9.1393 }, // Lisbon
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: { lat: 51.5074, lng: -0.1278 }, // London
|
||||||
|
end: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||||
|
end: { lat: 43.1332, lng: 131.9113 }, // Vladivostok
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: { lat: 28.6139, lng: 77.209 }, // New Delhi
|
||||||
|
end: { lat: -1.2921, lng: 36.8219 }, // Nairobi
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,21 +1,41 @@
|
|||||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||||
import { HomeHero } from './HomeHero'
|
import { HomeAurora } from './HomeAurora'
|
||||||
import { WorldMapSection } from './WorldMapSection'
|
import { HomeFeatures } from './HomeFeatures'
|
||||||
import { StackSection } from './StackSection'
|
import { HomeFeaturesDark } from './HomeFeaturesDark'
|
||||||
|
import { HomeCloud } from './HomeCloud'
|
||||||
|
import { HomeAgent } from './HomeAgent'
|
||||||
|
import { StackSectionLight } from './StackSection'
|
||||||
|
import { WorldMap } from './HomeGlobe'
|
||||||
|
import { HomeBenefits } from './HomeBenefits'
|
||||||
|
import { CallToAction } from './CallToAction'
|
||||||
|
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<AnimatedSection>
|
<AnimatedSection>
|
||||||
<HomeHero />
|
<HomeAurora />
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
|
<AnimatedSection id="next-section">
|
||||||
|
<WorldMap />
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
<AnimatedSection>
|
<AnimatedSection>
|
||||||
<WorldMapSection />
|
<StackSectionLight />
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
|
|
||||||
|
<AnimatedSection>
|
||||||
|
<HomeFeaturesDark />
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
<AnimatedSection>
|
<AnimatedSection>
|
||||||
<StackSection />
|
<HomeBenefits />
|
||||||
|
</AnimatedSection>
|
||||||
|
|
||||||
|
<AnimatedSection>
|
||||||
|
<CallToAction />
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,66 +1,75 @@
|
|||||||
import { motion } from 'framer-motion'
|
"use client";
|
||||||
import { Container } from '../../components/Container'
|
|
||||||
|
|
||||||
const stackData = [
|
import { motion } from "framer-motion";
|
||||||
{
|
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
|
||||||
id: 'agent',
|
import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
|
||||||
title: 'Agent Layer',
|
import { FadeIn } from "@/components/ui/FadeIn";
|
||||||
description:
|
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
|
||||||
'Your sovereign agent with private memory and permissioned data access—always under your control. Choose from a wide library of open-source LLMs, paired with built-in semantic search and retrieval.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'network',
|
|
||||||
title: 'Network Layer',
|
|
||||||
description:
|
|
||||||
'A global, end-to-end encrypted overlay that simply doesn\'t break. Shortest-path routing moves your traffic the fastest way, every time with instant discovery.',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'cloud',
|
|
||||||
title: 'Cloud Layer',
|
|
||||||
description:
|
|
||||||
'An autonomous, stateless OS that enforces pre-deterministic deployments you define. Workloads are cryptographically bound to your private key—location and access are yours.',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
export function StackSection() {
|
export function StackSectionLight() {
|
||||||
return (
|
return (
|
||||||
<section className="relative bg-white py-20 lg:py-32">
|
<section className="relative w-full overflow-hidden py-24 lg:py-40">
|
||||||
<Container>
|
{/* === Background Layer === */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
|
<div className="absolute inset-0 -z-10 bg-transparent">
|
||||||
{/* Left Column - Text */}
|
{/* Dotted Glow Background */}
|
||||||
<motion.div
|
<DottedGlowBackground
|
||||||
initial={{ opacity: 0, y: 20 }}
|
gap={15}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
radius={2}
|
||||||
viewport={{ once: true }}
|
color="rgba(0,0,0,0.4)"
|
||||||
transition={{ duration: 0.5 }}
|
glowColor="rgba(0,170,255,0.85)"
|
||||||
className="lg:col-span-1"
|
opacity={0.2}
|
||||||
>
|
/>
|
||||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
{/* Faint 3D grid floor */}
|
||||||
The Mycelium Stack
|
<div className="absolute inset-0 flex items-end justify-center overflow-hidden">
|
||||||
</h2>
|
<div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
|
||||||
<p className="mt-6 text-lg text-gray-600">
|
</div>
|
||||||
Built with Mycelium technology, our AI infrastructure ensures unbreakable networks, complete data sovereignty, ultra-secure agent-human communication, and unhackable data storage systems.
|
</div>
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Right Column - Stack Cards */}
|
{/* === Content === */}
|
||||||
<div className="lg:col-span-2 space-y-6">
|
<div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
|
||||||
{stackData.map((layer, index) => (
|
{/* Left Column - Text */}
|
||||||
|
<div className="text-center lg:text-left">
|
||||||
|
<FadeIn>
|
||||||
|
<Eyebrow color="accent">Technology Layers</Eyebrow>
|
||||||
|
<SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
|
||||||
|
The Mycelium Stack
|
||||||
|
</SectionHeader>
|
||||||
|
</FadeIn>
|
||||||
|
|
||||||
|
<FadeIn>
|
||||||
|
<P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
|
||||||
|
Built with Mycelium technology, our AI infrastructure ensures
|
||||||
|
unbreakable networks, complete data sovereignty, ultra-secure
|
||||||
|
agent-human communication, and unhackable data storage systems.
|
||||||
|
</P>
|
||||||
|
</FadeIn>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Right Column - Animated Stack */}
|
||||||
|
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
|
||||||
<motion.div
|
<motion.div
|
||||||
key={layer.id}
|
initial={{ y: 30, opacity: 0 }}
|
||||||
initial={{ opacity: 0, x: 20 }}
|
whileInView={{ y: 0, opacity: 1 }}
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
transition={{ duration: 1.2, ease: "easeOut" }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
||||||
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
|
||||||
>
|
>
|
||||||
<h3 className="text-xl font-semibold text-gray-900">{layer.title}</h3>
|
<motion.div
|
||||||
<p className="mt-3 text-gray-600">{layer.description}</p>
|
animate={{
|
||||||
|
y: [0, -10, 0],
|
||||||
|
rotateZ: [0, 0.5, -0.5, 0],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 6,
|
||||||
|
repeat: Infinity,
|
||||||
|
ease: "easeInOut",
|
||||||
|
}}
|
||||||
|
className="relative"
|
||||||
|
>
|
||||||
|
<StackedCubesLight />
|
||||||
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
import { Globe } from '../../components/ui/Globe'
|
import { Globe } from '../../components/ui/Globe2'
|
||||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
|
|
||||||
|
|||||||
109
src/pages/network/AppScreen.tsx
Normal file
109
src/pages/network/AppScreen.tsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import { forwardRef } from 'react'
|
||||||
|
import clsx from 'clsx'
|
||||||
|
|
||||||
|
function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 79 24" fill="none" aria-hidden="true" {...props}>
|
||||||
|
<path
|
||||||
|
d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12ZM2.4 12a9.004 9.004 0 0 0 6.055 8.507c1.565.542 2.945-.85 2.945-2.507V6c0-1.657-1.38-3.049-2.945-2.507A9.004 9.004 0 0 0 2.4 12Z"
|
||||||
|
fill="#06B6D4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M33.004 17V6.818h3.818c.783 0 1.439.146 1.97.438.533.291.935.692 1.207 1.203.275.507.413 1.084.413 1.73 0 .653-.138 1.233-.413 1.74a2.948 2.948 0 0 1-1.218 1.198c-.537.288-1.198.433-1.983.433h-2.531v-1.517h2.282c.457 0 .832-.08 1.124-.238.291-.16.507-.378.646-.657.142-.278.214-.598.214-.96 0-.36-.072-.679-.214-.954a1.452 1.452 0 0 0-.651-.641c-.292-.156-.668-.234-1.129-.234h-1.69V17h-1.845Zm12.152.15c-.746 0-1.392-.165-1.939-.493a3.343 3.343 0 0 1-1.273-1.377c-.298-.59-.447-1.28-.447-2.068 0-.79.15-1.48.447-2.073a3.335 3.335 0 0 1 1.273-1.383c.547-.328 1.193-.492 1.94-.492.745 0 1.391.164 1.938.492.547.329.97.79 1.268 1.383.301.593.452 1.284.452 2.073 0 .789-.15 1.478-.452 2.068a3.309 3.309 0 0 1-1.268 1.377c-.547.328-1.193.492-1.939.492Zm.01-1.443c.404 0 .742-.11 1.014-.333.272-.225.474-.527.607-.905.136-.377.204-.798.204-1.262 0-.468-.068-.89-.204-1.268a2.007 2.007 0 0 0-.607-.91c-.272-.225-.61-.338-1.014-.338-.414 0-.759.113-1.034.338a2.041 2.041 0 0 0-.612.91 3.81 3.81 0 0 0-.198 1.268c0 .464.066.885.198 1.262.136.378.34.68.612.905.275.222.62.333 1.034.333Zm8.508 1.442c-.763 0-1.417-.167-1.964-.502a3.352 3.352 0 0 1-1.258-1.387c-.292-.593-.437-1.276-.437-2.048 0-.776.149-1.46.447-2.054a3.34 3.34 0 0 1 1.263-1.392c.547-.334 1.193-.502 1.939-.502.62 0 1.168.115 1.645.343.48.226.864.546 1.149.96.285.41.447.891.487 1.441h-1.72a1.644 1.644 0 0 0-.497-.92c-.259-.248-.605-.372-1.04-.372-.367 0-.69.1-.969.298-.278.196-.495.478-.651.845-.153.368-.229.81-.229 1.323 0 .52.076.968.229 1.342.152.371.366.658.641.86.279.2.605.298.98.298.265 0 .502-.05.71-.149.213-.102.39-.25.532-.442.143-.192.24-.426.294-.701h1.72a2.999 2.999 0 0 1-.477 1.437c-.275.414-.65.739-1.124.974-.474.232-1.03.348-1.67.348Zm6.39-2.545-.006-2.173h.289l2.744-3.067h2.103l-3.376 3.758h-.372l-1.383 1.482ZM58.422 17V6.818h1.8V17h-1.8Zm4.792 0-2.485-3.475 1.213-1.268L65.368 17h-2.153Zm6.245.15c-.766 0-1.427-.16-1.984-.478a3.233 3.233 0 0 1-1.278-1.362c-.298-.59-.447-1.285-.447-2.083 0-.786.149-1.475.447-2.069a3.384 3.384 0 0 1 1.263-1.392c.54-.334 1.175-.502 1.904-.502.47 0 .915.076 1.333.229.42.149.792.381 1.113.696.325.315.58.716.766 1.203.186.484.278 1.06.278 1.73v.552h-6.259v-1.213h4.534a1.935 1.935 0 0 0-.224-.92 1.625 1.625 0 0 0-.611-.641 1.719 1.719 0 0 0-.905-.234c-.368 0-.691.09-.97.269a1.848 1.848 0 0 0-.65.696c-.153.285-.231.598-.234.94v1.058c0 .444.08.825.243 1.144.163.315.39.556.681.726.292.165.634.248 1.025.248.261 0 .498-.036.71-.11.213-.075.397-.187.552-.332.156-.146.274-.327.353-.542l1.68.189a2.62 2.62 0 0 1-.606 1.163 2.958 2.958 0 0 1-1.133.766c-.461.179-.988.268-1.581.268Zm8.731-7.786v1.392h-4.39V9.364h4.39Zm-3.306-1.83h1.8v7.17c0 .241.036.427.109.556a.59.59 0 0 0 .298.258c.123.047.259.07.408.07.113 0 .215-.008.308-.025.096-.016.17-.031.219-.045l.303 1.407c-.096.034-.233.07-.412.11-.176.04-.392.063-.647.07a2.934 2.934 0 0 1-1.218-.204 1.895 1.895 0 0 1-.86-.706c-.209-.319-.311-.716-.308-1.194V7.534Z"
|
||||||
|
fill="#fff"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||||
|
<path
|
||||||
|
d="M5 6h14M5 18h14M5 12h14"
|
||||||
|
stroke="#fff"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function UserIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
|
return (
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
|
||||||
|
<path
|
||||||
|
d="M15 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.696 19h10.608c1.175 0 2.08-.935 1.532-1.897C18.028 15.69 16.187 14 12 14s-6.028 1.689-6.836 3.103C4.616 18.065 5.521 19 6.696 19Z"
|
||||||
|
stroke="#fff"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AppScreen({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentPropsWithoutRef<'div'>) {
|
||||||
|
return (
|
||||||
|
<div className={clsx('flex flex-col', className)} {...props}>
|
||||||
|
<div className="flex justify-between px-4 pt-0">
|
||||||
|
<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>
|
||||||
|
)
|
||||||
|
})
|
||||||
@@ -1,27 +1,439 @@
|
|||||||
import { Container } from '../../components/Container'
|
'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 './AppScreen'
|
||||||
|
import {
|
||||||
|
Eyebrow,
|
||||||
|
FeatureDescription,
|
||||||
|
FeatureTitle,
|
||||||
|
MobileFeatureTitle,
|
||||||
|
P,
|
||||||
|
SectionHeader,
|
||||||
|
} from '@/components/Texts'
|
||||||
|
import { CircleBackground } from '@/components/CircleBackground'
|
||||||
|
import { Container } from '@/components/Container'
|
||||||
|
|
||||||
|
import connectorImg from '@/images/connector.png'
|
||||||
|
import peersImg from '@/images/peers.png'
|
||||||
|
import settingImg from '@/images/setting.png'
|
||||||
|
import { PhoneFrame } from '@/components/PhoneFrame'
|
||||||
|
|
||||||
|
|
||||||
|
interface CustomAnimationProps {
|
||||||
|
isForwards: boolean
|
||||||
|
changeCount: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
name: 'Mycelium Connector',
|
||||||
|
description:
|
||||||
|
"Start (and stop) your Mycelium connector to gain access to sites, apps, and workloads available exclusively on the Mycelium Network. View statistics around peers and traffic.",
|
||||||
|
icon: DeviceUserIcon,
|
||||||
|
screen: InviteScreen,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Mycelium Peers',
|
||||||
|
description:
|
||||||
|
'Search and discover active peers on the Mycelium Network, or add your own.',
|
||||||
|
icon: DeviceNotificationIcon,
|
||||||
|
screen: StocksScreen,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Network Setting',
|
||||||
|
description:
|
||||||
|
'Find version and network information and trigger light or dark mode.',
|
||||||
|
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 bodyAnimation: MotionProps = {
|
||||||
|
initial: 'initial',
|
||||||
|
animate: 'animate',
|
||||||
|
exit: 'exit',
|
||||||
|
variants: {
|
||||||
|
initial: (custom: CustomAnimationProps) => (
|
||||||
|
custom.isForwards
|
||||||
|
? {
|
||||||
|
y: '100%',
|
||||||
|
zIndex: maxZIndex - custom.changeCount,
|
||||||
|
transition: { duration: 0.4 },
|
||||||
|
}
|
||||||
|
: 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) => (
|
||||||
|
custom.isForwards
|
||||||
|
? bodyVariantBackwards
|
||||||
|
: {
|
||||||
|
y: '100%',
|
||||||
|
zIndex: maxZIndex - custom.changeCount,
|
||||||
|
transition: { duration: 0.4 },
|
||||||
|
}
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function InviteScreen() {
|
||||||
|
return (
|
||||||
|
<AppScreen className="w-full">
|
||||||
|
<img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="mt-[-2rem]" />
|
||||||
|
</AppScreen>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function StocksScreen() {
|
||||||
|
return (
|
||||||
|
<AppScreen className="w-full">
|
||||||
|
<img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="mt-[-2rem]" />
|
||||||
|
</AppScreen>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function InvestScreen() {
|
||||||
|
return (
|
||||||
|
<AppScreen className="w-full">
|
||||||
|
<img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="mt-[-2rem]" />
|
||||||
|
</AppScreen>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function usePrevious<T>(value: T) {
|
||||||
|
const 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: number) => {
|
||||||
|
setSelectedIndex(selectedIndex)
|
||||||
|
setChangeCount((changeCount) => changeCount + 1)
|
||||||
|
},
|
||||||
|
100,
|
||||||
|
{ leading: true },
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TabGroup
|
||||||
|
className="grid grid-cols-12 items-center gap-8 lg:gap-16"
|
||||||
|
selectedIndex={selectedIndex}
|
||||||
|
onChange={onChange}
|
||||||
|
vertical
|
||||||
|
>
|
||||||
|
<TabList className="z-10 order-last col-span-6 space-y-6">
|
||||||
|
{features.map((feature, featureIndex) => (
|
||||||
|
<div
|
||||||
|
key={feature.name}
|
||||||
|
className={clsx(
|
||||||
|
'relative rounded-2xl outline-2 transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-800/30',
|
||||||
|
selectedIndex === featureIndex
|
||||||
|
? 'outline-cyan-500'
|
||||||
|
: 'outline-transparent hover:outline-cyan-500',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{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" />
|
||||||
|
<FeatureTitle as="h3" color="white" className="mt-6">
|
||||||
|
<Tab className="text-left data-selected:not-data-focus:outline-hidden">
|
||||||
|
<span className="absolute inset-0 rounded-2xl" />
|
||||||
|
{feature.name}
|
||||||
|
</Tab>
|
||||||
|
</FeatureTitle>
|
||||||
|
<FeatureDescription color="secondary" className="mt-2">
|
||||||
|
{feature.description}
|
||||||
|
</FeatureDescription>
|
||||||
|
</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 id="primaryfeatures_desktop_circle" 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"
|
||||||
|
>
|
||||||
|
<motion.div {...bodyAnimation} custom={{ isForwards, changeCount }}>
|
||||||
|
<feature.screen />
|
||||||
|
</motion.div>
|
||||||
|
</TabPanel>
|
||||||
|
) : null,
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</TabPanels>
|
||||||
|
</PhoneFrame>
|
||||||
|
</div>
|
||||||
|
</TabGroup>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function FeaturesMobile() {
|
||||||
|
let [activeIndex, setActiveIndex] = useState(0)
|
||||||
|
let slideContainerRef = useRef<React.ElementRef<'div'>>(null)
|
||||||
|
let slideRefs = useRef<Array<React.ElementRef<'div'>>>([])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let observer = new window.IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
for (let entry of entries) {
|
||||||
|
if (entry.isIntersecting && entry.target instanceof HTMLDivElement) {
|
||||||
|
setActiveIndex(slideRefs.current.indexOf(entry.target))
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: slideContainerRef.current,
|
||||||
|
threshold: 0.6,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
for (let slide of slideRefs.current) {
|
||||||
|
if (slide) {
|
||||||
|
observer.observe(slide)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
observer.disconnect()
|
||||||
|
}
|
||||||
|
}, [slideContainerRef, slideRefs])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
ref={slideContainerRef}
|
||||||
|
className="-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden"
|
||||||
|
>
|
||||||
|
{features.map((feature, featureIndex) => (
|
||||||
|
<div
|
||||||
|
key={featureIndex}
|
||||||
|
ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
|
||||||
|
className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
|
||||||
|
activeIndex === featureIndex
|
||||||
|
? 'outline-transparent' // Remove outline for active mobile slide
|
||||||
|
: 'outline-transparent hover:outline-cyan-500',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||||
|
<CircleBackground
|
||||||
|
id={`primaryfeatures_mobile_circle_${featureIndex}`}
|
||||||
|
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" />
|
||||||
|
<MobileFeatureTitle color="white" className="mt-6">
|
||||||
|
{feature.name}
|
||||||
|
</MobileFeatureTitle>
|
||||||
|
<FeatureDescription color="secondary" className="mt-2">
|
||||||
|
{feature.description}
|
||||||
|
</FeatureDescription>
|
||||||
|
</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() {
|
export function PrimaryFeatures() {
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
id="howitworks"
|
id="howitworks"
|
||||||
aria-label="How Mycelium works"
|
aria-label="Features for investing all your money"
|
||||||
className="bg-gray-900 py-20 sm:py-32"
|
className="bg-gray-900 py-20 sm:py-32"
|
||||||
>
|
>
|
||||||
<Container>
|
<Container>
|
||||||
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
|
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
|
||||||
<h2 className="text-base/7 font-semibold text-cyan-500">How It Works</h2>
|
<Eyebrow color="accent">How It Works</Eyebrow>
|
||||||
<p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
|
<SectionHeader color="white" className="mt-2">
|
||||||
How Mycelium Operates
|
How Mycelium Operates
|
||||||
</p>
|
</SectionHeader>
|
||||||
<p className="mt-6 text-lg text-gray-300">
|
<P color="light" className="mt-6">
|
||||||
Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
|
Mycelium, like its natural namesake, thrives on decentralization,
|
||||||
</p>
|
efficiency, and security, making it a truly powerful force in the world
|
||||||
|
of decentralized networks.
|
||||||
|
</P>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-16 text-center">
|
</Container>
|
||||||
<p className="text-lg text-gray-400">
|
<div className="mt-16 md:hidden">
|
||||||
Interactive features demonstration coming soon...
|
<FeaturesMobile />
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Container className="hidden md:mt-20 md:block">
|
||||||
|
<FeaturesDesktop />
|
||||||
</Container>
|
</Container>
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,4 +1,24 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
|
@import "tw-animate-css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--animate-scroll: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
|
||||||
|
|
||||||
|
@keyframes scroll {
|
||||||
|
to {
|
||||||
|
transform: translate(calc(-50% - 0.5rem));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
--animate-pulse-slow: pulse 6s ease-in-out infinite;
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
'0%, 100%': { opacity: '1' },
|
||||||
|
'50%': { opacity: '0.6' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@plugin '@tailwindcss/forms';
|
@plugin '@tailwindcss/forms';
|
||||||
|
|
||||||
@@ -53,7 +73,10 @@
|
|||||||
--color-gray-900: oklch(0.205 0 0);
|
--color-gray-900: oklch(0.205 0 0);
|
||||||
--color-gray-950: oklch(0.145 0 0);
|
--color-gray-950: oklch(0.145 0 0);
|
||||||
|
|
||||||
--font-sans: var(--font-inter);
|
--font-sans: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
--font-neuton: 'Neuton', serif;
|
||||||
|
|
||||||
|
--font-family-neuton: var(--font-neuton);
|
||||||
|
|
||||||
--container-2xl: 40rem;
|
--container-2xl: 40rem;
|
||||||
|
|
||||||
@@ -74,10 +97,127 @@
|
|||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--animate-marquee: marquee var(--marquee-duration) linear infinite;
|
--animate-marquee: marquee var(--marquee-duration) linear infinite;
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-background: var(--background);
|
||||||
|
|
||||||
@keyframes marquee {
|
@keyframes marquee {
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
|
||||||
|
--radius-xl: calc(var(--radius) + 4px)
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: oklch(1 0 0);
|
||||||
|
--foreground: oklch(0.145 0 0);
|
||||||
|
--card: oklch(1 0 0);
|
||||||
|
--card-foreground: oklch(0.145 0 0);
|
||||||
|
--popover: oklch(1 0 0);
|
||||||
|
--popover-foreground: oklch(0.145 0 0);
|
||||||
|
--primary: oklch(0.205 0 0);
|
||||||
|
--primary-foreground: oklch(0.985 0 0);
|
||||||
|
--secondary: oklch(0.97 0 0);
|
||||||
|
--secondary-foreground: oklch(0.205 0 0);
|
||||||
|
--muted: oklch(0.97 0 0);
|
||||||
|
--muted-foreground: oklch(0.556 0 0);
|
||||||
|
--accent: oklch(0.97 0 0);
|
||||||
|
--accent-foreground: oklch(0.205 0 0);
|
||||||
|
--destructive: oklch(0.577 0.245 27.325);
|
||||||
|
--border: oklch(0.922 0 0);
|
||||||
|
--input: oklch(0.922 0 0);
|
||||||
|
--ring: oklch(0.708 0 0);
|
||||||
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
|
--chart-4: oklch(0.828 0.189 84.429);
|
||||||
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
|
--sidebar: oklch(0.985 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.145 0 0);
|
||||||
|
--sidebar-primary: oklch(0.205 0 0);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.97 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: oklch(0.145 0 0);
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.205 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.205 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: oklch(0.922 0 0);
|
||||||
|
--primary-foreground: oklch(0.205 0 0);
|
||||||
|
--secondary: oklch(0.269 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.269 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: oklch(0.269 0 0);
|
||||||
|
--accent-foreground: oklch(0.985 0 0);
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: oklch(0.556 0 0);
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.205 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||||
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-accent: oklch(0.269 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: oklch(0.556 0 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
},
|
||||||
"target": "ES2022",
|
"target": "ES2022",
|
||||||
"useDefineForClassFields": true,
|
"useDefineForClassFields": true,
|
||||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
{
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
"files": [],
|
"files": [],
|
||||||
"references": [
|
"references": [
|
||||||
{ "path": "./tsconfig.app.json" },
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
|||||||
@@ -1,7 +1,13 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import react from '@vitejs/plugin-react'
|
import react from '@vitejs/plugin-react'
|
||||||
|
import path from 'node:path'
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './src'),
|
||||||
|
},
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user