feat: phase 3 website pages on v1 api

2026-02-03 22:37:52 +07:00
parent 8816522ddd
commit b1aefa6b3d
13 changed files with 563 additions and 4 deletions
--- a/app/resources/views/site/layout.blade.php
+++ b/app/resources/views/site/layout.blade.php
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>@yield('title', 'Dewemoji')</title>
+    <style>
+        :root {
+            --bg: #f7fafc;
+            --surface: #ffffff;
+            --fg: #0f172a;
+            --muted: #64748b;
+            --border: #e2e8f0;
+            --brand: #2563eb;
+        }
+        * { 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%);
+        }
+        .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);
+        }
+        .topbar .row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 16px;
+        }
+        .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; }
+        }
+    </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>
+
+    <main class="wrap">
+        @yield('content')
+    </main>
+
+    <footer class="footer wrap">
+        <p>&copy; {{ now()->year }} Dewemoji.</p>
+    </footer>
+    @stack('scripts')
+</body>
+</html>
+