91 lines
3.4 KiB
TypeScript
91 lines
3.4 KiB
TypeScript
'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 Image from 'next/image'
|
|
import diamondSvg from '@/images/diamond.svg'
|
|
|
|
const navigation = [
|
|
{ name: 'Product', href: '#' },
|
|
{ name: 'Features', href: '#' },
|
|
{ name: 'Marketplace', href: '#' },
|
|
{ name: 'Company', href: '#' },
|
|
];
|
|
|
|
const features = [
|
|
'Data Orchestration',
|
|
'Data Cleaning',
|
|
'Real-time Monitoring',
|
|
'Query Optimization',
|
|
'Report Generation',
|
|
'Metadata Management',
|
|
'Model Monitoring',
|
|
'Cost Optimization',
|
|
'API Integration',
|
|
'Access Control',
|
|
'Log Processing',
|
|
'Synthetic Data',
|
|
'Code Intelligence',
|
|
'Incident Automation',
|
|
'Data Discovery',
|
|
];
|
|
|
|
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-full md:w-2/3 overflow-hidden">
|
|
<div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
|
|
{[...features, ...features].map((feature, index) => (
|
|
<div key={index} className="flex items-center justify-end gap-x-4" aria-hidden={index >= features.length}>
|
|
<Image src={diamondSvg} alt="" className="h-6 w-6" />
|
|
<p>{feature}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|