Default page

Edit File: help-center.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Help Center — Nexlance</title>
    <link rel="icon" type="image/png" href="images/fav.png">
    <link rel="stylesheet" href="styles.css">
    <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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        .help-hero { padding:140px 0 60px; background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 100%); text-align:center; }
        .help-hero-label { display:inline-block; font-size:var(--font-size-sm); font-weight:600; color:#a5b4fc; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
        .help-hero h1 { font-size:var(--font-size-5xl); font-weight:800; color:#fff; margin-bottom:1rem; line-height:1.15; }
        .help-hero p { font-size:var(--font-size-lg); color:rgba(255,255,255,.75); max-width:520px; margin:0 auto 2rem; }
        .help-search { max-width:560px; margin:0 auto; position:relative; }
        .help-search input { width:100%; padding:1.1rem 1.5rem 1.1rem 3.25rem; border:none; border-radius:var(--radius-full); font-family:var(--font-family); font-size:var(--font-size-base); color:var(--color-text); background:#fff; outline:none; box-shadow:0 8px 30px rgba(0,0,0,.2); }
        .help-search-icon { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); font-size:1.1rem; pointer-events:none; }
        .help-search-btn { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); background:var(--color-secondary); color:#fff; border:none; padding:.65rem 1.25rem; border-radius:var(--radius-full); font-weight:700; font-size:var(--font-size-sm); cursor:pointer; transition:background .2s; }
        .help-search-btn:hover { background:var(--color-accent); }
        .popular-searches { margin-top:1rem; font-size:var(--font-size-sm); color:rgba(255,255,255,.6); }
        .popular-searches a { color:rgba(255,255,255,.85); font-weight:600; margin:0 .4rem; }
        .popular-searches a:hover { color:#fff; }

/* Stats */
        .help-stats { display:flex; justify-content:center; gap:4rem; padding:2.5rem 0; background:var(--color-bg-alt); border-bottom:1px solid var(--color-border); }
        .help-stat { text-align:center; }
        .help-stat strong { display:block; font-size:var(--font-size-2xl); font-weight:800; color:var(--color-secondary); }
        .help-stat span { font-size:var(--font-size-sm); color:var(--color-text-light); }

/* Categories */
        .cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
        .cat-card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:2rem; transition:all .2s; cursor:pointer; text-decoration:none; display:block; }
        .cat-card:hover { border-color:var(--color-secondary); box-shadow:var(--shadow-lg); transform:translateY(-4px); }
        .cat-icon { font-size:2.25rem; margin-bottom:1rem; }
        .cat-card h3 { font-size:var(--font-size-base); font-weight:700; margin-bottom:.4rem; color:var(--color-text); }
        .cat-card p { font-size:var(--font-size-sm); color:var(--color-text-light); line-height:1.5; margin-bottom:.75rem; }
        .cat-count { font-size:var(--font-size-xs); font-weight:700; color:var(--color-secondary); }

/* Popular articles */
        .articles-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
        .article-item { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:all .2s; text-decoration:none; }
        .article-item:hover { border-color:var(--color-secondary); box-shadow:var(--shadow-md); }
        .article-item-left { flex:1; }
        .article-cat { font-size:var(--font-size-xs); font-weight:700; color:var(--color-secondary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.3rem; }
        .article-title { font-size:var(--font-size-sm); font-weight:600; color:var(--color-text); line-height:1.4; }
        .article-arrow { color:var(--color-text-lighter); font-size:1.1rem; flex-shrink:0; }

/* Contact options */
        .contact-opts { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
        .contact-opt { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:2rem; text-align:center; transition:all .2s; }
        .contact-opt:hover { border-color:var(--color-secondary); box-shadow:var(--shadow-lg); }
        .contact-opt-icon { font-size:2.5rem; margin-bottom:1rem; }
        .contact-opt h3 { font-size:var(--font-size-lg); font-weight:700; margin-bottom:.5rem; }
        .contact-opt p { font-size:var(--font-size-sm); color:var(--color-text-light); margin-bottom:1.25rem; line-height:1.6; }
        .contact-opt .avail { font-size:var(--font-size-xs); color:var(--color-success); font-weight:600; margin-bottom:1rem; }

@media(max-width:1024px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }
        @media(max-width:768px){ .articles-grid{grid-template-columns:1fr;} .contact-opts{grid-template-columns:1fr;} .help-stats{flex-wrap:wrap;gap:2rem;} .help-hero h1{font-size:var(--font-size-4xl);} }
        @media(max-width:480px){ .cat-grid{grid-template-columns:1fr;} }
    </style>
</head>
<body>
<nav class="navbar scrolled" id="navbar" style="background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);">
    <div class="nav-container">
        <a href="index.html" class="logo"><span class="logo-icon">◆</span> Nexlance</a>
        <ul class="nav-menu" id="nav-menu">
            <li class="nav-item has-dropdown">
                <a href="#">Products <span class="arrow">▾</span></a>
                <div class="dropdown"><div class="dropdown-grid">
                    <a href="#" class="dropdown-item"><span class="dropdown-icon">🌐</span><div><h4>Websites</h4><p>Professional site builder</p></div></a>
                    <a href="#" class="dropdown-item"><span class="dropdown-icon">🛒</span><div><h4>E-commerce</h4><p>Online store solutions</p></div></a>
                    <a href="#" class="dropdown-item"><span class="dropdown-icon">📧</span><div><h4>Email Marketing</h4><p>Campaign tools</p></div></a>
                    <a href="#" class="dropdown-item"><span class="dropdown-icon">📅</span><div><h4>Scheduling</h4><p>Appointment booking</p></div></a>
                </div></div>
            </li>
            <li class="nav-item has-dropdown">
                <a href="templates.html">Templates <span class="arrow">▾</span></a>
                <div class="dropdown dropdown-templates">
                    <div class="dropdown-grid templates-grid">
                        <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#667eea,#764ba2);"><img src="images/f2.webp" alt="Portfolio Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Portfolio</span></a>
                        <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#f093fb,#f5576c);"><img src="images/business.jpg" alt="Business Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Business</span></a>
                        <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#4facfe,#00f2fe);"><img src="images/creative.jpg" alt="Blog Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Blog</span></a>
                        <a href="#" class="template-thumb"><div class="thumb-img" style="background:linear-gradient(135deg,#43e97b,#38f9d7);"><img src="images/store.avif" alt="Store Template" style="width:100%;height:100%;object-fit:cover;"></div><span>Store</span></a>
                    </div>
                    <a href="templates.html" class="dropdown-view-all">View All Templates →</a>
                </div>
            </li>
            <li class="nav-item"><a href="pricing.html">Pricing</a></li>
            <li class="nav-item"><a href="features.html">Features</a></li>
            <li class="nav-item"><a href="#">Resources</a></li>
        </ul>
        <div class="nav-actions">
            <a href="login.html" class="btn-text">Log In</a>
            <a href="login.html" class="btn-primary">Get Started</a>
        </div>
        <button class="mobile-toggle" id="mobile-toggle"><span></span><span></span><span></span></button>
    </div>
</nav>

<section class="help-hero">
    <div class="container">
        <span class="help-hero-label">Help Center</span>
        <h1>How can we help you?</h1>
        <p>Search 500+ articles, guides, and tutorials to find your answer.</p>
        <div class="help-search">
            <span class="help-search-icon">🔍</span>
            <input type="text" id="helpSearch" placeholder="Search for answers…" onkeydown="if(event.key==='Enter')doSearch()">
            <button class="help-search-btn" onclick="doSearch()">Search</button>
        </div>
        <div class="popular-searches">
            Popular: <a href="#">Custom domain</a> <a href="#">Cancel plan</a> <a href="#">Connect Stripe</a> <a href="#">SSL error</a>
        </div>
    </div>
</section>

<div class="help-stats">
    <div class="help-stat"><strong>500+</strong><span>Help Articles</span></div>
    <div class="help-stat"><strong>98%</strong><span>Issues Resolved</span></div>
    <div class="help-stat"><strong>2 min</strong><span>Avg. Response Time</span></div>
    <div class="help-stat"><strong>24/7</strong><span>Live Chat Support</span></div>
</div>

<section style="background:var(--color-bg-alt);">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Browse by Topic</span>
            <h2 class="section-title">What do you need help with?</h2>
        </div>
        <div class="cat-grid">
            <a href="#" class="cat-card">
                <div class="cat-icon">🚀</div>
                <h3>Getting Started</h3>
                <p>Set up your account, pick a template, and publish your first site.</p>
                <div class="cat-count">48 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">✏️</div>
                <h3>Using the Editor</h3>
                <p>Drag-and-drop, sections, fonts, colors, and layout tips.</p>
                <div class="cat-count">92 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">💳</div>
                <h3>Billing & Payments</h3>
                <p>Plans, invoices, refunds, upgrades, and payment methods.</p>
                <div class="cat-count">35 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">🌐</div>
                <h3>Domains</h3>
                <p>Connect a domain, set up DNS, and manage SSL certificates.</p>
                <div class="cat-count">29 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">🛒</div>
                <h3>E-commerce</h3>
                <p>Products, payments, shipping, inventory, and orders.</p>
                <div class="cat-count">74 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">📊</div>
                <h3>Analytics & SEO</h3>
                <p>Traffic reports, search rankings, and performance optimization.</p>
                <div class="cat-count">41 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">📧</div>
                <h3>Email Marketing</h3>
                <p>Build campaigns, manage subscribers, and track opens.</p>
                <div class="cat-count">53 articles</div>
            </a>
            <a href="#" class="cat-card">
                <div class="cat-icon">🔧</div>
                <h3>Advanced & Developer</h3>
                <p>Custom code, APIs, Zapier integrations, and webhooks.</p>
                <div class="cat-count">67 articles</div>
            </a>
        </div>
    </div>
</section>

<section style="background:#fff;">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Popular Articles</span>
            <h2 class="section-title">Most helpful guides</h2>
        </div>
        <div class="articles-grid">
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Getting Started</div><div class="article-title">How to connect a custom domain to your Nexlance site</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Billing</div><div class="article-title">How to upgrade, downgrade, or cancel your plan</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">E-commerce</div><div class="article-title">Setting up Stripe or Razorpay for online payments</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Editor</div><div class="article-title">How to add a custom section with HTML/CSS/JS</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Domains</div><div class="article-title">SSL certificate not working — how to troubleshoot</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">SEO</div><div class="article-title">Setting up Google Analytics and Search Console</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">E-commerce</div><div class="article-title">How to create and manage discount / coupon codes</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Getting Started</div><div class="article-title">Migrating your website from WordPress or Wix</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Email Marketing</div><div class="article-title">How to set up automated welcome email sequences</div></div><span class="article-arrow">→</span></a>
            <a href="#" class="article-item"><div class="article-item-left"><div class="article-cat">Developer</div><div class="article-title">Using the Nexlance REST API for custom integrations</div></div><span class="article-arrow">→</span></a>
        </div>
    </div>
</section>

<section style="background:var(--color-bg-alt);">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Still Need Help?</span>
            <h2 class="section-title">Contact our support team</h2>
            <p class="section-subtitle">Can't find what you need? Our team is ready to help.</p>
        </div>
        <div class="contact-opts">
            <div class="contact-opt">
                <div class="contact-opt-icon">💬</div>
                <h3>Live Chat</h3>
                <div class="avail">● Online now</div>
                <p>Chat with a real support agent. No bots, no scripts — just help.</p>
                <a href="#" class="btn-primary">Start Live Chat</a>
            </div>
            <div class="contact-opt">
                <div class="contact-opt-icon">📧</div>
                <h3>Email Support</h3>
                <div class="avail" style="color:var(--color-text-lighter);">Responds in ~4 hours</div>
                <p>Send us a detailed message and we'll get back to you quickly.</p>
                <a href="contact.html" class="btn-secondary">Send Email</a>
            </div>
            <div class="contact-opt">
                <div class="contact-opt-icon">👥</div>
                <h3>Community Forum</h3>
                <div class="avail">80,000+ members</div>
                <p>Ask the community, share tips, and get answers from power users.</p>
                <a href="#" class="btn-secondary">Join Community</a>
            </div>
        </div>
    </div>
</section>

<footer class="footer"><div class="container">
    <div class="footer-grid">
        <div class="footer-brand"><a href="index.html" class="logo"><span class="logo-icon">◆</span> Nexlance</a><p>Build beautiful websites without writing a single line of code.</p><div class="social-links"><a href="#">𝕏</a><a href="#">in</a></div></div>
        <div class="footer-links"><h4>Product</h4><ul><li><a href="templates.html">Templates</a></li><li><a href="features.html">Features</a></li><li><a href="pricing.html">Pricing</a></li><li><a href="updates.html">Updates</a></li></ul></div>
        <div class="footer-links"><h4>Resources</h4><ul><li><a href="help-center.html">Help Center</a></li><li><a href="webinars.html">Webinars</a></li><li><a href="blog.html">Blog</a></li><li><a href="developers.html">Developers</a></li></ul></div>
        <div class="footer-links"><h4>Company</h4><ul><li><a href="about.html">About Us</a></li><li><a href="careers.html">Careers</a></li><li><a href="press.html">Press</a></li><li><a href="contact.html">Contact</a></li></ul></div>
        <div class="footer-links"><h4>Legal</h4><ul><li><a href="privacy.html">Privacy Policy</a></li><li><a href="terms.html">Terms of Service</a></li><li><a href="refund.html">Refund Policy</a></li></ul></div>
    </div>
    <div class="footer-bottom"><p>© 2026 Nexlance. All rights reserved.</p><div class="footer-bottom-links"><a href="terms.html">Terms & Services</a><a href="sitemap.html">Sitemap</a><a href="status.html">Status</a><a href="security.html">Security</a></div></div>
</div></footer>
<button class="back-to-top" id="back-to-top">↑</button>
<script src="main.js"></script>
<script>
    function doSearch() {
        const q = document.getElementById('helpSearch').value.trim();
        if (q) alert('Searching for: "' + q + '"\n\nIn a production site this would show filtered results. For now, browse the categories below.');
    }
</script>
</body>
</html>