Environment
دموع الأرض
Tears of the Earth
A gentle tale of a child who discovers the Earth weeping in a quiet meadow, and learns how small acts of kindness can heal even the deepest wounds of nature.
Read Story→magma-earth
by
Moham
Mohamاجعل الحوار يكون بين الطفوله كوكب الارض :: Dear Earth… why are you crying? 😢 Who hurts you? Earth: Humans… they made wars and caused poverty, they forgot love, peace, and mercy in Jordan, Syria, Palestine, Lebanon,Iraq Sudan, Somalia and Yemen… Child: Don’t cry, my dear… No matter how dark the night, light will come. Allah says: “Indeed, with hardship comes ease.” I love you. Earth: (Allah's willing)
Comments (0)
Sign in to leave a comment
Project Tasks18
#1
Implement Theme & Global Styles
To Do
As a frontend developer, I want to implement the magma-earth design system and global theme so that all pages follow the storybook visual identity. Apply the color palette (#F5F3E7 background, #E8D9B8 surface, #3B2F2F text, #FF6F61 accent, #B8C2A8 muted), typography (Inter font family with weight variations 300/600/700), CSS custom properties, paper-texture SVG overlay at 6% opacity, and the page-level gradient background (deep charcoal-brown at top → earthy gold mid → soft sand beige bottom). Remove any scaffold pages not needed by the user flows (welcome page post-login if replaced by Dashboard). Ensure dark/light tokens are set on the root element so all sections inherit them.
#16
Implement Resources API
To Do
As a backend developer, I want to implement the Educational Resources API using FastAPI so that users can fetch resources by topic. Endpoints: GET /resources (with topic filter: war-peace, poverty, environment), GET /resources/{id}, POST /resources (admin), PUT /resources/{id} (admin). Includes bilingual title and description fields.
#2
Build Homepage Page
To Do
As a frontend developer, I want to implement the full Homepage page based on the existing JSX design (v2) so that guests and users experience the interactive storybook landing. The page includes: NavBar (sticky, dark charcoal), Hero (100vh animated Earth + child illustration, coral CTAs), StoryIntro (pull-quote, page-curl shadow), ThemeHighlights (3 animated pillar cards), InteractivePreview (open-book carousel with 3D page flip), HowItWorks (3-step dashed connector flow), FeaturedStories (3-col responsive card grid with page-curl corners), CommunityVoices (testimonial strip), EducationalResources (2-col layout), CallToAction (dark bookend with glowing orb), Footer (4-col grid). Users navigate from Homepage → Story, Resources, Signup, Login per the Guest and User flows.
Depends on:#1
Waiting for dependencies
#3
Build Login Page
To Do
As a frontend developer, I want to implement the Login page so that registered users and admins can sign in to access their dashboards. The page should follow the magma-earth storybook theme with coral accent buttons, sand beige background, bilingual (AR/EN) labels, an email + password form, validation feedback, and links to Signup. On success, users are routed to Dashboard; admins to Admin Dashboard per the user flow diagrams.
Depends on:#1
Waiting for dependencies
#4
Build Signup Page
To Do
As a frontend developer, I want to implement the Signup / Create Account page so that guests can register to become users. The page should include name, email, password, and language preference fields with bilingual (AR/EN) support, a coral primary CTA button, and a link back to Login. On successful registration, users are routed to Dashboard. Follows the storybook theme and the Guest flow: Homepage → Register Prompt → Signup.
Depends on:#1
Waiting for dependencies
#6
Build Story Page
To Do
As a frontend developer, I want to implement the Story reading page so that guests and users can read interactive stories inspired by the Earth-child dialogue. The page should render a full story with illustrated sections, animated page-turn transitions, Arabic + English bilingual text, a progress indicator, a link to the Forum for discussion, and related story suggestions. Entry points: Homepage FeaturedStories → Story, Dashboard → Story per user flows.
Depends on:#1
Waiting for dependencies
#7
Build Resources Page
To Do
As a frontend developer, I want to implement the Educational Resources page so that guests and users can access content about war, poverty, environment, and humanitarian issues. The page should display topic categories (War & Peace, Poverty, Environment) as clickable olive-green pills, resource cards with titles, descriptions, and coral view-links, and support bilingual display. Entry points: Story → Resources, Dashboard → Resources per user flows.
Depends on:#1
Waiting for dependencies
#5
Build Dashboard Page
To Do
As a frontend developer, I want to implement the user Dashboard page so that logged-in users can browse stories, navigate to Contribute, Resources, and Forum. The page should display a personalized welcome, a story browsing grid with category filters, quick-links to Contribute a story and access Resources, and a sidebar or top nav consistent with the magma-earth theme. This is the post-login hub per the User flow: Login → Dashboard → Story / Contribute / Resources.
Depends on:#1#3
Waiting for dependencies
#10
Build Admin Dashboard Page
To Do
As a frontend developer, I want to implement the Admin Dashboard page so that admins have an overview hub to access Content Manager, Moderation, and Forum management. The page should display summary stats (pending submissions, active stories, flagged content), quick-nav cards to each admin area, and follow the magma-earth theme with deep charcoal tones. Entry point: Login → Admin Dashboard per Admin flow.
Depends on:#1#3
Waiting for dependencies
#17
Implement Bilingual i18n Support
To Do
As a frontend developer, I want to implement Arabic and English internationalization (i18n) across all pages so that users can switch languages seamlessly. Set up i18next or React context-based translation, RTL layout support for Arabic (direction: rtl, appropriate font), a language toggle (AR | EN) in the NavBar and Footer, and persist the user's preference in localStorage. All static strings on every page must be translatable.
Depends on:#2
Waiting for dependencies
#8
Build Forum Page
To Do
As a frontend developer, I want to implement the Community Forum page so that users can join discussions linked to stories and global topics. The page should list discussion threads with topic tags, author avatars, reply counts, and timestamps in a bilingual layout. Users can navigate to a thread from the Story page. Admins can moderate from the Forum per the Admin flow: Admin Dashboard → Forum: Moderate Discussions.
Depends on:#5#1
Waiting for dependencies
#9
Build Contribute Page
To Do
As a frontend developer, I want to implement the Contribute page so that logged-in users can submit their own stories to the platform. The page should include a story title field (AR/EN), category selector, rich text body editor, illustration upload, and a coral Submit button. Submitted stories go into a pending moderation queue. Entry point: Dashboard → Contribute per User flow.
Depends on:#1#5
Waiting for dependencies
#11
Build Content Manager Page
To Do
As a frontend developer, I want to implement the Content Manager page so that admins can manage stories and educational modules. The page should include a story list table with filters (category, status, language), edit/delete actions, an inline edit module view, and a create-new story form. Entry point: Admin Dashboard → Content Manager per Admin flow.
Depends on:#10
Waiting for dependencies
#12
Build Moderation Page
To Do
As a frontend developer, I want to implement the Moderation page so that admins can review and approve or reject user-submitted content. The page should display a queue of pending submissions with story preview, author info, category tag, approve/reject buttons with confirmation, and a reason-for-rejection text field. Entry point: Admin Dashboard → Moderation per Admin flow.
Depends on:#10
Waiting for dependencies
#13
Implement Stories API
To Do
As a backend developer, I want to implement the Stories REST API using FastAPI so that the frontend can fetch, create, update, and delete stories. Endpoints: GET /stories (list with filters), GET /stories/{id} (single story), POST /stories (create, auth required), PUT /stories/{id} (update, admin), DELETE /stories/{id} (admin). Include pagination, category filtering, and bilingual field support (title_ar, title_en, body_ar, body_en). Uses MySQL/MariaDB via Alembic migrations.
Depends on:#9#6
Waiting for dependencies
#14
Implement Moderation API
To Do
As a backend developer, I want to implement the Moderation API using FastAPI so that admins can approve or reject submitted stories. Endpoints: GET /moderation/pending, POST /moderation/{id}/approve, POST /moderation/{id}/reject (with reason payload). Only accessible to admin-role users. Returns updated submission status.
Depends on:#13
Waiting for dependencies
#15
Implement Forum API
To Do
As a backend developer, I want to implement the Forum/Discussions API using FastAPI so that users can create, read, and reply to discussion threads. Endpoints: GET /forum/threads, GET /forum/threads/{id}, POST /forum/threads (auth), POST /forum/threads/{id}/replies (auth), DELETE /forum/threads/{id} (admin). Supports bilingual content and links threads to story IDs.
Depends on:#13
Waiting for dependencies
#18
Integrate AI Story Assistant
To Do
As an AI engineer, I want to integrate the LiteLLM router with GPT-5.2 and Claude 4.5 Opus so that the platform can offer an AI-assisted story writing helper on the Contribute page and context-aware reading hints on the Story page. Set up LiteLLM routing logic: GPT-5.2 for conversational/creative responses, Claude for structured/academic text. Expose a POST /ai/assist endpoint from FastAPI. Connect the frontend Contribute page to this endpoint for inline suggestions.
Depends on:#9#13
Waiting for dependencies
يا أرض… لا تبكي
O Earth, do not weep — a child carries the light of hope for you.
“يا أرض، لا تبكي… أنا هنا، ومعي نور لا ينطفئO Earth, do not weep — I am here, and with me is a light that never fades.
Born from a child’s tender conversation with a wounded Earth, magma-earth is a living storybook that weaves together tales of resilience, hope, and faith. Here, every page turned is a step toward understanding our shared humanity — a space where stories heal, illuminate, and remind us that even in the deepest night, a small light can change the world.
الأرض
Earth
Exploring our deep bond with the natural world and the urgent call to protect it for future generations.
سلام
Peace
Stories of compassion and humanity that bridge divides and nurture understanding across communities.
أمل
Hope
A radiant belief in resilience and faith that lights the path from darkness toward a brighter tomorrow.
Step Into the Story
Turn the pages and experience the dialogue between Earth and the child
Environment
1قالت الأرض: أنا أبكي...
The Earth Said: I Weep...
"Why do you cry, dear Earth?" asked the child, kneeling beside a withered olive tree. "Because they have forgotten," the Earth whispered, "that my rivers once sang, and my forests once danced with the wind. Now they fill my lungs with smoke and my seas with sorrow."
❧
Swipe to turn pages
كيف يعمل؟
How It Works
Your journey through the magma-earth storybook unfolds in three simple steps.
1
استكشف
Explore
Browse the storybook world as a guest. Discover interactive narratives about Earth, hope, and the resilience of the human spirit.
2
تواصل
Connect
Join our growing community of storytellers across Jordan and beyond. Share your voice and become part of the conversation.
3
ألهم
Inspire
Contribute your own stories and educational resources. Help others find hope and understanding through the power of narrative.
قصص مميّزة
Featured Stories
Peace
نور السلام
Light of Peace
In a land torn apart by conflict, a young girl carries a glowing lantern through the darkness, its warm light drawing strangers together in unexpected harmony.
Read Story→Hope
بذرة الأمل
Seed of Hope
After a great storm leaves the village barren, a boy plants a single seed and waits faithfully, teaching his community the quiet power of patience and belief.
Read Story→أصوات من مجتمعنا
Community Voices
👩🌾
لينا العبدالله
📍Amman, Jordan
❤❤❤❤❤
هذه المنصة غيّرت نظرتي للعالم — قصص الأطفال هنا تمنحني أملاً حقيقياً بأن التغيير ممكن.
👨🌿
أحمد الزعبي
📍Irbid, Jordan
❤❤❤❤❤
كمعلم، أستخدم magma-earth لتعليم طلابي عن البيئة والسلام. القصص التفاعلية تجعل التعلم ممتعاً.
👩🎨
سارة الحسن
📍Beirut, Lebanon
❤❤❤❤❤
الحوار بين الطفل والأرض لمسني بعمق. شاركته مع عائلتي وأصبحنا نقرأ القصص معاً كل مساء.
تعلّم واكتشف
Learn & Discover
Explore curated educational resources that illuminate the challenges facing our world — from conflict and poverty to environmental degradation. Each resource is crafted to inspire understanding, empathy, and the courage to make a difference.
Featured Resource
Understanding Climate Change in the Middle East
An interactive guide exploring how rising temperatures, water scarcity, and desertification are reshaping communities across Jordan, Iraq, and the wider region.
View Resource→كُن جزءًا من القصة
Be Part of the Story
Join a community of storytellers, dreamers, and changemakers building a brighter world together.
No comments yet. Be the first!