Footer Navigation Component - Monospace/Developer Style
A complex, responsive footer navigation component designed for agriculture/farming websites, featuring a monospace/developer aesthetic with a gradient rainbow color scheme and dark mode support.
HTML Code
<footer class="bg-violet-950 text-emerald-200 dark:bg-black font-mono text-[0.8rem] md:text-[0.9rem] lg:text-[1rem] p-6 lg:p-10 border-t-4 border-l-2 border-r-2 border-b-2 tracking-tighter" style="border-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7) 1;">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
<!-- Company Info & Logo (ASCII Art style) -->
<div class="flex flex-col items-start">
<pre class="text-xl md:text-2xl lg:text-3xl font-bold mb-4 bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308);">_FARMBOT_</pre>
<p class="mb-4 leading-relaxed">// Precision Agriculture Solutions<br>// Est. 2023 // All rights reserved.</p>
<div class="flex space-x-3 mt-auto">
<a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">GitHub</span><svg class="w-5 h-5" 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.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
<a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">Twitter</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.32 0 2.428-.482 3.313-1.423-.42-.01-.796-.126-1.09-.344-.294-.216-.525-.503-.693-.868-.168-.364-.252-.76-.252-1.189 0-.426.084-.816.252-1.17s.4-.645.717-.899c.316-.254.67-.457 1.06-.61a.987.987 0 001.09.28.986.986 0 00.56-.379c.196-.285.344-.61.444-.973.1-.36.147-.745.147-1.15-.008-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02-.566-.2-.962-.294-1.189-.283-.404.01-.762.1-1.077.268-.314.162-.572.392-.774.69-.202.298-.352.645-.448 1.03-.095.385-.143.784-.143 1.198 0 1.25.418 2.302 1.254 3.155.836.852 1.848 1.278 3.037 1.278.47 0 .91-.122 1.31-.365.39-.24.717-.58.98-.98.263-.4.4-.84.4-1.32 0-.203-.03-.396-.088-.58-.058-.184-.14-.356-.248-.517-.107-.16-.23-.3-.368-.415-.138-.112-.29-.197-.456-.253-.166-.056-.34-.084-.52-.084-.44 0-.79.08-1.05.23-.26.15-.46.33-.6.54-.14.21-.24.44-.3.69-.06.25-.09.5-.09.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278v.01ZM12 4c.621 0 1.24.032 1.854.095-.506-.217-1.04-.413-1.58-.592-.54-.179-1.09-.34-1.65-.482-.56-.142-1.12-.27-1.68-.383-.56-.112-1.12-.206-1.68-.283C6.477.01 2 4.475 2 10.017c0 4.425 2.865 8.18 6.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
<a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">LinkedIn</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s-.75-1.764 1.75-1.764 1.75.79 1.75 1.764-1.75 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.764 7 2.677v6.558z" clip-rule="evenodd" /></svg></a>
</div>
</div>
<!-- Navigation Links -->
<div>
<h3 class="text-orange-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// NAVIGATION</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> About FarmBot</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Our Technology</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Precision Farming</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Crop Optimization</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Case Studies</a></li>
</ul>
</div>
<!-- Support & Resources -->
<div>
<h3 class="text-blue-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// SUPPORT & DOCS</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> FAQ</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Get Started Guide</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> API Reference</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Community Forum</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Contact Support</a></li>
</ul>
</div>
<!-- Legal & Policies -->
<div>
<h3 class="text-purple-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// LEGAL & POLICY</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Terms of Service</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Privacy Policy</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Cookie Policy</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Licensing</a></li>
<li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Accessibility</a></li>
</ul>
</div>
<!-- Newsletter Signup (Terminal-like) -->
<div class="lg:col-span-4 mt-8 flex flex-col items-center">
<h3 class="text-pink-400 font-bold mb-4 tracking-wide">// SUBSCRIBE FOR UPDATES</h3>
<p class="mb-4 text-center max-w-lg">Receive the latest agricultural tech insights and FarmBot news directly to your inbox. <span class="text-orange-300">[No spam. Ever.]</span></p>
<form class="w-full max-w-sm flex flex-col md:flex-row gap-2">
<label for="email-input" class="sr-only">Email Address</label>
<input id="email-input" type="email" placeholder="> enter_email_address..." class="flex-grow min-w-0 p-3 rounded-md bg-transparent border border-emerald-400 text-emerald-200 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-zinc-800 dark:border-emerald-600 dark:placeholder:text-zinc-600 dark:focus:ring-emerald-600 text-sm md:text-base" aria-label="Email address for newsletter">
<button type="submit" class="p-3 rounded-md bg-gradient-to-r from-green-500 to-blue-500 text-stone-900 font-bold hover:from-green-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 uppercase text-sm md:text-base transition-all duration-300 ease-in-out">
<span class="block group-hover:hidden">[SEND]</span>
<span class="hidden group-hover:block">[INITIATE_SUBSCRIPTION]</span>
</button>
</form>
</div>
</div>
<div class="mt-10 pt-6 border-t border-dashed border-gray-700 dark:border-gray-500 text-center text-gray-500 text-xs md:text-sm">
<p class="mb-2">© 2023 FarmBot Inc. · <span class="text-gray-600 dark:text-gray-400">// Code Licensed Under MIT.</span></p>
<p><code>[STATUS_REPORT: OPERATIONAL] [VERSION: 1.0.0] [DEPLOYMENT_DATE: 2023-10-27]</code></p>
</div>
</footer>Related Components
Footer Navigation Component
A responsive footer navigation component for dashboards with dark theme support, featuring microinteractions on link hovers using triadic colors and complex elements. No JavaScript, only HTML with Tailwind CSS.
Footer Navigation Component
A responsive Footer Navigation component designed with a skeuomorphic style, featuring interactive elements suitable for e-commerce. It follows a triadic color scheme and supports dark mode.
Glassmorphism Grayscale Healthcare Footer
A responsive, glassmorphism-styled footer navigation component for healthcare/medical applications, using a grayscale color scheme with dark mode support. It features frosted glass-like translucent elements and interactive links.