Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nebula - Landing Page Futuristik</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <style> | |
| /* CSS Modern dengan Custom Properties */ | |
| :root { | |
| --primary-color: #6366f1; | |
| --secondary-color: #ec4899; | |
| --accent-color: #f59e0b; | |
| --dark-bg: #0f172a; | |
| --darker-bg: #020617; | |
| --text-primary: #f1f5f9; | |
| --text-secondary: #94a3b8; | |
| --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| --glass-bg: rgba(30, 41, 59, 0.4); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--darker-bg); | |
| color: var(--text-primary); | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| /* Loader Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--darker-bg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-spinner { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid transparent; | |
| border-top-color: var(--primary-color); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| position: relative; | |
| } | |
| .loader-spinner::before, | |
| .loader-spinner::after { | |
| content: ''; | |
| position: absolute; | |
| border: 3px solid transparent; | |
| border-radius: 50%; | |
| } | |
| .loader-spinner::before { | |
| top: -5px; | |
| left: -5px; | |
| right: -5px; | |
| bottom: -5px; | |
| border-top-color: var(--secondary-color); | |
| animation: spin 1.5s linear infinite; | |
| } | |
| .loader-spinner::after { | |
| top: -10px; | |
| left: -10px; | |
| right: -10px; | |
| bottom: -10px; | |
| border-top-color: var(--accent-color); | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Scroll Progress Bar */ | |
| .scroll-progress { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 0%; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| z-index: 1000; | |
| transition: width 0.1s ease; | |
| } | |
| /* Navigation */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 1.5rem 5%; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--glass-border); | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| .navbar.scrolled { | |
| padding: 1rem 5%; | |
| background: rgba(15, 23, 42, 0.85); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 1.8rem; | |
| font-weight: 900; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .nav-menu { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| } | |
| .nav-link { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| position: relative; | |
| transition: var(--transition); | |
| padding: 0.5rem 0; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); | |
| transition: var(--transition); | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .nav-link:hover { | |
| color: var(--primary-color); | |
| } | |
| .hamburger { | |
| display: none; | |
| flex-direction: column; | |
| cursor: pointer; | |
| gap: 5px; | |
| } | |
| .hamburger span { | |
| width: 25px; | |
| height: 3px; | |
| background: var(--text-primary); | |
| transition: var(--transition); | |
| } | |
| .hamburger.active span:nth-child(1) { | |
| transform: rotate(45deg) translate(5px, 5px); | |
| } | |
| .hamburger.active span:nth-child(2) { | |
| opacity: 0; | |
| } | |
| .hamburger.active span:nth-child(3) { | |
| transform: rotate(-45deg) translate(7px, -6px); | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| position: relative; | |
| overflow: hidden; | |
| padding: 2rem; | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .particle { | |
| position: absolute; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| animation: float 20s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) translateX(0) rotate(0deg); } | |
| 33% { transform: translateY(-100px) translateX(100px) rotate(120deg); } | |
| 66% { transform: translateY(100px) translateX(-100px) rotate(240deg); } | |
| 100% { transform: translateY(0) translateX(0) rotate(360deg); } | |
| } | |
| .hero-content { | |
| text-align: center; | |
| max-width: 1000px; | |
| z-index: 1; | |
| padding: 2rem; | |
| } | |
| .hero-title { | |
| font-size: clamp(3rem, 8vw, 6rem); | |
| font-weight: 900; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-size: 300% 300%; | |
| animation: gradient-shift 4s ease infinite; | |
| } | |
| @keyframes gradient-shift { | |
| 0%, 100% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| } | |
| .hero-subtitle { | |
| font-size: clamp(1.2rem, 3vw, 1.8rem); | |
| color: var(--text-secondary); | |
| margin-bottom: 2.5rem; | |
| opacity: 0; | |
| animation: fadeInUp 1s ease 0.5s forwards; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1.5rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| opacity: 0; | |
| animation: fadeInUp 1s ease 0.8s forwards; | |
| } | |
| .btn { | |
| padding: 1rem 2.5rem; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| display: inline-block; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-5px) scale(1.05); | |
| box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--text-primary); | |
| border: 2px solid var(--glass-border); | |
| backdrop-filter: blur(10px); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--primary-color); | |
| background: rgba(99, 102, 241, 0.1); | |
| transform: translateY(-5px); | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 0; | |
| height: 0; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: translate(-50%, -50%); | |
| transition: width 0.6s, height 0.6s; | |
| } | |
| .btn:hover::before { | |
| width: 300px; | |
| height: 300px; | |
| } | |
| /* Scroll Indicator */ | |
| .scroll-indicator { | |
| position: absolute; | |
| bottom: 2rem; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } | |
| 40% { transform: translateX(-50%) translateY(-20px); } | |
| 60% { transform: translateX(-50%) translateY(-10px); } | |
| } | |
| .scroll-indicator i { | |
| font-size: 2rem; | |
| color: var(--text-secondary); | |
| } | |
| /* Features Section */ | |
| .features { | |
| padding: 8rem 5%; | |
| background: var(--dark-bg); | |
| position: relative; | |
| } | |
| .section-title { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| text-align: center; | |
| margin-bottom: 4rem; | |
| font-weight: 800; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .feature-card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2.5rem 2rem; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| backdrop-filter: blur(10px); | |
| } | |
| .feature-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%); | |
| opacity: 0; | |
| transition: opacity 0.5s ease; | |
| } | |
| .feature-card:hover::before { | |
| opacity: 0.1; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| border-color: var(--primary-color); | |
| box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2); | |
| } | |
| .feature-icon { | |
| width: 80px; | |
| height: 80px; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| border-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| margin-bottom: 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: rotate(15deg) scale(1.1); | |
| box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); | |
| } | |
| .feature-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| font-weight: 700; | |
| } | |
| .feature-description { | |
| color: var(--text-secondary); | |
| line-height: 1.8; | |
| } | |
| /* Showcase Section */ | |
| .showcase { | |
| padding: 8rem 5%; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .showcase-container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .showcase-content h2 { | |
| font-size: clamp(2rem, 4vw, 3rem); | |
| margin-bottom: 1.5rem; | |
| font-weight: 800; | |
| } | |
| .showcase-content p { | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| line-height: 1.8; | |
| margin-bottom: 2rem; | |
| } | |
| .showcase-visual { | |
| position: relative; | |
| perspective: 1000px; | |
| } | |
| .showcase-card { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| transform: rotateY(-10deg) rotateX(5deg); | |
| transition: var(--transition); | |
| backdrop-filter: blur(10px); | |
| } | |
| .showcase-card:hover { | |
| transform: rotateY(0) rotateX(0) scale(1.05); | |
| } | |
| .code-block { | |
| background: rgba(0, 0, 0, 0.5); | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| font-family: 'Courier New', monospace; | |
| color: #10b981; | |
| overflow-x: auto; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 8rem 5%; | |
| background: var(--dark-bg); | |
| } | |
| .testimonial-slider { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .testimonial-track { | |
| display: flex; | |
| transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .testimonial-item { | |
| min-width: 100%; | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .testimonial-text { | |
| font-size: 1.5rem; | |
| font-style: italic; | |
| margin-bottom: 2rem; | |
| color: var(--text-secondary); | |
| line-height: 1.6; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| .author-avatar { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| } | |
| .author-info h4 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .author-info p { | |
| color: var(--text-secondary); | |
| } | |
| .slider-controls { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| } | |
| .slider-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--glass-border); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .slider-btn.active { | |
| background: var(--primary-color); | |
| transform: scale(1.3); | |
| } | |
| /* CTA Section */ | |
| .cta { | |
| padding: 8rem 5%; | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cta::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>'); | |
| background-size: 50px 50px; | |
| animation: backgroundMove 20s linear infinite; | |
| } | |
| @keyframes backgroundMove { | |
| 0% { background-position: 0 0; } | |
| 100% { background-position: 50px 50px; } | |
| } | |
| .cta-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .cta h2 { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| margin-bottom: 1.5rem; | |
| } | |
| .cta p { | |
| font-size: 1.3rem; | |
| margin-bottom: 2.5rem; | |
| opacity: 0.9; | |
| } | |
| .btn-white { | |
| background: white; | |
| color: var(--primary-color); | |
| font-weight: 700; | |
| } | |
| .btn-white:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Footer */ | |
| footer { | |
| padding: 3rem 5%; | |
| background: var(--darker-bg); | |
| text-align: center; | |
| border-top: 1px solid var(--glass-border); | |
| } | |
| .footer-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .social-link { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .social-link:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-5px) rotate(10deg); | |
| border-color: var(--primary-color); | |
| } | |
| .footer-text { | |
| color: var(--text-secondary); | |
| margin-top: 1rem; | |
| } | |
| .footer-text a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-text a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Anycoder Attribution */ | |
| .anycoder-badge { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--glass-bg); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid var(--glass-border); | |
| padding: 0.5rem 1rem; | |
| border-radius: 50px; | |
| font-size: 0.9rem; | |
| z-index: 1001; | |
| transition: var(--transition); | |
| } | |
| .anycoder-badge:hover { | |
| transform: scale(1.05); | |
| background: var(--primary-color); | |
| } | |
| .anycoder-badge a { | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-menu { | |
| position: fixed; | |
| top: 0; | |
| right: -100%; | |
| width: 70%; | |
| height: 100vh; | |
| background: var(--dark-bg); | |
| flex-direction: column; | |
| padding: 6rem 2rem; | |
| transition: var(--transition); | |
| border-left: 1px solid var(--glass-border); | |
| } | |
| .nav-menu.active { | |
| right: 0; | |
| } | |
| .hamburger { | |
| display: flex; | |
| z-index: 1001; | |
| } | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .showcase-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .showcase-card { | |
| transform: none; | |
| } | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .cta h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Reduced Motion */ | |
| @media (prefers-reduced-motion: reduce) { | |
| * { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| } | |
| } | |
| /* Fade in animation for scroll */ | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Scroll Progress Bar --> | |
| <div class="scroll-progress"></div> | |
| <!-- Loader --> | |
| <div class="loader"> | |
| <div class="loader-spinner"></div> | |
| </div> | |
| <!-- Anycoder Badge --> | |
| <div class="anycoder-badge"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="navbar"> | |
| <div class="nav-container"> | |
| <div class="logo">NEBULA</div> | |
| <ul class="nav-menu"> | |
| <li><a href="#home" class="nav-link">Beranda</a></li> | |
| <li><a href="#features" class="nav-link">Fitur</a></li> | |
| <li><a href="#showcase" class="nav-link">Showcase</a></li> | |
| <li><a href="#testimonials" class="nav-link">Testimoni</a></li> | |
| <li><a href="#cta" class="nav-link">Kontak</a></li> | |
| </ul> | |
| <div class="hamburger"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="particles" id="particles"></div> | |
| <div class="hero-content"> | |
| <h1 class="hero-title gradient-text">REVOLUSI DIGITAL</h1> | |
| <p class="hero-subtitle">Transformasi bisnis Anda dengan teknologi terkini dan solusi inovatif</p> | |
| <div class="hero-buttons"> | |
| <a href="#features" class="btn btn-primary">Mulai Sekarang</a> | |
| <a href="#showcase" class="btn btn-secondary">Lihat Demo</a> | |
| </div> | |
| </div> | |
| <div class="scroll-indicator"> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features fade-in" id="features"> | |
| <h2 class="section-title gradient-text">Fitur Unggulan</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3 class="feature-title">Performa Cepat</h3> | |
| <p class="feature-description">Kecepatan optimal dengan teknologi terbaru untuk pengalaman terbaik pengguna</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="feature-title">Keamanan Tinggi</h3> | |
| <p class="feature-description">Proteksi data terbaik dengan enkripsi end-to-end dan sistem keamanan canggih</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-palette"></i> | |
| </div> | |
| <h3 class="feature-title">Desain Modern</h3> | |
| <p class="feature-description">Antarmuka yang elegan dan intuitif dengan animasi halus yang memukau</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="feature-title">Responsif 100%</h3> | |
| <p class="feature-description">Tampil sempurna di semua perangkat, dari desktop hingga smartphone</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-code"></i> | |
| </div> | |
| <h3 class="feature-title">Kode Bersih</h3> | |
| <p class="feature-description">Arsitektur terstruktur dengan komentar jelas untuk kemudahan pengembangan</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-headset"></i> | |
| </div> | |
| <h3 class="feature-title">Dukungan 24/7</h3> | |
| <p class="feature-description">Tim ahli siap membantu kapan saja untuk kelancaran operasional Anda</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Showcase Section --> | |
| <section class="showcase fade-in" id="showcase"> | |
| <div class="showcase-container"> | |
| <div class="showcase-content"> | |
| <h2 class="gradient-text">Teknologi Masa Depan</h2> | |
| <p>Integrasi teknologi terkini seperti AI, Machine Learning, dan Cloud Computing untuk solusi bisnis yang cerdas dan efisien.</p> | |
| <a href="#" class="btn btn-primary">Pelajari Lebih Lanjut</a> | |
| </div> | |
| <div class="showcase-visual"> | |
| <div class="showcase-card"> | |
| <div class="code-block"> | |
| <pre>// Contoh implementasi | |
| const nebula = new Nebula({ | |
| apiKey: 'your-api-key', | |
| features: ['ai', 'analytics', 'cloud'], | |
| autoScale: true | |
| }); | |
| nebula.init().then(() => { | |
| console.log('Nebula aktif!'); | |
| });</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials fade-in" id="testimonials"> | |
| <h2 class="section-title gradient-text">Apa Kata Mereka</h2> | |
| <div class="testimonial-slider"> | |
| <div class="testimonial-track" id="testimonial-track"> | |
| <div class="testimonial-item"> | |
| <p class="testimonial-text">"Nebula mengubah cara kami berbisnis. Performa luar biasa dan dukungan yang sangat responsif!"</p> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar">JD</div> | |
| <div class="author-info"> | |
| <h4>John Doe</h4> | |
| <p>CEO TechCorp</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-item"> | |
| <p class="testimonial-text">"Antarmuka yang indah dan fungsionalitas yang powerful. Sangat direkomendasikan!"</p> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar">SM</div> | |
| <div class="author-info"> | |
| <h4>Sarah Miller</h4> | |
| <p>Product Manager</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-item"> | |
| <p class="testimonial-text">"Efisiensi meningkat 300% sejak menggunakan Nebula. Investasi terbaik tahun ini!"</p> | |
| <div class="testimonial-author"> | |
| <div class="author-avatar">AC</div> | |
| <div class="author-info"> | |
| <h4>Alex Chen</h4> | |
| <p>Startup Founder</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="slider-controls" id="slider-controls"></div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="cta fade-in" id="cta"> | |
| <div class="cta-content"> | |
| <h2>Siap Memulai Perjalanan Digital?</h2> | |
| <p>Bergabunglah dengan ribuan perusahaan yang telah transformasi bersama Nebula</p> | |
| <a href="#" class="btn btn-white">Dapatkan Demo Gratis</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <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-linkedin"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-github"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| <div class="footer-text"> | |
| <p>© 2024 Nebula. All rights reserved. | Made with <i class="fas fa-heart" style="color: var(--secondary-color);"></i> by <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // JavaScript Modern dengan Intersection Observer dan Event Delegation | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.querySelector('.loader').classList.add('hidden'); | |
| }, 1000); | |
| }); | |
| // Scroll Progress Bar | |
| const scrollProgress = document.querySelector('.scroll-progress'); | |
| window.addEventListener('scroll', () => { | |
| const scrollTop = window.pageYOffset; | |
| const docHeight = document.documentElement.scrollHeight - window.innerHeight; | |
| const scrollPercent = (scrollTop / docHeight) * 100; | |
| scrollProgress.style.width = scrollPercent + '%'; | |
| }); | |
| // Navbar Scroll Effect | |
| const navbar = document.querySelector('.navbar'); | |
| window.addEventListener('scroll', () => { | |
| if (window.scrollY > 50) { | |
| navbar.classList.add('scrolled'); | |
| } else { | |
| navbar.classList.remove('scrolled'); | |
| } | |
| }); | |
| // Mobile Menu Toggle | |
| const hamburger = document.querySelector('.hamburger'); | |
| const navMenu = document.querySelector('.nav-menu'); | |
| hamburger.addEventListener('click', () => { | |
| hamburger.classList.toggle('active'); | |
| navMenu.classList.toggle('active'); | |
| }); | |
| // Close menu on link click | |
| document.querySelectorAll('.nav-link').forEach(link => { | |
| link.addEventListener('click', () => { | |
| hamburger.classList.remove('active'); | |
| navMenu.classList.remove('active'); | |
| }); | |
| }); | |
| // Smooth Scroll | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Particles System | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 50; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| const size = Math.random() * 4 + 1; | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100; | |
| const animationDelay = Math.random() * 20; | |
| const animationDuration = Math.random() * 20 + 20; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| particle.style.animationDelay = `${animationDelay}s`; | |
| particle.style.animationDuration = `${animationDuration}s`; | |
| particle.style.background = `radial-gradient(circle, rgba(99, 102, 241, ${Math.random() * 0.5 + 0.2}) 0%, transparent 70%)`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| // Parallax Mouse Effect | |
| const hero = document.querySelector('.hero'); | |
| hero.addEventListener('mousemove', (e) => { | |
| const { clientX, clientY } = e; | |
| const { innerWidth, innerHeight } = window; | |
| const centerX = clientX - innerWidth / 2; | |
| const centerY = clientY - innerHeight / 2; | |
| const parallaxElements = document.querySelectorAll('.particle'); | |
| parallaxElements.forEach((el, index) => { | |
| const speed = (index % 5 + 1) * 0.5; | |
| const x = centerX * speed * 0.001; | |
| const y = centerY * speed * 0.001; | |
| el.style.transform = `translate(${x}px, ${y}px)`; | |
| }); | |
| }); | |
| // Intersection Observer for fade-in animations | |
| const observerOptions = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, observerOptions); | |
| document.querySelectorAll('.fade-in').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Testimonial Slider | |
| const track = document.getElementById('testimonial-track'); | |
| const controls = document.getElementById('slider-controls'); | |
| const testimonials = document.querySelectorAll('.testimonial-item'); | |
| let currentIndex = 0; | |
| // Create controls | |
| testimonials.forEach((_, index) => { | |
| const btn = document.createElement('div'); | |
| btn.classList.add('slider-btn'); | |
| if (index === 0) btn.classList.add('active'); | |
| btn.addEventListener('click', () => goToSlide(index)); | |
| controls.appendChild(btn); | |
| }); | |
| function goToSlide(index) { | |
| currentIndex = index; | |
| track.style.transform = `translateX(-${index * 100}%)`; | |
| updateControls(); | |
| } | |
| function updateControls() { | |
| document.querySelectorAll('.slider-btn').forEach((btn, index) => { | |
| btn.classList.toggle('active', index === currentIndex); | |
| }); | |
| } | |
| // Auto-play testimonial | |
| setInterval(() => { | |
| currentIndex = (currentIndex + 1) % testimonials.length; | |
| goToSlide(currentIndex); | |
| }, 5000); | |
| // Glitch Effect on Hero Title | |
| const heroTitle = document.querySelector('.hero-title'); | |
| setInterval(() => { | |
| heroTitle.style.textShadow = `${Math.random() * 5}px ${Math.random() * 5}px var(--primary-color)`; | |
| setTimeout(() => { | |
| heroTitle.style.textShadow = 'none'; | |
| }, 100); | |
| }, 3000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |