<!--

                  ████████████████                            
              ████░░░░░░░░░░░░░░░░████                        
██████████████░░░░░░░░░░░░░░░░░░░░░░░░████████████                     Mew :<
██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██            
██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██            
  ██▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓▓▓▓▓▓▓██              
  ██▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓▓▓▓▓██              
    ██▓▓░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░▓▓██                
      ██░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░██                  
      ██░░░░░░████░░░░░░░░░░░░░░████░░░░░░██                  
      ██░░░░██  ▒▒██░░░░░░░░░░██  ▒▒██░░░░██                  
      ██░░░░██▒▒▒▒██░░░░░░░░░░██▒▒▒▒██░░░░██                  
        ██░░░░████░░░░░░░░░░░░░░████░░░░██                    
        ██░░░░░░░░░░▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░██                    
    ▓▓▓▓▓▓██░░░░▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓░░░░██                      
  ▓▓▒▒▒▒▒▒▓▓██▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓██                        
  ▓▓▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▒▒▓▓██                      
    ▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▓▓██                    
  ▓▓▒▒▒▒▒▒▒▒▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓▒▒▓▓▒▒▓▓░░░░██        ██████    
  ▓▓▒▒▒▒▒▒▓▓  ▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓░░░░░░██        ██▓▓▓▓██  
    ▓▓▓▓▓▓    ██▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓░░░░░░░░░░██        ██▓▓▓▓██
              ██░░░░▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░██        ██▓▓▓▓██
                ██░░░░░░░░░░░░░░██░░░░░░░░░░██        ██░░▓▓██
                ██░░░░░░██░░░░░░██░░░░░░░░░░██      ██░░░░░░██
                ██░░░░░░██░░░░░░██░░░░░░░░░░██      ██░░░░██  
                ██░░░░░░██░░░░░░██░░░░░░░░░░██    ██░░░░░░██  
                  ██░░░░██░░░░██░░░░░░░░░░░░██████░░░░░░██    
                  ██░░░░██░░░░██░░░░░░░░░░░░░░░░░░░░████      
                  ██░░░░██░░░░██░░░░░░░░░░░░████████          
                    ████  ██████████████████                  


--><!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NekoDevs</title>
  <link href="/src/styles/output.css" rel="stylesheet">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <meta name="description" content="Pawsitively Innovative Software Solutions!">
<meta name="author" content="NekoDevs">
<meta content="#A443D1" data-react-helmet="true" name="theme-color">
<meta property="og:image" content="favicon.png">
<link rel="icon" href="favicon.png" type="image/x-icon"></head>

<body>
  <!-- component -->
  <div class="relative isolate overflow-hidden bg-gray-900">
    <svg class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" aria-hidden="true">
      <defs>
        <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1" patternUnits="userSpaceOnUse">
          <path d="M.5 200V.5H200" fill="none" />
        </pattern>
      </defs>
      <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
        <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z" stroke-width="0" />
      </svg>
      <rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
    </svg>
    <div class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]" aria-hidden="true">
      <div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20" style="clip-path: polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)"></div>
    </div>
    <div class="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
      <div class="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
        <div class="mt-24 sm:mt-32 lg:mt-16">
          <a href="/news" class="inline-flex space-x-6">
            <span class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm font-semibold leading-6 text-cyan-500 ring-1 ring-inset ring-indigo-500/20">What's new</span>
          </a>
        </div>
        <h1 class="mt-10 text-4xl font-bold tracking-tight text-white sm:text-6xl">Pawsitively Innovative Software Solutions!</h1>
        <p class="mt-6 text-lg leading-8 text-gray-300">At Nekodevs, we create purr-fectly crafted apps and websites that blend our love for cats with innovative technology. Join us in making the digital world a pawsitive place!</p>
        <div class="mt-10 flex items-center gap-x-6">
          <a href="/projects" class="rounded-md bg-purple-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400">Our projects</a>
          <a href="#our-team" class="text-sm font-semibold leading-6 text-white">Who's behind this? <span aria-hidden="true">→</span></a>
        </div>
      </div>
      <div class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
        <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
          <img src="/src/assets/img/github.png" alt="App screenshot" width="2432" height="1442" class="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10">
        </div>
      </div>
    </div>
  </div>
  <!-- ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣰⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣼⠶⣦⠀⠀
⠀⠀⠀⠀⠀⣸⠏⠀⠻⢷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⠶⣆⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡾⠋⠀⠀⢹⣆⠀
⠀⠀⠀⠀⢠⡏⠀⠀⠀⠀⠉⠻⣤⡀⠀⠀⣀⣤⣤⣤⣤⣄⣸⣄⠙⢻⣦⡀⠀⠀⠀⠀⠀⠀⠀⣠⡾⠋⠀⠀⠀⠀⠀⢻⡆
⠀⠀⠀⠀⣿⠃⠀⠀⠀⠀⠀⠀⠈⠛⠷⣿⣍⠀⠀⠀⠀⠈⠉⠿⠆⠀⠉⢷⡄⠀⠀⠀⠀⣠⡾⠋⠀⠀⠀⠀⠀⠀⠀⢸⣿               Just wanted to say thank you to you guys
⠀⠀⠀⢰⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣶⡄⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣄⠀⣠⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡟
⠀⠀⠀⢸⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣽⠅                   I didn't expect to get so much attention 
⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠆
⠀⠀⠀⢸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⡇⠀                     Sooo thank youuu :3
⠀⠀⠀⢹⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠱⠀
⠀⠀⠀⠘⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⡀⠀⠀⠀⠀⠀⠀⣀⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠏⠀⠀
⠀⠀⠀⠀⠙⣷⡄⠀⠀⠀⠀⢀⣀⣠⢴⣺⣿⠿⠁⠀⢀⣀⣀⡀⠀⠙⠻⠿⣿⣿⡶⣤⣄⣀⡀⠀⠀⠀⢀⣀⣰⣏⣀⣄⠀
⠀⠀⣶⣦⣀⣙⣿⣦⣀⠀⢰⣯⠽⠿⠟⠋⠁⠀⠀⠘⠛⠉⠉⠁⠀⠀⠀⠀⠀⠉⠛⠷⠿⢽⣿⠀⠀⠀⠉⠉⠉⠉⣹⡇⠀
⠀⠀⠉⢷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⣶⠀⠀⠀⢀⡀⠀⢀⣤⠀⠀⠀⢀⣠⠾⠋⠀⠀
⠀⠀⠀⠈⢿⣀⡀⠀⠀⣤⡄⢀⡄⠀⠀⠀⠰⣦⣀⣀⣴⠏⠙⠷⠤⠤⠞⠋⠀⠀⠀⡼⢿⠀⣸⠋⠀⠀⠀⠈⠙⢶⠄⠀⠀
⠀⠀⠀⠀⠈⣿⠏⠀⣠⠏⢻⣼⠃⠀⠀⠀⠀⠀⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠼⠇⠘⣷⡟⠀⠀⠀⠀⠀⠀⣾⡄⠀⠀
⠀⠀⠀⠀⣸⡏⢠⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⢀⣤⡾⠤⠤⠶⠟⠁⠀⠀
⠀⠀⠀⠀⢿⡶⠞⠛⠳⢦⣤⣿⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣄⡀⣀⣤⠾⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣆⡉⠛⠶⠶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢻⣍⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣿⠷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣄⣀⣀⣀⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠁⢠⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⠀⠀⠀⠀
   -->
  <section class="relative py-16 dark:bg-gray-900 bg-gray-800 border-t-2 border-b-2 border-gray-700" id="our-team">
    <div class="absolute inset-0">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:rgb(102,51,153);stop-opacity:0.9" />
            <stop offset="100%" style="stop-color:rgb(75,0,130);stop-opacity: 0.9em;" />
          </linearGradient>
          <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="40" />
          </filter>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
        <circle cx="30%" cy="30%" r="20%" fill="url(#grad1)" filter="url(#blur)" opacity="0.5" />
        <circle cx="70%" cy="70%" r="25%" fill="url(#grad1)" filter="url(#blur)" opacity="0.5" />
        <circle cx="50%" cy="50%" r="15%" fill="url(#grad1)" filter="url(#blur)" opacity="0.5" />
      </svg>
    </div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-white dark:text-gray-900">Meet Our Team</h2>
      <p class="text-1xl font-bold text-white dark:text-gray-900">Meet the cats behind our code</p>
      <div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
        <div class="p-6 bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg">
          <div class="flex items-center justify-center h-24 w-24 rounded-full bg-purple-600">
            <img src="/src/assets/img/french-femboi.gif" alt="French Femboi" class="h-24 w-24 p-0 rounded-full">
          </div>
          <h3 class="mt-4 text-lg font-medium text-white dark:text-gray-900">French Femboi</h3>
          <p class="mt-2 text-base text-gray-300 dark:text-gray-500">Developer</p>
          <p class="mt-2 text-base text-gray-500 dark:text-gray-500">Dart, PHP, JS, CSS, HTML, batch, NodeJS</p>
          <a href="https://github.com/french-femboi" class="mt-4 text-base text-purple-500 hover:text-purple-400">View GitHub profile</a>
        </div>
        <div class="p-6 bg-gray-900 dark:bg-gray-700 rounded-lg shadow-lg">
          <div class="flex items-center justify-center h-24 w-24 rounded-full bg-purple-600">
            <img src="/src/assets/img/elpoep.png" alt="French Femboi" class="h-24 w-24 p-0 rounded-full">
          </div>
          <h3 class="mt-4 text-lg font-medium text-white dark:text-gray-900">elpoep</h3>
          <p class="mt-2 text-base text-gray-300 dark:text-gray-500">Developer</p>
          <p class="mt-2 text-base text-gray-500 dark:text-gray-500">c, game maker language, css, html, some javascript</p>
          <a href="https://github.com/elpoeprod" class="mt-4 text-base text-purple-500 hover:text-purple-400">View GitHub profile</a>
        </div>
      </div>
    </div>
  </section>

  <section class="bg-gray-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <h2 class="text-3xl font-bold text-white">What's so special?</h2>
      <div class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        <div class="p-6 bg-gray-800 rounded-lg shadow-lg">
          <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 shadow-purple">
            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path d="M19 12H5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
              <path d="M12 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
            </svg>
          </div>
          <h3 class="mt-4 text-lg font-medium text-white">Commited to open-source</h3>
          <p class="mt-2 text-base text-gray-300">We are commited to keeping all our projects open source.</p>
        </div>
        <div class="p-6 bg-gray-800 rounded-lg shadow-lg">
          <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 shadow-purple" style="color: white;">
            :3
          </div>
          <h3 class="mt-4 text-lg font-medium text-white">Meow meow</h3>
          <p class="mt-2 text-base text-gray-300">Just some random developer cats who like to type on their keyboards all day long.</p>
        </div>
        <div class="p-6 bg-gray-800 rounded-lg shadow-lg">
          <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-600 shadow-purple">
            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <h3 class="mt-4 text-lg font-medium text-white">Powered by Donations</h3>
          <p class="mt-2 text-base text-gray-300">Most of our websites are not behind a paywall.</p>
        </div>
      </div>
    </div>
  </section>

  <div class="bg-gray-800">
    <footer class="mx-auto max-w-screen-2xl px-4 md:px-8">
      <div class="mb-16 grid grid-cols-2 gap-12 pt-10 md:grid-cols-4 lg:grid-cols-6 lg:gap-8 lg:pt-12">
        <div class="col-span-full lg:col-span-2">
          <!-- logo - start -->
          <div class="mb-4 lg:-mt-2">
            <a href="/" class="inline-flex items-center gap-2 text-xl font-bold text-gray-100 md:text-2xl" aria-label="logo">
              <img src="logo_long.png" alt="NekoDevs" style="height: 50px;">
            </a>
          </div>
          <!-- logo - end -->

          <p class="mb-6 text-gray-400 sm:pr-8">Pawsitively Innovative Software Solutions.</p>

          <!-- social - start -->
          <div class="flex gap-4">
            <a href="https://tube.fembois.eu/c/nekodevs/videos" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
              <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zm1.5 17.25l-6-4.5 6-4.5v9z" />
              </svg>
            </a>

            <a href="https://github.com/Nekodevs-EU/Landing-Page" target="_blank" class="text-gray-400 transition duration-100 hover:text-gray-500 active:text-gray-600">
              <svg class="h-5 w-5" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
              </svg>
            </a>
          </div>
          <!-- social - end -->
        </div>

        <!-- nav - start -->
        <div>
          <div class="mb-4 font-bold uppercase tracking-widest text-gray-100">Projects</div>

          <nav class="flex flex-col gap-4">
            <div>
              <a href="#" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Overview</a>
            </div>

            <div>
              <a href="#" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Solutions</a>
            </div>

            <div>
              <a href="#" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Pricing</a>
            </div>

            <div>
              <a href="#" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Customers</a>
            </div>
          </nav>
        </div>
        <!-- nav - end -->

        <!-- nav - start -->
        <div>
          <div class="mb-4 font-bold uppercase tracking-widest text-gray-100">About us</div>

          <nav class="flex flex-col gap-4">
            <div>
              <a href="/story" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Our story</a>
            </div>

            <div>
              <a href="/goals" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Our goal</a>
            </div>

            <div>
              <a href="/donate" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Donate</a>
            </div>

          </nav>
        </div>
        <!-- nav - end -->

        <!-- nav - start -->
        <div>
          <div class="mb-4 font-bold uppercase tracking-widest text-gray-100">Support</div>

          <nav class="flex flex-col gap-4">
            <div>
              <a href="mailto:contact@nekodevs.eu" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Contact</a>
            </div>

            <div>
              <a href="https://docs.nekodevs.eu" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Documentation</a>
            </div>

            <div>
              <a href="#" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Community</a>
            </div>

            <div>
              <a href="/faq" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">FAQ</a>
            </div>
          </nav>
        </div>
        <!-- nav - end -->

        <!-- nav - start -->
        <div>
          <div class="mb-4 font-bold uppercase tracking-widest text-gray-100">Legal</div>

          <nav class="flex flex-col gap-4">
            <div>
              <a href="/tos" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Terms of Service</a>
            </div>

            <div>
              <a href="/privacy" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Privacy Policy</a>
            </div>

            <div>
              <a href="/cookies" class="text-gray-400 transition duration-100 hover:text-purple-500 active:text-purple-600">Cookie Policy</a>
            </div>
          </nav>
        </div>
        <!-- nav - end -->  
      </div>

      <div class="border-t border-gray-800 py-8 text-center text-sm text-gray-400">© 2024 - Present NekoDevs. All rights reserved.</div>
    </footer>
  </div>  <script>
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      e.preventDefault();

      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth'
      });
    });
  });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const accordionButtons = document.querySelectorAll('.flex.items-center.justify-center.w-8.h-8.rounded-full.bg-gray-700');

    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const answerDiv = this.parentElement.nextElementSibling;
            const svgIcon = this.querySelector('svg');

            if (answerDiv.classList.contains('max-h-0')) {
                answerDiv.classList.remove('max-h-0');
                answerDiv.classList.add('max-h-full');
                svgIcon.classList.add('rotate-180');
            } else {
                answerDiv.classList.remove('max-h-full');
                answerDiv.classList.add('max-h-0');
                svgIcon.classList.remove('rotate-180');
            }
        });
    });
});
</script>
</body>

</html>