From af3bd60c636c1bcb7972085988d0d262d4352e34 Mon Sep 17 00:00:00 2001 From: Marcelo Kunze Date: Mon, 22 Dec 2025 17:09:52 -0300 Subject: [PATCH 1/2] Add Colosseum logo to SupportedBySection in Hero3D component - Introduced a new logo for Colosseum with its corresponding link and styling. - Updated logo size handling to accommodate the new addition. - Refactored the rendering logic for logos to improve code clarity and maintainability. - Enhanced mobile responsiveness with a seamless infinite scroll for logo display. --- apps/app/public/colosseum-logo-white.svg | 24 ++++ apps/app/src/components/custom-ui/hero-3d.tsx | 126 +++++++++++------- 2 files changed, 103 insertions(+), 47 deletions(-) create mode 100644 apps/app/public/colosseum-logo-white.svg diff --git a/apps/app/public/colosseum-logo-white.svg b/apps/app/public/colosseum-logo-white.svg new file mode 100644 index 0000000..a513aa3 --- /dev/null +++ b/apps/app/public/colosseum-logo-white.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/app/src/components/custom-ui/hero-3d.tsx b/apps/app/src/components/custom-ui/hero-3d.tsx index 6925319..b6fd91e 100644 --- a/apps/app/src/components/custom-ui/hero-3d.tsx +++ b/apps/app/src/components/custom-ui/hero-3d.tsx @@ -15,6 +15,11 @@ import { import { easeOut } from "motion" const SUPPORTED_BY_LOGOS = [ + { + name: "colosseum", + href: "https://blog.colosseum.com/announcing-colosseums-accelerator-cohort-4/", + src: "/colosseum-logo-white.svg", + }, { name: "coinbase", href: "https://www.coinbase.com/developer-platform/discover/launches/summer-builder-grants", @@ -48,6 +53,8 @@ const getLogoSize = (name: string) => { return { className: "h-6 w-[60px]", width: 60, height: 24 } case "ethglobal": return { className: "h-5 w-[90px]", width: 80, height: 20 } + case "colosseum": + return { className: "h-6 w-[120px]", width: 120, height: 24 } default: return { className: "h-12 w-[160px]", width: 160, height: 64 } } @@ -64,6 +71,46 @@ const getMaskStyle = (src: string): React.CSSProperties => ({ WebkitMaskPosition: "center", }) +const renderLogo = (logo: typeof SUPPORTED_BY_LOGOS[number], index?: number) => { + const logoSize = getLogoSize(logo.name) + return ( + +
+
+ {`${logo.name} +
+ + ) +} + export function SupportedBySection() { const prefersReduced = useReducedMotion() const [isMounted, setIsMounted] = React.useState(false) @@ -84,56 +131,41 @@ export function SupportedBySection() { [prefersReduced] ) + // Duplicate logos for seamless infinite scroll (exactly 2 copies for -50% animation) + const duplicatedLogos = [...SUPPORTED_BY_LOGOS, ...SUPPORTED_BY_LOGOS] + return ( - -
- SUPPORTED BY -
- {SUPPORTED_BY_LOGOS.map((logo) => { - const logoSize = getLogoSize(logo.name) - return ( - -
-
- {`${logo.name} -
- - ) - })} + <> + +
+ SUPPORTED BY + + {/* Desktop: flex-wrap layout */} +
+ {SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))} +
+
+ + + {/* Mobile: auto-scrolling carousel - full width to edge */} +
+
+ {duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
- + ) } From 64ca1273893b60a13731795924117f31a5fdbf8c Mon Sep 17 00:00:00 2001 From: Marcelo Kunze Date: Mon, 22 Dec 2025 17:18:33 -0300 Subject: [PATCH 2/2] Enhance McpExampleCard with tool description drawer and layout improvements - Added a mobile-friendly drawer for displaying tool descriptions, improving user interaction. - Updated layout to enhance responsiveness, including adjustments to flex properties and spacing. - Integrated tooltips for desktop users while providing a button for mobile users to access tool descriptions. - Streamlined button styling for better visual consistency across devices. --- .../components/custom-ui/mcp-example-card.tsx | 57 ++++++++++++++----- 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/apps/app/src/components/custom-ui/mcp-example-card.tsx b/apps/app/src/components/custom-ui/mcp-example-card.tsx index 394fdc7..654a1a7 100644 --- a/apps/app/src/components/custom-ui/mcp-example-card.tsx +++ b/apps/app/src/components/custom-ui/mcp-example-card.tsx @@ -13,6 +13,7 @@ import { Spinner } from "@/components/ui/spinner" import Image from "next/image" import { toast } from "sonner" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" +import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from "@/components/ui/drawer" interface McpExampleCardProps extends React.HTMLAttributes { className?: string @@ -26,6 +27,7 @@ export default function McpExampleCard({ }: McpExampleCardProps) { const [selectedTool, setSelectedTool] = useState(null) const [showToolModal, setShowToolModal] = useState(false) + const [toolDescriptionDrawer, setToolDescriptionDrawer] = useState<{ toolName: string; description: string } | null>(null) const [data, setData] = useState<{ serverId: string origin?: string @@ -189,34 +191,47 @@ export default function McpExampleCard({ displayTools.map((tool) => (
- {/* Left: Name + Info Icon */} + {/* Mobile: First line - Tool name + Info Icon */} + {/* Desktop: Left - Name + Info Icon */}

{tool.name}

{tool.description && ( - - + <> + {/* Desktop: Tooltip */} + + + + + +

{tool.description}

+ + + {/* Mobile: Clickable button to open drawer */} + + )}
- {/* Right: Price + RUN Button */} -
+ {/* Mobile: Second line - Price (1/4) + RUN Button (3/4) */} + {/* Desktop: Right - Price + RUN Button */} +
{tool.paymentHint && tool.paymentPriceUSD && ( - ${tool.paymentPriceUSD} + ${tool.paymentPriceUSD} )}