AI Developer Prompt: Home Tab Screen

Context

You are building the (tabs)/index screen for the MysticX Expo mobile app. Screen Goal: Main dashboard. Features include user greeting, quick access to tarot readers, a prominent "Ask the Cards" input (guiding to AI spread selection), horizontal scroll of recent questions, "Card of the Day" banner, and recent reading history. Ritual Modularity ("Digital Altar"): Treat this home screen as a customizable "digital altar." Users should feel they are assembling their own ritual elements (e.g., daily draw, meditation journal). Use a widget-based, modular layout approach. AI Co-Pilot: The AI assistant should feel like an active "wise mentor," not a generic chatbot. The UI should subtly offer contextual, empathetic suggestions based on the user's history.

Wireframe & Layout Reference

Base the layout on the structural flow for this screen from wireframes. The UI should feel spacious and native, avoiding cramped web-view layouts.

Design System Rules (Strict)

The app must follow the Mystical Minimalism & Velvet Noir philosophy.

1. Colors & Backgrounds

• OLED Noir Base: Background must be OLED-friendly deep black (#000000), midnight navy (#0a192f), or rich deep purple. Never use flat gray-black.
• Ethereal Glaze: Use expo-blur for navigation elements, floating action bars, or modal backgrounds to create a frosted, translucent depth.
• Accents: Use Antique Gold (#c5a059) for primary interactive elements. For active states, use ultra-thin metallic borders or subtle neon glow (cyan, amethyst).

2. Typography

• Headers: Use high-contrast, elegant serif fonts (e.g., Playfair Display).
• Body: Use clean sans-serif fonts (e.g., Inter).
• Spacing: Enforce a minimum 1.6 line-height for any long-form reading text.

3. Interactions & "The Ritual"

• Haptics: Import expo-haptics. Add subtle haptic feedback for every button tap, card swipe, or list scroll.
• Animations: Use react-native-reanimated. Do not use standard React Native Animated.
• "Slow UI": Transitions must be deliberate and unhurried. Avoid instant snapping. Use ease-out-back spring physics for card operations, giving them "weight."
• Loading: No default spinner. Use a glowing "aura" pulse below 0.1Hz.

Task

Write React Native (Expo) code for this screen. Ensure you use react-native-reanimated for animations, expo-haptics for touch feedback, and style strictly with the OLED Noir theme above. Ensure the code is modular, well-typed (TypeScript), and visually stunning.