Create a modern, responsive landing page for an offline mobile app called "Lfqih Bot", an AI-powered Qur’an learning assistant. The design should use a clean dark green color palette, inspired by ChatGPT, with elegant Islamic visual elements. The site should follow a structured layout with clear sections.
The landing page must include:
A hero section with a bold headline introducing Lfqih Bot as a private, voice-interactive Qur’an learning companion. Include a brief description, a download button, and a preview of the app on mobile.
A features section with four main cards or columns:
Adhan Notifications: Alerts for all five daily prayers using GPS or manual location, with Hijri calendar and Eid reminders.
Qur’an Reading Assistant: Uthmani Mushaf view with tracking, Surah/Juz/Hizb selection, and reading progress saved automatically.
Voice Interaction: Real-time feedback on Qur’an recitation using embedded AI models for Arabic speech recognition and pronunciation analysis.
Interactive Quizzes: Smart quizzes generated based on what the user has already read, with badges, progress, and scores.
A dedicated section describing the offline AI backend, mentioning Whisper, MFCC + LSTM, and Coqui TTS, with a focus on privacy and running entirely on-device.
A future roadmap section showing planned upgrades like Tajweed detection, Arabic LLM for Islamic Q&A, Ramadan planning, and Zakat tools.
A multilingual interface description: supports English, Arabic, and French with RTL layout for Arabic.
A final section for developers or early adopters showing that the app can be deployed in 2 steps: one to build the Python AI, and the other to build the React Native mobile app.
Design must be 4K-ready, mobile-first, accessible, and elegant. Include smooth scroll, modern typography, and visual consistency across sections. No external dependencies on cloud APIs. All visuals should reflect a blend of modern UI and Islamic aesthetics.
I'll create a modern, responsive landing page for Lfqih Bot with a clean dark green color palette and Islamic-inspired design elements. The page will be mobile-first, accessible, and include all the sections you've requested.
I've created a comprehensive, modern landing page for Lfqih Bot that includes all the requested sections:
The page emphasizes privacy, offline functionality, and the comprehensive nature of the AI-powered Qur'an learning experience while maintaining an elegant, professional appearance.
i need to add page of ai , to recorde the voice and run the ai , and print the resulte
I'll create an AI voice recording page that integrates with the landing page, allowing users to record their voice, process it with AI, and display the results.
I've created a comprehensive AI voice recording page that includes:
Voice Recording Interface:
Audio Playback:
AI Processing:
Detailed Results Display:
User Experience:
The page is fully integrated with your landing page - users can navigate between the main page and the AI demo seamlessly. You can replace the mock AI processing with actual API calls to your Python AI backend when ready.
add to this in the site web part of reading like quran and place to write the name of sura and he need to display it page by page , and you can go to the next page and go back in oage befor , and add this in the voice recording than test it if is correcte with ai , than add other part of salawat prayers in islam , like deigne for all salat , and name of salat and timing of this salat base on time in morroco , and add in quiz in quran like a random aya he need to write it or read it , and part of khatm like sameone want to read all quran but tha site web need to remeber every time the last place he is stop read , this name khatma , and part of exam , like the site web tell you what the part of ahzab you want to examing in it , than he give you random ayat in this part of a7zab like betwen hizb 5 to hizb 10 , this is 5 ahzab , he need to give you radmon question ayat and you need to read it to hem than give you like point for every question