Create a modern, spiritually uplifting Islamic website for Rabbana.pk, a platform dedicated to Islamic knowledge and spirituality. The website should focus on displaying authentic duas, the 99 Names of Allah with meanings, Islamic wazaif, articles, lectures, and educational videos. Use a soft and elegant Islamic theme with calming colors (white, soft green, gold accents, beige backgrounds). The design must be mobile-friendly, fast, and optimized for reading and video consumption. Include high-quality, respectful Islamic imagery and subtle calligraphy patterns for a spiritual atmosphere. Website Sections/Pages: 1. Home Page Clean, welcoming hero banner with an Islamic quote (e.g., a Quranic verse or dua). CTA buttons: “Explore Duas”, “99 Names of Allah”, “Read Wazaif”, “Watch Lectures”. Search bar for quick dua lookup. Featured Duas (e.g., Morning Duas, Duas from the Quran). Carousel or grid for top categories: Duas, Allah's Names, Articles, Videos. 2. Duas Page Browseable and searchable list of authentic duas. Categories: Quranic Duas, Sunnah Duas, Duas for Daily Life (morning, evening, travel, illness, anxiety, etc.). Each dua should include: Arabic text (with clear Uthmani script), Transliteration, Translation in Urdu and English, Source (Quran/Hadith), Audio playback button for proper pronunciation. Option to bookmark or favorite duas. Option to copy or share the dua. 3. 99 Names of Allah (Asma-ul-Husna) Grid layout of the 99 names. On click/tap: show details including: Arabic name with diacritics English and Urdu translation Description and benefits of reciting the name Audio pronunciation Optional: Include filters like “Names for Barakah”, “Names for Rizq”, etc. 4. Wazaif List of authentic Islamic wazaif for various needs (e.g., Rizq, Shifa, Marriage, Protection). Clear structure: Purpose of the wazifa Relevant ayahs/duas Number of recitations and recommended time Precautions and authenticity level Add scholar-approved or referenced-only content. 5. Articles / Blog Well-written Islamic articles in Urdu and English. Topics may include: Islamic lifestyle, purification of heart, parenting, marriage, Ramadan, Fiqh issues, etc. Include author bio, publication date, and tags/categories. 6. Lectures & Videos Video library of Islamic lectures and short clips. Categories: Quran Tafsir, Hadith Lessons, Fiqh, Motivation, Youth Guidance, Women in Islam. Include speaker name, length, and topics covered. YouTube or self-hosted embedding, with playlists option. 7. Search & Filter Functionality Smart global search for duas, names of Allah, wazaif, and content. Filters by category, keyword, source, or content type (text, audio, video). 8. Contact Page Simple contact form: Name, Email, Subject, Message. Include email, optional phone, social media links. Option for users to suggest a dua or request an article/video topic. 9. About Us Introduce Rabbana.pk: vision, mission, team (if public), and authenticity policy. Mention the importance of verified Islamic content. Option to include scholar endorsements or consultation board if available. 10. Footer Quick links to main sections: Duas, Allah’s Names, Wazaif, Articles, Videos. Social media icons (YouTube, Instagram, Facebook, Telegram). Newsletter signup: “Get weekly duas and articles to your inbox.” Islamic quote or ayah (e.g., "And your Lord says, Call upon Me; I will respond to you" - Surah Ghafir: 60). Additional Features to Include: Dark Mode Toggle for night-time reading. Audio Support for all duas and names. Bookmark/Favorites Account System (optional login for users to save content). Multilingual Support: Start with Urdu & English, with scalable support for Arabic or other languages. SEO Optimized for Quranic content and educational searches. Privacy-focused Ads (if monetized) or donation support option (e.g., “Support Rabbana.pk”) - Initial Deployment
fceaedf verified | <html lang="en" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rabbana.pk - Authentic Islamic Knowledge & Spirituality</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| background-color: #f8f5f0; | |
| } | |
| .arabic { | |
| font-family: 'Amiri', 'Noto Naskh Arabic', serif; | |
| font-size: 1.5rem; | |
| line-height: 2.5rem; | |
| } | |
| .transliteration { | |
| font-style: italic; | |
| color: #6b7280; | |
| } | |
| .islamic-pattern { | |
| background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2U1ZTdlMCI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSI+PC9yZWN0Pjwvc3ZnPg=='); | |
| opacity: 0.1; | |
| } | |
| .gold-accent { | |
| color: #b8860b; | |
| } | |
| .bg-gold-accent { | |
| background-color: #b8860b; | |
| } | |
| .border-gold-accent { | |
| border-color: #b8860b; | |
| } | |
| .islamic-green { | |
| color: #2a5f3d; | |
| } | |
| .bg-islamic-green { | |
| background-color: #2a5f3d; | |
| } | |
| .border-islamic-green { | |
| border-color: #2a5f3d; | |
| } | |
| .dark-mode { | |
| background-color: #1a1a1a; | |
| color: #e5e7eb; | |
| } | |
| .dark-mode .card { | |
| background-color: #2d3748; | |
| border-color: #4a5568; | |
| } | |
| .dark-mode .arabic { | |
| color: #f3f4f6; | |
| } | |
| .dark-mode .transliteration { | |
| color: #9ca3af; | |
| } | |
| .dark-mode .islamic-pattern { | |
| opacity: 0.05; | |
| } | |
| .dark-mode .bg-islamic-green { | |
| background-color: #1e3a1e; | |
| } | |
| .dark-mode .gold-accent { | |
| color: #d4af37; | |
| } | |
| .dark-mode .islamic-green { | |
| color: #48bb78; | |
| } | |
| </style> | |
| </head> | |
| <body class="relative min-h-screen"> | |
| <!-- Dark Mode Toggle --> | |
| <button id="darkModeToggle" class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-islamic-green text-white shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-moon text-xl"></i> | |
| </button> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-40"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="w-12 h-12 rounded-full bg-islamic-green flex items-center justify-center"> | |
| <i class="fas fa-mosque text-white text-2xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-islamic-green">Rabbana.pk</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-gray-700 hover:text-islamic-green font-medium">Home</a> | |
| <a href="#duas" class="text-gray-700 hover:text-islamic-green font-medium">Duas</a> | |
| <a href="#asmaul-husna" class="text-gray-700 hover:text-islamic-green font-medium">99 Names</a> | |
| <a href="#wazaif" class="text-gray-700 hover:text-islamic-green font-medium">Wazaif</a> | |
| <a href="#articles" class="text-gray-700 hover:text-islamic-green font-medium">Articles</a> | |
| <a href="#videos" class="text-gray-700 hover:text-islamic-green font-medium">Videos</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <button class="px-4 py-2 bg-islamic-green text-white rounded-md hover:bg-opacity-90">Login</button> | |
| <button class="px-4 py-2 border border-islamic-green text-islamic-green rounded-md hover:bg-gray-50">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div id="mobileMenu" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50"> | |
| <div class="bg-white w-4/5 h-full ml-auto p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-xl font-bold text-islamic-green">Menu</h2> | |
| <button id="closeMobileMenu" class="text-gray-500"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <nav class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">Home</a> | |
| <a href="#duas" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">Duas</a> | |
| <a href="#asmaul-husna" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">99 Names</a> | |
| <a href="#wazaif" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">Wazaif</a> | |
| <a href="#articles" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">Articles</a> | |
| <a href="#videos" class="text-gray-700 hover:text-islamic-green font-medium py-2 border-b border-gray-100">Videos</a> | |
| </nav> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <button class="w-full py-2 bg-islamic-green text-white rounded-md mb-3">Login</button> | |
| <button class="w-full py-2 border border-islamic-green text-islamic-green rounded-md">Sign Up</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative overflow-hidden"> | |
| <div class="islamic-pattern absolute inset-0"></div> | |
| <div class="container mx-auto px-4 py-16 md:py-24 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="arabic text-3xl md:text-5xl font-bold mb-6 text-islamic-green leading-tight"> | |
| وَقَالَ رَبُّكُمُ ٱدْعُونِىٓ أَسْتَجِبْ لَكُمْ | |
| </h2> | |
| <p class="text-xl md:text-2xl text-gray-700 mb-8"> | |
| "And your Lord says, 'Call upon Me; I will respond to you.'" <br> | |
| <span class="text-gray-500">(Surah Ghafir 40:60)</span> | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#duas" class="px-6 py-3 bg-islamic-green text-white rounded-md hover:bg-opacity-90 flex items-center"> | |
| <i class="fas fa-hands-praying mr-2"></i> Explore Duas | |
| </a> | |
| <a href="#asmaul-husna" class="px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-allergies mr-2"></i> 99 Names | |
| </a> | |
| <a href="#wazaif" class="px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-spa mr-2"></i> Read Wazaif | |
| </a> | |
| <a href="#videos" class="px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-video mr-2"></i> Watch Lectures | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Search Section --> | |
| <section class="bg-white py-8 shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl mx-auto relative"> | |
| <input type="text" placeholder="Search for duas, names of Allah, wazaif..." | |
| class="w-full py-4 px-6 pr-12 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-islamic-green focus:border-transparent"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-islamic-green"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Duas --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Featured Duas</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Dua Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="arabic text-2xl leading-relaxed mb-4 text-right"> | |
| رَبَّنَا آتِنَا فِي الدُّنْيَا حَسَنَةً وَفِي الآخِرَةِ حَسَنَةً وَقِنَا عَذَابَ النَّارِ | |
| </div> | |
| <div class="transliteration mb-3"> | |
| Rabbana atina fid-dunya hasanatan wa fil-akhirati hasanatan waqina 'adhaban-nar | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "Our Lord, give us in this world [that which is] good and in the Hereafter [that which is] good and protect us from the punishment of the Fire." | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Surah Al-Baqarah 2:201</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-play text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-bookmark text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dua Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="arabic text-2xl leading-relaxed mb-4 text-right"> | |
| رَبِّ اشْرَحْ لِي صَدْرِي وَيَسِّرْ لِي أَمْرِي وَاحْلُلْ عُقْدَةً مِّن لِّسَانِي يَفْقَهُوا قَوْلِي | |
| </div> | |
| <div class="transliteration mb-3"> | |
| Rabbi ishrah li sadri, wa yassir li amri, wah-lul 'uqdatan min lisani yafqahu qawli | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "My Lord, expand for me my breast [with assurance], ease for me my task, and untie the knot from my tongue that they may understand my speech." | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Surah Ta-Ha 20:25-28</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-play text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-bookmark text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Dua Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="arabic text-2xl leading-relaxed mb-4 text-right"> | |
| حَسْبِيَ اللَّهُ لَا إِلَٰهَ إِلَّا هُوَ ۖ عَلَيْهِ تَوَكَّلْتُ ۖ وَهُوَ رَبُّ الْعَرْشِ الْعَظِيمِ | |
| </div> | |
| <div class="transliteration mb-3"> | |
| Hasbiyallahu la ilaha illa huwa, 'alayhi tawakkaltu, wa huwa Rabbul-'Arshil-'Azim | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| "Sufficient for me is Allah; there is no deity except Him. On Him I have relied, and He is the Lord of the Great Throne." | |
| </p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500">Surah At-Tawbah 9:129</span> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-play text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-bookmark text-xs"></i> | |
| </button> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fas fa-share-alt text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#duas" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| View All Duas <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Explore Islamic Content</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <!-- Category 1 --> | |
| <a href="#duas" class="group"> | |
| <div class="bg-gray-50 rounded-lg p-6 text-center hover:bg-islamic-green hover:text-white transition-colors duration-300 h-full flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-islamic-green text-white flex items-center justify-center mb-4 group-hover:bg-white group-hover:text-islamic-green"> | |
| <i class="fas fa-hands-praying text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Duas</h3> | |
| <p class="text-sm text-gray-600 group-hover:text-white">Authentic supplications from Quran & Sunnah</p> | |
| </div> | |
| </a> | |
| <!-- Category 2 --> | |
| <a href="#asmaul-husna" class="group"> | |
| <div class="bg-gray-50 rounded-lg p-6 text-center hover:bg-islamic-green hover:text-white transition-colors duration-300 h-full flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-islamic-green text-white flex items-center justify-center mb-4 group-hover:bg-white group-hover:text-islamic-green"> | |
| <i class="fas fa-allergies text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">99 Names</h3> | |
| <p class="text-sm text-gray-600 group-hover:text-white">Asma-ul-Husna with meanings & benefits</p> | |
| </div> | |
| </a> | |
| <!-- Category 3 --> | |
| <a href="#wazaif" class="group"> | |
| <div class="bg-gray-50 rounded-lg p-6 text-center hover:bg-islamic-green hover:text-white transition-colors duration-300 h-full flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-islamic-green text-white flex items-center justify-center mb-4 group-hover:bg-white group-hover:text-islamic-green"> | |
| <i class="fas fa-spa text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Wazaif</h3> | |
| <p class="text-sm text-gray-600 group-hover:text-white">Authentic Islamic remedies & practices</p> | |
| </div> | |
| </a> | |
| <!-- Category 4 --> | |
| <a href="#articles" class="group"> | |
| <div class="bg-gray-50 rounded-lg p-6 text-center hover:bg-islamic-green hover:text-white transition-colors duration-300 h-full flex flex-col items-center"> | |
| <div class="w-16 h-16 rounded-full bg-islamic-green text-white flex items-center justify-center mb-4 group-hover:bg-white group-hover:text-islamic-green"> | |
| <i class="fas fa-book-open text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Articles</h3> | |
| <p class="text-sm text-gray-600 group-hover:text-white">Islamic knowledge & guidance</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 99 Names of Allah Section --> | |
| <section id="asmaul-husna" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">The 99 Names of Allah</h2> | |
| <div class="mb-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button class="px-4 py-2 text-sm font-medium rounded-l-lg border border-islamic-green bg-islamic-green text-white"> | |
| All Names | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium border-t border-b border-islamic-green text-islamic-green hover:bg-gray-50"> | |
| For Barakah | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium border-t border-b border-islamic-green text-islamic-green hover:bg-gray-50"> | |
| For Rizq | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium border-t border-b border-islamic-green text-islamic-green hover:bg-gray-50"> | |
| For Shifa | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium rounded-r-lg border border-islamic-green text-islamic-green hover:bg-gray-50"> | |
| For Protection | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <!-- Name 1 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلرَّحْمَـٰنُ</div> | |
| <h3 class="font-semibold mb-1">Ar-Rahman</h3> | |
| <p class="text-sm text-gray-600">The Beneficent</p> | |
| </div> | |
| <!-- Name 2 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلرَّحِيمُ</div> | |
| <h3 class="font-semibold mb-1">Ar-Raheem</h3> | |
| <p class="text-sm text-gray-600">The Merciful</p> | |
| </div> | |
| <!-- Name 3 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلْمَلِكُ</div> | |
| <h3 class="font-semibold mb-1">Al-Malik</h3> | |
| <p class="text-sm text-gray-600">The King</p> | |
| </div> | |
| <!-- Name 4 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلْقُدُّوسُ</div> | |
| <h3 class="font-semibold mb-1">Al-Quddus</h3> | |
| <p class="text-sm text-gray-600">The Holy</p> | |
| </div> | |
| <!-- Name 5 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلسَّلَامُ</div> | |
| <h3 class="font-semibold mb-1">As-Salam</h3> | |
| <p class="text-sm text-gray-600">The Peace</p> | |
| </div> | |
| <!-- Name 6 --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow duration-300 cursor-pointer"> | |
| <div class="arabic text-2xl mb-2 text-islamic-green">ٱلْمُؤْمِنُ</div> | |
| <h3 class="font-semibold mb-1">Al-Mu'min</h3> | |
| <p class="text-sm text-gray-600">The Granter of Security</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| View All 99 Names <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Wazaif Section --> | |
| <section id="wazaif" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Authentic Islamic Wazaif</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Wazifa 1 --> | |
| <div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-islamic-green text-white flex items-center justify-center"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 font-semibold text-lg">For Rizq (Sustenance)</h3> | |
| </div> | |
| <div class="arabic text-xl mb-4 text-right"> | |
| يَا وَهَّابُ | |
| </div> | |
| <div class="transliteration mb-3"> | |
| Ya Wahhab | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Recite this name of Allah 100 times after Fajr prayer for increase in rizq (sustenance). | |
| </p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <div class="flex items-center mb-1"> | |
| <i class="fas fa-clock mr-2"></i> Best Time: After Fajr | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> Authenticity: Sahih (Authentic) | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-islamic-green text-white rounded-md hover:bg-opacity-90"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Wazifa 2 --> | |
| <div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-islamic-green text-white flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 font-semibold text-lg">For Protection</h3> | |
| </div> | |
| <div class="arabic text-xl mb-4 text-right"> | |
| بِسْمِ اللَّهِ الَّذِي لَا يَضُرُّ مَعَ اسْمِهِ شَيْءٌ فِي الْأَرْضِ وَلَا فِي السَّمَاءِ وَهُوَ السَّمِيعُ الْعَلِيمُ | |
| </div> | |
| <div class="transliteration mb-3"> | |
| Bismillahilladhi la yadurru ma'asmihi shay'un fil-ardi wa la fis-sama'i wa huwas-Sami'ul-'Alim | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Recite this dua 3 times in the morning and evening for protection from all harm. | |
| </p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <div class="flex items-center mb-1"> | |
| <i class="fas fa-clock mr-2"></i> Best Time: Morning & Evening | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> Authenticity: Sahih (Authentic) | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-islamic-green text-white rounded-md hover:bg-opacity-90"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Wazifa 3 --> | |
| <div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-islamic-green text-white flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 font-semibold text-lg">For Shifa (Healing)</h3> | |
| </div> | |
| <div class="arabic text-xl mb-4 text-right"> | |
| أَعُوذُ بِعِزَّةِ اللَّهِ وَقُدْرَتِهِ مِنْ شَرِّ مَا أَجِدُ وَأُحَاذِرُ | |
| </div> | |
| <div class="transliteration mb-3"> | |
| A'udhu bi'izzatillahi wa qudratihi min sharri ma ajidu wa uhadhir | |
| </div> | |
| <p class="text-gray-700 mb-4"> | |
| Place your hand on the area of pain and recite this dua 7 times for healing. | |
| </p> | |
| <div class="text-sm text-gray-500 mb-4"> | |
| <div class="flex items-center mb-1"> | |
| <i class="fas fa-clock mr-2"></i> Best Time: Anytime | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-check-circle mr-2"></i> Authenticity: Sahih (Authentic) | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-islamic-green text-white rounded-md hover:bg-opacity-90"> | |
| View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| View All Wazaif <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Articles Section --> | |
| <section id="articles" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Islamic Articles</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Article 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>Islamic Lifestyle</span> | |
| <span class="mx-2">•</span> | |
| <span>May 15, 2023</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-3">The Etiquette of Making Dua in Islam</h3> | |
| <p class="text-gray-600 mb-4">Learn the proper manners and times when duas are more likely to be accepted according to the Quran and Sunnah.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm">By Sheikh Ibrahim</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1542816417-0983675a5a6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>Purification</span> | |
| <span class="mx-2">•</span> | |
| <span>April 28, 2023</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-3">Tazkiyah: Purification of the Heart in Islam</h3> | |
| <p class="text-gray-600 mb-4">Understanding the concept of spiritual purification and practical steps to cleanse your heart from diseases like pride, envy and greed.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm">By Dr. Aisha Khan</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1577202214328-c04b77cefb5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>Parenting</span> | |
| <span class="mx-2">•</span> | |
| <span>April 10, 2023</span> | |
| </div> | |
| <h3 class="font-semibold text-lg mb-3">Raising Righteous Children: Islamic Perspective</h3> | |
| <p class="text-gray-600 mb-4">Practical advice from the Quran and Sunnah on how to raise children with strong Islamic values in the modern world.</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2"> | |
| <span class="text-sm">By Ustadh Muhammad Ali</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| View All Articles <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Videos Section --> | |
| <section id="videos" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Islamic Lectures & Videos</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Video 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://i.ytimg.com/vi/7f6P6Vt0X6k/maxresdefault.jpg" alt="Video Thumbnail" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 bg-opacity-80 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">The Power of Dua in Islam</h3> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>45 min</span> | |
| <span class="mx-2">•</span> | |
| <span>Sheikh Yusuf Estes</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Understanding the importance and proper way of making dua according to Quran and Sunnah.</p> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://i.ytimg.com/vi/9tJY6XH_3X4/maxresdefault.jpg" alt="Video Thumbnail" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 bg-opacity-80 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Asma-ul-Husna: The Beautiful Names of Allah</h3> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>1 hr 12 min</span> | |
| <span class="mx-2">•</span> | |
| <span>Dr. Zakir Naik</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Detailed explanation of Allah's beautiful names and their benefits in our daily lives.</p> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200 hover:shadow-md transition-shadow duration-300"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <img src="https://i.ytimg.com/vi/4QnwP0pY9X0/maxresdefault.jpg" alt="Video Thumbnail" class="absolute h-full w-full object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-16 h-16 rounded-full bg-red-600 bg-opacity-80 flex items-center justify-center"> | |
| <i class="fas fa-play text-white text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-semibold mb-2">Morning & Evening Adhkar: Protection & Barakah</h3> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>38 min</span> | |
| <span class="mx-2">•</span> | |
| <span>Mufti Menk</span> | |
| </div> | |
| <p class="text-sm text-gray-600">Learn the authentic morning and evening supplications from the Sunnah of Prophet Muhammad (PBUH).</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| View All Videos <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-12 bg-islamic-green text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Get Weekly Islamic Content</h2> | |
| <p class="mb-6">Subscribe to our newsletter to receive authentic duas, articles and reminders directly to your inbox.</p> | |
| <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md text-gray-800 focus:outline-none focus:ring-2 focus:ring-gold-accent"> | |
| <button type="submit" class="px-6 py-3 bg-gold-accent text-white rounded-md hover:bg-opacity-90 font-medium"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-sm mt-4 opacity-80">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">Contact Us</h2> | |
| <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Get in Touch</h3> | |
| <p class="text-gray-700 mb-6">Have questions, suggestions or feedback? We'd love to hear from you.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-islamic-green text-white flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email Us</h4> | |
| <p class="text-gray-600">contact@rabbana.pk</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-islamic-green text-white flex items-center justify-center mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Call Us</h4> | |
| <p class="text-gray-600">+92 300 1234567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-islamic-green text-white flex items-center justify-center mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Our Office</h4> | |
| <p class="text-gray-600">Islamabad, Pakistan</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium mb-3">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 text-gray-700 flex items-center justify-center hover:bg-islamic-green hover:text-white"> | |
| <i class="fab fa-telegram-plane"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <form class="bg-white p-6 rounded-lg shadow-sm border border-gray-200"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 mb-2">Your Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-islamic-green focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-islamic-green focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="subject" class="block text-gray-700 mb-2">Subject</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-islamic-green focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-islamic-green focus:border-transparent"></textarea> | |
| </div> | |
| <button type="submit" class="w-full py-3 bg-islamic-green text-white rounded-md hover:bg-opacity-90 font-medium"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-center mb-8 text-islamic-green">About Rabbana.pk</h2> | |
| <div class="bg-gray-50 p-8 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-4 text-islamic-green">Our Mission</h3> | |
| <p class="text-gray-700 mb-6"> | |
| Rabbana.pk is dedicated to providing authentic Islamic knowledge and spiritual guidance based on the Quran and Sunnah. Our mission is to make authentic Islamic content accessible to everyone, helping Muslims strengthen their faith and connection with Allah. | |
| </p> | |
| <h3 class="text-xl font-semibold mb-4 text-islamic-green">Authenticity</h3> | |
| <p class="text-gray-700 mb-6"> | |
| We take great care to ensure all content on Rabbana.pk is verified from authentic sources. Our team of Islamic scholars reviews all duas, wazaif and articles before publication to maintain the highest standards of authenticity. | |
| </p> | |
| <h3 class="text-xl font-semibold mb-4 text-islamic-green">Our Team</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member" class="w-20 h-20 rounded-full mx-auto mb-3"> | |
| <h4 class="font-medium">Sheikh Ibrahim</h4> | |
| <p class="text-sm text-gray-600">Islamic Scholar</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team Member" class="w-20 h-20 rounded-full mx-auto mb-3"> | |
| <h4 class="font-medium">Dr. Aisha Khan</h4> | |
| <p class="text-sm text-gray-600">Content Reviewer</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm text-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Team Member" class="w-20 h-20 rounded-full mx-auto mb-3"> | |
| <h4 class="font-medium">Ustadh Muhammad Ali</h4> | |
| <p class="text-sm text-gray-600">Researcher</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-islamic-green text-islamic-green rounded-md hover:bg-islamic-green hover:text-white transition-colors duration-300"> | |
| Learn More About Us <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-islamic-green text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Rabbana.pk</h3> | |
| <p class="mb-4">Your trusted source for authentic Islamic knowledge, duas, wazaif and spiritual guidance.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="hover:underline">Home</a></li> | |
| <li><a href="#duas" class="hover:underline">Duas</a></li> | |
| <li><a href="#asmaul-husna" class="hover:underline">99 Names</a></li> | |
| <li><a href="#wazaif" class="hover:underline">Wazaif</a></li> | |
| <li><a href="#articles" class="hover:underline">Articles</a></li> | |
| <li><a href="#videos" class="hover:underline">Videos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:underline">Quran</a></li> | |
| <li><a href="#" class="hover:underline">Hadith</a></li> | |
| <li><a href="#" class="hover:underline">Fiqh</a></li> | |
| <li><a href="#" class="hover:underline">Seerah</a></li> | |
| <li><a href="#" class="hover:underline">Islamic History</a></li> | |
| <li><a href="#" class="hover:underline">Duas Database</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Support Us</h4> | |
| <p class="mb-4">Help us continue providing authentic Islamic content by supporting our work.</p> | |
| <button class="px-6 py-2 bg-gold-accent rounded-md hover:bg-opacity-90 font-medium"> | |
| Donate Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="pt-6 border-t border-white border-opacity-20 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm mb-4 md:mb-0">© 2023 Rabbana.pk. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-sm hover:underline">Privacy Policy</a> | |
| <a href="#" class="text-sm hover:underline">Terms of Service</a> | |
| <a href="#" class="text-sm hover:underline">Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuBtn = document.querySelector('button:has(.fa-bars)'); | |
| const closeMobileMenuBtn = document.getElementById('closeMobileMenu'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.remove('hidden'); | |
| }); | |
| closeMobileMenuBtn.addEventListener('click', () => { | |
| mobileMenu.classList.add('hidden'); | |
| }); | |
| // Dark Mode Toggle | |
| const darkModeToggle = document.getElementById('darkModeToggle'); | |
| const body = document.body; | |
| darkModeToggle.addEventListener('click', () => { | |
| body.classList.toggle('dark-mode'); | |
| if (body.classList.contains('dark-mode')) { | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>'; | |
| localStorage.setItem('darkMode', 'enabled'); | |
| } else { | |
| darkModeToggle.innerHTML = '<i class="fas fa-moon text-xl"></i>'; | |
| localStorage.setItem('darkMode', 'disabled'); | |
| } | |
| }); | |
| // Check for saved dark mode preference | |
| if (localStorage.getItem('darkMode') === 'enabled') { | |
| body.classList.add('dark-mode'); | |
| darkModeToggle.innerHTML = '<i class="fas fa-sun text-xl"></i>'; | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=us3aaa/rabbana" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |