Animated Database Schema Status Card

<div
  class="max-w-sm overflow-hidden sm:p-4 bg-black/30 max-h-none border-white/10 border rounded-xl pt-3 pr-3 pb-3 pl-3 relative">
  <div class="pointer-events-none absolute inset-px rounded-xl ring-1 ring-inset ring-white/10"></div>

  <!-- Header -->
  <div class="flex items-center justify-between mb-3">
    <span class="text-xs text-zinc-400 font-medium">Database Schema</span>
    <span class="text-[10px] text-emerald-400">● Live</span>
  </div>

  <!-- Schema Animation Container -->
  <div class="relative h-48 sm:h-56 rounded-lg bg-gradient-to-b from-slate-900 to-black overflow-hidden">
    <div class="flex max-h-full absolute top-0 right-0 bottom-0 left-0 items-center justify-center">
      <!-- Central Database Hub -->
      <div class="relative z-20">
        <div
          class="h-20 w-20 rounded-2xl bg-gradient-to-br from-violet-600/30 to-fuchsia-600/30 border-2 border-violet-400/50 flex items-center justify-center shadow-[0_0_40px_rgba(139,92,246,0.5)] backdrop-blur-sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="h-9 w-9 text-violet-200">
            <ellipse cx="12" cy="5" rx="9" ry="3" class=""></ellipse>
            <path d="M3 5V19A9 3 0 0 0 21 19V5" class=""></path>
            <path d="M3 12A9 3 0 0 0 21 12" class=""></path>
          </svg>
          <div
            class="absolute inset-0 rounded-2xl bg-gradient-to-br from-violet-500/20 to-fuchsia-500/20 animate-pulse">
          </div>
        </div>

        <!-- Integrations Schema -->
        <div class="glass overflow-hidden max-h-fit rounded-2xl mb-0 pt-16 pr-5 pb-0 pl-5 space-y-0">
          <div class="text-center mb-4">
            <span class="text-[10px] uppercase tracking-[0.2em] text-lime-300/90">
                            Integrations
                          </span>
            <h4 class="text-2xl font-semibold tracking-tight mt-1">
              Seamlessly integrate
            </h4>
            <p class="text-xs text-neutral-400">
              with your favourite tools
            </p>
          </div>

          <!-- Icons Row -->


          <!-- New Wave Animation Schema -->
          <div class="w-64 h-44 max-w-fit relative">
            <svg viewBox="0 0 320 176" class="absolute top-0 right-0 bottom-0 left-0 w-[230px] h-[176px]"
              stroke-width="2" data-icon-replaced="true"
              style="width: 230px; height: 176px; color: rgb(255, 255, 255);">
              <!-- Outer waves -->
              <path d="M0 88 Q 53 40, 106 88 T 212 88 T 320 88" stroke="rgba(163,230,53,0.2)" stroke-width="2"
                fill="none" class="wave-path" style="animation: wave 4s ease-in-out infinite;"></path>
              <path d="M0 88 Q 53 60, 106 88 T 212 88 T 320 88" stroke="rgba(163,230,53,0.3)" stroke-width="2"
                fill="none" class="wave-path" style="animation: wave 3.5s ease-in-out infinite 0.2s;"></path>
              <!-- Middle waves -->
              <path d="M0 88 Q 53 70, 106 88 T 212 88 T 320 88" stroke="rgba(163,230,53,0.5)" stroke-width="2.5"
                fill="none" class="wave-path" style="animation: wave 3s ease-in-out infinite 0.4s;"></path>
              <path d="M0 88 Q 53 75, 106 88 T 212 88 T 320 88" stroke="#a3e635" stroke-width="3" fill="none"
                class="wave-path" style="animation: wave 2.8s ease-in-out infinite 0.6s;"></path>
              <!-- Inner glow waves -->
              <path d="M0 88 Q 53 75, 106 88 T 212 88 T 320 88" stroke="rgba(163,230,53,0.4)" stroke-width="8"
                fill="none" opacity="0.3" class="wave-path"
                style="animation: wave 2.8s ease-in-out infinite 0.6s; filter: blur(4px);">
              </path>
              <!-- Flowing particles -->
              <circle cx="80" cy="88" r="3" fill="#a3e635" opacity="0.8" class="flowing-particle"
                style="animation: flowParticle 5s ease-in-out infinite;"></circle>
              <circle cx="160" cy="88" r="2.5" fill="#a3e635" opacity="0.6" class="flowing-particle"
                style="animation: flowParticle 4.5s ease-in-out infinite 1s;"></circle>
              <circle cx="240" cy="88" r="3" fill="#a3e635" opacity="0.7" class="flowing-particle"
                style="animation: flowParticle 5.5s ease-in-out infinite 2s;"></circle>
            </svg>

            <!-- Destination cube with pulse -->

          </div>

          <style>
            @keyframes wave {

              0%,
              100% {
                d: path("M0 88 Q 53 70, 106 88 T 212 88 T 320 88");
              }

              25% {
                d: path("M0 88 Q 53 100, 106 88 T 212 88 T 320 88");
              }

              50% {
                d: path("M0 88 Q 53 76, 106 88 T 212 88 T 320 88");
              }

              75% {
                d: path("M0 88 Q 53 94, 106 88 T 212 88 T 320 88");
              }
            }

            @keyframes flowParticle {
              0% {
                cx: 0;
                cy: 88;
                opacity: 0;
              }

              10% {
                opacity: 0.8;
              }

              50% {
                cy: 70;
              }

              90% {
                opacity: 0.8;
              }

              100% {
                cx: 320;
                cy: 88;
                opacity: 0;
              }
            }

            @keyframes destinationPulse {

              0%,
              100% {
                transform: translate(-50%, 0) scale(1);
                box-shadow: 0 0 30px rgba(163, 230, 53, 0.45);
              }

              50% {
                transform: translate(-50%, 0) scale(1.1);
                box-shadow: 0 0 45px rgba(163, 230, 53, 0.7);
              }
            }

            .wave-path {
              transform-origin: center;
            }
          </style>
        </div>

        <!-- Stats Row -->
        <div class="mt-4 grid grid-cols-3 gap-2 text-center">
          <div class="rounded-lg border border-white/10 bg-white/[0.02] p-2">
            <div class="text-xs text-zinc-500 mb-0.5">Tables</div>
            <div class="text-sm font-semibold text-zinc-200">47</div>
          </div>
          <div class="rounded-lg border border-white/10 bg-white/[0.02] p-2">
            <div class="text-xs text-zinc-500 mb-0.5">Relations</div>
            <div class="text-sm font-semibold text-sky-300">124</div>
          </div>
          <div class="rounded-lg border border-white/10 bg-white/[0.02] p-2">
            <div class="text-xs text-zinc-500 mb-0.5">Queries/s</div>
            <div class="text-sm font-semibold text-emerald-400">2.4k</div>
          </div>
        </div>
      </div>

      <!-- Description -->


      <style>
        .orbit-container {
          position: absolute;
          width: 180px;
          height: 180px;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .orbit-node {
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -20px;
          margin-top: -20px;
        }

        .orbit-1 {
          animation: orbit1 10s linear infinite;
        }

        .orbit-2 {
          animation: orbit2 10s linear infinite;
        }

        .orbit-3 {
          animation: orbit3 10s linear infinite;
        }

        .orbit-4 {
          animation: orbit4 10s linear infinite;
        }

        @keyframes orbit1 {
          from {
            transform: rotate(0deg) translateX(90px) rotate(0deg);
          }

          to {
            transform: rotate(360deg) translateX(90px) rotate(-360deg);
          }
        }

        @keyframes orbit2 {
          from {
            transform: rotate(90deg) translateX(90px) rotate(-90deg);
          }

          to {
            transform: rotate(450deg) translateX(90px) rotate(-450deg);
          }
        }

        @keyframes orbit3 {
          from {
            transform: rotate(180deg) translateX(90px) rotate(-180deg);
          }

          to {
            transform: rotate(540deg) translateX(90px) rotate(-540deg);
          }
        }

        @keyframes orbit4 {
          from {
            transform: rotate(270deg) translateX(90px) rotate(-270deg);
          }

          to {
            transform: rotate(630deg) translateX(90px) rotate(-630deg);
          }
        }

        @keyframes pulse-glow {

          0%,
          100% {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
          }

          50% {
            box-shadow: 0 0 35px rgba(139, 92, 246, 0.6);
          }
        }

        .animate-pulse-glow {
          animation: pulse-glow 3s ease-in-out infinite;
        }

        .particle {
          position: absolute;
          width: 4px;
          height: 4px;
          border-radius: 50%;
          opacity: 0;
        }

        .particle-1 {
          background: rgba(139, 92, 246, 0.9);
          animation: flow-particle-1 5s ease-in-out infinite;
        }

        .particle-2 {
          background: rgba(56, 189, 248, 0.9);
          animation: flow-particle-2 5s ease-in-out infinite 1s;
        }

        .particle-3 {
          background: rgba(16, 185, 129, 0.9);
          animation: flow-particle-3 5s ease-in-out infinite 2s;
        }

        .particle-4 {
          background: rgba(217, 70, 239, 0.9);
          animation: flow-particle-4 5s ease-in-out infinite 3s;
        }

        .particle-5 {
          background: rgba(6, 182, 212, 0.9);
          animation: flow-particle-1 5s ease-in-out infinite 2.5s;
        }

        .particle-6 {
          background: rgba(139, 92, 246, 0.9);
          animation: flow-particle-3 5s ease-in-out infinite 4s;
        }

        @keyframes flow-particle-1 {
          0% {
            top: 15%;
            left: 50%;
            opacity: 0;
          }

          20% {
            opacity: 1;
          }

          50% {
            top: 50%;
            left: 50%;
            opacity: 1;
          }

          80% {
            opacity: 0.6;
          }

          100% {
            top: 50%;
            left: 85%;
            opacity: 0;
          }
        }

        @keyframes flow-particle-2 {
          0% {
            top: 50%;
            left: 85%;
            opacity: 0;
          }

          20% {
            opacity: 1;
          }

          50% {
            top: 50%;
            left: 50%;
            opacity: 1;
          }

          80% {
            opacity: 0.6;
          }

          100% {
            top: 85%;
            left: 50%;
            opacity: 0;
          }
        }

        @keyframes flow-particle-3 {
          0% {
            top: 85%;
            left: 50%;
            opacity: 0;
          }

          20% {
            opacity: 1;
          }

          50% {
            top: 50%;
            left: 50%;
            opacity: 1;
          }

          80% {
            opacity: 0.6;
          }

          100% {
            top: 50%;
            left: 15%;
            opacity: 0;
          }
        }

        @keyframes flow-particle-4 {
          0% {
            top: 50%;
            left: 15%;
            opacity: 0;
          }

          20% {
            opacity: 1;
          }

          50% {
            top: 50%;
            left: 50%;
            opacity: 1;
          }

          80% {
            opacity: 0.6;
          }

          100% {
            top: 15%;
            left: 50%;
            opacity: 0;
          }
        }
      </style>
    </div>

    <script>
      (function() {
            // Chat functionality
            const chatInput = document.getElementById('chatInput');
            const sendButton = document.getElementById('sendButton');
            const chatMessages = document.getElementById('chatMessages');
            const userMessage = document.getElementById('userMessage');
            const aiMessage = document.getElementById('aiMessage');
            const userTime = document.getElementById('userTime');
            const aiTime = document.getElementById('aiTime');
            const meetingCard = document.getElementById('meetingCard');
            const meetingDetails = document.getElementById('meetingDetails');
            
            function getCurrentTime() {
              const now = new Date();
              return now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
            }
            
            function simulateAIResponse(message) {
              const responses = {
                'meeting': 'Done. I\'ve scheduled a Zoom meeting with the design team for Thursday at 11:00 AM.',
                'report': 'I\'ve generated the quarterly performance report. It shows a 42% increase in productivity.',
                'task': 'Task created and assigned to the team. I\'ve set the deadline for next Friday.',
                'default': 'I understand. Let me help you with that right away.'
              };
              
              const lowerMsg = message.toLowerCase();
              if (lowerMsg.includes('meeting') || lowerMsg.includes('call') || lowerMsg.includes('zoom')) {
                return responses.meeting;
              } else if (lowerMsg.includes('report') || lowerMsg.includes('analytics')) {
                return responses.report;
              } else if (lowerMsg.includes('task') || lowerMsg.includes('create')) {
                return responses.task;
              }
              return responses.default;
            }
            
            function sendMessage() {
              const message = chatInput.value.trim();
              if (!message) return;
              
              const time = getCurrentTime();
              userMessage.textContent = message;
              userTime.textContent = time;
              chatInput.value = '';
              
              setTimeout(() => {
                const response = simulateAIResponse(message);
                aiMessage.textContent = response;
                aiTime.textContent = time;
                
                if (message.toLowerCase().includes('meeting') || message.toLowerCase().includes('call')) {
                  meetingCard.style.display = 'block';
                  meetingDetails.textContent = 'Design Sync • Thursday 11:00 AM';
                } else {
                  meetingCard.style.display = 'none';
                }
              }, 800);
            }
            
            sendButton.addEventListener('click', sendMessage);
            chatInput.addEventListener('keypress', (e) => {
              if (e.key === 'Enter') sendMessage();
            });
            
            // Generative AI functionality
            const promptInput = document.getElementById('promptInput');
            const createButton = document.getElementById('createButton');
            const renderStatus = document.getElementById('renderStatus');
            const starfield = document.getElementById('starfield');
            
            function simulateRendering() {
              const prompt = promptInput.value.trim();
              if (!prompt) return;
              
              renderStatus.textContent = 'Rendering...';
              renderStatus.parentElement.classList.add('animate-pulse');
              promptInput.value = '';
              
              // Simulate rendering time
              setTimeout(() => {
                renderStatus.textContent = 'Complete';
                renderStatus.parentElement.classList.remove('animate-pulse');
                
                // Reset after 2 seconds
                setTimeout(() => {
                  renderStatus.textContent = 'Ready';
                }, 2000);
              }, 3000);
            }
            
            createButton.addEventListener('click', simulateRendering);
            promptInput.addEventListener('keypress', (e) => {
              if (e.key === 'Enter') simulateRendering();
            });
          })();
    </script>
  </div>
</div>