File: /home/niyknzcu/nexlancedigital.com/about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us — 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>
/* ---- Page Hero (inner pages) ---- */
.page-hero {
padding: 160px 0 80px;
background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 50%, #f8fafc 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: rgba(79, 70, 229, 0.08);
top: -150px; right: -150px;
}
.page-hero::after {
content: '';
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
background: rgba(124, 58, 237, 0.08);
bottom: -100px; left: -100px;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-label {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.page-hero h1 {
font-size: var(--font-size-5xl);
font-weight: 800;
line-height: 1.15;
margin-bottom: 1.5rem;
}
.page-hero p {
font-size: var(--font-size-lg);
color: var(--color-text-light);
max-width: 640px;
margin: 0 auto;
line-height: 1.7;
}
/* ---- Stats ---- */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 4rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
font-weight: 500;
}
/* ---- Story ---- */
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.story-image {
border-radius: var(--radius-2xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
background: linear-gradient(135deg, #e0e7ff, #c4b5fd);
height: 460px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6rem;
}
.story-content .section-label { text-align: left; display: block; }
.story-content h2 {
font-size: var(--font-size-4xl);
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.story-content p {
font-size: var(--font-size-base);
color: var(--color-text-light);
line-height: 1.8;
margin-bottom: 1.25rem;
}
/* ---- Values ---- */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.value-card {
background: #fff;
border-radius: var(--radius-xl);
padding: 2.5rem 2rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-border);
transition: all var(--transition-base);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-secondary);
}
.value-icon {
font-size: 2.5rem;
margin-bottom: 1.25rem;
}
.value-card h3 {
font-size: var(--font-size-xl);
margin-bottom: 0.75rem;
}
.value-card p {
font-size: var(--font-size-sm);
color: var(--color-text-light);
line-height: 1.7;
}
/* ---- Team ---- */
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.team-card {
text-align: center;
}
.team-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 1.25rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.25rem;
font-weight: 700;
color: #fff;
}
.avatar-indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.avatar-pink { background: linear-gradient(135deg, #ec4899, #a855f7); }
.avatar-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.avatar-green { background: linear-gradient(135deg, #10b981, #059669); }
.avatar-orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar-red { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.avatar-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.avatar-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.team-card h4 {
font-size: var(--font-size-base);
font-weight: 700;
margin-bottom: 0.25rem;
}
.team-role {
font-size: var(--font-size-sm);
color: var(--color-secondary);
font-weight: 500;
margin-bottom: 0.5rem;
}
.team-bio {
font-size: var(--font-size-sm);
color: var(--color-text-light);
line-height: 1.6;
}
/* ---- Investors ---- */
.investors-grid {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
margin-top: 3rem;
}
.investor-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.5rem 2.5rem;
text-align: center;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-text-light);
transition: all var(--transition-fast);
}
.investor-card:hover {
border-color: var(--color-secondary);
color: var(--color-secondary);
box-shadow: var(--shadow-md);
}
@media (max-width: 1024px) {
.story-grid { grid-template-columns: 1fr; gap: 3rem; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.page-hero h1 { font-size: var(--font-size-4xl); }
.values-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.team-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar" id="navbar">
<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="index.html#products">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="index.html#templates">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="index.html#templates" class="dropdown-view-all">View All Templates →</a>
</div>
</li>
<li class="nav-item"><a href="index.html#pricing">Pricing</a></li>
<li class="nav-item"><a href="index.html#features">Features</a></li>
<li class="nav-item"><a href="index.html#resources">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" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Page Hero -->
<section class="page-hero">
<div class="container">
<span class="page-hero-label">About Us</span>
<h1>Building the future of<br><span class="gradient-text">web creation</span></h1>
<p>We're a passionate team on a mission to make professional web design accessible to everyone — from freelancers and startups to global enterprises.</p>
<!-- Stats -->
<div class="stats-row">
<div class="stat-item">
<div class="stat-number">4M+</div>
<div class="stat-label">Active Users</div>
</div>
<div class="stat-item">
<div class="stat-number">180+</div>
<div class="stat-label">Countries</div>
</div>
<div class="stat-item">
<div class="stat-number">12M+</div>
<div class="stat-label">Websites Built</div>
</div>
<div class="stat-item">
<div class="stat-number">99.9%</div>
<div class="stat-label">Uptime SLA</div>
</div>
</div>
</div>
</section>
<!-- Our Story -->
<section style="background: #fff;">
<div class="container">
<div class="story-grid">
<div class="story-image"><img src="images/main.png" alt="Our Story Image"></div>
<div class="story-content">
<span class="section-label">Our Story</span>
<h2>From a small team to a global platform</h2>
<p>Nexlance was founded in 2019 by three developers frustrated by how hard it was for non-technical founders to build a professional online presence. We believed anyone with a great idea deserved a great website — without hiring a developer or learning to code.</p>
<p>Starting from a tiny office in Bangalore, we bootstrapped our way to our first 10,000 users. Two years later, we raised our Series A and expanded globally. Today, Nexlance powers over 12 million websites across 180 countries and is trusted by freelancers, agencies, and Fortune 500 companies alike.</p>
<p>We're still on that same mission: make powerful web tools radically simple. And we're just getting started.</p>
</div>
</div>
</div>
</section>
<!-- Our Values -->
<section style="background: var(--color-bg-alt);">
<div class="container">
<div class="section-header">
<span class="section-label">Our Values</span>
<h2 class="section-title">What drives everything we do</h2>
<p class="section-subtitle">Our values aren't just words on a wall. They shape how we build products, support customers, and grow as a company.</p>
</div>
<div class="values-grid">
<div class="value-card">
<div class="value-icon">🌍</div>
<h3>Accessibility First</h3>
<p>We believe the web should be open to everyone. Our tools are designed to be intuitive for beginners and powerful enough for professionals.</p>
</div>
<div class="value-card">
<div class="value-icon">⚡</div>
<h3>Speed & Simplicity</h3>
<p>Complexity is the enemy of progress. We obsess over removing friction so our users can focus on what matters — building great things.</p>
</div>
<div class="value-card">
<div class="value-icon">🤝</div>
<h3>Customer Obsession</h3>
<p>Every feature we build starts with the customer. We listen, iterate, and ship solutions that make a real difference for real people.</p>
</div>
<div class="value-card">
<div class="value-icon">🔒</div>
<h3>Trust & Transparency</h3>
<p>We are honest about our pricing, our roadmap, and our mistakes. Trust is earned through consistent action, not just promises.</p>
</div>
<div class="value-card">
<div class="value-icon">🌱</div>
<h3>Sustainable Growth</h3>
<p>We grow responsibly — for our business, our team, and the planet. We're committed to being carbon neutral by 2027.</p>
</div>
<div class="value-card">
<div class="value-icon">💡</div>
<h3>Relentless Innovation</h3>
<p>We're never satisfied with "good enough." Our team ships new features, improvements, and experiments every single week.</p>
</div>
</div>
</div>
</section>
<!-- Leadership Team -->
<section style="background: #fff;">
<div class="container">
<div class="section-header">
<span class="section-label">Leadership</span>
<h2 class="section-title">Meet the team behind Nexlance</h2>
<p class="section-subtitle">A diverse group of builders, designers, and operators united by a shared belief in the power of the open web.</p>
</div>
<div class="team-grid">
<div class="team-card">
<div class="team-avatar avatar-indigo">AK</div>
<h4>Arjun Kapoor</h4>
<div class="team-role">CEO & Co-Founder</div>
<p class="team-bio">Former product lead at Razorpay. IIT Delhi alumnus passionate about scaling developer tools.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-pink">PS</div>
<h4>Priya Sharma</h4>
<div class="team-role">CTO & Co-Founder</div>
<p class="team-bio">Previously engineering manager at Flipkart. Loves distributed systems and clean code.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-blue">RN</div>
<h4>Rohan Nair</h4>
<div class="team-role">CPO & Co-Founder</div>
<p class="team-bio">Product philosopher who spent 6 years at Adobe. Believes design is a conversation.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-green">SG</div>
<h4>Sunita Gupta</h4>
<div class="team-role">VP of Marketing</div>
<p class="team-bio">Built go-to-market strategies for 3 unicorn startups across SaaS and fintech.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-orange">VM</div>
<h4>Vikram Mehta</h4>
<div class="team-role">VP of Engineering</div>
<p class="team-bio">Infrastructure expert. Scaled systems to handle billions of requests daily at Ola.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-red">AM</div>
<h4>Ananya Mishra</h4>
<div class="team-role">Head of Design</div>
<p class="team-bio">Award-winning UX designer. Previously led design at CRED and Swiggy.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-teal">KR</div>
<h4>Karthik Rao</h4>
<div class="team-role">Head of Sales</div>
<p class="team-bio">Enterprise SaaS specialist. Grew revenue 10x at a Series B startup in 18 months.</p>
</div>
<div class="team-card">
<div class="team-avatar avatar-purple">NP</div>
<h4>Neha Patel</h4>
<div class="team-role">Head of Customer Success</div>
<p class="team-bio">NPS champion. Passionate about turning customers into lifelong advocates.</p>
</div>
</div>
</div>
</section>
<!-- Investors -->
<section style="background: var(--color-bg-alt);">
<div class="container">
<div class="section-header">
<span class="section-label">Backed By</span>
<h2 class="section-title">Trusted by world-class investors</h2>
<p class="section-subtitle">We've raised $42M from leading venture firms who share our vision for a more accessible internet.</p>
</div>
<div class="investors-grid">
<div class="investor-card">◉ Sequoia India</div>
<div class="investor-card">◇ Accel Partners</div>
<div class="investor-card">○ Tiger Global</div>
<div class="investor-card">◆ Matrix Partners</div>
<div class="investor-card">● Kalaari Capital</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section">
<div class="container">
<div class="cta-content">
<h2>Join millions building on Nexlance</h2>
<p>Start your free trial today. No credit card required.</p>
<a href="login.html" class="btn-primary btn-large">Get Started Free</a>
</div>
</div>
</section>
<!-- Footer -->
<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="#" aria-label="Twitter">𝕏</a>
<a href="#" aria-label="LinkedIn">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" aria-label="Back to top">↑</button>
<script src="main.js"></script>
</body>
</html>