Spaces:

Macoderi
/

ai

Running

App Files Files Community

Macoderi commited on Mar 31, 2025

Commit

056de07

verified ·

1 Parent(s): 496a0bf

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1641 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai
-emoji: 👁
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1641 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NeuraLink - AI Solutions</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    :root {
+      --primary: #6366f1;
+      --primary-dark: #4f46e5;
+      --text: #1e293b;
+      --text-light: #64748b;
+      --background: #f8fafc;
+      --card: #ffffff;
+      --border: #e2e8f0;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+    /* Dark mode variables */
+    .dark-mode {
+      --primary: #818cf8;
+      --primary-dark: #6366f1;
+      --text: #f8fafc;
+      --text-light: #94a3b8;
+      --background: #0f172a;
+      --card: #1e293b;
+      --border: #334155;
+      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      line-height: 1.6;
+      color: var(--text);
+      background-color: var(--background);
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 20px;
+    }
+    /* Header styles */
+    header {
+      padding: 20px 0;
+      position: sticky;
+      top: 0;
+      background-color: var(--background);
+      z-index: 100;
+      box-shadow: var(--shadow);
+    }
+    .nav-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--primary);
+    }
+    .logo-icon {
+      font-size: 28px;
+    }
+    nav ul {
+      display: flex;
+      list-style: none;
+      gap: 30px;
+    }
+    nav a {
+      text-decoration: none;
+      color: var(--text);
+      font-weight: 500;
+      position: relative;
+      padding: 5px 0;
+    }
+    nav a::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background-color: var(--primary);
+      transition: width 0.3s;
+    }
+    nav a:hover::after {
+      width: 100%;
+    }
+    .nav-actions {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+    .theme-toggle {
+      background: none;
+      border: none;
+      color: var(--text);
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .btn {
+      padding: 10px 20px;
+      border-radius: 6px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.3s;
+    }
+    .btn-primary {
+      background-color: var(--primary);
+      color: white;
+    }
+    .btn-primary:hover {
+      background-color: var(--primary-dark);
+      transform: translateY(-2px);
+    }
+    .btn-outline {
+      background-color: transparent;
+      border: 1px solid var(--primary);
+      color: var(--primary);
+    }
+    .btn-outline:hover {
+      background-color: var(--primary);
+      color: white;
+      transform: translateY(-2px);
+    }
+    .mobile-menu-btn {
+      display: none;
+      background: none;
+      border: none;
+      font-size: 24px;
+      color: var(--text);
+      cursor: pointer;
+    }
+    /* Hero section */
+    .hero {
+      padding: 100px 0;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    .hero h1 {
+      font-size: 3.5rem;
+      margin-bottom: 20px;
+      line-height: 1.2;
+      background: linear-gradient(45deg, var(--primary), #10b981);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .hero p {
+      font-size: 1.2rem;
+      color: var(--text-light);
+      max-width: 700px;
+      margin: 0 auto 40px;
+    }
+    .hero-buttons {
+      display: flex;
+      gap: 20px;
+      justify-content: center;
+      margin-bottom: 40px;
+    }
+    .hero-image {
+      max-width: 800px;
+      margin: 0 auto;
+      position: relative;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      border: 1px solid var(--border);
+    }
+    .hero-image img {
+      width: 100%;
+      display: block;
+    }
+    .floating-shapes {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      overflow: hidden;
+    }
+    .shape {
+      position: absolute;
+      border-radius: 50%;
+      background: linear-gradient(45deg, var(--primary), rgba(99, 102, 241, 0.1));
+      filter: blur(40px);
+      opacity: 0.7;
+      animation: float 15s infinite linear;
+    }
+    .shape:nth-child(1) {
+      width: 300px;
+      height: 300px;
+      top: -150px;
+      left: -150px;
+      animation-delay: 0s;
+    }
+    .shape:nth-child(2) {
+      width: 400px;
+      height: 400px;
+      bottom: -200px;
+      right: -200px;
+      animation-delay: 3s;
+      animation-direction: reverse;
+    }
+    .shape:nth-child(3) {
+      width: 200px;
+      height: 200px;
+      top: 50%;
+      left: 20%;
+      animation-delay: 6s;
+    }
+    @keyframes float {
+      0%,
+      100% {
+        transform: translate(0, 0);
+      }
+      25% {
+        transform: translate(50px, 50px);
+      }
+      50% {
+        transform: translate(0, 100px);
+      }
+      75% {
+        transform: translate(-50px, 50px);
+      }
+    }
+    /* Features section */
+    .section {
+      padding: 100px 0;
+    }
+    .section-title {
+      text-align: center;
+      margin-bottom: 60px;
+    }
+    .section-title h2 {
+      font-size: 2.5rem;
+      margin-bottom: 20px;
+    }
+    .section-title p {
+      color: var(--text-light);
+      max-width: 700px;
+      margin: 0 auto;
+    }
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 30px;
+    }
+    .feature-card {
+      background-color: var(--card);
+      border-radius: 12px;
+      padding: 30px;
+      box-shadow: var(--shadow);
+      transition: transform 0.3s;
+      border: 1px solid var(--border);
+    }
+    .feature-card:hover {
+      transform: translateY(-10px);
+    }
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+      background-color: rgba(99, 102, 241, 0.1);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      color: var(--primary);
+      font-size: 24px;
+    }
+    .feature-card h3 {
+      font-size: 1.5rem;
+      margin-bottom: 15px;
+    }
+    .feature-card p {
+      color: var(--text-light);
+    }
+    /* How it works section */
+    .steps {
+      display: flex;
+      flex-direction: column;
+      gap: 40px;
+      max-width: 800px;
+      margin: 0 auto;
+      position: relative;
+    }
+    .step {
+      display: flex;
+      gap: 30px;
+      position: relative;
+      z-index: 1;
+    }
+    .step-number {
+      width: 60px;
+      height: 60px;
+      background-color: var(--primary);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: bold;
+      flex-shrink: 0;
+    }
+    .step-content {
+      background-color: var(--card);
+      padding: 25px;
+      border-radius: 12px;
+      box-shadow: var(--shadow);
+      flex-grow: 1;
+      border: 1px solid var(--border);
+    }
+    .step-content h3 {
+      margin-bottom: 10px;
+    }
+    .step-content p {
+      color: var(--text-light);
+    }
+    .steps::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 30px;
+      width: 2px;
+      background-color: var(--primary);
+      opacity: 0.2;
+      z-index: 0;
+    }
+    /* Pricing section */
+    .pricing-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 30px;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+    .pricing-card {
+      background-color: var(--card);
+      border-radius: 12px;
+      padding: 40px 30px;
+      box-shadow: var(--shadow);
+      text-align: center;
+      border: 1px solid var(--border);
+      position: relative;
+      overflow: hidden;
+    }
+    .pricing-card.popular::before {
+      content: 'Most Popular';
+      position: absolute;
+      top: 15px;
+      right: -45px;
+      background-color: var(--primary);
+      color: white;
+      padding: 5px 50px;
+      transform: rotate(45deg);
+      font-size: 12px;
+      font-weight: bold;
+    }
+    .pricing-card h3 {
+      font-size: 1.5rem;
+      margin-bottom: 20px;
+    }
+    .price {
+      font-size: 3rem;
+      font-weight: bold;
+      margin-bottom: 20px;
+      color: var(--primary);
+    }
+    .price span {
+      font-size: 1rem;
+      color: var(--text-light);
+      font-weight: normal;
+    }
+    .pricing-features {
+      list-style: none;
+      margin-bottom: 30px;
+    }
+    .pricing-features li {
+      padding: 10px 0;
+      color: var(--text-light);
+      position: relative;
+    }
+    .pricing-features li::before {
+      content: '\f00c';
+      font-family: 'Font Awesome 6 Free';
+      font-weight: 900;
+      margin-right: 10px;
+      color: var(--primary);
+    }
+    /* Testimonials */
+    .testimonials-slider {
+      max-width: 800px;
+      margin: 0 auto;
+      position: relative;
+    }
+    .testimonials {
+      display: flex;
+      overflow: hidden;
+    }
+    .testimonial {
+      min-width: 100%;
+      padding: 0 20px;
+      transition: transform 0.5s;
+      text-align: center;
+    }
+    .testimonial-content {
+      background-color: var(--card);
+      padding: 40px;
+      border-radius: 12px;
+      box-shadow: var(--shadow);
+      margin-bottom: 30px;
+      border: 1px solid var(--border);
+      position: relative;
+    }
+    .testimonial-content::before {
+      content: '\f10d';
+      font-family: 'Font Awesome 6 Free';
+      font-weight: 900;
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      color: var(--primary);
+      opacity: 0.2;
+      font-size: 50px;
+    }
+    .testimonial p {
+      font-size: 1.1rem;
+      margin-bottom: 20px;
+    }
+    .testimonial-author {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 15px;
+    }
+    .author-avatar {
+      width: 60px;
+      height: 60px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+    .author-avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .author-info h4 {
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+    .author-info p {
+      color: var(--text-light);
+      font-size: 0.9rem;
+      margin: 0;
+    }
+    .slider-controls {
+      display: flex;
+      justify-content: center;
+      gap: 15px;
+    }
+    .slider-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--text-light);
+      cursor: pointer;
+      opacity: 0.5;
+      transition: all 0.3s;
+    }
+    .slider-dot.active {
+      background-color: var(--primary);
+      opacity: 1;
+    }
+    /* FAQ section */
+    .faq-container {
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    .faq-item {
+      background-color: var(--card);
+      border-radius: 8px;
+      margin-bottom: 15px;
+      box-shadow: var(--shadow);
+      border: 1px solid var(--border);
+    }
+    .faq-header {
+      padding: 20px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+    .faq-question {
+      font-weight: 500;
+      font-size: 1.1rem;
+    }
+    .faq-toggle {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background-color: rgba(99, 102, 241, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--primary);
+      transition: transform 0.3s;
+    }
+    .faq-item.active .faq-toggle {
+      transform: rotate(45deg);
+    }
+    .faq-answer {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease-out;
+      padding: 0 20px;
+    }
+    .faq-item.active .faq-answer {
+      max-height: 300px;
+      padding: 0 20px 20px;
+    }
+    /* CTA section */
+    .cta {
+      background: linear-gradient(135deg, var(--primary), #8b5cf6);
+      color: white;
+      padding: 80px 0;
+      text-align: center;
+      border-radius: 12px;
+      margin: 100px auto;
+      max-width: 1200px;
+      position: relative;
+      overflow: hidden;
+      box-shadow: var(--shadow);
+    }
+    .cta::before {
+      content: '';
+      position: absolute;
+      top: -50px;
+      right: -50px;
+      width: 200px;
+      height: 200px;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+    }
+    .cta::after {
+      content: '';
+      position: absolute;
+      bottom: -80px;
+      left: -80px;
+      width: 300px;
+      height: 300px;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 50%;
+    }
+    .cta h2 {
+      font-size: 2.5rem;
+      margin-bottom: 20px;
+      position: relative;
+      z-index: 1;
+    }
+    .cta p {
+      font-size: 1.1rem;
+      max-width: 700px;
+      margin: 0 auto 40px;
+      opacity: 0.9;
+      position: relative;
+      z-index: 1;
+    }
+    .cta .btn {
+      position: relative;
+      z-index: 1;
+    }
+    /* Footer */
+    footer {
+      background-color: var(--card);
+      padding: 60px 0 20px;
+      border-top: 1px solid var(--border);
+    }
+    .footer-content {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 40px;
+      margin-bottom: 60px;
+    }
+    .footer-column h3 {
+      font-size: 1.2rem;
+      margin-bottom: 20px;
+      color: var(--primary);
+    }
+    .footer-links {
+      list-style: none;
+    }
+    .footer-links li {
+      margin-bottom: 10px;
+    }
+    .footer-links a {
+      text-decoration: none;
+      color: var(--text-light);
+      transition: color 0.3s;
+    }
+    .footer-links a:hover {
+      color: var(--primary);
+    }
+    .social-links {
+      display: flex;
+      gap: 15px;
+    }
+    .social-links a {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: rgba(99, 102, 241, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--primary);
+      transition: all 0.3s;
+    }
+    .social-links a:hover {
+      background-color: var(--primary);
+      color: white;
+    }
+    .footer-bottom {
+      text-align: center;
+      padding-top: 20px;
+      border-top: 1px solid var(--border);
+      color: var(--text-light);
+      font-size: 0.9rem;
+    }
+    /* AI Chatbot */
+    .chatbot-container {
+      position: fixed;
+      bottom: 30px;
+      right: 30px;
+      z-index: 999;
+    }
+    .chatbot-toggle {
+      width: 60px;
+      height: 60px;
+      background-color: var(--primary);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      transition: transform 0.3s;
+    }
+    .chatbot-toggle:hover {
+      transform: scale(1.1);
+    }
+    .chatbot-toggle i {
+      font-size: 24px;
+    }
+    .chatbot-window {
+      position: absolute;
+      bottom: 80px;
+      right: 0;
+      width: 350px;
+      height: 500px;
+      background-color: var(--card);
+      border-radius: 12px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      border: 1px solid var(--border);
+      display: none;
+      flex-direction: column;
+    }
+    .chatbot-header {
+      padding: 15px;
+      background-color: var(--primary);
+      color: white;
+      border-radius: 12px 12px 0 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .chatbot-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .chatbot-title i {
+      font-size: 20px;
+    }
+    .chatbot-close {
+      background: none;
+      border: none;
+      color: white;
+      font-size: 20px;
+      cursor: pointer;
+    }
+    .chatbot-messages {
+      flex-grow: 1;
+      padding: 15px;
+      overflow-y: auto;
+    }
+    .message {
+      margin-bottom: 15px;
+      max-width: 80%;
+      padding: 10px 15px;
+      border-radius: 18px;
+      font-size: 0.9rem;
+      line-height: 1.4;
+    }
+    .bot-message {
+      background-color: rgba(99, 102, 241, 0.1);
+      color: var(--text);
+      border-radius: 18px 18px 18px 0;
+      margin-right: auto;
+    }
+    .user-message {
+      background-color: var(--primary);
+      color: white;
+      border-radius: 18px 18px 0 18px;
+      margin-left: auto;
+    }
+    .chatbot-input {
+      display: flex;
+      padding: 10px;
+      border-top: 1px solid var(--border);
+    }
+    .chatbot-input input {
+      flex-grow: 1;
+      padding: 10px 15px;
+      border: 1px solid var(--border);
+      border-radius: 20px;
+      outline: none;
+      background-color: var(--background);
+      color: var(--text);
+    }
+    .chatbot-input button {
+      background-color: var(--primary);
+      color: white;
+      border: none;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+    .chatbot-active .chatbot-toggle {
+      transform: scale(1.1);
+    }
+    .chatbot-active .chatbot-window {
+      display: flex;
+    }
+    /* Mobile responsiveness */
+    @media (max-width: 768px) {
+      .nav-container {
+        position: relative;
+      }
+      nav {
+        position: fixed;
+        top: 80px;
+        left: 0;
+        width: 100%;
+        background-color: var(--card);
+        box-shadow: var(--shadow);
+        padding: 20px;
+        transform: translateY(-150%);
+        transition: transform 0.3s;
+        z-index: 99;
+      }
+      nav.active {
+        transform: translateY(0);
+      }
+      nav ul {
+        flex-direction: column;
+        gap: 15px;
+      }
+      .mobile-menu-btn {
+        display: block;
+      }
+      .hero h1 {
+        font-size: 2.5rem;
+      }
+      .hero-buttons {
+        flex-direction: column;
+        gap: 10px;
+      }
+      .section {
+        padding: 60px 0;
+      }
+      .section-title h2 {
+        font-size: 2rem;
+      }
+      .steps::before {
+        display: none;
+      }
+      .step {
+        flex-direction: column;
+        gap: 15px;
+      }
+      .step-number {
+        width: 50px;
+        height: 50px;
+      }
+      .cta h2 {
+        font-size: 2rem;
+      }
+      .chatbot-window {
+        width: 300px;
+        height: 400px;
+        bottom: 70px;
+        right: 10px;
+      }
+    }
+    /* Animations */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate {
+      animation: fadeIn 0.5s ease-out forwards;
+    }
+    .delay-1 {
+      animation-delay: 0.1s;
+    }
+    .delay-2 {
+      animation-delay: 0.2s;
+    }
+    .delay-3 {
+      animation-delay: 0.3s;
+    }
+    .delay-4 {
+      animation-delay: 0.4s;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="container nav-container">
+      <a href="#" class="logo">
+        <i class="fas fa-brain logo-icon"></i>
+        <span>NeuraLink</span>
+      </a>
+      <nav id="main-nav">
+        <ul>
+          <li><a href="#features">Features</a></li>
+          <li><a href="#how-it-works">How It Works</a></li>
+          <li><a href="#pricing">Pricing</a></li>
+          <li><a href="#testimonials">Testimonials</a></li>
+          <li><a href="#faq">FAQ</a></li>
+        </ul>
+      </nav>
+      <div class="nav-actions">
+        <button class="theme-toggle" id="theme-toggle">
+                    <i class="fas fa-moon"></i>
+                </button>
+        <button class="btn btn-outline">Login</button>
+        <button class="btn btn-primary">Get Started</button>
+        <button class="mobile-menu-btn" id="mobile-menu-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+      </div>
+    </div>
+  </header>
+  <section class="hero">
+    <div class="floating-shapes">
+      <div class="shape"></div>
+      <div class="shape"></div>
+      <div class="shape"></div>
+    </div>
+    <div class="container">
+      <h1 class="animate">Advanced AI Solutions for Your Business</h1>
+      <p class="animate delay-1">Unlock the power of artificial intelligence with our cutting-edge technology. Automate
+        tasks, gain insights, and transform your business.</p>
+      <div class="hero-buttons animate delay-2">
+        <button class="btn btn-primary">Start Free Trial</button>
+        <button class="btn btn-outline">Learn More</button>
+      </div>
+      <div class="hero-image animate delay-3">
+        <img src="https://images.unsplash.com/photo-1677442135133-446b348c245c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Dashboard">
+      </div>
+    </div>
+  </section>
+  <section class="section" id="features">
+    <div class="container">
+      <div class="section-title">
+        <h2 class="animate">Powerful AI Features</h2>
+        <p class="animate delay-1">Our platform offers a comprehensive suite of AI tools designed to help you work
+          smarter, not harder.</p>
+      </div>
+      <div class="features-grid">
+        <div class="feature-card animate">
+          <div class="feature-icon">
+            <i class="fas fa-robot"></i>
+          </div>
+          <h3>Smart Automation</h3>
+          <p>Automate repetitive tasks with intelligent workflows that learn and adapt to your business processes.</p>
+        </div>
+        <div class="feature-card animate delay-1">
+          <div class="feature-icon">
+            <i class="fas fa-chart-line"></i>
+          </div>
+          <h3>Predictive Analytics</h3>
+          <p>Get actionable insights with our advanced predictive models that forecast trends and opportunities.</p>
+        </div>
+        <div class="feature-card animate delay-2">
+          <div class="feature-icon">
+            <i class="fas fa-comments"></i>
+          </div>
+          <h3>Natural Language Processing</h3>
+          <p>Understand and process human language to extract meaning, sentiment, and intent from text data.</p>
+        </div>
+        <div class="feature-card animate delay-3">
+          <div class="feature-icon">
+            <i class="fas fa-eye"></i>
+          </div>
+          <h3>Computer Vision</h3>
+          <p>Analyze and interpret visual data to recognize patterns, objects, and faces in images and videos.</p>
+        </div>
+        <div class="feature-card animate delay-1">
+          <div class="feature-icon">
+            <i class="fas fa-cogs"></i>
+          </div>
+          <h3>Custom AI Models</h3>
+          <p>Build and train custom AI models tailored specifically to your business needs and data.</p>
+        </div>
+        <div class="feature-card animate delay-2">
+          <div class="feature-icon">
+            <i class="fas fa-lock"></i>
+          </div>
+          <h3>Enterprise Security</h3>
+          <p>Bank-grade security protocols to ensure your data remains private and protected at all times.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="section" id="how-it-works">
+    <div class="container">
+      <div class="section-title">
+        <h2 class="animate">How It Works</h2>
+        <p class="animate delay-1">Getting started with our AI platform is quick and easy. Follow these simple steps.
+        </p>
+      </div>
+      <div class="steps">
+        <div class="step animate">
+          <div class="step-number">1</div>
+          <div class="step-content">
+            <h3>Create Your Account</h3>
+            <p>Sign up for a free account in just a few minutes. No credit card required to get started.</p>
+          </div>
+        </div>
+        <div class="step animate delay-1">
+          <div class="step-number">2</div>
+          <div class="step-content">
+            <h3>Connect Your Data</h3>
+            <p>Integrate with your existing systems or upload your data to start training your AI models.</p>
+          </div>
+        </div>
+        <div class="step animate delay-2">
+          <div class="step-number">3</div>
+          <div class="step-content">
+            <h3>Train Your Models</h3>
+            <p>Use our intuitive interface to configure and train your AI models with your specific datasets.</p>
+          </div>
+        </div>
+        <div class="step animate delay-3">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <h3>Deploy & Monitor</h3>
+            <p>Deploy your AI solutions and monitor performance with our comprehensive analytics dashboard.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="section" id="pricing">
+    <div class="container">
+      <div class="section-title">
+        <h2 class="animate">Simple, Transparent Pricing</h2>
+        <p class="animate delay-1">Choose the plan that fits your needs. No hidden fees, cancel anytime.</p>
+      </div>
+      <div class="pricing-grid">
+        <div class="pricing-card animate">
+          <h3>Starter</h3>
+          <div class="price">$29<span>/month</span></div>
+          <ul class="pricing-features">
+            <li>Up to 10,000 API calls</li>
+            <li>3 AI models</li>
+            <li>Basic analytics</li>
+            <li>Email support</li>
+            <li>Community forum</li>
+          </ul>
+          <button class="btn btn-outline">Get Started</button>
+        </div>
+        <div class="pricing-card animate delay-1 popular">
+          <h3>Professional</h3>
+          <div class="price">$99<span>/month</span></div>
+          <ul class="pricing-features">
+            <li>Up to 100,000 API calls</li>
+            <li>10 AI models</li>
+            <li>Advanced analytics</li>
+            <li>Priority support</li>
+            <li>Custom workflows</li>
+          </ul>
+          <button class="btn btn-primary">Get Started</button>
+        </div>
+        <div class="pricing-card animate delay-2">
+          <h3>Enterprise</h3>
+          <div class="price">Custom</div>
+          <ul class="pricing-features">
+            <li>Unlimited API calls</li>
+            <li>Unlimited AI models</li>
+            <li>Premium analytics</li>
+            <li>24/7 dedicated support</li>
+            <li>On-premise deployment</li>
+          </ul>
+          <button class="btn btn-outline">Contact Sales</button>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="section" id="testimonials">
+    <div class="container">
+      <div class="section-title">
+        <h2 class="animate">Trusted by Businesses Worldwide</h2>
+        <p class="animate delay-1">Hear from our satisfied customers who have transformed their operations with our AI
+          solutions.</p>
+      </div>
+      <div class="testimonials-slider">
+        <div class="testimonials" id="testimonials">
+          <div class="testimonial">
+            <div class="testimonial-content">
+              <p>"NeuraLink's AI platform has revolutionized our customer service operations. We've seen a 40% reduction
+                in response times and a significant improvement in customer satisfaction scores."</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah Johnson">
+                </div>
+                <div class="author-info">
+                  <h4>Sarah Johnson</h4>
+                  <p>CEO, TechSolutions Inc.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial">
+            <div class="testimonial-content">
+              <p>"The predictive analytics feature alone has paid for itself ten times over. We've been able to
+                anticipate market trends and adjust our inventory accordingly, saving us thousands in excess stock."</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
+                </div>
+                <div class="author-info">
+                  <h4>Michael Chen</h4>
+                  <p>Operations Director, RetailCorp</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="testimonial">
+            <div class="testimonial-content">
+              <p>"As a healthcare provider, we needed a secure and compliant AI solution. NeuraLink delivered exactly
+                that, helping us analyze patient data while maintaining the highest privacy standards."</p>
+              <div class="testimonial-author">
+                <div class="author-avatar">
+                  <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dr. Emma Rodriguez">
+                </div>
+                <div class="author-info">
+                  <h4>Dr. Emma Rodriguez</h4>
+                  <p>Medical Director, HealthFirst</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="slider-controls">
+          <div class="slider-dot active" data-index="0"></div>
+          <div class="slider-dot" data-index="1"></div>
+          <div class="slider-dot" data-index="2"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="section" id="faq">
+    <div class="container">
+      <div class="section-title">
+        <h2 class="animate">Frequently Asked Questions</h2>
+        <p class="animate delay-1">Find answers to common questions about our platform and services.</p>
+      </div>
+      <div class="faq-container">
+        <div class="faq-item animate">
+          <div class="faq-header">
+            <h3 class="faq-question">What technical skills do I need to use NeuraLink?</h3>
+            <div class="faq-toggle">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
+          <div class="faq-answer">
+            <p>NeuraLink is designed to be accessible to users of all technical levels. Our no-code interface allows you
+              to build and deploy AI models without any programming knowledge. For more advanced customization, we
+              provide comprehensive documentation and APIs for developers.</p>
+          </div>
+        </div>
+        <div class="faq-item animate delay-1">
+          <div class="faq-header">
+            <h3 class="faq-question">How is my data protected?</h3>
+            <div class="faq-toggle">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
+          <div class="faq-answer">
+            <p>We take data security extremely seriously. All data is encrypted both in transit and at rest using
+              industry-standard AES-256 encryption. We comply with GDPR, CCPA, and other major privacy regulations. For
+              enterprise customers, we also offer on-premise deployment options.</p>
+          </div>
+        </div>
+        <div class="faq-item animate delay-2">
+          <div class="faq-header">
+            <h3 class="faq-question">Can I try before I buy?</h3>
+            <div class="faq-toggle">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
+          <div class="faq-answer">
+            <p>Absolutely! We offer a 14-day free trial with full access to all features (except enterprise-only
+              capabilities). No credit card is required to start your trial. You can upgrade to a paid plan at any time
+              during or after your trial period.</p>
+          </div>
+        </div>
+        <div class="faq-item animate delay-3">
+          <div class="faq-header">
+            <h3 class="faq-question">What kind of support do you offer?</h3>
+            <div class="faq-toggle">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
+          <div class="faq-answer">
+            <p>All plans include access to our extensive knowledge base and community forums. Starter plans include
+              email support with a 24-hour response time. Professional and Enterprise plans include priority support via
+              email, chat, and phone with faster response times. Enterprise customers also receive a dedicated customer
+              success manager.</p>
+          </div>
+        </div>
+        <div class="faq-item animate delay-1">
+          <div class="faq-header">
+            <h3 class="faq-question">Can I integrate NeuraLink with my existing systems?</h3>
+            <div class="faq-toggle">
+              <i class="fas fa-plus"></i>
+            </div>
+          </div>
+          <div class="faq-answer">
+            <p>Yes! We provide pre-built integrations with popular business tools like Salesforce, Shopify, Google
+              Analytics, and more. Our robust API also allows you to connect with custom systems and internal databases.
+              Our support team can assist with any integration questions.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <div class="container">
+    <div class="cta">
+      <h2 class="animate">Ready to Transform Your Business with AI?</h2>
+      <p class="animate delay-1">Join thousands of companies already benefiting from our advanced artificial
+        intelligence platform.</p>
+      <button class="btn btn-primary animate delay-2">Start Your Free Trial Today</button>
+    </div>
+  </div>
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-column">
+          <a href="#" class="logo">
+            <i class="fas fa-brain logo-icon"></i>
+            <span>NeuraLink</span>
+          </a>
+          <p>Powerful AI solutions to help your business grow smarter. Harness the potential of artificial intelligence
+            today.</p>
+          <div class="social-links">
+            <a href="#"><i class="fab fa-twitter"></i></a>
+            <a href="#"><i class="fab fa-linkedin"></i></a>
+            <a href="#"><i class="fab fa-facebook"></i></a>
+            <a href="#"><i class="fab fa-github"></i></a>
+          </div>
+        </div>
+        <div class="footer-column">
+          <h3>Product</h3>
+          <ul class="footer-links">
+            <li><a href="#">Features</a></li>
+            <li><a href="#">Pricing</a></li>
+            <li><a href="#">Integrations</a></li>
+            <li><a href="#">Roadmap</a></li>
+            <li><a href="#">Changelog</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h3>Resources</h3>
+          <ul class="footer-links">
+            <li><a href="#">Documentation</a></li>
+            <li><a href="#">Guides</a></li>
+            <li><a href="#">Blog</a></li>
+            <li><a href="#">Community</a></li>
+            <li><a href="#">Webinars</a></li>
+          </ul>
+        </div>
+        <div class="footer-column">
+          <h3>Company</h3>
+          <ul class="footer-links">
+            <li><a href="#">About Us</a></li>
+            <li><a href="#">Careers</a></li>
+            <li><a href="#">Contact</a></li>
+            <li><a href="#">Press</a></li>
+            <li><a href="#">Legal</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2023 NeuraLink AI. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+  <!-- AI Chatbot -->
+  <div class="chatbot-container" id="chatbot-container">
+    <div class="chatbot-toggle" id="chatbot-toggle">
+      <i class="fas fa-robot"></i>
+    </div>
+    <div class="chatbot-window" id="chatbot-window">
+      <div class="chatbot-header">
+        <div class="chatbot-title">
+          <i class="fas fa-robot"></i>
+          <span>NeuraLink AI Assistant</span>
+        </div>
+        <button class="chatbot-close" id="chatbot-close">
+                    <i class="fas fa-times"></i>
+                </button>
+      </div>
+      <div class="chatbot-messages" id="chatbot-messages">
+        <div class="message bot-message">
+          Hello! I'm your AI assistant. How can I help you today?
+        </div>
+      </div>
+      <div class="chatbot-input">
+        <input type="text" id="chatbot-input" placeholder="Type your message...">
+        <button id="chatbot-send">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Dark/Light mode toggle
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeIcon = themeToggle.querySelector('i');
+        // Check for saved user preference or use system preference
+        const userTheme = localStorage.getItem('theme');
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Initial theme setup
+        const themeCheck = () => {
+            if (userTheme === 'dark' || (!userTheme && systemTheme)) {
+                document.documentElement.classList.add('dark-mode');
+                themeIcon.classList.replace('fa-moon', 'fa-sun');
+            } else {
+                themeIcon.classList.replace('fa-sun', 'fa-moon');
+            }
+        };
+        // Manual theme switch
+        const themeSwitch = () => {
+            if (document.documentElement.classList.contains('dark-mode')) {
+                document.documentElement.classList.remove('dark-mode');
+                localStorage.setItem('theme', 'light');
+                themeIcon.classList.replace('fa-sun', 'fa-moon');
+            } else {
+                document.documentElement.classList.add('dark-mode');
+                localStorage.setItem('theme', 'dark');
+                themeIcon.classList.replace('fa-moon', 'fa-sun');
+            }
+        };
+        // Apply theme on page load
+        themeCheck();
+        // Theme toggle event
+        themeToggle.addEventListener('click', themeSwitch);
+        // Mobile menu toggle
+        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
+        const mainNav = document.getElementById('main-nav');
+        mobileMenuBtn.addEventListener('click', () => {
+            mainNav.classList.toggle('active');
+            const icon = mobileMenuBtn.querySelector('i');
+            if (mainNav.classList.contains('active')) {
+                icon.classList.replace('fa-bars', 'fa-times');
+            } else {
+                icon.classList.replace('fa-times', 'fa-bars');
+            }
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    window.scrollTo({
+                        top: target.offsetTop - 100,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    if (mainNav.classList.contains('active')) {
+                        mainNav.classList.remove('active');
+                        const icon = mobileMenuBtn.querySelector('i');
+                        icon.classList.replace('fa-times', 'fa-bars');
+                    }
+                }
+            });
+        });
+        // Testimonial slider
+        const testimonials = document.getElementById('testimonials');
+        const dots = document.querySelectorAll('.slider-dot');
+        let currentSlide = 0;
+        const showSlide = (index) => {
+            testimonials.style.transform = `translateX(-${index * 100}%)`;
+            dots.forEach((dot, i) => {
+                dot.classList.toggle('active', i === index);
+            });
+            currentSlide = index;
+        };
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', () => showSlide(index));
+        });
+        // Auto-advance testimonials
+        setInterval(() => {
+            currentSlide = (currentSlide + 1) % dots.length;
+            showSlide(currentSlide);
+        }, 5000);
+        // FAQ accordion
+        const faqItems = document.querySelectorAll('.faq-item');
+        faqItems.forEach(item => {
+            const header = item.querySelector('.faq-header');
+            header.addEventListener('click', () => {
+                // Close other open items
+                faqItems.forEach(otherItem => {
+                    if (otherItem !== item && otherItem.classList.contains('active')) {
+                        otherItem.classList.remove('active');
+                    }
+                });
+                // Toggle current item
+                item.classList.toggle('active');
+            });
+        });
+        // AI Chatbot functionality
+        const chatbotContainer = document.getElementById('chatbot-container');
+        const chatbotToggle = document.getElementById('chatbot-toggle');
+        const chatbotWindow = document.getElementById('chatbot-window');
+        const chatbotClose = document.getElementById('chatbot-close');
+        const chatbotMessages = document.getElementById('chatbot-messages');
+        const chatbotInput = document.getElementById('chatbot-input');
+        const chatbotSend = document.getElementById('chatbot-send');
+        // Toggle chatbot window
+        chatbotToggle.addEventListener('click', () => {
+            chatbotContainer.classList.toggle('chatbot-active');
+            chatbotInput.focus();
+        });
+        // Close chatbot window
+        chatbotClose.addEventListener('click', () => {
+            chatbotContainer.classList.remove('chatbot-active');
+        });
+        // Send message function
+        const sendMessage = () => {
+            const message = chatbotInput.value.trim();
+            if (message) {
+                // Add user message
+                addMessage(message, 'user');
+                chatbotInput.value = '';
+                // Simulate bot typing indicator
+                const typingIndicator = document.createElement('div');
+                typingIndicator.className = 'message bot-message typing';
+                typingIndicator.innerHTML = '<span class="typing-dot"></span><span class="typing-dot"></span><span class="typing-dot"></span>';
+                chatbotMessages.appendChild(typingIndicator);
+                scrollToBottom();
+                // Simulate bot response after delay
+                setTimeout(() => {
+                    // Remove typing indicator
+                    const typing = document.querySelector('.typing');
+                    if (typing) typing.remove();
+                    // Generate response
+                    const responses = [
+                        "I'm an AI assistant and I'm here to help you with any questions about our services.",
+                        "That's a great question! Let me find that information for you.",
+                        "Our platform is designed to be intuitive and easy to use for everyone.",
+                        "For more specific questions, you might want to check our documentation.",
+                        "I can help you get started with setting up your first AI model.",
+                        "Our customer support team is available 24/7 if you need further assistance."
+                    ];
+                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
+                    addMessage(randomResponse, 'bot');
+                    // If asking about pricing
+                    if (message.toLowerCase().includes('price') || message.toLowerCase().includes('cost')) {
+                        setTimeout(() => {
+                            addMessage('We offer several pricing plans starting from $29/month. You can check all options on our Pricing page.', 'bot');
+                        }, 1000);
+                    }
+                }, 1500 + Math.random() * 2000);
+            }
+        };
+        // Add message helper function
+        const addMessage = (text, sender) => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${sender}-message`;
+            messageDiv.textContent = text;
+            chatbotMessages.appendChild(messageDiv);
+            scrollToBottom();
+        };
+        // Scroll to bottom of chat
+        const scrollToBottom = () => {
+            chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
+        };
+        // Send message on button click
+        chatbotSend.addEventListener('click', sendMessage);
+        // Send message on Enter key
+        chatbotInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+        // Scroll animations
+        const animateOnScroll = () => {
+            const elements = document.querySelectorAll('.animate');
+            elements.forEach(element => {
+                const elementTop = element.getBoundingClientRect().top;
+                const windowHeight = window.innerHeight;
+                if (elementTop < windowHeight - 100) {
+                    element.style.opacity = '1';
+                    element.style.transform = 'translateY(0)';
+                }
+            });
+        };
+        // Add scroll event listener
+        window.addEventListener('scroll', animateOnScroll);
+        // Trigger once on page load
+        animateOnScroll();
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>