926 lines
44 KiB
HTML
926 lines
44 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>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero" id="home">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-6 fade-in">
|
|
<div class="hero-content">
|
|
<h1 class="title split-content start">Transform Your Business with AI Powered Solutions</h1>
|
|
<p>Unleash the power of artificial intelligence to automate, analyze, and accelerate your digital growth Built <br> for modern startups and thinking agencies.</p>
|
|
<div class="d-flex gap-3 mb-4">
|
|
<button class="btn-primary-gradient">Start Free Trial</button>
|
|
<button class="btn-outline-gradient">Watch Demo</button>
|
|
</div>
|
|
<div class="d-flex gap-4 align-items-center mt-4">
|
|
<div>
|
|
<div class="stars">★★★★★</div>
|
|
<small class="text-secondary">4.9/5 from 2,500+ reviews</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 fade-in">
|
|
<div class="hero-image">
|
|
<svg class="ai-illustration" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
|
|
</linearGradient>
|
|
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#00f2ff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#667eea;stop-opacity:1" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- AI Brain/Network -->
|
|
<circle cx="300" cy="300" r="120" fill="url(#grad1)" opacity="0.2"/>
|
|
<circle cx="300" cy="300" r="90" fill="url(#grad1)" opacity="0.3"/>
|
|
<circle cx="300" cy="300" r="60" fill="url(#grad1)" opacity="0.5"/>
|
|
|
|
<!-- Neural Network Nodes -->
|
|
<circle cx="300" cy="200" r="15" fill="url(#grad2)">
|
|
<animate attributeName="r" values="15;20;15" dur="2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="400" cy="250" r="12" fill="url(#grad2)">
|
|
<animate attributeName="r" values="12;17;12" dur="2.5s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="200" cy="250" r="12" fill="url(#grad2)">
|
|
<animate attributeName="r" values="12;17;12" dur="2.2s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="350" cy="350" r="10" fill="url(#grad2)">
|
|
<animate attributeName="r" values="10;15;10" dur="2.8s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="250" cy="350" r="10" fill="url(#grad2)">
|
|
<animate attributeName="r" values="10;15;10" dur="2.6s" repeatCount="indefinite"/>
|
|
</circle>
|
|
<circle cx="300" cy="400" r="15" fill="url(#grad2)">
|
|
<animate attributeName="r" values="15;20;15" dur="2.3s" repeatCount="indefinite"/>
|
|
</circle>
|
|
|
|
<!-- Connection Lines -->
|
|
<line x1="300" y1="200" x2="400" y2="250" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="300" y1="200" x2="200" y2="250" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.2s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="400" y1="250" x2="350" y2="350" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.5s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="200" y1="250" x2="250" y2="350" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.8s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="350" y1="350" x2="300" y2="400" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.3s" repeatCount="indefinite"/>
|
|
</line>
|
|
<line x1="250" y1="350" x2="300" y2="400" stroke="url(#grad2)" stroke-width="2" opacity="0.5">
|
|
<animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.6s" repeatCount="indefinite"/>
|
|
</line>
|
|
|
|
<!-- Floating Particles -->
|
|
<circle cx="150" cy="150" r="5" fill="#00f2ff" opacity="0.6">
|
|
<animateMotion dur="10s" repeatCount="indefinite">
|
|
<mpath href="#orbit1"/>
|
|
</animateMotion>
|
|
</circle>
|
|
<circle cx="450" cy="150" r="4" fill="#667eea" opacity="0.6">
|
|
<animateMotion dur="12s" repeatCount="indefinite">
|
|
<mpath href="#orbit2"/>
|
|
</animateMotion>
|
|
</circle>
|
|
|
|
<path id="orbit1" d="M 150,150 Q 300,50 450,150 T 150,150" fill="none"/>
|
|
<path id="orbit2" d="M 450,150 Q 500,300 450,450 T 450,150" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Logo Slider -->
|
|
<div class="logo-slider">
|
|
<div class="container">
|
|
<p class="text-center mb-50 split-content end">TRUSTED BY LEADING COMPANIES WORLDWIDE</p>
|
|
<div class="overflow-hidden">
|
|
<div class="logo-track">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+VGVjaENvcnA8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+RGF0YUZsb3c8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+QUlMYWJzPC90ZXh0Pjwvc3ZnPg==" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+SW5ub1RlY2g8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+RnV0dXJlQUk8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
|
|
<!-- Duplicate for seamless loop -->
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+VGVjaENvcnA8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+RGF0YUZsb3c8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+QUlMYWJzPC90ZXh0Pjwvc3ZnPg==" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+SW5ub1RlY2g8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iNDAiPjx0ZXh0IHg9IjEwIiB5PSIyNSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjIwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iIzk0YTNiOCI+RnV0dXJlQUk8L3RleHQ+PC9zdmc+" alt="Client Logo" class="company-logo">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Features Section -->
|
|
<section class="atf-section-padding" id="features">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content start">Powerful Features for Modern Businesses</h2>
|
|
<p class="section-subtitle fade-in">Everything you need to scale your operations with cutting-edge AI technology</p>
|
|
</div>
|
|
<div class="row g-4 text-center">
|
|
<div class="col-md-6 col-lg-4 fadeInLeft">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-cpu"></i>
|
|
</div>
|
|
<h3>AI Automation</h3>
|
|
<p>Automate repetitive tasks and workflows with intelligent machine learning algorithms that adapt to your business needs.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 fadeInUp">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-graph-up-arrow"></i>
|
|
</div>
|
|
<h3>Advanced Analytics</h3>
|
|
<p>Real-time insights and predictive analytics to make data-driven decisions and stay ahead of the competition.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 fadeInRight">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-shield-check"></i>
|
|
</div>
|
|
<h3>Enterprise Security</h3>
|
|
<p>Bank-level encryption and compliance with SOC 2, GDPR, and HIPAA standards to protect your data.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 fadeInLeft">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-lightning-charge"></i>
|
|
</div>
|
|
<h3>Lightning Fast</h3>
|
|
<p>Optimized infrastructure delivering sub-second response times and 99.9% uptime guarantee.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 fadeInUp">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
<h3>Team Collaboration</h3>
|
|
<p>Seamless collaboration tools with real-time sync, role-based access, and integrated communication.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 col-lg-4 fadeInRight">
|
|
<div class="glass-card feature-card">
|
|
<div class="feature-icon">
|
|
<i class="bi bi-phone"></i>
|
|
</div>
|
|
<h3>API Integration</h3>
|
|
<p>Connect with 1000+ apps and services through our robust RESTful API and webhook system.</p>
|
|
</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Product Showcase -->
|
|
<section class="atf-section-padding pt-0">
|
|
<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>
|
|
|
|
<!-- Portfolio / Case Studies -->
|
|
<section class="atf-section-padding pt-0" id="portfolio">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content start">Success Stories</h2>
|
|
<p class="section-subtitle fade-in">Real results from real companies transforming their businesses with NeuralSync</p>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-md-6 fade-in">
|
|
<div class="glass-card portfolio-item">
|
|
<svg viewBox="0 0 400 350" xmlns="http://www.w3.org/2000/svg" class="portfolio-image">
|
|
<rect width="400" height="350" fill="#667eea"/>
|
|
<circle cx="200" cy="175" r="80" fill="rgba(255,255,255,0.2)"/>
|
|
<path d="M 150 175 L 190 215 L 270 135" stroke="white" stroke-width="8" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
<div class="portfolio-overlay">
|
|
<div class="portfolio-title">TechStartup Inc.</div>
|
|
<div class="portfolio-category">AI Automation • 300% Growth</div>
|
|
<p class="mt-3">Automated customer support system reduced response time by 80%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 fade-in">
|
|
<div class="glass-card portfolio-item">
|
|
<svg viewBox="0 0 400 350" xmlns="http://www.w3.org/2000/svg" class="portfolio-image">
|
|
<rect width="400" height="350" fill="#764ba2"/>
|
|
<rect x="100" y="100" width="80" height="150" rx="10" fill="rgba(255,255,255,0.2)"/>
|
|
<rect x="200" y="80" width="80" height="170" rx="10" fill="rgba(255,255,255,0.3)"/>
|
|
<rect x="300" y="60" width="80" height="190" rx="10" fill="rgba(255,255,255,0.2)"/>
|
|
</svg>
|
|
<div class="portfolio-overlay">
|
|
<div class="portfolio-title">DataFlow Solutions</div>
|
|
<div class="portfolio-category">Analytics Platform • 500K Users</div>
|
|
<p class="mt-3">Built scalable analytics platform processing 10TB daily</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 fade-in">
|
|
<div class="glass-card portfolio-item">
|
|
<svg viewBox="0 0 400 350" xmlns="http://www.w3.org/2000/svg" class="portfolio-image">
|
|
<rect width="400" height="350" fill="#00f2ff"/>
|
|
<circle cx="200" cy="175" r="100" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="3"/>
|
|
<circle cx="200" cy="175" r="70" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="3"/>
|
|
<circle cx="200" cy="175" r="40" fill="rgba(255,255,255,0.4)"/>
|
|
</svg>
|
|
<div class="portfolio-overlay">
|
|
<div class="portfolio-title">Marketing Pro Agency</div>
|
|
<div class="portfolio-category">Automation Tools • $2M Revenue</div>
|
|
<p class="mt-3">Marketing automation increased client retention by 65%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 fade-in">
|
|
<div class="glass-card portfolio-item">
|
|
<svg viewBox="0 0 400 350" xmlns="http://www.w3.org/2000/svg" class="portfolio-image">
|
|
<rect width="400" height="350" fill="#f093fb"/>
|
|
<path d="M 50 300 L 100 250 L 150 270 L 200 200 L 250 220 L 300 150 L 350 100"
|
|
stroke="white" stroke-width="5" fill="none" stroke-linecap="round"/>
|
|
<circle cx="200" cy="200" r="8" fill="white"/>
|
|
<circle cx="300" cy="150" r="8" fill="white"/>
|
|
<circle cx="350" cy="100" r="8" fill="white"/>
|
|
</svg>
|
|
<div class="portfolio-overlay">
|
|
<div class="portfolio-title">FinTech Innovations</div>
|
|
<div class="portfolio-category">ML Predictions • 95% Accuracy</div>
|
|
<p class="mt-3">AI-powered fraud detection saved $5M in first quarter</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="atf-section-padding pt-0" id="pricing">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content start">Simple, Transparent Pricing</h2>
|
|
<p class="section-subtitle fade-in">Choose the perfect plan for your business. All plans include 14-day free trial.</p>
|
|
</div>
|
|
|
|
<div class="row g-4 justify-content-center mt-40">
|
|
<div class="col-lg-4 col-md-6 fadeInLeft">
|
|
<div class="pricing-card">
|
|
<div class="glass-card">
|
|
<h3 class="mb-3">Starter</h3>
|
|
<p class="text-secondary mb-4">Perfect for small teams and startups</p>
|
|
<div class="price">$49<span style="font-size: 1.5rem; color: var(--text-secondary);">/mo</span></div>
|
|
<ul class="pricing-features">
|
|
<li><i class="bi bi-check-circle-fill"></i> Up to 5 team members</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> 10,000 API requests/month</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Basic analytics</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Email support</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> 10GB storage</li>
|
|
</ul>
|
|
<button class="btn-outline-gradient w-100">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fadeInUp">
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-badge">MOST POPULAR</div>
|
|
<div class="glass-card">
|
|
<h3 class="mb-3">Professional</h3>
|
|
<p class="text-secondary mb-4">For growing businesses and agencies</p>
|
|
<div class="price">$149<span style="font-size: 1.5rem; color: var(--text-secondary);">/mo</span></div>
|
|
<ul class="pricing-features">
|
|
<li><i class="bi bi-check-circle-fill"></i> Up to 25 team members</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> 100,000 API requests/month</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Advanced analytics & AI</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Priority support 24/7</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> 100GB storage</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Custom integrations</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> White-label options</li>
|
|
</ul>
|
|
<button class="btn-primary-gradient w-100">Get Started</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fadeInRight">
|
|
<div class="pricing-card">
|
|
<div class="glass-card">
|
|
<h3 class="mb-3">Enterprise</h3>
|
|
<p class="text-secondary mb-4">For large organizations with custom needs</p>
|
|
<div class="price">Custom</div>
|
|
<ul class="pricing-features">
|
|
<li><i class="bi bi-check-circle-fill"></i> Unlimited team members</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Unlimited API requests</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Custom AI models</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Dedicated success manager</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Unlimited storage</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> On-premise deployment</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> SLA guarantee</li>
|
|
<li><i class="bi bi-check-circle-fill"></i> Custom contracts</li>
|
|
</ul>
|
|
<button class="btn-outline-gradient w-100">Contact Sales</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section class="atf-section-padding pt-0">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-start">
|
|
<div class="section-title style1 mb-50 text-start">
|
|
<h2 class="title split-content end ">Loved by Thousands of Companies</h2>
|
|
<p class="section-subtitle fade-in ">Don't just take our word for it - hear from our satisfied customers</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 atf_client-slider slick-arrow-2">
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"NeuralSync transformed how we handle customer data. The AI automation saved us 20 hours per week and increased our conversion rate by 45%."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#667eea"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">SK</text>
|
|
</svg>
|
|
<div class="testimonial-author">Sarah Kim</div>
|
|
<div class="testimonial-role">CEO, TechFlow Solutions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"The best investment we've made. The platform is incredibly intuitive and the support team is outstanding. Highly recommend to any growing startup."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#764ba2"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">MJ</text>
|
|
</svg>
|
|
<div class="testimonial-author">Michael Johnson</div>
|
|
<div class="testimonial-role">CTO, DataVerse Inc</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"Seamless integration with our existing tools. The analytics dashboard gives us insights we never had before. Game changer for our agency."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#00f2ff"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">EP</text>
|
|
</svg>
|
|
<div class="testimonial-author">Emily Parker</div>
|
|
<div class="testimonial-role">Director, Creative Digital Agency</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"NeuralSync transformed how we handle customer data. The AI automation saved us 20 hours per week and increased our conversion rate by 45%."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#667eea"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">SK</text>
|
|
</svg>
|
|
<div class="testimonial-author">Sarah Kim</div>
|
|
<div class="testimonial-role">CEO, TechFlow Solutions</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"The best investment we've made. The platform is incredibly intuitive and the support team is outstanding. Highly recommend to any growing startup."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#764ba2"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">MJ</text>
|
|
</svg>
|
|
<div class="testimonial-author">Michael Johnson</div>
|
|
<div class="testimonial-role">CTO, DataVerse Inc</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 fade-in">
|
|
<div class="glass-card testimonial-card">
|
|
<div class="stars">★★★★★</div>
|
|
<p class="testimonial-text">"Seamless integration with our existing tools. The analytics dashboard gives us insights we never had before. Game changer for our agency."</p>
|
|
<svg width="80" height="80" class="testimonial-image">
|
|
<circle cx="40" cy="40" r="37" fill="#00f2ff"/>
|
|
<text x="40" y="50" text-anchor="middle" font-family="Inter" font-size="32" font-weight="bold" fill="white">EP</text>
|
|
</svg>
|
|
<div class="testimonial-author">Emily Parker</div>
|
|
<div class="testimonial-role">Director, Creative Digital Agency</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Banner -->
|
|
<section>
|
|
<div class="container">
|
|
<div class="cta-banner fade-in">
|
|
<h2>Ready to Transform Your Business?</h2>
|
|
<p>Join 10,000+ companies already using NeuralSync to automate, analyze, and accelerate their growth.</p>
|
|
<div class="d-flex gap-3 justify-content-center flex-wrap">
|
|
<button class="btn-primary-gradient" style="background: white; color: #667eea;">Start Free Trial</button>
|
|
<button class="btn-outline-gradient" style="border-color: white; color: white;">Schedule Demo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="atf-section-padding">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content end">Frequently Asked Questions</h2>
|
|
<p class="section-subtitle fade-in">Everything you need to know about NeuralSync</p>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 fade-in">
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>What is NeuralSync and how does it work?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
NeuralSync is an AI-powered SaaS platform that helps businesses automate workflows, analyze data, and scale operations. Our machine learning algorithms adapt to your specific needs and continuously improve performance over time.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>Can I try NeuralSync before committing?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
Absolutely! All plans include a 14-day free trial with full access to features. No credit card required to start. You can cancel anytime during the trial period.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>How secure is my data?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
Security is our top priority. We use bank-level 256-bit encryption, are SOC 2 Type II certified, and comply with GDPR, HIPAA, and other international standards. Your data is stored in encrypted databases with regular backups.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>What kind of support do you provide?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
We offer email support for Starter plans, 24/7 priority support for Professional plans, and dedicated success managers for Enterprise clients. We also have extensive documentation, video tutorials, and community forums.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>Can I change my plan later?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
Yes! You can upgrade or downgrade your plan at any time. When upgrading, you'll get immediate access to new features. When downgrading, changes take effect at the start of your next billing cycle.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-question">
|
|
<span>Do you offer refunds?</span>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
<div class="faq-answer">
|
|
Yes, we offer a 30-day money-back guarantee. If you're not satisfied with NeuralSync within the first 30 days, we'll provide a full refund, no questions asked.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Newsletter Section -->
|
|
<section>
|
|
<div class="container">
|
|
<div class="newsletter-section fade-in">
|
|
<h2>Stay Updated</h2>
|
|
<p>Get the latest AI insights, product updates, and exclusive offers delivered to your inbox.</p>
|
|
<form class="d-flex justify-content-center flex-wrap gap-3" onsubmit="subscribeNewsletter(event)">
|
|
<input type="email" class="newsletter-input" placeholder="Enter your email address" required>
|
|
<button type="submit" class="btn-primary-gradient" style="background: white; color: #667eea;">Subscribe</button>
|
|
</form>
|
|
<p class="description">We respect your privacy. Unsubscribe at any time.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Form -->
|
|
<section class="atf-section-padding" id="contact">
|
|
<div class="container">
|
|
<div class="section-title mb-50 text-center">
|
|
<h2 class="title split-content end">Get In Touch</h2>
|
|
<p class="section-subtitle fade-in">Have questions? We'd love to hear from you Send us a message.</p>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 fade-in">
|
|
<form class="contact-form glass-card" onsubmit="submitContact(event)">
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<input type="text" placeholder="Your Name" required>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="email" placeholder="Your Email" required>
|
|
</div>
|
|
<div class="col-12">
|
|
<input type="text" placeholder="Subject">
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea rows="6" placeholder="Your Message" required></textarea>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="submit" class="btn-primary-gradient w-100">Send Message</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</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> |