Spaces:
Running
Running
Make an app called elevated in this app there is like motivation daily nd entrepreneur business podcast and islamic podcast and in This app you'll get motivational quotes and many more about personal finance and make it more dynamic and full app - Initial Deployment
909a5ac verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Elevated - Motivation, Finance & Islamic Podcasts</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%); | |
| } | |
| .podcast-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .quote-card { | |
| transition: all 0.3s ease; | |
| } | |
| .quote-card:hover { | |
| transform: scale(1.02); | |
| } | |
| .animated-text { | |
| background: linear-gradient(90deg, #6b46c1, #4299e1, #38b2ac); | |
| background-size: 200% auto; | |
| color: #000; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation: shine 3s linear infinite; | |
| } | |
| @keyframes shine { | |
| to { | |
| background-position: 200% center; | |
| } | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: #e2e8f0; | |
| border-radius: 2px; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 2px; | |
| background: linear-gradient(90deg, #6b46c1, #4299e1); | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header/Navigation --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-mountain text-2xl"></i> | |
| <h1 class="text-2xl font-bold">Elevated</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-gray-200 transition">Home</a> | |
| <a href="#podcasts" class="font-medium hover:text-gray-200 transition">Podcasts</a> | |
| <a href="#quotes" class="font-medium hover:text-gray-200 transition">Quotes</a> | |
| <a href="#finance" class="font-medium hover:text-gray-200 transition">Finance</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <button class="hidden md:block bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-gray-100 transition">Sign In</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">Elevate Your <span class="animated-text">Mindset</span>, <span class="animated-text">Finances</span> & <span class="animated-text">Spirituality</span></h1> | |
| <p class="text-xl mb-8 text-gray-100">Daily motivation, business insights, and Islamic wisdom to help you grow in all aspects of life.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition flex items-center justify-center"> | |
| <i class="fas fa-play mr-2"></i> Start Listening | |
| </button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-book-open mr-2"></i> Explore Content | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Person meditating" class="rounded-xl shadow-2xl w-full max-w-md"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Featured Podcast --> | |
| <section class="py-16 bg-white" id="podcasts"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Today's Featured Podcast</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Listen to our most popular episode this week</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-2xl p-6 md:p-8 shadow-lg max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Podcast cover" class="rounded-xl w-full max-w-xs shadow-md"> | |
| </div> | |
| <div class="md:w-2/3 md:pl-8"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Business</span> | |
| <span class="text-gray-500 text-sm ml-2">Episode 42</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-3">Building Wealth From Scratch</h3> | |
| <p class="text-gray-600 mb-4">In this episode, we interview self-made millionaire Ahmed Khan about how he built his fortune starting with just $100 and the mindset shifts needed for financial success.</p> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Ahmed Khan</p> | |
| <p class="text-sm text-gray-500">Entrepreneur & Investor</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: 30%"></div> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-500 mt-1"> | |
| <span>12:45</span> | |
| <span>42:30</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="bg-indigo-600 text-white p-3 rounded-full hover:bg-indigo-700 transition"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="border border-gray-300 text-gray-700 p-3 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-heart"></i> | |
| </button> | |
| <button class="border border-gray-300 text-gray-700 p-3 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-share-alt"></i> | |
| </button> | |
| <button class="border border-gray-300 text-gray-700 p-3 rounded-full hover:bg-gray-100 transition"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Podcast Categories --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Explore Podcast Categories</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Find content that resonates with your personal growth journey</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Motivation Podcast --> | |
| <div class="podcast-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1548213238-0da7521bd6e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Motivation" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-indigo-600 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-white text-indigo-700 px-3 py-1 rounded-full text-sm font-medium">32 Episodes</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-fire text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Daily Motivation</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Start your day with powerful affirmations and success stories to keep you inspired and driven.</p> | |
| <button class="text-indigo-600 font-medium flex items-center"> | |
| Browse Episodes <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Business Podcast --> | |
| <div class="podcast-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Business" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-blue-600 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-white text-blue-700 px-3 py-1 rounded-full text-sm font-medium">45 Episodes</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-briefcase text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Entrepreneur Journey</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Learn from successful entrepreneurs as they share their challenges, strategies, and lessons learned.</p> | |
| <button class="text-blue-600 font-medium flex items-center"> | |
| Browse Episodes <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Islamic Podcast --> | |
| <div class="podcast-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1568219656418-15c329312bf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Islamic" class="w-full h-48 object-cover"> | |
| <div class="absolute inset-0 bg-green-600 opacity-20"></div> | |
| <div class="absolute bottom-4 left-4"> | |
| <span class="bg-white text-green-700 px-3 py-1 rounded-full text-sm font-medium">28 Episodes</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-mosque text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Islamic Wisdom</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Deepen your faith with discussions on Quranic teachings, prophetic traditions, and spiritual growth.</p> | |
| <button class="text-green-600 font-medium flex items-center"> | |
| Browse Episodes <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Daily Quote Section --> | |
| <section class="py-16 bg-white" id="quotes"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Today's Elevated Quote</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Get inspired with our daily dose of wisdom</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="quote-card bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl shadow-lg p-8 mb-8"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Motivation</span> | |
| </div> | |
| <button class="text-gray-400 hover:text-indigo-600"> | |
| <i class="far fa-bookmark text-xl"></i> | |
| </button> | |
| </div> | |
| <p class="text-2xl font-medium italic mb-6 text-gray-800" id="daily-quote">"Success is not final, failure is not fatal: It is the courage to continue that counts."</p> | |
| <div class="flex justify-between items-center"> | |
| <p class="font-medium text-gray-700" id="quote-author">- Winston Churchill</p> | |
| <div class="flex space-x-3"> | |
| <button class="text-gray-400 hover:text-indigo-600" onclick="copyQuote()"> | |
| <i class="far fa-copy text-xl"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-600" onclick="shareQuote()"> | |
| <i class="fas fa-share-alt text-xl"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-indigo-600" onclick="newQuote()"> | |
| <i class="fas fa-sync-alt text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="quote-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-md" onclick="setQuote('The only limit to our realization of tomorrow is our doubts of today.', 'Franklin D. Roosevelt')"> | |
| <p class="font-medium mb-2">"The only limit to our realization of tomorrow is our doubts of today."</p> | |
| <p class="text-sm text-gray-600">- Franklin D. Roosevelt</p> | |
| </div> | |
| <div class="quote-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-md" onclick="setQuote('Do not wait to strike till the iron is hot; but make it hot by striking.', 'William Butler Yeats')"> | |
| <p class="font-medium mb-2">"Do not wait to strike till the iron is hot; but make it hot by striking."</p> | |
| <p class="text-sm text-gray-600">- William Butler Yeats</p> | |
| </div> | |
| <div class="quote-card bg-gray-50 rounded-lg p-4 cursor-pointer hover:shadow-md" onclick="setQuote('And whoever fears Allah - He will make for him a way out.', 'Quran 65:2')"> | |
| <p class="font-medium mb-2">"And whoever fears Allah - He will make for him a way out."</p> | |
| <p class="text-sm text-gray-600">- Quran 65:2</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Personal Finance Section --> | |
| <section class="py-16 bg-gray-50" id="finance"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">Personal Finance Resources</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Tools and knowledge to help you achieve financial freedom</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-wallet text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Budgeting Basics</h3> | |
| <p class="text-gray-600 mb-4">Learn how to create and stick to a budget that works for your lifestyle and financial goals.</p> | |
| <a href="#" class="text-purple-600 font-medium flex items-center"> | |
| Learn More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Investing 101</h3> | |
| <p class="text-gray-600 mb-4">Understand the fundamentals of investing and how to grow your wealth over time.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Learn More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hand-holding-usd text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Islamic Finance</h3> | |
| <p class="text-gray-600 mb-4">Explore financial principles that align with Islamic values and ethical guidelines.</p> | |
| <a href="#" class="text-green-600 font-medium flex items-center"> | |
| Learn More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <div class="p-6"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-piggy-bank text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Debt Management</h3> | |
| <p class="text-gray-600 mb-4">Strategies to pay off debt efficiently and avoid common financial pitfalls.</p> | |
| <a href="#" class="text-yellow-600 font-medium flex items-center"> | |
| Learn More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-gradient-to-r from-indigo-600 to-blue-600 rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="p-8 md:p-12 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-2/3 mb-8 md:mb-0"> | |
| <h3 class="text-2xl font-bold text-white mb-4">Financial Freedom Challenge</h3> | |
| <p class="text-indigo-100 mb-6">Join our 30-day challenge to transform your financial habits and set yourself on the path to financial independence.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition"> | |
| Join Now | |
| </button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-indigo-700 transition"> | |
| Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Financial freedom" class="rounded-lg shadow-md w-full max-w-xs"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-2">What Our Listeners Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Join thousands of people who have transformed their lives with Elevated</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">Entrepreneur</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"The business podcasts completely changed how I approach my startup. The practical advice is gold!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Ahmed Rahman</h4> | |
| <p class="text-sm text-gray-500">Student</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"The Islamic podcasts help me stay connected to my faith while navigating modern challenges. Truly enlightening."</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Maria Garcia</h4> | |
| <p class="text-sm text-gray-500">Financial Advisor</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700 mb-4">"The personal finance resources are comprehensive yet easy to understand. My clients love when I recommend Elevated!"</p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-16 bg-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8 text-center"> | |
| <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-envelope-open-text text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-2">Get Daily Inspiration</h2> | |
| <p class="text-gray-600 mb-6">Subscribe to our newsletter for motivational quotes, podcast updates, and exclusive content.</p> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <button type="submit" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-sm text-gray-500 mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-mountain text-2xl text-indigo-400"></i> | |
| <h3 class="text-xl font-bold">Elevated</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Helping you grow in mindset, finances, and spirituality since 2020.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-spotify"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Podcasts</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Daily Motivation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Entrepreneur Journey</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Islamic Wisdom</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">All Episodes</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Daily Quotes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Finance Guides</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Recommended Books</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Community</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> | |
| <p>© 2023 Elevated. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Quote functionality | |
| const quotes = [ | |
| { | |
| text: "The only way to do great work is to love what you do.", | |
| author: "Steve Jobs", | |
| category: "Motivation" | |
| }, | |
| { | |
| text: "Your time is limited, so don't waste it living someone else's life.", | |
| author: "Steve Jobs", | |
| category: "Life" | |
| }, | |
| { | |
| text: "And We will surely test you with something of fear and hunger and a loss of wealth and lives and fruits, but give good tidings to the patient.", | |
| author: "Quran 2:155", | |
| category: "Islamic" | |
| }, | |
| { | |
| text: "The biggest risk is not taking any risk. In a world that's changing quickly, the only strategy that is guaranteed to fail is not taking risks.", | |
| author: "Mark Zuckerberg", | |
| category: "Business" | |
| }, | |
| { | |
| text: "Do not let the behavior of others destroy your inner peace.", | |
| author: "Dalai Lama", | |
| category: "Mindset" | |
| }, | |
| { | |
| text: "Wealth is not in having many possessions, but in having few wants.", | |
| author: "Epictetus", | |
| category: "Finance" | |
| } | |
| ]; | |
| function setQuote(text, author) { | |
| document.getElementById('daily-quote').textContent = `"${text}"`; | |
| document.getElementById('quote-author').textContent = `- ${author}`; | |
| } | |
| function newQuote() { | |
| const randomQuote = quotes[Math.floor(Math.random() * quotes.length)]; | |
| setQuote(randomQuote.text, randomQuote.author); | |
| // Update category badge | |
| const badge = document.querySelector('.quote-card span'); | |
| badge.textContent = randomQuote.category; | |
| badge.className = `bg-${getColorForCategory(randomQuote.category)}-100 text-${getColorForCategory(randomQuote.category)}-800 text-xs font-medium px-2.5 py-0.5 rounded`; | |
| } | |
| function getColorForCategory(category) { | |
| switch(category) { | |
| case 'Motivation': return 'indigo'; | |
| case 'Islamic': return 'green'; | |
| case 'Business': return 'blue'; | |
| case 'Finance': return 'yellow'; | |
| case 'Life': return 'purple'; | |
| default: return 'gray'; | |
| } | |
| } | |
| function copyQuote() { | |
| const quote = document.getElementById('daily-quote').textContent; | |
| const author = document.getElementById('quote-author').textContent; | |
| navigator.clipboard.writeText(`${quote} ${author}`); | |
| // Show copied notification | |
| alert('Quote copied to clipboard!'); | |
| } | |
| function shareQuote() { | |
| const quote = document.getElementById('daily-quote').textContent; | |
| const author = document.getElementById('quote-author').textContent; | |
| if (navigator.share) { | |
| navigator.share({ | |
| title: 'Elevated Quote', | |
| text: `${quote} ${author}`, | |
| url: window.location.href | |
| }).catch(err => { | |
| console.log('Error sharing:', err); | |
| }); | |
| } else { | |
| // Fallback for browsers that don't support Web Share API | |
| const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${quote} ${author}`)}`; | |
| window.open(shareUrl, '_blank'); | |
| } | |
| } | |
| // Mobile menu toggle | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| // This would toggle a mobile menu in a real implementation | |
| alert('Mobile menu would open here'); | |
| }); | |
| // Simulate podcast progress | |
| setInterval(function() { | |
| const progress = document.querySelector('.progress-fill'); | |
| const currentWidth = parseInt(progress.style.width) || 30; | |
| const newWidth = currentWidth >= 100 ? 0 : currentWidth + 1; | |
| progress.style.width = `${newWidth}%`; | |
| // Update time display | |
| const timeDisplay = document.querySelector('.progress-bar + div span:first-child'); | |
| if (timeDisplay) { | |
| const currentTime = parseInt(timeDisplay.textContent.split(':')[0]) || 12; | |
| const newMinutes = newWidth > 95 ? 0 : currentTime + 1; | |
| timeDisplay.textContent = `${newMinutes}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`; | |
| } | |
| }, 3000); | |
| </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=Sufyan0789/elevated" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |