scenic-poems
JafarI have written 4 poems which are in html form are capable of creating website
Comments (0)
Sign in to leave a comment
Project Tasks6
Implement Theme and Structure
As a user I want to be able to use the frontend so that the application visually matches the mock-design pages exactly. This task covers implementing the global color palette (#0F0F0F background, #1A1A1A surface, #EDEDED text, #FFD700 accent, #3E3E3E muted), celestial/spiritual typography, starry night background animations, and overall layout structure across all pages. Remove any scaffold pages that are not part of the final design (login, signup, welcome, dashboard pages). This task must remain independent and be completed before all other frontend tasks.
Implement Poems Backend API
As a user I want to be able to use the backend API so that poem data (title, excerpt, full content, metadata) is served from the MySQL database to the frontend. Implement FastAPI endpoints: GET /poems to list all poems with title and excerpt for the Home page cards, and GET /poems/{id} to retrieve the full poem text for the Poem detail page. Store the 4 poems exactly as provided by the author in the MySQL database with no modifications. Ensure the API is responsive and returns data within acceptable latency for the 3-second page load requirement.
Build Home Page
As a user I want to be able to use the frontend Home page so that I can browse all poems on a single index page. Implement the Home page based on the existing JSX design (v2). The page should include: a glowing Arabic calligraphy 'Bismillah hir rahman nir rahim' header with English translation, an interactive poem cards grid displaying all 4 poems (The Blue Moon, Even prophets, The Love of Al Wadood, My Half of Deen Disguised as Moon) with title, brief excerpt, and 'Read Poem' link, a starry night sky background with twinkling animations, smooth scrolling, hover effects (glowing border/soft fade-in) on poem cards, and a dua footer section with glowing Arabic text and English translation. Poems must be displayed exactly as provided by the author with no modifications.
Build Poem Detail Page
As a user I want to be able to use the frontend Poem detail page so that I can read the full text of a selected poem. Implement the Poem page based on the existing JSX design (v2). The page should display the full poem text exactly as provided by the author (no modifications), poem title with celestial-inspired styling, Arabic phrases highlighted in elegant script, a 'Scroll Back' / back-to-home navigation link, smooth fade-in transition on page load, and responsive layout for desktop, tablet, and mobile. This page is navigated to from poem cards on the Home page and links back to Home for selecting the next poem.
Integrate Frontend with API
As a user I want to be able to use the frontend so that poem data is dynamically fetched from the backend API and rendered on both the Home page and Poem detail page. Connect the React.js frontend to the FastAPI backend: fetch all poems for the Home page index cards, fetch individual poem content for the Poem detail page. Handle loading states and error states gracefully. Ensure poems are rendered exactly as provided with no modifications.
Implement Responsive Design
As a user I want to be able to use the frontend on any device so that the website is fully responsive and accessible across desktop, tablet, and mobile screen sizes. Apply responsive CSS/styling to the Home page and Poem detail page, ensuring the poem cards grid, header calligraphy, background animations, and typography adapt correctly. Verify the 3-second load time requirement is met on standard connections. Test across common breakpoints.
Scenic Poems
A celestial collection of devotional verses by Mohammed Ayub, written with the grace and guidance of Al-Wahaab
Where spirituality meets the stars
Scenic Poems Collection
Explore the spiritual and devotional works of Mohammed Ayub
The Night of Tahajjud
In the silence of the night, when the world sleeps deep, I rise to meet my Lord, in prayers I weep. The stars bear witness to the tears I shed, as whispered supplications from my heart are fed.
Read PoemâBeneath the Crescent Moon
Beneath the crescent moon, I stand in awe, of the Creator who made all without a flaw. The heavens stretch wide, a canvas of His art, each constellation a verse etched upon my heart.
Read PoemâThe Garden of Patience
In the garden of patience, roses bloom with time, each thorn a lesson wrapped in rhythm and rhyme. The soul that endures the storms of this earth, discovers through struggle its infinite worth.
Read PoemâRivers of Mercy
Like rivers of mercy flowing from above, His grace descends upon us, boundless in love. Through valleys of hardship and mountains of pain, His mercy reminds us no trial is in vain.
Read PoemâThe Traveller's Prayer
O Lord of the journey, guide my weary feet, through deserts of longing where dust and devotion meet. Let every step I take draw closer to Your light, a traveller seeking dawn through the depths of night.
Read PoemâWhispers of the Dawn
When dawn breaks gently with its golden hue, the world awakens fresh, adorned with dew. In Fajr's stillness there is peace to find, a quiet moment for the searching mind.
Read PoemâThe Night of Tahajjud
A reflection from the depths of the night prayer
Explore Themes
Navigate through the spiritual and celestial themes woven throughout the poetry of Mohammed Ayub
Tahajjud Poems
Explore heartfelt verses inspired by the stillness of night prayers, reflecting devotion and closeness to the Divine.
ExploreâCelestial Reflections
Journey through poems that contemplate the stars, the moon, and the vast cosmos as signs of the Creator.
ExploreâSpiritual Themes
Discover writings on faith, gratitude, and inner peace that speak to the soul and illuminate the heart.
ExploreâDevotional Verses
A curated collection of poems praising the beauty of worship, supplication, and remembrance of Allah.
ExploreâØąŲبŲŲŲŲا ØĒŲŲŲبŲŲŲŲ Ų ŲŲŲŲا ØĨŲŲŲŲŲŲ ØŖŲŲØĒŲ اŲØŗŲŲŲ ŲŲØšŲ اŲŲØšŲŲŲŲŲ Ų
"Our Lord, accept [this] from us. Indeed, You are the All-Hearing, the All-Knowing."
Surah Al-Baqarah 2:127
No comments yet. Be the first!