@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}.hide-scroll-bar[data-astro-cid-e5fzylbb]::-webkit-scrollbar{display:none}.hide-scroll-bar[data-astro-cid-e5fzylbb]{-ms-overflow-style:none;scrollbar-width:none}@keyframes bounce_horizontal{0%,100% {transform: translateX(-25%); animation-timing-function: cubic-bezier(.8,0,1,1);} 50% {transform: translateX(0); animation-timing-function: cubic-bezier(0,0,.2,1);} --- const testimonials = [{name: "Ahmad Rizki",role: "Server Owner",comment: "Layanan hosting yang sangat memuaskan! Server SA-MP saya berjalan lancar tanpa lag dengan ping yang sangat stabil. Support dari tim teknis juga merespons dengan cepat.",rating: 5,avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ahmad&backgroundColor=b6e3f4"},{name: "Budi Santoso",role: "Web Developer",comment: "Kualitas pembuatan website luar biasa. Desain yang modern, interaktif, responsif, dan performa sangat cepat. Sangat direkomendasikan untuk Anda yang butuh website premium.",rating: 5,avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Budi&backgroundColor=c0aede"},{name: "Citra Amelia",role: "Community Manager",comment: "Uptime server benar-benar terjamin. Jarang sekali mengalami permasalahan berarti. Panel yang disediakan juga sangat interaktif memudahkan navigasi server saya.",rating: 4,avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Citra&backgroundColor=ffdfbf"},{name: "Deni Pratama",role: "Game Developer",comment: "Harga yang ditawarkan sangat kompetitif dengan performa tinggi yang didapat. Server game saya jadi lebih ramai karena pemain puas dengan koneksi yang tanpa putus.",rating: 5,avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Deni&backgroundColor=d1d4f9"},{name: "Eko Wahyudi",role: "Client VIP",comment: "Pelayanan konsumen yang super ramah dan profesional. Setiap ada masalah, mereka siap terjun menyelesaikan kendalanya. Terima kasih untuk komitmen kualitasnya!",rating: 5,avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Eko&backgroundColor=b6e3f4"}]; --- <section id="survey" class="py-16 md:py-24 relative overflow-hidden"> <!-- Decorative background blobs --> <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))] from-primary/5 via-background to-background pointer-events-none -z-10"></div> <div class="container relative z-10"> <div class="text-center mb-12"> <h2 class="section-title">Apa Kata Mereka?</h2> <p class="text-gray-700 mt-4 max-w-2xl mx-auto"> Kenyamanan dan kepuasan Anda adalah prioritas kami. Lihat bagaimana layanan terbaik dari kami membantu menyukseskan proyek mereka. </p> </div> <div class="relative -mx-4 sm:mx-0"> <!-- Slider Container --> <div class="slider-container flex overflow-x-auto gap-6 snap-x snap-mandatory hide-scroll-bar pb-12 pt-4 px-4 sm:px-12 cursor-grab select-none"> {testimonials.map((item) => (<div class="snap-center shrink-0 w-[300px] sm:w-[360px] md:w-[400px] glass p-8 rounded-2xl flex flex-col gap-5 relative group hover:-translate-y-2 hover:shadow-[0_20px_40px_rgba(124,58,237,0.15)] transition-all duration-500 border border-white/10 dark:border-white/5 backdrop-blur-md bg-white/40 dark:bg-[#1a1a1a]/40"> <!-- Quote Icon Decoration --> <div class="absolute top-6 right-6 opacity-50 text-primary group-hover:scale-110 transition-transform duration-500"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="currentColor"> <path d="M14.017 18L14.017 14.923C14.017 12.183 14.161 7.25 19.351 7.25L19.351 10.457C17.476 10.457 16.945 11.517 16.945 13.061C16.945 13.061 19.324 13.061 19.324 18L14.017 18ZM5.25098 18L5.25098 14.923C5.25098 12.183 5.39498 7.25 10.585 7.25L10.585 10.457C8.71 10.457 8.17898 11.517 8.17898 13.061C8.17898 13.061 10.558 13.061 10.558 18L5.25098 18Z" /> </svg> </div> <!-- Rating Stars --> <div class="flex gap-1.5 text-yellow-400 drop-shadow-sm"> {Array.from({length: item.rating}).map(() => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" /> </svg>))} </div> <!-- Comment Text --> <p class="text-gray-700 italic grow text-[15px] leading-relaxed relative z-10">"{item.comment}"</p> <!-- User Info --> <div class="flex items-center gap-4 mt-2 pt-5 border-t border-gray-200/50 transition-colors duration-300"> <div class="relative"> <div class="absolute inset-0 bg-primary/20 rounded-full blur-md group-hover:bg-primary/40 transition-colors duration-300"></div> <img src={item.avatar} alt={`Avatar profil ${item.name}`} class="relative w-12 h-12 rounded-full bg-white object-cover border-2 border-white shadow-sm" loading="lazy" /> </div> <div> <h4 class="font-semibold text-gray-900 group-hover:text-primary transition-colors duration-300">{item.name}</h4> <p class="text-xs text-gray-500 font-medium">{item.role}</p> </div> </div> </div>))} </div> <!-- Scroll Instructions --> <div class="flex justify-center items-center mt-2 gap-2 text-primary/80"> <span class="text-xs font-semibold tracking-widest uppercase opacity-80">Geser</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4 animate-[bounce_1s_infinite_horizontal]"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" /> </svg> </div> </div> </div> </section> <style> .hide-scroll-bar::-webkit-scrollbar {display: none;} .hide-scroll-bar {-ms-overflow-style: none; scrollbar-width: none;} @keyframes bounce_horizontal {0%,100% {transform: translateX(-25%); animation-timing-function: cubic-bezier(.8,0,1,1);} 50% {transform: translateX(0); animation-timing-function: cubic-bezier(0,0,.2,1);}} .animate-\[bounce_1s_infinite_horizontal\] {animation: bounce_horizontal 1s infinite;}}