feat: refine branded ui and mobile navigation
This commit is contained in:
Dwindi Ramadhana
@@ -1,92 +1,93 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>@yield('title', '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: {
|
||||
brand: {
|
||||
sun: '#fcb735',
|
||||
sunSoft: '#ffda9c',
|
||||
ocean: '#2053ff',
|
||||
oceanSoft: '#356cf0',
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
float: {
|
||||
'0%, 100%': { transform: 'translateY(0)' },
|
||||
'50%': { transform: 'translateY(-10px)' },
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f7fafc;
|
||||
--surface: #ffffff;
|
||||
--fg: #0f172a;
|
||||
--muted: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--brand: #2563eb;
|
||||
::-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: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: var(--fg);
|
||||
background: radial-gradient(circle at 10% 0%, #dbeafe, #f8fafc 32%, #f8fafc 100%);
|
||||
.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);
|
||||
}
|
||||
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px; }
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(248, 250, 252, 0.82);
|
||||
border-bottom: 1px solid var(--border);
|
||||
.glass-card:hover {
|
||||
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border-color: rgba(53, 108, 240, 0.35);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 40px -10px rgba(32, 83, 255, 0.2);
|
||||
}
|
||||
.topbar .row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #fcb735, #2053ff);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.brand { font-weight: 700; text-decoration: none; color: var(--fg); }
|
||||
.nav { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
|
||||
.nav a:hover { color: var(--brand); }
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
.footer {
|
||||
margin-top: 36px;
|
||||
border-top: 1px solid var(--border);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
code {
|
||||
background: #eef2ff;
|
||||
color: #1e3a8a;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.wrap { padding: 14px; }
|
||||
.topbar .row { flex-direction: column; align-items: flex-start; }
|
||||
.emoji-name-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
line-height: 1.1;
|
||||
max-height: 2.2em;
|
||||
}
|
||||
</style>
|
||||
@stack('head')
|
||||
</head>
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<div class="wrap row">
|
||||
<a class="brand" href="{{ route('home') }}">Dewemoji</a>
|
||||
<nav class="nav">
|
||||
<a href="{{ route('home') }}">Emoji</a>
|
||||
<a href="{{ route('api-docs') }}">API Docs</a>
|
||||
<a href="{{ route('pricing') }}">Pricing</a>
|
||||
<a href="{{ route('privacy') }}">Privacy</a>
|
||||
<a href="{{ route('terms') }}">Terms</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<body class="bg-[#050505] text-white min-h-screen selection:bg-brand-ocean selection:text-white">
|
||||
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-brand-ocean/20 rounded-full blur-[120px] animate-pulse-slow"></div>
|
||||
<div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-blue-900/10 rounded-full blur-[120px]"></div>
|
||||
</div>
|
||||
|
||||
<main class="wrap">
|
||||
@yield('content')
|
||||
</main>
|
||||
@yield('content')
|
||||
|
||||
<footer class="footer wrap">
|
||||
<p>© {{ now()->year }} Dewemoji.</p>
|
||||
</footer>
|
||||
<script>lucide.createIcons();</script>
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user