Skip to content

Commit 5e29e2f

Browse files
marcelokunzemarcelokunze
authored
Add Colosseum logo to SupportedBySection in Hero3D component (#28)
* 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. * 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.
1 parent 1ac2105 commit 5e29e2f

File tree

3 files changed

+147
-60
lines changed

3 files changed

+147
-60
lines changed

‎apps/app/public/colosseum-logo-white.svg‎

Lines changed: 24 additions & 0 deletions
Loading

‎apps/app/src/components/custom-ui/hero-3d.tsx‎

Lines changed: 79 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,11 @@ import {
1515
import { easeOut } from "motion"
1616

1717
const SUPPORTED_BY_LOGOS = [
18+
{
19+
name: "colosseum",
20+
href: "https://blog.colosseum.com/announcing-colosseums-accelerator-cohort-4/",
21+
src: "/colosseum-logo-white.svg",
22+
},
1823
{
1924
name: "coinbase",
2025
href: "https://www.coinbase.com/developer-platform/discover/launches/summer-builder-grants",
@@ -48,6 +53,8 @@ const getLogoSize = (name: string) => {
4853
return { className: "h-6 w-[60px]", width: 60, height: 24 }
4954
case "ethglobal":
5055
return { className: "h-5 w-[90px]", width: 80, height: 20 }
56+
case "colosseum":
57+
return { className: "h-6 w-[120px]", width: 120, height: 24 }
5158
default:
5259
return { className: "h-12 w-[160px]", width: 160, height: 64 }
5360
}
@@ -64,6 +71,46 @@ const getMaskStyle = (src: string): React.CSSProperties => ({
6471
WebkitMaskPosition: "center",
6572
})
6673

74+
const renderLogo = (logo: typeof SUPPORTED_BY_LOGOS[number], index?: number) => {
75+
const logoSize = getLogoSize(logo.name)
76+
return (
77+
<Link
78+
key={`${logo.name}-${index ?? ''}`}
79+
href={logo.href}
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
className="group flex-shrink-0"
83+
>
84+
<div
85+
className={cn(
86+
"h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300 min-w-[140px]",
87+
logo.name === "colosseum"
88+
? "bg-[#1C2123] dark:bg-[#D8DDDF] group-hover:opacity-90"
89+
: "bg-muted/50 group-hover:bg-muted"
90+
)}
91+
>
92+
<div
93+
className={cn(
94+
"transition-all duration-300",
95+
logoSize.className,
96+
logo.name === "colosseum"
97+
? "[background-color:var(--background)] dark:[background-color:var(--background)]"
98+
: "opacity-70 group-hover:opacity-100 [background-color:var(--foreground)]"
99+
)}
100+
style={getMaskStyle(logo.src)}
101+
/>
102+
<Image
103+
src={logo.src}
104+
alt={`${logo.name} logo`}
105+
width={logoSize.width}
106+
height={logoSize.height}
107+
className="sr-only"
108+
/>
109+
</div>
110+
</Link>
111+
)
112+
}
113+
67114
export function SupportedBySection() {
68115
const prefersReduced = useReducedMotion()
69116
const [isMounted, setIsMounted] = React.useState(false)
@@ -84,56 +131,41 @@ export function SupportedBySection() {
84131
[prefersReduced]
85132
)
86133

134+
// Duplicate logos for seamless infinite scroll (exactly 2 copies for -50% animation)
135+
const duplicatedLogos = [...SUPPORTED_BY_LOGOS, ...SUPPORTED_BY_LOGOS]
136+
87137
return (
88-
<motion.section
89-
className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
90-
initial="hidden"
91-
animate={isMounted ? "visible" : "hidden"}
92-
variants={fadeUp}
93-
>
94-
<div className="flex flex-col items-start space-y-4">
95-
<HighlighterText>SUPPORTED BY</HighlighterText>
96-
<div className="flex flex-wrap gap-3">
97-
{SUPPORTED_BY_LOGOS.map((logo) => {
98-
const logoSize = getLogoSize(logo.name)
99-
return (
100-
<Link
101-
key={logo.name}
102-
href={logo.href}
103-
target="_blank"
104-
rel="noopener noreferrer"
105-
className="group"
106-
>
107-
<div
108-
className={cn(
109-
"h-8 px-4 flex items-center justify-center rounded-[2px] transition-all duration-300",
110-
"bg-muted/50",
111-
"group-hover:bg-muted"
112-
)}
113-
>
114-
<div
115-
className={cn(
116-
"transition-all duration-300",
117-
logoSize.className,
118-
"opacity-70 group-hover:opacity-100",
119-
"[background-color:var(--foreground)]"
120-
)}
121-
style={getMaskStyle(logo.src)}
122-
/>
123-
<Image
124-
src={logo.src}
125-
alt={`${logo.name} logo`}
126-
width={logoSize.width}
127-
height={logoSize.height}
128-
className="sr-only"
129-
/>
130-
</div>
131-
</Link>
132-
)
133-
})}
138+
<>
139+
<motion.section
140+
className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8 py-8 sm:py-16"
141+
initial="hidden"
142+
animate={isMounted ? "visible" : "hidden"}
143+
variants={fadeUp}
144+
>
145+
<div className="flex flex-col items-start space-y-4">
146+
<HighlighterText>SUPPORTED BY</HighlighterText>
147+
148+
{/* Desktop: flex-wrap layout */}
149+
<div className="hidden md:flex flex-wrap gap-3">
150+
{SUPPORTED_BY_LOGOS.map((logo) => renderLogo(logo))}
151+
</div>
152+
</div>
153+
</motion.section>
154+
155+
{/* Mobile: auto-scrolling carousel - full width to edge */}
156+
<div className="md:hidden w-screen overflow-x-scroll scrollbar-hide -mt-4">
157+
<div
158+
className="flex gap-3"
159+
style={{
160+
width: 'max-content',
161+
animation: prefersReduced ? 'none' : 'scroll-carousel 25s linear infinite',
162+
animationFillMode: 'both',
163+
}}
164+
>
165+
{duplicatedLogos.map((logo, index) => renderLogo(logo, index))}
134166
</div>
135167
</div>
136-
</motion.section>
168+
</>
137169
)
138170
}
139171

‎apps/app/src/components/custom-ui/mcp-example-card.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { Spinner } from "@/components/ui/spinner"
1313
import Image from "next/image"
1414
import { toast } from "sonner"
1515
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
16+
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription } from "@/components/ui/drawer"
1617

1718
interface McpExampleCardProps extends React.HTMLAttributes<HTMLDivElement> {
1819
className?: string
@@ -26,6 +27,7 @@ export default function McpExampleCard({
2627
}: McpExampleCardProps) {
2728
const [selectedTool, setSelectedTool] = useState<ToolFromMcpServerWithStats | null>(null)
2829
const [showToolModal, setShowToolModal] = useState(false)
30+
const [toolDescriptionDrawer, setToolDescriptionDrawer] = useState<{ toolName: string; description: string } | null>(null)
2931
const [data, setData] = useState<{
3032
serverId: string
3133
origin?: string
@@ -189,34 +191,47 @@ export default function McpExampleCard({
189191
displayTools.map((tool) => (
190192
<div
191193
key={tool.id}
192-
className="flex items-center justify-between gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
194+
className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-4 p-4 pr-6 md:pr-4 rounded-[2px] bg-muted-2"
193195
>
194-
{/* Left: Name + Info Icon */}
196+
{/* Mobile: First line - Tool name + Info Icon */}
197+
{/* Desktop: Left - Name + Info Icon */}
195198
<div className="flex-1 min-w-0">
196199
<div className="flex items-center gap-2">
197200
<h4 className="font-mono text-sm font-medium text-foreground">{tool.name}</h4>
198201
{tool.description && (
199-
<Tooltip>
200-
<TooltipTrigger asChild>
202+
<>
203+
{/* Desktop: Tooltip */}
204+
<Tooltip>
205+
<TooltipTrigger asChild>
206+
<Info className="hidden md:block h-4 w-4 text-muted-foreground opacity-60 cursor-help" />
207+
</TooltipTrigger>
208+
<TooltipContent>
209+
<p className="max-w-xs">{tool.description}</p>
210+
</TooltipContent>
211+
</Tooltip>
212+
{/* Mobile: Clickable button to open drawer */}
213+
<button
214+
type="button"
215+
onClick={() => setToolDescriptionDrawer({ toolName: tool.name, description: tool.description })}
216+
className="md:hidden"
217+
>
201218
<Info className="h-4 w-4 text-muted-foreground opacity-60" />
202-
</TooltipTrigger>
203-
<TooltipContent>
204-
<p className="max-w-xs">{tool.description}</p>
205-
</TooltipContent>
206-
</Tooltip>
219+
</button>
220+
</>
207221
)}
208222
</div>
209223
</div>
210224

211-
{/* Right: Price + RUN Button */}
212-
<div className="flex items-center gap-2 shrink-0">
225+
{/* Mobile: Second line - Price (1/4) + RUN Button (3/4) */}
226+
{/* Desktop: Right - Price + RUN Button */}
227+
<div className="flex items-center gap-2 md:shrink-0 w-full md:w-auto">
213228
{tool.paymentHint && tool.paymentPriceUSD && (
214-
<HighlighterText variant="blue" className="h-8 py-0 flex items-center text-sm">${tool.paymentPriceUSD}</HighlighterText>
229+
<HighlighterText variant="blue" className="h-8 py-0 flex items-center justify-center text-sm w-[25%] md:w-auto shrink-0">${tool.paymentPriceUSD}</HighlighterText>
215230
)}
216231
<Button
217232
variant="customTallAccent"
218233
size="sm"
219-
className="h-8 rounded-[2px]"
234+
className="h-8 rounded-[2px] w-[75%] md:w-auto md:flex-none"
220235
onClick={() => openToolModal(tool)}
221236
>
222237
RUN
@@ -281,6 +296,22 @@ export default function McpExampleCard({
281296
url={data?.origin}
282297
/>
283298
)}
299+
300+
{/* Tool Description Drawer (Mobile only) */}
301+
<Drawer open={!!toolDescriptionDrawer} onOpenChange={(open) => !open && setToolDescriptionDrawer(null)}>
302+
<DrawerContent className="max-h-[85vh] bg-background border-border">
303+
<DrawerHeader>
304+
<DrawerTitle className="text-foreground text-left font-mono">
305+
{toolDescriptionDrawer?.toolName}
306+
</DrawerTitle>
307+
</DrawerHeader>
308+
<div className="px-4 pb-16 overflow-y-auto">
309+
<p className="text-base text-muted-foreground">
310+
{toolDescriptionDrawer?.description}
311+
</p>
312+
</div>
313+
</DrawerContent>
314+
</Drawer>
284315
</>
285316
)
286317
}

0 commit comments

Comments
 (0)