Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CyberOrigin | AI-Powered Future</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Global Styles */ | |
| :root { | |
| --primary: #6d28d9; | |
| --secondary: #8b5cf6; | |
| --accent: #f97316; | |
| --dark: #0f172a; | |
| --darker: #020617; | |
| --light: #f8fafc; | |
| --gray: #94a3b8; | |
| --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| --shadow: 0 10px 30px rgba(109, 40, 217, 0.3); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', system-ui, -apple-system, sans-serif; | |
| color: var(--light); | |
| background-color: var(--dark); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| font-size: 16px; | |
| } | |
| .btn-primary { | |
| background: var(--gradient); | |
| color: white; | |
| box-shadow: var(--shadow); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 35px rgba(109, 40, 217, 0.4); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--light); | |
| border: 2px solid var(--secondary); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--secondary); | |
| color: white; | |
| border-color: transparent; | |
| } | |
| /* Navigation */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| padding: 20px 0; | |
| z-index: 1000; | |
| transition: all 0.3s ease; | |
| background-color: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| header.scrolled { | |
| padding: 15px 0; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: var(--light); | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| color: var(--secondary); | |
| font-size: 32px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .nav-links li { | |
| margin-left: 30px; | |
| position: relative; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| color: var(--gray); | |
| } | |
| .nav-links a:hover { | |
| color: var(--light); | |
| } | |
| .nav-links a:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| background: var(--secondary); | |
| bottom: -5px; | |
| left: 0; | |
| transition: width 0.3s; | |
| } | |
| .nav-links a:hover:after { | |
| width: 100%; | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| font-size: 24px; | |
| color: var(--light); | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| padding-top: 80px; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(rgba(2, 6, 23, 0.8), rgba(15, 23, 42, 1)), url('https://images.unsplash.com/photo-1677442135203-9aab5d1da531?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| z-index: 2; | |
| } | |
| .hero h1 { | |
| font-size: 60px; | |
| font-weight: 800; | |
| margin-bottom: 20px; | |
| line-height: 1.2; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .hero p { | |
| font-size: 20px; | |
| margin-bottom: 30px; | |
| max-width: 600px; | |
| color: var(--gray); | |
| animation: fadeInUp 1s ease 0.2s both; | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 20px; | |
| animation: fadeInUp 1s ease 0.4s both; | |
| } | |
| .hero-image { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: relative; | |
| animation: fadeIn 1s ease 0.6s both; | |
| } | |
| .hero-img { | |
| width: 100%; | |
| max-width: 600px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow); | |
| transform: perspective(1000px) rotateY(-5deg); | |
| transition: transform 0.5s ease; | |
| border: 2px solid rgba(139, 92, 246, 0.3); | |
| } | |
| .hero-img:hover { | |
| transform: perspective(1000px) rotateY(0deg); | |
| border-color: var(--secondary); | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 100px 0; | |
| background: var(--darker); | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| position: relative; | |
| } | |
| .section-title h2 { | |
| font-size: 40px; | |
| font-weight: 800; | |
| color: var(--light); | |
| margin-bottom: 15px; | |
| } | |
| .section-title p { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| color: var(--gray); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background: rgba(30, 41, 59, 0.5); | |
| border-radius: 20px; | |
| padding: 40px 30px; | |
| box-shadow: var(--shadow); | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| border: 1px solid rgba(139, 92, 246, 0.1); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| background: rgba(30, 41, 59, 0.7); | |
| border-color: var(--secondary); | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| background: var(--gradient); | |
| border-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 30px; | |
| color: white; | |
| margin-bottom: 25px; | |
| box-shadow: 0 10px 20px rgba(109, 40, 217, 0.3); | |
| } | |
| .feature-card h3 { | |
| font-size: 22px; | |
| margin-bottom: 15px; | |
| color: var(--light); | |
| } | |
| .feature-card p { | |
| color: var(--gray); | |
| } | |
| /* Stats Section */ | |
| .stats { | |
| padding: 80px 0; | |
| background: var(--gradient); | |
| color: white; | |
| position: relative; | |
| } | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 30px; | |
| } | |
| .stat-item { | |
| text-align: center; | |
| position: relative; | |
| padding: 30px 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| backdrop-filter: blur(5px); | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .stat-item:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .stat-item i { | |
| font-size: 40px; | |
| margin-bottom: 20px; | |
| color: white; | |
| } | |
| .stat-number { | |
| font-size: 50px; | |
| font-weight: 700; | |
| margin-bottom: 10px; | |
| transition: all 0.5s ease; | |
| } | |
| .stat-text { | |
| font-size: 18px; | |
| opacity: 0.9; | |
| } | |
| /* Services Section */ | |
| .services { | |
| padding: 100px 0; | |
| background: var(--dark); | |
| } | |
| .services-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .service-card { | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); | |
| transition: all 0.5s ease; | |
| background: rgba(30, 41, 59, 0.5); | |
| border: 1px solid rgba(139, 92, 246, 0.1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 30px 60px rgba(109, 40, 217, 0.3); | |
| border-color: var(--secondary); | |
| background: rgba(30, 41, 59, 0.7); | |
| } | |
| .service-img { | |
| height: 200px; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .service-img img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .service-card:hover .service-img img { | |
| transform: scale(1.1); | |
| } | |
| .service-content { | |
| padding: 30px; | |
| } | |
| .service-content h3 { | |
| font-size: 22px; | |
| margin-bottom: 15px; | |
| color: var(--light); | |
| } | |
| .service-content p { | |
| color: var(--gray); | |
| margin-bottom: 20px; | |
| } | |
| .service-link { | |
| display: inline-flex; | |
| align-items: center; | |
| color: var(--secondary); | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .service-link i { | |
| margin-left: 8px; | |
| transition: transform 0.3s ease; | |
| } | |
| .service-link:hover { | |
| color: var(--light); | |
| } | |
| .service-link:hover i { | |
| transform: translateX(5px); | |
| } | |
| /* Contact Section */ | |
| .contact { | |
| padding: 100px 0; | |
| background: linear-gradient(rgba(2, 6, 23, 0.9), rgba(2, 6, 23, 0.95)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80') no-repeat center center/cover; | |
| } | |
| .contact-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 50px; | |
| } | |
| .contact-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .contact-item { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .contact-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient); | |
| border-radius: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 24px; | |
| flex-shrink: 0; | |
| } | |
| .contact-details h3 { | |
| font-size: 22px; | |
| margin-bottom: 10px; | |
| color: var(--light); | |
| } | |
| .contact-details p { | |
| color: var(--gray); | |
| } | |
| .contact-form { | |
| background: rgba(30, 41, 59, 0.7); | |
| padding: 40px; | |
| border-radius: 20px; | |
| box-shadow: var(--shadow); | |
| border: 1px solid rgba(139, 92, 246, 0.2); | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 15px 20px; | |
| border: 1px solid rgba(139, 92, 246, 0.2); | |
| border-radius: 10px; | |
| font-size: 16px; | |
| transition: all 0.3s ease; | |
| background: rgba(15, 23, 42, 0.5); | |
| color: var(--light); | |
| } | |
| .form-control::placeholder { | |
| color: var(--gray); | |
| } | |
| .form-control:focus { | |
| border-color: var(--secondary); | |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); | |
| outline: none; | |
| background: rgba(15, 23, 42, 0.7); | |
| } | |
| textarea.form-control { | |
| min-height: 150px; | |
| resize: vertical; | |
| } | |
| .submit-btn { | |
| width: 100%; | |
| padding: 15px; | |
| border-radius: 10px; | |
| font-weight: 600; | |
| background: var(--gradient); | |
| color: white; | |
| border: none; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .submit-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--darker); | |
| color: white; | |
| padding: 80px 0 30px; | |
| position: relative; | |
| } | |
| .footer-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 60px; | |
| } | |
| .footer-col h3 { | |
| font-size: 20px; | |
| margin-bottom: 25px; | |
| position: relative; | |
| color: var(--light); | |
| } | |
| .footer-col h3:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: -10px; | |
| width: 50px; | |
| height: 2px; | |
| background: var(--secondary); | |
| } | |
| .footer-col p { | |
| opacity: 0.8; | |
| margin-bottom: 20px; | |
| color: var(--gray); | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 15px; | |
| } | |
| .footer-links a { | |
| opacity: 0.8; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| padding-left: 20px; | |
| color: var(--gray); | |
| } | |
| .footer-links a:hover { | |
| opacity: 1; | |
| color: var(--light); | |
| padding-left: 25px; | |
| } | |
| .footer-links a:before { | |
| content: '→'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| color: var(--secondary); | |
| } | |
| .footer-links a:hover:before { | |
| opacity: 1; | |
| left: -5px; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-link { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| color: var(--gray); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .social-link:hover { | |
| background: var(--secondary); | |
| color: white; | |
| transform: translateY(-5px); | |
| border-color: transparent; | |
| } | |
| .subscribe-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 30px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| opacity: 0.7; | |
| color: var(--gray); | |
| } | |
| /* Animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .hero h1 { | |
| font-size: 48px; | |
| } | |
| .hero p { | |
| font-size: 18px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .nav-links { | |
| position: fixed; | |
| top: 80px; | |
| right: -100%; | |
| width: 80%; | |
| height: calc(100vh - 80px); | |
| background: var(--darker); | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| padding-top: 50px; | |
| transition: all 0.5s ease; | |
| box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .nav-links.active { | |
| right: 0; | |
| } | |
| .nav-links li { | |
| margin: 20px 0; | |
| } | |
| .hero { | |
| flex-direction: column; | |
| text-align: center; | |
| padding-top: 120px; | |
| height: auto; | |
| } | |
| .hero-btns { | |
| justify-content: center; | |
| } | |
| .hero-image { | |
| margin-top: 50px; | |
| } | |
| .hero h1 { | |
| font-size: 36px; | |
| } | |
| } | |
| @media (max-width: 576px) { | |
| .btn { | |
| padding: 10px 20px; | |
| font-size: 14px; | |
| } | |
| .hero-btns { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .section-title h2 { | |
| font-size: 32px; | |
| } | |
| .feature-card, .service-card { | |
| padding: 30px 20px; | |
| } | |
| .contact-form { | |
| padding: 30px 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <header id="header"> | |
| <div class="container"> | |
| <nav> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-robot"></i> | |
| <span>CyberOrigin</span> | |
| </a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <button class="mobile-menu-btn" id="mobileMenuBtn"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>AI-Powered Digital Transformation</h1> | |
| <p>CyberOrigin leverages cutting-edge AI technology to provide intelligent digital transformation solutions that give businesses a competitive edge in the digital economy.</p> | |
| <div class="hero-btns"> | |
| <a href="#contact" class="btn btn-primary">Free Consultation</a> | |
| <a href="#features" class="btn btn-secondary">Explore Features</a> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" alt="AI Technology" class="hero-img"> | |
| <div class="particles" id="particles-js"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features" id="features"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Our Core Advantages</h2> | |
| <p>CyberOrigin combines state-of-the-art AI technologies to deliver comprehensive digital solutions</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3>Intelligent Decision System</h3> | |
| <p>Deep learning-powered predictive analytics engine that accelerates decision-making by up to 70%.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3>Real-time Data Analytics</h3> | |
| <p>Millisecond-level data processing capable of analyzing millions of data points simultaneously.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Advanced Security</h3> | |
| <p>Multi-layered security with AI-driven anomaly detection to protect against cyber threats.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <h3>Process Automation</h3> | |
| <p>Automate repetitive workflows to reduce manual intervention, increasing efficiency by 40%+.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3>Cloud-Native Architecture</h3> | |
| <p>Elastic cloud infrastructure supporting hybrid deployments for evolving business needs.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3>Custom Solutions</h3> | |
| <p>Tailored AI solutions that integrate seamlessly with existing systems to enhance UX.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="stats"> | |
| <div class="container"> | |
| <div class="stats-container"> | |
| <div class="stat-item"> | |
| <i class="fas fa-user-plus"></i> | |
| <div class="stat-number" data-count="150">0</div> | |
| <div class="stat-text">Enterprise Clients</div> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fas fa-project-diagram"></i> | |
| <div class="stat-number" data-count="97">0</div> | |
| <div class="stat-text">% Customer Satisfaction</div> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fas fa-lightbulb"></i> | |
| <div class="stat-number" data-count="50">0</div> | |
| <div class="stat-text">+ Patents</div> | |
| </div> | |
| <div class="stat-item"> | |
| <i class="fas fa-globe-americas"></i> | |
| <div class="stat-number" data-count="12">0</div> | |
| <div class="stat-text">Countries</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Our Professional Services</h2> | |
| <p>End-to-end AI solutions from consultation to implementation</p> | |
| </div> | |
| <div class="services-container"> | |
| <div class="service-card"> | |
| <div class="service-img"> | |
| <img src="https://images.unsplash.com/photo-1581094794324-aa92be4df258?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="AI Consulting"> | |
| </div> | |
| <div class="service-content"> | |
| <h3>AI Strategy Consulting</h3> | |
| <p>Custom AI transformation roadmap, system architecture assessment, and phased implementation planning for maximum ROI.</p> | |
| <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-img"> | |
| <img src="https://images.unsplash.com/photo-1523961131990-5ea7c61b2107?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Data Analytics"> | |
| </div> | |
| <div class="service-content"> | |
| <h3>Intelligent Analytics</h3> | |
| <p>Enterprise data analytics platform integrating predictive analytics and BI tools for real-time insights.</p> | |
| <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| <div class="service-card"> | |
| <div class="service-img"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1026&q=80" alt="AI Development"> | |
| </div> | |
| <div class="service-content"> | |
| <h3>AI Application Development</h3> | |
| <p>Custom AI apps including NLP, computer vision, and recommendation systems for specific business needs.</p> | |
| <a href="#" class="service-link">Learn more <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Get In Touch</h2> | |
| <p>Our team of experts is ready to assist with any questions or requirements</p> | |
| </div> | |
| <div class="contact-container"> | |
| <div class="contact-info"> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Location</h3> | |
| <p>123 Tech Boulevard<br>San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Email</h3> | |
| <p>info@cyberorigin.ai<br>support@cyberorigin.ai</p> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <div class="contact-icon"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div class="contact-details"> | |
| <h3>Phone</h3> | |
| <p>+1 (415) 555-0199<br>Monday - Friday, 9AM - 6PM PST</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" placeholder="Your Name" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="email" class="form-control" placeholder="Email Address" required> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" placeholder="Company Name"> | |
| </div> | |
| <div class="form-group"> | |
| <textarea class="form-control" placeholder="Your Message or Requirements" required></textarea> | |
| </div> | |
| <button type="submit" class="submit-btn">Send Message <i class="fas fa-paper-plane"></i></button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-container"> | |
| <div class="footer-col"> | |
| <h3>About Us</h3> | |
| <p>CyberOrigin is a technology company specializing in AI and digital transformation, providing cutting-edge intelligent solutions for enterprises.</p> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#features">Features</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Solutions</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Financial Services</a></li> | |
| <li><a href="#">Healthcare</a></li> | |
| <li><a href="#">Retail & E-commerce</a></li> | |
| <li><a href="#">Manufacturing</a></li> | |
| <li><a href="#">Smart Cities</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Newsletter</h3> | |
| <p>Subscribe to our newsletter for product updates and industry insights.</p> | |
| <form class="subscribe-form"> | |
| <div class="form-group"> | |
| <input type="email" class="form-control" placeholder="Your Email Address"> | |
| </div> | |
| <button type="submit" class="submit-btn">Subscribe</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>© 2023 CyberOrigin. All Rights Reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Header scroll effect | |
| window.addEventListener('scroll', function() { | |
| const header = document.getElementById('header'); | |
| if (window.scrollY > 100) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); | |
| const navLinks = document.getElementById('navLinks'); | |
| mobileMenuBtn.addEventListener('click', function() { | |
| navLinks.classList.toggle('active'); | |
| mobileMenuBtn.innerHTML = navLinks.classList.contains('active') ? | |
| '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; | |
| }); | |
| // Smooth scrolling | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| if (navLinks.classList.contains('active')) { | |
| navLinks.classList.remove('active'); | |
| mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>'; | |
| } | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animate stats numbers | |
| function animateStats() { | |
| const statItems = document.querySelectorAll('.stat-item'); | |
| statItems.forEach(item => { | |
| const statNumber = item.querySelector('.stat-number'); | |
| const target = parseInt(statNumber.getAttribute('data-count')); | |
| let count = 0; | |
| const increment = target / 50; | |
| const timer = setInterval(() => { | |
| count += increment; | |
| if (count >= target) { | |
| statNumber.textContent = target + (item.querySelector('.stat-text').textContent.includes('%') ? '%' : '+'); | |
| clearInterval(timer); | |
| } else { | |
| statNumber.textContent = Math.floor(count); | |
| } | |
| }, 20); | |
| }); | |
| } | |
| // Trigger stats animation when section is in view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateStats(); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| observer.observe(document.querySelector('.stats')); | |
| // Particle effect | |
| function initParticles() { | |
| const canvas = document.createElement('canvas'); | |
| const particlesContainer = document.querySelector('.particles'); | |
| particlesContainer.appendChild(canvas); | |
| canvas.style.position = 'absolute'; | |
| canvas.style.width = '100%'; | |
| canvas.style.height = '100%'; | |
| canvas.width = particlesContainer.offsetWidth; | |
| canvas.height = particlesContainer.offsetHeight; | |
| const ctx = canvas.getContext('2d'); | |
| const particleCount = 50; | |
| const particles = []; | |
| // Create particles | |
| for (let i = 0; i < particleCount; i++) { | |
| particles.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| size: Math.random() * 3 + 1, | |
| speedX: Math.random() * 0.5 - 0.25, | |
| speedY: Math.random() * 0.5 - 0.25, | |
| color: `rgba(139, 92, 246, ${Math.random() * 0.5 + 0.1})` | |
| }); | |
| } | |
| // Draw particles | |
| function drawParticles() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw particles | |
| particles.forEach(p => { | |
| ctx.fillStyle = p.color; | |
| ctx.beginPath(); | |
| ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // Particle movement | |
| p.x += p.speedX; | |
| p.y += p.speedY; | |
| // Boundary check | |
| if (p.x < 0 || p.x > canvas.width) p.speedX *= -1; | |
| if (p.y < 0 || p.y > canvas.height) p.speedY *= -1; | |
| // Draw connecting lines | |
| particles.forEach(p2 => { | |
| const distance = Math.sqrt(Math.pow(p.x - p2.x, 2) + Math.pow(p.y - p2.y, 2)); | |
| if (distance < 100) { | |
| ctx.strokeStyle = `rgba(139, 92, 246, ${1 - distance / 100})`; | |
| ctx.lineWidth = 0.5; | |
| ctx.beginPath(); | |
| ctx.moveTo(p.x, p.y); | |
| ctx.lineTo(p2.x, p2.y); | |
| ctx.stroke(); | |
| } | |
| }); | |
| }); | |
| requestAnimationFrame(drawParticles); | |
| } | |
| drawParticles(); | |
| // Responsive adjustment | |
| window.addEventListener('resize', () => { | |
| canvas.width = particlesContainer.offsetWidth; | |
| canvas.height = particlesContainer.offsetHeight; | |
| }); | |
| } | |
| initParticles(); | |
| // Form submission | |
| const contactForm = document.getElementById('contactForm'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for your message! Our team will contact you shortly.'); | |
| this.reset(); | |
| }); | |
| } | |
| // Newsletter subscription | |
| const subscribeForms = document.querySelectorAll('.subscribe-form'); | |
| subscribeForms.forEach(form => { | |
| form.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const emailInput = this.querySelector('input[type="email"]'); | |
| alert(`Thank you for subscribing with ${emailInput.value}! You'll receive our updates soon.`); | |
| emailInput.value = ''; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |