change the name of the Ampliy helper from help to FAQ

components/faq-chat.js

@@ -63,7 +63,7 @@ class FAQChat extends HTMLElement {
         .chat-toggle-container {
           position: fixed;
           bottom: 20px;
-          right: 20px;
+          left: 20px;
           z-index: 1001;
         }
 :host {
@@ -86,31 +86,35 @@ class FAQChat extends HTMLElement {
 :host(.open) {
   right: 20px;
 }
-
-.chat-toggle-btn {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  width: 60px;
-  height: 60px;
-  background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
-  border-radius: 50%;
-  border: 1px solid #e3b341;
-  color: #e3b341;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 999;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-  transition: all 0.3s ease;
-}
-
-.chat-toggle-btn:hover {
-  transform: scale(1.1);
-  background: #e3b341;
-  color: #000;
-}
+        .chat-toggle-btn {
+          position: fixed;
+          bottom: 20px;
+          left: 20px;
+          min-width: 100px;
+          height: 50px;
+          background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
+          border-radius: 25px;
+          border: 1px solid #e3b341;
+          color: #e3b341;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          z-index: 999;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+          transition: all 0.3s ease;
+          padding: 0 20px;
+          font-weight: bold;
+          text-transform: uppercase;
+          font-size: 14px;
+          letter-spacing: 1px;
+        }
+        .chat-toggle-btn:hover {
+          transform: scale(1.05);
+          background: #e3b341;
+          color: #000;
+          box-shadow: 0 0 15px rgba(227, 179, 65, 0.5);
+        }
 .chat-container {
           display: flex;
           flex-direction: column;
@@ -221,9 +225,12 @@ class FAQChat extends HTMLElement {
         }
       </style>
       <div class="chat-toggle-btn" id="chat-toggle">
-        <i data-feather="message-square"></i>
+        <div class="flex items-center">
+          <i data-feather="help-circle" class="mr-2"></i>
+          <span>Help</span>
+        </div>
       </div>
-      <div class="chat-container">
+<div class="chat-container">
 <div class="chat-header">
           <i data-feather="message-square"></i>
           Amplify FAQ Helper

components/santa-animation.js

@@ -21,8 +21,8 @@ class SantaAnimation extends HTMLElement {
           font-size: 64px;
           white-space: nowrap;
           animation:
-            flyAcross 14s linear infinite,
-            floatUpDown 2.5s ease-in-out infinite;
+            flyAcross 12s linear infinite,
+            floatUpDown 2s ease-in-out infinite;
           filter: drop-shadow(0 0 10px rgba(255,0,0,0.5));
         }
 
@@ -36,37 +36,16 @@ class SantaAnimation extends HTMLElement {
           50% { top: 26%; }
         }
 
-        .reindeer {
-          position: absolute;
-          font-size: 32px;
-          animation: run 0.5s alternate infinite ease-in-out;
-        }
-
-        @keyframes run {
-          from { transform: rotate(15deg); }
-          to { transform: rotate(-15deg); }
-        }
-
-        .light {
-          position: absolute;
-          animation: glow 1.5s infinite alternate;
-        }
-
-        @keyframes glow {
-          from { opacity: 0.4; }
-          to { opacity: 1; }
-        }
-
-        .snowflake {
+        .star {
           position: absolute;
           color: white;
-          opacity: 0.7;
-          animation: snow 10s linear infinite;
+          opacity: 0.3;
+          animation: twinkle 3s infinite ease-in-out;
         }
 
-        @keyframes snow {
-          from { transform: translateY(-10vh); }
-          to { transform: translateY(110vh); }
+        @keyframes twinkle {
+          0%, 100% { opacity: 0.3; }
+          50% { opacity: 1; }
         }
       </style>
       <div class="santa-container">
@@ -74,30 +53,17 @@ class SantaAnimation extends HTMLElement {
       </div>
     `;
 
-    // Add lights
-    const colors = ['gold', 'lime', 'cyan', 'orange'];
-    for (let i = 0; i < 8; i++) {
-      const light = document.createElement("div");
-      light.className = "light";
-      light.textContent = "✨";
-      light.style.left = Math.random() * 100 + "vw";
-      light.style.top = Math.random() * 100 + "vh";
-      light.style.color = colors[Math.floor(Math.random() * colors.length)];
-      light.style.fontSize = 12 + Math.random() * 20 + "px";
-      this.shadowRoot.querySelector('.santa-container').appendChild(light);
-    }
-
-    // Add snowflakes
-    for (let i = 0; i < 20; i++) {
-      const snow = document.createElement("div");
-      snow.className = "snowflake";
-      snow.textContent = "❆";
-      snow.style.left = Math.random() * 100 + "vw";
-      snow.style.fontSize = 10 + Math.random() * 15 + "px";
-      snow.style.animationDuration = 5 + Math.random() * 10 + "s";
-      this.shadowRoot.querySelector('.santa-container').appendChild(snow);
+    // Add stars
+    for (let i = 0; i < 30; i++) {
+      const star = document.createElement("div");
+      star.className = "star";
+      star.textContent = "✦";
+      star.style.left = Math.random() * 100 + "vw";
+      star.style.top = Math.random() * 100 + "vh";
+      star.style.fontSize = Math.random() * 10 + 8 + "px";
+      star.style.animationDelay = Math.random() * 3 + "s";
+      this.shadowRoot.querySelector('.santa-container').appendChild(star);
     }
   }
 }
-
 customElements.define('santa-animation', SantaAnimation);

index.html

@@ -452,7 +452,7 @@ Get Started Now
     </div>
     <!-- Footer Component -->
 <script src="components/footer.js"></script>
-<script>
+    <script>
         var player;
 
         function onYouTubeIframeAPIReady() {

script.js

@@ -147,6 +147,60 @@ function initFaqChat() {
 
 document.addEventListener('DOMContentLoaded', () => {
   initFaqChat();
+  
+  // Create Christmas elements
+  function createChristmasElements() {
+// Create snowflakes container
+const snowContainer = document.createElement('div');
+    snowContainer.style.position = 'fixed';
+    snowContainer.style.top = '0';
+    snowContainer.style.left = '0';
+    snowContainer.style.width = '100%';
+    snowContainer.style.height = '100%';
+    snowContainer.style.pointerEvents = 'none';
+    snowContainer.style.zIndex = '9999';
+    document.body.appendChild(snowContainer);
+
+    function createSnowflake() {
+        const snowflake = document.createElement('div');
+        snowflake.textContent = '❆';
+        snowflake.style.position = 'absolute';
+        snowflake.style.color = 'white';
+        snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
+        snowflake.style.opacity = Math.random();
+        snowflake.style.left = Math.random() * window.innerWidth + 'px';
+        snowflake.style.top = '-20px';
+        snowflake.style.animation = `fall ${5 + Math.random() * 10}s linear infinite`;
+        snowContainer.appendChild(snowflake);
+        setTimeout(() => snowflake.remove(), 15000);
+    }
+
+    // Create Christmas decorations
+    function createDecoration() {
+        const deco = document.createElement('div');
+        deco.className = 'christmas-decoration';
+        deco.style.left = Math.random() * window.innerWidth + 'px';
+        deco.style.top = Math.random() * window.innerHeight + 'px';
+        
+        const decoTypes = ['🎄', '🎅', '🎁', '🔔', '🧦'];
+        deco.textContent = decoTypes[Math.floor(Math.random() * decoTypes.length)];
+        deco.style.fontSize = Math.random() * 20 + 20 + 'px';
+        deco.style.animationDelay = Math.random() * 5 + 's';
+        
+        document.body.appendChild(deco);
+    }
+
+    // Snow falling animation
+    setInterval(createSnowflake, 150);
+    
+    // Add decorations
+    for (let i = 0; i < 15; i++) {
+        createDecoration();
+    }
+}
+
+// Initialize Christmas elements
+createChristmasElements();
 const style = document.createElement('style');
     style.innerHTML = `
     @keyframes fall {

style.css

@@ -48,6 +48,18 @@ body::after {
     pointer-events: none;
     z-index: -1;
 }
+/* Christmas decorations */
+.christmas-decoration {
+    position: fixed;
+    z-index: 9997;
+    pointer-events: none;
+    animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
 .font-orbitron {
     font-family: 'Orbitron', sans-serif;
 }