Compare commits
30 Commits
205c8fd0d9
...
developmen
| Author | SHA1 | Date | |
|---|---|---|---|
|
45b1c43b97 | ||
|
|
26fbea3ec4 | ||
|
|
3a7aa82ff7 | ||
| 644bb34419 | |||
| 9b3c620706 | |||
| 987b46588b | |||
| df88c4a14f | |||
| dfb469e7f7 | |||
| a3cd28fc6b | |||
| 758a004ce9 | |||
| 73832e2686 | |||
| 4cc98af570 | |||
|
|
4c30524504 | ||
| 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"
|
||||
}
|
||||
}
|
||||
10
index.html
10
index.html
@@ -4,16 +4,10 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mycelium - Unleash the Power of Decentralized Networks</title>
|
||||
<meta name="description" content="Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking." />
|
||||
<title>Project Mycelium - Unleash the Power of Decentralized Networks</title>
|
||||
<meta name="description" content="Project Mycelium's technology enables anyone to deploy their own Internet infrastructure, anywhere." />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
9699
package-lock.json
generated
9699
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
55
package.json
55
package.json
@@ -10,33 +10,48 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-router-dom": "^7.1.3",
|
||||
"framer-motion": "^11.18.0",
|
||||
"@emailjs/browser": "^4.4.1",
|
||||
"@headlessui/react": "^2.2.9",
|
||||
"@heroicons/react": "^2.2.0",
|
||||
"@lobehub/icons": "^1.97.2",
|
||||
"@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",
|
||||
"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-dom": "^18.3.1",
|
||||
"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": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
"@tailwindcss/forms": "^0.5.9",
|
||||
"@tailwindcss/postcss": "^4.1.7",
|
||||
"@types/node": "^24.6.0",
|
||||
"@types/react": "^19.1.16",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@tailwindcss/postcss": "^4.1.15",
|
||||
"@types/three": "^0.151.0",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.22",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.1",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.45.0",
|
||||
"eslint": "^8.57.1",
|
||||
"prettier": "^3.6.2",
|
||||
"prettier-plugin-tailwindcss": "^0.6.14",
|
||||
"sharp": "^0.33.1",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"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/chip_vid.mp4
Normal file
BIN
public/videos/chip_vid.mp4
Normal file
Binary file not shown.
BIN
public/videos/cloud.mp4
Normal file
BIN
public/videos/cloud.mp4
Normal file
Binary file not shown.
@@ -4,6 +4,7 @@ import HomePage from './pages/home/HomePage'
|
||||
import CloudPage from './pages/cloud/CloudPage'
|
||||
import NetworkPage from './pages/network/NetworkPage'
|
||||
import AgentsPage from './pages/agents/AgentsPage'
|
||||
import DownloadPage from './pages/download/DownloadPage'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -14,6 +15,7 @@ function App() {
|
||||
<Route path="cloud" element={<CloudPage />} />
|
||||
<Route path="network" element={<NetworkPage />} />
|
||||
<Route path="agents" element={<AgentsPage />} />
|
||||
<Route path="download" element={<DownloadPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
import { useRef } from 'react'
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export function AnimatedSection({ children }: { children: React.ReactNode }) {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })
|
||||
type AnimatedSectionProps = {
|
||||
children: React.ReactNode
|
||||
id?: string
|
||||
className?: string
|
||||
}
|
||||
|
||||
export function AnimatedSection({ children, id, className }: AnimatedSectionProps) {
|
||||
return (
|
||||
<motion.section
|
||||
ref={ref}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
animate={{
|
||||
opacity: isInView ? 1 : 0,
|
||||
y: isInView ? 0 : 50,
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
id={id}
|
||||
className={className}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: '-25% 0px -20% 0px' }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
>
|
||||
{children}
|
||||
</motion.section>
|
||||
|
||||
@@ -3,9 +3,9 @@ import clsx from 'clsx'
|
||||
|
||||
const baseStyles = {
|
||||
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:
|
||||
'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 = {
|
||||
|
||||
220
src/components/ContactForm.tsx
Normal file
220
src/components/ContactForm.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'use client'
|
||||
|
||||
import { AnimatePresence, motion } from 'framer-motion'
|
||||
import { useState, type ChangeEvent, type FormEvent } from 'react'
|
||||
import emailjs from '@emailjs/browser'
|
||||
import { CheckCircle, Send, X } from 'lucide-react'
|
||||
|
||||
interface ContactFormProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
title?: string
|
||||
formType?: 'investor' | 'partner' | 'agent_waitlist'
|
||||
}
|
||||
|
||||
const initialFormState = {
|
||||
name: '',
|
||||
email: '',
|
||||
company: '',
|
||||
message: '',
|
||||
}
|
||||
|
||||
export default function ContactForm({
|
||||
isOpen,
|
||||
onClose,
|
||||
title = 'Book a Meeting',
|
||||
formType,
|
||||
}: ContactFormProps) {
|
||||
const [formData, setFormData] = useState(initialFormState)
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
|
||||
const handleInputChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const { name, value } = e.target
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const templateParams = {
|
||||
from_name: formData.name,
|
||||
from_email: formData.email,
|
||||
company: formData.company,
|
||||
message: formData.message,
|
||||
to_email: 'emre@incubaid.com',
|
||||
form_type: formType || 'General Inquiry',
|
||||
}
|
||||
|
||||
await emailjs.send(
|
||||
'service_03d0vf8',
|
||||
'template_6o6e8oe',
|
||||
templateParams,
|
||||
'bhkly3gzrO-SA9w7v',
|
||||
)
|
||||
|
||||
setIsSubmitted(true)
|
||||
setTimeout(() => {
|
||||
setIsSubmitted(false)
|
||||
setFormData(initialFormState)
|
||||
onClose()
|
||||
}, 3000)
|
||||
} catch (error) {
|
||||
console.error('Email sending failed:', error)
|
||||
alert('Failed to send message. Please try again.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<motion.div
|
||||
className="relative w-full max-w-md overflow-hidden rounded-2xl bg-card shadow-2xl"
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-border p-6">
|
||||
<h3 className="text-xl font-bold text-foreground">{title}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-lg p-2 transition-colors hover:bg-muted"
|
||||
aria-label="Close form"
|
||||
>
|
||||
<X className="h-5 w-5 text-muted-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
{isSubmitted ? (
|
||||
<motion.div
|
||||
className="py-8 text-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
>
|
||||
<CheckCircle className="mx-auto mb-4 h-16 w-16 text-primary" />
|
||||
<h4 className="mb-2 text-lg font-semibold text-foreground">Thank you!</h4>
|
||||
<p className="text-muted-foreground">We'll get back to you soon.</p>
|
||||
</motion.div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="mb-1 block text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="Your full name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="email"
|
||||
className="mb-1 block text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="your.email@company.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="company"
|
||||
className="mb-1 block text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Company
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleInputChange}
|
||||
className="w-full rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="message"
|
||||
className="mb-1 block text-sm font-medium text-muted-foreground"
|
||||
>
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
rows={4}
|
||||
className="w-full resize-none rounded-lg border border-border bg-muted/30 px-4 py-3 text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder={
|
||||
formType === 'investor'
|
||||
? 'Tell us about your investment interests and how we can collaborate.'
|
||||
: formType === 'agent_waitlist'
|
||||
? 'Tell us about your sovereign agent requirements.'
|
||||
: 'Tell us about your project or how we can help.'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="flex w-full items-center justify-center rounded-lg bg-primary px-6 py-3 font-semibold text-primary-foreground transition-opacity disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="mr-2 h-5 w-5 animate-spin rounded-full border-2 border-primary-foreground/30 border-t-primary-foreground" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="h-5 w-5" />
|
||||
<span className="ml-2">Send Message</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
27
src/components/FadeIn.tsx
Normal file
27
src/components/FadeIn.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
'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: true, amount: isMobile ? 0.2 : 0.3 }}
|
||||
transition={transition || { duration: 0.5, ease: 'easeOut' }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -10,8 +10,8 @@ export function Footer() {
|
||||
<div className="flex items-center text-gray-900">
|
||||
<img src="/src/images/logomark.svg" alt="Mycelium Logomark" className="h-20 w-20 flex-none" />
|
||||
<div className="ml-4">
|
||||
<p className="text-base font-semibold">Mycelium</p>
|
||||
<p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
|
||||
<p className="text-base font-semibold">Project Mycelium</p>
|
||||
<p className="mt-1 text-sm">Unleash the Power of Decentralization</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="mt-10 flex gap-8">
|
||||
@@ -35,10 +35,10 @@ export function Footer() {
|
||||
</div>
|
||||
<div className="ml-4 lg:w-72">
|
||||
<p className="text-base font-semibold text-gray-900">
|
||||
<a href="https://github.com/threefoldtech/mycelium/releases/" target="_blank" rel="noopener noreferrer">
|
||||
<Link to="/download">
|
||||
<span className="absolute inset-0 sm:rounded-2xl" />
|
||||
Download Mycelium
|
||||
</a>
|
||||
Download Mycelium Connector
|
||||
</Link>
|
||||
</p>
|
||||
<p className="mt-1 text-sm text-gray-700">
|
||||
Head to the GitHub to access the latest Mycelium builds for your devices.
|
||||
|
||||
@@ -1,23 +1,18 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Container } from './Container'
|
||||
import { Button } from './Button'
|
||||
import pmyceliumLogo from '../images/logos/pmyceliumlogo.png'
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<header>
|
||||
<nav>
|
||||
<Container className="relative z-50 flex justify-between py-8">
|
||||
<Container className="relative z-50 flex justify-between py-4">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Link to="/" aria-label="Home">
|
||||
<img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
|
||||
<img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
|
||||
</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"
|
||||
@@ -41,16 +36,16 @@ export function Header() {
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-6 max-lg:hidden">
|
||||
<Button
|
||||
to="https://threefold.info/mycelium_network/docs/"
|
||||
to="https://myceliumcloud.tf"
|
||||
variant="outline"
|
||||
as="a"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Docs
|
||||
Start Deployment
|
||||
</Button>
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { Header } from './Header'
|
||||
import { Footer } from './Footer'
|
||||
import { Header } from './Header'
|
||||
|
||||
export function Layout() {
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
|
||||
<div className="bg-white antialiased" style={{ fontFamily: 'var(--font-inter)' }}>
|
||||
<Header />
|
||||
<main>
|
||||
<main className="">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
163
src/components/Texts.tsx
Normal file
163
src/components/Texts.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
'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
|
||||
children?: React.ReactNode
|
||||
}
|
||||
|
||||
// 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')
|
||||
138
src/components/features-section-demo-1.tsx
Normal file
138
src/components/features-section-demo-1.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
27
src/components/ui/FadeIn.tsx
Normal file
27
src/components/ui/FadeIn.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
'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: true, amount: isMobile ? 0.2 : 0.3 }}
|
||||
transition={transition || { duration: 0.5, ease: 'easeOut' }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
@@ -1,47 +1,159 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import createGlobe from 'cobe'
|
||||
"use client";
|
||||
|
||||
export function Globe({ className }: { className?: string }) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
import createGlobe, { type COBEOptions } from "cobe";
|
||||
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(() => {
|
||||
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, {
|
||||
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 },
|
||||
],
|
||||
const globe = createGlobe(canvasRef.current!, {
|
||||
...config,
|
||||
width: width * 2,
|
||||
height: width * 2,
|
||||
onRender: (state) => {
|
||||
state.phi = phi
|
||||
phi += 0.01
|
||||
if (!pointerInteracting.current) phi += 0.004; // slightly slower rotation for elegance
|
||||
state.phi = phi + rs.get();
|
||||
state.width = width * 2;
|
||||
state.height = width * 2;
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
|
||||
return () => {
|
||||
globe.destroy()
|
||||
}
|
||||
}, [])
|
||||
globe.destroy();
|
||||
window.removeEventListener("resize", onResize);
|
||||
};
|
||||
}, [rs, config]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className={className}
|
||||
style={{ width: '100%', height: '100%', maxWidth: '100%', aspectRatio: 1 }}
|
||||
/>
|
||||
)
|
||||
<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
|
||||
className={cn(
|
||||
"size-full opacity-0 transition-opacity duration-500 [contain:layout_paint_size]",
|
||||
)}
|
||||
ref={canvasRef}
|
||||
onPointerDown={(e) => {
|
||||
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 }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
89
src/components/ui/HalfGlobe.tsx
Normal file
89
src/components/ui/HalfGlobe.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { Canvas, useFrame } from "@react-three/fiber";
|
||||
import { Line, OrbitControls, useTexture } from "@react-three/drei";
|
||||
import { useMemo, useRef } from "react";
|
||||
|
||||
type RotatableGroup = {
|
||||
rotation: { y: number };
|
||||
};
|
||||
|
||||
function Globe() {
|
||||
const groupRef = useRef<RotatableGroup | null>(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 markers = [
|
||||
[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],
|
||||
];
|
||||
const arcPoints = useMemo(() => {
|
||||
const radius = 2.5;
|
||||
const verticalRadius = radius / 2;
|
||||
const segments = 120;
|
||||
|
||||
return Array.from({ length: 8 }, () => {
|
||||
const points: number[] = [];
|
||||
for (let i = 0; i < segments; i++) {
|
||||
const t = (i / (segments - 1)) * Math.PI;
|
||||
const x = Math.cos(t) * radius;
|
||||
const z = Math.sin(t) * verticalRadius;
|
||||
const y = Math.sin(x / radius) * 0.5;
|
||||
points.push(x, y, z);
|
||||
}
|
||||
return points;
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
{/* Cyan arcs */}
|
||||
{arcPoints.map((points, i) => (
|
||||
<Line
|
||||
key={i}
|
||||
points={points}
|
||||
color="#00e5ff"
|
||||
lineWidth={1}
|
||||
transparent
|
||||
opacity={0.5}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Cloud markers */}
|
||||
{markers.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={2 /* 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 type { CSSProperties, HTMLProps, ReactNode } from "react";
|
||||
|
||||
interface AuroraBackgroundProps extends 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 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);
|
||||
304
src/components/ui/dotted-glow-background.tsx
Normal file
304
src/components/ui/dotted-glow-background.tsx
Normal file
@@ -0,0 +1,304 @@
|
||||
"use client";
|
||||
|
||||
import { 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();
|
||||
|
||||
const draw = (now: number) => {
|
||||
if (stopped) return;
|
||||
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 Connector
|
||||
</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/desktop.png
Normal file
BIN
src/images/desktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 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 |
BIN
src/images/logos/pmyceliumlogo.png
Normal file
BIN
src/images/logos/pmyceliumlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
@@ -214,7 +214,7 @@
|
||||
</filter>
|
||||
<radialGradient id="b" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0 727 -642 0 184 1)">
|
||||
<stop stop-color="#FAFAFA" />
|
||||
<stop stop-color="#FFFFFF" />
|
||||
<stop offset="1" stop-color="#E6E6E6" />
|
||||
</radialGradient>
|
||||
<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 {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: 'Mulish', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
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))
|
||||
}
|
||||
125
src/pages/agents/AgentsHero.tsx
Normal file
125
src/pages/agents/AgentsHero.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client'
|
||||
|
||||
import { useId, useState } from 'react'
|
||||
|
||||
import { Button } from '../../components/Button'
|
||||
import { Container } from '../../components/Container'
|
||||
import ContactForm from '../../components/ContactForm'
|
||||
|
||||
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
const id = useId()
|
||||
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-slow"
|
||||
>
|
||||
<path
|
||||
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M513 1025C230.23 1025 1 795.77 1 513"
|
||||
stroke={`url(#${id}-gradient-1)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-1`}
|
||||
x1="1"
|
||||
y1="513"
|
||||
x2="1"
|
||||
y2="1025"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
|
||||
>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400"
|
||||
stroke={`url(#${id}-gradient-2)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-2`}
|
||||
x1="913"
|
||||
y1="513"
|
||||
x2="913"
|
||||
y2="913"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function AgentsHero() {
|
||||
const [isContactOpen, setIsContactOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
|
||||
<Container>
|
||||
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
|
||||
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
|
||||
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
|
||||
Mycelium Agents
|
||||
</h1>
|
||||
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
|
||||
Sovereign AI agents, coming soon.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
|
||||
Hero is the autonomous agent layer for the Mycelium platform—trusted, policy-aware AI that runs on infrastructure you control and remembers what matters.
|
||||
</p>
|
||||
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
|
||||
<Button variant="solid" color="cyan" onClick={() => setIsContactOpen(true)}>
|
||||
Join the Waitlist
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
|
||||
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
|
||||
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
|
||||
<img
|
||||
src="/images/agent_icon.png"
|
||||
alt="Preview of Hero sovereign agent orchestration"
|
||||
className="mx-auto w-full max-w-[520px]"
|
||||
width={1024}
|
||||
height={1024}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
<ContactForm
|
||||
isOpen={isContactOpen}
|
||||
onClose={() => setIsContactOpen(false)}
|
||||
title="Join the Waitlist"
|
||||
formType="agent_waitlist"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,15 +1,25 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { AgentsHero } from './AgentsHero'
|
||||
import { DeploySection } from './DeploySection'
|
||||
import { GallerySection } from './GallerySection'
|
||||
import { Companies } from './Companies'
|
||||
import { BentoSection } from './BentoSection'
|
||||
|
||||
export default function AgentsPage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<AgentsHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<DeploySection />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
<AnimatedSection>
|
||||
<Companies />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<GallerySection />
|
||||
</AnimatedSection>
|
||||
|
||||
@@ -1,56 +1,64 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts'
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'FungiStor',
|
||||
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.',
|
||||
video: '/videos/fungistor.mp4',
|
||||
},
|
||||
{
|
||||
title: 'HeroDB',
|
||||
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.',
|
||||
video: '/videos/herodb.mp4',
|
||||
},
|
||||
{
|
||||
title: 'MOS Sandboxes',
|
||||
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.',
|
||||
video: '/videos/sandbox.mp4',
|
||||
},
|
||||
{
|
||||
title: 'Mycelium Mesh',
|
||||
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.',
|
||||
video: '/videos/mesh.mp4',
|
||||
},
|
||||
{
|
||||
title: 'Deterministic Deployment',
|
||||
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.',
|
||||
video: '/videos/deterministic.mp4',
|
||||
},
|
||||
{
|
||||
title: 'Agent Coordination',
|
||||
subtitle: 'Sovereign Workflow Management',
|
||||
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() {
|
||||
return (
|
||||
<section className="bg-white py-20 lg:py-32">
|
||||
<section className="bg-black py-20 lg:py-32">
|
||||
<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"
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.6, ease: 'easeOut' }}
|
||||
className="mx-auto mb-16 max-w-3xl text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Augmented Intelligence Fabric
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
|
||||
</p>
|
||||
<Eyebrow color="accent">Components</Eyebrow>
|
||||
<SectionHeader color="light">
|
||||
Intelligence Fabric
|
||||
</SectionHeader>
|
||||
<P className="mt-6" color="lightSecondary">
|
||||
A complete infrastructure for building and deploying sovereign AI agents with enterprise-grade security and performance. Your data never leaves your control.
|
||||
</P>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@@ -59,13 +67,21 @@ export function BentoSection() {
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
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"
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.45, delay: index * 0.1, ease: 'easeOut' }}
|
||||
className="overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 p-6 transition-all duration-300 hover:scale-105 hover:border-cyan-500 hover:shadow-lg"
|
||||
>
|
||||
<h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
|
||||
<p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
|
||||
<p className="mt-3 text-sm text-gray-600">{item.description}</p>
|
||||
<video
|
||||
src={item.video}
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
|
||||
76
src/pages/agents/Companies.tsx
Normal file
76
src/pages/agents/Companies.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
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 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
>
|
||||
<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,69 +1,95 @@
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { useRef } from 'react'
|
||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
|
||||
import { Container } from '../../components/Container'
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
|
||||
type CircleIconProps = ComponentPropsWithoutRef<"svg">;
|
||||
|
||||
const CircleNumber1Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm.994 5.886c-.083-.777-1.008-1.16-1.617-.67l-.084.077-2 2-.083.094a1 1 0 000 1.226l.083.094.094.083a1 1 0 001.226 0l.094-.083.293-.293v5.586l.007.117a1 1 0 001.986 0l.007-.117v-8l-.006-.114z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CircleNumber2Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-3l-.117.007a1 1 0 000 1.986l.117.007h3v2h-2l-.15.005a2 2 0 00-1.844 1.838l-.006.157v2l.005.15a2 2 0 001.838 1.844l.157.006h3l.117-.007a1 1 0 000-1.986l-.117-.007h-3v-2h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const CircleNumber3Icon = (props: CircleIconProps) => (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" {...props}>
|
||||
<path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm1 5h-2l-.15.005a2 2 0 00-1.85 1.995 1 1 0 001.974.23l.02-.113.006-.117h2v2h-2l-.133.007c-1.111.12-1.154 1.73-.128 1.965l.128.021.133.007h2v2h-2l-.007-.117a1 1 0 00-1.993.117 2 2 0 001.85 1.995l.15.005h2l.15-.005a2 2 0 001.844-1.838l.006-.157v-2l-.005-.15a1.988 1.988 0 00-.17-.667l-.075-.152-.019-.032.02-.03a2.01 2.01 0 00.242-.795l.007-.174v-2l-.005-.15a2 2 0 00-1.838-1.844l-.157-.006z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Choose Your Intelligence',
|
||||
description: 'Explore a library of leading LLMs and agentic functions. Pick the ones that fit your use case, from general assistants to specialized reasoning models.',
|
||||
icon: TbCircleNumber1Filled,
|
||||
icon: CircleNumber1Icon,
|
||||
},
|
||||
{
|
||||
name: 'Add Your Knowledge',
|
||||
description:
|
||||
'Connect your data or knowledge base to enable personalized, context-aware results while keeping your information private.',
|
||||
icon: TbCircleNumber2Filled,
|
||||
icon: CircleNumber2Icon,
|
||||
},
|
||||
{
|
||||
name: 'Define Your Network',
|
||||
description:
|
||||
'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
|
||||
icon: TbCircleNumber3Filled,
|
||||
icon: CircleNumber3Icon,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
export function DeploySection() {
|
||||
const ref = useRef(null)
|
||||
const isInView = useInView(ref, { once: true })
|
||||
|
||||
return (
|
||||
<section ref={ref} className="bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<section id="benefits" className="relative bg-black px-4 pb-4 pt-12 text-white lg:px-12 lg:pt-24">
|
||||
<div className="relative px-6 lg:px-12">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="mx-auto max-w-3xl text-center"
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.3 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut", delay: 0.1 }}
|
||||
className="mx-auto max-w-5xl text-center"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Deploy Scalable LLMs and AI Agents in Seconds
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
<Eyebrow color="accent">Get Started</Eyebrow>
|
||||
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
|
||||
Deploy Scalable LLMs and AI Agents
|
||||
</SectionHeader>
|
||||
<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.
|
||||
</p>
|
||||
</P>
|
||||
</motion.div>
|
||||
<motion.ul
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
|
||||
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"
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mx-auto 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:mt-12 lg:max-w-7xl lg:grid-cols-3"
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<motion.li
|
||||
key={feature.name}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
|
||||
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"
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.45, delay: 0.3 + index * 0.15, ease: "easeOut" }}
|
||||
className="rounded-2xl border border-gray-300 bg-white/5 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 backdrop-blur-md"
|
||||
>
|
||||
<feature.icon className="h-8 w-8 mb-4 text-cyan-500" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-3 text-sm text-gray-600">{feature.description}</p>
|
||||
<feature.icon className="mb-4 h-8 w-8 text-white" />
|
||||
<CT as="span" className="text-left font-semibold" color="light">
|
||||
{feature.name}
|
||||
</CT>
|
||||
<CP className="mt-2 text-left text-sm" color="light">
|
||||
{feature.description}
|
||||
</CP>
|
||||
</motion.li>
|
||||
))}
|
||||
</motion.ul>
|
||||
</Container>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,58 +1,178 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
'use client'
|
||||
|
||||
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 = [
|
||||
{ text: 'Navigate and interact with any web interface', image: '/images/gallery/interface.jpg' },
|
||||
{ text: 'Process documents across all formats', image: '/images/gallery/docs.jpg' },
|
||||
{ text: 'Execute multi-step workflows autonomously', image: '/images/gallery/flow.jpg' },
|
||||
{ text: 'Manage calendars, emails, and tasks', image: '/images/gallery/calendar.jpg' },
|
||||
{ text: 'Perform deep semantic search across all data sources', image: '/images/gallery/data.jpg' },
|
||||
{ text: 'Identify patterns in complex datasets', image: '/images/gallery/datasets.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', width: 448, height: 277 },
|
||||
{ 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', width: 448, height: 277 },
|
||||
{ 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', 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() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-20 lg:py-32">
|
||||
<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>
|
||||
// 🔧 Carousel Config
|
||||
const VISIBLE = 4;
|
||||
const AUTOPLAY_MS = 3200;
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{galleryItems.map((item, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="group relative overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
|
||||
>
|
||||
<div className="aspect-video overflow-hidden">
|
||||
<img
|
||||
src={item.image}
|
||||
alt={item.text}
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-sm font-medium text-gray-900">{item.text}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
export function GallerySection() {
|
||||
const [active, setActive] = useState(0);
|
||||
const [hovering, setHovering] = useState(false);
|
||||
const { GAP, ROT_Y, DEPTH, SCALE_DROP } = useResponsiveCarousel();
|
||||
|
||||
// autoplay
|
||||
useEffect(() => {
|
||||
if (hovering) return
|
||||
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="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
|
||||
src={item.image}
|
||||
alt={item.text}
|
||||
width={item.width}
|
||||
height={item.height}
|
||||
className="object-contain"
|
||||
/>
|
||||
</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>
|
||||
</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,35 +1,33 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
import { Button } from '../../components/Button'
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
|
||||
export function CloudCTA() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32 overflow-hidden">
|
||||
<CircleBackground color="cyan" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
|
||||
<section className="relative overflow-hidden py-24 lg:py-32">
|
||||
<Container className="relative">
|
||||
<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"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-5xl font-medium tracking-tight text-gray-900">
|
||||
Ready to Transform Your Kubernetes Experience?
|
||||
</h2>
|
||||
<p className="mt-6 text-lg lg:text-xl text-gray-600">
|
||||
Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-500">
|
||||
Ready Today
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap gap-4 justify-center">
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Start Your Free Trial
|
||||
</Button>
|
||||
<Button to="https://manual.grid.tf" variant="outline" color="gray">
|
||||
Read Documentation
|
||||
<h2 className="mt-6 text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">
|
||||
Join thousands of developers and DevOps engineers who trust Mycelium Cloud for their production workloads.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Revolutionary Kubernetes automation, deterministic compute, and quantum-safe storage—delivered as a turnkey platform so your team can deploy, scale, and operate cloud-native applications with confidence.
|
||||
</p>
|
||||
<div className="mt-10 flex justify-center">
|
||||
<Button
|
||||
to="https://myceliumcloud.tf"
|
||||
as="a"
|
||||
variant="solid"
|
||||
color="cyan"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Start Deployment
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
|
||||
@@ -1,65 +1,113 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Globe } from '../../components/ui/Globe'
|
||||
import { CountUpNumber } from '../../components/CountUpNumber'
|
||||
import { useId } from 'react'
|
||||
|
||||
import { Button } from '../../components/Button'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const stats = [
|
||||
{ value: 54958, label: 'CPU Cores' },
|
||||
{ value: 1493, label: 'Nodes' },
|
||||
{ value: 5388956, label: 'GB Storage' },
|
||||
{ value: 44, label: 'Countries' },
|
||||
]
|
||||
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
|
||||
const id = useId()
|
||||
|
||||
return (
|
||||
<div {...props}>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-slow"
|
||||
>
|
||||
<path
|
||||
d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M513 1025C230.23 1025 1 795.77 1 513"
|
||||
stroke={`url(#${id}-gradient-1)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-1`}
|
||||
x1="1"
|
||||
y1="513"
|
||||
x2="1"
|
||||
y2="1025"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<svg
|
||||
viewBox="0 0 1026 1026"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
|
||||
>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
|
||||
stroke="#D4D4D4"
|
||||
strokeOpacity="0.7"
|
||||
/>
|
||||
<path
|
||||
d="M913 513c0 220.914-179.086 400-400 400"
|
||||
stroke={`url(#${id}-gradient-2)`}
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${id}-gradient-2`}
|
||||
x1="913"
|
||||
y1="513"
|
||||
x2="913"
|
||||
y2="913"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#06b6d4" />
|
||||
<stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function CloudHero() {
|
||||
return (
|
||||
<section className="relative bg-white py-20 lg:py-32">
|
||||
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Text Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
|
||||
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
|
||||
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
|
||||
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
|
||||
Mycelium Cloud
|
||||
</h1>
|
||||
<p className="mt-6 text-lg lg:text-xl text-gray-600">
|
||||
Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
|
||||
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
|
||||
Own every workload with certainty.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600 leading-tight lg:text-xl lg:leading-normal">
|
||||
Mycelium Cloud blends deterministic compute with quantum-safe storage, delivering a sovereign platform built for zero-ops automation.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Globe */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
<div className="relative w-full max-w-[500px] aspect-square">
|
||||
<Globe className="w-full h-full" />
|
||||
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
|
||||
<Button to="https://myceliumcloud.tf" variant="solid" color="cyan">
|
||||
Start Deployment
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
|
||||
{stats.map((stat, index) => (
|
||||
<motion.div
|
||||
key={stat.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
||||
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="text-2xl lg:text-3xl font-bold text-cyan-500">
|
||||
<CountUpNumber end={stat.value} />
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-gray-600">{stat.label}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
|
||||
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
|
||||
<div className="mx-auto h-[420px] max-w-[640px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-36">
|
||||
<img
|
||||
src="/src/images/desktop.png"
|
||||
alt="Mycelium Cloud dashboard preview"
|
||||
className="mx-auto w-full max-w-[640px]"
|
||||
width={1366}
|
||||
height={768}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
65
src/pages/cloud/CloudOverview.tsx
Normal file
65
src/pages/cloud/CloudOverview.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const focusAreas = [
|
||||
{
|
||||
title: 'Sovereign by Design',
|
||||
description:
|
||||
'Control jurisdiction, residency, and governance for every workload with transparent, verifiable operations.',
|
||||
},
|
||||
{
|
||||
title: 'Secure by Default',
|
||||
description:
|
||||
'Cryptographic verification, secure boot, and zero-image delivery protect the entire lifecycle automatically.',
|
||||
},
|
||||
{
|
||||
title: 'Ready to Scale',
|
||||
description:
|
||||
'Autonomous orchestration keeps the platform elastic, cost-efficient, and always available across the globe.',
|
||||
},
|
||||
]
|
||||
|
||||
export function CloudOverview() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<CircleBackground
|
||||
color="#06b6d4"
|
||||
className="absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2 opacity-40"
|
||||
/>
|
||||
<CircleBackground
|
||||
color="#22d3ee"
|
||||
className="absolute -top-24 right-1/4 h-[420px] w-[420px] opacity-30 sm:opacity-40"
|
||||
/>
|
||||
</div>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
|
||||
Mycelium Cloud
|
||||
</p>
|
||||
<h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
|
||||
A sovereign, self-healing cloud built for trusted automation.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Run critical workloads on a programmable substrate that keeps data private, compute deterministic, and operations autonomous.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
||||
{focusAreas.map((item) => (
|
||||
<div
|
||||
key={item.title}
|
||||
className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
|
||||
>
|
||||
<div className="text-lg font-semibold text-white">
|
||||
{item.title}
|
||||
</div>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,42 +1,28 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { CloudHero } from './CloudHero'
|
||||
import { FeaturesSection } from './FeaturesSection'
|
||||
import { MyceliumNetworking } from './MyceliumNetworking'
|
||||
import { WebGateway } from './WebGateway'
|
||||
import { MultiMaster } from './MultiMaster'
|
||||
import { LoadBalancing } from './LoadBalancing'
|
||||
import { CloudOverview } from './CloudOverview'
|
||||
import { ComputeStorageSplit } from './ComputeStorageSplit'
|
||||
import { SecurityPillars } from './SecurityPillars'
|
||||
import { CloudCTA } from './CloudCTA'
|
||||
|
||||
export default function CloudPage() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<AnimatedSection>
|
||||
<CloudHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<FeaturesSection />
|
||||
<CloudOverview />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<MyceliumNetworking />
|
||||
<ComputeStorageSplit />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<WebGateway />
|
||||
<SecurityPillars />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<MultiMaster />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<LoadBalancing />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<CloudCTA />
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
144
src/pages/cloud/ComputeStorageSplit.tsx
Normal file
144
src/pages/cloud/ComputeStorageSplit.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const computeFeatures = [
|
||||
{
|
||||
title: 'Deterministic Deployments',
|
||||
description:
|
||||
'Cryptographic verification ensures every workload deploys exactly as intended—no tampering, no drift.',
|
||||
},
|
||||
{
|
||||
title: 'Self-Managing & Stateless Infrastructure',
|
||||
description:
|
||||
'Fully autonomous infrastructure that scales globally without manual intervention.',
|
||||
},
|
||||
{
|
||||
title: 'Zero-Image Technology (100x Compression)',
|
||||
description:
|
||||
'Metadata-driven zero-images cut artifacts up to 100x, slashing bandwidth and deployment overhead.',
|
||||
},
|
||||
{
|
||||
title: 'Smart Contract-Based Deployment',
|
||||
description:
|
||||
'Cryptographically signed contracts orchestrate every workload with transparent, tamper-proof execution.',
|
||||
},
|
||||
{
|
||||
title: 'Multi-Workload Compatibility with Secure Boot',
|
||||
description:
|
||||
'Run containers, VMs, and Linux workloads anywhere with stateless secure boot and continuous verification.',
|
||||
},
|
||||
]
|
||||
|
||||
const storageFeatures = [
|
||||
{
|
||||
title: 'Quantum-Safe Storage (QSS)',
|
||||
description:
|
||||
'Quantum-resistant encryption secures data beyond the app layer so ownership and control stay yours.',
|
||||
},
|
||||
{
|
||||
title: 'Self-Healing Storage System',
|
||||
description:
|
||||
'Autonomous recovery heals failures or corruption instantly, preserving integrity without human intervention.',
|
||||
},
|
||||
{
|
||||
title: 'Multi-Protocol Data Access',
|
||||
description:
|
||||
'Serve the same data via IPFS, S3, WebDAV, HTTP, and native file systems for seamless integration.',
|
||||
},
|
||||
{
|
||||
title: 'Geo-Aware Data Placement & Replication',
|
||||
description:
|
||||
'Define residency, redundancy, and distribution per workload while zone-to-zone replication hardens resilience.',
|
||||
},
|
||||
{
|
||||
title: 'Ultra-Efficient Zero-Images (Flists)',
|
||||
description:
|
||||
'Metadata-only flists shrink images up to 100x, replacing heavy VMs and powering instant Zero-OS deployments.',
|
||||
},
|
||||
]
|
||||
|
||||
export function ComputeStorageSplit() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-white">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-slate-50" />
|
||||
<Container className="relative py-24 lg:py-32">
|
||||
<div className="grid gap-12 lg:grid-cols-12 lg:gap-16">
|
||||
<div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
|
||||
<div className="max-w-xs">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-cyan-500">
|
||||
Compute
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
|
||||
Deterministic compute fabric.
|
||||
</h2>
|
||||
<p className="mt-4 text-sm text-gray-500">
|
||||
Launch workloads with cryptographic certainty and autonomous operations.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="grid w-full gap-4">
|
||||
{computeFeatures.map((item) => (
|
||||
<li
|
||||
key={item.title}
|
||||
className="flex flex-col gap-1 rounded-2xl border border-cyan-100 bg-white/80 p-4 text-center transition hover:border-cyan-400/70 hover:bg-cyan-50/60 dark:bg-white/10"
|
||||
>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs text-gray-500 leading-relaxed"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="hidden lg:flex lg:col-span-2 lg:items-center lg:justify-center">
|
||||
<span className="h-full w-px bg-gradient-to-b from-transparent via-cyan-200 to-transparent" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-10 text-center lg:col-span-5 lg:items-center lg:text-center">
|
||||
<div className="max-w-xs">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">
|
||||
Storage
|
||||
</p>
|
||||
<h2 className="mt-4 text-3xl font-medium tracking-tight text-gray-900">
|
||||
Quantum-safe, sovereign data plane.
|
||||
</h2>
|
||||
<p className="mt-4 text-sm text-gray-500">
|
||||
Protect and place data precisely while keeping access effortless.
|
||||
</p>
|
||||
</div>
|
||||
<ul className="grid w-full gap-4">
|
||||
{storageFeatures.map((item) => (
|
||||
<li
|
||||
key={item.title}
|
||||
className="flex flex-col gap-1 rounded-2xl border border-slate-200 bg-white/80 p-4 text-center transition hover:border-cyan-400/60 hover:bg-cyan-50/40 dark:bg-white/10"
|
||||
>
|
||||
<span className="text-sm font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs text-gray-500 leading-relaxed"
|
||||
style={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '☁️',
|
||||
title: 'Cloud-Native Architecture',
|
||||
description: 'Built for the cloud with support for all major cloud providers and on-premise deployments.',
|
||||
},
|
||||
{
|
||||
icon: '🛡️',
|
||||
title: 'Enterprise Security',
|
||||
description: 'Advanced security features including RBAC, network policies, and compliance monitoring.',
|
||||
},
|
||||
{
|
||||
icon: '📊',
|
||||
title: 'Real-time Monitoring',
|
||||
description: 'Comprehensive monitoring and alerting with detailed metrics and performance insights.',
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
title: 'One-Click Deployments',
|
||||
description: 'Streamlined deployment process with automated CI/CD pipelines and rollback capabilities.',
|
||||
},
|
||||
{
|
||||
icon: '👥',
|
||||
title: 'Team Collaboration',
|
||||
description: 'Built-in collaboration tools for teams with role-based access and shared workspaces.',
|
||||
},
|
||||
{
|
||||
icon: '⚙️',
|
||||
title: 'Advanced Configuration',
|
||||
description: 'Flexible configuration management with support for Helm charts and custom resources.',
|
||||
},
|
||||
]
|
||||
|
||||
export function FeaturesSection() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-20 lg:py-32">
|
||||
<Container>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Everything You Need to Succeed
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Powerful tools and features designed for modern cloud-native applications
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{features.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.title}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="rounded-2xl bg-white border border-gray-200 p-8 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 text-center"
|
||||
>
|
||||
<div className="text-4xl mb-4">{feature.icon}</div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3">{feature.title}</h3>
|
||||
<p className="text-gray-600">{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function LoadBalancing() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Visual Placeholder */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center p-8">
|
||||
<div className="text-6xl mb-4">⚖️</div>
|
||||
<p className="text-gray-600">Auto-scaling & Load Balancing</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Effortless Load Balancing & Scaling
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Auto-scaling
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Built-in load balancing
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
High availability
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function MultiMaster() {
|
||||
return (
|
||||
<section className="bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Multi-Master Clusters
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
High-availability Kubernetes clusters with multiple control plane nodes. Automatic failover, leader election, and zero-downtime upgrades built-in.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
HA Control Plane
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Automatic Failover
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Zero-downtime Upgrades
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Visual Placeholder */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center p-8">
|
||||
<div className="text-6xl mb-4">⚡</div>
|
||||
<p className="text-gray-600">High Availability Clusters</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function MyceliumNetworking() {
|
||||
return (
|
||||
<section className="bg-white py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Mycelium Networking
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Ultra-fast, decentralized networking inspired by nature. Mycelium Networking forms a resilient, adaptive mesh that routes around failures and optimizes for speed and security.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
End-to-end encrypted
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Nature-inspired
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Visual Placeholder */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative aspect-square rounded-2xl bg-gradient-to-br from-cyan-50 to-blue-50 border border-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center p-8">
|
||||
<div className="text-6xl mb-4">🕸️</div>
|
||||
<p className="text-gray-600">Decentralized Mesh Network</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
62
src/pages/cloud/SecurityPillars.tsx
Normal file
62
src/pages/cloud/SecurityPillars.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
const pillars = [
|
||||
{
|
||||
title: 'Provable Sovereignty',
|
||||
description:
|
||||
'Assign workloads to trusted zones, verify state with cryptographic proofs, and maintain full lineage for every byte.',
|
||||
},
|
||||
{
|
||||
title: 'Autonomous Zero-Trust',
|
||||
description:
|
||||
'Identity, policy, and attestation are enforced continuously—no manual keys, no hidden backdoors, no shared control.',
|
||||
},
|
||||
{
|
||||
title: 'Planetary-Scale Resilience',
|
||||
description:
|
||||
'Mesh-connected infrastructure routes around failure, keeping applications responsive even when regions go dark.',
|
||||
},
|
||||
]
|
||||
|
||||
export function SecurityPillars() {
|
||||
return (
|
||||
<section className="relative overflow-hidden bg-gray-900 py-24 lg:py-32">
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<CircleBackground
|
||||
color="#22d3ee"
|
||||
className="absolute -top-20 left-1/2 h-[520px] w-[520px] -translate-x-1/2 opacity-30"
|
||||
/>
|
||||
<div className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-t from-gray-900 to-transparent" />
|
||||
</div>
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<p className="text-sm font-semibold uppercase tracking-[0.3em] text-cyan-400">
|
||||
Sovereign Architecture
|
||||
</p>
|
||||
<h2 className="mt-6 text-3xl font-medium tracking-tight text-white lg:text-5xl">
|
||||
Built for security, trust, and unstoppable continuity.
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Every control surface is auditable and automated, enabling critical workloads to run with confidence.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-3">
|
||||
{pillars.map((pillar) => (
|
||||
<div
|
||||
key={pillar.title}
|
||||
className="rounded-3xl p-8 text-left transition hover:-translate-y-1"
|
||||
>
|
||||
<div className="text-lg font-semibold text-white">
|
||||
{pillar.title}
|
||||
</div>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-300">
|
||||
{pillar.description}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Container } from '../../components/Container'
|
||||
|
||||
export function WebGateway() {
|
||||
return (
|
||||
<section className="bg-gray-50 py-20 lg:py-32">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Visual Placeholder */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<div className="text-center p-8">
|
||||
<div className="text-6xl mb-4">🌐</div>
|
||||
<p className="text-gray-600">Simple Web Gateway</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Simple Web Gateway Access
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-600">
|
||||
Expose any service to the public web with a simple Kubernetes resource. No complex Ingress controllers. Domain and prefix-based routing is built-in.
|
||||
</p>
|
||||
<div className="mt-6 flex flex-wrap gap-3">
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Simple configuration
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
Built-in routing
|
||||
</span>
|
||||
<span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
|
||||
No ingress controllers
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
69
src/pages/download/DevHub.tsx
Normal file
69
src/pages/download/DevHub.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
BookOpenIcon,
|
||||
ChatBubbleOvalLeftEllipsisIcon,
|
||||
LifebuoyIcon,
|
||||
UserGroupIcon,
|
||||
} from '@heroicons/react/24/outline'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Documentation',
|
||||
description: 'Documentation for Mycelium.',
|
||||
href: 'https://threefold.info/mycelium_network/docs/',
|
||||
icon: BookOpenIcon,
|
||||
},
|
||||
{
|
||||
name: 'Support',
|
||||
description: 'Talk to an expert.',
|
||||
href: 'https://threefoldfaq.crisp.help/en/',
|
||||
icon: LifebuoyIcon,
|
||||
},
|
||||
{
|
||||
name: 'Forum',
|
||||
description: 'Forum for all your questions.',
|
||||
href: 'https://forum.threefold.io/',
|
||||
icon: ChatBubbleOvalLeftEllipsisIcon,
|
||||
},
|
||||
{
|
||||
name: 'Community',
|
||||
description: 'Join our Developers community on telegram.',
|
||||
href: 'https://t.me/threefoldtesting',
|
||||
icon: UserGroupIcon,
|
||||
},
|
||||
]
|
||||
|
||||
export function DevHub() {
|
||||
return (
|
||||
<div className="bg-gray-900 py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
|
||||
<div className="col-span-2">
|
||||
<h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
|
||||
<p className="text-3xl font-medium tracking-tight text-white lg:text-4xl">Developer Hub</p>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Our Developer Hub is a resource center for developers looking to build on top of Mycelium.
|
||||
Join our Developers community on telegram to get started.
|
||||
</p>
|
||||
</div>
|
||||
<dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
|
||||
{features.map((feature) => (
|
||||
<a
|
||||
key={feature.name}
|
||||
href={feature.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block rounded-2xl border border-gray-700 bg-gray-900/40 p-6 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:bg-gray-800 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
>
|
||||
<feature.icon aria-hidden="true" className="mb-4 h-6 w-6 flex-none text-cyan-500" />
|
||||
<dt className="font-semibold text-white">{feature.name}</dt>
|
||||
<dd className="mt-2 text-gray-400">{feature.description}</dd>
|
||||
</a>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
104
src/pages/download/DownloadHero.tsx
Normal file
104
src/pages/download/DownloadHero.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
'use client'
|
||||
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import appleIcon from '@/images/apple.svg'
|
||||
import windowsIcon from '@/images/windows.svg'
|
||||
import androidIcon from '@/images/android.svg'
|
||||
import linuxIcon from '@/images/linux.svg'
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Download for iOS & MacOS',
|
||||
description: 'Download Mycelium App from the Apple Store.',
|
||||
href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
|
||||
icon: appleIcon,
|
||||
alt: 'Apple logo',
|
||||
},
|
||||
{
|
||||
name: 'Download for Windows',
|
||||
description: 'Download the Mycelium App for Windows directly from its Github repository.',
|
||||
href: 'https://github.com/threefoldtech/myceliumflut/releases',
|
||||
icon: windowsIcon,
|
||||
alt: 'Windows logo',
|
||||
},
|
||||
{
|
||||
name: 'Download for Android',
|
||||
description: 'Download Mycelium from the Google Play Store.',
|
||||
href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
|
||||
icon: androidIcon,
|
||||
alt: 'Android logo',
|
||||
},
|
||||
{
|
||||
name: 'Download for Linux',
|
||||
description: 'Download the Mycelium binary for Linux directly from its Github repository.',
|
||||
href: 'https://github.com/threefoldtech/mycelium/releases',
|
||||
icon: linuxIcon,
|
||||
alt: 'Linux logo',
|
||||
},
|
||||
]
|
||||
|
||||
export function DownloadHero() {
|
||||
return (
|
||||
<div className="py-16 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div className="mx-auto max-w-2xl lg:mx-0">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
|
||||
>
|
||||
Download Mycelium Network
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="mt-6 text-lg text-gray-600 lg:leading-8"
|
||||
>
|
||||
Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
|
||||
<a
|
||||
href="https://threefold.info/mycelium_network/docs/"
|
||||
className="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read the manual.
|
||||
</a>
|
||||
</motion.p>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
|
||||
{features.map((feature) => (
|
||||
<div
|
||||
key={feature.name}
|
||||
className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||||
>
|
||||
<dt className="text-base font-semibold leading-7 text-gray-900">
|
||||
<div className="mb-6 flex h-10 w-10 items-center justify-center">
|
||||
<img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
|
||||
</div>
|
||||
{feature.name}
|
||||
</dt>
|
||||
<dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
|
||||
<p className="flex-auto">{feature.description}</p>
|
||||
<p className="mt-6">
|
||||
<a
|
||||
href={feature.href}
|
||||
className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Download Now <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</p>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
17
src/pages/download/DownloadPage.tsx
Normal file
17
src/pages/download/DownloadPage.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { AnimatedSection } from '@/components/AnimatedSection'
|
||||
|
||||
import { DownloadHero } from './DownloadHero'
|
||||
import { DevHub } from './DevHub'
|
||||
|
||||
export default function DownloadPage() {
|
||||
return (
|
||||
<>
|
||||
<AnimatedSection>
|
||||
<DownloadHero />
|
||||
</AnimatedSection>
|
||||
<AnimatedSection>
|
||||
<DevHub />
|
||||
</AnimatedSection>
|
||||
</>
|
||||
)
|
||||
}
|
||||
43
src/pages/home/CallToAction.tsx
Normal file
43
src/pages/home/CallToAction.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
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">
|
||||
Activate Your Sovereign <br />Mycelium Stack
|
||||
</h2>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Provision cloud workloads, mesh them through the encrypted Mycelium Network, and unlock AI experiences without surrendering control of your infrastructure or your data.
|
||||
</p>
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||
<Button to="/cloud" variant="solid" color="white">
|
||||
Start Deployment
|
||||
</Button>
|
||||
<Button to="/download" variant="solid" color="cyan">
|
||||
Get Mycelium Connector
|
||||
</Button>
|
||||
<Button
|
||||
to="https://threefold.info/mycelium_network/docs/"
|
||||
as="a"
|
||||
target="_blank"
|
||||
variant="outline"
|
||||
color="white"
|
||||
>
|
||||
Read Docs
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user