vamos usar uma pega mais moderna e se erros de formatção

components/footer.js

@@ -3,12 +3,130 @@ class CustomFooter extends HTMLElement {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
+                :host {
+                    --footer-bg: var(--color-dark);
+                    --footer-accent: var(--color-accent);
+                }
+
+                footer {
+                    background: var(--footer-bg);
+                    color: white;
+                    padding: 6rem 0 4rem;
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                .footer-container {
+                    max-width: 1440px;
+                    margin: 0 auto;
+                    padding: 0 2rem;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+                    gap: 3rem;
+                }
+
+                .footer-logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    margin-bottom: 1.5rem;
+                }
+
+                .footer-logo-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    background: var(--color-accent);
+                    border-radius: 0.5rem;
+                    display: grid;
+                    place-items: center;
+                }
+
+                .footer-heading {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                    color: var(--footer-accent);
+                }
+
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                }
+
+                .footer-link {
+                    color: rgba(255, 255, 255, 0.7);
+                    transition: color 0.2s ease;
+                }
+
+                .footer-link:hover {
+                    color: white;
+                }
+
+                .contact-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    margin-bottom: 1rem;
+                }
+
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1.5rem;
+                }
+
+                .social-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.1);
+                    display: grid;
+                    place-items: center;
+                    transition: all 0.2s ease;
+                }
+
                 .social-icon:hover {
+                    background: var(--footer-accent);
                     transform: translateY(-3px);
                 }
+
+                .footer-bottom {
+                    margin-top: 4rem;
+                    padding-top: 2rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    gap: 1rem;
+                    text-align: center;
+                }
+
+                .legal-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+
+                .legal-link {
+                    color: rgba(255, 255, 255, 0.5);
+                    font-size: 0.875rem;
+                }
+
+                .copyright {
+                    color: rgba(255, 255, 255, 0.5);
+                    font-size: 0.875rem;
+                }
+
+                @media (max-width: 768px) {
+                    .footer-container {
+                        grid-template-columns: 1fr;
+                    }
+                }
             </style>
-            <footer class="bg-gray-800 text-gray-300 py-12 mt-24">
-                <div class="container mx-auto px-4">
+            <footer>
+<div class="container mx-auto px-4">
                     <div class="grid md:grid-cols-4 gap-8">
                         <div class="md:col-span-2">
                             <div class="flex items-center mb-4">

components/mobile-menu.js

@@ -0,0 +1,117 @@
+class MobileMenu extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: none;
+          position: fixed;
+          top: 0;
+          right: 0;
+          width: 100%;
+          height: 100vh;
+          background: rgba(0, 0, 0, 0.8);
+          backdrop-filter: blur(8px);
+          z-index: 1000;
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.3s ease;
+        }
+
+        :host([open]) {
+          display: block;
+          opacity: 1;
+          pointer-events: all;
+        }
+
+        .menu-container {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: min(90vw, 400px);
+          height: 100vh;
+          background: white;
+          padding: 2rem;
+          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+          transform: translateX(100%);
+          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        :host([open]) .menu-container {
+          transform: translateX(0);
+        }
+
+        .menu-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 3rem;
+        }
+
+        .close-btn {
+          border: none;
+          background: none;
+          padding: 0.5rem;
+          cursor: pointer;
+          border-radius: 0.25rem;
+        }
+
+        .close-btn:hover {
+          background: rgba(0, 0, 0, 0.05);
+        }
+
+        .menu-links {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
+        .menu-link {
+          padding: 1rem;
+          font-size: 1.1rem;
+          color: var(--color-dark);
+          text-decoration: none;
+          border-radius: 0.5rem;
+          transition: all 0.2s ease;
+        }
+
+        .menu-link:hover {
+          background: rgba(79, 70, 229, 0.1);
+          color: var(--color-primary);
+        }
+
+        .mobile-cta {
+          margin-top: 2rem;
+          width: 100%;
+        }
+      </style>
+
+      <div class="menu-container">
+        <div class="menu-header">
+          <h3>Menu</h3>
+          <button class="close-btn">
+            <i data-feather="x"></i>
+          </button>
+        </div>
+        
+        <div class="menu-links">
+          <a href="#cursos" class="menu-link">Cursos</a>
+          <a href="#sobre" class="menu-link">Sobre</a>
+          <a href="#" class="menu-link">Mentores</a>
+          <a href="#" class="menu-link">Contato</a>
+        </div>
+        
+        <a href="#" class="cta-button mobile-cta">
+          Inscreva-se
+          <i data-feather="arrow-right"></i>
+        </a>
+      </div>
+    `;
+
+    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
+      this.removeAttribute('open');
+    });
+  }
+}
+
+customElements.define('mobile-menu', MobileMenu);

components/navbar.js

@@ -3,34 +3,129 @@ class CustomNavbar extends HTMLElement {
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.innerHTML = `
             <style>
+                :host {
+                    --nav-height: 5rem;
+                    --nav-bg: rgba(255, 255, 255, 0.86);
+                    --nav-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+                    --nav-blur: blur(10px);
+                }
+
+                nav {
+                    background: var(--nav-bg);
+                    backdrop-filter: var(--nav-blur);
+                    -webkit-backdrop-filter: var(--nav-blur);
+                    box-shadow: var(--nav-shadow);
+                    position: sticky;
+                    top: 0;
+                    z-index: 999;
+                    height: var(--nav-height);
+                    display: flex;
+                    align-items: center;
+                }
+
+                .nav-container {
+                    width: 100%;
+                    max-width: 1440px;
+                    margin: 0 auto;
+                    padding: 0 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-weight: 700;
+                    font-size: 1.25rem;
+                    text-decoration: none;
+                    color: var(--color-dark);
+                }
+
+                .logo-icon {
+                    width: 2.5rem;
+                    height: 2.5rem;
+                    background: var(--color-primary);
+                    color: white;
+                    border-radius: 0.5rem;
+                    display: grid;
+                    place-items: center;
+                }
+
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+
                 .nav-link {
                     position: relative;
+                    color: var(--color-dark);
+                    text-decoration: none;
+                    font-weight: 500;
+                    padding: 0.5rem 0;
                 }
-                .nav-link:hover::after {
-                    width: 100%;
+
+                .nav-link:hover {
+                    color: var(--color-primary);
                 }
+
                 .nav-link::after {
                     content: '';
                     position: absolute;
                     left: 0;
-                    bottom: -2px;
-                    width: 0;
+                    bottom: 0;
+                    width: 0%;
                     height: 2px;
-                    background-color: #3b82f6;
-                    transition: width 0.3s ease;
+                    background: var(--color-primary);
+                    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+                }
+
+                .nav-link:hover::after {
+                    width: 100%;
                 }
-                .mobile-menu {
-                    max-height: 0;
-                    overflow: hidden;
-                    transition: max-height 0.3s ease-out;
+
+                .cta-button {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    padding: 0.75rem 1.5rem;
+                    background: var(--color-primary);
+                    color: white;
+                    border-radius: 0.5rem;
+                    font-weight: 600;
+                    border: none;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+
+                .cta-button:hover {
+                    background: var(--color-secondary);
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
                 }
-                .mobile-menu.open {
-                    max-height: 500px;
-                    transition: max-height 0.5s ease-in;
+
+                .menu-toggle {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                }
+
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+
+                    .menu-toggle {
+                        display: block;
+                    }
                 }
             </style>
-            <nav class="bg-white shadow-sm sticky top-0 z-50">
-                <div class="container mx-auto px-4">
+            <nav>
+<div class="container mx-auto px-4">
                     <div class="flex justify-between items-center py-4">
                         <a href="/" class="flex items-center">
                             <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center mr-2">

script.js

@@ -1,17 +1,41 @@
+
 // Main scripts for the application
 document.addEventListener('DOMContentLoaded', function() {
-    // Smooth scrolling for anchor links
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function(e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            if (targetId !== '#') {
-                document.querySelector(targetId).scrollIntoView({
-                    behavior: 'smooth'
-                });
-            }
+  // Initialize animations
+  const animateElements = () => {
+    const elements = document.querySelectorAll('.animate-fade, .animate-slide');
+    elements.forEach((el, i) => {
+      el.style.animationDelay = `${i * 100}ms`;
+      el.style.opacity = 0;
+      setTimeout(() => {
+        el.style.opacity = 1;
+      }, i * 100);
+    });
+  };
+
+  // Smooth scrolling for anchor links
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      e.preventDefault();
+      const targetId = this.getAttribute('href');
+      if (targetId !== '#') {
+        document.querySelector(targetId).scrollIntoView({
+          behavior: 'smooth'
         });
+      }
     });
+  });
+
+  // Initialize mobile menu toggle
+  document.addEventListener('click', (e) => {
+    if (e.target.closest('[data-toggle-menu]')) {
+      const menu = document.querySelector('mobile-menu');
+      menu.hasAttribute('open') 
+        ? menu.removeAttribute('open')
+        : menu.setAttribute('open', '');
+    }
+  });
 
-    // Mobile toggle functionality will be handled within the navbar component
-});
+  // Initialize animations on page load
+  animateElements();
+});

style.css

@@ -1,36 +1,105 @@
-/* Custom styles that extend Tailwind */
-@keyframes float {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
+
+:root {
+  --color-primary: #4f46e5;
+  --color-secondary: #7c3aed;
+  --color-accent: #f59e0b;
+  --color-dark: #1e293b;
+  --color-light: #f8fafc;
+}
+
+/* Base styles with modern reset */
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  line-height: 1.5;
+  color: var(--color-dark);
+  background-color: var(--color-light);
+}
+
+/* Modern animations */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.animate-fade {
+  animation: fadeIn 0.6s ease-out forwards;
 }
 
-.float-animation {
-    animation: float 3s ease-in-out infinite;
+.animate-slide {
+  animation: slideUp 0.6s ease-out forwards;
 }
 
-/* Custom scrollbar for modern browsers */
+/* Modern scrollbar */
 ::-webkit-scrollbar {
-    width: 8px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: #f1f1f1;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: #3b82f6;
-    border-radius: 4px;
+  background: var(--color-primary);
+  border-radius: 10px;
+  border: 2px solid var(--color-light);
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #2563eb;
+/* Typography enhancements */
+h1, h2, h3, h4 {
+  font-weight: 700;
+  line-height: 1.2;
+  margin-bottom: 1rem;
 }
 
-/* Smooth transitions for all elements */
-* {
-    transition: all 0.3s ease;
-}
+h1 {
+  font-size: clamp(2.5rem, 5vw, 4rem);
+  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+h2 {
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+}
+
+/* Custom transitions */
+a, button {
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Modern focus states */
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Utility classes for animations */
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}