64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { SectionContainer } from "@/features/section-container";
|
|
import { SectionHeader } from "@/features/section-header";
|
|
import { StepCard } from "@/features/step-card";
|
|
import { UserPlus, FolderPlus, Users as UsersIcon, Rocket } from "lucide-react";
|
|
|
|
const steps = [
|
|
{
|
|
number: 1,
|
|
title: "Зарегистрируйтесь",
|
|
description: "Создайте аккаунт за 30 секунд. Кредитная карта не требуется.",
|
|
icon: UserPlus,
|
|
},
|
|
{
|
|
number: 2,
|
|
title: "Создайте проект",
|
|
description: "Настройте свой первый проект и добавьте задачи.",
|
|
icon: FolderPlus,
|
|
},
|
|
{
|
|
number: 3,
|
|
title: "Пригласите команду",
|
|
description: "Добавьте коллег и назначьте роли для совместной работы.",
|
|
icon: UsersIcon,
|
|
},
|
|
{
|
|
number: 4,
|
|
title: "Начните работать",
|
|
description: "Отслеживайте прогресс и достигайте целей быстрее.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
/**
|
|
* How It Works Section - секция "Как это работает"
|
|
*/
|
|
export function HowItWorksSection() {
|
|
return (
|
|
<SectionContainer id="how-it-works">
|
|
<SectionHeader
|
|
subtitle="Как это работает"
|
|
title="Начните за 4 простых шага"
|
|
description="Настройка займет всего несколько минут"
|
|
withGradient
|
|
/>
|
|
|
|
<div className="relative">
|
|
{/* Connection line */}
|
|
<div className="hidden lg:block absolute top-8 left-0 right-0 h-0.5 bg-gradient-to-r from-[var(--gradient-from)] via-[var(--gradient-via)] to-[var(--gradient-to)] opacity-20" />
|
|
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6 relative">
|
|
{steps.map((step) => (
|
|
<StepCard key={step.number} {...step} variant="icon" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</SectionContainer>
|
|
);
|
|
}
|
|
|
|
|
|
|