start making FAQ page

src/app/[locale]/pages/faq/page.tsx

@@ -0,0 +1,13 @@
+import PageTitle from '@/app/ui/page-title';
+import PopularAskedQuestions from '@/app/ui/faq/popular-asked-questions';
+import FrequentlyAskedQuestions from '@/app/ui/faq/frequently-asked-questions';
+
+export default function Page() {
+	return (
+		<div>
+			<PageTitle title="frequently-asked-questions" />
+			<PopularAskedQuestions />
+			<FrequentlyAskedQuestions />
+		</div>
+	)
+}

src/app/styles/pages-styles.scss

@@ -4467,4 +4467,118 @@
 			box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 		}
 	}
+}
+
+.popular-questions {
+	background: linear-gradient(135deg, #6366f1, #8b5cf6);
+	border-radius: 20px;
+	padding: 30px;
+	margin-bottom: 30px;
+	color: white;
+
+	h2 {
+		font-size: 24px;
+		margin-bottom: 20px;
+		display: flex;
+		align-items: center;
+	}
+
+	.popular-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 20px;
+
+		div {
+			background: rgba(255, 255, 255, 0.1);
+			border-radius: 15px;
+			padding: 20px;
+
+			h4 {
+				margin-bottom: 10px;
+			}
+
+			p {
+				font-size: 14px;
+				opacity: 0.9;
+			}
+		}
+	}
+}
+
+.faq-section {
+	margin-bottom: 40px;
+
+	h2 {
+		font-size: 22px;
+		font-weight: 600;
+		margin-bottom: 20px;
+		color: #1f2937;
+		display: flex;
+		align-items: center;
+
+		span:first-child {
+			width: 6px;
+			height: 6px;
+			background: #6366f1;
+			border-radius: 50%;
+			margin-right: 15px;
+		}
+
+		span:last-child {
+			margin-left: 10px;
+			font-size: 14px;
+			color: #6b7280;
+			font-weight: 400;
+		}
+	}
+
+	.faq-item {
+		background: white;
+		border-radius: 15px;
+		margin-bottom: 15px;
+		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+		overflow: hidden;
+		transition: transform 0.3s, box-shadow 0.3s;
+
+		&:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+		}
+
+		.faq-question {
+			padding: 20px;
+			cursor: pointer;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-weight: 500;
+			background: white;
+			transition: background-color 0.3s;
+		}
+	}
+
+	.faq-question {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		cursor: pointer;
+		padding: 15px 0;
+		border-bottom: 1px solid #e5e7eb;
+
+		span {
+			font-weight: 500;
+		}
+	}
+
+	.faq-toggle {
+		font-size: 20px;
+		color: #6366f1;
+	}
+
+	.faq-answer {
+		display: none;
+		padding: 15px 0;
+		color: #4b5563;
+		line-height: 1.6;
+	}
 }

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

@@ -0,0 +1,33 @@
+export default function FrequentlyAskedQuestions() {
+	return (
+		<div>
+			<div 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>
+
+				<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>
+		</div>
+	)
+}

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

@@ -0,0 +1,23 @@
+export default function PopularAskedQuestions() {
+	return (
+		<div className="popular-questions">
+			<h2>
+				Популярные вопросы
+			</h2>
+			<div className="popular-grid">
+				<div>
+					<h4>Как работает защита?</h4>
+					<p>Мы встраиваем невидимые водяные знаки в ваш контент</p>
+				</div>
+				<div>
+					<h4>Сколько файлов можно загрузить?</h4>
+					<p>Зависит от вашего тарифного плана</p>
+				</div>
+				<div>
+					<h4>Безопасность данных</h4>
+					<p>Все файлы хранятся на защищенных серверах</p>
+				</div>
+			</div>
+		</div>
+	)
+}

src/app/ui/header/userMenuButton.tsx

@@ -74,7 +74,7 @@ export default function UserMenuButton() {
 						</svg>
 						{t('settings')}
 					</Link>
-					<Link href="#" className="user-menu-item">
+					<Link href="/pages/faq" className="user-menu-item">
 						<svg viewBox="0 0 24 24" fill="currentColor">
 							<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path>
 						</svg>

src/i18n/messages/en.json

@@ -293,7 +293,8 @@
 		"there-are-not-enough-funds-to-protect-files": "There are not enough funds to protect files. {count} tokens required",
 		"there-are-not-enough-funds-to-protect-file": "There are not enough funds to protect file. {count} tokens required",
 		"duplicate-files": "Duplicate files",
-		"monitoring-is-not-supported": "Monitoring is not supported"
+		"monitoring-is-not-supported": "Monitoring is not supported",
+		"frequently-asked-questions": "Frequently Asked Questions"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -293,7 +293,8 @@
 		"there-are-not-enough-funds-to-protect-files": "Для защиты файлов недостаточно средств. Необходимо {count} токен(ов/а)",
 		"there-are-not-enough-funds-to-protect-file": "Для защиты файла недостаточно средств. Необходимо {count} токен(ов/а)",
 		"duplicate-files": "Дубликаты файлов",
-		"monitoring-is-not-supported": "Мониторинг не поддерживается"
+		"monitoring-is-not-supported": "Мониторинг не поддерживается",
+		"frequently-asked-questions": "Часто задаваемые вопросы"
 	},
 	"Login-register-form": {
 		"and": "и",