Skip to content

Commit a3fbc3f

Browse files
tannerlinsleytannerlinsley
committed
fix ai landing
1 parent d9614f2 commit a3fbc3f

File tree

6 files changed

+161
-136
lines changed

6 files changed

+161
-136
lines changed

‎src/components/AILibraryHero.tsx‎

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import * as React from 'react'
22
import { LinkProps } from '@tanstack/react-router'
33
import type { Library } from '~/libraries'
4-
import { useIsDark } from '~/hooks/useIsDark'
54
import { ChatPanel } from './ChatPanel'
65
import { AnimationPhase } from '~/stores/aiLibraryHeroAnimation'
76
import { useAILibraryHeroAnimation } from '~/hooks/useAILibraryHeroAnimation'
@@ -51,11 +50,13 @@ type AILibraryHeroProps = {
5150
actions?: React.ReactNode
5251
}
5352

54-
export function AILibraryHero({}: AILibraryHeroProps) {
55-
const isDark = useIsDark()
56-
const strokeColor = isDark ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.6)'
57-
const textColor = isDark ? '#ffffff' : '#000000'
53+
const HIGHLIGHT_COLOR = 'rgba(255, 255, 240, 0.95)'
5854

55+
export function AILibraryHero({}: AILibraryHeroProps) {
56+
const strokeColor = 'var(--hero-stroke)'
57+
const textColor = 'var(--hero-text)'
58+
const glassGradientStart = 'var(--hero-glass-start)'
59+
const glassGradientEnd = 'var(--hero-glass-end)'
5960
// Use the animation hook - handles all animation state and orchestration
6061
const { store } = useAILibraryHeroAnimation()
6162

@@ -145,8 +146,7 @@ export function AILibraryHero({}: AILibraryHeroProps) {
145146
// Active path: selected framework -> client -> ai -> selected server
146147
// Only return off-white if we're in a highlighting phase AND this is the active path
147148
if (isFrameworkSelected && isServerSelected) {
148-
// Off-white color when active
149-
return isDark ? 'rgba(255, 255, 240, 0.95)' : 'rgba(255, 255, 240, 0.95)'
149+
return HIGHLIGHT_COLOR
150150
}
151151

152152
// Not the active path, return original color
@@ -180,6 +180,18 @@ export function AILibraryHero({}: AILibraryHeroProps) {
180180
<style
181181
dangerouslySetInnerHTML={{
182182
__html: `
183+
:root {
184+
--hero-stroke: rgba(0, 0, 0, 0.6);
185+
--hero-text: #000000;
186+
--hero-glass-start: rgba(255, 255, 255, 0.8);
187+
--hero-glass-end: rgba(255, 255, 255, 0.6);
188+
}
189+
:root.dark {
190+
--hero-stroke: rgba(255, 255, 255, 0.8);
191+
--hero-text: #ffffff;
192+
--hero-glass-start: rgba(255, 255, 255, 0.55);
193+
--hero-glass-end: rgba(255, 255, 255, 0.55);
194+
}
183195
@keyframes pulse-down {
184196
0% {
185197
opacity: 0.6;
@@ -221,12 +233,12 @@ export function AILibraryHero({}: AILibraryHeroProps) {
221233
/>
222234
<div className="relative flex flex-col items-center gap-8 text-center px-4 overflow-visible">
223235
{/* Diagram and Chat Panel Container */}
224-
<div
225-
className="relative z-10 w-full max-w-7xl mx-auto flex flex-row flex-wrap gap-8 lg:gap-12"
226-
style={{ height: SVG_HEIGHT }}
227-
>
236+
<div className="relative z-10 w-full max-w-7xl mx-auto flex flex-col lg:flex-row items-center lg:items-stretch gap-8 lg:gap-12">
228237
{/* SVG Diagram */}
229-
<div className="relative w-full lg:flex-1 overflow-visible h-full">
238+
<div
239+
className="relative w-full lg:flex-1 overflow-visible"
240+
style={{ height: SVG_HEIGHT }}
241+
>
230242
<svg
231243
key={`${phase}-${selectedFramework}-${selectedServer}`}
232244
xmlns="http://www.w3.org/2000/svg"
@@ -285,20 +297,12 @@ export function AILibraryHero({}: AILibraryHeroProps) {
285297
>
286298
<stop
287299
offset="0%"
288-
stopColor={
289-
isDark
290-
? 'rgba(255, 255, 255, 0.55)'
291-
: 'rgba(255, 255, 255, 0.8)'
292-
}
300+
stopColor={glassGradientStart}
293301
stopOpacity="1"
294302
/>
295303
<stop
296304
offset="100%"
297-
stopColor={
298-
isDark
299-
? 'rgba(255, 255, 255, 0.55)'
300-
: 'rgba(255, 255, 255, 0.6)'
301-
}
305+
stopColor={glassGradientEnd}
302306
stopOpacity="1"
303307
/>
304308
</linearGradient>
@@ -313,20 +317,12 @@ export function AILibraryHero({}: AILibraryHeroProps) {
313317
>
314318
<stop
315319
offset="0%"
316-
stopColor={
317-
isDark
318-
? 'rgba(255, 255, 255, 0.55)'
319-
: 'rgba(255, 255, 255, 0.75)'
320-
}
320+
stopColor={glassGradientStart}
321321
stopOpacity="1"
322322
/>
323323
<stop
324324
offset="100%"
325-
stopColor={
326-
isDark
327-
? 'rgba(255, 255, 255, 0.55)'
328-
: 'rgba(255, 255, 255, 0.55)'
329-
}
325+
stopColor={glassGradientEnd}
330326
stopOpacity="1"
331327
/>
332328
</linearGradient>
@@ -613,9 +609,7 @@ export function AILibraryHero({}: AILibraryHeroProps) {
613609
phase === AnimationPhase.SHOWING_CHAT ||
614610
phase === AnimationPhase.PULSING_CONNECTIONS ||
615611
phase === AnimationPhase.STREAMING_RESPONSE
616-
? isDark
617-
? 'rgba(255, 255, 240, 0.95)'
618-
: 'rgba(255, 255, 240, 0.95)'
612+
? HIGHLIGHT_COLOR
619613
: strokeColor
620614
}
621615
strokeWidth={
@@ -826,7 +820,10 @@ export function AILibraryHero({}: AILibraryHeroProps) {
826820
</div>
827821

828822
{/* Chat Panel */}
829-
<div className="w-full md:w-[400px] flex-shrink-0 h-full">
823+
<div
824+
className="w-full max-w-[400px] lg:w-[400px] flex-shrink-0"
825+
style={{ height: SVG_HEIGHT }}
826+
>
830827
<ChatPanel
831828
messages={messages}
832829
typingUserMessage={typingUserMessage}

‎src/components/AILibraryHeroCard.tsx‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import * as React from 'react'
2-
import { useIsDark } from '~/hooks/useIsDark'
3-
41
type AILibraryHeroCardProps = {
52
x: number
63
y: number
@@ -42,18 +39,13 @@ export function AILibraryHeroCard({
4239
transform,
4340
fill = 'url(#glassGradient)',
4441
}: AILibraryHeroCardProps) {
45-
const isDark = useIsDark()
46-
47-
// Determine which logo to use
48-
const logoToUse =
49-
logo || (isDark && logoDark ? logoDark : logoLight) || logoLight || logoDark
42+
const hasLogo = logo || logoLight || logoDark
43+
const hasSeparateLogos = !logo && logoLight && logoDark
5044

5145
const centerY = y + height / 2
52-
// Position logo to the left of text, both centered vertically
53-
const logoX = logoToUse ? x + 12 : 0
46+
const logoX = hasLogo ? x + 12 : 0
5447
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
48+
const textX = hasLogo ? x + logoSize + 20 : x + width / 2
5749
const textY = centerY + fontSize * 0.35
5850

5951
return (
@@ -71,9 +63,44 @@ export function AILibraryHeroCard({
7163
filter="url(#glass)"
7264
opacity={opacity}
7365
/>
74-
{logoToUse && (
66+
{logo && (
67+
<image
68+
href={logo}
69+
x={logoX}
70+
y={logoY}
71+
width={logoSize}
72+
height={logoSize}
73+
opacity={opacity}
74+
preserveAspectRatio="xMidYMid meet"
75+
/>
76+
)}
77+
{hasSeparateLogos && (
78+
<>
79+
<image
80+
href={logoLight}
81+
x={logoX}
82+
y={logoY}
83+
width={logoSize}
84+
height={logoSize}
85+
opacity={opacity}
86+
preserveAspectRatio="xMidYMid meet"
87+
className="dark:hidden"
88+
/>
89+
<image
90+
href={logoDark}
91+
x={logoX}
92+
y={logoY}
93+
width={logoSize}
94+
height={logoSize}
95+
opacity={opacity}
96+
preserveAspectRatio="xMidYMid meet"
97+
className="hidden dark:block"
98+
/>
99+
</>
100+
)}
101+
{!logo && !hasSeparateLogos && (logoLight || logoDark) && (
75102
<image
76-
href={logoToUse}
103+
href={logoLight || logoDark}
77104
x={logoX}
78105
y={logoY}
79106
width={logoSize}
@@ -89,7 +116,7 @@ export function AILibraryHeroCard({
89116
fontFamily="Helvetica"
90117
fontSize={fontSize}
91118
fontWeight={fontWeight}
92-
textAnchor={logoToUse ? 'start' : 'middle'}
119+
textAnchor={hasLogo ? 'start' : 'middle'}
93120
opacity={opacity}
94121
>
95122
{label}

‎src/components/AILibraryHeroServiceCard.tsx‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import * as React from 'react'
2-
import { useIsDark } from '~/hooks/useIsDark'
3-
41
type AILibraryHeroServiceCardProps = {
52
x: number
63
y: number
@@ -40,19 +37,14 @@ export function AILibraryHeroServiceCard({
4037
transform,
4138
fill = 'url(#glassGradient)',
4239
}: AILibraryHeroServiceCardProps) {
43-
const isDark = useIsDark()
44-
45-
// Determine which logo to use
46-
const logoToUse =
47-
logo || (isDark && logoDark ? logoDark : logoLight) || logoLight || logoDark
40+
const hasLogo = logo || logoLight || logoDark
41+
const hasSeparateLogos = !logo && logoLight && logoDark
4842

4943
const centerX = x + width / 2
5044
const centerY = y + height / 2
51-
// Position logo to the left of text, both centered vertically
52-
const logoX = logoToUse ? x + 12 : 0
45+
const logoX = hasLogo ? x + 12 : 0
5346
const logoY = centerY - logoSize / 2
54-
const textX = logoToUse ? x + logoSize + 20 : centerX
55-
// Better vertical alignment: text baseline should align with logo center
47+
const textX = hasLogo ? x + logoSize + 20 : centerX
5648
const textY = centerY + fontSize * 0.35
5749

5850
return (
@@ -69,9 +61,44 @@ export function AILibraryHeroServiceCard({
6961
filter="url(#glass)"
7062
opacity={opacity}
7163
/>
72-
{logoToUse && (
64+
{logo && (
65+
<image
66+
href={logo}
67+
x={logoX}
68+
y={logoY}
69+
width={logoSize}
70+
height={logoSize}
71+
opacity={opacity}
72+
preserveAspectRatio="xMidYMid meet"
73+
/>
74+
)}
75+
{hasSeparateLogos && (
76+
<>
77+
<image
78+
href={logoLight}
79+
x={logoX}
80+
y={logoY}
81+
width={logoSize}
82+
height={logoSize}
83+
opacity={opacity}
84+
preserveAspectRatio="xMidYMid meet"
85+
className="dark:hidden"
86+
/>
87+
<image
88+
href={logoDark}
89+
x={logoX}
90+
y={logoY}
91+
width={logoSize}
92+
height={logoSize}
93+
opacity={opacity}
94+
preserveAspectRatio="xMidYMid meet"
95+
className="hidden dark:block"
96+
/>
97+
</>
98+
)}
99+
{!logo && !hasSeparateLogos && (logoLight || logoDark) && (
73100
<image
74-
href={logoToUse}
101+
href={logoLight || logoDark}
75102
x={logoX}
76103
y={logoY}
77104
width={logoSize}
@@ -87,7 +114,7 @@ export function AILibraryHeroServiceCard({
87114
fontFamily="Helvetica"
88115
fontSize={fontSize}
89116
fontWeight={fontWeight}
90-
textAnchor={logoToUse ? 'start' : 'middle'}
117+
textAnchor={hasLogo ? 'start' : 'middle'}
91118
opacity={opacity}
92119
>
93120
{label}

0 commit comments

Comments
 (0)