ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: add responsive carousel and dark theme to agents gallery section

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 18:04:52 +02:00
parent 8ea15271d3
commit 31f5e53a71
6 changed files with 310 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/agents/BentoSection.tsx
View File

@@ -36,7 +36,7 @@ const items = [
export function BentoSection() {
return (
<section className="bg-white py-20 lg:py-32">
<section className="bg-black py-20 lg:py-32">
<Container>
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -45,10 +45,10 @@ export function BentoSection() {
transition={{ duration: 0.8 }}
className="mx-auto max-w-3xl text-center mb-16"
>
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-50">
Augmented Intelligence Fabric
</h2>
<p className="mt-6 text-lg text-gray-600">
<p className="mt-6 text-lg text-gray-400">
A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance.
</p>
</motion.div>
@@ -61,11 +61,11 @@ export function BentoSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="rounded-2xl bg-gray-50 border border-gray-200 p-6 hover:border-cyan-500 hover:shadow-lg transition-all duration-300"
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"
>
<h3 className="text-xl font-semibold text-gray-900">{item.title}</h3>
<h3 className="text-xl font-semibold text-gray-50">{item.title}</h3>
<p className="mt-2 text-sm font-medium text-cyan-500">{item.subtitle}</p>
<p className="mt-3 text-sm text-gray-600">{item.description}</p>
<p className="mt-3 text-sm text-gray-400">{item.description}</p>
</motion.div>
))}
</div>