<div class="hero2_container" x-data="{ isZoomingIn: true }" x-init="setInterval(() => isZoomingIn = !isZoomingIn, 15000)"> <!-- Text Box --> <div class="hero2_text-box"> <h2 class="hero2_title"> {{config["title"]}} </h2> <p class="hero2_subtitle"> {{config["subtitle"]}} </p> </div> <!-- Image Wrapper --> <div class="hero2_image-wrapper"> <img src="{{config["image"]}}" class="hero2_floating-image" :style="isZoomingIn ? 'transform: scale(1.5)' : 'transform: scale(1)'" style="transition: transform 20s ease-in"> </div> </div> <style> main { background-color: var(--body-background); transition: background-color 0.3s; } .hero2_container { position: relative; padding: 3rem; background-color: var(--modal-background); border-radius: 1.5rem; box-shadow: 0 8px 32px #00000026; min-height: 400px; width: 100%; max-width: 1200px; overflow: hidden; display: flex; align-items: center; margin: 2rem auto; transition: all 0.3s ease; } .hero2_text-box { position: relative; z-index: 3; max-width: 500px; padding-right: 2rem; } .hero2_title { font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: bold; color: var(--text-color); margin: 0; text-shadow: 0 1px 2px #0000001A; line-height: 1.2; transition: color 0.3s; } .hero2_subtitle { margin-top: 1rem; background-color: #385bb5; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; display: inline-block; box-shadow: 0 2px 4px #0000001A; font-size: clamp(0.875rem, 2vw, 1rem); max-width: 100%; transition: all 0.3s ease; } .light-theme .hero2_subtitle { background-color: #385bb5; color: white; } .hero2_image-wrapper { position: absolute; top: 50%; right: 0; width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center; z-index: 2; pointer-events: none; transform: translateY(-50%); } .hero2_floating-image { width: 1000px; max-width: 100%; height: auto; transition: transform 15s ease-in; margin-right: -100px; transform-origin: center center; } [x-cloak] { display: none !important; } @media (max-width: 768px) { .hero2_container { padding: 2rem; min-height: 250px; width: 90%; margin: 1rem auto; } .hero2_text-box { padding-right: 0; max-width: 100%; } .hero2_image-wrapper { opacity: 0.4; } .hero2_floating-image { margin-right: -200px; } .hero2_subtitle { margin-top: 0.75rem; } } @media (max-width: 480px) { .hero2_container { padding: 1.2rem; min-height: 200px; width: 85%; } .hero2_floating-image { margin-right: -200px; } } </style>