Skip to content

Commit 9008005

Browse files
jherrjherr
committed
icons and better service cards
1 parent 8987d90 commit 9008005

16 files changed

Lines changed: 561 additions & 416 deletions

‎src/components/AILibraryHero.tsx‎

Lines changed: 254 additions & 415 deletions
Large diffs are not rendered by default.

‎src/components/AILibraryHeroBox.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import * as React from 'react'
2+
3+
type AILibraryHeroBoxProps = {
4+
x: number
5+
y: number
6+
width: number
7+
height: number
8+
label?: string
9+
textColor: string
10+
strokeColor: string
11+
fontSize?: number
12+
fontWeight?: number
13+
rx?: number
14+
opacity?: number
15+
strokeWidth?: number
16+
fill?: string
17+
showLogo?: boolean
18+
logoSize?: number
19+
centerText?: boolean
20+
}
21+
22+
export function AILibraryHeroBox({
23+
x,
24+
y,
25+
width,
26+
height,
27+
label,
28+
textColor,
29+
strokeColor,
30+
fontSize = 25,
31+
fontWeight = 900,
32+
rx = 9,
33+
opacity = 0.9,
34+
strokeWidth = 3,
35+
fill = 'url(#glassGradientLarge)',
36+
logoSize = 40,
37+
}: AILibraryHeroBoxProps) {
38+
// For centerText, align logo and text higher up; otherwise use normal center
39+
const textX = 25 + logoSize
40+
const textY = 15 + fontSize
41+
42+
// Position logo to the right of the text, centered vertically
43+
const logoX = 15
44+
const logoY = 15
45+
46+
return (
47+
<g transform={`translate(${x}, ${y})`}>
48+
<rect
49+
width={width}
50+
height={height}
51+
rx={rx}
52+
fill={fill}
53+
stroke={strokeColor}
54+
strokeWidth={strokeWidth}
55+
filter="url(#glass)"
56+
opacity={opacity}
57+
/>
58+
{label && (
59+
<text
60+
x={textX}
61+
y={textY}
62+
fill={textColor}
63+
fontFamily="Helvetica"
64+
fontSize={fontSize}
65+
fontWeight={fontWeight}
66+
textAnchor="start"
67+
opacity={opacity * 1.05}
68+
>
69+
{label}
70+
</text>
71+
)}
72+
<image
73+
href="/images/logos/logo-color-100.png"
74+
x={logoX}
75+
y={logoY}
76+
width={logoSize}
77+
height={logoSize}
78+
opacity={opacity}
79+
preserveAspectRatio="xMidYMid meet"
80+
/>
81+
</g>
82+
)
83+
}

‎src/components/AILibraryHeroCard.tsx‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import * as React from 'react'
2+
import { useIsDark } from '~/hooks/useIsDark'
3+
4+
type AILibraryHeroCardProps = {
5+
x: number
6+
y: number
7+
width: number
8+
height: number
9+
label: string
10+
opacity: number
11+
textColor: string
12+
strokeColor: string
13+
fontSize?: number
14+
fontWeight?: number
15+
rx?: number
16+
isDashed?: boolean
17+
logoLight?: string
18+
logoDark?: string
19+
logo?: string
20+
logoSize?: number
21+
transform?: string
22+
fill?: string
23+
}
24+
25+
export function AILibraryHeroCard({
26+
x,
27+
y,
28+
width,
29+
height,
30+
label,
31+
opacity,
32+
textColor,
33+
strokeColor,
34+
fontSize = 18,
35+
fontWeight = 700,
36+
rx = 9,
37+
isDashed = false,
38+
logoLight,
39+
logoDark,
40+
logo,
41+
logoSize = 20,
42+
transform,
43+
fill = 'url(#glassGradient)',
44+
}: AILibraryHeroCardProps) {
45+
const isDark = useIsDark()
46+
47+
// Determine which logo to use
48+
const logoToUse =
49+
logo || (isDark && logoDark ? logoDark : logoLight) || logoLight || logoDark
50+
51+
const centerY = y + height / 2
52+
// Position logo to the left of text, both centered vertically
53+
const logoX = logoToUse ? x + 12 : 0
54+
const logoY = centerY - logoSize / 2
55+
const textX = logoToUse ? x + logoSize + 20 : x + width / 2
56+
// Better vertical alignment: text baseline should align with logo center
57+
const textY = centerY + fontSize * 0.35
58+
59+
return (
60+
<g className="transition-all duration-300" transform={transform}>
61+
<rect
62+
x={x}
63+
y={y}
64+
width={width}
65+
height={height}
66+
rx={rx}
67+
fill={fill}
68+
stroke={strokeColor}
69+
strokeWidth="1.5"
70+
strokeDasharray={isDashed ? '8 8' : undefined}
71+
filter="url(#glass)"
72+
opacity={opacity}
73+
/>
74+
{logoToUse && (
75+
<image
76+
href={logoToUse}
77+
x={logoX}
78+
y={logoY}
79+
width={logoSize}
80+
height={logoSize}
81+
opacity={opacity}
82+
preserveAspectRatio="xMidYMid meet"
83+
/>
84+
)}
85+
<text
86+
x={textX}
87+
y={textY}
88+
fill={textColor}
89+
fontFamily="Helvetica"
90+
fontSize={fontSize}
91+
fontWeight={fontWeight}
92+
textAnchor={logoToUse ? 'start' : 'middle'}
93+
opacity={opacity}
94+
>
95+
{label}
96+
</text>
97+
</g>
98+
)
99+
}

‎src/components/AILibraryHeroServiceCard.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import * as React from 'react'
2+
import { useIsDark } from '~/hooks/useIsDark'
3+
4+
type AILibraryHeroServiceCardProps = {
5+
x: number
6+
y: number
7+
width: number
8+
height: number
9+
label: string
10+
opacity: number
11+
textColor: string
12+
strokeColor: string
13+
fontSize?: number
14+
fontWeight?: number
15+
rx?: number
16+
logoLight?: string
17+
logoDark?: string
18+
logo?: string
19+
logoSize?: number
20+
transform?: string
21+
fill?: string
22+
}
23+
24+
export function AILibraryHeroServiceCard({
25+
x,
26+
y,
27+
width,
28+
height,
29+
label,
30+
opacity,
31+
textColor,
32+
strokeColor,
33+
fontSize = 18,
34+
fontWeight = 700,
35+
rx = 6,
36+
logoLight,
37+
logoDark,
38+
logo,
39+
logoSize = 20,
40+
transform,
41+
fill = 'url(#glassGradient)',
42+
}: AILibraryHeroServiceCardProps) {
43+
const isDark = useIsDark()
44+
45+
// Determine which logo to use
46+
const logoToUse =
47+
logo || (isDark && logoDark ? logoDark : logoLight) || logoLight || logoDark
48+
49+
const centerX = x + width / 2
50+
const centerY = y + height / 2
51+
// Position logo to the left of text, both centered vertically
52+
const logoX = logoToUse ? x + 12 : 0
53+
const logoY = centerY - logoSize / 2
54+
const textX = logoToUse ? x + logoSize + 20 : centerX
55+
// Better vertical alignment: text baseline should align with logo center
56+
const textY = centerY + fontSize * 0.35
57+
58+
return (
59+
<g className="transition-all duration-300" transform={transform}>
60+
<rect
61+
x={x}
62+
y={y}
63+
width={width}
64+
height={height}
65+
rx={rx}
66+
fill={fill}
67+
stroke={strokeColor}
68+
strokeWidth="1.5"
69+
filter="url(#glass)"
70+
opacity={opacity}
71+
/>
72+
{logoToUse && (
73+
<image
74+
href={logoToUse}
75+
x={logoX}
76+
y={logoY}
77+
width={logoSize}
78+
height={logoSize}
79+
opacity={opacity}
80+
preserveAspectRatio="xMidYMid meet"
81+
/>
82+
)}
83+
<text
84+
x={textX}
85+
y={textY}
86+
fill={textColor}
87+
fontFamily="Helvetica"
88+
fontSize={fontSize}
89+
fontWeight={fontWeight}
90+
textAnchor={logoToUse ? 'start' : 'middle'}
91+
opacity={opacity}
92+
>
93+
{label}
94+
</text>
95+
</g>
96+
)
97+
}

‎src/images/anthropic-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/images/anthropic-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/images/gemini.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/images/ollama-dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)