meteor-casablanca

byحسام حسام

Role: Senior Data Journalist & Urban Sociologist. Context: You are analyzing the "HCP 2025 National Family Survey" (Enquête Nationale sur la Famille 2025). Objective: Create a high-end interactive data visualization dashboard concept focused on the urban transformation of Casablanca and Fes. STRICT DATA CONSTRAINTS (Source: HCP 2025 Report): 1. DEMOGRAPHICS (General Urban Trends): - Household Size: Receded from 4.6 (2014) to 3.9 (2025). - Nuclearization: 73% of households are now nuclear (compared to 60.8% in 1995). - Urban Growth Rate: Nuclear households in cities grew by 3.6% annually. 2. CITY SPECIFICS: - Casablanca: Focus on its status as a "Megacity" (5.2M inhabitants) with high digital readiness (85.9%). - Fes: Focus on its specific urban-cultural mix (1.3M inhabitants) and the "Residential Proximity" erosion (Only 45-46% of heads of households now live in the same locality as their parents). 3. SOCIAL DYNAMICS: - Marriage: Average age for first marriage in urban areas is significantly higher (33.3 for men, 26.3 for women). - Digital Impact: 14.1% of respondents express concern about the digital impact on family ties. - Social Mobility: 41% of individuals experienced upward social mobility compared to their fathers. DESIGN REQUIREMENTS: - Stack: React + Framer Motion + Recharts + Tailwind CSS. - Theme: "Cinematic Midnight" (OLED Dark Mode). - Colors: Deep Obsidian (#050505), Electric Cyan (#00FFFF), and HCP Gold (#D4AF37). - Language: Arabic (Tajawal font) for UI, English for code comments. TASK: 1. Generate a 'Geography Insight' section with two interactive comparison cards for Fes and Casablanca. 2. Use the exact data points mentioned above to create a "Household Evolution Chart" (2014 vs 2025). 3. Ensure the Arabic terminology matches the HCP report (e.g., 'الأسر النووية', 'التمدن', 'الارتقاء الاجتماعي'). Role: Frontend Motion Engineer. Task: Implement the "Scrollytelling Logic" and "Interactive Data Sections" for the HCP 2025 project. 1. SCROLL ANIMATION (Framer Motion + Three.js): - Create a 'ScrollProgress' sync between the React UI and the 3D Earth. - When the user scrolls to 'Section 2' (Demographics), the Earth must smoothly glide to the LEFT (scale: 1.5, x: -45vw). - When scrolling to 'Section 3' (Transport & Cities), it glides to the RIGHT (scale: 1.5, x: 45vw). - Ensure a 'Spring' transition (stiffness: 100, damping: 30) for a premium feel. 2. DATA VISUALIZATION (Recharts): - Component 1: Comparison Bar Chart showing Household size shrinking from 4.6 (2014) to 3.9 (2025). - Component 2: A 'Glow Radial Bar' for Digital Readiness (85.9%) in Casablanca. - Style: Charts must be transparent (Glassmorphism), using 'Electric Cyan' (#00FFFF) for data bars. 3. CONTENT (From HCP 2025 Report): - Section 2 Header: "التحول الديموغرافي: من الأسرة الممتدة إلى النووية" - Section 2 Body: Explain the 73% nuclearization rate and its pressure on cities. - Section 3 Header: "أزمة النقل والارتقاء الاجتماعي" - Section 3 Body: Detail the transport situation in Casablanca (5.2M) and Fes (1.3M) using the data from the previous prompt. 4. UI REFINEMENT: - Implement a 'Floating Side Progress' indicator (dots) to show current section. - Use 'Backdrop-filter: blur(10px)' for all data cards. - Font: Tajawal (Bold for headers, Regular for body). Deliverable: Provide the full code for these specific sections and the Framer Motion controller logic. Role: Full-Stack UI/UX Developer. Task: Final Polish, Navigation, and Performance Optimization for the HCP 2025 Project. 1. NAVIGATION & UI OVERLAYS: - Build a "Minimalist Navigation Bar" (Top-fixed) with a glassmorphism effect (blur). - Links: [الرئيسية, التحول الديموغرافي, أزمة النقل, الرؤية المستقبلية]. - Add a "Scroll Progress Bar" at the very top (Cyan color) that fills up as the user scrolls. 2. ADVANCED INTERACTION (Interactivity): - Implement "Data Tooltips": When hovering over the 4.6 or 3.9 bars in the chart, show a small popup with details (e.g., "سنة 2014: متوسط حجم الأسرة كان أكبر"). - Add a "Reveal Animation" for text: Headers and paragraphs should slide up and fade in only when they enter the viewport (using Framer Motion 'whileInView'). 3. MOBILE OPTIMIZATION (For Xiaomi 12/High-end devices): - Optimize the 3D Canvas: Use 'PerformanceMonitor' from `@react-three/drei` to adjust quality based on the device's power. - Ensure all charts are "Touch-Responsive" and fit perfectly on mobile screens. - Use 'Suspense' with a customized Loading Screen that shows the HCP Logo and a "جاري تحميل البيانات..." message. 4. FOOTER & CALL TO ACTION: - Create a clean footer with: "مصدر البيانات: المندوبية السامية للتخطيط - تقرير 2025". - Add a "Back to Top" floating button that appears after scrolling down. FINAL INSTRUCTION: Ensure the Arabic text (Tajawal font) is perfectly aligned (RTL) and the contrast between 'Midnight Blue' and 'Electric Cyan' is optimized for readability. Role: Data Analyst & Senior Frontend Developer. Task: Infuse the Web-App with Deep Analytical Content from the HCP 2025 Report. 1. CONTENT INJECTION (The "Why" behind the numbers): - In the Demographics Section, don't just show "3.9". Add a "Did you know?" (هل تعلم؟) card explaining: * "انخفاض حجم الأسرة من 4.6 إلى 3.9 هو نتيجة مباشرة لزيادة استقلالية الشباب وتأخر سن الزواج (33 سنة للرجال)." - In the Urbanization Section (Casablanca/Fes), explain the link: * "التمدن السريع (62.8%) أدى إلى ظهور 'الأسرة النووية' بنسبة 73%، مما خلق طلباً غير مسبوق على وسائل النقل الفردية." 2. COMPARATIVE LOGIC (Fes vs. Casablanca): - Build a "Side-by-Side Comparison" component. - Casablanca: Focus on its role as a digital hub (85.9% readiness) and the pressure of its 5.2M population. - Fes: Focus on the "Social Mobility" (الارتقاء الاجتماعي) reaching 41%, and how migration is changing the city's ancient family structures. 3. DYNAMIC DATA CARDS: - Create 3 small "Insight Cards" with glowing borders: * Card 1: "الارتقاء الاجتماعي: 41% من الأبناء حققوا وضعاً أفضل من آبائهم." * Card 2: "الروابط الجغرافية: 45% فقط من رؤساء الأسر يعيشون في نفس مدينة والديهم." * Card 3: "الفجوة الرقمية: 14.1% يعبرون عن قلقهم من تأثير التكنولوجيا على تماسك الأسرة." 4. TECHNICAL REFINEMENT: - Add an "Interactivity Layer": When a user clicks on a data point, the 3D Earth should pulse or change its rotation speed to acknowledge the interaction. - Ensure all technical terms follow the HCP Report precisely (e.g., 'الحركية الاجتماعية', 'النزوع نحو الفردانية'). Language: High-standard Arabic (Fusha) for content, clean React/Tailwind for code. Role: Senior Mobile Web Developer. Task: Optimize the Entire Project for High-End Mobile Performance (Production-Ready). 1. MOBILE PERFORMANCE (Optimization): - Ensure the 3D Canvas uses 'dpr={[1, 2]}' to balance quality and performance on high-resolution mobile screens. - Use 'React.lazy' and 'Suspense' for all heavy components (Charts and 3D) to ensure the initial load is under 2 seconds. - Add a "Touch-to-Rotate" feature: Allow users to rotate the 3D Earth with their fingers on the mobile screen. 2. UI ADAPTATION (Small Screen Logic): - Make all Glassmorphism cards "Swipeable" on mobile. - Stack the data cards vertically instead of side-by-side to ensure the text remains large and readable. - Ensure the 'Tajawal' font size is at least 16px for body text to avoid eye strain. 3. CODE CONSOLIDATION (The "One-File" Miracle): - Since I am working on a mobile browser, PLEASE provide the FINAL output as a "Single-File Component" or a very structured "All-in-One App.jsx" that includes the styles (Tailwind) and logic. - This will allow me to copy-paste the entire project into 'v0.dev' or 'StackBlitz' easily. 4. FINAL HCP 2025 HIGHLIGHTS: - Add a final "Summary" section called "خلاصة الرؤية" mentioning: * The shift from 4.6 to 3.9 members per family. * The 73% nuclear family dominance. * A concluding sentence: "الأسرة المغربية في 2025: تحول نحو الفردانية الرقمية مع الحفاظ على قيم التضامن." Language: Arabic for UI, English for code. Role: Creative Web Interaction Designer. Task: Add Micro-interactions and Ambient Effects to the HCP 2025 Web-App. 1. DATA REVEAL EFFECTS: - Use 'Framer Motion' to create a "Counter Animation" for the numbers 4.6 and 3.9. - When the user scrolls to the demographics section, the numbers should count up rapidly from 0 to their final value. 2. INTERACTIVE CURSOR/TOUCH: - Add a "Cyan Glow Follower": On mobile touch, a small cyan-colored glow should follow the finger to emphasize the "High-Tech" vibe. 3. AMBIENT BACKGROUND: - Add a "Moving Starfield" or "Floating Data Particles" inside the Three.js Canvas around the Earth. These particles should move faster when the user scrolls quickly. 4. ACCESSIBILITY: - Add a "Dark/Light Contrast Toggle" (though the theme is dark, ensure text contrast is AA compliant). - Ensure all charts have an 'Aria-label' describing the HCP data for screen readers. Delivery: Provide the React code for the 'CountingNumber' component and the 'ParticleField' logic. Role: UX Strategist. Task: Create a "Presentation Mode" Overlay for the classroom delivery. 1. STEP-BY-STEP OVERLAY: - Add a "Start Presentation" button at the bottom. - When clicked, show small "Subtitles" or "Key Points" in Arabic at the bottom of the screen that guide me on what to say for each section (e.g., "الآن تحدث عن تراجع حجم الأسرة..."). 2. AUTOMATED SCROLL: - Implement a 'Next' button that automatically scrolls to the next key data point with a smooth ease-in-out transition. 3. QR CODE GENERATOR: - Add a small QR Code in the footer that says "Scan to view on your phone". (This is perfect for the teacher to scan and see the project on his own device). 4. FINAL EXPORT: - Make sure the entire code is optimized into a 'Build-ready' structure for Vercel/Netlify.