Update .gitignore and remove cached build artifacts
This commit is contained in:
@@ -10,7 +10,7 @@ const baseStyles = {
|
||||
|
||||
const variantStyles = {
|
||||
solid: {
|
||||
cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
|
||||
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',
|
||||
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',
|
||||
|
||||
@@ -6,7 +6,7 @@ export function Container({
|
||||
}: React.ComponentPropsWithoutRef<'div'>) {
|
||||
return (
|
||||
<div
|
||||
className={clsx('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', className)}
|
||||
className={clsx('mx-auto px-4 sm:px-6 lg:px-8', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
|
||||
@@ -11,7 +11,6 @@ import { AnimatePresence, motion } from 'framer-motion'
|
||||
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Logo } from '@/components/Logo'
|
||||
import { NavLinks } from '@/components/NavLinks'
|
||||
|
||||
function MenuIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
@@ -49,7 +48,7 @@ function MobileNavLink(
|
||||
return (
|
||||
<PopoverButton
|
||||
as={Link}
|
||||
className="block text-base/7 tracking-tight text-gray-700"
|
||||
className="block text-base/7 tracking-tight text-[#2F3178]"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
@@ -62,7 +61,7 @@ export function Header() {
|
||||
<Container className="relative z-50 flex justify-between py-4">
|
||||
<div className="relative z-10 flex items-center gap-16">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="h-10 w-auto" />
|
||||
<img src="/images/logo.png" alt="Mycelium" className="h-10 w-auto" />
|
||||
</Link>
|
||||
<div className="hidden lg:flex lg:gap-10">
|
||||
<NavLinks />
|
||||
@@ -93,7 +92,7 @@ export function Header() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 z-0 bg-gray-300/60 backdrop-blur-sm"
|
||||
className="fixed inset-0 z-0 bg-transparent"
|
||||
/>
|
||||
<PopoverPanel
|
||||
static
|
||||
@@ -105,7 +104,7 @@ export function Header() {
|
||||
y: -32,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-gray-50 px-6 pt-32 pb-6 shadow-2xl shadow-gray-900/20"
|
||||
className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-transparent px-6 pt-32 pb-6"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<MobileNavLink href="/#about">
|
||||
@@ -126,7 +125,7 @@ export function Header() {
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</>
|
||||
@@ -139,7 +138,7 @@ export function Header() {
|
||||
<Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
|
||||
Docs
|
||||
</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/">Get Mycelium</Button>
|
||||
<Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Mycelium</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
|
||||
95
src/components/HomeAbout.tsx
Normal file
95
src/components/HomeAbout.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'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'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Product', href: '#' },
|
||||
{ name: 'Features', href: '#' },
|
||||
{ name: 'Marketplace', href: '#' },
|
||||
{ name: 'Company', href: '#' },
|
||||
]
|
||||
|
||||
export function HomeAbout() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="relative h-screen">
|
||||
<div className="relative isolate px-6 lg:px-8">
|
||||
<div className="relative -top-10 mx-auto max-w-8xl h-screen flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 2, delay: 0.5 }}
|
||||
aria-hidden="true"
|
||||
className="absolute top-10 left-[calc(50%-4rem)] -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:top-[calc(50%-30rem)] lg:left-48 xl:left-[calc(50%-24rem)]"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
|
||||
}}
|
||||
className="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1 }}
|
||||
className="absolute top-24 left-0 max-w-xl text-left text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
|
||||
>
|
||||
Enterprise AI Agents
|
||||
That Never Sleep.
|
||||
</motion.p>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1.5 }}
|
||||
className="absolute top-64 left-0 max-w-xl text-left text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
|
||||
>
|
||||
With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
|
||||
</motion.p>
|
||||
|
||||
<div className="absolute bottom-24 right-0 h-96 w-2/3 overflow-hidden">
|
||||
<div className="animate-marquee-vertical space-y-4 text-right text-4xl font-medium text-[#2F3178]">
|
||||
<p>Data Orchestration</p>
|
||||
<p>Data Cleaning</p>
|
||||
<p>Real-time Monitoring</p>
|
||||
<p>Query Optimization</p>
|
||||
<p>Report Generation</p>
|
||||
<p>Metadata Management</p>
|
||||
<p>Model Monitoring</p>
|
||||
<p>Cost Optimization</p>
|
||||
<p>API Integration</p>
|
||||
<p>Access Control</p>
|
||||
<p>Log Processing</p>
|
||||
<p>Synthetic Data</p>
|
||||
<p>Code Intelligence</p>
|
||||
<p>Incident Automation</p>
|
||||
<p>Data Discovery</p>
|
||||
{/* Duplicate for seamless scroll */}
|
||||
<p aria-hidden="true">Data Orchestration</p>
|
||||
<p aria-hidden="true">Data Cleaning</p>
|
||||
<p aria-hidden="true">Real-time Monitoring</p>
|
||||
<p aria-hidden="true">Query Optimization</p>
|
||||
<p aria-hidden="true">Report Generation</p>
|
||||
<p aria-hidden="true">Metadata Management</p>
|
||||
<p aria-hidden="true">Model Monitoring</p>
|
||||
<p aria-hidden="true">Cost Optimization</p>
|
||||
<p aria-hidden="true">API Integration</p>
|
||||
<p aria-hidden="true">Access Control</p>
|
||||
<p aria-hidden="true">Log Processing</p>
|
||||
<p aria-hidden="true">Synthetic Data</p>
|
||||
<p aria-hidden="true">Code Intelligence</p>
|
||||
<p aria-hidden="true">Incident Automation</p>
|
||||
<p aria-hidden="true">Data Discovery</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
'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 } from '@heroicons/react/24/outline'
|
||||
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Product', href: '#' },
|
||||
@@ -15,53 +17,44 @@ export function HomeHero() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="bg-white">
|
||||
<div className="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
<div className="relative h-screen -top-10">
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] -z-10 rounded-full overflow-hidden">
|
||||
<video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
className="h-full w-full object-cover"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
<div className="mx-auto max-w-2xl py-32">
|
||||
<div className="text-center">
|
||||
<h1 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">
|
||||
The Decentralized Agentic Cloud
|
||||
</h1>
|
||||
<p className="mt-8 text-lg font-light text-pretty text-gray-500 sm:text-xl/8">
|
||||
Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty.
|
||||
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a
|
||||
href="#"
|
||||
className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" className="text-sm/6 font-semibold text-gray-900">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
<source src="/videos/mycelium.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
<div className="relative isolate px-6 lg:px-8">
|
||||
<div className="relative -top-10 mx-auto max-w-8xl h-screen flex items-center justify-center">
|
||||
<div className="text-center max-w-5xl">
|
||||
<TypeAnimation
|
||||
sequence={[
|
||||
'Decentralized Agentic Cloud.',
|
||||
1000,
|
||||
]}
|
||||
wrapper="h1"
|
||||
speed={50}
|
||||
className="text-5xl font-medium tracking-tight text-balance text-[#2F3178] lg:text-8xl"
|
||||
repeat={0}
|
||||
/>
|
||||
</div>
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 1 }}
|
||||
className="absolute bottom-12 left-0 max-w-xl text-left text-2xl font-medium text-pretty leading-[1.2] text-[#2F3178] lg:text-3xl"
|
||||
>
|
||||
Building the infrastructure where AI agents can live, communicate, and evolve with complete sovereignty.
|
||||
</motion.p>
|
||||
<div className="absolute bottom-24 right-0 flex items-center gap-x-2 text-2xl font-medium text-[#2F3178] lg:text-2xl">
|
||||
<span>scroll</span>
|
||||
<ChevronDoubleDownIcon className="h-6 w-6" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
clipPath:
|
||||
'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
|
||||
}}
|
||||
className="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@ export function NavLinks() {
|
||||
<Link
|
||||
key={label}
|
||||
href={href}
|
||||
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-gray-700 transition-colors delay-150 hover:text-gray-900 hover:delay-0"
|
||||
className="relative -mx-3 -my-2 rounded-lg px-3 py-2 text-sm text-[#2F3178] transition-colors delay-150 hover:text-[#2F3178] hover:delay-0"
|
||||
onMouseEnter={() => {
|
||||
if (timeoutRef.current) {
|
||||
window.clearTimeout(timeoutRef.current)
|
||||
|
||||
Reference in New Issue
Block a user