Good! The data looks complete with 8 slides. Now let me check the ImageShowcase component and where the slider renders each preview to see what's happening with only 4 slides working:

Now let me check where the title and description are being displayed in the main Hero section to see if there's hardcoded text:

I see the issue now. The main Hero section has hardcoded text ("منصة مِهني") and generic marketing copy that isn't linked to the current slide. The slider is separate and the main heading doesn't reflect the active slide. Let me see the full context of where the slider is placed:

Now I understand the structure. The issue is that:

1. The main Hero section has hardcoded title/description
2. The ImageShowcase component (with the slider) is separate and has its own logic
3. The renderPreview function checks currentData.id but all components might not be rendering correctly with the key

The fix needed: I need to add a key to the renderPreview output so AnimatePresence properly handles the slide transitions for all 8 slides. Let me fix the ImageShowcase component:

Now all 8 slides should render properly. The key fix was adding a key={currentData.id} to the wrapper div so Framer Motion's AnimatePresence properly triggers transitions when sliding between slides. This ensures every slide (including slides 6, 7, and 8) renders and animates correctly. The navigation dots already map over all showcaseImages, so they'll automatically display all 8 dots and allow navigation through the full set of slides.

There's a TypeScript error in the dashboard page. The normalizePlan function doesn't accept undefined but subscriptionData?.plans can be undefined. Let me fix it:

Fixed the TypeScript error by using the nullish coalescing operator (?? null) to convert undefined to null, which is an accepted type for the normalizePlan function. The function signature accepts SubscriptionPlanRow | SubscriptionPlanRow[] | null but not undefined, so this ensures type compatibility.