Nicholai
d2a647b04d
- Extract React components (ParallaxBackground, FloatingHeader, StoryCard, CharacterAccordion, StickyMapSection, ScrollingBookCard) with proper client directives - Create Astro wrapper components (HeroSection, BooksSection, StoriesSection, CharactersSection) for static markup composition - Add reusable AnimatedSection component (client:visible) for scroll animations - Create useScrollAnimation hook for shared intersection observer logic - Update main layout to import global CSS for Tailwind styles - Replace 1130-line monolithic file with modular, maintainable structure - Remove Next.js imports (Image, Link) in favor of native Astro/HTML - Implement islands architecture with strategic client directives for performance Result: Better code organization, reduced client-side JavaScript, improved performance through lazy hydration
21 lines
1.8 KiB
Plaintext
21 lines
1.8 KiB
Plaintext
<section class="py-24 px-6">
|
|
<div class="text-center max-w-lg mx-auto">
|
|
<div class="inline-flex items-center justify-center w-14 h-14 rounded-full bg-rose-900/20 border border-rose-800/20 mb-8">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-rose-400/60 lucide lucide-heart"><path d="M19 14c1.49-1.46 3-3.73 3-5.5 1.55-1.82 0-3.3-1.73-3.3-1.73 0-3.13 1.47-3.13 3.3C14.44 8.62 13.11 10 11 10c-2.11 0-3.44-1.38-4.27-2.48C5.44 7.47 4.04 6 2.73 6 1 6 .27 7.48 1.73 9.5c0 1.77 1.51 4.04 3 5.5-1.07.89-2.45 2.59-2.63 5.41-.18 2.82 2.32 4.09 4.59 4.09 1.04 0 2.08-.44 3.05-1.29 1.04.85 2.08 1.29 3.05 1.29 2.27 0 4.77-1.27 4.59-4.09-.18-2.82-1.56-4.51-2.63-5.41Z"/></svg>
|
|
</div>
|
|
|
|
<h3 class="font-serif text-2xl md:text-3xl text-amber-100/85 tracking-[0.08em]">Support the Journey</h3>
|
|
<p class="mt-5 text-amber-200/40 leading-relaxed font-sans">
|
|
If you enjoy what I create, consider supporting me on Ko-fi. Every bit helps fuel more stories from the realm
|
|
of Arai.
|
|
</p>
|
|
|
|
<a
|
|
href="#"
|
|
class="mt-10 inline-flex items-center gap-3 px-8 py-4 bg-rose-900/60 hover:bg-rose-800/70 text-rose-50/90 font-serif tracking-[0.1em] text-sm transition-all duration-500 hover:shadow-xl hover:shadow-rose-950/30 hover:-translate-y-1 group border border-rose-700/20"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transition-transform duration-300 group-hover:rotate-12 lucide lucide-coffee"><path d="M10 2v10l5.09-3M2 10h9.09l5.91 3"/></svg>
|
|
<span>Buy me a coffee</span>
|
|
</a>
|
|
</div>
|
|
</section> |