redi/astro_avtourist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Создана форма поиска

Browse source
This commit is contained in:
Web-serfer 2026-04-07 20:53:26 +05:00
parent ffd99c404a
commit 7d4289bd9e
3 changed files with 353 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/pages/blog/index.astro
View file

@ -5,7 +5,6 @@ import BlogHero from '@components/blog/BlogHero.astro';
import BlogCategories from '@components/blog/BlogCategories.astro';
import BlogCard from '@components/blog/BlogCard.astro';
import BlogPagination from '@components/blog/BlogPagination.astro';
import SearchIcon from '@components/blog/SearchIcon.astro';
import SearchModal from '@components/base/SearchModal.astro';
import { blogPosts, categories } from '@data/blogData';
---
@ -16,34 +15,26 @@ import { blogPosts, categories } from '@data/blogData';
canonicalLink={`${SITE_URL}/blog`}
>
<BlogHero />
<!-- Иконка поиска -->
<section class="search-section">
<div class="site-container">
<div class="search-container">
<SearchIcon />
<p class="search-hint">Нажмите для поиска статей</p>
</div>
</div>
</section>
<BlogCategories categories={categories} />
<!-- Сетка статей -->
<section class="blog-grid-section">
<div class="site-container">
<div class="blog-grid">
<div class="blog-grid" id="blog-grid">
{blogPosts.map((post) => (
<BlogCard
title={post.title}
description={post.description}
category={post.category}
categoryColor={post.categoryColor}
date={post.date}
readTime={post.readTime}
imageUrl={post.imageUrl}
slug={post.slug}
/>
<article class="blog-card-wrapper" data-category={post.category}>
<BlogCard
title={post.title}
description={post.description}
category={post.category}
categoryColor={post.categoryColor}
date={post.date}
readTime={post.readTime}
imageUrl={post.imageUrl}
slug={post.slug}
/>
</article>
))}
</div>
@ -66,28 +57,11 @@ import { blogPosts, categories } from '@data/blogData';
</div>
</div>
</section>
<SearchModal />
</Layout>
<SearchModal />
<style>
.search-section {
padding: 2rem 0;
background: linear-gradient(135deg, #0a2540 0%, #1e3a5f 100%);
}
.search-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.search-hint {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.blog-grid-section {
padding: 3rem 0 0;
background: #f8fafc;
@ -99,6 +73,10 @@ import { blogPosts, categories } from '@data/blogData';
gap: 2rem;
}
.blog-card-wrapper {
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* ===== CTA ===== */
.blog-cta {
padding: 5rem 0;