contact.html

18.53 KB
14/11/2025 14:17
HTML
contact.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Essential SEO Meta Tags -->
  <title>Contact AffiliateHub - Get in Touch | Customer Support & Partnerships</title>
  <meta name="description" content="Contact AffiliateHub for customer support, partnership inquiries, or feedback. We're here to help with your product questions and collaboration opportunities.">
  <meta name="keywords" content="contact, support, customer service, partnerships, feedback, inquiry, help">
  <meta name="robots" content="index, follow">
  <meta name="author" content="MiniMax Agent">

  <!-- Canonical URL -->
  <link rel="canonical" href="contact.html">

  <!-- Open Graph Tags -->
  <meta property="og:title" content="Contact AffiliateHub - Get in Touch | Customer Support & Partnerships">
  <meta property="og:description" content="Contact AffiliateHub for customer support, partnership inquiries, or feedback. We're here to help with your product questions and collaboration opportunities.">
  <meta property="og:image" content="assets/images/og-contact.jpg">
  <meta property="og:url" content="contact.html">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Affiliate Products Hub">

  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Contact AffiliateHub - Get in Touch | Customer Support & Partnerships">
  <meta name="twitter:description" content="Contact AffiliateHub for customer support, partnership inquiries, or feedback. We're here to help with your product questions and collaboration opportunities.">
  <meta name="twitter:image" content="assets/images/twitter-contact.jpg">

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">

  <!-- Preload Critical Resources -->
  <link rel="preload" href="assets/css/styles.css" as="style">
  <link rel="preload" href="assets/js/app.js" as="script">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="assets/css/styles.css">

  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": ""
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "Contact Us",
                "item": "contact.html"
            }
        ]
    }
    </script>

  <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "ContactPage",
        "name": "Contact AffiliateHub",
        "description": "Get in touch with AffiliateHub for customer support, partnership inquiries, or feedback.",
        "url": "contact.html",
        "mainEntity": {
            "@type": "Organization",
            "name": "AffiliateHub",
            "contactPoint": {
                "@type": "ContactPoint",
                "contactType": "customer service",
                "email": "contact@affiliate-products.com",
                "availableLanguage": "English",
                "areaServed": "Worldwide"
            }
        }
    }
    </script>
</head>

<body>
  <!-- Header -->
  <header class="header">
    <div class="header-top">
      <div class="container">
        <span>🎯 Best Deals Updated Daily</span>
        <span>💰 Free Shipping on Orders $50+</span>
      </div>
    </div>

    <div class="header-main">
      <div class="container">
        <div class="flex-between">
          <a href="index.html" class="logo">AffiliateHub</a>

          <nav>
            <ul class="nav">
              <li><a href="index.html">Home</a></li>
              <li><a href="category.html">Categories</a></li>
              <li><a href="electronics.html">Electronics</a></li>
              <li><a href="fashion.html">Fashion</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="contact.html" class="active">Contact</a></li>
            </ul>
          </nav>

          <button class="mobile-menu-toggle" aria-label="Toggle mobile menu">
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main>
    <!-- Breadcrumbs -->
    <nav class="breadcrumbs" aria-label="Breadcrumb navigation">
      <div class="container">
        <ol class="breadcrumbs-list">
          <li><a href="index.html">Home</a></li>
          <li class="current" aria-current="page">Contact Us</li>
        </ol>
      </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" style="background: linear-gradient(135deg, #059669 0%, #10B981 100%);">
      <div class="container">
        <h1>Get in Touch</h1>
        <p>We're here to help! Reach out to us for support, partnerships, feedback, or any questions about our platform.</p>
      </div>
    </section>

    <!-- Contact Methods -->
    <section class="section">
      <div class="container">
        <div class="grid grid-3" style="margin-bottom: 3rem;">
          <div style="background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <div style="font-size: 3rem; margin-bottom: 1rem;">📧</div>
            <h3>Email Support</h3>
            <p>Get detailed help via email. We typically respond within 24 hours.</p>
            <a href="mailto:contact@affiliate-products.com" class="btn btn-primary" style="margin-top: 1rem;">Send Email</a>
          </div>

          <div style="background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <div style="font-size: 3rem; margin-bottom: 1rem;">🤝</div>
            <h3>Partnership Inquiries</h3>
            <p>Interested in collaborating or becoming an affiliate partner?</p>
            <a href="mailto:partnerships@affiliate-products.com" class="btn btn-primary" style="margin-top: 1rem;">Partner With Us</a>
          </div>

          <div style="background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <div style="font-size: 3rem; margin-bottom: 1rem;">💬</div>
            <h3>Feedback & Suggestions</h3>
            <p>Help us improve by sharing your thoughts and ideas.</p>
            <a href="mailto:feedback@affiliate-products.com" class="btn btn-primary" style="margin-top: 1rem;">Share Feedback</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Form Section -->
    <section class="section" style="background: #f8f9fa;">
      <div class="container">
        <div class="grid grid-2" style="align-items: flex-start; gap: 3rem;">
          <!-- Contact Form -->
          <div>
            <h2>Send us a Message</h2>
            <p>Fill out the form below and we'll get back to you as soon as possible.</p>

            <form class="contact-form" style="margin-top: 2rem;">
              <div class="form-group">
                <label for="name" class="form-label">Full Name *</label>
                <input type="text" id="name" name="name" class="form-input" required>
              </div>

              <div class="form-group">
                <label for="email" class="form-label">Email Address *</label>
                <input type="email" id="email" name="email" class="form-input" required>
              </div>

              <div class="form-group">
                <label for="subject" class="form-label">Subject *</label>
                <select id="subject" name="subject" class="form-input" required>
                  <option value="">Select a subject</option>
                  <option value="general">General Inquiry</option>
                  <option value="support">Customer Support</option>
                  <option value="partnership">Partnership Opportunity</option>
                  <option value="feedback">Feedback & Suggestions</option>
                  <option value="technical">Technical Issue</option>
                  <option value="review">Review Request</option>
                  <option value="other">Other</option>
                </select>
              </div>

              <div class="form-group">
                <label for="message" class="form-label">Message *</label>
                <textarea id="message" name="message" class="form-input form-textarea" rows="6" placeholder="Please describe your inquiry in detail..." required></textarea>
              </div>

              <div class="form-group">
                <label style="display: flex; align-items: center; gap: 0.5rem;">
                  <input type="checkbox" required>
                  <span class="text-small">I agree to the <a href="privacy.html" style="color: #2563eb;">Privacy Policy</a> and <a href="terms.html" style="color: #2563eb;">Terms of Service</a></span>
                </label>
              </div>

              <button type="submit" class="btn btn-primary" style="width: 100%; padding: 1rem; font-size: 1.125rem;">
                Send Message
              </button>
            </form>
          </div>

          <!-- Contact Information -->
          <div>
            <h2>Contact Information</h2>
            <p>Find multiple ways to reach us and get the help you need.</p>

            <div style="background: white; padding: 2rem; border-radius: 12px; margin-top: 2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
              <h3 style="margin-bottom: 1.5rem;">Direct Contact</h3>

              <div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem;">
                <span style="font-size: 1.5rem;">📧</span>
                <div>
                  <strong>Email</strong>
                  <p style="margin: 0.25rem 0;">contact@affiliate-products.com</p>
                  <p class="text-small" style="color: #666; margin: 0;">Response time: Within 24 hours</p>
                </div>
              </div>

              <div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem;">
                <span style="font-size: 1.5rem;">⏰</span>
                <div>
                  <strong>Business Hours</strong>
                  <p style="margin: 0.25rem 0;">Monday - Friday: 9:00 AM - 6:00 PM (EST)</p>
                  <p style="margin: 0.25rem 0;">Saturday: 10:00 AM - 4:00 PM (EST)</p>
                  <p style="margin: 0;">Sunday: Closed</p>
                </div>
              </div>

              <div style="display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem;">
                <span style="font-size: 1.5rem;">🌐</span>
                <div>
                  <strong>Social Media</strong>
                  <div style="margin-top: 0.5rem;">
                    <a href="https://facebook.com/affiliatehub" target="_blank" rel="noopener" style="display: inline-block; margin-right: 1rem; color: #2563eb;">Facebook</a>
                    <a href="https://twitter.com/affiliatehub" target="_blank" rel="noopener" style="display: inline-block; margin-right: 1rem; color: #2563eb;">Twitter</a>
                    <a href="https://instagram.com/affiliatehub" target="_blank" rel="noopener" style="display: inline-block; margin-right: 1rem; color: #2563eb;">Instagram</a>
                    <a href="https://youtube.com/affiliatehub" target="_blank" rel="noopener" style="display: inline-block; color: #2563eb;">YouTube</a>
                  </div>
                </div>
              </div>
            </div>

            <!-- FAQ Link -->
            <div style="background: #E0F2FE; padding: 1.5rem; border-radius: 12px; margin-top: 2rem; border-left: 4px solid #0284C7;">
              <h3 style="color: #0284C7; margin-bottom: 1rem;">💡 Quick Help</h3>
              <p style="margin-bottom: 1rem;">Looking for immediate answers? Check out our FAQ section for common questions and quick solutions.</p>
              <a href="faq.html" class="btn btn-secondary" style="color: #0284C7; border-color: #0284C7;">View FAQ</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Support Categories -->
    <section class="section">
      <div class="container">
        <div class="section-header">
          <h2>How Can We Help?</h2>
          <p class="section-subtitle">Choose the type of support you need</p>
        </div>

        <div class="grid grid-2">
          <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3>🛒 Customer Support</h3>
            <p>Need help with a product review, have questions about a recommendation, or experiencing technical issues?</p>
            <ul style="margin: 1rem 0 1.5rem 1.5rem;">
              <li>Product recommendation assistance</li>
              <li>Technical troubleshooting</li>
              <li>Website navigation help</li>
              <li>Review accuracy questions</li>
            </ul>
            <a href="mailto:support@affiliate-products.com" class="btn btn-primary">Get Support</a>
          </div>

          <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3>🤝 Business Partnerships</h3>
            <p>Are you a retailer, manufacturer, or content creator interested in working with us?</p>
            <ul style="margin: 1rem 0 1.5rem 1.5rem;">
              <li>Affiliate program opportunities</li>
              <li>Product review partnerships</li>
              <li>Content collaboration</li>
              <li>Marketing partnerships</li>
            </ul>
            <a href="mailto:partnerships@affiliate-products.com" class="btn btn-primary">Partner With Us</a>
          </div>

          <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3>📰 Media & Press</h3>
            <p>Are you a journalist, blogger, or content creator looking for information about AffiliateHub?</p>
            <ul style="margin: 1rem 0 1.5rem 1.5rem;">
              <li>Press inquiries and interviews</li>
              <li>Brand assets and information</li>
              <li>Industry insights and data</li>
              <li>Speaking opportunities</li>
            </ul>
            <a href="mailto:press@affiliate-products.com" class="btn btn-primary">Media Contact</a>
          </div>

          <div style="background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <h3>💭 Feedback & Suggestions</h3>
            <p>Have ideas to improve our platform or suggestions for new features?</p>
            <ul style="margin: 1rem 0 1.5rem 1.5rem;">
              <li>Website improvement suggestions</li>
              <li>New product category requests</li>
              <li>User experience feedback</li>
              <li>Feature requests</li>
            </ul>
            <a href="mailto:feedback@affiliate-products.com" class="btn btn-primary">Share Ideas</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Response Time -->
    <section class="section" style="background: #f8f9fa;">
      <div class="container">
        <div style="max-width: 800px; margin: 0 auto; text-align: center;">
          <h2>What to Expect</h2>
          <p style="margin-bottom: 2rem;">We pride ourselves on quick and helpful responses to all inquiries.</p>

          <div class="grid grid-3">
            <div style="text-align: center;">
              <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">⚡</div>
              <h3>Email Response</h3>
              <p>We respond to emails within 24 hours during business days.</p>
            </div>

            <div style="text-align: center;">
              <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">📱</div>
              <h3>Social Media</h3>
              <p>We monitor social media and respond to messages within 12 hours.</p>
            </div>

            <div style="text-align: center;">
              <div style="font-size: 2.5rem; margin-bottom: 0.5rem;">🎯</div>
              <h3>Priority Support</h3>
              <p>Technical issues and urgent inquiries are prioritized.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3>AffiliateHub</h3>
          <p>Your trusted source for finding the best affiliate products and deals. We help you make informed purchasing decisions with detailed reviews, price comparisons, and expert recommendations.</p>
        </div>

        <div class="footer-section">
          <h3>Categories</h3>
          <ul>
            <li><a href="electronics.html">Electronics</a></li>
            <li><a href="fashion.html">Fashion</a></li>
            <li><a href="home.html">Home & Garden</a></li>
            <li><a href="sports.html">Sports & Outdoors</a></li>
            <li><a href="books.html">Books & Media</a></li>
            <li><a href="health.html">Health & Beauty</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>Company</h3>
          <ul>
            <li><a href="about.html">About Us</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="privacy.html">Privacy Policy</a></li>
            <li><a href="terms.html">Terms of Service</a></li>
            <li><a href="affiliate.html">Affiliate Disclosure</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>Connect With Us</h3>
          <p>Follow us for the latest deals and product updates:</p>
          <ul>
            <li><a href="https://facebook.com/affiliatehub" target="_blank" rel="noopener">Facebook</a></li>
            <li><a href="https://twitter.com/affiliatehub" target="_blank" rel="noopener">Twitter</a></li>
            <li><a href="https://instagram.com/affiliatehub" target="_blank" rel="noopener">Instagram</a></li>
            <li><a href="https://youtube.com/affiliatehub" target="_blank" rel="noopener">YouTube</a></li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <p>&copy; 2025 AffiliateHub. All rights reserved. | Designed and developed by MiniMax Agent</p>
        <p><small>This site contains affiliate links. We may earn a commission from purchases made through these links at no extra cost to you.</small></p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script src="assets/js/app.js"></script>
</body>

</html>