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

fix rbuild

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-14 16:12:31 +02:00
parent e77b4744c7
commit aaab070de1
10 changed files with 276 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/HomeAbout.tsx
View File

@@ -1,7 +1,7 @@
'use client'
import { useState } from 'react'
import { motion } from 'framer-motion'
import { useState, useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import { TypeAnimation } from 'react-type-animation'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
@@ -37,51 +37,73 @@ const features = [
];
export function HomeAbout() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
const ref = useRef(null);
const isInView = useInView(ref, { once: true });
return (
<div id="about" className="relative h-screen">
<div id="about" ref={ref} 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.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="absolute top-24 left-0 max-w-xl text-left">
<div className="relative -top-10 mx-auto max-w-8xl h-screen flex items-center justify-center">
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
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.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 1, delay: 0.2 }}
className="absolute top-24 left-0 max-w-xl text-left"
>
<H2>
Enterprise AI Agents
That Never Sleep.
</H2>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="absolute top-54 left-0 max-w-xl text-left">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 1, delay: 0.4 }}
className="absolute top-54 left-0 max-w-xl text-left"
>
<P color="custom">
With Mycelium Cloud, you can deploy purpose-built AI agents to automate any workflow. Keep complete control of your data while scaling from simple tasks to complex decision-making.
With Mycelium Cloud, you can deploy purpose-built AI agents to automate any workflow. Keep complete control of your data while scaling from simple tasks to complex decision-making.
</P>
</motion.div>
<Candy />
<div className="absolute bottom-24 right-0 h-96 w-full md:w-2/3 overflow-hidden">
<motion.div
initial={{ opacity: 0 }}
animate={isInView ? { opacity: 1 } : { opacity: 0 }}
transition={{ duration: 1, delay: 0.6 }}
>
<Candy />
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
transition={{ duration: 1, delay: 0.8 }}
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">
{[...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" />
<H3 as="p">{feature}</H3>
<H3>{feature}</H3>
</div>
))}
</div>
</div>
</motion.div>
</div>
</div>
</div>