IN-PLACE EDITS – production mobile-first version 1. HERO (100 vh, black) • Background: pure #000 • Top-center: LOGO_PLACEHOLDER (SVG or PNG, 40 px height, margin 12 px auto) • Headline (Poppins ExtraBold 36 px mobile): “Moving to Alberta?” • Subhead (Inter Regular 16 px, #aaa): “I’m Hasan Sharif, dual-licensed eXp agent. I turn out-of-province buyers into Calgary keys—fast.” • CTA Button (sticky bottom, 88 % width): “Get My Alberta Game-Plan” → opens modal 2. SOCIAL BAR (under CTA, flex row, 12 px gap, margin-top 16 px) • IG icon (mono white) → https://instagram.com/nasahctus • FB icon (mono white) → https://facebook.com/redleafhomes.ca • YouTube icon (mono white) → https://youtube.com/@nasahctus • Each icon 24 px, opens new tab, aria-label for a11y 3. MODAL (auto-opens on CTA) Headline: “3 questions, 3 taps—then I text you the plan.” Form (vertical stack, 16 px spacing): 1. Name* [text] 2. Email* [email] 3. Phone* [tel] 4. Check all that apply (small caps label): ☐ Market updates ☐ Free home valuation ☐ Buy in Calgary ☐ Investment property ☐ Schedule 15-min call 5. [Submit] “Send My Plan” • Success state replaces form with: “✅ Done. Check your texts in 60 s.” 4. FOOTER Tiny 12 px #555: “Hasan Sharif, eXp Realty. Dual-licensed AB & SK. 403-808-9705” 5. META og:title “Hasan Sharif – Moving to Alberta? Get the Game-Plan.” og:description “Out-of-province buyers click once, get a custom 15-min plan + priority listings.” - Initial Deployment
b8889b9 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hasan Sharif – Moving to Alberta? Get the Game-Plan</title> | |
| <meta property="og:title" content="Hasan Sharif – Moving to Alberta? Get the Game-Plan"> | |
| <meta property="og:description" content="Out-of-province buyers click once, get a custom 15-min plan + priority listings."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://www.google.com/recaptcha/api.js?render=6Ld3bOspAAAAAJJ6c4WXqQn6UY7Y7Q6ZQ6ZQ6ZQ6"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@800&family=Inter:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| overflow: hidden; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .poppins-extrabold { | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 800; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 217, 36, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 217, 36, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 217, 36, 0); } | |
| } | |
| .modal-overlay { | |
| background-color: rgba(0, 0, 0, 0.85); | |
| } | |
| .modal-content { | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .checkbox-container:hover .checkbox-custom { | |
| border-color: #C73E1D; | |
| } | |
| .checkbox-container input:checked ~ .checkbox-custom { | |
| background-color: #C73E1D; | |
| border-color: #C73E1D; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| border-color: #C73E1D; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white relative" style="height: 100vh;"> | |
| <!-- Hero Section --> | |
| <div class="h-full flex flex-col justify-center items-center px-4 sm:px-8 relative"> | |
| <!-- Logo Placeholder --> | |
| <div class="w-full flex justify-center mt-3 mb-8"> | |
| <img src="LOGO_PLACEHOLDER.svg" alt="Hasan Sharif Realtor" class="h-10"> | |
| </div> | |
| <!-- Hero Content --> | |
| <div class="text-center max-w-md mx-auto px-4"> | |
| <h1 class="poppins-extrabold text-[36px] leading-tight mb-4"> | |
| Moving to Alberta? | |
| </h1> | |
| <p class="text-[16px] text-[#aaa] mb-8">I'm Hasan Sharif, dual-licensed eXp agent. I turn out-of-province buyers into Calgary keys—fast.</p> | |
| <!-- CTA Button --> | |
| <button id="ctaButton" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-[#00D924] hover:bg-[#00C220] text-black font-bold py-4 px-6 rounded-full w-[88%] max-w-md"> | |
| Get My Alberta Game-Plan | |
| </button> | |
| <div class="flex justify-center gap-3 mt-4 mb-16"> | |
| <a href="https://instagram.com/nasahctus" target="_blank" aria-label="Instagram" class="h-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> | |
| </a> | |
| <a href="https://facebook.com/redleafhomes.ca" target="_blank" aria-label="Facebook" class="h-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg> | |
| </a> | |
| <a href="https://youtube.com/@nasahctus" target="_blank" aria-label="YouTube" class="h-6"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Social Proof Bar --> | |
| <div class="absolute bottom-6 w-full px-4 sm:px-8"> | |
| <div class="flex flex-col sm:flex-row items-center justify-between max-w-6xl mx-auto"> | |
| <div class="flex items-center space-x-4 sm:space-x-8 mb-4 sm:mb-0"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xMCAxMGgxODB2MzBIMTB6Ii8+PHRleHQgeD0iMTAwIiB5PSIzMCIgZmlsbD0iIzAwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SRUMgQ2FuYWRhPC90ZXh0Pjwvc3ZnPg==" alt="REC Canada" class="h-8 sm:h-10 filter grayscale contrast-75"> | |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgNTAiPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xMCAxMGgxODB2MzBIMTB6Ii8+PHRleHQgeD0iMTAwIiB5PSIzMCIgZmlsbD0iIzAwMCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5lWHAgUmVhbHR5PC90ZXh0Pjwvc3ZnPg==" alt="eXp Realty" class="h-8 sm:h-10 filter grayscale contrast-75"> | |
| <a href="https://instagram.com/nasahctus" target="_blank" class="h-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a> | |
| <a href="https://facebook.com/redleafhomes.ca" target="_blank" class="h-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a> | |
| <a href="tel:4038089705" target="_blank" class="h-6"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></a> | |
| </div> | |
| <p class="text-sm sm:text-base opacity-75">1,214 families moved • 4.9/5 Google reviews</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Modal --> | |
| <div id="modal" class="fixed inset-0 z-50 hidden modal-overlay flex items-center justify-center p-4"> | |
| <div class="bg-black border border-gray-800 rounded-lg w-full max-w-md modal-content p-6 sm:p-8 relative"> | |
| <div id="modalClose" class="absolute top-4 right-4 cursor-pointer hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> | |
| </svg> | |
| </div> | |
| <h2 class="poppins-extrabold text-2xl sm:text-3xl mb-6"> | |
| 3 questions, 3 taps—then I text you the plan. | |
| </h2> | |
| <form id="contactForm" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-1">Name*</label> | |
| <input type="text" id="name" name="name" required class="w-full bg-gray-900 border border-gray-700 rounded px-4 py-2 focus:border-[#C73E1D]"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email*</label> | |
| <input type="email" id="email" name="email" required class="w-full bg-gray-900 border border-gray-700 rounded px-4 py-2 focus:border-[#C73E1D]"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium mb-1">Phone*</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full bg-gray-900 border border-gray-700 rounded px-4 py-2 focus:border-[#C73E1D]"> | |
| </div> | |
| <div> | |
| <p class="block text-sm font-medium mb-2">I want help with... (select all that apply)</p> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-3 checkbox-container"> | |
| <input type="checkbox" name="intent" value="Market updates" class="hidden"> | |
| <span class="checkbox-custom w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center"> | |
| <svg class="w-3 h-3 text-white hidden" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> | |
| </span> | |
| <span class="uppercase text-xs tracking-wider">Market updates</span> | |
| </label> | |
| <label class="flex items-center space-x-3 checkbox-container"> | |
| <input type="checkbox" name="intent" value="Free home valuation" class="hidden"> | |
| <span class="checkbox-custom w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center"> | |
| <svg class="w-3 h-3 text-white hidden" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> | |
| </span> | |
| <span class="uppercase text-xs tracking-wider">Free home valuation</span> | |
| </label> | |
| <label class="flex items-center space-x-3 checkbox-container"> | |
| <input type="checkbox" name="intent" value="Buy a home" class="hidden"> | |
| <span class="checkbox-custom w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center"> | |
| <svg class="w-3 h-3 text-white hidden" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> | |
| </span> | |
| <span class="uppercase text-xs tracking-wider">Buy in Calgary</span> | |
| </label> | |
| <label class="flex items-center space-x-3 checkbox-container"> | |
| <input type="checkbox" name="intent" value="Investment property" class="hidden"> | |
| <span class="checkbox-custom w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center"> | |
| <svg class="w-3 h-3 text-white hidden" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> | |
| </span> | |
| <span class="uppercase text-xs tracking-wider">Investment property</span> | |
| </label> | |
| <label class="flex items-center space-x-3 checkbox-container"> | |
| <input type="checkbox" name="intent" value="Schedule call" class="hidden"> | |
| <span class="checkbox-custom w-5 h-5 border border-gray-600 rounded-sm flex items-center justify-center"> | |
| <svg class="w-3 h-3 text-white hidden" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" /></svg> | |
| </span> | |
| <span class="uppercase text-xs tracking-wider">Schedule 15-min call</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="notes" class="block text-sm font-medium mb-1">Notes</label> | |
| <textarea id="notes" name="notes" rows="3" class="w-full bg-gray-900 border border-gray-700 rounded px-4 py-2 focus:border-[#C73E1D]"></textarea> | |
| </div> | |
| <input type="hidden" id="recaptchaToken" name="recaptchaToken"> | |
| <button type="submit" class="w-full bg-[#00D924] hover:bg-[#00C220] text-black font-bold py-3 px-6 rounded transition-all"> | |
| Send My Plan | |
| </button> | |
| <p class="text-xs text-center opacity-60">Takes 12 seconds. 100% free. Unsubscribe any time.</p> | |
| </form> | |
| <div id="successMessage" class="hidden text-center py-8"> | |
| <div class="flex justify-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-[#00D924]" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">✅ Done.</h3> | |
| <p class="text-sm opacity-75">Check your texts in 60 s.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <div class="absolute bottom-0 left-0 right-0 text-center pb-2"> | |
| <p class="text-[12px] text-[#555]">Hasan Sharif, eXp Realty. Dual-licensed AB & SK. 403-808-9705</p> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Modal elements | |
| const modal = document.getElementById('modal'); | |
| const ctaButton = document.getElementById('ctaButton'); | |
| const modalClose = document.getElementById('modalClose'); | |
| const contactForm = document.getElementById('contactForm'); | |
| const successMessage = document.getElementById('successMessage'); | |
| // Auto-open modal on page load | |
| modal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Show close button after 3 seconds | |
| setTimeout(() => { | |
| modalClose.classList.remove('hidden'); | |
| }, 3000); | |
| // Show modal when CTA button is clicked | |
| ctaButton.addEventListener('click', function() { | |
| modal.classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| // Show close button after 3 seconds | |
| setTimeout(() => { | |
| modalClose.classList.remove('hidden'); | |
| }, 3000); | |
| }); | |
| // Close modal when close button is clicked | |
| modalClose.addEventListener('click', function() { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }); | |
| // Close modal when clicking outside the modal content | |
| modal.addEventListener('click', function(e) { | |
| if (e.target === modal) { | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| } | |
| }); | |
| // Checkbox functionality | |
| document.querySelectorAll('.checkbox-container input[type="checkbox"]').forEach(checkbox => { | |
| const container = checkbox.closest('.checkbox-container'); | |
| const customCheckbox = container.querySelector('.checkbox-custom'); | |
| const checkIcon = container.querySelector('.checkbox-custom svg'); | |
| // Initialize based on checkbox state | |
| if (checkbox.checked) { | |
| checkIcon.classList.remove('hidden'); | |
| } | |
| container.addEventListener('click', function() { | |
| checkbox.checked = !checkbox.checked; | |
| if (checkbox.checked) { | |
| checkIcon.classList.remove('hidden'); | |
| } else { | |
| checkIcon.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Form submission | |
| contactForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| // Get form data | |
| const formData = new FormData(contactForm); | |
| const intent = []; | |
| document.querySelectorAll('input[name="intent"]:checked').forEach(checkbox => { | |
| intent.push(checkbox.value); | |
| }); | |
| // Get reCAPTCHA token | |
| grecaptcha.ready(function() { | |
| grecaptcha.execute('6Ld3bOspAAAAAJJ6c4WXqQn6UY7Y7Q6ZQ6ZQ6ZQ6', {action: 'submit'}).then(function(token) { | |
| document.getElementById('recaptchaToken').value = token; | |
| // Prepare payload | |
| const payload = { | |
| name: formData.get('name'), | |
| email: formData.get('email'), | |
| phone: formData.get('phone'), | |
| intent: intent, | |
| notes: formData.get('notes'), | |
| message: "RealEstateLeadGen", | |
| userId: crypto.randomUUID(), | |
| sessionId: Date.now().toString(), | |
| timestamp: new Date().toISOString(), | |
| recaptchaToken: token | |
| }; | |
| // Send data to endpoint | |
| fetch('https://n8n.srv728397.hstgr.cloud/webhook/RealEstateLeadGen', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(payload) | |
| }) | |
| .then(response => { | |
| if (response.ok) { | |
| // Show success message | |
| contactForm.classList.add('hidden'); | |
| successMessage.classList.remove('hidden'); | |
| // Reset form after 5 seconds | |
| setTimeout(() => { | |
| contactForm.reset(); | |
| contactForm.classList.remove('hidden'); | |
| successMessage.classList.add('hidden'); | |
| modal.classList.add('hidden'); | |
| document.body.style.overflow = ''; | |
| }, 5000); | |
| } else { | |
| alert('There was an error submitting your form. Please try again.'); | |
| } | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('There was an error submitting your form. Please try again.'); | |
| }); | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=nasahctus/sheesh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |