0x1998 - MANAGER
DΓΌzenlenen Dosya: 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>
geri dΓΆn