From 8993980cf2307b98fa22ab7aa799bb9e4f542e97 Mon Sep 17 00:00:00 2001
From: Thibault Pouch <thibault.pouch@epitech.eu>
Date: Thu, 7 May 2026 09:23:58 +0200
Subject: [PATCH] feat: Update index.vue for under construction page with new
 layout and messaging

---
 pages/index.vue | 87 ++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 83 insertions(+), 4 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index c6b4324..c17ff99 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,92 @@
 <script setup lang="ts">
 useSeoMeta({
-  title: 'Home — Headless Hazard',
-  description: 'Welcome to CrowMate Studio and Headless Hazard.',
+  title: 'Site in Construction — CrowMate Studio',
+  description: 'Our website is currently under construction. Please check back soon.',
   ogImage: '/images/og-default.jpg',
 })
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center">
-    <h1 class="text-4xl font-bold">Welcome</h1>
+  <div
+    class="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-center p-6 relative overflow-hidden"
+  >
+    <!-- Abstract Background Glow -->
+    <div
+      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[30rem] h-[30rem] bg-orange-500/20 rounded-full blur-[128px]"
+    ></div>
+
+    <div class="z-10 flex flex-col items-center relative">
+      <div class="mb-6 relative hover:scale-110 transition-transform duration-300">
+        <div class="text-7xl drop-shadow-2xl">🚧</div>
+      </div>
+
+      <h1
+        class="text-5xl md:text-7xl font-black mb-6 tracking-tight bg-gradient-to-br from-amber-400 to-orange-600 text-transparent bg-clip-text drop-shadow-sm"
+      >
+        Under Construction
+      </h1>
+
+      <p class="text-lg md:text-xl text-zinc-400 max-w-lg font-medium leading-relaxed">
+        <strong class="text-zinc-200">CrowMate Studio</strong> is working hard behind the scenes
+        crafting a new experience.
+      </p>
+
+      <div
+        class="mt-10 flex items-center gap-3 bg-zinc-900/50 px-6 py-3 rounded-full border border-zinc-800 backdrop-blur-sm"
+      >
+        <span class="flex h-3 w-3 relative">
+          <span
+            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"
+          ></span>
+          <span class="relative inline-flex rounded-full h-3 w-3 bg-orange-500"></span>
+        </span>
+        <span class="text-sm font-semibold tracking-wider text-orange-500 uppercase"
+          >Coming Soon</span
+        >
+      </div>
+    </div>
+
+    <!-- Social Links -->
+    <div class="absolute bottom-10 flex items-center gap-8 z-10">
+      <a
+        href="tiktok.com/@crowmate_studio"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
+        aria-label="TikTok"
+      >
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path
+            d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.95-.53 3.93-1.6 5.56-1.46 2.22-3.87 3.55-6.52 3.6-2.58.05-5.18-.84-7.07-2.61-1.99-1.87-2.91-4.78-2.31-7.46.59-2.64 2.45-4.85 4.95-5.83 2.11-.84 4.54-.7 6.55.35v4.11c-1.2-.55-2.64-.61-3.87-.1-1.25.52-2.19 1.6-2.48 2.92-.3 1.34.1 2.8 1.05 3.79s2.44 1.48 3.78 1.25c1.45-.25 2.66-1.26 3.19-2.59.32-.78.43-1.64.44-2.49V6.47c1.3.62 2.62 1.25 3.95 1.83V.021S12.525.02 12.525.02z"
+          />
+        </svg>
+      </a>
+      <a
+        href="https://www.instagram.com/crowmate_studio/"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
+        aria-label="Instagram"
+      >
+        <svg class="w-6 h-6" 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-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.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.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
+          />
+        </svg>
+      </a>
+      <a
+        href="https://www.linkedin.com/company/crowmate-studio"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
+        aria-label="LinkedIn"
+      >
+        <svg class="w-6 h-6" 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"
+          />
+        </svg>
+      </a>
+    </div>
   </div>
 </template>