Spaces:
Sleeping
Sleeping
| @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> | |