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

feat: replace static icons with animated SVG components in GPU capabilities

Browse Source 
- Replaced Heroicons with custom animated SVG components for each GPU capability card
- Added four new animation components: InterferenceAnimation, KubernetesAcceleration, RenderingSimulation, and RAGPipeline
- Updated card layout to accommodate full-width animations above text content
This commit is contained in:
sasha-astiadi
2025-11-08 00:56:07 +01:00
parent 5ab909bd12
commit 22e2e4b80c
6 changed files with 698 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/gpu/GpuCapabilities.tsx
View File

@@ -4,12 +4,12 @@ import { useRef } from "react";
import { Eyebrow, CP, CT, H5 } from "@/components/Texts";
import { IoArrowBackOutline, IoArrowForwardOutline } from "react-icons/io5";
import {
SparklesIcon,
Cog6ToothIcon,
CubeTransparentIcon,
CpuChipIcon,
} from "@heroicons/react/24/solid";
// ✅ Import animations
import KubernetesAcceleration from "./animations/KubernetesAcceleration";
import RenderingSimulation from "./animations/RenderingSimulation";
import RAGPipeline from "./animations/RAGPipeline";
import InterferenceAnimation from "./animations/InterferenceAnimation";
const gpuCapabilities = [
{
@@ -22,31 +22,33 @@ const gpuCapabilities = [
{
name: "AI / ML Inference & Training",
description: "LLMs, embeddings, transformers, fine-tuning",
icon: SparklesIcon,
animation: InterferenceAnimation,
},
{
name: "Acceleration in Kubernetes Workloads",
description: "GPU-backed deployments on Mycelium Cloud",
icon: Cog6ToothIcon,
animation: KubernetesAcceleration,
},
{
name: "Rendering & Simulation",
description: "Scientific visualization, VFX, real-time 3D",
icon: CubeTransparentIcon,
animation: RenderingSimulation,
},
{
name: "Agent Compute & RAG Pipelines",
description:
"Vector memory + model execution on sovereign hardware",
icon: CpuChipIcon,
animation: RAGPipeline,
},
];
export function GpuCapabilities() {
const sliderRef = useRef<HTMLUListElement>(null);
const scrollLeft = () => sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
const scrollRight = () => sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
const scrollLeft = () =>
sliderRef.current?.scrollBy({ left: -400, behavior: "smooth" });
const scrollRight = () =>
sliderRef.current?.scrollBy({ left: 400, behavior: "smooth" });
return (
<section className="bg-[#121212] w-full max-w-8xl mx-auto">
@@ -63,16 +65,17 @@ export function GpuCapabilities() {
{gpuCapabilities.map((item, idx) => (
<li
key={idx}
className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 p-10 relative ${
item.isIntro ? "bg-[#1b1b1b]" : "bg-[#111]/60"
className={`snap-start shrink-0 w-[85%] sm:w-[50%] lg:w-[33%] border border-gray-800 relative flex flex-col ${
item.isIntro ? "bg-[#1b1b1b] p-10" : "bg-[#111]/60"
}`}
>
{/* ✅ First intro card with arrows */}
{item.isIntro ? (
<div className="flex flex-col justify-between h-full">
<div>
<Eyebrow>{item.eyebrow}</Eyebrow>
<H5 className="text-white mt-4 lg:text-2xl text-xl">{item.title}</H5>
<H5 className="text-white mt-4 lg:text-2xl text-xl">
{item.title}
</H5>
<p className="mt-4 text-gray-400 lg:text-lg text-sm leading-relaxed">
{item.description}
</p>
@@ -102,14 +105,21 @@ export function GpuCapabilities() {
</div>
</div>
) : (
<div className="flex flex-col items-center text-center">
<div className="flex items-center justify-center h-12 w-12 rounded-xl bg-[#1d1d1d] border border-gray-800">
<item.icon className="h-6 w-6 text-cyan-400" />
<>
{/* ✅ STREAMING ANIMATION REPLACES ICON */}
<div className="w-full flex items-center justify-center">
{item.animation && <item.animation />}
</div>
<CT className="text-lg font-semibold text-white mt-4">{item.name}</CT>
<CP className="mt-2 text-gray-400 leading-snug">{item.description}</CP>
</div>
<div className="p-6 text-center">
<CT className="text-lg font-semibold text-white mt-2">
{item.name}
</CT>
<CP className="mt-2 text-gray-400 leading-snug">
{item.description}
</CP>
</div>
</>
)}
</li>
))}