Delete components/hero.js

components/hero.js

@@ -1,132 +0,0 @@
-class Hero extends HTMLElement {
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-
-        const styles = `
-            <style>
-                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap');
-                
-                :host {
-                    display: block;
-                    padding: 5rem 1.5rem;
-                    max-width: 1280px;
-                    margin: 0 auto;
-                    text-align: center;
-                }
-
-                .badge {
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 0.5rem;
-                    background-color: #e0e7ff;
-                    color: #4338ca;
-                    padding: 0.5rem 1rem;
-                    border-radius: 9999px;
-                    font-size: 0.875rem;
-                    font-weight: 600;
-                    margin-bottom: 1.5rem;
-                }
-
-                h1 {
-                    font-family: 'Inter', sans-serif;
-                    font-size: 3.5rem;
-                    font-weight: 900;
-                    line-height: 1.1;
-                    color: #0f172a;
-                    margin: 0 0 1.5rem 0;
-                    letter-spacing: -0.025em;
-                }
-
-                h1 span {
-                    background: linear-gradient(135deg, #4f46e5 0%, #14b8a6 100%);
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                }
-
-                p {
-                    font-family: 'Inter', sans-serif;
-                    font-size: 1.25rem;
-                    color: #64748b;
-                    max-width: 700px;
-                    margin: 0 auto 2.5rem auto;
-                    line-height: 1.6;
-                }
-
-                .actions {
-                    display: flex;
-                    justify-content: center;
-                    gap: 1rem;
-                    flex-wrap: wrap;
-                }
-
-                .btn {
-                    padding: 1rem 2rem;
-                    border-radius: 0.75rem;
-                    font-family: 'Inter', sans-serif;
-                    font-weight: 600;
-                    font-size: 1rem;
-                    text-decoration: none;
-                    transition: all 0.2s;
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 0.5rem;
-                }
-
-                .btn-primary {
-                    background-color: #4f46e5;
-                    color: white;
-                    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
-                }
-
-                .btn-primary:hover {
-                    background-color: #4338ca;
-                    transform: translateY(-2px);
-                    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
-                }
-
-                .btn-secondary {
-                    background-color: white;
-                    color: #0f172a;
-                    border: 1px solid #e2e8f0;
-                }
-
-                .btn-secondary:hover {
-                    background-color: #f8fafc;
-                    border-color: #cbd5e1;
-                }
-
-                @media (max-width: 768px) {
-                    h1 {
-                        font-size: 2.5rem;
-                    }
-                    p {
-                        font-size: 1.1rem;
-                    }
-                }
-            </style>
-        `;
-
-        this.shadowRoot.innerHTML = `
-            ${styles}
-            <div class="badge">
-                <span style="width: 8px; height: 8px; background: #14b8a6; border-radius: 50%;"></span>
-                v2.0 is now live
-            </div>
-            <h1>Crafting Digital <br><span>Excellence</span> for Everyone</h1>
-            <p>Build stunning websites and applications with our next-generation platform. Fast, secure, and infinitely scalable for your ambitions.</p>
-            
-            <div class="actions">
-                <a href="#" class="btn btn-primary">
-                    Start Building Free
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
-                </a>
-                <a href="#" class="btn btn-secondary">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
-                    Watch Demo
-                </a>
-            </div>
-        `;
-    }
-}
-
-customElements.define('app-hero', Hero);