File: /home/niyknzcu/nexlancedigital.com/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>
<!-- Help Hero -->
<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>
<!-- Stats -->
<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>
<!-- Categories -->
<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>
<!-- Popular articles -->
<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>
<!-- Contact support -->
<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>