Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Neighborly | Local Help Network</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%); | |
| } | |
| .request-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); | |
| } | |
| .category-chip { | |
| transition: all 0.2s ease; | |
| } | |
| .category-chip:hover { | |
| transform: scale(1.05); | |
| } | |
| .map-container { | |
| height: 300px; | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| } | |
| .chat-bubble { | |
| max-width: 70%; | |
| border-radius: 1.125rem; | |
| } | |
| .chat-bubble.sent { | |
| border-bottom-right-radius: 0; | |
| background-color: #4f46e5; | |
| color: white; | |
| } | |
| .chat-bubble.received { | |
| border-bottom-left-radius: 0; | |
| background-color: #e5e7eb; | |
| color: #1f2937; | |
| } | |
| #map { | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .subscription-card { | |
| transition: all 0.3s ease; | |
| } | |
| .subscription-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .subscription-card.popular { | |
| border: 2px solid #4f46e5; | |
| position: relative; | |
| } | |
| .popular-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: 20px; | |
| background: #4f46e5; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .blur-content { | |
| filter: blur(4px); | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .boosted-post { | |
| border-left: 4px solid #f59e0b; | |
| position: relative; | |
| } | |
| .boost-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: #f59e0b; | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .boost-options { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| z-index: 10; | |
| width: 200px; | |
| } | |
| .boost-btn:hover .boost-options { | |
| display: block; | |
| } | |
| .free-trial-banner { | |
| background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-hands-helping text-2xl"></i> | |
| <span class="text-xl font-bold">Neighborly</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 font-medium">Home</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Requests</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Offers</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Messages</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="hidden md:flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-8 h-8 rounded-full border-2 border-white"> | |
| <span class="font-medium">Sarah</span> | |
| <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">Free Trial</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Mobile Menu (Hidden by default) --> | |
| <div class="md:hidden bg-white shadow-lg hidden" id="mobileMenu"> | |
| <div class="container mx-auto px-4 py-2 flex flex-col space-y-2"> | |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Home</a> | |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Requests</a> | |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Offers</a> | |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded">Messages</a> | |
| <div class="border-t border-gray-200 pt-2"> | |
| <a href="#" class="py-2 px-4 hover:bg-gray-100 rounded flex items-center space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-6 h-6 rounded-full"> | |
| <span>Profile</span> | |
| <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">Free Trial</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Subscription Modal (Hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="subscriptionModal"> | |
| <div class="bg-white rounded-xl max-w-2xl w-full mx-4 overflow-hidden"> | |
| <div class="gradient-bg text-white p-6"> | |
| <h2 class="text-2xl font-bold">Unlock Full Neighborly Access</h2> | |
| <p>Subscribe to connect with helpers and see replies to your requests</p> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Free Trial Banner --> | |
| <div class="free-trial-banner text-white rounded-lg p-4 mb-6"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-gift text-2xl mr-3"></i> | |
| <div> | |
| <h3 class="font-bold">3-Day Free Trial</h3> | |
| <p class="text-sm">Try premium features for free. Cancel anytime.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <!-- Daily Subscription --> | |
| <div class="subscription-card bg-white border border-gray-200 rounded-lg p-4 text-center"> | |
| <h3 class="font-bold text-lg mb-2">Daily</h3> | |
| <p class="text-gray-600 text-xs mb-3">For urgent one-time needs</p> | |
| <div class="text-2xl font-bold mb-3">$0.99</div> | |
| <ul class="text-left space-y-2 mb-4 text-xs"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>View replies for 24 hours</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Message 3 helpers</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Basic support</span></li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg text-sm font-medium hover:bg-gray-300 transition">Choose Plan</button> | |
| </div> | |
| <!-- Weekly Subscription --> | |
| <div class="subscription-card bg-white border border-gray-200 rounded-lg p-4 text-center"> | |
| <h3 class="font-bold text-lg mb-2">Weekly</h3> | |
| <p class="text-gray-600 text-xs mb-3">For short-term testing</p> | |
| <div class="text-2xl font-bold mb-3">$3.49</div> | |
| <div class="text-xs text-gray-500 mb-2">Save 50% vs daily</div> | |
| <ul class="text-left space-y-2 mb-4 text-xs"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>View replies for 7 days</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Unlimited messaging</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Priority support</span></li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-lg text-sm font-medium hover:opacity-90 transition">Choose Plan</button> | |
| </div> | |
| <!-- Monthly Subscription --> | |
| <div class="subscription-card bg-white border-2 border-indigo-500 rounded-lg p-4 text-center popular"> | |
| <div class="popular-badge">BEST VALUE</div> | |
| <h3 class="font-bold text-lg mb-2">Monthly</h3> | |
| <p class="text-gray-600 text-xs mb-3">For regular community use</p> | |
| <div class="text-2xl font-bold mb-3">$9.99</div> | |
| <div class="text-xs text-gray-500 mb-2">Save 70% vs daily</div> | |
| <ul class="text-left space-y-2 mb-4 text-xs"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>View replies for 30 days</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Unlimited messaging</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>24/7 premium support</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>1 free boost per month</span></li> | |
| </ul> | |
| <button class="w-full gradient-bg text-white py-2 rounded-lg text-sm font-medium hover:opacity-90 transition">Choose Plan</button> | |
| </div> | |
| <!-- Yearly Subscription --> | |
| <div class="subscription-card bg-white border border-gray-200 rounded-lg p-4 text-center"> | |
| <h3 class="font-bold text-lg mb-2">Yearly</h3> | |
| <p class="text-gray-600 text-xs mb-3">For community champions</p> | |
| <div class="text-2xl font-bold mb-3">$79.99</div> | |
| <div class="text-xs text-gray-500 mb-2">Save 33% vs monthly</div> | |
| <ul class="text-left space-y-2 mb-4 text-xs"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>View replies for 1 year</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Unlimited messaging</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>VIP support</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>3 free boosts per month</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i> <span>Premium badge</span></li> | |
| </ul> | |
| <button class="w-full bg-gray-200 text-gray-800 py-2 rounded-lg text-sm font-medium hover:bg-gray-300 transition">Choose Plan</button> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-xs text-gray-600">All subscriptions auto-renew. Cancel anytime. Free trial ends after 3 days.</p> | |
| <button id="cancelSubscription" class="mt-4 text-gray-500 hover:text-gray-700 text-sm">Maybe later</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Boost Modal (Hidden by default) --> | |
| <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="boostModal"> | |
| <div class="bg-white rounded-xl max-w-md w-full mx-4 overflow-hidden"> | |
| <div class="bg-yellow-500 text-white p-4"> | |
| <h2 class="text-xl font-bold">Boost Your Request</h2> | |
| <p class="text-sm">Get more visibility for your request</p> | |
| </div> | |
| <div class="p-6"> | |
| <div class="mb-4"> | |
| <h3 class="font-bold mb-2">Select Boost Duration</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="boost-option border border-gray-200 rounded-lg p-3 hover:border-yellow-400 hover:bg-yellow-50 transition" data-duration="24" data-price="1.49"> | |
| <div class="font-bold">24 hours</div> | |
| <div class="text-sm text-gray-600">$1.49</div> | |
| </button> | |
| <button class="boost-option border border-gray-200 rounded-lg p-3 hover:border-yellow-400 hover:bg-yellow-50 transition" data-duration="72" data-price="3.49"> | |
| <div class="font-bold">3 days</div> | |
| <div class="text-sm text-gray-600">$3.49</div> | |
| </button> | |
| <button class="boost-option border border-gray-200 rounded-lg p-3 hover:border-yellow-400 hover:bg-yellow-50 transition" data-duration="168" data-price="5.99"> | |
| <div class="font-bold">7 days</div> | |
| <div class="text-sm text-gray-600">$5.99</div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <h4 class="font-bold text-sm mb-2">Boost Benefits</h4> | |
| <ul class="text-sm space-y-2"> | |
| <li class="flex items-start"><i class="fas fa-check text-yellow-500 mr-2 mt-1"></i> <span>3x more visibility than regular posts</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-yellow-500 mr-2 mt-1"></i> <span>Top placement in your neighborhood feed</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-yellow-500 mr-2 mt-1"></i> <span>"Boosted" badge for credibility</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-yellow-500 mr-2 mt-1"></i> <span>Detailed analytics on views</span></li> | |
| </ul> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button id="cancelBoost" class="text-gray-500 hover:text-gray-700 text-sm">Cancel</button> | |
| <button id="confirmBoost" class="bg-yellow-500 text-white px-6 py-2 rounded-lg font-medium hover:bg-yellow-600 transition disabled:opacity-50" disabled> | |
| Boost Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Subscription Banner --> | |
| <div class="gradient-bg text-white rounded-xl p-4 mb-6 flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-bold text-lg">Premium Membership</h3> | |
| <p>Subscribe to connect with helpers and see replies to your requests</p> | |
| </div> | |
| <button id="openSubscription" class="bg-white text-indigo-600 px-6 py-2 rounded-lg font-bold hover:bg-gray-100 transition duration-200"> | |
| Upgrade Now | |
| </button> | |
| </div> | |
| <!-- Free Trial Countdown --> | |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6 flex items-center"> | |
| <i class="fas fa-clock text-yellow-500 text-xl mr-3"></i> | |
| <div> | |
| <h4 class="font-bold text-yellow-800">Your free trial ends in 2 days</h4> | |
| <p class="text-sm text-yellow-600">Subscribe now to keep accessing replies and messages</p> | |
| </div> | |
| </div> | |
| <!-- Create Request Card --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex items-start space-x-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-12 h-12 rounded-full"> | |
| <div class="flex-1"> | |
| <textarea class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="What help do you need today?"></textarea> | |
| <div class="flex justify-between items-center mt-3"> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <div class="boost-btn relative"> | |
| <button class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium flex items-center hover:bg-yellow-200"> | |
| <i class="fas fa-bolt mr-1"></i> | |
| <span>Boost</span> | |
| </button> | |
| <div class="boost-options p-2"> | |
| <div class="text-xs font-medium mb-2 text-gray-700">Boost options:</div> | |
| <button class="boost-option-btn text-left w-full px-2 py-1 text-sm hover:bg-gray-100 rounded" data-duration="24" data-price="1.49"> | |
| <div class="font-medium">24 hours - $1.49</div> | |
| <div class="text-xs text-gray-500">For urgent requests</div> | |
| </button> | |
| <button class="boost-option-btn text-left w-full px-2 py-1 text-sm hover:bg-gray-100 rounded" data-duration="72" data-price="3.49"> | |
| <div class="font-medium">3 days - $3.49</div> | |
| <div class="text-xs text-gray-500">Weekend visibility</div> | |
| </button> | |
| <button class="boost-option-btn text-left w-full px-2 py-1 text-sm hover:bg-gray-100 rounded" data-duration="168" data-price="5.99"> | |
| <div class="font-medium">7 days - $5.99</div> | |
| <div class="text-xs text-gray-500">Best value</div> | |
| </button> | |
| </div> | |
| </div> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition"> | |
| Post Request | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Nearby Requests --> | |
| <section class="mb-12"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold text-gray-800">Nearby Requests</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-600">Sort by:</span> | |
| <select class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"> | |
| <option>Most Recent</option> | |
| <option>Nearest</option> | |
| <option>Most Responses</option> | |
| <option>Boosted First</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Boosted Request Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden request-card transition duration-200 boosted-post"> | |
| <div class="boost-badge flex items-center"> | |
| <i class="fas fa-bolt mr-1"></i> | |
| <span>BOOSTED</span> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">Michael</h3> | |
| <p class="text-sm text-gray-500">0.3 miles away</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="mb-4">Need someone to water my plants while I'm away next week. Will return the favor!</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="category-chip bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Plant Care</span> | |
| <span class="category-chip bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Reciprocal</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-eye mr-1"></i> 42 views | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-200"> | |
| Offer Help | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Regular Request Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden request-card transition duration-200"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">Priya</h3> | |
| <p class="text-sm text-gray-500">0.5 miles away</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="mb-4">Looking to borrow a power drill for a small home project this weekend.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="category-chip bg-yellow-100 text-yellow-800 text-xs px-3 py-1 rounded-full">Tools</span> | |
| <span class="category-chip bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">Short-term</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-xs text-gray-500"> | |
| <i class="fas fa-eye mr-1"></i> 18 views | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition duration-200"> | |
| Offer Help | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Request Card with Subscription Prompt --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden request-card transition duration-200 relative"> | |
| <div class="p-6 blur-content"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User" class="w-10 h-10 rounded-full"> | |
| <div> | |
| <h3 class="font-bold">David</h3> | |
| <p class="text-sm text-gray-500">0.2 miles away</p> | |
| </div> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <p class="mb-4">Need a ride to the doctor's office on Thursday at 10 AM. Will chip in for gas!</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="category-chip bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">Transportation</span> | |
| <span class="category-chip bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Compensated</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-sm font-medium">3 people offered help</div> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 rounded-xl"> | |
| <div class="bg-white p-4 rounded-lg text-center max-w-xs mx-4"> | |
| <h3 class="font-bold mb-2">Subscribe to See Replies</h3> | |
| <p class="text-sm mb-3">3 neighbors have offered to help David. Subscribe to view their responses and coordinate.</p> | |
| <button id="openSubscriptionFromCard" class="gradient-bg text-white px-4 py-2 rounded-lg font-medium w-full"> | |
| View Subscription Plans | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">How Neighborly Works</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-map-marker-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">1. Post Your Request</h3> | |
| <p class="text-gray-600">Ask for help with anything - from borrowing tools to finding rides. It's free to post!</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-comments text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">2. Get Responses</h3> | |
| <p class="text-gray-600">Neighbors will respond to your request. Subscribe to view and message them.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200"> | |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> | |
| <i class="fas fa-hands-helping text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">3. Connect & Help</h3> | |
| <p class="text-gray-600">Coordinate details and build meaningful connections in your community.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Comparison --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 text-gray-800">Choose Your Plan</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b border-gray-200"> | |
| <th class="p-4 text-left">Features</th> | |
| <th class="p-4 text-center">Free</th> | |
| <th class="p-4 text-center">Daily ($0.99)</th> | |
| <th class="p-4 text-center">Weekly ($3.49)</th> | |
| <th class="p-4 text-center gradient-bg text-white">Monthly ($9.99)</th> | |
| <th class="p-4 text-center">Yearly ($79.99)</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-4 font-medium">Post requests</td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-4 font-medium">View replies</td> | |
| <td class="p-4 text-center text-red-500"><i class="fas fa-times"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-4 font-medium">Message helpers</td> | |
| <td class="p-4 text-center text-red-500"><i class="fas fa-times"></i></td> | |
| <td class="p-4 text-center">3 max</td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| <td class="p-4 text-center text-green-500"><i class="fas fa-check"></i></td> | |
| </tr> | |
| <tr class="border-b border-gray-200"> | |
| <td class="p-4 font-medium">Free boosts</td> | |
| <td class="p-4 text-center text-red-500"><i class="fas fa-times"></i></td> | |
| <td class="p-4 text-center text-red-500"><i class="fas fa-times"></i></td> | |
| <td class="p-4 text-center text-red-500"><i class="fas fa-times"></i></td> | |
| <td class="p-4 text-center">1/month</td> | |
| <td class="p-4 text-center">3/month</td> | |
| </tr> | |
| <tr> | |
| <td class="p-4 font-medium">Support</td> | |
| <td class="p-4 text-center">Basic</td> | |
| <td class="p-4 text-center">Basic</td> | |
| <td class="p-4 text-center">Priority</td> | |
| <td class="p-4 text-center">Premium</td> | |
| <td class="p-4 text-center">VIP</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Neighborly</h3> | |
| <p class="text-gray-400">Building stronger communities one connection at a time.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Safety Tips</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Community Guidelines</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Connect</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Twitter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Facebook</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Instagram</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Get the App</h4> | |
| <div class="flex space-x-2"> | |
| <button class="bg-black text-white px-3 py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-apple mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Download on the</div> | |
| <div class="font-bold">App Store</div> | |
| </div> | |
| </button> | |
| <button class="bg-black text-white px-3 py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-google-play mr-2"></i> | |
| <div class="text-left"> | |
| <div class="text-xs">Get it on</div> | |
| <div class="font-bold">Google Play</div> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Neighborly. All rights reserved. | <a href="#" class="hover:text-white">Privacy Policy</a> | <a href="#" class="hover:text-white">Terms of Service</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('nav button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobileMenu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Subscription modal toggle | |
| document.getElementById('openSubscription').addEventListener('click', function() { | |
| document.getElementById('subscriptionModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('openSubscriptionFromCard').addEventListener('click', function() { | |
| document.getElementById('subscriptionModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('cancelSubscription').addEventListener('click', function() { | |
| document.getElementById('subscriptionModal').classList.add('hidden'); | |
| }); | |
| // Boost modal functionality | |
| const boostOptionBtns = document.querySelectorAll('.boost-option-btn'); | |
| boostOptionBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| document.getElementById('boostModal').classList.remove('hidden'); | |
| }); | |
| }); | |
| const boostOptions = document.querySelectorAll('.boost-option'); | |
| let selectedBoostOption = null; | |
| boostOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove selected class from all options | |
| boostOptions.forEach(opt => { | |
| opt.classList.remove('border-yellow-400', 'bg-yellow-50'); | |
| }); | |
| // Add selected class to clicked option | |
| this.classList.add('border-yellow-400', 'bg-yellow-50'); | |
| selectedBoostOption = this; | |
| // Enable confirm button | |
| document.getElementById('confirmBoost').disabled = false; | |
| }); | |
| }); | |
| document.getElementById('confirmBoost').addEventListener('click', function() { | |
| if (selectedBoostOption) { | |
| const duration = selectedBoostOption.dataset.duration; | |
| const price = selectedBoostOption.dataset.price; | |
| // In a real app, you would process payment here | |
| alert(`Your request will be boosted for ${duration} hours for $${price}. Payment would be processed here.`); | |
| // Close modal | |
| document.getElementById('boostModal').classList.add('hidden'); | |
| } | |
| }); | |
| document.getElementById('cancelBoost').addEventListener('click', function() { | |
| document.getElementById('boostModal').classList.add('hidden'); | |
| }); | |
| // Simulate clicking on "Offer Help" buttons | |
| const offerButtons = document.querySelectorAll('.request-card button'); | |
| offerButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Check if user is subscribed (in a real app, this would check actual subscription status) | |
| const isSubscribed = false; // Change to true to simulate subscribed user | |
| if(isSubscribed) { | |
| alert('Thanks for offering to help! You can now chat with the requester to coordinate details.'); | |
| } else { | |
| document.getElementById('subscriptionModal').classList.remove('hidden'); | |
| } | |
| }); | |
| }); | |
| // Simulate map loading (in a real app, you would use Google Maps or Mapbox API) | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mapElement = document.getElementById('map'); | |
| if (mapElement) { | |
| mapElement.innerHTML = ` | |
| <div class="w-full h-full flex items-center justify-center bg-gray-200"> | |
| <div class="text-center p-4"> | |
| <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-600">Interactive map would display here showing nearby requests and neighbors</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| }); | |
| </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=stakmodsco/stakmods" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |