Spaces:
Sleeping
Sleeping
File size: 8,636 Bytes
d3d3b46 d8a7fc4 ec76476 d8a7fc4 ec76476 d8a7fc4 d3d3b46 d8a7fc4 d3d3b46 d8a7fc4 d3d3b46 d8a7fc4 d3d3b46 d8a7fc4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | @page "/about"
<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
<!-- Hero / Story -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
<div>
<h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Our Origin</h2>
<h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">A Library <br /> <span class="text-primary italic">Without Borders.</span></h1>
<p class="text-xl text-muted leading-relaxed mb-10">
Founded in 2024, LibraryLuxe was born from a simple idea: that books should be accessible, organized, and rewarding. We've built a system that doesn't just manage inventory, but fosters a culture of reading.
</p>
<div class="bg-card p-8 rounded-3xl border border-border border-l-4 border-l-primary shadow-sm">
<p class="italic text-main font-medium text-lg leading-relaxed">
"Reading is the ultimate superpower. We just provide the cape. Our mission is to bridge the gap between classic literature and modern convenience."
</p>
<div class="mt-4 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-primary/20"></div>
<span class="text-xs font-bold uppercase tracking-widest text-muted">Founding Vision</span>
</div>
</div>
</div>
<div class="relative w-full max-w-sm mx-auto aspect-[3/4] group perspective-1000">
<!-- Book 4 (Furthest Back) -->
<div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-lg transform transition-all duration-700 origin-bottom-left -rotate-12 group-hover:-rotate-[25deg] group-hover:-translate-x-16 group-hover:-translate-y-8 overflow-hidden">
<img src="https://covers.openlibrary.org/b/isbn/9780062316097-L.jpg" class="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity" />
</div>
<!-- Book 3 -->
<div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-xl transform transition-all duration-700 origin-bottom-left -rotate-6 group-hover:-rotate-[12deg] group-hover:-translate-x-8 group-hover:-translate-y-4 overflow-hidden">
<img src="https://covers.openlibrary.org/b/isbn/9780060850524-L.jpg" class="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity" />
</div>
<!-- Book 2 -->
<div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-2xl transform transition-all duration-700 origin-bottom-right rotate-6 group-hover:rotate-[12deg] group-hover:translate-x-8 group-hover:-translate-y-4 overflow-hidden z-10">
<img src="https://covers.openlibrary.org/b/id/14828198-L.jpg" class="w-full h-full object-cover opacity-95 group-hover:opacity-100 transition-opacity" />
</div>
<!-- Book 1 (Front) -->
<div class="absolute inset-0 bg-card rounded-2xl border border-border shadow-2xl transform transition-all duration-700 origin-bottom-right rotate-12 group-hover:rotate-[25deg] group-hover:translate-x-16 group-hover:-translate-y-8 overflow-hidden z-20">
<img src="https://covers.openlibrary.org/b/isbn/9780743273565-L.jpg" class="w-full h-full object-cover" />
</div>
<div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10"></div>
</div>
</div>
<!-- How it Works -->
<section>
<div class="text-center mb-20">
<h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">The Process</h2>
<h3 class="text-5xl font-black text-main tracking-tight">How LibraryLuxe Works</h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 relative">
<div class="hidden md:block absolute top-1/2 left-0 w-full h-px bg-border -z-10"></div>
<!-- Step 1 -->
<div class="bg-body p-8 relative">
<div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">1</div>
<h4 class="text-xl font-bold text-main mb-4 uppercase">Create Account</h4>
<p class="text-muted text-sm leading-relaxed">Sign up in seconds and choose a membership plan that fits your reading habits.</p>
</div>
<!-- Step 2 -->
<div class="bg-body p-8 relative">
<div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">2</div>
<h4 class="text-xl font-bold text-main mb-4 uppercase">Borrow & Read</h4>
<p class="text-muted text-sm leading-relaxed">Browse thousands of titles and borrow them instantly. Physical books or digital access, your choice.</p>
</div>
<!-- Step 3 -->
<div class="bg-body p-8 relative">
<div class="w-16 h-16 bg-card border border-border rounded-2xl flex items-center justify-center text-2xl font-black text-primary mb-8 shadow-xl">3</div>
<h4 class="text-xl font-bold text-main mb-4 uppercase">Earn Rewards</h4>
<p class="text-muted text-sm leading-relaxed">Return books on time to earn loyalty points. Use points to upgrade your membership or unlock perks.</p>
</div>
</div>
</section>
<!-- Why Choose Us -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="bg-card p-12 rounded-[3rem] border border-border">
<h4 class="text-2xl font-black text-main mb-8 uppercase tracking-tight">Why Choose Us?</h4>
<div class="space-y-6">
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
</div>
<div>
<h5 class="font-bold text-main">Eco-Friendly Reading</h5>
<p class="text-sm text-muted">Our digital-first approach reduces paper waste and logistics footprint.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
</div>
<div>
<h5 class="font-bold text-main">Community Driven</h5>
<p class="text-sm text-muted">Join reading clubs and community events hosted right in our ecosystem.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-6 h-6 rounded-full bg-green-500/10 flex items-center justify-center text-green-500 mt-1">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
</div>
<div>
<h5 class="font-bold text-main">Smart Notifications</h5>
<p class="text-sm text-muted">Advanced Firebase integration keeps you informed about your library activity.</p>
</div>
</div>
</div>
</div>
<div class="bg-primary p-12 rounded-[3rem] text-white flex flex-col justify-center">
<h4 class="text-4xl font-black tracking-tighter mb-6 uppercase">Join the <br/> Revolution.</h4>
<p class="text-white/80 mb-8 leading-relaxed font-medium">We're not just a library; we're a community of life-long learners. Be part of our growing family today.</p>
<a href="/register" class="bg-white text-primary px-8 py-4 rounded-2xl font-black text-center hover:bg-white/90 transition-all uppercase tracking-widest text-sm">Join LibraryLuxe</a>
</div>
</div>
</div>
|