feat: Update index.vue for under construction page with new layout and messaging
This commit is contained in:
Thibault Pouch
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user