ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests 1 Projects Releases Activity

feat: add AgentPro section and refactor AgentUsecase layout

Browse Source 
- Created AgentPro component highlighting local execution, mesh connectivity, private data access, and portability advantages
- Replaced horizontal scrolling carousel in AgentUsecase with responsive grid layout
- Added "Blend local + remote intelligence" use case to AgentUsecase
- Removed slider navigation buttons and replaced with static grid display
- Replaced AgentDesign with AgentPro in AgentsPage component order
- Increased hero section padding on
This commit is contained in:
sasha-astiadi
2025-11-17 14:12:17 +01:00
parent 29e2d942de
commit 6ff539b3fc
5 changed files with 183 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/pages/agents/AgentUseCase.tsx
View File

@@ -1,9 +1,6 @@
"use client";
import { useRef } from "react";
import { Eyebrow, SectionHeader, P } from "@/components/Texts";
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
import {
CpuChipIcon,
GlobeAltIcon,
@@ -50,98 +47,75 @@ const networkUseCases = [
"Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.",
icon: ShieldCheckIcon,
},
{
title: "Blend local + remote intelligence",
description:
"Let lightweight agents run locally while offloading heavy tasks to trusted nodes, maintaining privacy and performance balance.",
icon: CpuChipIcon,
},
];
export function AgentUsecase() {
const sliderRef = useRef<HTMLUListElement>(null);
const scrollLeft = () =>
sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
const scrollRight = () =>
sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
return (
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
{/* Top horizontal spacing line */}
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
<div className="w-full border-t border-l border-r border-gray-100" />
<div className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-slate-200 bg-white overflow-hidden">
{/* Main framed section */}
<div className="border border-t-0 border-b-0 border-gray-100 bg-white">
<div className="mx-auto max-w-4xl sm:text-center py-12">
{/* Intro block (from isIntro item) */}
{networkUseCases[0].isIntro && (
<>
<Eyebrow className="text-cyan-600">{networkUseCases[0].eyebrow}</Eyebrow>
<SectionHeader
as="h3"
className="mt-4 text-gray-900 text-3xl lg:text-4xl"
>
{networkUseCases[0].title}
</SectionHeader>
<P className="mt-6 text-lg text-gray-600">
{networkUseCases[0].description}
</P>
</>
)}
</div>
{/* Grid of features (excluding intro) */}
<ul
ref={sliderRef}
className="flex overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar"
role="list"
className="mx-auto mt-6 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6 pb-16"
>
{networkUseCases.map((item, idx) => (
{networkUseCases.slice(1).map((item, idx) => (
<li
key={idx}
className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%]
border border-slate-200 px-10 py-12 relative
${item.isIntro ? "bg-gray-50/80" : "bg-white"}`}
className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
>
{/* INTRO CARD */}
{item.isIntro ? (
<div className="flex flex-col justify-between h-full">
<div>
<Eyebrow>{item.eyebrow}</Eyebrow>
<SectionHeader
as="h3"
className="mt-4 text-gray-900 text-xl lg:text-2xl"
>
{item.title}
</SectionHeader>
<P className="mt-4 text-gray-600 text-sm lg:text-base">
{item.description}
</P>
</div>
{/* slider buttons */}
<div className="flex items-center gap-x-4 mt-6">
<button
onClick={scrollLeft}
className="h-8 w-8 flex items-center justify-center
border border-slate-300 rounded-md
hover:border-cyan-500 transition-colors"
>
<IoArrowBackOutline className="text-gray-600" size={16} />
</button>
<button
onClick={scrollRight}
className="h-8 w-8 flex items-center justify-center
border border-slate-300 rounded-md
hover:border-cyan-500 transition-colors"
>
<IoArrowForwardOutline className="text-gray-600" size={16} />
</button>
</div>
</div>
) : (
/* REGULAR CARD */
<div className="flex flex-col h-full">
{item.icon && (
<div className="h-12 w-12 flex items-center justify-center rounded-xl bg-gray-100 mb-6">
<item.icon className="h-6 w-6 text-cyan-600" />
</div>
)}
<p className="text-lg font-semibold text-gray-900">
{item.title}
</p>
<p className="mt-2 text-gray-600 leading-snug">
{item.description}
</p>
{/* Icon */}
{item.icon && (
<div className="h-10 w-10 flex items-center justify-center rounded-xl bg-gray-100">
<item.icon className="h-6 w-6 text-cyan-600" />
</div>
)}
{/* Title */}
<p className="mt-6 text-lg font-semibold text-gray-900">
{item.title}
</p>
{/* Description */}
<p className="mt-2 text-gray-600 text-sm leading-snug">
{item.description}
</p>
</li>
))}
</ul>
</div>
{/* ✅ Bottom horizontal line with spacing */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
{/* Bottom horizontal line */}
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
</section>
);
}