File size: 4,188 Bytes
974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c a866b8e 974c87c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
class CustomFeatures extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
padding: 6rem 2rem;
background-color: white;
}
.features-container {
max-width: 1280px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-header h2 {
font-size: 2.25rem;
font-weight: 800;
color: #1f2937;
margin-bottom: 1rem;
}
.section-header p {
color: #6b7280;
max-width: 600px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background-color: #f9fafb;
border-radius: 1rem;
padding: 2rem;
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.feature-icon {
width: 3rem;
height: 3rem;
background-color: #e0e7ff;
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: #4f46e5;
}
.feature-title {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 1rem;
}
.feature-description {
color: #6b7280;
line-height: 1.6;
}
</style>
<div class="features-container" id="features">
<div class="section-header">
<h2>🎸 Vibe Features 🎹</h2>
<p>Turn your dev flow into a sick beat drop - these features hit different</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i data-feather="codepen"></i>
</div>
<h3 class="feature-title">🎧 Sync Mode</h3>
<p class="feature-description">
Drop into the code studio with your squad - real-time sync like a perfectly timed drop.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i data-feather="music"></i>
</div>
<h3 class="feature-title">🎵 Dev Playlists</h3>
<p class="feature-description">
Lofi hip-hop beats to code to - the perfect soundtrack for your next masterpiece.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i data-feather="git-branch"></i>
</div>
<h3 class="feature-title">🌊 Flow Control</h3>
<p class="feature-description">
Ride the git wave with our visual flow - merge conflicts? More like dance-offs.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i data-feather="cast"></i>
</div>
<h3 class="feature-title">🎤 Live Streaming</h3>
<p class="feature-description">
Go live with your code - let the world watch you create magic in real-time.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i data-feather="cpu"></i>
</div>
<h3 class="feature-title">🤖 AI DJ</h3>
<p class="feature-description">
Your coding partner drops sick suggestions and keeps the bugs away like a bouncer.
</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i data-feather="trending-up"></i>
</div>
<h3 class="feature-title">📊 Vibe Metrics</h3>
<p class="feature-description">
Track your flow state and code velocity - see how your dev game levels up.
</p>
</div>
</div>
</div>
`;
}
}
customElements.define('custom-features', CustomFeatures); |