ourworld_web/www_mycelium_cloud2
22
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-29 19:13:25 +02:00
parent 6116c5b87c
commit 4cc20ac13f
7 changed files with 19 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/layout.tsx
View File

@@ -1,4 +1,5 @@
import { type Metadata } from 'next' import { type Metadata } from 'next'
import { Footer } from '@/components/Footer'
import { Mulish } from 'next/font/google' import { Mulish } from 'next/font/google'
import clsx from 'clsx' import clsx from 'clsx'
@@ -26,7 +27,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en" className={clsx('antialiased', mulish.variable)}> <html lang="en" className={clsx('antialiased', mulish.variable)}>
<body className="bg-black text-white">{children}</body> <body className="bg-black text-white">{children}<Footer /></body>
</html> </html>
) )
} }

2
src/components/CallTo.tsx
View File

@@ -6,7 +6,7 @@ export function CallTo() {
<div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200"> <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
<div className="mx-auto max-w-4xl text-center"> <div className="mx-auto max-w-4xl text-center">
<H2 color="primary"> <H2 color="primary">
Say hello to Decentralized AI Agents that are Truly Yours Are you Ready?
</H2> </H2>
<P color="custom" className="mt-8 max-w-3xl"> <P color="custom" className="mt-8 max-w-3xl">
Why hand out your intelligence to centralized giants when you can build your own? Why hand out your intelligence to centralized giants when you can build your own?

7
src/components/ClickableGallery.tsx
View File

@@ -52,14 +52,15 @@ export function ClickableGallery() {
<div> <div>
<div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full"> <div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
<FadeIn transition={{ duration: 0.8, delay: 0.1 }}> <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
<div className="mx-auto max-w-5xl"> <div className="mx-auto max-w-5xl lg:mt-12">
<H2 className="text-center">One Agent, Endless Possibilities.</H2> <H2 className="text-center">Agents with Endless Possibilities.</H2>
</div> </div>
</FadeIn> </FadeIn>
<FadeIn transition={{ duration: 0.8, delay: 0.2 }}> <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
<div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4"> <div className="mx-auto max-w-4xl mt-6 lg:px-0 px-4">
<P className="text-center" color="primary"> <P className="text-center" color="primary">
The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery. 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> </P>
</div> </div>
</FadeIn> </FadeIn>

4
src/components/Companies.tsx
View File

@@ -40,7 +40,7 @@ const row2 = logos.slice(6);
export function Companies() { export function Companies() {
return ( return (
<div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased lg:py-12 py-4 -top-20"> <div id="companies" className="relative bg-black flex flex-col items-center justify-center w-full overflow-hidden antialiased py-4 -top-20">
<div className="relative z-10 mx-auto w-full max-w-6xl p-4"> <div className="relative z-10 mx-auto w-full max-w-6xl p-4">
{/* Heading */} {/* Heading */}
@@ -50,7 +50,7 @@ export function Companies() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 1 }} transition={{ duration: 1 }}
> >
<P className="text-gray-100 text-center mb-6"> <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. Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
</P> </P>
</motion.div> </motion.div>

53
src/components/Footer.tsx
View File

@@ -6,7 +6,6 @@ import { Container } from '@/components/Container'
import { TextField } from '@/components/Fields' import { TextField } from '@/components/Fields'
import { Logomark } from '@/components/Logo' import { Logomark } from '@/components/Logo'
import { NavLinks } from '@/components/NavLinks' import { NavLinks } from '@/components/NavLinks'
import { FadeIn } from '@/components/FadeIn'
import qrCode from '@/images/qr-code.svg' import qrCode from '@/images/qr-code.svg'
function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) { function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
@@ -24,61 +23,13 @@ function QrCodeBorder(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Footer() { export function Footer() {
return ( return (
<footer id="footer" className="border-t border-gray-800"> <footer id="footer" className="border-t border-gray-800">
<FadeIn>
<Container> <Container>
<div className="flex flex-col items-start justify-between gap-y-12 pt-12 pb-6 lg:flex-row lg:items-center lg:py-12"> <div className="flex justify-center py-8">
<div className="hidden"> <p className="text-sm text-gray-400">
<div className="flex items-center text-white">
<Logomark className="h-10 w-10 flex-none fill-cyan-500" />
<div className="ml-4">
<p className="text-base font-semibold">Project Mycelium</p>
<p className="mt-1 text-sm">Unleash the Power of Decentralized Networks</p>
</div>
</div>
<nav className="mt-11 flex gap-8">
<NavLinks />
</nav>
</div>
<div className="group relative -mx-4 flex items-center self-stretch p-4 transition-colors hover:bg-gray-800/50 sm:self-auto sm:rounded-2xl lg:mx-0 lg:self-auto lg:p-6">
<div className="relative flex h-24 w-24 flex-none items-center justify-center">
<QrCodeBorder className="absolute inset-0 h-full w-full stroke-gray-700 transition-colors group-hover:stroke-[#015eff]" />
<Image src={qrCode} alt="" unoptimized />
</div>
<div className="ml-8 lg:w-64">
<p className="text-base font-semibold text-white">
<Link href="https://threefoldfaq.crisp.help/en/">
<span className="absolute inset-0 sm:rounded-2xl" />
Talk to a human
</Link>
</p>
<p className="mt-1 text-sm text-gray-400">
Get in touch with us for any inquiries or questions.
</p>
</div>
</div>
</div>
<div className="flex flex-col items-center border-t border-gray-800 pt-8 pb-12 md:flex-row-reverse md:justify-between md:pt-6">
{/* <form className="flex w-full justify-center md:w-auto">
<TextField
type="email"
aria-label="Email address"
placeholder="Email address"
autoComplete="email"
required
variant="dark"
className="w-60 min-w-0 shrink"
/>
<Button type="submit" color="cyan" className="ml-4 flex-none">
<span className="hidden lg:inline">Join our newsletter</span>
<span className="lg:hidden">Join newsletter</span>
</Button>
</form> */}
<p className="mt-6 text-sm text-gray-400 md:mt-0 ">
&copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved. &copy; Copyright OurWorld Holdings, {new Date().getFullYear()}. All rights reserved.
</p> </p>
</div> </div>
</Container> </Container>
</FadeIn>
</footer> </footer>
) )
} }

19
src/components/HomeHero.tsx
View File

@@ -32,7 +32,7 @@ export function HomeHero() {
<div className="absolute inset-0 bg-black/60" /> <div className="absolute inset-0 bg-black/60" />
</div> </div>
<div className="relative px-6 lg:px-8"> <div className="relative px-6 lg:px-8">
<div className="relative -top-15 mx-auto flex h-screen max-w-8xl items-center justify-center"> <div className="relative mx-auto flex h-screen max-w-8xl items-center justify-center">
<div className="text-center"> <div className="text-center">
<div className="max-w-5xl"> <div className="max-w-5xl">
<H1 color="light"> <H1 color="light">
@@ -48,30 +48,17 @@ export function HomeHero() {
</H1> </H1>
</div> </div>
{/* Mobile-only PL */}
<motion.div <motion.div
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }} transition={{ duration: 1, delay: 1 }}
className="lg:hidden" className="mt-12"
> >
<PL className="mt-8 max-w-xl text-center text-gray-100" color="light"> <PL className="mx-auto max-w-4xl text-center text-gray-100" color="light">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you. Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</PL> </PL>
</motion.div> </motion.div>
</div> </div>
{/* Desktop-only PL */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 1 }}
className="hidden lg:block"
>
<PL className="absolute -bottom-8 left-0 max-w-xl text-left text-gray-100" color="light">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</PL>
</motion.div>
</div> </div>
</div> </div>
</div> </div>

11
src/components/Steps.tsx
View File

@@ -30,14 +30,13 @@ export function Steps() {
const isInView = useInView(ref, { once: true }); const isInView = useInView(ref, { once: true });
return ( return (
<section id="benefits" ref={ref} className="relative bg-cover bg-center py-32 -top-20 text-white" style={{ backgroundImage: "url('/images/deployment.webp')" }}> <section id="benefits" ref={ref} className="relative pt-16 pb-4 px-4 lg:px-12 -top-20 text-white">
<div className="absolute inset-0 bg-black/60" /> <div className="relative px-6 lg:px-12">
<div className="relative px-6 lg:px-6">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.8, delay: 0.1 }} transition={{ duration: 0.8, delay: 0.1 }}
className="mx-auto max-w-5xl lg:mx-0" className="mx-auto max-w-5xl text-center"
> >
<H2 className="text-3xl font-medium tracking-tight" color="light"> <H2 className="text-3xl font-medium tracking-tight" color="light">
Deploy Scalable LLMs and AI Agents in Seconds Deploy Scalable LLMs and AI Agents in Seconds
@@ -50,7 +49,7 @@ export function Steps() {
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }} animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }} transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-3" className="mx-auto lg:mt-12 mt-8 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-8 text-base/7 sm:grid-cols-2 sm:gap-y-16 lg:mx-12 lg:max-w-7xl lg:grid-cols-3"
> >
{features.map((feature, index) => ( {features.map((feature, index) => (
<motion.li <motion.li
@@ -58,7 +57,7 @@ export function Steps() {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }} transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
className="rounded-2xl border border-white/20 bg-black/20 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40" className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
> >
<feature.icon className="h-8 w-8 mb-4 text-white" /> <feature.icon className="h-8 w-8 mb-4 text-white" />
<CT as="span" className="font-semibold" color="light">{feature.name}</CT> <CT as="span" className="font-semibold" color="light">{feature.name}</CT>