57 lines
2.4 KiB
TypeScript
57 lines
2.4 KiB
TypeScript
import Image from "next/image"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function BookShowcase() {
|
|
return (
|
|
<section className="relative py-24 overflow-hidden">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 opacity-5">
|
|
<Image src="/images/mycelial-network-green.png" alt="" fill className="object-cover" />
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
|
|
{/* Book Cover */}
|
|
<div className="relative">
|
|
<div className="relative aspect-[3/4] max-w-md mx-auto">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 rounded-lg blur-2xl transform scale-105" />
|
|
<Image
|
|
src="/images/exploring-mycofi-cover.png"
|
|
alt="Exploring MycoFi: Mycelial Design Patterns for Web3 and Beyond - Book Cover"
|
|
fill
|
|
className="object-contain relative z-10 drop-shadow-2xl"
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Book Info */}
|
|
<div className="space-y-6">
|
|
<div className="inline-block px-4 py-2 bg-primary/10 rounded-full">
|
|
<span className="text-sm font-medium text-primary">New Release</span>
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-bold text-balance">Exploring MycoFi</h2>
|
|
<p className="text-xl text-muted-foreground leading-relaxed">
|
|
Mycelial Design Patterns for Web3 and Beyond
|
|
</p>
|
|
<p className="text-lg leading-relaxed">
|
|
Discover how nature's most sophisticated network architecture can inspire the next generation of
|
|
decentralized systems. This book explores the intersection of mycology, economics, and Web3 technology.
|
|
</p>
|
|
<div className="flex flex-wrap gap-4 pt-4">
|
|
<Button size="lg" asChild>
|
|
<a href="https://book.mycofi.earth" target="_blank" rel="noopener noreferrer">
|
|
Read the Book
|
|
</a>
|
|
</Button>
|
|
<Button size="lg" variant="outline" asChild>
|
|
<a href="#buy-book">Buy the Book</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|