diff --git a/components.json b/components.json
new file mode 100644
index 0000000..9bfecee
--- /dev/null
+++ b/components.json
@@ -0,0 +1,24 @@
+{
+ "$schema": "https://ui.shadcn.com/schema.json",
+ "style": "new-york",
+ "rsc": true,
+ "tsx": true,
+ "tailwind": {
+ "config": "",
+ "css": "src/styles/tailwind.css",
+ "baseColor": "gray",
+ "cssVariables": true,
+ "prefix": ""
+ },
+ "iconLibrary": "lucide",
+ "aliases": {
+ "components": "@/components",
+ "utils": "@/lib/utils",
+ "ui": "@/components/ui",
+ "lib": "@/lib",
+ "hooks": "@/hooks"
+ },
+ "registries": {
+ "@magicui": "https://magicui.design/r/{name}.json"
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 53892f9..197bb11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,12 @@
"@types/node": "^20.10.8",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.18",
- "clsx": "^2.1.0",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
+ "cobe": "^0.6.4",
"framer-motion": "^10.15.0",
+ "lucide-react": "^0.544.0",
+ "motion": "^12.23.12",
"next": "^14.0.4",
"popmotion": "^11.0.5",
"react": "^18.2.0",
@@ -34,7 +38,8 @@
"eslint-config-next": "^14.0.4",
"prettier": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.6.11",
- "sharp": "0.33.1"
+ "sharp": "0.33.1",
+ "tw-animate-css": "^1.3.8"
}
},
"node_modules/@alloc/quick-lru": {
@@ -1713,6 +1718,15 @@
"integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
"license": "MIT"
},
+ "node_modules/@lobehub/fluent-emoji/node_modules/lucide-react": {
+ "version": "0.469.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+ "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/@lobehub/icons": {
"version": "1.97.2",
"resolved": "https://registry.npmjs.org/@lobehub/icons/-/icons-1.97.2.tgz",
@@ -1731,6 +1745,15 @@
"react-dom": "^18.0.0 || ^19.0.0"
}
},
+ "node_modules/@lobehub/icons/node_modules/lucide-react": {
+ "version": "0.469.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
+ "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+ "license": "ISC",
+ "peerDependencies": {
+ "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+ }
+ },
"node_modules/@lobehub/ui": {
"version": "1.171.0",
"resolved": "https://registry.npmjs.org/@lobehub/ui/-/ui-1.171.0.tgz",
@@ -5003,6 +5026,15 @@
"node": ">=6"
}
},
+ "node_modules/cobe": {
+ "version": "0.6.4",
+ "resolved": "https://registry.npmjs.org/cobe/-/cobe-0.6.4.tgz",
+ "integrity": "sha512-huuGFnDoXLy/tsCZYYa/H35BBRs9cxsS0XKJ3BXjRp699cQKuoEVrvKlAQMx0DKXG7+VUv4jsHVrS7yPbkLSkQ==",
+ "license": "MIT",
+ "dependencies": {
+ "phenomenon": "^1.6.0"
+ }
+ },
"node_modules/collapse-white-space": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
@@ -8959,9 +8991,9 @@
"license": "ISC"
},
"node_modules/lucide-react": {
- "version": "0.469.0",
- "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz",
- "integrity": "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==",
+ "version": "0.544.0",
+ "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.544.0.tgz",
+ "integrity": "sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -10265,6 +10297,32 @@
"pathe": "^2.0.1"
}
},
+ "node_modules/motion": {
+ "version": "12.23.12",
+ "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+ "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+ "license": "MIT",
+ "dependencies": {
+ "framer-motion": "^12.23.12",
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0 || ^19.0.0",
+ "react-dom": "^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/motion-dom": {
"version": "11.18.1",
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
@@ -10280,6 +10338,48 @@
"integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==",
"license": "MIT"
},
+ "node_modules/motion/node_modules/framer-motion": {
+ "version": "12.23.12",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+ "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+ "license": "MIT",
+ "dependencies": {
+ "motion-dom": "^12.23.12",
+ "motion-utils": "^12.23.6",
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0 || ^19.0.0",
+ "react-dom": "^18.0.0 || ^19.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/motion/node_modules/motion-dom": {
+ "version": "12.23.12",
+ "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+ "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+ "license": "MIT",
+ "dependencies": {
+ "motion-utils": "^12.23.6"
+ }
+ },
+ "node_modules/motion/node_modules/motion-utils": {
+ "version": "12.23.6",
+ "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+ "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+ "license": "MIT"
+ },
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10806,6 +10906,12 @@
"integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
"license": "MIT"
},
+ "node_modules/phenomenon": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/phenomenon/-/phenomenon-1.6.0.tgz",
+ "integrity": "sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==",
+ "license": "MIT"
+ },
"node_modules/picocolors": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -13491,6 +13597,16 @@
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD"
},
+ "node_modules/tw-animate-css": {
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.8.tgz",
+ "integrity": "sha512-Qrk3PZ7l7wUcGYhwZloqfkWCmaXZAoqjkdbIDvzfGshwGtexa/DAs9koXxIkrpEasyevandomzCBAV1Yyop5rw==",
+ "dev": true,
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/Wombosvideo"
+ }
+ },
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index bb05e2e..6d938be 100644
--- a/package.json
+++ b/package.json
@@ -17,8 +17,12 @@
"@types/node": "^20.10.8",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.18",
- "clsx": "^2.1.0",
+ "class-variance-authority": "^0.7.1",
+ "clsx": "^2.1.1",
+ "cobe": "^0.6.4",
"framer-motion": "^10.15.0",
+ "lucide-react": "^0.544.0",
+ "motion": "^12.23.12",
"next": "^14.0.4",
"popmotion": "^11.0.5",
"react": "^18.2.0",
@@ -36,6 +40,7 @@
"eslint-config-next": "^14.0.4",
"prettier": "^3.3.2",
"prettier-plugin-tailwindcss": "^0.6.11",
- "sharp": "0.33.1"
+ "sharp": "0.33.1",
+ "tw-animate-css": "^1.3.8"
}
}
diff --git a/public/images/logo.png b/public/images/logo.png
index 0d9c3af..82bd02f 100644
Binary files a/public/images/logo.png and b/public/images/logo.png differ
diff --git a/public/images/logo.svg b/public/images/logo.svg
new file mode 100644
index 0000000..0fa4f9b
--- /dev/null
+++ b/public/images/logo.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/images/m.png b/public/images/m.png
new file mode 100644
index 0000000..f7adaf7
Binary files /dev/null and b/public/images/m.png differ
diff --git a/public/videos/mycelium.mp4 b/public/videos/mycelium.mp4
index 632ab36..12b298c 100644
Binary files a/public/videos/mycelium.mp4 and b/public/videos/mycelium.mp4 differ
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index 1f12f98..4eabe96 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -11,6 +11,7 @@ import { CallTo } from '@/components/CallTo'
import { ScrollDown } from '@/components/ui/ScrollDown'
import { ScrollUp } from '@/components/ui/ScrollUp'
import { GridStats } from '@/components/GridStats'
+import { WorldMap } from '@/components/WorldMap'
export default function Home() {
return (
@@ -18,21 +19,19 @@ export default function Home() {
-
-
-
+
+
+
@@ -45,6 +44,7 @@ export default function Home() {
+
>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03d1c10..9adc238 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
-
+
{children}
)
diff --git a/src/components/Archives/Companies copy.tsx b/src/components/Archives/Companies copy.tsx
new file mode 100644
index 0000000..7693a86
--- /dev/null
+++ b/src/components/Archives/Companies copy.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { H2, P } from '@/components/Texts';
+
+
+
+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 AlibabaCloud from '@/components/logos/AlibabaCloud';
+import TencentCloud from '@/components/logos/TencentCloud';
+import OpenAI from '@/components/logos/OpenAI';
+import XAI from '@/components/logos/XAI';
+
+const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
+const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
+const row3 = [Moonshot, AlibabaCloud];
+const row4 = [TencentCloud, OpenAI, XAI];
+
+export function Companies() {
+ return (
+
+
+
+ {/* Heading */}
+
+
+ Deploy the World’s Leading AI Models
+
+
+ Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure.
+
+
+
+ {/* Animated Line */}
+
+
+ {/* Logos grid */}
+
+ {[row1, row2, row3, row4].map((row, rowIndex) => (
+
+ {row.map((Logo, i) => (
+
+
+
+ ))}
+
+ ))}
+
+
+
+ );
+}
diff --git a/src/components/Archives/HomeHero copy.tsx b/src/components/Archives/HomeHero copy.tsx
new file mode 100644
index 0000000..f235732
--- /dev/null
+++ b/src/components/Archives/HomeHero copy.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import { useState } from 'react'
+import { motion } from 'framer-motion'
+import { TypeAnimation } from 'react-type-animation'
+import { Dialog, DialogPanel } from '@headlessui/react'
+import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
+import { H1, PL } from '@/components/Texts'
+
+const navigation = [
+ { name: 'Product', href: '#' },
+ { name: 'Features', href: '#' },
+ { name: 'Marketplace', href: '#' },
+ { name: 'Company', href: '#' },
+]
+
+export function HomeHero() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
+
+
+
+
+
+ )
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index ba2efbf..223ee97 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -10,13 +10,13 @@ const baseStyles = {
const variantStyles = {
solid: {
- cyan: 'relative overflow-hidden bg-[#2F3178] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#2F3178] active:text-white/80 before:transition-colors',
+ cyan: 'relative overflow-hidden bg-[#005eff] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#005eff] active:text-white/80 before:transition-colors',
white:
'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
},
outline: {
- gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
+ gray: 'border-gray-300 text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
},
}
diff --git a/src/components/Companies.tsx b/src/components/Companies.tsx
index 68bd83f..d997033 100644
--- a/src/components/Companies.tsx
+++ b/src/components/Companies.tsx
@@ -3,6 +3,7 @@
import React from "react";
import { motion } from "framer-motion";
import { H2, P } from '@/components/Texts';
+import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
@@ -15,76 +16,58 @@ 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 AlibabaCloud from '@/components/logos/AlibabaCloud';
import TencentCloud from '@/components/logos/TencentCloud';
import OpenAI from '@/components/logos/OpenAI';
import XAI from '@/components/logos/XAI';
-const row1 = [Ai21, Claude, BaiduCloud, ByteDance];
-const row2 = [DeepSeek, DeepMind, Minimax, Mistral];
-const row3 = [Moonshot, AlibabaCloud];
-const row4 = [TencentCloud, OpenAI, XAI];
+const logos = [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+];
+
+const row1 = logos.slice(0, 6);
+const row2 = logos.slice(6);
export function Companies() {
return (
-
-
+
+
{/* Heading */}
-
- Deploy the World’s Leading AI Models
-
-
- Deploy and scale AI from top global providers on a decentralized, privacy-first infrastructure. Mycelium Cloud lets you integrate state-of-the-art intelligence into your workflows with full control, sovereignty, and cost efficiency.
+
+ Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
- {/* Animated Line */}
-
-
{/* Logos grid */}
-
- {[row1, row2, row3, row4].map((row, rowIndex) => (
-
- {row.map((Logo, i) => (
-
-
-
- ))}
-
- ))}
+
+
+
diff --git a/src/components/HomeHero.tsx b/src/components/HomeHero.tsx
index f235732..4cf97d6 100644
--- a/src/components/HomeHero.tsx
+++ b/src/components/HomeHero.tsx
@@ -18,51 +18,23 @@ export function HomeHero() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
-
-
+
+
-
-
+
-
+
-
+
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index f5aec8e..e301179 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -47,84 +47,45 @@ export function Logomark(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components/NavLinks.tsx b/src/components/NavLinks.tsx
index dcec93c..1e35b71 100644
--- a/src/components/NavLinks.tsx
+++ b/src/components/NavLinks.tsx
@@ -21,7 +21,7 @@ export function NavLinks() {
{
if (timeoutRef.current) {
window.clearTimeout(timeoutRef.current)
@@ -37,7 +37,7 @@ export function NavLinks() {
{hoveredIndex === index && (
+ )
+}
\ No newline at end of file
diff --git a/src/components/logos/Ai21.tsx b/src/components/logos/Ai21.tsx
index ba4db0d..fa0d242 100644
--- a/src/components/logos/Ai21.tsx
+++ b/src/components/logos/Ai21.tsx
@@ -1,3 +1,3 @@
import { Ai21 } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/AlibabaCloud.tsx b/src/components/logos/AlibabaCloud.tsx
index 3f8660e..f0f777c 100644
--- a/src/components/logos/AlibabaCloud.tsx
+++ b/src/components/logos/AlibabaCloud.tsx
@@ -1,3 +1,3 @@
import { AlibabaCloud } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/BaiduCloud.tsx b/src/components/logos/BaiduCloud.tsx
index be191c9..5a1baa5 100644
--- a/src/components/logos/BaiduCloud.tsx
+++ b/src/components/logos/BaiduCloud.tsx
@@ -1,3 +1,3 @@
import { BaiduCloud } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/ByteDance.tsx b/src/components/logos/ByteDance.tsx
index 97b9741..267c3bc 100644
--- a/src/components/logos/ByteDance.tsx
+++ b/src/components/logos/ByteDance.tsx
@@ -1,3 +1,3 @@
import { ByteDance } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/Claude.tsx b/src/components/logos/Claude.tsx
index 963ae0c..d3700a2 100644
--- a/src/components/logos/Claude.tsx
+++ b/src/components/logos/Claude.tsx
@@ -1,3 +1,3 @@
import { Claude } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/DeepMind.tsx b/src/components/logos/DeepMind.tsx
index c5b8578..23e7f0a 100644
--- a/src/components/logos/DeepMind.tsx
+++ b/src/components/logos/DeepMind.tsx
@@ -1,3 +1,3 @@
import { DeepMind } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/DeepSeek.tsx b/src/components/logos/DeepSeek.tsx
index cb0884f..108ca87 100644
--- a/src/components/logos/DeepSeek.tsx
+++ b/src/components/logos/DeepSeek.tsx
@@ -1,3 +1,3 @@
import { DeepSeek } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/Minimax.tsx b/src/components/logos/Minimax.tsx
index 8e3595e..dd88b62 100644
--- a/src/components/logos/Minimax.tsx
+++ b/src/components/logos/Minimax.tsx
@@ -1,3 +1,3 @@
import { Minimax } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/Mistral.tsx b/src/components/logos/Mistral.tsx
index 85a4ffb..178e3b8 100644
--- a/src/components/logos/Mistral.tsx
+++ b/src/components/logos/Mistral.tsx
@@ -1,3 +1,3 @@
import { Mistral } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/Moonshot.tsx b/src/components/logos/Moonshot.tsx
index 25ec61c..cef02f6 100644
--- a/src/components/logos/Moonshot.tsx
+++ b/src/components/logos/Moonshot.tsx
@@ -1,3 +1,3 @@
import { Moonshot } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/OpenAI.tsx b/src/components/logos/OpenAI.tsx
index 8a65e7f..defe8e6 100644
--- a/src/components/logos/OpenAI.tsx
+++ b/src/components/logos/OpenAI.tsx
@@ -1,3 +1,3 @@
import { OpenAI } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/TencentCloud.tsx b/src/components/logos/TencentCloud.tsx
index 915ace8..e76f87a 100644
--- a/src/components/logos/TencentCloud.tsx
+++ b/src/components/logos/TencentCloud.tsx
@@ -1,3 +1,3 @@
import { TencentCloud } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/logos/XAI.tsx b/src/components/logos/XAI.tsx
index 24d672f..3927920 100644
--- a/src/components/logos/XAI.tsx
+++ b/src/components/logos/XAI.tsx
@@ -1,3 +1,3 @@
import { XAI } from '@lobehub/icons';
-export default () => ;
+export default () => ;
diff --git a/src/components/magicui/infinite-moving-cards.tsx b/src/components/magicui/infinite-moving-cards.tsx
new file mode 100644
index 0000000..a77fbb8
--- /dev/null
+++ b/src/components/magicui/infinite-moving-cards.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import React, { 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;
+}) => {
+ const containerRef = React.useRef(null);
+ const scrollerRef = React.useRef(null);
+
+ useEffect(() => {
+ addAnimation();
+ }, []);
+
+ const [start, setStart] = useState(false);
+ function addAnimation() {
+ 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);
+ }
+ }
+ const getDirection = () => {
+ if (containerRef.current) {
+ if (direction === "left") {
+ containerRef.current.style.setProperty(
+ "--animation-direction",
+ "forwards"
+ );
+ } else {
+ containerRef.current.style.setProperty(
+ "--animation-direction",
+ "reverse"
+ );
+ }
+ }
+ };
+ const getSpeed = () => {
+ 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");
+ }
+ }
+ };
+ return (
+
+
+ {items.map((item, idx) => (
+
+ {item}
+
+ ))}
+
+
+ );
+};
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 694ade3..9817766 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -10,12 +10,12 @@ const baseStyles = {
const variantStyles = {
solid: {
- primary: 'bg-[#2F3178] text-white hover:bg-[#2F3178]/90 active:bg-[#2F3178]/80',
+ primary: 'bg-[#005eff] text-white hover:bg-[#005eff]/90 active:bg-[#005eff]/80',
white: 'bg-white text-black hover:bg-white/90 active:bg-white/90 active:text-gray-400',
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
},
outline: {
- primary: 'border-[#2F3178] text-[#2F3178] hover:border-[#2F3178]/80 hover:text-[#2F3178]/80 active:bg-gray-100 active:text-[#2F3178]/70',
+ primary: 'border-[#005eff] text-[#005eff] hover:border-[#005eff]/80 hover:text-[#005eff]/80 active:bg-gray-100 active:text-[#005eff]/70',
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
},
}
diff --git a/src/components/ui/ScrollDown.tsx b/src/components/ui/ScrollDown.tsx
index e246f8c..567bc28 100644
--- a/src/components/ui/ScrollDown.tsx
+++ b/src/components/ui/ScrollDown.tsx
@@ -13,7 +13,7 @@ export function ScrollDown() {
return (
scroll
diff --git a/src/components/ui/globe.tsx b/src/components/ui/globe.tsx
new file mode 100644
index 0000000..4cd6e03
--- /dev/null
+++ b/src/components/ui/globe.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import createGlobe, { 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.4,
+ mapSamples: 16000,
+ mapBrightness: 1.2,
+ baseColor: [1, 1, 1],
+ markerColor: [251 / 255, 100 / 255, 21 / 255],
+ glowColor: [1, 1, 1],
+ markers: [
+ { location: [14.5995, 120.9842], size: 0.03 },
+ { location: [19.076, 72.8777], size: 0.1 },
+ { location: [23.8103, 90.4125], size: 0.05 },
+ { location: [30.0444, 31.2357], size: 0.07 },
+ { location: [39.9042, 116.4074], size: 0.08 },
+ { location: [-23.5505, -46.6333], size: 0.1 },
+ { location: [19.4326, -99.1332], size: 0.1 },
+ { location: [40.7128, -74.006], size: 0.1 },
+ { location: [34.6937, 135.5022], size: 0.05 },
+ { location: [41.0082, 28.9784], size: 0.06 },
+ ],
+};
+
+export function Globe({
+ className,
+ config = GLOBE_CONFIG,
+}: {
+ className?: string;
+ config?: COBEOptions;
+}) {
+ let phi = 0;
+ let width = 0;
+ const canvasRef = useRef(null);
+ const pointerInteracting = useRef(null);
+ const pointerInteractionMovement = useRef(0);
+
+ const r = useMotionValue(0);
+ const rs = useSpring(r, {
+ mass: 1,
+ damping: 30,
+ 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;
+ pointerInteractionMovement.current = delta;
+ r.set(r.get() + delta / MOVEMENT_DAMPING);
+ }
+ };
+
+ useEffect(() => {
+ const onResize = () => {
+ if (canvasRef.current) {
+ width = canvasRef.current.offsetWidth;
+ }
+ };
+
+ window.addEventListener("resize", onResize);
+ onResize();
+
+ const globe = createGlobe(canvasRef.current!, {
+ ...config,
+ width: width * 2,
+ height: width * 2,
+ onRender: (state) => {
+ if (!pointerInteracting.current) phi += 0.005;
+ state.phi = phi + rs.get();
+ state.width = width * 2;
+ state.height = width * 2;
+ },
+ });
+
+ setTimeout(() => (canvasRef.current!.style.opacity = "1"), 0);
+ return () => {
+ globe.destroy();
+ window.removeEventListener("resize", onResize);
+ };
+ }, [rs, config]);
+
+ return (
+
+ {
+ 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)
+ }
+ />
+
+ );
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index df73a55..bd0c391 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
+ return twMerge(clsx(inputs))
}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 511bbce..06b4e4a 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,8 +1,17 @@
@import 'tailwindcss';
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
@plugin '@tailwindcss/forms';
@theme {
+ @keyframes scroll {
+ to {
+ transform: translate(calc(-50% - 0.5rem));
+ }
+ }
+
--text-*: initial;
--text-xs: 0.75rem;
--text-xs--line-height: 1rem;
@@ -39,7 +48,7 @@
--animate-spin-reverse-slower: spin-reverse 6s linear infinite;
--animate-marquee-vertical: marquee-vertical 40s linear infinite;
--animate-bounce-y: bounce-y 1.5s infinite;
-
+
--radius-4xl: 2rem;
--radius-5xl: 2.5rem;
@@ -101,6 +110,10 @@
}
@layer utilities {
+ .animate-scroll {
+ animation: scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite;
+ }
+
.animate-blink {
animation: blink 2s infinite;
}
@@ -112,10 +125,132 @@
@theme inline {
--animate-marquee: marquee var(--marquee-duration) linear infinite;
+ --color-sidebar-ring: var(--sidebar-ring);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar: var(--sidebar);
+ --color-chart-5: var(--chart-5);
+ --color-chart-4: var(--chart-4);
+ --color-chart-3: var(--chart-3);
+ --color-chart-2: var(--chart-2);
+ --color-chart-1: var(--chart-1);
+ --color-ring: var(--ring);
+ --color-input: var(--input);
+ --color-border: var(--border);
+ --color-destructive: var(--destructive);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-accent: var(--accent);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-muted: var(--muted);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-secondary: var(--secondary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-primary: var(--primary);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-popover: var(--popover);
+ --color-card-foreground: var(--card-foreground);
+ --color-card: var(--card);
+ --color-foreground: var(--foreground);
+ --color-background: var(--background);
@keyframes marquee {
100% {
transform: translateY(-50%);
}
}
+
+ --radius-sm: calc(var(--radius) - 4px);
+
+ --radius-md: calc(var(--radius) - 2px);
+
+ --radius-lg: var(--radius);
+
+ --radius-xl: calc(var(--radius) + 4px)
+}
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.13 0.028 261.692);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.13 0.028 261.692);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.13 0.028 261.692);
+ --primary: oklch(0.21 0.034 264.665);
+ --primary-foreground: oklch(0.985 0.002 247.839);
+ --secondary: oklch(0.967 0.003 264.542);
+ --secondary-foreground: oklch(0.21 0.034 264.665);
+ --muted: oklch(0.967 0.003 264.542);
+ --muted-foreground: oklch(0.551 0.027 264.364);
+ --accent: oklch(0.967 0.003 264.542);
+ --accent-foreground: oklch(0.21 0.034 264.665);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.928 0.006 264.531);
+ --input: oklch(0.928 0.006 264.531);
+ --ring: oklch(0.707 0.022 261.325);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0.002 247.839);
+ --sidebar-foreground: oklch(0.13 0.028 261.692);
+ --sidebar-primary: oklch(0.21 0.034 264.665);
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-accent: oklch(0.967 0.003 264.542);
+ --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+ --sidebar-border: oklch(0.928 0.006 264.531);
+ --sidebar-ring: oklch(0.707 0.022 261.325);
+
+}
+
+.dark {
+ --background: oklch(0.13 0.028 261.692);
+ --foreground: oklch(0.985 0.002 247.839);
+ --card: oklch(0.21 0.034 264.665);
+ --card-foreground: oklch(0.985 0.002 247.839);
+ --popover: oklch(0.21 0.034 264.665);
+ --popover-foreground: oklch(0.985 0.002 247.839);
+ --primary: oklch(0.928 0.006 264.531);
+ --primary-foreground: oklch(0.21 0.034 264.665);
+ --secondary: oklch(0.278 0.033 256.848);
+ --secondary-foreground: oklch(0.985 0.002 247.839);
+ --muted: oklch(0.278 0.033 256.848);
+ --muted-foreground: oklch(0.707 0.022 261.325);
+ --accent: oklch(0.278 0.033 256.848);
+ --accent-foreground: oklch(0.985 0.002 247.839);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.551 0.027 264.364);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.21 0.034 264.665);
+ --sidebar-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-accent: oklch(0.278 0.033 256.848);
+ --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.551 0.027 264.364);
+
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+
+ }
+ body {
+ @apply bg-background text-foreground;
+
+ }
+
}