Jockey app rebuild - v0 by Vercel

I can see from the logs that the app is actually compiling successfully and serving pages (200 status codes). However, there's a client-side error about "Cannot read properties of undefined (reading 'replace')". This is happening in the browser, not during build. Let me check the browser console to find the exact source of the error. The issue is likely in one of the screen components where I'm trying to use a method on an undefined variable.

Let me search for uses of .replace() in the components I recently updated:

Found it! The issue is in the home-screen.tsx where I'm trying to use .replace() on string elements from the gradient split. The problem is that promo.gradient.split(" ")[0] or [2] might be undefined. Let me read the home screen to check the data structure:

Now I need to see where the promotions and offers data are defined to check their gradient format:

I found the issue. The promotions array uses Tailwind gradient class names like "from-blue-600 via-blue-500 to-cyan-400", but the code is trying to split by spaces and extract the colors using .replace(). The problem is that when I split by spaces, index [0] might have "from-blue-600" but index [2] might be undefined if there are only 2 parts or the split isn't working as expected.

Let me search for the offers data as well:

Now I see the problem! The offers use "from-blue-600 to-cyan-500" (only 2 parts), but the code is trying to access index [2] which doesn't exist. The promotions use "from-blue-600 via-blue-500 to-cyan-400" (3 parts with "via"), but the offers don't have "via". When I try to access .split(" ")[2] on the offers gradient, it returns undefined, causing the error.

The fix is to use proper hex color values instead of trying to parse Tailwind class names. Let me fix this:

Now let me fix the offers array and update the rendering code to use the new gradient format:

Now let me update the offers array with proper hex colors and then fix the rendering code:

Now I need to update the rendering code to use the new gradient format. Let me fix both the promotions carousel and offers rendering:

I've fixed the runtime error by replacing the Tailwind class name parsing with direct hex color values. The error was caused by trying to split gradient strings and access undefined array indices. Now the promotions and offers use gradientStart and gradientEnd hex color properties that can be directly used in the inline styles.

The app should now load without the "Cannot read properties of undefined (reading 'replace')" error. The gradient backgrounds will render correctly using the proper color values.