Remove floating cards completely - prefer mobile layout style

Author: TheWildJames

index.html

@@ -64,28 +64,6 @@
     <section id="home" class="hero">
         <!-- Desktop Hero -->
         <div class="hero-content desktop-hero">
-            <div class="floating-card card-1">
-                <a href="https://github.com/KernelSU-Next/KernelSU-Next" target="_blank" rel="noopener noreferrer">
-                    <i class="fas fa-yin-yang"></i>
-                    <span>KernelSU Next</span>
-                </a>
-            </div>
-            <div class="floating-card card-2">
-                <a href="https://gitlab.com/simonpunk/susfs4ksu" target="_blank" rel="noopener noreferrer">
-                    <i class="fas fa-eye-slash"></i>
-                    <span>SUSFS</span>
-                </a>
-            </div>
-            <div class="floating-card card-3">
-                <a href="https://github.com/WildKernels" target="_blank" rel="noopener noreferrer">
-                    <i class="fas fa-code-branch"></i>
-                    <span>Open Source</span>
-                </a>
-            </div>
-            <div class="floating-card card-4">
-                <i class="fas fa-exclamation-triangle"></i>
-                <span>Proceed at Risk</span>
-            </div>
 
             <h1>Wild Kernels for Android</h1>
             <h2>⚠️ Your warranty is no longer valid!</h2>

script.js

@@ -87,9 +87,6 @@ class DeviceManager {
         // Reduce animations on mobile for better performance
         const style = document.createElement('style');
         style.textContent = `
-            .mobile-device .floating-card {
-                animation: none !important;
-            }
             .mobile-device * {
                 transition-duration: 0.2s !important;
             }
@@ -99,28 +96,9 @@ class DeviceManager {
 
     enableDesktopAnimations() {
         // Enhanced desktop animations
-        this.setupFloatingCards();
         this.setupMouseFollower();
     }
 
-    setupFloatingCards() {
-        const cards = document.querySelectorAll('.floating-card');
-        cards.forEach((card, index) => {
-            // Add random floating animation delays
-            const delay = Math.random() * 2;
-            card.style.animationDelay = `${delay}s`;
-            
-            // Add mouse interaction
-            card.addEventListener('mouseenter', () => {
-                card.style.transform = 'translateY(-10px) scale(1.05)';
-            });
-            
-            card.addEventListener('mouseleave', () => {
-                card.style.transform = '';
-            });
-        });
-    }
-    
     setupMouseFollower() {
         if (!this.isMobile) {
             let mouseX = 0, mouseY = 0;
@@ -156,16 +134,7 @@ class DeviceManager {
 
     setupParallaxEffects() {
         if (!this.isMobile) {
-            window.addEventListener('scroll', () => {
-                const scrolled = window.pageYOffset;
-                const parallaxElements = document.querySelectorAll('.floating-card');
-                
-                parallaxElements.forEach((element, index) => {
-                    const speed = 0.5 + (index * 0.1);
-                    const yPos = -(scrolled * speed);
-                    element.style.transform = `translateY(${yPos}px)`;
-                });
-            });
+            // Parallax effects can be added here for other elements if needed
         }
     }
 
@@ -305,7 +274,7 @@ class AnimationManager {
         }, observerOptions);
 
         // Observe elements that should animate in
-        const animatedElements = document.querySelectorAll('.fade-in, .hero-content, .floating-card');
+        const animatedElements = document.querySelectorAll('.fade-in, .hero-content');
         animatedElements.forEach(el => {
             el.classList.add('fade-in');
             observer.observe(el);

style.css

@@ -414,56 +414,7 @@ body {
     color: var(--dark-gray);
 }
 
-/* Floating Cards (Desktop) */
-.floating-card {
-    position: absolute;
-    background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(20px);
-    padding: 20px;
-    border-radius: 20px;
-    box-shadow: var(--shadow-medium);
-    animation: float 6s ease-in-out infinite;
-    border: 1px solid rgba(76, 175, 80, 0.2);
-}
 
-.floating-card i {
-    font-size: 2rem;
-    color: var(--secondary-green);
-}
-
-.floating-card span {
-    font-weight: var(--font-weight-medium);
-    color: var(--dark-gray);
-}
-
-.card-1 {
-    top: 20%;
-    left: 10%;
-    animation-delay: 0s;
-}
-
-.card-2 {
-    top: 30%;
-    right: 15%;
-    animation-delay: 2s;
-}
-
-.card-3 {
-    bottom: 30%;
-    left: 15%;
-    animation-delay: 4s;
-}
-
-.card-4 {
-    bottom: 20%;
-    right: 10%;
-    animation-delay: 1s;
-}
-
-@keyframes float {
-    0%, 100% { transform: translateY(0px); }
-    50% { transform: translateY(-20px); }
-}
 
 @keyframes pulse {
     0%, 100% { transform: scale(1); }
@@ -540,10 +491,6 @@ body {
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    .floating-card {
-        display: none;
-    }
-    
     .nav-container {
         height: 60px;
     }
@@ -1316,28 +1263,7 @@ body {
     box-shadow: var(--glow-accent);
 }
 
-/* Floating Card Links */
-.floating-card a {
-    color: inherit;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    height: 100%;
-}
-
-.floating-card a:hover {
-    color: var(--accent-blue);
-    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
-}
 
-.floating-card a:hover i {
-    color: var(--accent-blue);
-    text-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
-}
 
 /* Mobile Feature Links */
 .mobile-feature a {