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

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-12 17:42:52 +02:00
parent f50ead55cb
commit daa6702d9b
2 changed files with 30 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/HomeAbout.tsx
View File

@@ -5,13 +5,33 @@ import { motion } from 'framer-motion'
import { TypeAnimation } from 'react-type-animation' import { TypeAnimation } from 'react-type-animation'
import { Dialog, DialogPanel } from '@headlessui/react' import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline' import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
import Image from 'next/image'
import diamondSvg from '@/images/diamond.svg'
const navigation = [ const navigation = [
{ name: 'Product', href: '#' }, { name: 'Product', href: '#' },
{ name: 'Features', href: '#' }, { name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' }, { name: 'Marketplace', href: '#' },
{ name: 'Company', 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() { export function HomeAbout() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false) 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. With Mycelium, you could deploy AI agents that handle your most complex workflows while maintaining complete data sovereignty and control.
</motion.p> </motion.p>
<div className="absolute bottom-24 right-0 h-96 w-2/3 overflow-hidden"> <div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
<div className="animate-marquee-vertical space-y-4 text-right text-4xl font-medium text-[#2F3178]"> <div className="animate-marquee-vertical space-y-8 text-right text-2xl md:text-4xl font-medium text-[#2F3178]">
<p>Data Orchestration</p> {[...features, ...features].map((feature, index) => (
<p>Data Cleaning</p> <div key={index} className="flex items-center justify-end gap-x-4" aria-hidden={index >= features.length}>
<p>Real-time Monitoring</p> <Image src={diamondSvg} alt="" className="h-6 w-6" />
<p>Query Optimization</p> <p>{feature}</p>
<p>Report Generation</p> </div>
<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> </div>

1
src/images/diamond.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="133" zoomAndPan="magnify" viewBox="0 0 99.75 143.999998" height="192" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="ad4ece1e12"><path d="M 0 4 L 99 4 L 99 140.796875 L 0 140.796875 Z M 0 4 " clip-rule="nonzero"/></clipPath></defs><g clip-path="url(#ad4ece1e12)"><path fill="#2f3178" d="M 77.738281 77.078125 C 63.597656 85.429688 53.351562 103.105469 50.84375 122.902344 C 49.804688 128.722656 51.226562 135.644531 49.382812 140.871094 C 47.300781 122.25 45.070312 100.476562 32.589844 86.886719 C 22.980469 77.566406 15.09375 71.984375 0 70.726562 C 8.601562 66.472656 19.144531 64.25 25.957031 55.871094 C 38.105469 43.089844 43.230469 25.175781 44.210938 7.707031 C 44.902344 -2.058594 46 10.890625 47.5625 13.621094 C 51.164062 24.210938 55.203125 34.78125 60.902344 44.460938 C 68.402344 57.957031 83.371094 64.710938 97.574219 68.765625 C 97.949219 68.875 98.300781 69.058594 98.582031 69.328125 C 99.933594 70.640625 95.613281 70.152344 92.695312 70.601562 C 87.152344 72.101562 82.546875 74.570312 77.738281 77.078125 Z M 77.738281 77.078125 " fill-opacity="1" fill-rule="nonzero"/><path fill="#2f3178" d="M 77.738281 77.078125 C 63.597656 85.429688 53.351562 103.105469 50.84375 122.902344 C 49.804688 128.722656 51.226562 135.644531 49.382812 140.871094 C 47.300781 122.25 45.070312 100.476562 32.589844 86.886719 C 22.980469 77.566406 15.09375 71.984375 0 70.726562 C 8.601562 66.472656 19.144531 64.25 25.957031 55.871094 C 38.105469 43.089844 43.230469 25.175781 44.210938 7.707031 C 44.902344 -2.058594 46 10.890625 47.5625 13.621094 C 51.164062 24.210938 55.203125 34.78125 60.902344 44.460938 C 68.402344 57.957031 83.371094 64.710938 97.574219 68.765625 C 97.949219 68.875 98.300781 69.058594 98.582031 69.328125 C 99.933594 70.640625 95.613281 70.152344 92.695312 70.601562 C 87.152344 72.101562 82.546875 74.570312 77.738281 77.078125 Z M 77.738281 77.078125 " fill-opacity="1" fill-rule="nonzero"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB