Update homepage.html

homepage.html

@@ -394,6 +394,98 @@
       color: #a78bfa;
     }
 
+    /* Contact Form Section */
+    .contact-section {
+      padding: 6rem 2rem;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+
+    .contact-form {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      padding: 3rem;
+      border-radius: 30px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .form-group {
+      margin-bottom: 1.5rem;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 0.5rem;
+      font-weight: 500;
+      color: #e5e5e5;
+    }
+
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+      width: 100%;
+      padding: 1rem;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 12px;
+      font-family: inherit;
+      font-size: 1rem;
+      color: white;
+      transition: 0.3s;
+    }
+
+    .form-group input:focus,
+    .form-group select:focus,
+    .form-group textarea:focus {
+      outline: none;
+      border-color: #8b5cf6;
+      background: rgba(255, 255, 255, 0.15);
+    }
+
+    .form-group input::placeholder,
+    .form-group textarea::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    .submit-btn {
+      width: 100%;
+      padding: 1rem;
+      background: linear-gradient(135deg, #8b5cf6, #6366f1);
+      border: none;
+      border-radius: 12px;
+      color: white;
+      font-weight: 700;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: 0.3s;
+    }
+
+    .submit-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 20px rgba(139, 92, 246, 0.4);
+    }
+
+    .form-message {
+      margin-top: 1rem;
+      padding: 1rem;
+      border-radius: 12px;
+      display: none;
+    }
+
+    .form-success {
+      background: rgba(16, 185, 129, 0.2);
+      border: 1px solid #10b981;
+      color: #10b981;
+      display: block;
+    }
+
+    .form-error {
+      background: rgba(239, 68, 68, 0.2);
+      border: 1px solid #ef4444;
+      color: #ef4444;
+      display: block;
+    }
+
     /* CTA Section */
     .cta {
       padding: 6rem 2rem;
@@ -538,6 +630,10 @@
       .section-title {
         font-size: 2rem;
       }
+
+      .contact-form {
+        padding: 1.5rem;
+      }
     }
   </style>
 </head>
@@ -555,6 +651,7 @@
       <a onclick="renderPage('features')">Features</a>
       <a onclick="renderPage('testimonials')">Testimonials</a>
       <a onclick="renderPage('pricing')">Pricing</a>
+      <a onclick="renderPage('contact')">Contact</a>
       <a onclick="renderPage('faq')">FAQ</a>
       <button class="download-btn-nav" id="navDownload"><i class="fas fa-download"></i> Download Now</button>
     </div>
@@ -569,6 +666,7 @@
   <a onclick="renderPage('features')">Features</a>
   <a onclick="renderPage('testimonials')">Testimonials</a>
   <a onclick="renderPage('pricing')">Pricing</a>
+  <a onclick="renderPage('contact')">Contact</a>
   <a onclick="renderPage('faq')">FAQ</a>
   <button class="btn-primary" id="mobileDownload" style="margin-top: 1rem;">Download Now</button>
 </div>
@@ -588,6 +686,40 @@
     linkedin: "https://www.linkedin.com/in/generatewithali"
   };
 
+  // Formspree endpoint
+  const FORMSPREE_URL = "https://formspree.io/f/mojrrdov";
+
+  // Send email via Formspree
+  async function sendEmailNotification(name, email, subject, message) {
+    const formData = new FormData();
+    formData.append('name', name);
+    formData.append('email', email);
+    formData.append('subject', subject);
+    formData.append('message', message);
+    formData.append('_to', YOUR_EMAIL);
+    formData.append('_subject', `New Support Request from ${name}`);
+    formData.append('_replyto', email);
+
+    try {
+      const response = await fetch(FORMSPREE_URL, {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Accept': 'application/json'
+        }
+      });
+
+      if (response.ok) {
+        return { success: true };
+      } else {
+        throw new Error('Formspree error');
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      return { success: false, error: error.message };
+    }
+  }
+
   const footerHTML = `
     <footer class="footer">
       <div class="footer-grid">
@@ -611,19 +743,55 @@
           <h4>Resources</h4>
           <a onclick="renderPage('faq')">FAQ</a>
           <a onclick="renderPage('testimonials')">Testimonials</a>
-          <a href="mailto:${YOUR_EMAIL}">Support</a>
+          <a onclick="renderPage('contact')">Contact Us</a>
         </div>
         <div class="footer-col">
-          <h4>Legal</h4>
-          <a>Privacy Policy</a>
-          <a>Terms of Service</a>
-          <a href="https://wa.me/${WHATSAPP_NUMBER}" target="_blank">Contact</a>
+          <h4>Support</h4>
+          <a href="mailto:${YOUR_EMAIL}">Email Support</a>
+          <a href="https://wa.me/${WHATSAPP_NUMBER}" target="_blank">WhatsApp</a>
         </div>
       </div>
       <div class="copyright">© 2026 All File Converter. Created by BahadurAli's Team. All rights reserved.</div>
     </footer>
   `;
 
+  // Contact Form Component
+  const contactFormHTML = `
+    <section class="contact-section">
+      <h2 class="section-title">📧 Get in Touch</h2>
+      <div class="section-subtitle">Have questions? We'd love to hear from you!</div>
+      <div class="contact-form">
+        <form id="contactForm">
+          <div class="form-group">
+            <label>Full Name *</label>
+            <input type="text" id="contactName" placeholder="Enter your full name" required>
+          </div>
+          <div class="form-group">
+            <label>Email Address *</label>
+            <input type="email" id="contactEmail" placeholder="you@example.com" required>
+          </div>
+          <div class="form-group">
+            <label>Subject *</label>
+            <select id="contactSubject">
+              <option value="Software Support">Software Support</option>
+              <option value="Bug Report">Bug Report</option>
+              <option value="Feature Request">Feature Request</option>
+              <option value="Business Inquiry">Business Inquiry</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Message *</label>
+            <textarea id="contactMessage" rows="5" placeholder="Tell us how we can help..." required></textarea>
+          </div>
+          <button type="submit" class="submit-btn">
+            <i class="fas fa-paper-plane"></i> Send Message
+          </button>
+          <div id="formResponse" class="form-message"></div>
+        </form>
+      </div>
+    </section>
+  `;
+
   // Pages Content
   const pages = {
     home: `
@@ -646,22 +814,10 @@
 
       <section class="stats">
         <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-number">200+</div>
-            <div class="stat-label">File Formats Supported</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">50K+</div>
-            <div class="stat-label">Happy Users</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">99.9%</div>
-            <div class="stat-label">Success Rate</div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-number">24/7</div>
-            <div class="stat-label">Premium Support</div>
-          </div>
+          <div class="stat-card"><div class="stat-number">200+</div><div class="stat-label">File Formats Supported</div></div>
+          <div class="stat-card"><div class="stat-number">50K+</div><div class="stat-label">Happy Users</div></div>
+          <div class="stat-card"><div class="stat-number">99.9%</div><div class="stat-label">Success Rate</div></div>
+          <div class="stat-card"><div class="stat-number">24/7</div><div class="stat-label">Premium Support</div></div>
         </div>
       </section>
 
@@ -682,9 +838,10 @@
         <h2 class="section-title">Trusted by Professionals</h2>
         <div class="section-subtitle">Join 50,000+ satisfied users worldwide</div>
         <div class="testimonials-grid">
-          <div class="testimonial-card"><div class="testimonial-text">"Best file converter I've ever used! Batch processing saved me hours of work. Highly recommended!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Sheza Abid</div><div class="author-title">Software Engineer</div></div></div></div>
-          <div class="testimonial-card"><div class="testimonial-text">"Fast, reliable, and completely offline. Perfect for sensitive documents. The AI enhancement is incredible!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Aiman Imran</div><div class="author-title">Graphic Designer</div></div></div></div>
-          <div class="testimonial-card"><div class="testimonial-text">"The batch processing feature alone is worth it. Converted 500+ images in minutes. Five stars!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Fatima Akram
+          <div class="testimonial-card"><div class="testimonial-text">"Best file converter I've ever used! Batch processing saved me hours of work. Highly recommended!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Sheza Abid</div><div class="author-title">Website Developer</div></div></div></div>
+          <div class="testimonial-card"><div class="testimonial-text">"Fast, reliable, and completely offline. Perfect for sensitive documents. The AI enhancement is incredible!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Fatima Akram</div><div class="author-title">Graphic Designer</div></div></div></div>
+          <div class="testimonial-card"><div class="testimonial-text">"The batch processing feature alone is worth it. Converted 500+ images in minutes. Five stars!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Aiman Imran</div><div class="author-title">Content Writer</div></div></div></div>
+        </div>
       </section>
 
       <section class="cta">
@@ -716,7 +873,7 @@
         <h2 class="section-title">💬 What Our Users Say</h2>
         <div class="testimonials-grid">
           <div class="testimonial-card"><div class="testimonial-text">"Amazing software! The speed and quality are unmatched. Highly recommended for professionals."</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Ali Hassan</div><div class="author-title">Content Creator</div></div></div></div>
-          <div class="testimonial-card"><div class="testimonial-text">"Finally a converter that handles everything offline. Love the AI enhancement feature!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Fatima Khan</div><div class="author-title">Business Owner</div></div></div></div>
+          <div class="testimonial-card"><div class="testimonial-text">"Finally a converter that handles everything offline. Love the AI enhancement feature!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Fatima Akram</div><div class="author-title">Business Owner</div></div></div></div>
           <div class="testimonial-card"><div class="testimonial-text">"The batch processing feature is a game changer for my daily workflow. Five stars!"</div><div class="testimonial-author"><div class="author-avatar"><i class="fas fa-user"></i></div><div><div class="author-name">Omar Farooq</div><div class="author-title">Photographer</div></div></div></div>
         </div>
       </section>
@@ -735,6 +892,11 @@
       ${footerHTML}
     `,
 
+    contact: `
+      ${contactFormHTML}
+      ${footerHTML}
+    `,
+
     faq: `
       <section style="padding: 8rem 2rem 4rem; max-width: 800px; margin: 0 auto;">
         <h2 class="section-title">❓ Frequently Asked Questions</h2>
@@ -743,13 +905,48 @@
           <div class="feature-card" style="text-align: left;"><h3 style="margin-bottom: 0.5rem;">Does it work offline?</h3><p style="color: #b0b0d0;">Absolutely! No internet connection required after installation. All processing happens locally on your computer.</p></div>
           <div class="feature-card" style="text-align: left;"><h3 style="margin-bottom: 0.5rem;">What file formats are supported?</h3><p style="color: #b0b0d0;">Over 200 formats including images (JPG, PNG, HEIC), documents (PDF, DOCX), video (MP4, AVI), and audio (MP3, WAV).</p></div>
           <div class="feature-card" style="text-align: left;"><h3 style="margin-bottom: 0.5rem;">Is there a file size limit?</h3><p style="color: #b0b0d0;">No limits! Convert files of any size. The software is optimized for large files.</p></div>
+          <div class="feature-card" style="text-align: left;"><h3 style="margin-bottom: 0.5rem;">How do I get support?</h3><p style="color: #b0b0d0;">Contact us via the contact form, email at ${YOUR_EMAIL}, or WhatsApp at +${WHATSAPP_NUMBER}. Response within 24 hours.</p></div>
         </div>
       </section>
       ${footerHTML}
     `
   };
 
-  // Render page function - make it global
+  // Contact form handler
+  function initContactForm() {
+    const contactForm = document.getElementById('contactForm');
+    if (contactForm) {
+      contactForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+
+        const name = document.getElementById('contactName').value;
+        const email = document.getElementById('contactEmail').value;
+        const subject = document.getElementById('contactSubject').value;
+        const message = document.getElementById('contactMessage').value;
+        const responseDiv = document.getElementById('formResponse');
+
+        responseDiv.className = 'form-message';
+        responseDiv.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending message...';
+        responseDiv.style.display = 'block';
+
+        const result = await sendEmailNotification(name, email, subject, message);
+
+        if (result.success) {
+          responseDiv.className = 'form-message form-success';
+          responseDiv.innerHTML = '✓ Message sent successfully! Our team will respond within 24 hours.';
+          contactForm.reset();
+          setTimeout(() => {
+            responseDiv.style.display = 'none';
+          }, 5000);
+        } else {
+          responseDiv.className = 'form-message form-error';
+          responseDiv.innerHTML = '❌ Failed to send. Please email us directly at ' + YOUR_EMAIL;
+        }
+      });
+    }
+  }
+
+  // Render page function
   window.renderPage = function(pageId) {
     const content = pages[pageId] || pages.home;
     document.getElementById('mainContent').innerHTML = content;
@@ -764,6 +961,11 @@
         });
       }
     });
+
+    // Initialize contact form if on contact page
+    if (pageId === 'contact') {
+      initContactForm();
+    }
   };
 
   // Mobile menu