Skip to content

Commit 0216697

Browse files
rishichawdarishichawda
committed
update layout
Signed-off-by: rishichawda <[email protected]>
1 parent 0995b03 commit 0216697

File tree

1 file changed

+35
-104
lines changed

1 file changed

+35
-104
lines changed

‎src/pages/articles/index.astro‎

Lines changed: 35 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import Layout from "../../layouts/base_layout.astro";
44
import { Image } from "astro:assets";
55
import { Schema } from "astro-seo-schema";
66
import SeriesIndicator from "../../components/article/series_indicator.astro";
7+
import TagsFilter from "../../components/article/tags_filter.astro";
8+
import NavigationCards from "../../components/article/navigation_cards.astro";
9+
import GlobalSearchCard from "../../components/article/global_search_card.astro";
10+
import BitsCard from "../../components/article/bits_card.astro";
11+
import SeriesCard from "../../components/article/series_card.astro";
12+
import QuotesCard from "../../components/article/quotes_card.astro";
713
814
const page_info = {
915
title: "Articles | Rishi Chawda",
@@ -188,7 +194,12 @@ const pageUrl = new URL(
188194
<div class="max-w-[1300px] mx-auto px-4 sm:px-6 lg:px-12 py-12 sm:py-16 lg:py-20">
189195
<div class="flex flex-col xl:grid xl:grid-cols-[1fr_350px] gap-12 lg:gap-16">
190196
<!-- Main content area -->
191-
<div class="order-2 xl:order-1">
197+
<div class="order-1 xl:order-1">
198+
<!-- Tags Filter (mobile only) -->
199+
<div class="xl:hidden mb-8">
200+
<TagsFilter tags={allTags} />
201+
</div>
202+
192203
<!-- Search bar -->
193204
<div class="mb-10">
194205
<div class="relative">
@@ -206,6 +217,15 @@ const pageUrl = new URL(
206217
</div>
207218
</div>
208219

220+
<!-- Navigation Cards (desktop only - shown below search) -->
221+
<div class="hidden xl:block mb-10">
222+
<NavigationCards orientation="horizontal">
223+
<GlobalSearchCard orientation="horizontal" />
224+
<BitsCard orientation="horizontal" />
225+
<SeriesCard orientation="horizontal" />
226+
</NavigationCards>
227+
</div>
228+
209229
<!-- Articles grid -->
210230
<div class="grid gap-6">
211231
{
@@ -384,119 +404,30 @@ const pageUrl = new URL(
384404
</div>
385405

386406
<!-- Sidebar -->
387-
<div class="order-1 xl:order-2">
407+
<div class="order-2 xl:order-2">
388408
<div class="sticky top-8">
389-
<!-- Global Search Card -->
390-
<div class="mb-8">
391-
<a
392-
href="/search/"
393-
class="block p-6 bg-gradient-to-br from-brand-500/10 via-brand-400/10 to-brand-300/10 rounded-3xl border border-brand-200/50 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
394-
>
395-
<div class="flex items-start gap-4">
396-
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-brand-600 to-brand-500 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
397-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
398-
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-6-6m2-5a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
399-
</svg>
400-
</div>
401-
<div class="flex-1">
402-
<h3 class="text-brand-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
403-
Global Search
404-
</h3>
405-
<p class="text-brand-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
406-
Search across articles, gallery, and quotes to find exactly what you're looking for
407-
</p>
408-
</div>
409-
</div>
410-
</a>
409+
<!-- Tags Filter (desktop - shown in sidebar) -->
410+
<div class="hidden xl:block mb-8">
411+
<TagsFilter tags={allTags} />
411412
</div>
412413

413-
<!-- Article Series Card -->
414-
<div class="mb-8">
415-
<a
416-
href="/articles/series/"
417-
class="block p-6 bg-gradient-to-br from-purple-50/80 via-white/80 to-purple-100/50 rounded-3xl border border-purple-200/40 hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-purple-300/60 group"
418-
>
419-
<div class="flex items-start gap-4">
420-
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300 shadow-lg">
421-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
422-
<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
423-
</svg>
424-
</div>
425-
<div class="flex-1">
426-
<h3 class="text-purple-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-purple-700 transition-colors">
427-
Article Series
428-
</h3>
429-
<p class="text-purple-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
430-
Explore in-depth, multi-part tutorials and comprehensive guides on complex topics
431-
</p>
432-
</div>
433-
</div>
434-
</a>
414+
<!-- Navigation Cards (mobile only) -->
415+
<div class="xl:hidden">
416+
<NavigationCards orientation="vertical">
417+
<GlobalSearchCard orientation="vertical" />
418+
<BitsCard orientation="vertical" />
419+
<SeriesCard orientation="vertical" />
420+
</NavigationCards>
435421
</div>
436422

437423
<!-- Quotes Card -->
438-
<div class="mb-10">
439-
<a
440-
href="/reads/"
441-
class="block p-6 bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 hover:shadow-xl hover:shadow-brand-500/10 transition-all duration-500 hover:-translate-y-1 hover:border-brand-300/50 group"
442-
>
443-
<div class="flex items-start gap-4">
444-
<div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-brand-300 via-brand-400 to-brand-700 rounded-2xl flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
445-
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
446-
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
447-
</svg>
448-
</div>
449-
<div class="flex-1">
450-
<h3 class="text-gray-800 font-bold text-lg font-['Red_Hat_Display_Variable'] mb-2 group-hover:text-brand-700 transition-colors">
451-
Favourite Quotes
452-
</h3>
453-
<p class="text-gray-600 text-sm font-['Montserrat_Variable'] leading-relaxed">
454-
Discover inspiring lines from books and the internet that resonated with me
455-
</p>
456-
</div>
457-
</div>
458-
</a>
424+
<div class="mb-10 mt-6">
425+
<QuotesCard orientation="vertical" />
459426
</div>
460427

461-
<!-- Tags Filter -->
462-
<div class="bg-white/70 backdrop-blur-sm rounded-3xl border border-brand-200/30 p-6">
463-
<h3 class="text-gray-900 font-bold text-xl font-['Red_Hat_Display_Variable'] mb-6 flex items-center">
464-
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-brand-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
465-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.99 1.99 0 013 12V7a4 4 0 014-4z" />
466-
</svg>
467-
Filter by Tags
468-
</h3>
469-
<div class="flex flex-wrap gap-2">
470-
{
471-
allTags.map((tag) => (
472-
<button
473-
class="group inline-flex items-center font-['Montserrat_Variable'] px-3 py-1.5 rounded-lg text-xs font-medium bg-brand-50 text-brand-700 border border-brand-200/50 hover:bg-brand-100 hover:text-brand-800 hover:shadow-md transition-all duration-300 data-[selected=true]:bg-gradient-to-r data-[selected=true]:from-brand-600 data-[selected=true]:to-brand-500 data-[selected=true]:text-white data-[selected=true]:shadow-lg data-[selected=true]:shadow-brand-500/30 cursor-pointer"
474-
data-tag={tag}
475-
>
476-
<span>{tag}</span>
477-
<svg
478-
class="overflow-hidden w-0 group-data-[selected=true]:w-3 group-data-[selected=true]:ml-1.5 transition-all duration-300"
479-
viewBox="0 0 24 24"
480-
fill="none"
481-
stroke="currentColor"
482-
stroke-width="2"
483-
stroke-linecap="round"
484-
stroke-linejoin="round"
485-
>
486-
<line x1="18" y1="6" x2="6" y2="18" />
487-
<line x1="6" y1="6" x2="18" y2="18" />
488-
</svg>
489-
</button>
490-
))
491-
}
492-
</div>
493-
</div>
428+
494429
</div>
495430
</div>
496-
</div>
497-
</div>
498-
</main>
499-
</Layout>
500431

501432
<script>
502433
document.addEventListener('astro:page-load', () => {

0 commit comments

Comments
 (0)