80 lines
3.1 KiB
TypeScript
80 lines
3.1 KiB
TypeScript
"use client";
|
||
|
||
import { SectionContainer } from "@/features/section-container";
|
||
import { GradientBackground } from "@/features/gradient-background";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { Input } from "@/shared/ui/input";
|
||
import { motion } from "framer-motion";
|
||
import { ArrowRight, Sparkles } from "lucide-react";
|
||
|
||
/**
|
||
* CTA Section - финальный призыв к действию
|
||
*/
|
||
export function CtaSection() {
|
||
return (
|
||
<SectionContainer className="relative">
|
||
<GradientBackground variant="mesh" opacity={0.4} />
|
||
|
||
<div className="relative z-10 max-w-4xl mx-auto text-center">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.6 }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--feature-accent)]/10 border border-[var(--feature-accent)]/20">
|
||
<Sparkles className="w-4 h-4 text-[var(--feature-accent)]" />
|
||
<span className="text-sm font-medium text-[var(--feature-accent)]">
|
||
Начните работать эффективнее уже сегодня
|
||
</span>
|
||
</div>
|
||
|
||
<h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
|
||
Готовы{" "}
|
||
<span className="text-gradient">трансформировать</span>
|
||
<br />
|
||
работу вашей команды?
|
||
</h2>
|
||
|
||
<p className="text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto">
|
||
Присоединяйтесь к тысячам команд, которые уже используют TaskFlow
|
||
для достижения своих целей быстрее и эффективнее.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-md mx-auto">
|
||
<Input
|
||
type="email"
|
||
placeholder="Ваш email"
|
||
className="h-12"
|
||
/>
|
||
<Button size="lg" className="w-full sm:w-auto group">
|
||
Попробовать бесплатно
|
||
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||
</Button>
|
||
</div>
|
||
|
||
<p className="text-sm text-muted-foreground">
|
||
14 дней бесплатно • Кредитная карта не требуется • Отмените в любое время
|
||
</p>
|
||
|
||
<div className="pt-8 flex flex-wrap items-center justify-center gap-8 text-sm text-muted-foreground">
|
||
<div className="flex items-center gap-2">
|
||
✓ Настройка за 5 минут
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
✓ Поддержка 24/7
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
✓ Безопасность данных
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</SectionContainer>
|
||
);
|
||
}
|
||
|
||
|
||
|