MahdiandCursor
b0088c35d1
Adds consultation leads, section editors, and the one-time content reset for this release. Co-authored-by: Cursor <cursoragent@cursor.com>
51 lines
2.6 KiB
Vue
51 lines
2.6 KiB
Vue
<template>
|
|
<section class="py-16 cta-section">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="relative overflow-hidden rounded-[36px] bg-gradient-to-l from-sky-50 via-blue-50 to-blue-100/70 dark:from-slate-900 dark:via-[#0c1e3f] dark:to-slate-900 border border-brand-200/80 dark:border-brand-500/30 p-8 sm:p-12 shadow-soft-card">
|
|
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 text-right">
|
|
<div class="order-3 md:order-1 flex items-center justify-center" aria-hidden="true">
|
|
<div class="w-28 h-28 sm:w-32 sm:h-32 rounded-3xl bg-white dark:bg-slate-800 shadow-xl border border-white/80 dark:border-slate-700 p-3 flex items-center justify-center transform hover:scale-105 transition-transform duration-500">
|
|
<div class="w-full h-full rounded-2xl bg-gradient-to-br from-brand-600 via-brand-500 to-sky-400 flex items-center justify-center text-white shadow-inner">
|
|
<svg class="w-16 h-16" viewBox="0 0 32 32" fill="none">
|
|
<path d="M6 22L12 8L16 15L20 8L26 22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
|
|
<circle cx="16" cy="22" r="2.2" fill="white" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-2 flex-shrink-0">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-2.5 px-8 py-3.5 rounded-full bg-brand-600 hover:bg-brand-700 text-white font-bold text-sm shadow-glow-cta active:scale-95 transition-all duration-300"
|
|
@click="consult.open()"
|
|
>
|
|
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
<span>{{ cta.ctaLabel }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="order-1 md:order-3 flex-1 space-y-2">
|
|
<h2 class="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
|
|
{{ cta.titleLine1 }}
|
|
<br>
|
|
{{ cta.titleLine2 }}
|
|
</h2>
|
|
<p class="text-slate-600 dark:text-slate-300 text-sm font-normal">
|
|
{{ cta.body }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { section } = useSiteContent();
|
|
const cta = section("cta");
|
|
const consult = useConsultModal();
|
|
</script>
|