Seyahat Hero Slider – Tailwind CSS<\/title><br \/>\n <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.css\" \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/iconify\/2.2.1\/iconify.min.js\"><\/script><br \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script><\/p>\n<style>\n @keyframes paginationProgress {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n }<\/p>\n<p> .swiper-pagination-bullet::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: #F59E0B;\n opacity: 0;\n }<\/p>\n<p> .swiper-pagination-bullet-active::after {\n opacity: 1;\n animation: paginationProgress 5s linear forwards;\n }<\/p>\n<p> \/* Parallax effect for background images *\/\n .slide-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n transition: transform 0.9s ease;\n }<\/p>\n<p> \/* Remove content animations - make all slide content fully visible *\/\n .slide-content {\n opacity: 1;\n transform: translateY(0);\n }<\/p>\n<p> \/* Custom cursor for slider *\/\n .custom-cursor {\n width: 80px;\n height: 80px;\n border: 2px solid rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n position: fixed;\n pointer-events: none;\n mix-blend-mode: difference;\n z-index: 9999;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n font-size: 12px;\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.1s ease;\n }<\/p>\n<p> .slider-wrapper:hover .custom-cursor {\n opacity: 1;\n }<\/p>\n<p> \/* Hide default navigation arrows *\/\n .swiper-button-next:after,\n .swiper-button-prev:after {\n display: none;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-900 font-sans\"><br \/>\n <\/p>\n<div class=\"custom-cursor\">KE\u015eFET<\/div>\n<div class=\"slider-wrapper relative w-full h-screen overflow-hidden\">\n<div class=\"swiper w-full h-full\">\n<div class=\"swiper-wrapper\">\n <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-purple-900\/70 to-indigo-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Yunanistan<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Yaz Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:island\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Santorini<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Beyaz badanal\u0131 evleri, muhte\u015fem g\u00fcn bat\u0131mlar\u0131 ve kristal berrakl\u0131\u011f\u0131ndaki sular\u0131 ile Ege’nin incisi Santorini’de unutulmaz bir tatil deneyimi ya\u015fay\u0131n.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-indigo-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-rose-900\/70 to-pink-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Fransa<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Bahar Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:eiffel-tower\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Paris<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">A\u015f\u0131klar \u015fehri Paris’te romantik bir ka\u00e7amak yap\u0131n. Eiffel Kulesi’nden Seine Nehri’ne, Louvre M\u00fczesi’nden Montmartre’a kadar ke\u015ffetmeniz gereken bir \u015fehir.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-rose-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-emerald-900\/70 to-teal-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Endonezya<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">T\u00fcm Y\u0131l<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:palm-tree\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Bali<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Tropikal cenneti Bali’de huzuru ke\u015ffedin. G\u00f6z al\u0131c\u0131 kumsallar, tertemiz okyanuslar, ye\u015fil pirin\u00e7 tarlalar\u0131 ve Bali tap\u0131naklar\u0131 ile do\u011fa ve k\u00fclt\u00fcr\u00fcn bulu\u015ftu\u011fu nokta.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-emerald-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-900\/70 to-indigo-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">ABD<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Sonbahar Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:city-variant\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">New York<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uyumayan \u015fehir New York’ta muhte\u015fem bir \u015fehir turu deneyimi ya\u015fay\u0131n. Broadway \u015fovlar\u0131, Central Park, Empire State Building ve daha fazlas\u0131 ile unutulmaz an\u0131lar biriktirin.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-blue-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-pagination absolute bottom-16 left-0 w-full flex justify-center items-center gap-3 mb-3\"><\/div>\n<p> <\/p>\n<div class=\"absolute bottom-16 right-16 flex items-center gap-4 z-20\">\n<div class=\"swiper-button-prev flex items-center justify-center bg-black bg-opacity-30 w-14 h-14 rounded-full transition duration-300 hover:bg-amber-500 backdrop-blur-sm\">\n <span class=\"iconify text-white\" data-icon=\"mdi:arrow-left\" data-width=\"24\" data-height=\"24\"><\/span>\n <\/div>\n<div class=\"swiper-button-next flex items-center justify-center bg-black bg-opacity-30 w-14 h-14 rounded-full transition duration-300 hover:bg-amber-500 backdrop-blur-sm\">\n <span class=\"iconify text-white\" data-icon=\"mdi:arrow-right\" data-width=\"24\" data-height=\"24\"><\/span>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"absolute bottom-16 left-16 z-20 text-white\">\n<div class=\"text-5xl font-bold\">\n <span class=\"swiper-pagination-current\">1<\/span><br \/>\n <span class=\"text-white\/50\">\/<\/span><br \/>\n <span class=\"swiper-pagination-total\">4<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.js\"><\/script><br \/>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const AUTOPLAY_DELAY = 5000; \/\/ 5 saniye (CSS animasyon s\u00fcresiyle e\u015fle\u015fmeli)<\/p>\n<p> \/\/ Custom cursor functionality\n const cursor = document.querySelector('.custom-cursor');\n const sliderWrapper = document.querySelector('.slider-wrapper');<\/p>\n<p> sliderWrapper.addEventListener('mousemove', (e) => {\n cursor.style.left = e.clientX + 'px';\n cursor.style.top = e.clientY + 'px';\n });<\/p>\n<p> sliderWrapper.addEventListener('mouseleave', () => {\n cursor.style.opacity = '0';\n });<\/p>\n<p> sliderWrapper.addEventListener('mouseenter', () => {\n cursor.style.opacity = '1';\n });<\/p>\n<p> \/\/ Pagination loading animasyonunu yeniden ba\u015flatma fonksiyonu\n function restartPaginationAnimation() {\n \/\/ Aktif bullet'\u0131 bulma\n const activeBullet = document.querySelector('.swiper-pagination-bullet-active');\n if (activeBullet) {\n \/\/ Animasyonu yeniden ba\u015flatmak i\u00e7in after elementini s\u0131f\u0131rlama\n activeBullet.classList.remove('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.add('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.remove('animation-reset');\n }\n }<\/p>\n<p> \/\/ Parallax effect for backgrounds\n function handleParallax(swiper) {\n const slides = swiper.slides;\n for (let i = 0; i < slides.length; i++) {\n const slideProgress = slides[i].progress;\n const innerElements = slides[i].querySelectorAll('.slide-bg');\n if (innerElements.length > 0) {\n const innerTranslate = slideProgress * 30;\n innerElements[0].style.transform = `translate3d(${innerTranslate}%, 0, 0) scale(${1 - Math.abs(slideProgress) * 0.1})`;\n }\n }\n }<\/p>\n<p> \/\/ Tailwind breakpoint de\u011ferlerini js'de kullanmak i\u00e7in\n const breakpoints = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536\n };<\/p>\n<p> var swiper = new Swiper('.swiper', {\n \/\/ Zorunlu parametreler\n loop: true,\n speed: 1000,\n grabCursor: false, \/\/ We use custom cursor\n autoplay: {\n delay: AUTOPLAY_DELAY,\n disableOnInteraction: false,\n },<\/p>\n<p> \/\/ Effect\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },<\/p>\n<p> \/\/ Pagination\n pagination: {\n el: '.swiper-pagination',\n clickable: true,\n type: 'bullets',\n renderBullet: function (index, className) {\n return '<span class=\"' + className + ' w-12 h-1 bg-white bg-opacity-70 opacity-70 rounded-sm relative overflow-hidden transition-all duration-300 hover:opacity-100\"><\/span>';\n },\n },<\/p>\n<p> \/\/ Navigasyon tu\u015flar\u0131\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n hiddenClass: 'hidden'\n },<\/p>\n<p> \/\/ Custom fraction pagination\n on: {\n init: function() {\n const paginationCurrent = document.querySelector('.swiper-pagination-current');\n const paginationTotal = document.querySelector('.swiper-pagination-total');\n if (paginationCurrent) paginationCurrent.textContent = this.realIndex + 1;\n if (paginationTotal) paginationTotal.textContent = this.slides.length \/ 2;\n },\n slideChange: function() {\n const paginationCurrent = document.querySelector('.swiper-pagination-current');\n if (paginationCurrent) paginationCurrent.textContent = this.realIndex + 1;\n },\n progress: handleParallax,\n setTranslate: handleParallax\n },<\/p>\n<p> \/\/ Responsive breakpoints\n breakpoints: {\n \/\/ 768px'den b\u00fcy\u00fck ekranlar i\u00e7in\n [breakpoints.md]: {\n navigation: {\n enabled: true,\n },\n }\n }\n });<\/p>\n<p> \/\/ Slide de\u011fi\u015fiminde loading animasyonu yeniden ba\u015flat\n swiper.on('slideChange', function () {\n \/\/ K\u0131sa bir gecikme ile animasyon yeniden ba\u015flatma\n setTimeout(restartPaginationAnimation, 50);\n });<\/p>\n<p> \/\/ \u0130lk y\u00fcklemede animasyonu ba\u015flat\n setTimeout(restartPaginationAnimation, 100);<\/p>\n<p> \/\/ Update cursor text on hover over buttons\n document.querySelectorAll('.swiper-slide a').forEach(link => {\n link.addEventListener('mouseenter', function() {\n cursor.textContent = 'TIKLA';\n cursor.style.width = '100px';\n cursor.style.height = '100px';\n });<\/p>\n<p> link.addEventListener('mouseleave', function() {\n cursor.textContent = 'KE\u015eFET';\n cursor.style.width = '80px';\n cursor.style.height = '80px';\n });\n });\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1238","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1238"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1238"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1238,"date":"2025-03-16T03:56:07","date_gmt":"2025-03-16T00:56:07","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=1238"},"modified":"2025-03-16T03:56:07","modified_gmt":"2025-03-16T00:56:07","slug":"seyahat-sitesi-icin-hero-slider","status":"publish","type":"landing_page","link":"https:\/\/mudosdigital.com\/tr\/store\/seyahat-sitesi-icin-hero-slider\/","title":{"rendered":"Seyahat Sitesi \u0130\u00e7in Hero Slider"},"content":{"rendered":"

\n
\n
\n
\n
\n Seyahat Hero Slider – Tailwind CSS<\/title><br \/>\n <br \/>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.css\" \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/iconify\/2.2.1\/iconify.min.js\"><\/script><br \/>\n <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script><\/p>\n<style>\n @keyframes paginationProgress {\n 0% {\n width: 0%;\n }\n 100% {\n width: 100%;\n }\n }<\/p>\n<p> .swiper-pagination-bullet::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 0;\n background-color: #F59E0B;\n opacity: 0;\n }<\/p>\n<p> .swiper-pagination-bullet-active::after {\n opacity: 1;\n animation: paginationProgress 5s linear forwards;\n }<\/p>\n<p> \/* Parallax effect for background images *\/\n .slide-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n transition: transform 0.9s ease;\n }<\/p>\n<p> \/* Remove content animations - make all slide content fully visible *\/\n .slide-content {\n opacity: 1;\n transform: translateY(0);\n }<\/p>\n<p> \/* Custom cursor for slider *\/\n .custom-cursor {\n width: 80px;\n height: 80px;\n border: 2px solid rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n position: fixed;\n pointer-events: none;\n mix-blend-mode: difference;\n z-index: 9999;\n transform: translate(-50%, -50%);\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n font-size: 12px;\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.1s ease;\n }<\/p>\n<p> .slider-wrapper:hover .custom-cursor {\n opacity: 1;\n }<\/p>\n<p> \/* Hide default navigation arrows *\/\n .swiper-button-next:after,\n .swiper-button-prev:after {\n display: none;\n }\n <\/style>\n<p><\/head><br \/>\n<body class=\"bg-gray-900 font-sans\"><br \/>\n <\/p>\n<div class=\"custom-cursor\">KE\u015eFET<\/div>\n<div class=\"slider-wrapper relative w-full h-screen overflow-hidden\">\n<div class=\"swiper w-full h-full\">\n<div class=\"swiper-wrapper\">\n <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-purple-900\/70 to-indigo-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Yunanistan<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Yaz Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:island\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Santorini<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Beyaz badanal\u0131 evleri, muhte\u015fem g\u00fcn bat\u0131mlar\u0131 ve kristal berrakl\u0131\u011f\u0131ndaki sular\u0131 ile Ege’nin incisi Santorini’de unutulmaz bir tatil deneyimi ya\u015fay\u0131n.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-indigo-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-rose-900\/70 to-pink-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Fransa<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Bahar Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:eiffel-tower\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Paris<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">A\u015f\u0131klar \u015fehri Paris’te romantik bir ka\u00e7amak yap\u0131n. Eiffel Kulesi’nden Seine Nehri’ne, Louvre M\u00fczesi’nden Montmartre’a kadar ke\u015ffetmeniz gereken bir \u015fehir.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-rose-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-emerald-900\/70 to-teal-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">Endonezya<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">T\u00fcm Y\u0131l<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:palm-tree\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">Bali<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Tropikal cenneti Bali’de huzuru ke\u015ffedin. G\u00f6z al\u0131c\u0131 kumsallar, tertemiz okyanuslar, ye\u015fil pirin\u00e7 tarlalar\u0131 ve Bali tap\u0131naklar\u0131 ile do\u011fa ve k\u00fclt\u00fcr\u00fcn bulu\u015ftu\u011fu nokta.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-emerald-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-slide relative flex items-center\">\n<div class=\"slide-bg\" style=\"background-image: url('\/api\/placeholder\/1920\/1080');\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-900\/70 to-indigo-900\/50\"><\/div>\n<div class=\"absolute top-0 left-0 w-full h-full bg-black bg-opacity-30\"><\/div>\n<div class=\"slide-content relative max-w-7xl mx-auto px-8 md:px-12 lg:px-16 text-white z-10\">\n <\/p>\n<div class=\"flex flex-wrap items-center gap-3 mb-4\">\n <span class=\"text-sm bg-white bg-opacity-20 px-3 py-1 rounded-full backdrop-blur-sm\">ABD<\/span><br \/>\n <span class=\"text-sm bg-amber-500 px-3 py-1 rounded-full\">Sonbahar Sezonu<\/span>\n <\/div>\n<div class=\"flex items-center justify-center w-20 h-20 mb-5 bg-white bg-opacity-10 backdrop-blur-md rounded-full\">\n <span class=\"iconify text-white\" data-icon=\"mdi:city-variant\" data-width=\"40\" data-height=\"40\"><\/span>\n <\/div>\n<h2 class=\"text-5xl md:text-7xl font-bold mb-5 text-white\">New York<\/h2>\n<p class=\"text-lg max-w-xl mb-8 leading-relaxed\">Uyumayan \u015fehir New York’ta muhte\u015fem bir \u015fehir turu deneyimi ya\u015fay\u0131n. Broadway \u015fovlar\u0131, Central Park, Empire State Building ve daha fazlas\u0131 ile unutulmaz an\u0131lar biriktirin.<\/p>\n<div class=\"flex flex-wrap gap-4\">\n <a href=\"#\" class=\"inline-block px-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-semibold uppercase rounded-full transition duration-300\">Turu \u0130ncele<\/a><br \/>\n <a href=\"#\" class=\"inline-block px-8 py-4 border border-white hover:bg-white hover:text-blue-900 text-white font-semibold uppercase rounded-full transition duration-300\">Video \u0130zle<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"swiper-pagination absolute bottom-16 left-0 w-full flex justify-center items-center gap-3 mb-3\"><\/div>\n<p> <\/p>\n<div class=\"absolute bottom-16 right-16 flex items-center gap-4 z-20\">\n<div class=\"swiper-button-prev flex items-center justify-center bg-black bg-opacity-30 w-14 h-14 rounded-full transition duration-300 hover:bg-amber-500 backdrop-blur-sm\">\n <span class=\"iconify text-white\" data-icon=\"mdi:arrow-left\" data-width=\"24\" data-height=\"24\"><\/span>\n <\/div>\n<div class=\"swiper-button-next flex items-center justify-center bg-black bg-opacity-30 w-14 h-14 rounded-full transition duration-300 hover:bg-amber-500 backdrop-blur-sm\">\n <span class=\"iconify text-white\" data-icon=\"mdi:arrow-right\" data-width=\"24\" data-height=\"24\"><\/span>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"absolute bottom-16 left-16 z-20 text-white\">\n<div class=\"text-5xl font-bold\">\n <span class=\"swiper-pagination-current\">1<\/span><br \/>\n <span class=\"text-white\/50\">\/<\/span><br \/>\n <span class=\"swiper-pagination-total\">4<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <br \/>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Swiper\/8.4.7\/swiper-bundle.min.js\"><\/script><br \/>\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const AUTOPLAY_DELAY = 5000; \/\/ 5 saniye (CSS animasyon s\u00fcresiyle e\u015fle\u015fmeli)<\/p>\n<p> \/\/ Custom cursor functionality\n const cursor = document.querySelector('.custom-cursor');\n const sliderWrapper = document.querySelector('.slider-wrapper');<\/p>\n<p> sliderWrapper.addEventListener('mousemove', (e) => {\n cursor.style.left = e.clientX + 'px';\n cursor.style.top = e.clientY + 'px';\n });<\/p>\n<p> sliderWrapper.addEventListener('mouseleave', () => {\n cursor.style.opacity = '0';\n });<\/p>\n<p> sliderWrapper.addEventListener('mouseenter', () => {\n cursor.style.opacity = '1';\n });<\/p>\n<p> \/\/ Pagination loading animasyonunu yeniden ba\u015flatma fonksiyonu\n function restartPaginationAnimation() {\n \/\/ Aktif bullet'\u0131 bulma\n const activeBullet = document.querySelector('.swiper-pagination-bullet-active');\n if (activeBullet) {\n \/\/ Animasyonu yeniden ba\u015flatmak i\u00e7in after elementini s\u0131f\u0131rlama\n activeBullet.classList.remove('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.add('animation-reset');\n void activeBullet.offsetWidth; \/\/ Reflow'u zorla\n activeBullet.classList.remove('animation-reset');\n }\n }<\/p>\n<p> \/\/ Parallax effect for backgrounds\n function handleParallax(swiper) {\n const slides = swiper.slides;\n for (let i = 0; i < slides.length; i++) {\n const slideProgress = slides[i].progress;\n const innerElements = slides[i].querySelectorAll('.slide-bg');\n if (innerElements.length > 0) {\n const innerTranslate = slideProgress * 30;\n innerElements[0].style.transform = `translate3d(${innerTranslate}%, 0, 0) scale(${1 - Math.abs(slideProgress) * 0.1})`;\n }\n }\n }<\/p>\n<p> \/\/ Tailwind breakpoint de\u011ferlerini js'de kullanmak i\u00e7in\n const breakpoints = {\n sm: 640,\n md: 768,\n lg: 1024,\n xl: 1280,\n '2xl': 1536\n };<\/p>\n<p> var swiper = new Swiper('.swiper', {\n \/\/ Zorunlu parametreler\n loop: true,\n speed: 1000,\n grabCursor: false, \/\/ We use custom cursor\n autoplay: {\n delay: AUTOPLAY_DELAY,\n disableOnInteraction: false,\n },<\/p>\n<p> \/\/ Effect\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },<\/p>\n<p> \/\/ Pagination\n pagination: {\n el: '.swiper-pagination',\n clickable: true,\n type: 'bullets',\n renderBullet: function (index, className) {\n return '<span class=\"' + className + ' w-12 h-1 bg-white bg-opacity-70 opacity-70 rounded-sm relative overflow-hidden transition-all duration-300 hover:opacity-100\"><\/span>';\n },\n },<\/p>\n<p> \/\/ Navigasyon tu\u015flar\u0131\n navigation: {\n nextEl: '.swiper-button-next',\n prevEl: '.swiper-button-prev',\n hiddenClass: 'hidden'\n },<\/p>\n<p> \/\/ Custom fraction pagination\n on: {\n init: function() {\n const paginationCurrent = document.querySelector('.swiper-pagination-current');\n const paginationTotal = document.querySelector('.swiper-pagination-total');\n if (paginationCurrent) paginationCurrent.textContent = this.realIndex + 1;\n if (paginationTotal) paginationTotal.textContent = this.slides.length \/ 2;\n },\n slideChange: function() {\n const paginationCurrent = document.querySelector('.swiper-pagination-current');\n if (paginationCurrent) paginationCurrent.textContent = this.realIndex + 1;\n },\n progress: handleParallax,\n setTranslate: handleParallax\n },<\/p>\n<p> \/\/ Responsive breakpoints\n breakpoints: {\n \/\/ 768px'den b\u00fcy\u00fck ekranlar i\u00e7in\n [breakpoints.md]: {\n navigation: {\n enabled: true,\n },\n }\n }\n });<\/p>\n<p> \/\/ Slide de\u011fi\u015fiminde loading animasyonu yeniden ba\u015flat\n swiper.on('slideChange', function () {\n \/\/ K\u0131sa bir gecikme ile animasyon yeniden ba\u015flatma\n setTimeout(restartPaginationAnimation, 50);\n });<\/p>\n<p> \/\/ \u0130lk y\u00fcklemede animasyonu ba\u015flat\n setTimeout(restartPaginationAnimation, 100);<\/p>\n<p> \/\/ Update cursor text on hover over buttons\n document.querySelectorAll('.swiper-slide a').forEach(link => {\n link.addEventListener('mouseenter', function() {\n cursor.textContent = 'TIKLA';\n cursor.style.width = '100px';\n cursor.style.height = '100px';\n });<\/p>\n<p> link.addEventListener('mouseleave', function() {\n cursor.textContent = 'KE\u015eFET';\n cursor.style.width = '80px';\n cursor.style.height = '80px';\n });\n });\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"featured_media":0,"template":"","landing_category":[],"landing_technology":[],"landing_library":[],"class_list":["post-1238","landing_page","type-landing_page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_page"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/landing_page"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"landing_category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_category?post=1238"},{"taxonomy":"landing_technology","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_technology?post=1238"},{"taxonomy":"landing_library","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/landing_library?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}