Новые правки в компоненты
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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
import "@styles/global.css";
|
||||
import { SITE_TITLE_SUFFIX } from "@constants";
|
||||
import { ClientRouter } from 'astro:transitions';
|
||||
|
||||
import Header from "@components/layout/header/Header.astro";
|
||||
import Footer from "@components/layout/footer/Footer.astro";
|
||||
|
|
@ -34,6 +35,7 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<!-- Yandex верификация -->
|
||||
<meta name="yandex-verification" content="be3edfd138348e43" />
|
||||
<ClientRouter />
|
||||
</head>
|
||||
<body>
|
||||
<Toast />
|
||||
|
|
@ -64,6 +66,20 @@ const { title, description, canonicalLink, breadcrumbs } = Astro.props;
|
|||
</style>
|
||||
|
||||
<script>
|
||||
// Сохраняем позицию скролла перед переходом
|
||||
document.addEventListener('astro:before-preparation', (e) => {
|
||||
sessionStorage.setItem('scrollPosition', String(window.scrollY));
|
||||
});
|
||||
|
||||
// Восстанавливаем позицию скролла после перехода
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
const savedPosition = sessionStorage.getItem('scrollPosition');
|
||||
if (savedPosition) {
|
||||
window.scrollTo(0, parseInt(savedPosition));
|
||||
sessionStorage.removeItem('scrollPosition');
|
||||
}
|
||||
});
|
||||
|
||||
// Клиентский скрипт для открытия модального окна
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const btn = document.getElementById("consultation-btn");
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import PageHero from '@components/base/PageHero.astro';
|
|||
import BlogCategories from '@components/blog/BlogCategories.astro';
|
||||
import BlogCard from '@components/blog/BlogCard.astro';
|
||||
import Pagination from '@components/base/Pagination.astro';
|
||||
import CTA from '@components/base/CTA.astro';
|
||||
import SearchModal from '@components/base/SearchModal.astro';
|
||||
import { getPosts, getAllCategories, getPostImageUrl } from '@lib/pb';
|
||||
|
||||
|
|
@ -83,14 +82,6 @@ const formatDate = (date: string) => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA-блок -->
|
||||
<CTA
|
||||
icon="consult"
|
||||
title="Нужна консультация юриста?"
|
||||
description="Не нашли ответ на свой вопрос? Запишитесь на бесплатную консультацию — мы поможем разобраться в вашей ситуации"
|
||||
btnText="Записаться на консультацию"
|
||||
/>
|
||||
|
||||
<SearchModal />
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
:root {
|
||||
--site-max-width: 1400px;
|
||||
--color-light: #ffffff;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue