Spaces:
Sleeping
Sleeping
File size: 13,525 Bytes
d8a7fc4 ec76476 d8a7fc4 ec76476 d8a7fc4 ec76476 d8a7fc4 ec76476 d8a7fc4 ec76476 | 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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 | @page "/features"
<div class="max-w-7xl mx-auto py-24 px-8 animate-fade space-y-32">
<div class="text-center">
<h2 class="text-xs font-black text-primary uppercase tracking-[0.3em] mb-4">Deep Dive</h2>
<h1 class="text-7xl font-black tracking-tighter text-main mb-8 uppercase leading-[0.9]">Advanced <br /> <span class="text-primary italic">Capabilities.</span></h1>
<p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
LibraryLuxe is built on a foundation of modern technology to provide you with a seamless and rewarding experience.
</p>
</div>
<!-- Feature Block 1: Loyalty -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
<div class="order-2 lg:order-1">
<div class="relative w-full max-w-sm mx-auto aspect-[4/5] group perspective-1000">
<!-- Back Card (Reward 2) -->
<div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-xl flex flex-col transform transition-all duration-500 origin-bottom-left -rotate-6 group-hover:-rotate-12 group-hover:-translate-x-8 group-hover:-translate-y-4">
<div class="flex justify-between items-start mb-6">
<div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
</div>
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">1100 pts</span>
</div>
<h3 class="text-xl font-bold text-main mb-2">Free Yearly Basic Membership</h3>
<p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
<button disabled class="w-full py-3 rounded-xl font-bold bg-body text-muted border border-border cursor-not-allowed">
Claim Reward
</button>
</div>
<!-- Front Card (Reward 1) -->
<div class="absolute inset-0 bg-card rounded-3xl border border-border p-8 shadow-2xl flex flex-col transform transition-all duration-500 origin-bottom-right rotate-6 group-hover:rotate-12 group-hover:translate-x-8 group-hover:-translate-y-2 z-10">
<div class="flex justify-between items-start mb-6">
<div class="w-12 h-12 bg-body rounded-xl flex items-center justify-center border border-border">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
</div>
<span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs font-black">100 pts</span>
</div>
<h3 class="text-xl font-bold text-main mb-2">Free Monthly Basic Membership</h3>
<p class="text-sm text-muted leading-relaxed mb-6 flex-grow">Maxed books: 3 <br/>Maxed borrowing days: 14</p>
<button disabled class="w-full py-3 rounded-xl font-bold bg-primary text-white shadow-lg shadow-primary/20 opacity-90 cursor-default">
Claim Reward
</button>
</div>
</div>
</div>
<div class="order-1 lg:order-2">
<h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Smart Rewards <br/> Ecosystem</h3>
<p class="text-lg text-muted leading-relaxed mb-8">
Our proprietary loyalty system rewards positive reading habits. By gamifying the library experience, we've increased on-time returns by 40% and overall community engagement by 60%.
</p>
<ul class="space-y-4">
<li class="flex items-center gap-4">
<div class="w-2 h-2 rounded-full bg-primary"></div>
<span class="font-bold text-main">Point Multipliers for Gold Members</span>
</li>
<li class="flex items-center gap-4">
<div class="w-2 h-2 rounded-full bg-primary"></div>
<span class="font-bold text-main">Milestone Badges & Achievements</span>
</li>
<li class="flex items-center gap-4">
<div class="w-2 h-2 rounded-full bg-primary"></div>
<span class="font-bold text-main">Internal Rewards Marketplace</span>
</li>
</ul>
</div>
</div>
<!-- Feature Block 2: Notifications -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
<div>
<h3 class="text-4xl font-black text-main mb-6 uppercase tracking-tight">Instant Alerts <br/> via Firebase</h3>
<p class="text-lg text-muted leading-relaxed mb-8">
Stay connected with real-time push notifications. Whether it's a book you've wishlisted becoming available or a reminder about a due date, we ensure you never miss a beat.
</p>
<div class="grid grid-cols-2 gap-6">
<div class="p-6 bg-card rounded-2xl border border-border">
<h5 class="font-black text-primary text-xs uppercase mb-2">Back in Stock</h5>
<p class="text-xs text-muted">Get alerted when high-demand titles return.</p>
</div>
<div class="p-6 bg-card rounded-2xl border border-border">
<h5 class="font-black text-primary text-xs uppercase mb-2">Due Soon</h5>
<p class="text-xs text-muted">Gentle reminders 48h before expiry.</p>
</div>
</div>
</div>
<div class="aspect-video rounded-[3rem] shadow-2xl relative overflow-hidden group flex flex-col items-center justify-center cursor-pointer bg-card"
@onmouseenter="HandleNotifHover" @onmouseleave="HandleNotifLeave">
<div class="absolute inset-0 bg-primary opacity-5"></div>
<!-- Bell Icon -->
<div class="relative z-10 transition-transform duration-500 group-hover:-translate-y-8">
<div class="relative origin-top animate-vibrate group-hover:animate-none group-hover:scale-105 transition-all text-primary">
<svg class="w-20 h-20 drop-shadow-xl" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
<!-- Badge -->
<span class="absolute top-1 right-2 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs font-black shadow-md border-2 border-card">1</span>
</div>
</div>
<!-- Notification Card (hidden by default, slides up on hover) -->
<div class="absolute bottom-0 left-0 w-full p-8 transform translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500 z-20">
<div class="bg-body rounded-2xl p-6 shadow-2xl relative overflow-hidden">
@if (_isNotifHovered)
{
<h4 class="text-primary font-black text-xl mb-2">Book Available!</h4>
<p class="text-sm text-main font-medium leading-relaxed min-h-[40px]">@_notificationText<span class="inline-block w-1.5 h-4 bg-primary ml-1 animate-pulse"></span></p>
}
</div>
</div>
</div>
</div>
<!-- Recommendation System -->
<section class="bg-card p-20 rounded-[4rem] border border-border text-center">
<h3 class="text-4xl font-black text-main mb-8 uppercase tracking-tight italic">Personalized Recommendations</h3>
<p class="text-xl text-muted max-w-3xl mx-auto mb-12">
Our intelligent algorithms analyze your reading history and preferences to suggest your next favorite book. The more you read, the smarter it gets.
</p>
<div class="flex flex-wrap justify-center gap-8 md:gap-12 mt-8">
<div class="flex flex-col items-center group cursor-pointer w-48">
<div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
<img src="https://covers.openlibrary.org/b/isbn/9780743273565-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
</div>
<div class="h-12 mt-6 flex items-start justify-center">
<span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Because you liked Productivity books</span>
</div>
</div>
<div class="flex flex-col items-center group cursor-pointer w-48">
<div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
<img src="https://covers.openlibrary.org/b/id/14828198-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
</div>
<div class="h-12 mt-6 flex items-start justify-center">
<span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Trending among readers</span>
</div>
</div>
<div class="flex flex-col items-center group cursor-pointer w-48">
<div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
<img src="https://covers.openlibrary.org/b/isbn/9780060850524-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
</div>
<div class="h-12 mt-6 flex items-start justify-center">
<span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Popular this week</span>
</div>
</div>
<div class="flex flex-col items-center group cursor-pointer w-48">
<div class="w-40 h-56 rounded-2xl border border-border relative overflow-hidden shadow-lg transition-all duration-500 group-hover:-translate-y-4 group-hover:shadow-2xl group-hover:border-primary/50">
<img src="https://covers.openlibrary.org/b/isbn/9780062316097-L.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
</div>
<div class="h-12 mt-6 flex items-start justify-center">
<span class="text-primary text-sm font-black text-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 leading-tight">Based on your recent reads</span>
</div>
</div>
</div>
</section>
</div>
<style>
@@keyframes vibrate {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(6deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-6deg); }
}
.animate-vibrate {
animation: vibrate 0.15s linear infinite;
transform-origin: top center;
}
</style>
@code {
private bool _isNotifHovered = false;
private string _notificationText = "";
private string _fullText = "Good news! Your wished book is now available for borrowing. Grab it before someone else does!";
private async Task HandleNotifHover()
{
if (_isNotifHovered) return;
_isNotifHovered = true;
_notificationText = "";
await Task.Delay(300); // Wait for the card to slide up
for (int i = 0; i < _fullText.Length; i++)
{
if (!_isNotifHovered) break; // Stop if mouse left
_notificationText += _fullText[i];
StateHasChanged();
await Task.Delay(25); // Typing speed
}
}
private void HandleNotifLeave()
{
_isNotifHovered = false;
_notificationText = "";
}
}
|