From 48979de1c7824c9bbdbeccc155f6806d2ac8fd06 Mon Sep 17 00:00:00 2001 From: sasha-astiadi Date: Wed, 22 Oct 2025 18:14:41 +0200 Subject: [PATCH] feat: add video previews and text components to agent showcase sections --- src/components/Texts.tsx | 3 +++ src/pages/agents/BentoSection.tsx | 32 +++++++++++++++++++++-------- src/pages/agents/DeploySection.tsx | 8 ++++---- src/pages/agents/GallerySection.tsx | 10 ++++----- 4 files changed, 36 insertions(+), 17 deletions(-) diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx index 5e3eeb2..63fa1b6 100644 --- a/src/components/Texts.tsx +++ b/src/components/Texts.tsx @@ -145,3 +145,6 @@ export const DownloadCardDescription = createTextComponent( 'dd', 'text-base/7 leading-normal tracking-normal' ) + +export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold') +export const CP = createTextComponent('p', 'text-sm lg:text-sm leading-[1.525] font-light') diff --git a/src/pages/agents/BentoSection.tsx b/src/pages/agents/BentoSection.tsx index a2aaf68..1d48699 100644 --- a/src/pages/agents/BentoSection.tsx +++ b/src/pages/agents/BentoSection.tsx @@ -1,36 +1,43 @@ import { motion } from 'framer-motion' import { Container } from '../../components/Container' +import { Eyebrow, SectionHeader, P, CT, CP } from '../../components/Texts' const items = [ { title: 'FungiStor', subtitle: 'Long-Term AI Memory', description: 'Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.', + video: '/videos/fungistor.mp4', }, { title: 'HeroDB', subtitle: 'Active AI Memory', description: 'Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.', + video: '/videos/herodb.mp4', }, { title: 'MOS Sandboxes', subtitle: 'Secure Agent Workspaces', description: 'Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.', + video: '/videos/sandbox.mp4', }, { title: 'Mycelium Mesh', subtitle: 'Secure Communication Network', description: 'A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.', + video: '/videos/mesh.mp4', }, { title: 'Deterministic Deployment', subtitle: 'Verifiable Code Execution', description: 'Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.', + video: '/videos/deterministic.mp4', }, { title: 'Agent Coordination', subtitle: 'Sovereign Workflow Management', description: 'Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.', + video: '/videos/agent.mp4', }, ] @@ -45,12 +52,13 @@ export function BentoSection() { transition={{ duration: 0.8 }} className="mx-auto max-w-3xl text-center mb-16" > -

+ Components + Augmented Intelligence Fabric -

-

+ +

A complete infrastructure for building and deploying AI agents with enterprise-grade security and performance. -

+

@@ -61,11 +69,19 @@ export function BentoSection() { whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }} - 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" + 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 overflow-hidden" > -

{item.title}

-

{item.subtitle}

-

{item.description}

+
diff --git a/src/pages/agents/DeploySection.tsx b/src/pages/agents/DeploySection.tsx index e2bccfb..9cf0cae 100644 --- a/src/pages/agents/DeploySection.tsx +++ b/src/pages/agents/DeploySection.tsx @@ -1,8 +1,8 @@ 'use client' -import React, { useRef } from 'react' +import { useRef } from 'react' import { motion, useInView } from 'framer-motion' -import { SectionHeader, P, Eyebrow, FeatureTitle, FeatureDescription } from '@/components/Texts' +import { SectionHeader, P, Eyebrow, CT, CP } from '@/components/Texts' import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb' const features = [ @@ -61,8 +61,8 @@ export function DeploySection() { className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md" > - {feature.name} - {feature.description} + {feature.name} + {feature.description} ))} diff --git a/src/pages/agents/GallerySection.tsx b/src/pages/agents/GallerySection.tsx index 890633f..9c94eb3 100644 --- a/src/pages/agents/GallerySection.tsx +++ b/src/pages/agents/GallerySection.tsx @@ -5,7 +5,7 @@ import { useResponsiveCarousel } from '@/hooks/useResponsiveCarousel'; import { motion, AnimatePresence } from 'framer-motion' import { wrap } from 'popmotion' import { Button } from '@/components/Button'; -import { SectionHeader, P, Eyebrow } from '@/components/Texts'; +import { SectionHeader, P, Eyebrow, CP } from '@/components/Texts'; import { TypeAnimation } from 'react-type-animation' import { FadeIn } from '@/components/FadeIn'; @@ -139,7 +139,7 @@ export function GallerySection() { {/* Foreground pill (Desktop) */}
-

+ -

+ @@ -158,7 +158,7 @@ export function GallerySection() { {/* Text box (Mobile) */}
-

+ -

+