Glassmorphism_Footer_Component
예약/예약 시스템용으로 설계된 반응형 glassmorphism 스타일의 바닥글 구성 요소로, 보색 구성표, 대화형 요소 및 완전한 다크 모드 지원을 특징으로 합니다.
HTML 코드
<footer class="relative bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 overflow-hidden">
<!-- Background elements for glassmorphism effect -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
<div class="absolute top-1/4 left-1/4 w-60 h-60 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
<div class="absolute top-1/2 right-1/4 w-80 h-80 bg-orange-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
<div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-blue-700"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:shadow-2xl">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 text-gray-800 dark:text-gray-200">
<!-- Company Info / Logo -->
<div class="space-y-4">
<a href="#" class="flex items-center space-x-2 text-2xl font-bold text-gray-900 dark:text-white">
<svg class="h-8 w-8 text-orange-500 dark:text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm3-11h.01M12 11h.01M15 11h.01M8 15h.01M12 15h.01M15 15h.01"></path>
</svg>
<span>BookNow</span>
</a>
<p class="text-sm text-gray-700 dark:text-gray-300">
Simplify your bookings with ease. Reserve your spot instantly!
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.879z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-1.413.385-2.827.601-4.22-.601C2.5 19 1 17.5 1 15v-5c0-1.5.5-3 1.5-4C3 5.5 4.5 5 6 5h1c1.5 0 2.5.5 3 1.5 1 3 2 5 4 5h7c1.5 0 2.5.5 3 1.5s.5 2.5.5 4v2c0 2-1 3.5-3 4-1.5.5-3-.5-4-1.5-1-1-2-1.5-4-1h-6.71z"/>
<linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1DA1F2"/>
<stop offset="100%" stop-color="#8A3AB9"/>
</linearGradient>
<path d="M22.46 6c-.73.33-1.51.55-2.32.65.84-.5 1.48-1.29 1.78-2.25-.79.47-1.67.81-2.61.99-.75-.8-1.82-1.3-3.02-1.3-2.29 0-4.15 1.86-4.15 4.15 0 .32.04.63.11.93-3.45-.17-6.5-1.82-8.54-4.3-.36.62-.56 1.35-.56 2.12 0 1.44.73 2.7 1.84 3.45-.68-.02-1.32-.2-1.88-.52v.05c0 2.01 1.43 3.69 3.32 4.07-.35.1-.71.15-1.09.15-.27 0-.53-.03-.79-.07.53 1.64 2.06 2.84 3.89 2.87-1.42 1.11-3.21 1.77-5.15 1.77-.33 0-.66-.02-.98-.06 1.83 1.17 3.99 1.86 6.32 1.86 7.58 0 11.72-6.28 11.72-11.72 0-.18-.01-.36-.01-.54.81-.58 1.52-1.3 2.08-2.13z" fill="url(#twitter-gradient)"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.93 0-1.088.384-1.979 1.024-2.678-.103-.253-.446-1.263.098-2.648 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.702.115 2.504.337 1.909-1.296 2.747-1.026 2.747-1.026.546 1.385.202 2.395.099 2.648.64.699 1.023 1.59 1.023 2.678 0 3.827-2.336 4.673-4.565 4.92.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Home</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Services</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">About Us</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Contact</a></li>
</ul>
</div>
<!-- Booking Categories -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Booking Categories</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Restaurant Reservations</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Medical Appointments</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Beauty & Spa Services</a></li>
<li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Event Tickets</a></li>
</ul>
</div>
<!-- Contact Info / Newsletter -->
<div>
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Contact & Newsletter</h3>
<p class="text-gray-700 dark:text-gray-300 mb-2">
123 Booking St, Suite 400, Reserville, BOOK 12345
</p>
<p class="text-gray-700 dark:text-gray-300 mb-2">
Email: <a href="mailto:[email protected]" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">[email protected]</a>
</p>
<p class="text-gray-700 dark:text-gray-300 mb-4">
Phone: <a href="tel:+1-800-555-BOOK" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">+1-800-555-BOOK</a>
</p>
<form class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Your Email" aria-label="Your Email" class="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-400 focus:border-transparent outline-none transition-all duration-200">
<button type="submit" class="p-3 rounded-lg bg-orange-500 text-white font-semibold hover:bg-orange-600 dark:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-200 shadow-md transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-400 focus:ring-offset-2 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900">
Subscribe
</button>
</form>
</div>
</div>
<!-- Copyright and Policies -->
<div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
<p>© 2023 BookNow. All rights reserved.</p>
<div class="mt-2 space-x-4">
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Privacy Policy</a>
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Terms of Service</a>
<a href="#" class="hover:text-orange-500 dark:hover:text-orange-400 transition-colors duration-200">Cookie Policy</a>
</div>
</div>
</div>
<!-- Tailwind CSS animation keyframes for blob -->
<style>
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
</style>
</footer>관련 구성 요소
수채화/예술적 네온 바닥글
수채화/예술적 미학과 생생한 네온 색 구성표가 있는 간단하고 반응이 빠른 바닥글 구성 요소로 포트폴리오 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
Skeuomorphic Footer 컴포넌트
스큐어모픽 디자인, 유사한 색 구성표(녹색, 청록색) 및 비즈니스 웹 사이트에 적합한 적당한 복잡성을 갖춘 반응형 바닥글 구성 요소. 링크, 로고 플레이스홀더, 그림자와 그라디언트로 얻은 미묘한 스큐어모픽 효과가 포함됩니다. 밝은 모드와 어두운 모드를 지원합니다.