Merge version_3_1776780769352 into main

Merge version_3_1776780769352 into main

src/App.tsx

@@ -12,6 +12,14 @@ import TestimonialMetricsCards from '@/components/sections/testimonial/Testimoni
 export default function App() {
   return (
     <div className="pt-24">
+      <div className="fixed bottom-4 right-4 z-50 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-green-100 text-green-800 text-sm font-medium shadow-lg">
+        <span className="relative flex h-2 w-2">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+        </span>
+        Live
+      </div>
+
       <div id="nav" data-section="nav">
         <NavbarCentered
           logo="IT Academy"

src/index.css

@@ -3,6 +3,13 @@
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
 :root {
   /* @colorThemes/lightTheme/grayBlueAccent */
   --background: #000000;
@@ -172,4 +179,4 @@ h6 {
   background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   border: 1px solid var(--color-secondary-cta);
-}
+}

src/styles/animations.css

@@ -134,6 +134,10 @@
   animation: pulsate 1.5s infinite;
 }
 
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
 .animation-container {
   animation: fadeInOpacity 0.8s ease-in-out forwards, fadeInTranslate 0.6s forwards;
 }
@@ -168,4 +172,4 @@
 
 .animate-progress {
   animation: progress linear forwards;
-}
+}