forked from emre/www_projectmycelium_com
improvements
This commit is contained in:
Emre
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,4 +1,5 @@
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { AgentsHero } from './AgentsHero'
|
||||
import { DeploySection } from './DeploySection'
|
||||
import { GallerySection } from './GallerySection'
|
||||
import { Companies } from './Companies'
|
||||
@@ -7,6 +8,18 @@ import { BentoSection } from './BentoSection'
|
||||
export default function AgentsPage() {
|
||||
return (
|
||||
<div>
|
||||
<AnimatedSection>
|
||||
<AgentsHero />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<BentoSection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<GallerySection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<DeploySection />
|
||||
</AnimatedSection>
|
||||
@@ -14,15 +27,6 @@ export default function AgentsPage() {
|
||||
<AnimatedSection>
|
||||
<Companies />
|
||||
</AnimatedSection>
|
||||
|
||||
|
||||
<AnimatedSection>
|
||||
<GallerySection />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<BentoSection />
|
||||
</AnimatedSection>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -48,16 +48,16 @@ export function BentoSection() {
|
||||
<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"
|
||||
>
|
||||
<Eyebrow color="accent">Components</Eyebrow>
|
||||
<SectionHeader color="light">
|
||||
Augmented Intelligence Fabric
|
||||
Intelligence Fabric
|
||||
</SectionHeader>
|
||||
<P className="mt-6" color="lightSecondary">
|
||||
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
|
||||
A complete infrastructure for building and deploying sovereign AI agents with enterprise-grade security and performance. Your data never leaves your control.
|
||||
</P>
|
||||
</motion.div>
|
||||
|
||||
@@ -67,9 +67,9 @@ 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-900 border border-gray-800 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300 hover:scale-105 overflow-hidden"
|
||||
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"
|
||||
>
|
||||
<video
|
||||
src={item.video}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { P, Eyebrow } from '@/components/Texts';
|
||||
import { P, Eyebrow } from "@/components/Texts";
|
||||
import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";
|
||||
|
||||
|
||||
@@ -47,8 +47,9 @@ export function Companies() {
|
||||
<motion.div
|
||||
className="flex flex-col justify-center max-w-4xl items-center mb-8 mx-auto"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 1 }}
|
||||
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">
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { motion, useInView } from 'framer-motion'
|
||||
import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts'
|
||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
|
||||
import { motion } from "framer-motion";
|
||||
import { SectionHeader, P, Eyebrow, CT, CP } from "@/components/Texts";
|
||||
import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from "react-icons/tb";
|
||||
|
||||
const features = [
|
||||
{
|
||||
@@ -23,24 +22,22 @@ const features = [
|
||||
'Set up and manage your nodes with ease. Scale compute and storage as you grow, while staying fully sovereign and decentralized.',
|
||||
icon: TbCircleNumber3Filled,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
export function DeploySection() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true });
|
||||
|
||||
return (
|
||||
<section id="benefits" ref={ref} className="relative pt-12 lg:pt-24 pb-4 px-4 lg:px-12 text-white bg-black">
|
||||
<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 }}
|
||||
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"
|
||||
>
|
||||
<Eyebrow color="accent">Get Started</Eyebrow>
|
||||
<SectionHeader className="text-3xl font-medium tracking-tight" color="light">
|
||||
Deploy Scalable LLMs and AI Agents in Seconds
|
||||
Deploy Scalable LLMs and AI Agents
|
||||
</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.
|
||||
@@ -48,25 +45,31 @@ export function DeploySection() {
|
||||
</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 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"
|
||||
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-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
|
||||
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-white" />
|
||||
<CT as="span" className="font-semibold text-left" color="light">{feature.name}</CT>
|
||||
<CP className="mt-2 text-sm text-left" color="light">{feature.description}</CP>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user