| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Morphic Solutions Lab</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.min.js"></script> |
| <style> |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #000; |
| color: rgba(255,255,255,0.9); |
| overflow-x: hidden; |
| } |
| .neon-cyan { |
| color: #00f0ff; |
| text-shadow: 0 0 8px rgba(0, 240, 255, 0.4); |
| } |
| .electric-lime { |
| color: #b0ff00; |
| } |
| .btn-lime { |
| background: transparent; |
| border: 2px solid #b0ff00; |
| color: #b0ff00; |
| transition: all 0.3s ease; |
| } |
| .btn-lime:hover { |
| background: rgba(176, 255, 0, 0.1); |
| box-shadow: 0 0 15px rgba(176, 255, 0, 0.4); |
| } |
| .morph-container { |
| height: 60vh; |
| position: relative; |
| } |
| .icon-hover { |
| transition: all 0.3s ease; |
| opacity: 0.7; |
| } |
| .icon-hover:hover { |
| opacity: 1; |
| filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6)); |
| } |
| .typing-animation { |
| display: inline-block; |
| overflow: hidden; |
| border-right: 2px solid #00f0ff; |
| white-space: nowrap; |
| animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite; |
| } |
| @keyframes typing { |
| from { width: 0 } |
| to { width: 100% } |
| } |
| @keyframes blink-caret { |
| from, to { border-color: transparent } |
| 50% { border-color: #00f0ff } |
| } |
| .pulse-text { |
| animation: pulse 3s infinite alternate; |
| } |
| @keyframes pulse { |
| from { opacity: 0.3 } |
| to { opacity: 1 } |
| } |
| </style> |
| </head> |
| <body class="relative"> |
| |
| <div id="vanta-bg" class="fixed inset-0 -z-10"></div> |
|
|
| |
| <section class="min-h-screen flex flex-col justify-center items-center px-4"> |
| <div class="morph-container w-full flex justify-center items-center" id="morph-canvas"> |
| |
| </div> |
| <h1 class="text-6xl md:text-8xl font-bold neon-cyan mb-8 opacity-0 transition-opacity duration-1000" id="main-title">SAM SAI</h1> |
| <p class="text-2xl md:text-3xl font-light mb-12 text-center max-w-2xl mx-auto"> |
| <span class="typing-animation">Any problem has a solution.</span> |
| </p> |
| <button class="btn-lime px-8 py-4 rounded-full text-xl font-semibold electric-lime hover:scale-105 transition-transform" id="cta-button"> |
| No fix, no fee — start here |
| </button> |
| </section> |
|
|
| |
| <section class="py-32 px-4"> |
| <div class="max-w-4xl mx-auto space-y-24"> |
| <div class="scenario-item"> |
| <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2> |
| <p class="text-xl leading-relaxed scenario-text" data-original="Legacy system slowing operations" data-replacement="Modern cloud architecture with 300% speed boost"> |
| Legacy system slowing operations |
| </p> |
| </div> |
| <div class="scenario-item"> |
| <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2> |
| <p class="text-xl leading-relaxed scenario-text" data-original="Data silos causing inefficiency" data-replacement="Unified data lake with real-time analytics"> |
| Data silos causing inefficiency |
| </p> |
| </div> |
| <div class="scenario-item"> |
| <h2 class="text-4xl font-bold neon-cyan mb-6">Problem → Solution</h2> |
| <p class="text-xl leading-relaxed scenario-text" data-original="Security vulnerabilities in workflow" data-replacement="Zero-trust architecture with automated compliance"> |
| Security vulnerabilities in workflow |
| </p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-20 px-4"> |
| <div class="flex justify-center space-x-12 md:space-x-24"> |
| <a href="#" target="_blank" class="icon-hover" title="Architecture"> |
| <i data-feather="compass" class="w-12 h-12 stroke-current neon-cyan"></i> |
| </a> |
| <a href="#" target="_blank" class="icon-hover" title="Aviation"> |
| <i data-feather="wind" class="w-12 h-12 stroke-current neon-cyan"></i> |
| </a> |
| <a href="#" target="_blank" class="icon-hover" title="Precision"> |
| <i data-feather="watch" class="w-12 h-12 stroke-current neon-cyan"></i> |
| </a> |
| <a href="#" target="_blank" class="icon-hover" title="Craft"> |
| <i data-feather="tool" class="w-12 h-12 stroke-current neon-cyan"></i> |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="min-h-screen flex flex-col justify-center items-center px-4" id="contact"> |
| <h2 class="text-3xl md:text-4xl font-light mb-16 pulse-text">Need something solved?</h2> |
| <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8"> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="write">Write it</button> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="show">Show me live</button> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium contact-btn" data-type="call">Phone call</button> |
| </div> |
| |
| |
| <div class="hidden mt-12 max-w-md w-full" id="write-form"> |
| <textarea class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Describe your challenge..." rows="5"></textarea> |
| <input type="email" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your email"> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Send</button> |
| </div> |
| |
| <div class="hidden mt-12 max-w-md w-full" id="show-form"> |
| <div class="bg-black bg-opacity-50 border border-gray-700 rounded-lg p-6 text-center"> |
| <p class="mb-4">Pick a time for a screenshare session:</p> |
| <div class="grid grid-cols-2 gap-2 mb-6"> |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Mon 10am</button> |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Mon 2pm</button> |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Tue 11am</button> |
| <button class="bg-gray-800 hover:bg-gray-700 py-2 rounded">Tue 3pm</button> |
| </div> |
| <input type="email" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your email"> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Schedule</button> |
| </div> |
| </div> |
| |
| <div class="hidden mt-12 max-w-md w-full" id="call-form"> |
| <input type="tel" class="w-full bg-black bg-opacity-50 border border-gray-700 rounded-lg p-4 text-white mb-4" placeholder="Your phone number"> |
| <div class="bg-black bg-opacity-50 border border-gray-700 rounded-lg p-6 text-center mb-4"> |
| <p class="mb-4">We'll call you immediately at:</p> |
| <p class="text-xl electric-lime font-medium" id="phone-display"></p> |
| </div> |
| <button class="btn-lime px-6 py-3 rounded-full font-medium w-full">Call me now</button> |
| </div> |
| </section> |
|
|
| <script> |
| |
| VANTA.GLOBE({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x00f0ff, |
| backgroundColor: 0x010112, |
| size: 0.8 |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| feather.replace(); |
| |
| |
| setTimeout(() => { |
| document.getElementById('main-title').style.opacity = '1'; |
| }, 500); |
| |
| |
| document.getElementById('cta-button').addEventListener('click', function() { |
| document.getElementById('contact').scrollIntoView({ behavior: 'smooth' }); |
| }); |
| |
| |
| const contactBtns = document.querySelectorAll('.contact-btn'); |
| const forms = { |
| write: document.getElementById('write-form'), |
| show: document.getElementById('show-form'), |
| call: document.getElementById('call-form') |
| }; |
| |
| contactBtns.forEach(btn => { |
| btn.addEventListener('click', function() { |
| const type = this.getAttribute('data-type'); |
| |
| |
| Object.values(forms).forEach(form => { |
| form.classList.add('hidden'); |
| }); |
| |
| |
| forms[type].classList.remove('hidden'); |
| |
| |
| if (type === 'call') { |
| document.getElementById('phone-display').textContent = |
| new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); |
| } |
| }); |
| }); |
| |
| |
| const scenarioItems = document.querySelectorAll('.scenario-item'); |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const textEl = entry.target.querySelector('.scenario-text'); |
| const originalText = textEl.getAttribute('data-original'); |
| const replacementText = textEl.getAttribute('data-replacement'); |
| |
| |
| textEl.textContent = originalText; |
| setTimeout(() => { |
| textEl.textContent = replacementText; |
| textEl.classList.add('electric-lime'); |
| }, 1500); |
| } |
| }); |
| }, { threshold: 0.5 }); |
| |
| scenarioItems.forEach(item => { |
| observer.observe(item); |
| }); |
| |
| |
| document.addEventListener('keydown', function(e) { |
| if (e.key === 'Escape') { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| } |
| }); |
| |
| |
| const morphCanvas = document.getElementById('morph-canvas'); |
| morphCanvas.innerHTML = ` |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="w-64 h-64 border-2 border-cyan-500 rounded-lg animate-pulse"></div> |
| </div> |
| `; |
| }); |
| </script> |
| </body> |
| </html> |
|
|
