add frequently-asked-questions

src/app/styles/pages-styles.scss

@@ -4539,6 +4539,7 @@
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 		overflow: hidden;
 		transition: transform 0.3s, box-shadow 0.3s;
+		user-select: none;
 
 		&:hover {
 			transform: translateY(-2px);
@@ -4563,7 +4564,15 @@
 		align-items: center;
 		cursor: pointer;
 		padding: 15px 0;
-		border-bottom: 1px solid #e5e7eb;
+
+		.dropdown-arrow {
+			min-width: 20px;
+			transition: transform 0.3s ease-in-out;
+
+			&.expanded {
+				transform: rotate(-180deg);
+			}
+		}
 
 		span {
 			font-weight: 500;
@@ -4576,9 +4585,14 @@
 	}
 
 	.faq-answer {
-		display: none;
-		padding: 15px 0;
 		color: #4b5563;
 		line-height: 1.6;
+		transition: all 0.3s ease-out;
+		opacity: 1;
+
+		&>div {
+			border-top: 1px solid #e5e7eb;
+			padding: 15px;
+		}
 	}
 }

src/app/ui/faq/component/faq-item.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+interface FaqItemProps {
+	question: string;
+	children?: ReactNode | null;
+}
+
+export default function FaqItem({ question, children }: FaqItemProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [height, setHeight] = useState(0);
+	const contentRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (contentRef.current) {
+			const scrollHeight = contentRef.current.scrollHeight;
+			if (isOpen) {
+				setHeight(scrollHeight);
+			} else {
+				setHeight(0);
+			}
+		}
+	}, [isOpen]);
+
+	function toggleHandler() {
+		setIsOpen(!isOpen);
+	}
+
+
+	return (
+		<div className="faq-item">
+			<div className="faq-question" onClick={toggleHandler}>
+				<span>{question}</span>
+				<div className="faq-toggle">
+					<svg className={`dropdown-arrow ${isOpen? 'expanded' : ''}`} viewBox="0 0 24 24" fill="currentColor">
+						<path d="M7 10l5 -5 5 5z"></path>
+					</svg>
+				</div>
+			</div>
+			<div
+				className="faq-answer"
+				style={{ height: `${height}px` }}
+			>
+				<div ref={contentRef}>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}

src/app/ui/faq/frequently-asked-questions.tsx

@@ -1,33 +1,178 @@
+import FaqItem from '@/app/ui/faq/component/faq-item';
+
 export default function FrequentlyAskedQuestions() {
 	return (
-		<div>
-			<div className="faq-section">
+		<div
+			className="faq-wrapper"
+		>
+			<section className="faq-section">
 				<h2>
 					<span></span>
 					Защита контента
 					<span>(2 вопросов)</span>
 				</h2>
 
-				<div className="faq-item">
-					<div className="faq-question">
-						<span>Как скрытый водяной знак защищает контент?</span>
-						<div className="faq-toggle">+</div>
-					</div>
-					<div className="faq-answer">
-						Скрытый водяной знак встраивается незаметно в ваш контент и позволяет отслеживать его использование в интернете. Технология работает на основе скрытого водяного знака No Copy и не влияет на качество изображений, видео или аудио.
-					</div>
-				</div>
+				<FaqItem
+					question="Как скрытый водяной знак защищает контент?"
+				>
+					Скрытый водяной знак встраивается незаметно в ваш контент и позволяет отслеживать его использование в интернете. Технология работает на основе скрытого водяного знака No Copy и не влияет на качество изображений, видео или аудио.
+				</FaqItem >
 
-				<div className="faq-item">
-					<div className="faq-question">
-						<span>Насколько надежна защита?</span>
-						<div className="faq-toggle">+</div>
-					</div>
-					<div className="faq-answer">
-						Наша многослойная защита обеспечивает 99.8% точность определения авторства даже после обработки файлов.
-					</div>
-				</div>
-			</div>
+
+				<FaqItem
+					question="Насколько надежна защита?"
+				>
+					Наша многослойная защита обеспечивает 99.8% точность определения авторства даже после обработки файлов.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Общие вопросы
+					<span>(2 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Что такое NO COPY?"
+				>
+					NO COPY - это платформа для защиты авторских прав с помощью невидимых водяных знаков для изображений, видео, аудио и документов.
+				</FaqItem >
+
+
+				<FaqItem
+					question="Как работает защита?"
+				>
+					Мы встраиваем невидимые цифровые метки непосредственно в структуру файлов. Эти метки сохраняются даже при сжатии и конвертации.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Лимиты и ограничения
+					<span>(3 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Сколько фотографий я могу промаркировать?"
+				>
+					Вы можете промаркировать столько фотографий, сколько прописано в выбранном Вами тарифном плане. Минимально в месяц можно маркировать от 100 фотографий на платных тарифных планах No Copy.
+				</FaqItem >
+
+
+				<FaqItem
+					question="Сколько файлов можно загрузить?"
+				>
+					Количество файлов зависит от вашего тарифного плана. Для примера, на тарифе СТАРТ: ~100 фото / ~20 видео / ~35 аудио / ~60 pdf
+				</FaqItem >
+
+				<FaqItem
+					question="Что происходит при превышении лимитов?"
+				>
+					При превышении лимитов подписки вы можете использовать токены для продолжения работы или обновить тариф. Без токенов новые файлы нельзя будет защитить до начала следующего месяца или смены тарифа.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Хранение данных
+					<span>(1 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Где хранится весь промаркированный контент?"
+				>
+					Весь промаркированный контент хранится на защищенных серверах No Copy с многоуровневой системой резервного копирования согласно закону ФЗ-152. Доступ к вашим файлам имеете только вы.
+				</FaqItem >
+			</section>
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Правовые вопросы
+					<span>(1 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Могу ли я маркировать чужой контент?"
+				>
+					Нет, маркировать можно только контент, авторские права на который принадлежат вам. Это важное условие использования платформы No Copy.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Поддержка
+					<span>(1 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Я сам нашёл нарушение контента, куда заявить?"
+				>
+					Если вы обнаружили нарушение самостоятельно, свяжитесь с нашей службой поддержки через раздел "Поддержка" или отправьте письмо на info@no-copy.ru.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Технические вопросы
+					<span>(1 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Какие форматы поддерживаются?"
+				>
+					Изображения: JPG, JPEG, PNG, GIF, BMP. Видео: MP4, AVI, MOV, WMV. Аудио: WAV. Документы: PDF.
+				</FaqItem >
+			</section>
+
+			<section className="faq-section">
+				<h2>
+					<span></span>
+					Оплата и подписка
+					<span>(7 вопросов)</span>
+				</h2>
+
+				<FaqItem
+					question="Какие способы оплаты поддерживаются?"
+				>
+					Основной вид оплаты - это оплата российскими(выпущенные в РФ) банковскими картами (Visa, MasterCard, МИР).
+					По запросу можно выбрать другой способ оплаты: электронными кошельками (Yoo.Money), через систему быстрых платежей (СБП) и другими способами.
+				</FaqItem >
+				<FaqItem
+					question="Как работает автопродление подписки?"
+				>
+					Подписка автоматически продлевается каждый месяц с вашей карты. Вы можете отменить автопродление в любой момент в настройках аккаунта. Уведомление о списании приходит за 3 дня до продления.
+				</FaqItem >
+				<FaqItem
+					question="Что такое токены и зачем они нужны?"
+				>
+					Токены - это внутренняя валюта платформы для оплаты защиты файлов и других действий на платформе. Например круглосуточный мониторинг совпадений контента, подача жалоб DMCA, фиксация нарушений(протокол) или подключение юристов на платформе и создание дела.
+				</FaqItem >
+				<FaqItem
+					question="Можно ли получить возврат средств?"
+				>
+					Возврат возможен только в день оформления подписки при не использовании токенов, защиты файлов, поиска и других функций платформы. Для подачи уведомления обратитесь в техническую поддержку через форму обратной связи или E-mail: support@no-copy.ru.
+				</FaqItem >
+				<FaqItem
+					question="Как изменить или отменить подписку?"
+				>
+					Вы можете повысить тариф в любой момент - доплата рассчитывается пропорционально. Понижение тарифа вступает в силу с следующего периода оплаты. Отменить подписку можно в настройках аккаунта.
+				</FaqItem >
+				<FaqItem
+					question="Безопасна ли оплата через ваш сайт?"
+				>
+					Да, все платежи обрабатываются через Яндекс.Кассу с использованием защищенного SSL-соединения. Мы не храним данные ваших банковских карт. Платформа соответствует стандартам безопасности PCI DSS.
+				</FaqItem >
+				<FaqItem
+					question="Как получить чек об оплате?"
+				>
+					Электронный чек автоматически отправляется на email, указанный при оплате. Также вы можете найти все чеки в разделе "История платежей" в вашем личном кабинете.
+				</FaqItem >
+			</section>
 		</div>
 	)
 }