76 lines
No EOL
3.1 KiB
Text
76 lines
No EOL
3.1 KiB
Text
---
|
|
import { Icon } from 'astro-icon/components'
|
|
import type { AboutData } from '@globalInterfaces';
|
|
|
|
interface Props {
|
|
aboutData: AboutData;
|
|
}
|
|
|
|
const { aboutData } = Astro.props;
|
|
---
|
|
|
|
<section class="py-8 md:py-12 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-neutral-900 dark:to-neutral-800 rounded-xl md:rounded-2xl">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-5 lg:px-8">
|
|
<div class="text-center">
|
|
<!-- Заголовок -->
|
|
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4 md:mb-6">
|
|
{aboutData.contact_title}
|
|
</h2>
|
|
|
|
<!-- Описание -->
|
|
<p class="text-base md:text-lg lg:text-xl text-gray-600 dark:text-neutral-300 mb-6 md:mb-8 lg:mb-10 max-w-2xl mx-auto">
|
|
{aboutData.contact_description}
|
|
</p>
|
|
|
|
<!-- Кнопки контактов -->
|
|
<div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center items-center">
|
|
<!-- WhatsApp -->
|
|
<a
|
|
href={aboutData.whatsapp_link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center px-5 py-3 md:px-6 md:py-3 lg:px-8 lg:py-4 text-sm md:text-base font-semibold rounded-xl md:rounded-2xl shadow-md md:shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 md:hover:-translate-y-1 bg-green-500 hover:bg-green-600 text-white contact-cta-button w-full sm:w-auto justify-center"
|
|
>
|
|
<Icon name="whatsapp" class="w-5 h-5 md:w-6 md:h-6 mr-2 md:mr-3" />
|
|
Написать в WhatsApp
|
|
</a>
|
|
|
|
<!-- Email -->
|
|
<a
|
|
href={`mailto:${aboutData.email}`}
|
|
class="inline-flex items-center px-5 py-3 md:px-6 md:py-3 lg:px-8 lg:py-4 text-sm md:text-base font-semibold rounded-xl md:rounded-2xl shadow-md md:shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 md:hover:-translate-y-1 bg-white dark:bg-neutral-800 text-gray-700 dark:text-neutral-300 border border-gray-200 dark:border-neutral-700 contact-cta-button w-full sm:w-auto justify-center"
|
|
>
|
|
<Icon name="envelope" class="w-4 h-4 md:w-5 md:h-5 mr-2" />
|
|
<span class="truncate">{aboutData.email}</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Дополнительная информация -->
|
|
<div class="mt-6 md:mt-8 p-3 md:p-4 bg-white dark:bg-neutral-800 rounded-xl md:rounded-2xl shadow-sm">
|
|
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400">
|
|
⚡ Обычно отвечаю в течение 1-2 часов в рабочее время
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* Уникальные стили для компонента ContactCTA */
|
|
.contact-cta-button {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.contact-cta-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* Адаптивность для мобильных устройств */
|
|
@media (max-width: 640px) {
|
|
.contact-cta-button {
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
</style> |