src/components/FAQ.js - main - vlad82098/PRACTIC2

src/components/FAQ.js
86 строк4 KB
влад
first commit
19 дек 2025, 06:16
19 дек 2025, 06:166bb42b0
import React, { useState } from "react";

const FAQ = () => {
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleFAQ = (index) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  const faqData = [
    {
      question: "Как долго длится курс?",
      answer:
        "Курс длится 3 месяца с гибким графиком. Вы можете учиться в удобное время, комбинируя онлайн-лекции с практическими занятиями.",
    },
    {
      question: "Нужны ли специальные инструменты?",
      answer:
        "Да, вам понадобятся базовые инструменты парикмахера: ножницы, расчески, фен, утюжок. Мы предоставим полный список необходимого оборудования на первом занятии.",
    },
    {
      question: "Есть ли возможность оплаты в рассрочку?",
      answer:
        "Да, мы предлагаем удобную систему оплаты в рассрочку без процентов. Вы можете оплатить курс частями в течение всего периода обучения.",
    },
    {
      question: "Предоставляете ли вы сертификат по окончании?",
      answer:
        "Да, после успешного завершения курса вы получите официальный сертификат установленного образца, который признается работодателями.",
    },
    {
      question: "Можно ли вернуть деньги, если курс не подойдет?",
      answer:
        "Да, в течение первых 14 дней вы можете вернуть полную стоимость курса. Мы гарантируем качество обучения и индивидуальный подход.",
    },
    {
      question: "Как проходит обучение?",
      answer:
        "Обучение сочетает теорию и практику: онлайн-лекции, видеоуроки, практические занятия с моделями и индивидуальные консультации с преподавателями.",
    },
    {
      question: "Есть ли поддержка после окончания курса?",
      answer:
        "Да, вы получаете пожизненный доступ к материалам курса и поддержку в закрытом сообществе выпускников. Мы помогаем с трудоустройством.",
    },
    {
      question: "Кто преподает на курсе?",
      answer:
        "Наши преподаватели - практикующие мастера с опытом работы более 10 лет. Каждый специалист имеет сертификаты и регулярно повышает квалификацию.",
    },
  ];

  return (
    <section id="faq" className="faq-section">
      <div className="container">
        <div className="section-header">
          <h2 className="section-title">
            Часто задаваемые <span className="text-gradient">вопросы</span>
          </h2>
          <p className="section-subtitle">
            Ответы на самые популярные вопросы о наших курсах
          </p>
        </div>
        <div className="faq-list">
          {faqData.map((item, index) => (
            <div key={index} className="faq-item">
              <h3 onClick={() => toggleFAQ(index)}>
                {item.question}
                <span className="faq-toggle">
                  {activeIndex === index ? "−" : "+"}
                </span>
              </h3>
              <div
                className={`faq-answer ${activeIndex === index ? "active" : ""}`}
              >
                <p>{item.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default FAQ;