icon
This commit is contained in:
Nyavokevin
parent
d8b0825c55
commit
f91194a6a8
BIN
public/icon_ksa.jpg
Normal file
BIN
public/icon_ksa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@ -47,12 +47,11 @@ onMounted(() => {
|
||||
<!-- Logo with enhanced styling -->
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-2 rounded-full bg-[var(--subtle-gold)]/20 blur-sm"></div>
|
||||
<img src="icon.jpg" alt="Logo" class="relative h-16 w-16 rounded-full object-cover shadow-lg md:h-20 md:w-20" />
|
||||
<div class="absolute -inset-2 bg-[var(--subtle-gold)]/20 blur-sm"></div>
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="relative h-16 w-16 rounded-full object-cover shadow-lg md:h-20 md:w-20" />
|
||||
</div>
|
||||
<div class="hidden md:block">
|
||||
<h1 class="font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h1>
|
||||
<p class="text-xs text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -150,9 +149,8 @@ onMounted(() => {
|
||||
</button>
|
||||
|
||||
<div class="mb-8 text-center">
|
||||
<img src="icon.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 rounded-full object-cover shadow-lg" />
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="mx-auto mb-4 h-20 w-20 rounded-full object-cover shadow-lg" />
|
||||
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
|
||||
<p class="text-[var(--midnight-blue)]/70">Oracle & Guidance</p>
|
||||
</div>
|
||||
|
||||
<nav class="flex w-full max-w-sm flex-col items-center gap-6">
|
||||
@ -207,10 +205,9 @@ onMounted(() => {
|
||||
<!-- Logo and description -->
|
||||
<div class="max-w-md text-center">
|
||||
<div class="mb-4 flex justify-center">
|
||||
<img src="icon.jpg" alt="Logo" class="h-16 w-16 rounded-full object-cover shadow-lg" />
|
||||
<img src="icon_ksa.jpg" alt="Logo" class="h-16 w-16 rounded-full object-cover shadow-lg" />
|
||||
</div>
|
||||
<h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
|
||||
<p class="text-sm text-[var(--midnight-blue)]/70">Guidance spirituelle et consultations d'oracle personnalisées</p>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
@ -254,50 +251,56 @@ onMounted(() => {
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<!-- Social Links -->
|
||||
<div class="flex justify-center gap-6">
|
||||
<Link
|
||||
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
<!-- Social Links - Modified without circles -->
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<p class="text-sm font-medium text-[var(--midnight-blue)]/60">Suivez-moi</p>
|
||||
<div class="flex justify-center gap-8">
|
||||
<Link
|
||||
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
||||
href="#"
|
||||
>
|
||||
<path
|
||||
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
|
||||
></path>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
<svg
|
||||
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="text-xs">Instagram</span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
||||
href="#"
|
||||
>
|
||||
<path
|
||||
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
|
||||
></path>
|
||||
</svg>
|
||||
</Link>
|
||||
<Link
|
||||
class="group rounded-full border border-[var(--linen)] bg-white/50 p-3 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:text-[var(--spiritual-earth)] hover:shadow-sm"
|
||||
href="#"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
<svg
|
||||
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="text-xs">Facebook</span>
|
||||
</Link>
|
||||
<Link
|
||||
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
||||
href="#"
|
||||
>
|
||||
<path
|
||||
d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
|
||||
></path>
|
||||
</svg>
|
||||
</Link>
|
||||
<svg
|
||||
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="text-xs">WhatsApp</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Copyright -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user