86 lines
2.9 KiB
Vue
86 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
PATTERN_BACKGROUND_DIRECTION,
|
|
PATTERN_BACKGROUND_SPEED,
|
|
PATTERN_BACKGROUND_VARIANT,
|
|
} from '@/components/InspiraUI/pattern-background';
|
|
import { useLayout } from '@/layouts/sakai-vue/composables/layout';
|
|
|
|
const { isDarkTheme, toggleDarkMode } = useLayout();
|
|
const GradientButton_bgColor = computed(() => (isDarkTheme.value ? '#000' : '#fff'));
|
|
const particlesColor = computed(() => (isDarkTheme.value ? '#FFFFFF' : '#000000'));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4 h-screen w-screen relative">
|
|
<PatternBackground
|
|
:animate="true"
|
|
:direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
|
|
:variant="PATTERN_BACKGROUND_VARIANT.Dot"
|
|
class="flex h-full w-full flex-col items-center gap-4 overflow-hidden border rounded-lg px-4 py-8"
|
|
:speed="PATTERN_BACKGROUND_SPEED.Slow"
|
|
shadow-2xl
|
|
>
|
|
<h3
|
|
class="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-0 text-3xl font-bold text-transparent"
|
|
>
|
|
Spline
|
|
</h3>
|
|
|
|
<RouterLink :to="{ name: 'Home' }">
|
|
<GradientButton :bg-color="GradientButton_bgColor">Zooooooooooom 🚀 </GradientButton>
|
|
<!-- <InteractiveHoverButton text="Zooooooooooom 🚀" /> -->
|
|
</RouterLink>
|
|
|
|
<ShimmerButton class="isolate shadow-2xl" shimmer-size="2px" @click="toggleDarkMode">
|
|
<span
|
|
class="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10"
|
|
>
|
|
{{ isDarkTheme ? '🌜' : '🌞' }}
|
|
</span>
|
|
</ShimmerButton>
|
|
|
|
<div class="relative h-40 w-[40rem]">
|
|
<div
|
|
class="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm"
|
|
/>
|
|
<div
|
|
class="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
|
|
/>
|
|
<div
|
|
class="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm"
|
|
/>
|
|
<div
|
|
class="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent"
|
|
/>
|
|
|
|
<Sparkles
|
|
background="transparent"
|
|
:min-size="0.4"
|
|
:max-size="1.4"
|
|
:particle-density="1200"
|
|
class="size-full"
|
|
:particle-color="particlesColor"
|
|
/>
|
|
|
|
<div class="absolute inset-0 size-full [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]">
|
|
<!-- bg-white dark:bg-black -->
|
|
</div>
|
|
</div>
|
|
|
|
<Spline scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode" />
|
|
|
|
<BorderBeam :size="250" :duration="12" :delay="9" :border-width="2" />
|
|
</PatternBackground>
|
|
|
|
<FluidCursor />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|
|
|
|
<route lang="yaml">
|
|
meta:
|
|
layout: false
|
|
</route>
|