LightWing/torahbytes-explorer
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Subscribe | TorahBytes</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 @import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@400;700&family=Rubik:wght@300;400;600&display=swap');12 </style>13</head>14<body class="bg-gray-50 font-rubik">15 <custom-navbar></custom-navbar>16 <main class="container mx-auto px-4 py-8">17 <div class="relative h-64 rounded-xl overflow-hidden mb-8">18 <img src="http://static.photos/religion/1200x400/3" alt="Torah scroll" class="w-full h-full object-cover">19 <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">20 <h1 class="text-4xl font-bold text-white font-david">Premium Membership</h1>21 </div>22 </div>23<div class="max-w-4xl mx-auto">24 <h1 class="text-3xl font-bold mb-2 font-david text-gray-800">Premium Membership</h1>25 <p class="text-gray-600 mb-8">Unlock exclusive content and features with a TorahBytes subscription.</p>26 27 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">28 <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">29 <h3 class="text-xl font-semibold mb-2">Basic</h3>30 <p class="text-3xl font-bold mb-4">$5<span class="text-base font-normal text-gray-600">/month</span></p>31 <ul class="space-y-2 mb-6">32 <li class="flex items-start">33 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>34 <span>Access to basic calendar</span>35 </li>36 <li class="flex items-start">37 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>38 <span>Weekly Torah portion</span>39 </li>40 <li class="flex items-start">41 <i data-feather="x" class="w-4 h-4 mr-2 mt-0.5 text-red-500"></i>42 <span class="text-gray-500">Advanced features</span>43 </li>44 </ul>45 <button class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 transition-colors">46 Select Plan47 </button>48 </div>49 50 <div class="bg-white p-6 rounded-lg shadow-md border-2 border-blue-500 relative">51 <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 text-sm rounded-bl">Popular</div>52 <h3 class="text-xl font-semibold mb-2">Premium</h3>53 <p class="text-3xl font-bold mb-4">$10<span class="text-base font-normal text-gray-600">/month</span></p>54 <ul class="space-y-2 mb-6">55 <li class="flex items-start">56 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>57 <span>Everything in Basic</span>58 </li>59 <li class="flex items-start">60 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>61 <span>Exclusive Torah classes</span>62 </li>63 <li class="flex items-start">64 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>65 <span>Advanced calendar tools</span>66 </li>67 </ul>68 <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">69 Select Plan70 </button>71 </div>72 73 <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200">74 <h3 class="text-xl font-semibold mb-2">Family</h3>75 <p class="text-3xl font-bold mb-4">$15<span class="text-base font-normal text-gray-600">/month</span></p>76 <ul class="space-y-2 mb-6">77 <li class="flex items-start">78 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>79 <span>Everything in Premium</span>80 </li>81 <li class="flex items-start">82 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>83 <span>Up to 5 family members</span>84 </li>85 <li class="flex items-start">86 <i data-feather="check" class="w-4 h-4 mr-2 mt-0.5 text-green-500"></i>87 <span>Family sharing tools</span>88 </li>89 </ul>90 <button class="w-full bg-gray-200 text-gray-800 px-4 py-2 rounded-md hover:bg-gray-300 transition-colors">91 Select Plan92 </button>93 </div>94 </div>95 96 <div class="bg-white p-6 rounded-lg shadow-md">97 <h2 class="text-2xl font-bold mb-4">Payment Information</h2>98 <form>99 <div class="mb-4">100 <label class="block text-gray-700 mb-2">Card Number</label>101 <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="1234 5678 9012 3456">102 </div>103 <div class="grid grid-cols-2 gap-4 mb-4">104 <div>105 <label class="block text-gray-700 mb-2">Expiration Date</label>106 <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="MM/YY">107 </div>108 <div>109 <label class="block text-gray-700 mb-2">Security Code</label>110 <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="CVC">111 </div>112 </div>113 <div class="mb-4">114 <label class="block text-gray-700 mb-2">Name on Card</label>115 <input type="text" class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Full Name">116 </div>117 <button class="w-full bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors">118 Complete Subscription119 </button>120 </form>121 </div>122 </div>123 </main>124 125 <custom-footer></custom-footer>126 <script src="components/navbar.js" type="module"></script>127 <script src="components/footer.js" type="module"></script>128 <script src="script.js" type="module"></script>129<script>130 feather.replace();131 </script>132</body>133</html>