Новые правки в компоненты
This commit is contained in:
Web-serfer
parent
ce93982f11
commit
acb7b88ff1
6 changed files with 68 additions and 59 deletions
|
|
@ -23,12 +23,12 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
---
|
||||
|
||||
<div
|
||||
class={`auth-lock-card animate-on-scroll ${className}`}
|
||||
class={`auth-lock-card animate-on-scroll w-full max-w-[700px] mx-auto px-4 md:px-0 ${className}`}
|
||||
data-animation={dataAnimation}
|
||||
data-delay={delay}
|
||||
>
|
||||
<div class="lock-icon-container">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="w-8 h-8 md:w-10 md:h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -47,12 +47,10 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
|
||||
<style>
|
||||
.auth-lock-card {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -66,8 +64,8 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
}
|
||||
|
||||
.lock-icon-container {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
|
|
@ -77,19 +75,39 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15);
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lock-icon-container {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-title {
|
||||
color: #0f172a;
|
||||
font-size: 1.375rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lock-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lock-text {
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 1.75rem;
|
||||
max-width: 420px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.lock-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
|
|
@ -98,15 +116,22 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
justify-content: center;
|
||||
background: linear-gradient(to bottom, #2563eb, #1e40af);
|
||||
color: #ffffff;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.auth-button {
|
||||
padding: 0.875rem 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-button:hover {
|
||||
background: linear-gradient(to bottom, #1d4ed8, #1e3a8a);
|
||||
transform: translateY(-2px);
|
||||
|
|
@ -130,23 +155,4 @@ const delay = typeof dataDelay === 'number' ? dataDelay : parseInt(String(dataDe
|
|||
color: #1d4ed8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.auth-lock-card {
|
||||
padding: 2rem 1.25rem;
|
||||
}
|
||||
|
||||
.lock-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.lock-text {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
font-size: 0.8125rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const getPages = () => {
|
|||
|
||||
<style>
|
||||
.pagination {
|
||||
padding: 3rem 0;
|
||||
padding: 5rem 0 3rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -102,42 +102,34 @@ export default function ReviewFormContainer() {
|
|||
</Show>
|
||||
|
||||
<Show when={!isLoading()}>
|
||||
<Show when={isAuthenticated()} fallback={
|
||||
<div class="mx-auto" style="max-width: 700px;">
|
||||
<div class="bg-linear-to-br from-gray-50 to-gray-100 rounded-2xl p-8 md:p-12 border border-gray-200 text-center" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
|
||||
<div class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center" style="background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.3) 100%);">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<Show when={isAuthenticated()} fallback={
|
||||
<div class="mx-auto w-full max-w-[700px]">
|
||||
<div class="bg-gradient-to-br from-slate-50 to-slate-100 rounded-2xl border border-slate-200 p-6 md:p-12 text-center">
|
||||
<div class="w-16 md:w-20 mx-auto mb-4 md:mb-6 rounded-full flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-blue-900/30">
|
||||
<svg class="w-8 md:w-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="text-xl font-semibold text-gray-900 mb-3">
|
||||
<h4 class="text-lg md:!text-xl font-semibold text-slate-900 mb-2 md:mb-3">
|
||||
Авторизуйтесь, чтобы оставить отзыв
|
||||
</h4>
|
||||
<p class="text-gray-600 mb-6">
|
||||
<p class="text-slate-600 mb-4 md:mb-6 text-sm md:!text-base">
|
||||
Чтобы поделиться своим опытом, пожалуйста, войдите в аккаунт.
|
||||
</p>
|
||||
<a
|
||||
href={`/auth/sign-in?redirect=${encodeURIComponent(window.location.pathname)}`}
|
||||
class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-md cursor-pointer px-6 py-3 text-lg auth-login-btn"
|
||||
style="background: linear-gradient(to bottom, #2563eb, #1e40af); color: white; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3); transition: all 0.3s ease;"
|
||||
class="inline-flex items-center justify-center font-semibold transition-all duration-300 rounded-lg cursor-pointer px-4 py-3 md:px-6 md:py-3 text-sm md:!text-base text-white bg-gradient-to-b from-blue-600 to-blue-800 shadow-md hover:shadow-lg hover:-translate-y-0.5"
|
||||
>
|
||||
<style>{`
|
||||
.auth-login-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
|
||||
}
|
||||
`}</style>
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
|
||||
</svg>
|
||||
Войдите в аккаунт
|
||||
</a>
|
||||
<p class="mt-4 text-sm text-gray-600">
|
||||
<p class="mt-4 text-sm text-slate-600">
|
||||
Нет аккаунта?{" "}
|
||||
<a
|
||||
href={`/auth/sign-up?redirect=${encodeURIComponent(window.location.pathname)}`}
|
||||
class="font-medium hover:underline"
|
||||
style="color: #2563eb;"
|
||||
class="font-medium text-blue-600 hover:underline"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue