diff --git a/assets/img/contact_page/discord.png b/assets/img/contact_page/discord.png
new file mode 100644
index 0000000..2c7cabf
Binary files /dev/null and b/assets/img/contact_page/discord.png differ
diff --git a/assets/img/contact_page/firefox_relay.png b/assets/img/contact_page/firefox_relay.png
new file mode 100644
index 0000000..cca9f5f
Binary files /dev/null and b/assets/img/contact_page/firefox_relay.png differ
diff --git a/assets/img/contact_page/proton.png b/assets/img/contact_page/proton.png
new file mode 100644
index 0000000..dfddeaa
Binary files /dev/null and b/assets/img/contact_page/proton.png differ
diff --git a/assets/img/contact_page/signal.png b/assets/img/contact_page/signal.png
new file mode 100644
index 0000000..f96ceb7
Binary files /dev/null and b/assets/img/contact_page/signal.png differ
diff --git a/index.html b/index.html
index 5c78008..a95679e 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,13 @@
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-20">
      <!-- Logo -->
-     <a data-motion="logo" href="#" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <a data-motion="logo" href="/" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
      </a>
 
      <!-- Icon Navigation -->
      <nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
@@ -27,7 +27,7 @@
      </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/projects/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
@@ -38,7 +38,7 @@
      </span>
      </a>
 
-     <a href="services.html" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/services/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
@@ -49,7 +49,7 @@
      </span>
      </a>
 
-     <a href="certificates.html" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/certificates/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
@@ -60,7 +60,7 @@
      </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/socials/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
@@ -83,11 +83,8 @@
      </svg>
      </button>
 
-     <a href="#" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
-     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-     </svg>
-     Create
+     <a href="/login.html" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
+     Login
      </a>
      </div>
      </div>
@@ -99,7 +96,7 @@
         <div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
           <h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Pizza2d1's Project Showcase</h1>
           <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
-            <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Embrace</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">challenges,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">find</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">inspiration</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">in</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">everyday</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">moments,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">transform</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">vision</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">into</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">reality.</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Discover</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">unique</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">creative</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">voice.</span>
+            We suck big dick because we can
           </p>
           <div class="flex flex-wrap justify-center gap-4">
             <a href="https://pizza2d1.github.io/server_links" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
@@ -111,28 +108,51 @@
             <a href="https://gitea.happylizard.me" data-motion="button" class="px-6 py-3 bg-green-600 hover:bg-green-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
               Gitea
             </a>
-            <a href="https://www.happylizard.me/contact.html" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <a href="/socials/" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
               Contact Me!
             </a>
           </div>
         </div>
 
         <!-- Asymmetric Image Grid -->
-        <div class="grid lg:grid-cols-12 gap-5">
+        <div class="grid lg:grid-cols-12 gap-2">
           <!-- Left Column - 2 stacked images -->
           <div class="lg:col-span-3 flex flex-col gap-5">
             <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              <img data-motion="image" src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <a href="/projects/operating_system/">
+                <img data-motion="image" src="/assets/img/projects/os_making/qemu1.png" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+                <div class="absolute bottom-6 left-6 right-6">
+                  <h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Building an OS</h3>
+                </div>
+                </a>
             </div>
             <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Design workspace" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <a href="/projects/python_website/">
+                <img data-motion="image" src="/assets/img/projects/python_website/python_website.png" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+                <div class="absolute bottom-6 left-6 right-6">
+                  <h3 style="color: rgb(0, 191, 10)" class="text-black text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,0,1)]">Python framework from scratch</h3>
+                </div>
+                </a>
             </div>
           </div>
 
           <!-- Center - Large featured image -->
           <div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
             <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
-              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+              <div class="absolute bottom-6 left-6 right-6">
+                <h3 class="text-white text-xl font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">My server setup</h3>
+              </div>
+            </div>
+          </div>
+
+          <!-- Center - Large featured image -->
+          <!-- <div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
+              <img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
               <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
               <div class="absolute bottom-6 left-6 right-6">
                 <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Featured</span>
@@ -140,41 +160,31 @@
                 <p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
               </div>
             </div>
-          </div>
+          </div> -->
 
           <!-- Right Column - 2 stacked images -->
           <div class="lg:col-span-3 flex flex-col gap-5">
-            <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-                <a href="https://www.happylizard.me/project_page/projects/?project_number=1">
-                <img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg " alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-72" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <a href="/projects/arch_chromebook/">
+                <img data-motion="image" src="/assets/img/projects/arch_chromebook/arch_chromebook.jpg" alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+                <div class="absolute bottom-6 left-6 right-6">
+                  <h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Arch on chromebook</h3>
+                </div>
                 </a>
             </div>
-            <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              <img data-motion="image" src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-40" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <a href="/projects/pifetch/">
+                <img data-motion="image" src="/assets/img/projects/pifetch/pifetch_showcase.gif" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+                <div class="absolute bottom-6 left-6 right-6">
+                  <h3 class="text-white text-l font-bold text-shadow-lg drop-shadow-[0_2.2px_2.2px_rgba(0,0,128,0.8)]">Pifetch (neofetch alternative)</h3>
+                </div>
+                </a>
             </div>
           </div>
         </div>
 
-        <!-- Stats Row -->
-        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
-          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
-            <span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
-          </div>
-          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-            <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
-            <span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
-          </div>
-          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-            <span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
-            <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
-          </div>
-          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
-            <span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
-          </div>
-        </div>
-      </div>
     </section>
     <section id="_features_minimal_icons_v6_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -286,174 +296,47 @@
         .carousel-container { overflow: hidden; }
       .carousel-track { display: flex; transition: transform 0.5s ease-out; }
       </style>
-    <section id="_testimonial_centered_quote_avatars_v6_t27_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
-      <style>
-        .carousel-container { overflow: hidden; }
-      .carousel-track { display: flex; transition: transform 0.5s ease-out; }
-      </style>
-
-      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <!-- Carousel -->
-        <div class="relative">
-          <div class="carousel-container">
-            <div data-carousel="track" class="carousel-track">
-              <!-- Slide 1 -->
-              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-                <div class="max-w-4xl mx-auto text-center">
-                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
-                  </svg>
-                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
-                    "The platform transformed how we approach customer feedback. Within weeks, we saw a 40% improvement in response times and our NPS score jumped significantly."
-                  </p>
-                  <!-- Avatar Row -->
-                  <div class="flex items-center justify-center gap-6">
-                    <img data-motion="image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Thomas Wright" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <div class="text-left">
-                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Thomas Wright</h5>
-                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">VP of Operations, TechFlow</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Slide 2 -->
-              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-                <div class="max-w-4xl mx-auto text-center">
-                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
-                  </svg>
-                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
-                    "We've tried many solutions before, but nothing comes close to this level of integration and ease of use. Our team adopted it instantly and productivity soared."
-                  </p>
-                  <div class="flex items-center justify-center gap-6">
-                    <img data-motion="image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Rachel Kim" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <div class="text-left">
-                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Rachel Kim</h5>
-                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">Head of Product, Innovate Labs</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Slide 3 -->
-              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-                <div class="max-w-4xl mx-auto text-center">
-                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
-                  </svg>
-                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
-                    "The analytics dashboard alone is worth the investment. We now have real-time insights that help us make data-driven decisions every single day."
-                  </p>
-                  <div class="flex items-center justify-center gap-6">
-                    <img data-motion="image" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="David Chen" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
-                    <div class="text-left">
-                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">David Chen</h5>
-                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">CTO, DataStream Inc</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Navigation Dots & Arrows -->
-          <div class="flex items-center justify-center gap-6 mt-12">
-            <button data-motion="button" data-carousel="prev" type="button" aria-label="Previous testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-              </svg>
-            </button>
-            <div class="flex gap-2">
-              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-indigo-500" aria-label="Go to slide 1" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
-              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
-              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
-            </div>
-            <button data-motion="button" data-carousel="next" type="button" aria-label="Next testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Carousel Script -->
-      <script>
-      (function() {
-        function initCarousel() {
-          const section = document.getElementById('_testimonial_centered_quote_avatars_v6_t27_001');
-          if (!section) return;
-        
-          const container = section.querySelector('[data-carousel="container"]') || section.querySelector('.carousel-container');
-          const prevBtn = section.querySelector('[data-carousel="prev"]') || section.querySelector('.carousel-prev');
-          const nextBtn = section.querySelector('[data-carousel="next"]') || section.querySelector('.carousel-next');
-        
-          if (!container || !prevBtn || !nextBtn) return;
-        
-          // Clone buttons to remove existing listeners
-          const newPrevBtn = prevBtn.cloneNode(true);
-          const newNextBtn = nextBtn.cloneNode(true);
-          prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
-          nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
-        
-          let currentIndex = 0;
-          const scrollAmount = 320;
-        
-          function updateCarousel(direction) {
-            const maxScroll = container.scrollWidth - container.parentElement.offsetWidth;
-
-            if (direction === 'next') {
-              currentIndex = Math.min(currentIndex + scrollAmount, maxScroll);
-            } else {
-              currentIndex = Math.max(currentIndex - scrollAmount, 0);
-            }
-
-            container.style.transform = 'translateX(-' + currentIndex + 'px)';
-          }
-
-          newPrevBtn.addEventListener('click', () => updateCarousel('prev'));
-          newNextBtn.addEventListener('click', () => updateCarousel('next'));
-        }
-
-        if (document.readyState === 'loading') {
-          document.addEventListener('DOMContentLoaded', initCarousel);
-        } else {
-          initCarousel();
-        }
-        window.addEventListener('load', initCarousel);
-      })();
-      </script>
-    </section>
     <footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <!-- Main Content Grid -->
         <div class="grid lg:grid-cols-12 gap-12 pb-16">
           <!-- Logo & Contact Info -->
           <div class="lg:col-span-5 flex flex-col gap-8">
-            <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            <!-- <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
               <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
-            </a>
+            </a> -->
 
             <p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-              Award-winning architecture studio creating spaces that inspire and endure for generations.
+              Taking inspiration from transgender CS students since 2022
             </p>
 
             <!-- Contact Card -->
             <div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
               <h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
               <div class="flex flex-col gap-3">
-                <a href="mailto:hello@archway.studio" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
-                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
-                  </svg>
-                  hello@archway.studio
+                <a href="https://discordapp.com/users/714918826831118436" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                    <svg class="w-5 h-5 text-indigo-500" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M18.59 5.88997C17.36 5.31997 16.05 4.89997 14.67 4.65997C14.5 4.95997 14.3 5.36997 14.17 5.69997C12.71 5.47997 11.26 5.47997 9.83001 5.69997C9.69001 5.36997 9.49001 4.95997 9.32001 4.65997C7.94001 4.89997 6.63001 5.31997 5.40001 5.88997C2.92001 9.62997 2.25001 13.28 2.58001 16.87C4.23001 18.1 5.82001 18.84 7.39001 19.33C7.78001 18.8 8.12001 18.23 8.42001 17.64C7.85001 17.43 7.31001 17.16 6.80001 16.85C6.94001 16.75 7.07001 16.64 7.20001 16.54C10.33 18 13.72 18 16.81 16.54C16.94 16.65 17.07 16.75 17.21 16.85C16.7 17.16 16.15 17.42 15.59 17.64C15.89 18.23 16.23 18.8 16.62 19.33C18.19 18.84 19.79 18.1 21.43 16.87C21.82 12.7 20.76 9.08997 18.61 5.88997H18.59ZM8.84001 14.67C7.90001 14.67 7.13001 13.8 7.13001 12.73C7.13001 11.66 7.88001 10.79 8.84001 10.79C9.80001 10.79 10.56 11.66 10.55 12.73C10.55 13.79 9.80001 14.67 8.84001 14.67ZM15.15 14.67C14.21 14.67 13.44 13.8 13.44 12.73C13.44 11.66 14.19 10.79 15.15 10.79C16.11 10.79 16.87 11.66 16.86 12.73C16.86 13.79 16.11 14.67 15.15 14.67Z" fill="#000000"/>
+                    </svg>
+                  Discord
                 </a>
-                <a href="tel:+1234567890" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                <a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
                   <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                   </svg>
-                  +1 (234) 567-890
+                  Signal
+                </a>
+                <a href="mailto:pizza2d1@proton.me" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                  pizza2d1@proton.me
+                </a>
+                <a href="tel:+3852780007" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                  </svg>
+                  +1 (385) 287-0007
                 </a>
               </div>
             </div>
@@ -474,17 +357,17 @@
               <div>
                 <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
                 <ul class="flex flex-col gap-3">
-                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
-                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
-                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
-                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
+                  <li><a href="https://jellyfin.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Jellyfin</a></li>
+                  <li><a href="https://copyparty.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Copyparty</a></li>
+                  <li><a href="https://gitea.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Gitea</a></li>
+                  <li><a href="https://convert.happylizard.me" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Any file conversion tool (Portal Runner)</a></li>
                 </ul>
               </div>
             </nav>
           </div>
 
           <!-- CTA Section -->
-          <div class="lg:col-span-3">
+          <!-- <div class="lg:col-span-3">
             <div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
               <h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
               <p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
@@ -495,28 +378,28 @@
                 Schedule Consultation
               </a>
             </div>
-          </div>
+          </div> -->
         </div>
 
         <!-- Divider -->
-        <div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
+        <!-- <div class="h-px bg-slate-200 dark:bg-neutral-800"></div> -->
 
         <!-- Bottom Section -->
-        <div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
+        <!-- <div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6"> -->
           <!-- Copyright -->
-          <p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+          <!-- <p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
             © 2026 Archway Studio. All rights reserved.
-          </p>
+          </p> -->
 
           <!-- Legal Links -->
-          <ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+          <!-- <ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
             <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
             <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
             <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
-          </ul>
+          </ul> -->
 
           <!-- Social Icons -->
-          <div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+          <!-- <div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
             <a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
               <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                 <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
@@ -532,8 +415,8 @@
                 <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
               </svg>
             </a>
-          </div>
-        </div>
+          </div> -->
+        <!-- </div> -->
       </div>
     </footer>
     </body>
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..ef7fa2c
--- /dev/null
+++ b/login.html
@@ -0,0 +1 @@
+There is no login page, why would you need one?
\ No newline at end of file
diff --git a/services.html b/services.html
deleted file mode 100644
index 906613b..0000000
--- a/services.html
+++ /dev/null
@@ -1,345 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
-    <link rel="stylesheet" href="/assets/css/just-the-docs-default.css">
-    <link rel="stylesheet" href="/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">
-    <style id="jtd-nav-activation">
-        .site-nav>ul.nav-list:first-child>li>a,
-        .site-nav>ul.nav-list:first-child>li>ul>li:not(:nth-child(5))>a,
-        .site-nav>ul.nav-list:first-child>li>ul>li>ul>li a {
-            background-image: none;
-        }
-
-        .site-nav>ul.nav-list:not(:first-child) a,
-        .site-nav li.external a {
-            background-image: none;
-        }
-
-        .site-nav>ul.nav-list:first-child>li:nth-child(3)>ul>li:nth-child(5)>a {
-            font-weight: 600;
-            text-decoration: none;
-        }
-
-        .site-nav>ul.nav-list:first-child>li:nth-child(3)>button svg,
-        .site-nav>ul.nav-list:first-child>li:nth-child(3)>ul>li:nth-child(5)>button svg {
-            transform: rotate(-90deg);
-        }
-
-        .site-nav>ul.nav-list:first-child>li.nav-list-item:nth-child(3)>ul.nav-list,
-        .site-nav>ul.nav-list:first-child>li.nav-list-item:nth-child(3)>ul.nav-list>li.nav-list-item:nth-child(5)>ul.nav-list {
-            display: block;
-        }
-    </style>
-    <script src="/assets/js/vendor/lunr.min.js"></script>
-    <script src="/assets/js/just-the-docs.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="/favicon.ico" type="image/x-icon">
-    <title>Server Links | Pizza2d1’s Webpage</title>
-    <meta name="generator" content="Jekyll v3.10.0" />
-    <meta property="og:title" content="Server Links" />
-    <meta property="og:locale" content="en_US" />
-    <meta name="description" content="A Jekyll theme for documentation" />
-    <meta property="og:description" content="A Jekyll theme for documentation" />
-    <link rel="canonical" href="https://pizza2d1.github.io/server_links" />
-    <meta property="og:url" content="https://pizza2d1.github.io/server_links" />
-    <meta property="og:site_name" content="Pizza2d1’s Webpage" />
-    <meta property="og:type" content="website" />
-    <meta name="twitter:card" content="summary" />
-    <meta property="twitter:title" content="Server Links" />
-    <script
-        type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"A Jekyll theme for documentation","headline":"Server Links","url":"https://pizza2d1.github.io/server_links"}</script>
-
-<body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg"
-        class="d-none">
-        <symbol id="svg-link" viewBox="0 0 24 24">
-            <title>Link</title><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-link">
-                <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
-                <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
-            </svg>
-        </symbol>
-        <symbol id="svg-menu" viewBox="0 0 24 24">
-            <title>Menu</title><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-menu">
-                <line x1="3" y1="12" x2="21" y2="12"></line>
-                <line x1="3" y1="6" x2="21" y2="6"></line>
-                <line x1="3" y1="18" x2="21" y2="18"></line>
-            </svg>
-        </symbol>
-        <symbol id="svg-arrow-right" viewBox="0 0 24 24">
-            <title>Expand</title><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-chevron-right">
-                <polyline points="9 18 15 12 9 6"></polyline>
-            </svg>
-        </symbol>
-        <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
-            stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
-            <title id="svg-external-link-title">(external link)</title>
-            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-            <polyline points="15 3 21 3 21 9"></polyline>
-            <line x1="10" y1="14" x2="21" y2="3"></line>
-        </symbol>
-        <symbol id="svg-doc" viewBox="0 0 24 24">
-            <title>Document</title><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-file">
-                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
-                <polyline points="13 2 13 9 20 9"></polyline>
-            </svg>
-        </symbol>
-        <symbol id="svg-search" viewBox="0 0 24 24">
-            <title>Search</title><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-                class="feather feather-search">
-                <circle cx="11" cy="11" r="8"></circle>
-                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
-            </svg>
-        </symbol>
-        <symbol id="svg-copy" viewBox="0 0 16 16">
-            <title>Copy</title><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                class="bi bi-clipboard" viewBox="0 0 16 16">
-                <path
-                    d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
-                <path
-                    d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
-            </svg>
-        </symbol>
-        <symbol id="svg-copied" viewBox="0 0 16 16">
-            <title>Copied</title><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
-                <path
-                    d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z" />
-                <path
-                    d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z" />
-            </svg>
-        </symbol>
-    </svg>
-    <div class="side-bar">
-        <div class="site-header" role="banner"> <a href="/" class="site-title lh-tight"> Pizza2d1's Webpage </a> <button
-                id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg
-                    viewBox="0 0 24 24" class="icon" aria-hidden="true">
-                    <use xlink:href="#svg-menu"></use>
-                </svg> </button></div>
-        <nav aria-label="Main" id="site-nav" class="site-nav">
-            <ul class="nav-list">
-                <li class="nav-list-item"><a href="/" class="nav-list-link">Home</a>
-                <li class="nav-list-item"><a href="/src/aboutme/" class="nav-list-link">About Me</a>
-                <li class="nav-list-item"><button class="nav-list-expander btn-reset"
-                        aria-label="toggle items in Server News category" aria-pressed="false"> <svg viewBox="0 0 24 24"
-                            aria-hidden="true">
-                            <use xlink:href="#svg-arrow-right"></use>
-                        </svg> </button><a href="/server_news" class="nav-list-link">Server News</a>
-                    <ul class="nav-list">
-                        <li class="nav-list-item"><a href="/server_news/gitea" class="nav-list-link">Gitea Server
-                                News</a>
-                        <li class="nav-list-item"><a href="/server_news/website" class="nav-list-link">Website Server
-                                News</a>
-                        <li class="nav-list-item"><a href="/server_news/jellyfin" class="nav-list-link">Jellyfin Server
-                                News</a>
-                        <li class="nav-list-item"><a href="/server_news/rstack" class="nav-list-link">Rstack Server
-                                News</a>
-                        <li class="nav-list-item"><a href="/server_links" class="nav-list-link">Server Links</a>
-                    </ul>
-                <li class="nav-list-item"><button class="nav-list-expander btn-reset"
-                        aria-label="toggle items in Projects category" aria-pressed="false"> <svg viewBox="0 0 24 24"
-                            aria-hidden="true">
-                            <use xlink:href="#svg-arrow-right"></use>
-                        </svg> </button><a href="/src/projects/" class="nav-list-link">Projects</a>
-                    <ul class="nav-list">
-                        <li class="nav-list-item"><a href="/src/projects/operating_system/" class="nav-list-link">My
-                                Operating System</a>
-                        <li class="nav-list-item"><a href="/src/projects/main_website/" class="nav-list-link">My Other
-                                Website</a>
-                        <li class="nav-list-item"><a href="/src/projects/pizzapaper/"
-                                class="nav-list-link">pizzapaper</a>
-                    </ul>
-            </ul>
-            <ul class="nav-list">
-                <li class="nav-list-item external"> <a href="https://en.wikipedia.org/wiki/Terry_A._Davis"
-                        class="nav-list-link external"> King Terry the Terrible <svg viewBox="0 0 24 24"
-                            aria-labelledby="svg-external-link-title">
-                            <use xlink:href="#svg-external-link"></use>
-                        </svg> </a>
-            </ul>
-        </nav>
-        <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the
-                Docs</a>, a documentation theme for Jekyll.</footer>
-    </div>
-    <div class="main" id="top">
-        <div id="main-header" class="main-header">
-            <div class="search" role="search">
-                <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0"
-                        placeholder="Search Pizza2d1's Webpage" aria-label="Search Pizza2d1's Webpage"
-                        autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24"
-                            class="search-icon">
-                            <use xlink:href="#svg-search"></use>
-                        </svg></label></div>
-                <div id="search-results" class="search-results"></div>
-            </div>
-            <nav aria-label="Auxiliary" class="aux-nav">
-                <ul class="aux-nav-list">
-                    <li class="aux-nav-list-item"> <a href="https://pizza2d1.github.io" class="site-button"> HOMEPAGE
-                        </a>
-                    <li class="aux-nav-list-item"> <a href="https://github.com/pizza2d1/" class="site-button"> My Github
-                        </a>
-                </ul>
-            </nav>
-        </div>
-        <div class="main-content-wrap">
-            <nav aria-label="Breadcrumb" class="breadcrumb-nav">
-                <ol class="breadcrumb-nav-list">
-                    <li class="breadcrumb-nav-list-item"><a href="/server_news">Server News</a>
-                    <li class="breadcrumb-nav-list-item"><span>Server Links</span>
-                </ol>
-            </nav>
-            <div id="main-content" class="main-content">
-                <main>
-                    <h1 id="server-links"> <a href="#server-links" class="anchor-heading"
-                            aria-labelledby="server-links"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Server Links</h1>
-                    <p>Where I will try to keep an up to date list of services that you can use on my server</p>
-                    <hr />
-                    <blockquote class="warning">
-                        <p>Some of these links or services may not work, as being a server admin is very time consuming
-                            I guess and I keep trying to add stuff which breaks other things</p>
-                    </blockquote>
-                    <h1 id="media-streaming"> <a href="#media-streaming" class="anchor-heading"
-                            aria-labelledby="media-streaming"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Media streaming:</h1>
-                    <h2 id="jellyfin-"> <a href="#jellyfin-" class="anchor-heading" aria-labelledby="jellyfin-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://jellyfin.happylizard.me">Jellyfin</a> <a
-                            href="https://jellyfin.happylizard.me"><img src="/assets/images/jellyfin.png"
-                                alt="Jellyfin Logo" width="25" /></a></h2>
-                    <p><a href="https://jellyfin.happylizard.me"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fjellyfin.happylizard.me"
-                                alt="a" /></a></p>
-                    <p><a href="https://jellyfin.org/">Official Jellyfin Website</a></p>
-                    <h1 id="file-server"> <a href="#file-server" class="anchor-heading"
-                            aria-labelledby="file-server"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> File server:</h1>
-                    <h2 id="copyparty-"> <a href="#copyparty-" class="anchor-heading" aria-labelledby="copyparty-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://copyparty.happylizard.me">Copyparty 🎊</a></h2>
-                    <p><a href="https://copyparty.happylizard.me"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fcopyparty.happylizard.me"
-                                alt="a" /></a></p>
-                    <p><a href="https://github.com/9001/copyparty">Copyparty Github</a></p>
-                    <h1 id="git-repositories"> <a href="#git-repositories" class="anchor-heading"
-                            aria-labelledby="git-repositories"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Git repositories:</h1>
-                    <h2 id="gitea-"> <a href="#gitea-" class="anchor-heading" aria-labelledby="gitea-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://gitea.happylizard.me">Gitea</a> <a
-                            href="https://gitea.happylizard.me"><img src="/assets/images/gitea.png" alt="Gitea Logo"
-                                width="25" /></a></h2>
-                    <p><a href="https://gitea.happylizard.me"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fgitea.happylizard.me"
-                                alt="a" /></a></p>
-                    <p><a href="https://about.gitea.com/">Official Gitea Website</a></p>
-                    <h1 id="rstack-trusted-only"> <a href="#rstack-trusted-only" class="anchor-heading"
-                            aria-labelledby="rstack-trusted-only"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Rstack (trusted only):</h1>
-                    <h2 id="radarr-"> <a href="#radarr-" class="anchor-heading" aria-labelledby="radarr-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://radarr.teto.beer">Radarr</a> <a
-                            href="https://radarr.teto.beer"><img src="/assets/images/radarr.png" alt="Radarr Logo"
-                                width="25" /></a></h2>
-                    <p><a href="https://radarr.teto.beer"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fradarr.teto.beer"
-                                alt="a" /></a></p>
-                    <h2 id="sonarr-"> <a href="#sonarr-" class="anchor-heading" aria-labelledby="sonarr-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://sonarr.teto.beer">Sonarr</a> <a
-                            href="https://sonarr.teto.beer"><img src="/assets/images/sonarr.png" alt="Sonarr Logo"
-                                width="25" /></a></h2>
-                    <p><a href="https://sonarr.teto.beer"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fsonarr.teto.beer"
-                                alt="a" /></a></p>
-                    <h2 id="lidarr-"> <a href="#lidarr-" class="anchor-heading" aria-labelledby="lidarr-"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://lidarr.teto.beer">Lidarr</a> <a
-                            href="https://lidarr.teto.beer"><img src="/assets/images/lidarr.png" alt="Lidarr Logo"
-                                width="25" /></a></h2>
-                    <p><a href="https://lidarr.teto.beer"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Flidarr.teto.beer"
-                                alt="a" /></a></p>
-                    <h2 id="qbittorrent-client-"> <a href="#qbittorrent-client-" class="anchor-heading"
-                            aria-labelledby="qbittorrent-client-"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://torrent.teto.beer">qBittorrent Client</a> <a
-                            href="https://torrent.teto.beer"><img src="/assets/images/qbittorrent.png"
-                                alt="torrent.Logo" width="25" /></a></h2>
-                    <p><a href="https://torrent.teto.beer"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Ftorrent.teto.beer"
-                                alt="a" /></a></p>
-                    <h1 id="others"> <a href="#others" class="anchor-heading" aria-labelledby="others"><svg
-                                viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Others:</h1>
-                    <h2 id="portal-runner-converter"> <a href="#portal-runner-converter" class="anchor-heading"
-                            aria-labelledby="portal-runner-converter"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://convert.happylizard.me">Portal Runner Converter</a></h2>
-                    <p><a href="https://convert.happylizard.me"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fconvert.happylizard.me"
-                                alt="a" /></a></p>
-                    <p><a href="https://youtu.be/btUbcsTbVA8">Youtube Video</a> <a
-                            href="https://github.com/p2r3/convert">Github</a></p>
-                    <h2 id="happy-ripper"> <a href="#happy-ripper" class="anchor-heading"
-                            aria-labelledby="happy-ripper"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> <a href="https://ethanis.gay">Happy Ripper</a></h2>
-                    <p><a href="https://ethanis.gay"><img
-                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fethanis.gay"
-                                alt="a" /></a></p>
-                    <blockquote class="new-title">
-                        <p>Quick Note</p>
-                        <p>Not all these services are publicly usable, as they require a level of trust, if you want to
-                            get access to some of these services, just make sure to contact me first</p>
-                    </blockquote>
-                    <h2 id="contact-links"> <a href="#contact-links" class="anchor-heading"
-                            aria-labelledby="contact-links"><svg viewBox="0 0 16 16" aria-hidden="true">
-                                <use xlink:href="#svg-link"></use>
-                            </svg></a> Contact Links:</h2>
-                    <p><a href="https://discordapp.com/users/714918826831118436"><img
-                                src="https://static.vecteezy.com/system/resources/previews/006/892/625/non_2x/discord-logo-icon-editorial-free-vector.jpg"
-                                alt="Discord Logo" width="20" /></a> <a
-                            href="https://discordapp.com/users/714918826831118436">Discord</a></p>
-                    <p><a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS"><img
-                                src="https://thumb.wikimedia.org/wikipedia/commons/thumb/6/60/Signal-Logo-Ultramarine_%282024%29.svg/1280px-Signal-Logo-Ultramarine_%282024%29.svg.png?utm_source=en.wikipedia.org&amp;utm_campaign=imageinfo&amp;utm_content=thumbnail"
-                                alt="Signal Logo" width="20" /></a> <a
-                            href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS">Signal</a>
-                    </p>
-                </main>
-                <hr>
-                <footer>
-                    <p><a href="#top" id="back-to-top">Back to top</a></p>
-                    <p class="text-small text-grey-dk-100 mb-0">Distributed by an <a
-                            href="https://github.com/just-the-docs/just-the-docs/tree/main/LICENSE.txt">MIT license.</a>
-                        <a href="https://www.netlify.com/">This site is powered by Netlify.</a></p>
-                    <div class="d-flex mt-2"></div>
-                </footer>
-            </div>
-        </div>
-        <div class="search-overlay"></div>
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/mermaid@9.1.6/dist/mermaid.min.js"></script>
-    <script> var config = {}; mermaid.initialize(config); window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid')); </script>
\ No newline at end of file
diff --git a/contact.html b/services/index.html
similarity index 97%
rename from contact.html
rename to services/index.html
index 1b08cd0..dc54feb 100644
--- a/contact.html
+++ b/services/index.html
@@ -10,55 +10,65 @@
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-20">
      <!-- Logo -->
-     <a data-motion="logo" href="#" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <a data-motion="logo" href="/" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
      </a>
 
      <!-- Icon Navigation -->
      <nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
      </svg>
      </div>
-     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Home</span>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Home
+     </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/projects/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
      </svg>
      </div>
-     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Projects</span>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Projects
+     </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/services/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      </div>
-     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Team</span>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Services
+     </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/certificates/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
      </svg>
      </div>
-     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Analytics</span>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Certificates
+     </span>
      </a>
 
-     <a href="#" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <a href="/socials/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
      <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
      <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
      </svg>
      </div>
-     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">Messages</span>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Socials
+     </span>
      </a>
      </nav>
 
@@ -73,11 +83,8 @@
      </svg>
      </button>
 
-     <a href="#" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
-     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-     </svg>
-     Create
+     <a href="/login.html" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
+     Login
      </a>
      </div>
      </div>
diff --git a/socials/index.html b/socials/index.html
new file mode 100644
index 0000000..3046784
--- /dev/null
+++ b/socials/index.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+    <header id="_header_icon_nav_h10_001" class="relative bg-white dark:bg-neutral-950 border-b border-slate-100 dark:border-neutral-900">
+     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+     <div class="flex items-center justify-between h-20">
+     <!-- Logo -->
+     <a data-motion="logo" href="/" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
+     </a>
+
+     <!-- Icon Navigation -->
+     <nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <a href="/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Home
+     </span>
+     </a>
+
+     <a href="/projects/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Projects
+     </span>
+     </a>
+
+     <a href="/services/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Services
+     </span>
+     </a>
+
+     <a href="/certificates/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Certificates
+     </span>
+     </a>
+
+     <a href="/socials/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Socials
+     </span>
+     </a>
+     </nav>
+
+     <!-- Right Actions -->
+     <div data-motion="actions" class="flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <button data-motion="button" onclick="document.documentElement.classList.toggle('dark')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+     </svg>
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+     </svg>
+     </button>
+
+     <a href="/login.html" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
+     Login
+     </a>
+     </div>
+     </div>
+     </div>
+    </header>
+    <section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Centered Header -->
+        <div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
+          <h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Contact Page</h1>
+          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
+            Ask me about anything, I might not answer, but thats even more reason to not be nervous to send a message
+          </p>
+
+        <!-- Asymmetric Image Grid -->
+        <div class="grid lg:grid-cols-6 gap-5">
+          <!-- Left Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS"><img data-motion="image" src="/assets/img/contact_page/signal.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <a href="https://discordapp.com/users/714918826831118436"><img data-motion="image" src="/assets/img/contact_page/discord.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
+            </div>
+          </div>
+
+          <!-- Right Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <a href="mailto:pizza2d1@proton.me"><img data-motion="image" src="/assets/img/contact_page/proton.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-56" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <a href="tel:+3852780007"><img data-motion="image" src="/assets/img/contact_page/firefox_relay.png" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);"></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Main Content Grid -->
+        <div class="grid lg:grid-cols-12 gap-12 pb-16">
+          <!-- Logo & Contact Info -->
+          <div class="lg:col-span-5 flex flex-col gap-8">
+            <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
+            </a>
+
+            <p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Award-winning architecture studio creating spaces that inspire and endure for generations.
+            </p>
+
+            <!-- Contact Card -->
+            <div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
+              <div class="flex flex-col gap-3">
+                <a href="mailto:hello@archway.studio" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                  hello@archway.studio
+                </a>
+                <a href="tel:+1234567890" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                  </svg>
+                  +1 (234) 567-890
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation Links -->
+          <div class="lg:col-span-4">
+            <nav data-motion="nav" class="grid grid-cols-2 gap-8" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Company</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</a></li>
+                </ul>
+              </div>
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
+                </ul>
+              </div>
+            </nav>
+          </div>
+
+          <!-- CTA Section -->
+          <div class="lg:col-span-3">
+            <div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
+              <p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
+              <a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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 2z"></path>
+                </svg>
+                Schedule Consultation
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
+
+        <!-- Bottom Section -->
+        <div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
+          <!-- Copyright -->
+          <p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            © 2026 Archway Studio. All rights reserved.
+          </p>
+
+          <!-- Legal Links -->
+          <ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
+          </ul>
+
+          <!-- Social Icons -->
+          <div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..15b5a25
--- /dev/null
+++ b/test.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+                    <h1 id="server-links"> <a href="#server-links" class="anchor-heading"
+                            aria-labelledby="server-links"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Server Links</h1>
+                    <p>Where I will try to keep an up to date list of services that you can use on my server</p>
+                    <hr />
+                    <blockquote class="warning">
+                        <p>Some of these links or services may not work, as being a server admin is very time consuming
+                            I guess and I keep trying to add stuff which breaks other things</p>
+                    </blockquote>
+                    <h1 id="media-streaming"> <a href="#media-streaming" class="anchor-heading"
+                            aria-labelledby="media-streaming"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Media streaming:</h1>
+                    <h2 id="jellyfin-"> <a href="#jellyfin-" class="anchor-heading" aria-labelledby="jellyfin-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://jellyfin.happylizard.me">Jellyfin</a> <a
+                            href="https://jellyfin.happylizard.me"><img src="/assets/images/jellyfin.png"
+                                alt="Jellyfin Logo" width="25" /></a></h2>
+                    <p><a href="https://jellyfin.happylizard.me"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fjellyfin.happylizard.me"
+                                alt="a" /></a></p>
+                    <p><a href="https://jellyfin.org/">Official Jellyfin Website</a></p>
+                    <h1 id="file-server"> <a href="#file-server" class="anchor-heading"
+                            aria-labelledby="file-server"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> File server:</h1>
+                    <h2 id="copyparty-"> <a href="#copyparty-" class="anchor-heading" aria-labelledby="copyparty-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://copyparty.happylizard.me">Copyparty 🎊</a></h2>
+                    <p><a href="https://copyparty.happylizard.me"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fcopyparty.happylizard.me"
+                                alt="a" /></a></p>
+                    <p><a href="https://github.com/9001/copyparty">Copyparty Github</a></p>
+                    <h1 id="git-repositories"> <a href="#git-repositories" class="anchor-heading"
+                            aria-labelledby="git-repositories"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Git repositories:</h1>
+                    <h2 id="gitea-"> <a href="#gitea-" class="anchor-heading" aria-labelledby="gitea-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://gitea.happylizard.me">Gitea</a> <a
+                            href="https://gitea.happylizard.me"><img src="/assets/images/gitea.png" alt="Gitea Logo"
+                                width="25" /></a></h2>
+                    <p><a href="https://gitea.happylizard.me"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fgitea.happylizard.me"
+                                alt="a" /></a></p>
+                    <p><a href="https://about.gitea.com/">Official Gitea Website</a></p>
+                    <h1 id="rstack-trusted-only"> <a href="#rstack-trusted-only" class="anchor-heading"
+                            aria-labelledby="rstack-trusted-only"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Rstack (trusted only):</h1>
+                    <h2 id="radarr-"> <a href="#radarr-" class="anchor-heading" aria-labelledby="radarr-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://radarr.teto.beer">Radarr</a> <a
+                            href="https://radarr.teto.beer"><img src="/assets/images/radarr.png" alt="Radarr Logo"
+                                width="25" /></a></h2>
+                    <p><a href="https://radarr.teto.beer"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fradarr.teto.beer"
+                                alt="a" /></a></p>
+                    <h2 id="sonarr-"> <a href="#sonarr-" class="anchor-heading" aria-labelledby="sonarr-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://sonarr.teto.beer">Sonarr</a> <a
+                            href="https://sonarr.teto.beer"><img src="/assets/images/sonarr.png" alt="Sonarr Logo"
+                                width="25" /></a></h2>
+                    <p><a href="https://sonarr.teto.beer"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fsonarr.teto.beer"
+                                alt="a" /></a></p>
+                    <h2 id="lidarr-"> <a href="#lidarr-" class="anchor-heading" aria-labelledby="lidarr-"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://lidarr.teto.beer">Lidarr</a> <a
+                            href="https://lidarr.teto.beer"><img src="/assets/images/lidarr.png" alt="Lidarr Logo"
+                                width="25" /></a></h2>
+                    <p><a href="https://lidarr.teto.beer"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Flidarr.teto.beer"
+                                alt="a" /></a></p>
+                    <h2 id="qbittorrent-client-"> <a href="#qbittorrent-client-" class="anchor-heading"
+                            aria-labelledby="qbittorrent-client-"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://torrent.teto.beer">qBittorrent Client</a> <a
+                            href="https://torrent.teto.beer"><img src="/assets/images/qbittorrent.png"
+                                alt="torrent.Logo" width="25" /></a></h2>
+                    <p><a href="https://torrent.teto.beer"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Ftorrent.teto.beer"
+                                alt="a" /></a></p>
+                    <h1 id="others"> <a href="#others" class="anchor-heading" aria-labelledby="others"><svg
+                                viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Others:</h1>
+                    <h2 id="portal-runner-converter"> <a href="#portal-runner-converter" class="anchor-heading"
+                            aria-labelledby="portal-runner-converter"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://convert.happylizard.me">Portal Runner Converter</a></h2>
+                    <p><a href="https://convert.happylizard.me"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=http%3A%2F%2Fconvert.happylizard.me"
+                                alt="a" /></a></p>
+                    <p><a href="https://youtu.be/btUbcsTbVA8">Youtube Video</a> <a
+                            href="https://github.com/p2r3/convert">Github</a></p>
+                    <h2 id="happy-ripper"> <a href="#happy-ripper" class="anchor-heading"
+                            aria-labelledby="happy-ripper"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> <a href="https://ethanis.gay">Happy Ripper</a></h2>
+                    <p><a href="https://ethanis.gay"><img
+                                src="https://img.shields.io/website?down_color=red&amp;down_message=offline&amp;style=plastic&amp;up_color=green&amp;up_message=up&amp;label=Site%20Status&amp;url=https%3A%2F%2Fethanis.gay"
+                                alt="a" /></a></p>
+                    <blockquote class="new-title">
+                        <p>Quick Note</p>
+                        <p>Not all these services are publicly usable, as they require a level of trust, if you want to
+                            get access to some of these services, just make sure to contact me first</p>
+                    </blockquote>
+                    <h2 id="contact-links"> <a href="#contact-links" class="anchor-heading"
+                            aria-labelledby="contact-links"><svg viewBox="0 0 16 16" aria-hidden="true">
+                                <use xlink:href="#svg-link"></use>
+                            </svg></a> Contact Links:</h2>
+                    <p><a href="https://discordapp.com/users/714918826831118436"><img
+                                src="https://static.vecteezy.com/system/resources/previews/006/892/625/non_2x/discord-logo-icon-editorial-free-vector.jpg"
+                                alt="Discord Logo" width="20" /></a> <a
+                            href="https://discordapp.com/users/714918826831118436">Discord</a></p>
+                    <p><a href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS"><img
+                                src="https://thumb.wikimedia.org/wikipedia/commons/thumb/6/60/Signal-Logo-Ultramarine_%282024%29.svg/1280px-Signal-Logo-Ultramarine_%282024%29.svg.png?utm_source=en.wikipedia.org&amp;utm_campaign=imageinfo&amp;utm_content=thumbnail"
+                                alt="Signal Logo" width="20" /></a> <a
+                            href="https://signal.me/#eu/14nA-tBiLDlv3Z1DzDlmNSd_hpqwEk2EcjhmY0uWcjbTAQWx9NZGiJfkVOkMR4mS">Signal</a>
+                    </p>
+
+
+
+    <section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Centered Header -->
+        <div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
+          <h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Pizza2d1's Project Showcase</h1>
+          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
+            <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Embrace</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">challenges,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">find</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">inspiration</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">in</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">everyday</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">moments,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">transform</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">vision</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">into</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">reality.</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Discover</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">unique</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">creative</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">voice.</span>
+          </p>
+          <div class="flex flex-wrap justify-center gap-4">
+            <a href="https://pizza2d1.github.io/server_links" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Links to services
+            </a>
+            <a href="https://github.com/pizza2d1" data-motion="button" class="px-6 py-3 bg-orange-100 dark:bg-orange-900/20 hover:bg-orange-200 dark:hover:bg-orange-900/30 transition-colors rounded-full text-orange-700 dark:text-orange-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Github
+            </a>
+            <a href="https://gitea.happylizard.me" data-motion="button" class="px-6 py-3 bg-green-600 hover:bg-green-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Gitea
+            </a>
+            <a href="https://www.happylizard.me/contact.html" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Contact Me!
+            </a>
+          </div>
+        </div>
+
+        <!-- Asymmetric Image Grid -->
+        <div class="grid lg:grid-cols-12 gap-5">
+          <!-- Left Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Design workspace" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+          </div>
+
+          <!-- Center - Large featured image -->
+          <div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+              <div class="absolute bottom-6 left-6 right-6">
+                <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Featured</span>
+                <h3 class="text-white text-xl font-bold">The Creative Process</h3>
+                <p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <a href="https://www.happylizard.me/project_page/projects/?project_number=1">
+                <img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg " alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                </a>
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+          </div>
+        </div>
+
+        <!-- Stats Row -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="_features_minimal_icons_v6_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Centered Header -->
+        <div class="text-center max-w-3xl mx-auto mb-16" data-motion="header" style="opacity: 1;">
+          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Developer Tools</span>
+          <h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
+            <span data-animate="heading" style="opacity: 1;"><span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Everything</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">You</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Need</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">to</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Build</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Faster</span></span>
+          </h2>
+          <p data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
+            <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">A</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">complete</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">developer</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">toolkit</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">with</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">powerful</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">APIs,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">comprehensive</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">documentation,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">enterprise-grade</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">infrastructure.</span>
+          </p>
+        </div>
+
+        <!-- Bento Grid Features -->
+        <div class="grid lg:grid-cols-3 gap-5">
+          <!-- Large Feature Card -->
+          <div data-motion="card" class="lg:col-span-2 p-8 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div class="grid sm:grid-cols-2 gap-8">
+              <div>
+                <div data-motion="icon" class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/40 rounded-2xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                  <svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                  </svg>
+                </div>
+                <h3 class="text-slate-900 dark:text-white text-xl font-semibold mb-3">Modular Architecture</h3>
+                <p class="text-slate-600 dark:text-neutral-400 text-base">
+                  Build with composable modules that scale independently and integrate seamlessly with your existing stack.
+                </p>
+              </div>
+              <div class="rounded-2xl overflow-hidden">
+                <img data-motion="image" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&amp;auto=format&amp;fit=crop&amp;q=80" alt="Code on screen" class="w-full h-48 object-cover" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              </div>
+            </div>
+          </div>
+
+          <!-- Accent Card -->
+          <div data-motion="card" class="p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div>
+              <div data-motion="icon" class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <h3 class="text-white text-xl font-semibold mb-3">Type Safety</h3>
+              <p class="text-indigo-100 text-base">
+                Full TypeScript support with auto-generated types for bulletproof development.
+              </p>
+            </div>
+            <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Learn More
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+              </svg>
+            </a>
+          </div>
+
+          <!-- Small Feature Cards -->
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">REST &amp; GraphQL</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Choose your preferred API style with full support for both endpoints.
+            </p>
+          </div>
+
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Rich Documentation</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Comprehensive guides and tutorials to get you started quickly.
+            </p>
+          </div>
+
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Plugin System</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Extend functionality with community and official plugins.
+            </p>
+          </div>
+
+          <!-- CTA Card -->
+          <div data-motion="card" class="lg:col-span-2 p-8 bg-slate-900 dark:bg-neutral-800 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div>
+              <h3 class="text-white text-xl font-semibold mb-2">24/7 Enterprise Support</h3>
+              <p class="text-slate-400 text-base">Dedicated engineers with guaranteed response times for your team.</p>
+            </div>
+            <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold whitespace-nowrap" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Contact Sales
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <style>
+        .carousel-container { overflow: hidden; }
+      .carousel-track { display: flex; transition: transform 0.5s ease-out; }
+      </style>
+    <section id="_testimonial_centered_quote_avatars_v6_t27_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
+      <style>
+        .carousel-container { overflow: hidden; }
+      .carousel-track { display: flex; transition: transform 0.5s ease-out; }
+      </style>
+
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Carousel -->
+        <div class="relative">
+          <div class="carousel-container">
+            <div data-carousel="track" class="carousel-track">
+              <!-- Slide 1 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "The platform transformed how we approach customer feedback. Within weeks, we saw a 40% improvement in response times and our NPS score jumped significantly."
+                  </p>
+                  <!-- Avatar Row -->
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Thomas Wright" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Thomas Wright</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">VP of Operations, TechFlow</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Slide 2 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "We've tried many solutions before, but nothing comes close to this level of integration and ease of use. Our team adopted it instantly and productivity soared."
+                  </p>
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Rachel Kim" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Rachel Kim</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">Head of Product, Innovate Labs</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Slide 3 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "The analytics dashboard alone is worth the investment. We now have real-time insights that help us make data-driven decisions every single day."
+                  </p>
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="David Chen" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">David Chen</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">CTO, DataStream Inc</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation Dots & Arrows -->
+          <div class="flex items-center justify-center gap-6 mt-12">
+            <button data-motion="button" data-carousel="prev" type="button" aria-label="Previous testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+              </svg>
+            </button>
+            <div class="flex gap-2">
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-indigo-500" aria-label="Go to slide 1" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+            </div>
+            <button data-motion="button" data-carousel="next" type="button" aria-label="Next testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Carousel Script -->
+      <script>
+      (function() {
+        function initCarousel() {
+          const section = document.getElementById('_testimonial_centered_quote_avatars_v6_t27_001');
+          if (!section) return;
+        
+          const container = section.querySelector('[data-carousel="container"]') || section.querySelector('.carousel-container');
+          const prevBtn = section.querySelector('[data-carousel="prev"]') || section.querySelector('.carousel-prev');
+          const nextBtn = section.querySelector('[data-carousel="next"]') || section.querySelector('.carousel-next');
+        
+          if (!container || !prevBtn || !nextBtn) return;
+        
+          // Clone buttons to remove existing listeners
+          const newPrevBtn = prevBtn.cloneNode(true);
+          const newNextBtn = nextBtn.cloneNode(true);
+          prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+          nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+        
+          let currentIndex = 0;
+          const scrollAmount = 320;
+        
+          function updateCarousel(direction) {
+            const maxScroll = container.scrollWidth - container.parentElement.offsetWidth;
+
+            if (direction === 'next') {
+              currentIndex = Math.min(currentIndex + scrollAmount, maxScroll);
+            } else {
+              currentIndex = Math.max(currentIndex - scrollAmount, 0);
+            }
+
+            container.style.transform = 'translateX(-' + currentIndex + 'px)';
+          }
+
+          newPrevBtn.addEventListener('click', () => updateCarousel('prev'));
+          newNextBtn.addEventListener('click', () => updateCarousel('next'));
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initCarousel);
+        } else {
+          initCarousel();
+        }
+        window.addEventListener('load', initCarousel);
+      })();
+      </script>
+    </section>
+    <footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Main Content Grid -->
+        <div class="grid lg:grid-cols-12 gap-12 pb-16">
+          <!-- Logo & Contact Info -->
+          <div class="lg:col-span-5 flex flex-col gap-8">
+            <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
+            </a>
+
+            <p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Award-winning architecture studio creating spaces that inspire and endure for generations.
+            </p>
+
+            <!-- Contact Card -->
+            <div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
+              <div class="flex flex-col gap-3">
+                <a href="mailto:hello@archway.studio" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                  hello@archway.studio
+                </a>
+                <a href="tel:+1234567890" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                  </svg>
+                  +1 (234) 567-890
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation Links -->
+          <div class="lg:col-span-4">
+            <nav data-motion="nav" class="grid grid-cols-2 gap-8" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Company</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</a></li>
+                </ul>
+              </div>
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
+                </ul>
+              </div>
+            </nav>
+          </div>
+
+          <!-- CTA Section -->
+          <div class="lg:col-span-3">
+            <div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
+              <p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
+              <a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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 2z"></path>
+                </svg>
+                Schedule Consultation
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
+
+        <!-- Bottom Section -->
+        <div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
+          <!-- Copyright -->
+          <p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            © 2026 Archway Studio. All rights reserved.
+          </p>
+
+          <!-- Legal Links -->
+          <ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
+          </ul>
+
+          <!-- Social Icons -->
+          <div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/untainted.html b/untainted.html
new file mode 100644
index 0000000..dc54feb
--- /dev/null
+++ b/untainted.html
@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
+    </head>
+    <body>
+    <header id="_header_icon_nav_h10_001" class="relative bg-white dark:bg-neutral-950 border-b border-slate-100 dark:border-neutral-900">
+     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+     <div class="flex items-center justify-between h-20">
+     <!-- Logo -->
+     <a data-motion="logo" href="/" class="flex items-center" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-8" alt="Logo">
+     </a>
+
+     <!-- Icon Navigation -->
+     <nav data-motion="nav" class="hidden lg:flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <a href="/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Home
+     </span>
+     </a>
+
+     <a href="/projects/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Projects
+     </span>
+     </a>
+
+     <a href="/services/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Services
+     </span>
+     </a>
+
+     <a href="/certificates/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Certificates
+     </span>
+     </a>
+
+     <a href="/socials/" class="flex flex-col items-center gap-1 px-4 py-2 rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors group">
+     <div data-motion="icon" class="w-10 h-10 bg-slate-100 dark:bg-neutral-800 rounded-xl flex items-center justify-center group-hover:bg-indigo-500 transition-colors" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+     </svg>
+     </div>
+     <span class="text-xs font-medium text-slate-600 dark:text-neutral-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+        Socials
+     </span>
+     </a>
+     </nav>
+
+     <!-- Right Actions -->
+     <div data-motion="actions" class="flex items-center gap-2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <button data-motion="button" onclick="document.documentElement.classList.toggle('dark')" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-slate-100 dark:hover:bg-neutral-800 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
+     </svg>
+     <svg class="w-5 h-5 text-slate-600 dark:text-neutral-400 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
+     </svg>
+     </button>
+
+     <a href="/login.html" class="h-10 px-5 bg-linear-to-r from-indigo-500 to-indigo-600 text-white text-sm font-semibold rounded-xl hover:shadow-lg hover:shadow-indigo-500/25 transition-all flex items-center gap-2">
+     Login
+     </a>
+     </div>
+     </div>
+     </div>
+    </header>
+    <section id="_hero_creative_journey_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Centered Header -->
+        <div class="text-center max-w-3xl mx-auto mb-16" data-motion="hero" style="opacity: 1;">
+          <h1 class="text-3xl sm:text-5xl lg:text-6xl font-bold text-slate-900 dark:text-white leading-tight mb-6">Pizza2d1's Project Showcase</h1>
+          <p class="text-lg text-slate-600 dark:text-neutral-400 mb-8" data-animate="text" style="opacity: 1;">
+            <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Embrace</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">challenges,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">find</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">inspiration</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">in</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">everyday</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">moments,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">transform</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">vision</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">into</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">reality.</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Discover</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">your</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">unique</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">creative</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">voice.</span>
+          </p>
+          <div class="flex flex-wrap justify-center gap-4">
+            <a href="https://pizza2d1.github.io/server_links" data-motion="button" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Links to services
+            </a>
+            <a href="https://github.com/pizza2d1" data-motion="button" class="px-6 py-3 bg-orange-100 dark:bg-orange-900/20 hover:bg-orange-200 dark:hover:bg-orange-900/30 transition-colors rounded-full text-orange-700 dark:text-orange-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Github
+            </a>
+            <a href="https://gitea.happylizard.me" data-motion="button" class="px-6 py-3 bg-green-600 hover:bg-green-700 transition-colors rounded-full text-white font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Gitea
+            </a>
+            <a href="https://www.happylizard.me/contact.html" data-motion="button" class="px-6 py-3 bg-indigo-100 dark:bg-indigo-900/30 hover:bg-indigo-200 dark:hover:bg-indigo-900/50 transition-colors rounded-full text-indigo-700 dark:text-indigo-300 font-semibold" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Contact Me!
+            </a>
+          </div>
+        </div>
+
+        <!-- Asymmetric Image Grid -->
+        <div class="grid lg:grid-cols-12 gap-5">
+          <!-- Left Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1760071744047-5542cbfda184?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwxfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative team collaboration" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654472-7d0f611c1b82?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwyfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Design workspace" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+          </div>
+
+          <!-- Center - Large featured image -->
+          <div class="lg:col-span-6" data-motion="card" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div class="relative rounded-3xl overflow-hidden h-80 lg:h-full group">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613654800-26e7f2706fbf?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHwzfHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative brainstorming session" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <div class="absolute inset-0 bg-linear-to-t from-slate-900/60 via-transparent to-transparent"></div>
+              <div class="absolute bottom-6 left-6 right-6">
+                <span data-motion="badge" class="text-indigo-400 text-xs font-semibold uppercase tracking-wider mb-1 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Featured</span>
+                <h3 class="text-white text-xl font-bold">The Creative Process</h3>
+                <p class="text-slate-300 text-sm mt-1">Where ideas come to life</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Column - 2 stacked images -->
+          <div class="lg:col-span-3 flex flex-col gap-5">
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-64" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <a href="https://www.happylizard.me/project_page/projects/?project_number=1">
+                <img data-motion="image" src="/assets/img/projects/laptop_server/laptop_setup.jpg " alt="Team meeting" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                </a>
+            </div>
+            <div data-motion="card" class="rounded-3xl overflow-hidden h-48" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <img data-motion="image" src="https://images.unsplash.com/photo-1758613653231-bae4e1131dde?ixid=M3wzOTQxMzN8MHwxfHNlYXJjaHw1fHxjcmVhdGl2ZSUyMHBvcnRmb2xpbyUyMGFydGlzdGljfGVufDF8MHx8fDE3NjkzMTg1ODV8MA&amp;ixlib=rb-4.1.0&amp;w=1200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Creative workshop" class="w-full h-full object-cover hover:scale-105 transition-transform duration-700" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+            </div>
+          </div>
+        </div>
+
+        <!-- Stats Row -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-12 pt-10 border-t border-slate-200 dark:border-neutral-800">
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">10K+</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Creators</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-slate-900 dark:text-white block">500+</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Workshops</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-slate-900 dark:text-white block">95%</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Satisfaction</span>
+          </div>
+          <div data-motion="stat" class="text-center" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <span class="text-3xl font-bold text-indigo-600 dark:text-indigo-400 block">24/7</span>
+            <span class="text-slate-500 dark:text-neutral-400 text-sm">Support</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section id="_features_minimal_icons_v6_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Centered Header -->
+        <div class="text-center max-w-3xl mx-auto mb-16" data-motion="header" style="opacity: 1;">
+          <span data-motion="badge" class="text-indigo-600 dark:text-indigo-400 text-sm font-semibold tracking-wide uppercase mb-4 block" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">Developer Tools</span>
+          <h2 class="text-slate-900 dark:text-white text-4xl sm:text-5xl font-bold mb-6">
+            <span data-animate="heading" style="opacity: 1;"><span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Everything</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">You</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Need</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">to</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Build</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">Faster</span></span>
+          </h2>
+          <p data-animate="text" class="text-slate-600 dark:text-neutral-400 text-lg" style="opacity: 1;">
+            <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">A</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">complete</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">developer</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">toolkit</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">with</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">powerful</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">APIs,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">comprehensive</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">documentation,</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">and</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">enterprise-grade</span> <span class="motion-word" style="display: inline-block; opacity: 1; transform: translateY(0px); filter: blur(0px);">infrastructure.</span>
+          </p>
+        </div>
+
+        <!-- Bento Grid Features -->
+        <div class="grid lg:grid-cols-3 gap-5">
+          <!-- Large Feature Card -->
+          <div data-motion="card" class="lg:col-span-2 p-8 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div class="grid sm:grid-cols-2 gap-8">
+              <div>
+                <div data-motion="icon" class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/40 rounded-2xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                  <svg class="w-7 h-7 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
+                  </svg>
+                </div>
+                <h3 class="text-slate-900 dark:text-white text-xl font-semibold mb-3">Modular Architecture</h3>
+                <p class="text-slate-600 dark:text-neutral-400 text-base">
+                  Build with composable modules that scale independently and integrate seamlessly with your existing stack.
+                </p>
+              </div>
+              <div class="rounded-2xl overflow-hidden">
+                <img data-motion="image" src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&amp;auto=format&amp;fit=crop&amp;q=80" alt="Code on screen" class="w-full h-48 object-cover" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              </div>
+            </div>
+          </div>
+
+          <!-- Accent Card -->
+          <div data-motion="card" class="p-8 bg-indigo-600 rounded-3xl flex flex-col justify-between" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div>
+              <div data-motion="icon" class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-6" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                </svg>
+              </div>
+              <h3 class="text-white text-xl font-semibold mb-3">Type Safety</h3>
+              <p class="text-indigo-100 text-base">
+                Full TypeScript support with auto-generated types for bulletproof development.
+              </p>
+            </div>
+            <a data-motion="button" href="#" class="inline-flex items-center gap-2 text-white font-medium hover:gap-3 transition-all duration-300 w-fit mt-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Learn More
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
+              </svg>
+            </a>
+          </div>
+
+          <!-- Small Feature Cards -->
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">REST &amp; GraphQL</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Choose your preferred API style with full support for both endpoints.
+            </p>
+          </div>
+
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Rich Documentation</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Comprehensive guides and tutorials to get you started quickly.
+            </p>
+          </div>
+
+          <div data-motion="card" class="p-6 bg-white dark:bg-neutral-800 rounded-3xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div data-motion="icon" class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900/40 rounded-xl flex items-center justify-center mb-5" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <svg class="w-6 h-6 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+              </svg>
+            </div>
+            <h3 class="text-slate-900 dark:text-white text-lg font-semibold mb-2">Plugin System</h3>
+            <p class="text-slate-600 dark:text-neutral-400 text-sm">
+              Extend functionality with community and official plugins.
+            </p>
+          </div>
+
+          <!-- CTA Card -->
+          <div data-motion="card" class="lg:col-span-2 p-8 bg-slate-900 dark:bg-neutral-800 rounded-3xl flex flex-col sm:flex-row items-center justify-between gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <div>
+              <h3 class="text-white text-xl font-semibold mb-2">24/7 Enterprise Support</h3>
+              <p class="text-slate-400 text-base">Dedicated engineers with guaranteed response times for your team.</p>
+            </div>
+            <a data-motion="button" href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 transition-colors rounded-full text-white font-semibold whitespace-nowrap" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Contact Sales
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+    <style>
+        .carousel-container { overflow: hidden; }
+      .carousel-track { display: flex; transition: transform 0.5s ease-out; }
+      </style>
+    <section id="_testimonial_centered_quote_avatars_v6_t27_001" class="py-20 sm:py-24 bg-slate-50 dark:bg-neutral-900">
+      <style>
+        .carousel-container { overflow: hidden; }
+      .carousel-track { display: flex; transition: transform 0.5s ease-out; }
+      </style>
+
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Carousel -->
+        <div class="relative">
+          <div class="carousel-container">
+            <div data-carousel="track" class="carousel-track">
+              <!-- Slide 1 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "The platform transformed how we approach customer feedback. Within weeks, we saw a 40% improvement in response times and our NPS score jumped significantly."
+                  </p>
+                  <!-- Avatar Row -->
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Thomas Wright" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Thomas Wright</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">VP of Operations, TechFlow</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Slide 2 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "We've tried many solutions before, but nothing comes close to this level of integration and ease of use. Our team adopted it instantly and productivity soared."
+                  </p>
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="Rachel Kim" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">Rachel Kim</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">Head of Product, Innovate Labs</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Slide 3 -->
+              <div data-motion="slide" class="shrink-0 w-full px-4" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <div class="max-w-4xl mx-auto text-center">
+                  <svg data-motion="icon" class="w-12 h-12 mx-auto mb-8 text-indigo-500" fill="currentColor" viewBox="0 0 24 24" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"></path>
+                  </svg>
+                  <p class="text-xl sm:text-2xl lg:text-3xl text-slate-700 dark:text-neutral-200 leading-relaxed mb-10 font-medium">
+                    "The analytics dashboard alone is worth the investment. We now have real-time insights that help us make data-driven decisions every single day."
+                  </p>
+                  <div class="flex items-center justify-center gap-6">
+                    <img data-motion="image" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&amp;auto=format&amp;fit=crop&amp;q=80" alt="David Chen" class="w-16 h-16 rounded-full object-cover ring-2 ring-indigo-500 ring-offset-2 ring-offset-neutral-50 dark:ring-offset-neutral-900" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+                    <div class="text-left">
+                      <h5 class="text-lg font-semibold text-slate-900 dark:text-white">David Chen</h5>
+                      <p class="text-indigo-600 dark:text-indigo-400 text-sm">CTO, DataStream Inc</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation Dots & Arrows -->
+          <div class="flex items-center justify-center gap-6 mt-12">
+            <button data-motion="button" data-carousel="prev" type="button" aria-label="Previous testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
+              </svg>
+            </button>
+            <div class="flex gap-2">
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-indigo-500" aria-label="Go to slide 1" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 2" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+              <button data-motion="button" data-carousel="dot" class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-neutral-600" aria-label="Go to slide 3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);"></button>
+            </div>
+            <button data-motion="button" data-carousel="next" type="button" aria-label="Next testimonial" class="w-11 h-11 rounded-full bg-white dark:bg-neutral-800 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Carousel Script -->
+      <script>
+      (function() {
+        function initCarousel() {
+          const section = document.getElementById('_testimonial_centered_quote_avatars_v6_t27_001');
+          if (!section) return;
+        
+          const container = section.querySelector('[data-carousel="container"]') || section.querySelector('.carousel-container');
+          const prevBtn = section.querySelector('[data-carousel="prev"]') || section.querySelector('.carousel-prev');
+          const nextBtn = section.querySelector('[data-carousel="next"]') || section.querySelector('.carousel-next');
+        
+          if (!container || !prevBtn || !nextBtn) return;
+        
+          // Clone buttons to remove existing listeners
+          const newPrevBtn = prevBtn.cloneNode(true);
+          const newNextBtn = nextBtn.cloneNode(true);
+          prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+          nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+        
+          let currentIndex = 0;
+          const scrollAmount = 320;
+        
+          function updateCarousel(direction) {
+            const maxScroll = container.scrollWidth - container.parentElement.offsetWidth;
+
+            if (direction === 'next') {
+              currentIndex = Math.min(currentIndex + scrollAmount, maxScroll);
+            } else {
+              currentIndex = Math.max(currentIndex - scrollAmount, 0);
+            }
+
+            container.style.transform = 'translateX(-' + currentIndex + 'px)';
+          }
+
+          newPrevBtn.addEventListener('click', () => updateCarousel('prev'));
+          newNextBtn.addEventListener('click', () => updateCarousel('next'));
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initCarousel);
+        } else {
+          initCarousel();
+        }
+        window.addEventListener('load', initCarousel);
+      })();
+      </script>
+    </section>
+    <footer id="_footer_nav_contact_button_v6_001" class="py-20 sm:py-24 bg-white dark:bg-neutral-950">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <!-- Main Content Grid -->
+        <div class="grid lg:grid-cols-12 gap-12 pb-16">
+          <!-- Logo & Contact Info -->
+          <div class="lg:col-span-5 flex flex-col gap-8">
+            <a data-motion="logo" href="#" class="flex items-center w-fit" style="opacity: 1; transform: scale(1); filter: blur(0px);">
+              <img src="https://cdn.ln-cdn.com/image/placeholder-logo-full.png" ln-logo="" class="h-10" alt="Logo">
+            </a>
+
+            <p data-motion="description" class="text-slate-600 dark:text-neutral-400 text-lg leading-relaxed max-w-sm" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              Award-winning architecture studio creating spaces that inspire and endure for generations.
+            </p>
+
+            <!-- Contact Card -->
+            <div data-motion="contact-card" class="p-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-sm font-semibold text-indigo-700 dark:text-indigo-400 uppercase tracking-wide mb-4">Get in Touch</h4>
+              <div class="flex flex-col gap-3">
+                <a href="mailto:hello@archway.studio" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                  hello@archway.studio
+                </a>
+                <a href="tel:+1234567890" class="flex items-center gap-3 text-slate-700 dark:text-neutral-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+                  <svg class="w-5 h-5 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                  </svg>
+                  +1 (234) 567-890
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation Links -->
+          <div class="lg:col-span-4">
+            <nav data-motion="nav" class="grid grid-cols-2 gap-8" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Company</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About Us</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Our Team</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Careers</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Press</a></li>
+                </ul>
+              </div>
+              <div>
+                <h4 class="text-sm font-semibold text-slate-900 dark:text-white uppercase tracking-wide mb-5">Services</h4>
+                <ul class="flex flex-col gap-3">
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Residential</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Commercial</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Interior Design</a></li>
+                  <li><a href="#" class="text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Consulting</a></li>
+                </ul>
+              </div>
+            </nav>
+          </div>
+
+          <!-- CTA Section -->
+          <div class="lg:col-span-3">
+            <div data-motion="cta" class="flex flex-col gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+              <h4 class="text-lg font-semibold text-slate-900 dark:text-white">Ready to start your project?</h4>
+              <p class="text-slate-600 dark:text-neutral-400">Let's discuss how we can bring your vision to life.</p>
+              <a data-motion="button" href="#" class="inline-flex items-center justify-center gap-2 px-6 py-4 bg-indigo-500 hover:bg-indigo-600 text-white font-semibold rounded-xl transition-colors" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <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 2z"></path>
+                </svg>
+                Schedule Consultation
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Divider -->
+        <div class="h-px bg-slate-200 dark:bg-neutral-800"></div>
+
+        <!-- Bottom Section -->
+        <div class="pt-10 flex flex-col lg:flex-row items-center justify-between gap-6">
+          <!-- Copyright -->
+          <p data-motion="copyright" class="text-sm text-slate-500 dark:text-neutral-400" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            © 2026 Archway Studio. All rights reserved.
+          </p>
+
+          <!-- Legal Links -->
+          <ul data-motion="legal" class="flex flex-wrap items-center gap-6" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Privacy Policy</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Terms of Service</a></li>
+            <li><a href="#" class="text-sm text-slate-500 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Cookie Policy</a></li>
+          </ul>
+
+          <!-- Social Icons -->
+          <div data-motion="social" class="flex items-center gap-3" style="opacity: 1; transform: translateY(0px); filter: blur(0px);">
+            <a href="#" aria-label="Instagram" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="Pinterest" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"></path>
+              </svg>
+            </a>
+            <a href="#" aria-label="LinkedIn" class="w-9 h-9 rounded-lg bg-slate-100 dark:bg-neutral-800 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 flex items-center justify-center text-slate-600 dark:text-neutral-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+    </body>
+</html>
\ No newline at end of file