Компонент Pricing

Руководство по настройке и расширению компонента Pricing

Обзор

Компонент Pricing используется для отображения ценовых планов вашего продукта. В базовой конфигурации представлен один тарифный план с разовой оплатой, но вы можете легко расширить его для отображения нескольких тарифных планов и добавить переключение между месячной и годовой оплатой.

Структура компонентов

Система ценообразования состоит из следующих компонентов:

  • Pricing.tsx - Основной компонент, содержащий логику и структуру отображения тарифных планов
  • PricingPlan.tsx - Компонент для отображения отдельного тарифного плана
  • PricingToggle.tsx - Компонент для переключения между месячной и годовой оплатой (закомментирован в базовой конфигурации)

Добавление нескольких тарифных планов

Чтобы добавить несколько тарифных планов, вам нужно внести изменения в компонент Pricing.tsx. Базовая реализация содержит закомментированный пример массива с несколькими тарифами.

Шаг 1: Изменение структуры данных

Замените определение одиночного тарифного плана на массив планов:

typescript
// Заменить это:
const pricingPlan = {
  name: "DevShip Стартер",
  description: "Полный набор для быстрого запуска вашего стартапа",
  price: 2799,
  features: [
    // Особенности плана
  ],
  cta: "Купить сейчас",
  popular: true,
};

// На это:
const pricingPlans = [
  {
    name: "Базовый",
    description: "Идеально для сайд-проектов и MVP",
    price: 1499,
    features: [
      "Фронтенд на Next.js 15", 
      "Бэкенд на FastAPI",
      // Другие особенности
    ],
    cta: "Начать",
    popular: false,
  },
  {
    name: "Стандартный",
    description: "Для серьезных стартапов и бизнеса",
    price: 2799,
    features: [
      "Всё из Базового плана",
      "Админ-панель",
      // Другие особенности
    ],
    cta: "Выбрать Стандартный",
    popular: true,
  },
  {
    name: "Расширенный",
    description: "Для масштабных проектов",
    price: 4999,
    features: [
      "Всё из Стандартного плана",
      "Расширенная поддержка",
      // Другие особенности
    ],
    cta: "Выбрать Расширенный",
    popular: false,
  }
];

Шаг 2: Изменение рендеринга

Замените рендеринг одиночного плана на цикл по массиву планов:

typescript
// Заменить это:
<div className="max-w-md mx-auto">
  <PricingPlan
    name={pricingPlan.name}
    description={pricingPlan.description}
    price={pricingPlan.price}
    features={pricingPlan.features}
    cta={pricingPlan.cta}
    popular={pricingPlan.popular}
  />
</div>

// На это:
<div className="grid md:grid-cols-3 gap-8">
  {pricingPlans.map((plan, index) => (
    <PricingPlan
      key={index}
      name={plan.name}
      description={plan.description}
      price={plan.price}
      features={plan.features}
      cta={plan.cta}
      popular={plan.popular}
    />
  ))}
</div>

Добавление переключения месячной/годовой оплаты

Шаг 1: Обновление компонента PricingPlan

Сначала необходимо обновить интерфейс PricingPlanProps в файлеPricingPlan.tsx, чтобы поддерживать месячную и годовую цены:

typescript
export interface PricingPlanProps {
  name: string;
  description: string;
  monthlyPrice: number;  // Месячная цена
  annualPrice: number;   // Годовая цена
  features: string[];
  cta: string;
  popular: boolean;
  isAnnual: boolean;     // Флаг для определения, какую цену показывать
}

Затем обновите компонент, чтобы отображать правильную цену:

typescript
// В функции компонента PricingPlan
export default function PricingPlan({
  name,
  description,
  monthlyPrice,
  annualPrice,
  features,
  cta,
  popular,
  isAnnual,
}: PricingPlanProps) {
  // Остальной код...

  <div className="mt-4">
    <span className="text-4xl font-bold">
      {isAnnual ? annualPrice : monthlyPrice} ₽
    </span>
    <span className="text-gray-400">
      {isAnnual ? " / год" : " / месяц"}
    </span>
  </div>

  // Остальной код...
}

Шаг 2: Создание компонента PricingToggle

Создайте компонент PricingToggle.tsx для переключения между месячной и годовой оплатой:

typescript
// PricingToggle.tsx
"use client";

import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";

interface PricingToggleProps {
  isAnnual: boolean;
  setIsAnnual: (value: boolean) => void;
}

export default function PricingToggle({
  isAnnual,
  setIsAnnual,
}: PricingToggleProps) {
  return (
    <div className="flex items-center justify-center space-x-2 mt-8">
      <Label
        htmlFor="pricing-toggle"
        className={!isAnnual ? "font-semibold" : "text-gray-400"}
      >
        Месячная оплата
      </Label>
      <Switch
        id="pricing-toggle"
        checked={isAnnual}
        onCheckedChange={setIsAnnual}
      />
      <Label
        htmlFor="pricing-toggle"
        className={isAnnual ? "font-semibold" : "text-gray-400"}
      >
        Годовая оплата
        {isAnnual && (
          <span className="ml-2 text-green-500 text-sm">Сэкономьте 16%</span>
        )}
      </Label>
    </div>
  );
}

Шаг 3: Обновление основного компонента Pricing

Теперь обновите основной компонент Pricing.tsx, чтобы добавить состояние и использовать компонент PricingToggle:

typescript
"use client";

import { useState } from "react";
import PricingPlan from "./PricingPlan";
import PricingToggle from "./PricingToggle";
import { Button } from "@/components/ui/button";

export default function Pricing() {
  // Активируйте состояние для переключения месячной/годовой оплаты
  const [isAnnual, setIsAnnual] = useState(false);

  // Обновите структуру данных для включения месячной и годовой цены
  const pricingPlans = [
    {
      name: "Базовый",
      description: "Идеально для сайд-проектов и MVP",
      monthlyPrice: 149,
      annualPrice: 1499,
      features: [
        // Особенности
      ],
      cta: "Начать",
      popular: false,
    },
    // Другие планы...
  ];

  return (
    <section id="pricing" className="section py-20 bg-black">
      <div className="container">
        <div className="text-center mb-16">
          <h2 className="mb-4">Простые и прозрачные тарифы</h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto">
            Выберите план, который соответствует вашим потребностям
          </p>
          
          {/* Подключите компонент переключения */}
          <PricingToggle isAnnual={isAnnual} setIsAnnual={setIsAnnual} />
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {pricingPlans.map((plan, index) => (
            <PricingPlan
              key={index}
              name={plan.name}
              description={plan.description}
              monthlyPrice={plan.monthlyPrice}
              annualPrice={plan.annualPrice}
              features={plan.features}
              cta={plan.cta}
              popular={plan.popular}
              isAnnual={isAnnual}
            />
          ))}
        </div>
        
        {/* Остальной код... */}
      </div>
    </section>
  );
}

Кастомизация стилей

Компоненты используют Tailwind CSS для стилизации. Вы можете легко изменить внешний вид компонентов, модифицируя классы в соответствующих файлах.

Примеры кастомизации

  • Изменение цветовой схемы для выделенного плана:popular ? "border-purple-500" : "border-gray-700"
  • Изменение стиля кнопки:popular ? "bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700" : "bg-gray-700 hover:bg-gray-600"

Рекомендации

  • Используйте яркие и контрастные цвета для выделения самого популярного плана
  • Четко обозначайте преимущества годовой оплаты (например, скидку в процентах)
  • Добавьте дополнительную информацию о гарантии возврата денег или пробном периоде
  • Рассмотрите возможность добавления информации о сравнении планов для облегчения выбора
  • Для повышения конверсии используйте ясные и призывающие к действию текстовые метки на кнопках