start making FAQ page
This commit is contained in:
smanylov
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -4468,3 +4468,117 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "и",
|
||||
|
||||
Reference in New Issue
Block a user