|
|
<!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> |
|
|
|
