This commit is contained in:
2025-09-12 17:42:52 +02:00
parent f50ead55cb
commit daa6702d9b
2 changed files with 30 additions and 34 deletions

View File

@@ -5,13 +5,33 @@ 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)
@@ -53,39 +73,14 @@ export function HomeAbout() {
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 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>