jleibl/jleibl.net
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(blog): add "Coming Soon" message and buttons

Browse Source
This commit is contained in:
Jan-Marlon Leibl
2025-03-13 20:46:03 +01:00
parent 69efdf7d6c
commit 38d969b9f1
1 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/sections/BlogPreview.astro
View File

@ -39,16 +39,42 @@ const blogPosts = [
</h2>
<p class="font-['Instrument_Sans'] theme-secondary text-lg sm:text-xl max-w-3xl mt-4">
Thoughts, insights, and tutorials on software development and tech.
<span class="inline-flex items-center px-3 py-1 ml-2 rounded-full text-xs font-medium bg-black/20 text-white font-['Instrument_Sans']">Coming Soon</span>
</p>
</div>
<div class="hidden sm:block">
<button
class="animate-button inline-flex items-center justify-center gap-2 px-6 py-3 bg-transparent border theme-border theme-text-50 rounded-xl transition-all text-sm tracking-tight font-medium shadow-sm font-['Instrument_Sans'] cursor-not-allowed opacity-75"
title="Coming soon!"
>
View All Posts
<svg
class="w-4 h-4"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 relative p-12">
<div class="absolute inset-0 backdrop-blur-sm z-10 flex items-center justify-center rounded-xl">
<div class="bg-black/80 px-6 py-5 rounded-xl border border-white/20 text-center">
<span class="text-xl font-semibold text-white font-['DM_Sans']">Blog Coming Soon!</span>
<p class="text-white/80 mt-2 font-['Instrument_Sans']">The blog feature is currently in development.</p>
</div>
</div>
{blogPosts.map((post) => (
<a
href={`/blog/${post.slug}`}
class="flex flex-col h-full theme-accent border theme-border rounded-xl overflow-hidden hover:shadow-lg transition-all duration-300 group"
<div
class="flex flex-col h-full theme-accent border theme-border rounded-xl overflow-hidden opacity-80 group"
>
<div class="p-6 sm:p-8 flex flex-col h-full">
<div class="flex-grow space-y-4">
@ -58,16 +84,16 @@ const blogPosts = [
<span class="inline-flex px-2.5 py-1 rounded-lg text-xs font-medium theme-text-70 bg-black/10 font-['Instrument_Sans']">{tag}</span>
))}
</div>
<h3 class="text-xl font-bold theme-primary group-hover:underline decoration-1 underline-offset-2 font-['DM_Sans']">{post.title}</h3>
<h3 class="text-xl font-bold theme-primary font-['DM_Sans']">{post.title}</h3>
</div>
<p class="theme-secondary font-['Instrument_Sans'] text-sm sm:text-base leading-relaxed">{post.excerpt}</p>
</div>
<div class="mt-6 pt-6 border-t theme-border flex items-center justify-between">
<span class="text-sm theme-text-70 font-['Instrument_Sans']">{post.date}</span>
<div class="p-2 rounded-full theme-accent group-hover:bg-opacity-100 transition-all">
<div class="p-2 rounded-full theme-accent">
<svg
class="w-4 h-4 theme-primary transform group-hover:translate-x-1 transition-transform"
class="w-4 h-4 theme-primary"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@ -78,9 +104,29 @@ const blogPosts = [
</div>
</div>
</div>
</a>
</div>
))}
</div>
<div class="sm:hidden flex justify-center mt-8">
<button
class="animate-button inline-flex items-center justify-center gap-2 px-8 py-4 bg-transparent border theme-border theme-text-50 rounded-xl transition-all text-base tracking-tight font-medium shadow-sm font-['Instrument_Sans'] cursor-not-allowed opacity-75"
title="Coming soon!"
>
View All Posts
<svg
class="w-5 h-5"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</button>
</div>
</FadeIn>
</div>
</section>