---
import Layout from '../components/Layout.astro';
---

<Layout title="Services">
  <h1>Our Services</h1>
  <p>We offer a wide range of technical services to help you optimize your digital environment. Below you'll find detailed information about each of our service categories.</p>
  
  <!-- Privacy Section -->
  <h2 id="privacy">Privacy Services</h2>
  <p>Our privacy services help you maintain control over your personal data and minimize unwanted data collection.</p>
  
  <div class="service-card" id="adblocker">
    <h3>Adblocker Setup</h3>
    <p>Enhance your browsing experience and protect your privacy with our comprehensive ad-blocking solutions. We implement network-wide ad blocking that works across all your devices without requiring individual software installations.</p>
    <a href="/services/adblocker" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="remove-telemetry">
    <h3>Remove Windows Telemetry</h3>
    <p>Enhance your privacy by removing Windows telemetry features that collect and send data to Microsoft. Our service includes identification and disabling of telemetry components while ensuring system stability and functionality.</p>
    <a href="/services/remove-telemetry" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="bitwarden">
    <h3>Bitwarden Password Manager</h3>
    <p>Take control of your passwords and sensitive information with a self-hosted Bitwarden solution that keeps your data private, secure, and exclusively under your control.</p>
    <a href="/services/bitwarden" class="learn-more-link">Learn more</a>
  </div>
  
  <!-- Security Section -->
  <h2 id="security">Security Services</h2>
  <p>Our security services help you protect your data and systems from external threats and vulnerabilities.</p>
  
  <div class="service-card" id="opnsense">
    <h3>OPNsense Firewall</h3>
    <p>Secure your network with OPNsense, a powerful open-source enterprise-grade firewall and routing platform that provides comprehensive network protection and control.</p>
    <a href="/services/opnsense" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="wireguard">
    <h3>WireGuard VPN</h3>
    <p>Secure your internet connection with WireGuard, a modern, high-performance VPN protocol that offers exceptional speed, security, and simplicity compared to traditional VPN solutions.</p>
    <a href="/services/wireguard" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="vpn">
    <h3>VPN Services</h3>
    <p>Protect your online privacy, secure your data, and access geo-restricted content with professional VPN implementation services tailored to your specific needs and privacy requirements.</p>
    <a href="/services/vpn" class="learn-more-link">Learn more</a>
  </div>
  
  <!-- Anonymity Section -->
  <h2 id="anonymity">Anonymity Services</h2>
  <p>Our anonymity services help you maintain a lower profile online and reduce your digital footprint.</p>
  
  <div class="service-card" id="tor">
    <h3>TOR Network Setup</h3>
    <p>Enhance your online anonymity and privacy with a properly configured TOR (The Onion Router) setup customized for your specific needs.</p>
    <a href="/services/tor" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="grapheneos">
    <h3>GrapheneOS Setup</h3>
    <p>Transform your mobile device into a privacy-focused, security-hardened smartphone with GrapheneOS, a privacy and security-focused mobile operating system that provides enhanced protection without sacrificing usability.</p>
    <a href="/services/grapheneos" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="linux-setup">
    <h3>Linux Setup</h3>
    <p>Make the transition to Linux smooth and hassle-free with our comprehensive setup services. We'll help you select the right distribution, handle the installation process, configure your system, and provide guidance on essential software and daily operations.</p>
    <a href="/services/linux-setup" class="learn-more-link">Learn more</a>
  </div>
  
  <!-- Infrastructure Section -->
  <h2 id="infrastructure">Infrastructure Services</h2>
  <p>Our infrastructure services help you build and maintain robust, efficient, and secure digital environments.</p>
  
  <div class="service-card" id="openwrt">
    <h3>OpenWRT Router</h3>
    <p>Transform your network with OpenWRT, a powerful open-source router firmware that provides enterprise-grade features, enhanced security, and complete control over your home or business network.</p>
    <a href="/services/openwrt" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="nas">
    <h3>NAS Setup</h3>
    <p>Take control of your data with a custom Network Attached Storage (NAS) solution that provides secure, reliable, and private storage accessible from all your devices while keeping your files under your complete control.</p>
    <a href="/services/nas" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="mail-server">
    <h3>Mail Server Setup</h3>
    <p>Take complete control of your email communications with a professionally configured, self-hosted mail server that provides enhanced privacy, security, and independence from Big Tech email providers.</p>
    <a href="/services/mail-server" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="proxmox">
    <h3>Proxmox VE Setup</h3>
    <p>Maximize your hardware resources with Proxmox Virtual Environment, a powerful open-source virtualization platform that enables you to run multiple virtual machines and containers on a single physical server.</p>
    <a href="/services/proxmox" class="learn-more-link">Learn more</a>
  </div>
  
  <div class="service-card" id="vps">
    <h3>VPS Setup</h3>
    <p>Establish your own private digital presence with a professionally configured Virtual Private Server (VPS) that provides enhanced privacy, security, and control over your online services and data.</p>
    <a href="/services/vps" class="learn-more-link">Learn more</a>
  </div>
  
  <!-- Back to Top Button -->
  <button id="back-to-top" class="back-to-top" aria-label="Back to top">↑</button>
</Layout>

<script>
  // Back to Top button functionality
  document.addEventListener('DOMContentLoaded', function() {
    const backToTopButton = document.getElementById('back-to-top');
    
    // Show/hide the button based on scroll position
    window.addEventListener('scroll', function() {
      if (window.scrollY > 300) {
        backToTopButton.classList.add('visible');
      } else {
        backToTopButton.classList.remove('visible');
      }
    });
    
    // Scroll to top when clicked
    backToTopButton.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  });
</script>
