Spaces:
Running
Running
Website Name: Rabbana.pk Purpose: Provide authentic Islamic content including duas, Asma-ul-Husna (Allah’s 99 Names), Islamic wazaif, educational articles, lectures, and videos in a clean, user-friendly layout. 🎨 Design Requirements: Use a modern, lightweight Islamic WordPress theme, such as: Astra, Kadence, Blocksy, or a custom-built theme. Prefer RTL compatibility (for Arabic/Urdu) and Gutenberg/full-site editing support. Color Scheme: White, soft green, light gold, beige accents. Use subtle Islamic motifs (like geometric patterns, calligraphy) in backgrounds or section dividers. Clean, readable Arabic/Urdu typography (support for Uthmani script). 🧩 Suggested Plugins to Use: Elementor or Gutenberg Blocks – for flexible content layout. WPML or TranslatePress – for Urdu/English multilingual support. LearnDash or Sensei – optional for structured lecture series. Pods or Advanced Custom Fields (ACF) – to manage custom post types like Duas, Names of Allah, Wazaif. TablePress – for displaying structured content like 99 names or dua tables. FV Player or Presto Player – for embedded Islamic video playback. SEO plugin (RankMath or Yoast) – for content optimization. WP Super Cache or LiteSpeed Cache – for performance optimization. 📄 Page Structure: 1. Home Page Hero section: Islamic quote or Quranic verse overlay on a soft image of the Kaaba or Quran. Search bar: “Search for a Dua, Name, or Wazifa”. Quick navigation tiles to: Duas 99 Names of Allah Wazaif Articles Lectures/Videos Featured Dua of the Day (automated with a random shortcode). Latest Articles & Featured Videos carousel. 2. Duas (Custom Post Type) Categorized (e.g., Quranic Duas, Morning Duas, Duas for Anxiety, Travel, Forgiveness). Each Dua should include: Arabic with diacritics (use Quran Font plugin or SVG/Google Fonts). Transliteration Urdu & English translation Source reference (Quran/Hadith) Audio play button (upload or embed MP3) Share/copy button Filters by category or need. 3. 99 Names of Allah (Asma-ul-Husna Page) Use grid layout (9x11 or 11x9). Each name clickable → individual page/post with: Arabic name (large, styled) Transliteration English & Urdu translation Benefits and meaning Audio pronunciation Optional: “Listen to All 99 Names” audio player or playlist. 4. Wazaif (Custom Post Type) Category-based layout (e.g., Rizq, Marriage, Health, Protection). Each wazifa post includes: Purpose Steps with counts Recommended times Source if available Cautions/advice Print or share option. 5. Articles / Blog Islamic lifestyle, motivation, family, purification, Ramadan, etc. Categories and tags for navigation. Reading time indicator & share buttons. Author box and publication date. 6. Lectures & Videos Video gallery with filters: Topics (Tafsir, Fiqh, Motivation, Youth), Speakers, Series. YouTube or Vimeo embeds. Descriptions, speaker bio, related videos. Optional: audio-only mode or podcast-style layout. 7. About Us Vision and purpose of Rabbana.pk Statement on authenticity and source verification Mention of any scholars, editors, or curators 8. Contact Page Contact form using WPForms or Fluent Forms Email and social media Optional “Suggest a Topic/Dua” form 9. Footer Quick links to all key sections Daily Quranic quote or dua Social icons Newsletter signup (MailPoet or FluentCRM) ✨ Extra Features: Bookmark/Favorites system (e.g., using “Favorites” plugin). Dark mode toggle for nighttime browsing. Sticky audio player for reciting or listening to Duas or Names of Allah. Push notifications for new articles or Duas of the Day. User accounts (optional) for saving favorite content or tracking reading/listening. 🔐 Security & Speed Use Wordfence for security. Use LiteSpeed Cache or WP Rocket for performance. Optimize images using Smush or ShortPixel. - Initial Deployment
8a6a824 verified | <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rabbana.pk - Authentic Islamic Content</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> | |
| .arabic-text { | |
| font-family: 'Amiri', serif; | |
| font-size: 1.5rem; | |
| line-height: 2.5rem; | |
| direction: rtl; | |
| } | |
| .urdu-text { | |
| font-family: 'Noto Naskh Arabic', serif; | |
| direction: rtl; | |
| } | |
| .transliteration { | |
| font-style: italic; | |
| color: #6b7280; | |
| } | |
| .hero-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d1fae5' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .islamic-pattern { | |
| background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 8h12v6H42v-6zm14-8h12v6H56V8zm14 0h12v6H70V8zm0-8h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23d1fae5' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E"); | |
| } | |
| .gold-accent { | |
| background-color: #f5d07a; | |
| } | |
| .green-accent { | |
| background-color: #d1fae5; | |
| } | |
| .dark-green { | |
| background-color: #065f46; | |
| } | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .card { | |
| background-color: #2d3748; | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .text-gray-800 { | |
| color: #e2e8f0; | |
| } | |
| .dark-mode .text-gray-600 { | |
| color: #a0aec0; | |
| } | |
| .dark-mode .bg-white { | |
| background-color: #2d3748; | |
| } | |
| .dark-mode .bg-gray-100 { | |
| background-color: #4a5568; | |
| } | |
| .dark-mode .border-gray-200 { | |
| border-color: #4a5568; | |
| } | |
| .dark-mode .gold-accent { | |
| background-color: #d69e2e; | |
| } | |
| .dark-mode .green-accent { | |
| background-color: #2f855a; | |
| } | |
| .dark-mode .dark-green { | |
| background-color: #38a169; | |
| } | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| .sticky-player { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 50; | |
| } | |
| .nav-item:hover .nav-dropdown { | |
| display: block; | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 1000px; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-white text-gray-800 transition-all"> | |
| <!-- Dark Mode Toggle --> | |
| <div class="fixed right-4 top-4 z-50"> | |
| <button id="darkModeToggle" class="p-2 rounded-full bg-gray-200 text-gray-700 hover:bg-gray-300 focus:outline-none"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| <!-- 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"> | |
| <a href="#" class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full gold-accent flex items-center justify-center mr-2"> | |
| <i class="fas fa-mosque text-white text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold text-green-800">Rabbana.pk</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-6"> | |
| <nav> | |
| <ul class="flex space-x-6"> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">Home</a> | |
| </li> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">Duas</a> | |
| <div class="nav-dropdown absolute hidden w-48 bg-white shadow-lg rounded-md mt-2 py-1 z-50"> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Morning Duas</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Evening Duas</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Quranic Duas</a> | |
| <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Travel Duas</a> | |
| </div> | |
| </li> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">99 Names</a> | |
| </li> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">Wazaif</a> | |
| </li> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">Articles</a> | |
| </li> | |
| <li class="nav-item relative group"> | |
| <a href="#" class="text-gray-700 hover:text-green-600 font-medium">Videos</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium"> | |
| <i class="fas fa-user mr-2"></i>Login | |
| </button> | |
| <div class="relative"> | |
| <button id="searchToggle" class="text-gray-600 hover:text-green-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <div id="searchBox" class="absolute hidden right-0 mt-2 w-64 bg-white shadow-lg rounded-md p-2"> | |
| <input type="text" placeholder="Search for a Dua, Name, or Wazifa..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobileMenuButton" class="text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobileMenu" class="mobile-menu md:hidden bg-white"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">Home</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">Duas</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">99 Names</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">Wazaif</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">Articles</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-green-600 font-medium border-b border-gray-100">Videos</a> | |
| <div class="py-2 border-b border-gray-100"> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium"> | |
| <i class="fas fa-user mr-2"></i>Login | |
| </button> | |
| </div> | |
| <div class="py-2"> | |
| <input type="text" placeholder="Search..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-cover bg-center py-20" style="background-image: url('https://images.unsplash.com/photo-1542816416-0af1e5c9d53c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">Seek Nearness to Allah</h1> | |
| <p class="text-xl text-white mb-8">Authentic Islamic content including duas, Asma-ul-Husna, wazaif and educational articles</p> | |
| <div class="relative max-w-xl mx-auto"> | |
| <input type="text" placeholder="Search for a Dua, Name, or Wazifa..." class="w-full px-5 py-4 rounded-full focus:outline-none focus:ring-2 focus:ring-green-500"> | |
| <button class="absolute right-2 top-2 bg-green-600 text-white p-2 rounded-full hover:bg-green-700"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Navigation --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-10">Explore Islamic Content</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <a href="#" class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-hands-praying text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Duas</h3> | |
| <p class="text-gray-600">Authentic supplications from Quran & Sunnah</p> | |
| </div> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-star-and-crescent text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">99 Names</h3> | |
| <p class="text-gray-600">Asma-ul-Husna with meanings & benefits</p> | |
| </div> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-book-quran text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Wazaif</h3> | |
| <p class="text-gray-600">Islamic remedies for various needs</p> | |
| </div> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6 text-center"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-book-open text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Articles</h3> | |
| <p class="text-gray-600">Islamic knowledge & lifestyle guidance</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dua of the Day --> | |
| <section class="py-12 green-accent islamic-pattern"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="p-8"> | |
| <div class="uppercase tracking-wide text-sm text-green-600 font-semibold mb-1">Dua of the Day</div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Dua for Morning</h2> | |
| <div class="mb-6"> | |
| <p class="arabic-text text-right mb-4">أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ، لَا إِلَهَ إِلَّا اللَّهُ وَحْدَهُ لَا شَرِيكَ لَهُ</p> | |
| <p class="transliteration mb-2">Asbahna wa-asbahal-mulku lillah, wal-hamdu lillah, la ilaha illallah wahdahu la sharika lah</p> | |
| <p class="text-gray-700 mb-2">"We have reached the morning and at this very time all sovereignty belongs to Allah. All praise is for Allah. There is none worthy of worship but Allah, alone, without partner."</p> | |
| <p class="text-sm text-gray-500">Source: Muslim 4/2088</p> | |
| </div> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700"> | |
| <i class="fas fa-play mr-2"></i> Listen | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"> | |
| <i class="fas fa-bookmark mr-2"></i> Save | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"> | |
| <i class="fas fa-share-alt mr-2"></i> Share | |
| </button> | |
| <button class="flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"> | |
| <i class="fas fa-copy mr-2"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:flex-shrink-0 md:w-48 bg-green-50 flex items-center justify-center p-6"> | |
| <i class="fas fa-hands-praying text-green-600 text-6xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Latest Articles --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-6">Latest Articles</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-10">Beneficial Islamic knowledge to strengthen your faith and practice</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Article 1 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <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=1350&q=80');"></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>5 min read</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">The Etiquette of Making Dua</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 Sunnah of the Prophet Muhammad (PBUH).</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Read More <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>Ramadan</span> | |
| <span class="mx-2">•</span> | |
| <span>7 min read</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Preparing for Ramadan: A Spiritual Guide</h3> | |
| <p class="text-gray-600 mb-4">Practical tips and spiritual advice to help you make the most of the blessed month of Ramadan before it arrives.</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Read More <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1566669437684-c2b17689c4c1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-500 mb-2"> | |
| <span>Family</span> | |
| <span class="mx-2">•</span> | |
| <span>4 min read</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Raising Righteous Children in Modern Times</h3> | |
| <p class="text-gray-600 mb-4">Islamic guidance on nurturing your children's faith and character in an increasingly challenging environment.</p> | |
| <a href="#" class="text-green-600 font-medium hover:text-green-700">Read More <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"> | |
| View All Articles <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Videos --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-6">Featured Videos</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-10">Beneficial Islamic lectures and reminders from trusted scholars</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">The Power of Dua in Islam</h3> | |
| <p class="text-gray-600 mb-4">A profound lecture on the importance of supplication in a Muslim's life.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user mr-2"></i> | |
| <span>Sh. Abdul Rahman</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>45 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Understanding Asma-ul-Husna</h3> | |
| <p class="text-gray-600 mb-4">Detailed explanation of Allah's beautiful names and their meanings.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user mr-2"></i> | |
| <span>Dr. Muhammad Ali</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>32 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="card bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="relative pb-[56.25%] bg-gray-200"> | |
| <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Daily Wazaif for Protection</h3> | |
| <p class="text-gray-600 mb-4">Authentic Islamic practices for spiritual protection in daily life.</p> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-user mr-2"></i> | |
| <span>Sh. Ibrahim Khan</span> | |
| <span class="mx-2">•</span> | |
| <i class="fas fa-clock mr-1"></i> | |
| <span>28 min</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"> | |
| View All Videos <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 99 Names Preview --> | |
| <section class="py-12 bg-white hero-pattern"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-6">Asma-ul-Husna (99 Names of Allah)</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-10">Learn and reflect upon the beautiful names and attributes of Allah</p> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| <!-- Sample of 10 names --> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الرَّحْمَنُ</p> | |
| <h3 class="font-medium">Ar-Rahman</h3> | |
| <p class="text-sm text-gray-600">The Most Gracious</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الرَّحِيمُ</p> | |
| <h3 class="font-medium">Ar-Raheem</h3> | |
| <p class="text-sm text-gray-600">The Most Merciful</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْمَلِكُ</p> | |
| <h3 class="font-medium">Al-Malik</h3> | |
| <p class="text-sm text-gray-600">The King</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْقُدُّوسُ</p> | |
| <h3 class="font-medium">Al-Quddus</h3> | |
| <p class="text-sm text-gray-600">The Most Holy</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">السَّلاَمُ</p> | |
| <h3 class="font-medium">As-Salam</h3> | |
| <p class="text-sm text-gray-600">The Source of Peace</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْمُؤْمِنُ</p> | |
| <h3 class="font-medium">Al-Mu'min</h3> | |
| <p class="text-sm text-gray-600">The Guardian of Faith</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْمُهَيْمِنُ</p> | |
| <h3 class="font-medium">Al-Muhaymin</h3> | |
| <p class="text-sm text-gray-600">The Protector</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْعَزِيزُ</p> | |
| <h3 class="font-medium">Al-Aziz</h3> | |
| <p class="text-sm text-gray-600">The Almighty</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْجَبَّارُ</p> | |
| <h3 class="font-medium">Al-Jabbar</h3> | |
| <p class="text-sm text-gray-600">The Compeller</p> | |
| </a> | |
| <a href="#" class="card bg-white rounded-lg shadow-sm p-4 text-center hover:shadow-md transition-shadow"> | |
| <p class="arabic-text mb-2">الْمُتَكَبِّرُ</p> | |
| <h3 class="font-medium">Al-Mutakabbir</h3> | |
| <p class="text-sm text-gray-600">The Supreme</p> | |
| </a> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium"> | |
| View All 99 Names <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 dark-green text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Stay Updated</h2> | |
| <p class="text-xl mb-8">Subscribe to our newsletter for daily duas, articles and Islamic reminders</p> | |
| <div class="flex flex-col sm:flex-row gap-2 max-w-xl mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-md focus:outline-none text-gray-800"> | |
| <button class="px-6 py-3 gold-accent text-gray-800 font-medium rounded-md hover:bg-yellow-500"> | |
| Subscribe <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </div> | |
| <p class="text-sm mt-4 text-green-100">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-300 pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-4">Rabbana.pk</h3> | |
| <p class="mb-4">Providing authentic Islamic content including duas, Asma-ul-Husna, wazaif and educational articles.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Home</a></li> | |
| <li><a href="#" class="hover:text-white">Duas</a></li> | |
| <li><a href="#" class="hover:text-white">99 Names of Allah</a></li> | |
| <li><a href="#" class="hover:text-white">Wazaif</a></li> | |
| <li><a href="#" class="hover:text-white">Articles</a></li> | |
| <li><a href="#" class="hover:text-white">Videos</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Categories</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white">Morning & Evening Duas</a></li> | |
| <li><a href="#" class="hover:text-white">Quranic Duas</a></li> | |
| <li><a href="#" class="hover:text-white">Duas for Protection</a></li> | |
| <li><a href="#" class="hover:text-white">Wazaif for Rizq</a></li> | |
| <li><a href="#" class="hover:text-white">Islamic Lifestyle</a></li> | |
| <li><a href="#" class="hover:text-white">Ramadan Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold text-white mb-4">Contact Us</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3"></i> | |
| <span>Islamabad, Pakistan</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3"></i> | |
| <span>contact@rabbana.pk</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-3"></i> | |
| <span>+92 300 1234567</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="mb-4 md:mb-0">© 2023 Rabbana.pk. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-white">Privacy Policy</a> | |
| <a href="#" class="hover:text-white">Terms of Service</a> | |
| <a href="#" class="hover:text-white">About Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Sticky Audio Player --> | |
| <div class="sticky-player bg-white shadow-lg border-t border-gray-200"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-md flex items-center justify-center mr-4"> | |
| <i class="fas fa-play text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Dua for Morning</h4> | |
| <p class="text-sm text-gray-600">Daily Dua Series</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600 hover:text-green-600"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="w-10 h-10 bg-green-600 text-white rounded-full flex items-center justify-center hover:bg-green-700"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="text-gray-600 hover:text-green-600"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| <div class="hidden md:block ml-4 w-64"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>1:24</span> | |
| <span>3:45</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <button class="text-gray-600 hover:text-green-600 ml-4"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // 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"></i>'; | |
| localStorage.setItem('darkMode', 'enabled'); | |
| } else { | |
| darkModeToggle.innerHTML = '<i class="fas fa-moon"></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"></i>'; | |
| } | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); | |
| const mobileMenu = document.getElementById('mobileMenu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('open'); | |
| }); | |
| // Search Toggle | |
| const searchToggle = document.getElementById('searchToggle'); | |
| const searchBox = document.getElementById('searchBox'); | |
| searchToggle.addEventListener('click', () => { | |
| searchBox.classList.toggle('hidden'); | |
| }); | |
| // Close search box when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!searchToggle.contains(e.target) && !searchBox.contains(e.target)) { | |
| searchBox.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-wp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |