dwindown/dewemoji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine branded ui and mobile navigation

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-04 00:15:56 +07:00
parent b1aefa6b3d
commit ccec406d6d
11 changed files with 2096 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
references/pricing.html Normal file
View File

@@ -0,0 +1,293 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing - Dewemoji</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif'],
},
colors: {
dew: {
50: '#f7fee7',
400: '#a3e635',
500: '#84cc16',
900: '#14532d',
950: '#020617',
},
},
animation: {
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
}
}
};
</script>
<style>
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
.glass-panel {
background: rgba(20, 20, 23, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-header {
background: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
z-index: 40;
}
.glass-card {
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
border-color: rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
}
.glass-card-highlight {
background: linear-gradient(145deg, rgba(20, 83, 45, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid rgba(163, 230, 53, 0.3);
box-shadow: 0 0 30px rgba(163, 230, 53, 0.1);
}
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-[#050505] text-white min-h-screen selection:bg-dew-500 selection:text-black overflow-hidden">
<!-- Ambient Background -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] right-[15%] w-[600px] h-[600px] bg-dew-900/10 rounded-full blur-[120px] animate-pulse-slow"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px]"></div>
</div>
<div class="flex h-screen w-full">
<!-- LEFT SIDEBAR: Consistent Navigation -->
<aside class="w-20 lg:w-64 h-full glass-panel flex flex-col justify-between p-4 z-50 shrink-0">
<div>
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20 shrink-0">
<span class="text-2xl">💧</span>
</div>
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
</div>
<nav class="space-y-1">
<a href="home.html" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
<i data-lucide="layout-grid" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Discover</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
<i data-lucide="book-open" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">API Docs</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all group">
<i data-lucide="badge-dollar-sign" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Pricing</span>
</a>
</nav>
</div>
<div class="space-y-1">
<a href="common_page.html" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="shield-check" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Privacy</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="file-text" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Terms</span>
</a>
</div>
</aside>
<!-- MAIN PANEL -->
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
<!-- Minimal Header -->
<header class="glass-header px-8 py-6 shrink-0 flex justify-end gap-4">
<div class="flex items-center gap-2 text-sm text-gray-400">
<span>Currency:</span>
<select class="bg-transparent text-white focus:outline-none font-bold">
<option>USD</option>
<option>EUR</option>
<option>IDR</option>
</select>
</div>
<div class="w-px h-5 bg-white/10"></div>
<button class="text-sm font-bold text-dew-400 hover:text-white transition-colors">Restore Purchases</button>
</header>
<!-- Scrollable Content Area -->
<div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
<div class="max-w-5xl mx-auto flex flex-col items-center">
<!-- Pricing Hero -->
<div class="text-center mb-16 max-w-2xl">
<h1 class="font-display text-4xl md:text-5xl font-bold mb-4">
Supercharge your <span class="text-gradient">Workflow</span>
</h1>
<p class="text-gray-400 text-lg">
Get unlimited access to the Semantic Engine, API keys, and offline syncing.
</p>
</div>
<!-- Toggle Switch -->
<div class="flex items-center gap-4 mb-12 bg-white/5 p-1.5 rounded-full border border-white/5">
<button class="px-6 py-2 rounded-full bg-white/10 text-white font-medium shadow-sm transition-all">Monthly</button>
<button class="px-6 py-2 rounded-full text-gray-400 hover:text-white transition-all relative">
Yearly
<span class="absolute -top-3 -right-6 text-[10px] bg-dew-500 text-black px-1.5 py-0.5 rounded font-bold">-20%</span>
</button>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full mb-20">
<!-- Free Tier -->
<div class="glass-card rounded-3xl p-8 flex flex-col">
<div class="mb-4">
<h3 class="font-display text-xl font-bold">Starter</h3>
<p class="text-sm text-gray-500">For casual emoji users.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Basic Search (Name only)
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Copy to Clipboard
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Standard Categories
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Current Plan</button>
</div>
<!-- Pro Tier (Highlighted) -->
<div class="glass-card-highlight rounded-3xl p-8 flex flex-col relative transform md:-translate-y-4">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-dew-500 text-black text-xs font-bold px-3 py-1 rounded-full shadow-lg shadow-dew-500/40">
MOST POPULAR
</div>
<div class="mb-4">
<h3 class="font-display text-xl font-bold text-dew-400">Developer</h3>
<p class="text-sm text-gray-400">Power users & builders.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$9</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
Semantic Search Engine
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
API Access (10k req/mo)
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
Offline Database Sync
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
JSON / CSV Export
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-dew-500 hover:bg-dew-400 text-black font-bold shadow-lg shadow-dew-500/20 transition-all">Upgrade Now</button>
</div>
<!-- Team Tier -->
<div class="glass-card rounded-3xl p-8 flex flex-col">
<div class="mb-4">
<h3 class="font-display text-xl font-bold">Team</h3>
<p class="text-sm text-gray-500">For shared assets.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$29</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Everything in Developer
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Shared "Favorites" Collections
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Unlimited API Access
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Priority Support
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Contact Sales</button>
</div>
</div>
<!-- FAQ Section -->
<div class="w-full max-w-3xl">
<h4 class="font-display text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h4>
<div class="space-y-4">
<!-- Q1 -->
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
<h5 class="font-bold mb-2 flex justify-between">
Do I need an API key for the desktop app?
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
</h5>
<p class="text-sm text-gray-400">No, the basic desktop app works out of the box. The API key is only needed if you want to integrate Dewemoji into your own applications or CI/CD pipelines.</p>
</div>
<!-- Q2 -->
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
<h5 class="font-bold mb-2 flex justify-between">
Does "Offline Sync" work on NativePHP?
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
</h5>
<p class="text-sm text-gray-400">Yes! The Developer plan downloads the entire semantic database (SQLite format) to your local machine, so search works instantly even without internet.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-20 py-10 border-t border-white/5 text-center text-xs text-gray-600 w-full">
Prices are in USD. VAT may apply.
</div>
</div>
</div>
</main>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>