372 lines
15 KiB
HTML
372 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Transform your business with cutting-edge AI solutions. Premium SaaS platform for startups and digital agencies.">
|
|
<title>NeuralSync - AI-Powered SaaS Solutions for Modern Businesses HTML Template</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<!-- Bootstrap 5 -->
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="assets/fonts/bootstrap-icons.min.css">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
|
|
<link rel="stylesheet" href="assets/css/slick.min.css">
|
|
<link rel="stylesheet" href="assets/css/theme-spacing.min.css">
|
|
<!-- Template styles -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
<link rel="stylesheet" href="assets/css/responsive.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="page-wrapper">
|
|
|
|
<!-- START PRELOADER -->
|
|
<div class="preloader">
|
|
<div class="status">
|
|
<div class="loader">
|
|
<div class="loading-1"></div>
|
|
<div class="loading-2">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END PRELOADER -->
|
|
|
|
<!-- BACK TO TOP -->
|
|
<div class="scroll-top">
|
|
<i class="bi bi-arrow-up" style="font-size: 1.5rem; color: white;"></i>
|
|
</div>
|
|
<!-- BACK TO TOP -->
|
|
|
|
<!-- Animated Background -->
|
|
<div class="animated-bg"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.html"><i class="fa-light fa-sparkles mr-5"></i>NeuralSync</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto align-items-center">
|
|
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="features.html">Features</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="portfolio.html">Portfolio</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
|
|
<li class="nav-item ms-3">
|
|
<button class="btn-primary-gradient">Get Started</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
|
|
<!-- START BREADCRUMB -->
|
|
<section class="breadcrumb-area position-relative black-bg breadcrumb-cover-bg breadcrumb-spacing breadcrumb-bg-attach);">
|
|
<div class="container">
|
|
<div class="row justify-content-center text-center">
|
|
<div class="col-xxl-12">
|
|
<div class="breadcrumb-content p-relative z-index-2">
|
|
<div class="breadcrumb-single-content mb-10">
|
|
<span><a href="index.html"><i class="fa-light fa-house fa-fade me-2"></i>HOME</a></span>
|
|
<span class="breadcrumb-sub-title">ABOUT</span>
|
|
</div>
|
|
<h3 class="breadcrumb-title split-content end">About Us</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END BREADCRUMB -->
|
|
|
|
<!-- About / Why Choose Us -->
|
|
<section class="atf-section-padding" id="about">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6">
|
|
<div class="section-title mb-30 text-start">
|
|
<h2 class="title text-start mb-4 split-content up">Why Choose NeuralSync?</h2>
|
|
<p class="text-secondary" style="font-size: 1.1rem;">We're not just another SaaS platform. We're your innovation partner, combining cutting-edge AI technology with intuitive design to deliver exceptional results.</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="mb-4">
|
|
<h3 class="mb-3"><i class="fa-light fa-badge-check mr-5 text-info"></i> Innovation First</h3>
|
|
<p class="text-secondary">Stay ahead with bleeding-edge AI technology that evolves with your needs.</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h3 class="mb-3"><i class="fa-light fa-badge-check mr-5 text-info"></i> Scalable Architecture</h3>
|
|
<p class="text-secondary">From startup to enterprise - our infrastructure grows seamlessly with your business.</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<h3 class="mb-3"><i class="fa-light fa-badge-check mr-5 text-info"></i> World-Class Support</h3>
|
|
<p class="text-secondary">24/7 expert support team ready to help you succeed at every step.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-primary-gradient mt-3">DESCOVER MORE</button>
|
|
</div>
|
|
|
|
<div class="col-lg-6 zoomIn mt-lg-40">
|
|
<div class="glass-card p-4">
|
|
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="chartGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#667eea;stop-opacity:0.1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 20 250 L 80 200 L 140 180 L 200 120 L 260 100 L 320 50 L 380 30"
|
|
stroke="#00f2ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M 20 250 L 80 200 L 140 180 L 200 120 L 260 100 L 320 50 L 380 30 L 380 300 L 20 300 Z"
|
|
fill="url(#chartGrad)"/>
|
|
<circle cx="80" cy="200" r="6" fill="#00f2ff">
|
|
<animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="200" cy="120" r="6" fill="#00f2ff">
|
|
<animate attributeName="r" values="6;10;6" dur="2.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="320" cy="50" r="6" fill="#00f2ff">
|
|
<animate attributeName="r" values="6;10;6" dur="3s" repeatCount="indefinite"/>
|
|
</circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<div>
|
|
<div class="container">
|
|
<div class="stats-section">
|
|
<div class="row">
|
|
<div class="col-md-3 col-6 mb-4 mb-md-0 fadeInLeft">
|
|
<div class="stat-item">
|
|
<div class="stat-number"><span class="counter-value">10</span>K+</div>
|
|
<div class="stat-label">Active Users</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 mb-4 mb-md-0 fadeInUp">
|
|
<div class="stat-item">
|
|
<div class="stat-number"><span class="counter-value">99</span>.9%</div>
|
|
<div class="stat-label">Uptime SLA</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 fadeInUp">
|
|
<div class="stat-item">
|
|
<div class="stat-number"><span class="counter-value">50</span>M+</div>
|
|
<div class="stat-label">API Requests</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 col-6 fadeInRight">
|
|
<div class="stat-item">
|
|
<div class="stat-number"><span class="counter-value">24</span>/7</div>
|
|
<div class="stat-label">Support</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Product Showcase -->
|
|
<section class="atf-section-padding">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content start">Experience the Platform</h2>
|
|
<p class="section-subtitle fade-in">
|
|
A beautiful, intuitive dashboard designed for power users and beginners alike
|
|
</p>
|
|
</div>
|
|
|
|
<div class="dashboard-mockup spread zoom-out">
|
|
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<!-- Dashboard Background -->
|
|
<rect width="1200" height="700" fill="#1e293b" rx="20"/>
|
|
|
|
<!-- Header -->
|
|
<rect width="1200" height="60" fill="#0f172a"/>
|
|
<text x="30" y="38" font-family="Inter, sans-serif" font-size="24" font-weight="bold" fill="#667eea">NeuralSync</text>
|
|
|
|
<!-- Header Icons -->
|
|
<foreignObject x="1050" y="10" width="140" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;justify-content:flex-end;gap:10px;align-items:center;">
|
|
<i class="bi bi-bell-fill" style="color:#667eea;font-size:20px;"></i>
|
|
<i class="bi bi-gear-fill" style="color:#667eea;font-size:20px;"></i>
|
|
<i class="bi bi-person-circle" style="color:#667eea;font-size:20px;"></i>
|
|
</div>
|
|
</foreignObject>
|
|
|
|
<!-- Sidebar -->
|
|
<rect x="0" y="60" width="240" height="640" fill="#0f172a"/>
|
|
<rect x="20" y="100" width="200" height="40" rx="10" fill="#667eea" opacity="0.2"/>
|
|
<rect x="20" y="160" width="200" height="40" rx="10" fill="#334155"/>
|
|
<rect x="20" y="220" width="200" height="40" rx="10" fill="#334155"/>
|
|
<foreignObject x="30" y="105" width="180" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-speedometer2 mr-5"></i> Dashboard
|
|
</div>
|
|
</foreignObject>
|
|
<foreignObject x="30" y="165" width="180" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-people-fill mr-5"></i> Users
|
|
</div>
|
|
</foreignObject>
|
|
<foreignObject x="30" y="225" width="180" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-bar-chart-fill mr-5"></i> Analytics
|
|
</div>
|
|
</foreignObject>
|
|
|
|
<!-- Main Content Area -->
|
|
<rect x="260" y="80" width="920" height="600" fill="#1e293b" rx="15"/>
|
|
|
|
|
|
<!-- Cards -->
|
|
<rect x="280" y="100" width="280" height="180" rx="15" fill="#334155"/>
|
|
<foreignObject x="300" y="120" width="240" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-graph-up mr-5"></i> Sales Overview
|
|
</div>
|
|
</foreignObject>
|
|
|
|
<rect x="580" y="100" width="280" height="180" rx="15" fill="#334155"/>
|
|
<foreignObject x="600" y="120" width="240" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-people mr-5"></i> Active Users
|
|
</div>
|
|
</foreignObject>
|
|
|
|
<rect x="880" y="100" width="280" height="180" rx="15" fill="#334155"/>
|
|
<foreignObject x="900" y="120" width="240" height="40">
|
|
<div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-weight:600;font-family:Inter,sans-serif;">
|
|
<i class="bi bi-wallet-fill mr-5"></i> Revenue
|
|
</div>
|
|
</foreignObject>
|
|
|
|
<!-- Chart Area -->
|
|
<rect x="280" y="300" width="880" height="360" rx="15" fill="#334155"/>
|
|
<path d="M 320 600 L 380 550 L 440 520 L 500 480 L 560 450 L 620 420 L 680 380 L 740 360 L 800 340 L 860 320 L 920 300 L 925 305 L 930 310 L 1100 315"
|
|
stroke="#667eea" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
|
|
<!-- Glowing Elements -->
|
|
<circle cx="420" cy="200" r="30" fill="#667eea" opacity="0.6">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="720" cy="200" r="30" fill="#00f2ff" opacity="0.6">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="1020" cy="200" r="30" fill="#764ba2" opacity="0.6">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<!-- Footer -->
|
|
<div class="footer">
|
|
<div class="container">
|
|
<div class="row g-4">
|
|
<div class="col-lg-4 col-md-6 fadeInLeft">
|
|
<h3 class="navbar-brand mb-50"><i class="fa-light fa-sparkles mr-5"></i>NeuralSync</h3>
|
|
<p class="text-secondary mb-4">Empowering businesses with cutting-edge AI technology to automate, analyze, and accelerate growth in the digital age.</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-x-twitter"></i></a>
|
|
<a href="#"><i class="bi bi-linkedin"></i></a>
|
|
<a href="#"><i class="bi bi-github"></i></a>
|
|
<a href="#"><i class="bi bi-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-6 fadeInUp">
|
|
<h3>Product</h3>
|
|
<ul>
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#pricing">Pricing</a></li>
|
|
<li><a href="#">Security</a></li>
|
|
<li><a href="#">Integrations</a></li>
|
|
<li><a href="#">API Docs</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-6 fadeInUp">
|
|
<h3>Company</h3>
|
|
<ul>
|
|
<li><a href="#about">About Us</a></li>
|
|
<li><a href="#">Careers</a></li>
|
|
<li><a href="#">Blog</a></li>
|
|
<li><a href="#">Press Kit</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-6 fadeInUp">
|
|
<h3>Resources</h3>
|
|
<ul>
|
|
<li><a href="#">Documentation</a></li>
|
|
<li><a href="#">Tutorials</a></li>
|
|
<li><a href="#">Community</a></li>
|
|
<li><a href="#">Support</a></li>
|
|
<li><a href="#">Status</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-lg-2 col-md-6 fadeInRight">
|
|
<h3>Legal</h3>
|
|
<ul>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Terms of Service</a></li>
|
|
<li><a href="#">Cookie Policy</a></li>
|
|
<li><a href="#">GDPR</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr style="border-color: rgba(255,255,255,0.1); margin: 3rem 0 2rem;">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
|
<p class="text-secondary mb-0">© 2026 NeuralSync. All rights reserved.</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end">
|
|
<p class="text-secondary mb-0">Made with <span style="color: #f093fb;">?</span> for innovators worldwide</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
<!-- END PRELOADER -->
|
|
|
|
<!-- jQuery, Bootstrap, GSAP -->
|
|
<script src="assets/js/jquery.min.js"></script>
|
|
<!-- Latest compiled and minified Bootstrap -->
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/plugin.min.js"></script>
|
|
<script src="assets/js/gsap.js"></script>
|
|
<!-- Template scripts -->
|
|
<script src="assets/js/main.js"></script>
|
|
</body>
|
|
</html> |