augment-hero-recreation.html•20.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Augment Code Hero Recreation</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
color: #fafaf9;
background: #000000;
line-height: 1.5;
font-size: 16px;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Navigation Bar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: #fafaf9;
text-decoration: none;
}
.nav-links {
display: none;
gap: 2rem;
list-style: none;
}
@media (min-width: 768px) {
.nav-links {
display: flex;
}
}
.nav-links a {
color: #a1a1aa;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #fafaf9;
}
.nav-buttons {
display: flex;
gap: 0.5rem;
}
.nav-btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.3s ease;
}
.nav-btn.secondary {
color: #fafaf9;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-btn.secondary:hover {
background: rgba(255, 255, 255, 0.05);
}
.nav-btn.primary {
color: #000;
background: #fafaf9;
border: 1px solid #fafaf9;
}
.nav-btn.primary:hover {
background: #f4f4f5;
}
/* Hero Section */
.hero-section {
position: relative;
min-height: 100vh;
overflow: hidden;
padding: 0 1rem;
background:
radial-gradient(ellipse 50% 80% at 20% 40%, rgba(120, 119, 198, 0.3), transparent),
radial-gradient(ellipse 50% 80% at 80% 50%, rgba(120, 119, 198, 0.15), transparent),
radial-gradient(ellipse 50% 80% at 40% 80%, rgba(120, 119, 198, 0.1), transparent),
#000000;
display: flex;
align-items: center;
}
.hero-container {
position: relative;
z-index: 10;
margin: 0 auto;
display: flex;
max-width: 1200px;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 3rem;
padding: 6rem 0 4rem 0;
}
/* Announcement Banner */
.announcement {
animation: slideInFromTop 0.8s ease-out;
}
.announcement a {
text-decoration: none;
color: inherit;
}
.announcement-banner {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1.25rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
transition: all 0.3s ease;
cursor: pointer;
}
.announcement-banner:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
/* Main Headlines */
.main-headlines {
animation: slideInFromBottom 0.8s ease-out 0.2s both;
}
.headline-large {
font-size: clamp(2.5rem, 8vw, 6rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #fafaf9 0%, #d4d4d8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
@media (min-width: 640px) {
.headline-large {
font-size: clamp(3rem, 10vw, 7rem);
}
}
/* Subtitle */
.subtitle {
max-width: 42rem;
font-size: 1.25rem;
line-height: 1.6;
color: #a1a1aa;
font-weight: 400;
margin: 0 auto;
animation: slideInFromBottom 0.8s ease-out 0.4s both;
}
@media (min-width: 768px) {
.subtitle {
font-size: 1.375rem;
line-height: 1.7;
}
}
/* CTA Button */
.cta-section {
animation: slideInFromBottom 0.8s ease-out 0.6s both;
}
.install-button {
display: inline-block;
text-decoration: none;
background: linear-gradient(135deg, rgba(120, 119, 198, 0.15) 0%, rgba(120, 119, 198, 0.05) 100%);
border: 1px solid rgba(120, 119, 198, 0.2);
border-radius: 8px;
padding: 1px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.install-button::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(120, 119, 198, 0.1) 0%, rgba(120, 119, 198, 0.02) 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 7px;
}
.install-button:hover::before {
opacity: 1;
}
.install-button:hover {
border-color: rgba(120, 119, 198, 0.3);
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(120, 119, 198, 0.1);
}
.button-content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem 1.5rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 7px;
backdrop-filter: blur(10px);
}
.button-text {
font-size: 1.25rem;
font-weight: 600;
color: #fafaf9;
}
.button-divider {
width: 1px;
height: 2rem;
background: rgba(255, 255, 255, 0.1);
}
.button-icons {
display: flex;
gap: 1rem;
}
.icon-wrapper {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
cursor: pointer;
}
.icon-wrapper:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.05);
}
.icon-wrapper svg {
width: 1.5rem;
height: 1.5rem;
}
/* Video Container */
.video-showcase {
position: relative;
max-width: 900px;
width: 100%;
animation: slideInFromBottom 0.8s ease-out 0.8s both;
}
.video-frame {
position: relative;
background: linear-gradient(135deg, rgba(120, 119, 198, 0.1) 0%, rgba(120, 119, 198, 0.02) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 1rem;
backdrop-filter: blur(20px);
}
.video-container {
position: relative;
overflow: hidden;
border-radius: 12px;
background: #000;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.05);
}
.hero-video {
width: 100%;
height: auto;
display: block;
}
/* Animations */
@keyframes slideInFromTop {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Floating Elements (Desktop Only) */
.floating-ui {
position: absolute;
pointer-events: none;
opacity: 0;
transition: all 0.8s ease;
}
@media (min-width: 1200px) {
.video-showcase {
animation: slideInFromBottom 0.8s ease-out 0.8s both, floatIn 1s ease-out 1.6s both;
}
.floating-ui {
opacity: 0.8;
}
}
.floating-terminal {
top: -10rem;
right: -15rem;
z-index: 5;
}
.floating-panel {
bottom: -10rem;
left: -15rem;
z-index: 5;
}
.floating-ide {
top: 50%;
right: -18rem;
transform: translateY(-50%);
z-index: 5;
}
.floating-element {
width: 200px;
height: 300px;
background: linear-gradient(135deg, rgba(120, 119, 198, 0.05) 0%, rgba(120, 119, 198, 0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 0.5rem;
backdrop-filter: blur(20px);
}
.floating-element img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
opacity: 0.9;
}
@keyframes floatIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 0.8;
transform: scale(1);
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.hero-container {
gap: 2rem;
padding: 4rem 0 2rem 0;
}
.button-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.button-divider {
display: none;
}
.button-text {
font-size: 1.125rem;
}
.subtitle {
font-size: 1.125rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="/" class="logo">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="3" width="6" height="6" fill="currentColor"/>
<rect x="15" y="3" width="6" height="6" fill="currentColor"/>
<rect x="3" y="15" width="6" height="6" fill="currentColor"/>
<rect x="15" y="15" width="6" height="6" fill="currentColor"/>
</svg>
augment code
</a>
<ul class="nav-links">
<li><a href="/product">Product</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
<div class="nav-buttons">
<a href="/signin" class="nav-btn secondary">Sign in</a>
<a href="/install" class="nav-btn primary">Install</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-container">
<!-- Announcement -->
<div class="announcement">
<a href="/blog/gpt-5-is-here-and-we-now-have-a-model-picker">
<div class="announcement-banner">
<span>Now supporting GPT-5 and Sonnet 4</span>
<span>→</span>
</div>
</a>
</div>
<!-- Main Headlines -->
<div class="main-headlines">
<h1 class="headline-large">Better Context. Better Agent.</h1>
<h1 class="headline-large">Better Code.</h1>
</div>
<!-- Subtitle -->
<p class="subtitle">
The most powerful AI software development platform backed by the industry-leading context engine.
</p>
<!-- CTA Button -->
<div class="cta-section">
<a href="/signup" class="install-button">
<div class="button-content">
<span class="button-text">Install now</span>
<div class="button-divider"></div>
<div class="button-icons">
<div class="icon-wrapper">
<svg viewBox="0 0 50 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.355 17.08C2.355 17.08 1.2012 16.2498 2.58576 15.1412L5.8116 12.2617C5.8116 12.2617 6.73465 11.2922 7.71057 12.1369L37.4787 34.6354V45.4239C37.4787 45.4239 37.4643 47.118 35.2865 46.9309L2.355 17.08Z" fill="#2489CA"/>
<path d="M10.0252 24.0346L2.35237 30.9982C2.35237 30.9982 1.56394 31.5837 2.35237 32.6299L5.91473 35.8646C5.91473 35.8646 6.76086 36.7716 8.01081 35.7398L16.1451 29.5824L10.0252 24.0346Z" fill="#1070B3"/>
<path d="M23.4933 24.0917L37.5649 13.3655L37.4735 2.63458C37.4735 2.63458 36.8726 0.292582 34.8678 1.51157L16.1426 18.5246L23.4933 24.0917Z" fill="#0877B9"/>
<path d="M35.2826 46.9455C36.0999 47.7806 37.0902 47.507 37.0902 47.507L48.0561 42.1127C49.4599 41.1577 49.2628 39.9723 49.2628 39.9723V7.76029C49.2628 6.34453 47.811 5.85502 47.811 5.85502L38.3065 1.28141C36.2297 2.88486e-05 34.8691 1.51177 34.8691 1.51177C34.8691 1.51177 36.6191 0.254385 37.4748 2.63477V45.2274C37.4748 45.5202 37.4123 45.8081 37.2873 46.0673C37.0373 46.5712 36.4941 47.0415 35.1912 46.8447L35.2826 46.9455Z" fill="#3C99D4"/>
</svg>
</div>
<div class="icon-wrapper">
<svg viewBox="0 0 64 64">
<defs>
<linearGradient id="jetbrains-gradient" x1=".8" x2="62.6" y1="3.3" y2="64.2" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#ff9419"/>
<stop offset=".4" stop-color="#ff021d"/>
<stop offset="1" stop-color="#e600ff"/>
</linearGradient>
</defs>
<path d="M20.3 3.7 3.7 20.3C1.4 22.6 0 25.8 0 29.1v29.8c0 2.8 2.2 5 5 5h29.8c3.3 0 6.5-1.3 8.8-3.7l16.7-16.7c2.3-2.3 3.7-5.5 3.7-8.8V5c0-2.8-2.2-5-5-5H29.2c-3.3 0-6.5 1.3-8.8 3.7Z" fill="url(#jetbrains-gradient)"/>
<path d="M48 16H8v40h40V16Z" fill="#000"/>
<path d="M30 47H13v4h17v-4Z" fill="#fff"/>
</svg>
</div>
</div>
</div>
</a>
</div>
<!-- Video Showcase -->
<div class="video-showcase">
<div class="video-frame">
<div class="video-container">
<video class="hero-video" autoplay loop muted playsinline poster="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjQ1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMDAwIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPkF1Z21lbnQgQ29kZSBEZW1vPC90ZXh0Pjwvc3ZnPg==">
<source src="https://augment-assets.com/video.hevc.mp4" type="video/mp4; codecs=hvc1">
<source src="https://augment-assets.com/video.h264.mp4" type="video/mp4; codecs=avc1.4D401E">
</video>
</div>
</div>
<!-- Floating UI Elements -->
<div class="floating-ui floating-terminal">
<div class="floating-element">
<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a1a 0%, #000 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #00ff88; font-family: monospace; font-size: 0.75rem;">Terminal</div>
</div>
</div>
<div class="floating-ui floating-panel">
<div class="floating-element">
<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #60a5fa; font-family: sans-serif; font-size: 0.75rem;">Augment Panel</div>
</div>
</div>
<div class="floating-ui floating-ide">
<div class="floating-element">
<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: sans-serif; font-size: 0.75rem;">IntelliJ IDE</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>