102 lines
4.2 KiB
Vue
102 lines
4.2 KiB
Vue
<template>
|
||
<section class="gradient-bg relative overflow-hidden py-20 text-center sm:py-24">
|
||
<!-- Decorative background elements -->
|
||
<div class="absolute top-0 left-0 h-full w-full opacity-5">
|
||
<div class="absolute top-10 left-10 h-20 w-20 rounded-full border border-[var(--spiritual-earth)]"></div>
|
||
<div class="absolute right-10 bottom-10 h-24 w-24 rounded-full border border-[var(--spiritual-earth)]"></div>
|
||
<div class="absolute top-1/2 left-1/4 h-16 w-16 rounded-full border border-[var(--midnight-blue)]"></div>
|
||
</div>
|
||
|
||
<div class="relative z-10">
|
||
<h2 class="transform text-4xl font-bold text-[var(--midnight-blue)] transition-all duration-700 md:text-5xl">
|
||
<span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]/90"> Beyond a Guide, </span>
|
||
<span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
|
||
<span class="inline-block cursor-default transition-all duration-500">A </span>
|
||
<span class="mx-2 inline-block cursor-default transition-all duration-500">Strategic </span>
|
||
<span class="inline-block cursor-default transition-all duration-500">Manuscript</span>
|
||
</span>
|
||
</h2>
|
||
|
||
<!-- Image placed between heading and text -->
|
||
<div class="mx-auto mt-8 max-w-md transform transition-all duration-700">
|
||
<div class="relative inline-block">
|
||
<img
|
||
src="/image003.jpg"
|
||
alt="Oracle de Kris Saint Ange"
|
||
class="w-full rounded-2xl shadow-2xl transition-all duration-500 hover:scale-105"
|
||
/>
|
||
<!-- Decorative frame -->
|
||
<div class="pointer-events-none absolute inset-0 rounded-2xl border-2 border-[var(--spiritual-earth)]/30"></div>
|
||
<div class="pointer-events-none absolute -inset-4 rounded-3xl border border-[var(--midnight-blue)]/20"></div>
|
||
|
||
<!-- Floating particles around image -->
|
||
<div
|
||
v-for="i in 5"
|
||
:key="'particle-' + i"
|
||
class="absolute rounded-full bg-[var(--spiritual-earth)]/40"
|
||
:class="[
|
||
i === 1 ? '-top-2 -left-2 h-3 w-3' : '',
|
||
i === 2 ? '-top-3 right-4 h-2 w-2' : '',
|
||
i === 3 ? 'bottom-2 -left-3 h-4 w-4' : '',
|
||
i === 4 ? '-right-2 bottom-4 h-2 w-2' : '',
|
||
i === 5 ? 'top-4 -right-3 h-3 w-3' : '',
|
||
]"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="mx-auto mt-6 max-w-3xl transform text-lg text-[var(--midnight-blue)]/80 transition-all delay-200 duration-1000">
|
||
<span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
|
||
Kris Saint Ange’s Oracle is a compass for your personal and professional journey.
|
||
</span>
|
||
<span class="mt-2 inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
|
||
Each card is a key to unlocking your potential and making enlightened decisions.
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.citadel-script {
|
||
font-family: var(--font-sub-title), cursive;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* Custom animation for the section */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
section {
|
||
animation: fadeInUp 1s ease-out forwards;
|
||
}
|
||
|
||
/* Hover effects for text */
|
||
h2 span,
|
||
p span {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
/* Custom color variables */
|
||
:root {
|
||
--spiritual-earth: #a78bfa;
|
||
--midnight-blue: #1e1b4b;
|
||
}
|
||
|
||
/* Media queries for responsive adjustments */
|
||
@media (max-width: 768px) {
|
||
.citadel-script {
|
||
display: block;
|
||
margin-top: 0.5rem;
|
||
}
|
||
}
|
||
</style>
|