feat: ui polish, docs, api hardening, and common pages
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
@extends('site.layout')
|
||||
|
||||
@section('title', 'Support - Dewemoji')
|
||||
@section('meta_description', 'Get help with Dewemoji installation, Pro activation, API usage, billing, and troubleshooting.')
|
||||
@section('meta_description', 'Get help with Dewemoji installation, Pro activation, API usage, billing, and common troubleshooting.')
|
||||
|
||||
@push('jsonld')
|
||||
<script type="application/ld+json">
|
||||
@@ -18,35 +18,62 @@
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-10">
|
||||
<h1 class="font-display text-4xl font-bold text-center">Support</h1>
|
||||
<p class="text-gray-400 text-center mt-2">Need help with Dewemoji? We got you.</p>
|
||||
<div class="flex h-screen w-full">
|
||||
<aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel 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-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20 shrink-0">
|
||||
<img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
|
||||
</div>
|
||||
<h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
|
||||
</div>
|
||||
<nav class="space-y-1">
|
||||
<a href="{{ route('home') }}" 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="layout-grid" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Discover</span></a>
|
||||
<a href="{{ route('api-docs') }}" 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="book-open" class="w-5 h-5"></i><span class="text-sm hidden lg:block">API Docs</span></a>
|
||||
<a href="{{ route('pricing') }}" 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="badge-dollar-sign" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Pricing</span></a>
|
||||
<a href="{{ route('support') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-brand-sun border border-white/5 transition-all"><i data-lucide="life-buoy" class="w-5 h-5"></i><span class="text-sm hidden lg:block">Support</span></a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('privacy') }}" 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="text-sm hidden lg:block">Privacy</span></a>
|
||||
<a href="{{ route('terms') }}" 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="text-sm hidden lg:block">Terms</span></a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="grid gap-4 mt-8 md:grid-cols-2">
|
||||
<section class="glass-card rounded-2xl p-5">
|
||||
<h2 class="font-semibold">Install & activate</h2>
|
||||
<ol class="mt-3 list-decimal pl-5 text-sm text-gray-300 space-y-1">
|
||||
<li>Install from Chrome Web Store.</li>
|
||||
<li>Open Dewemoji settings.</li>
|
||||
<li>Paste key in Pro tab and activate.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
|
||||
<header class="glass-header px-6 py-5 shrink-0">
|
||||
<div class="text-[11px] uppercase tracking-wider text-gray-500 mb-1">Public / Support</div>
|
||||
<h1 class="font-display text-2xl md:text-3xl font-bold">Support Center</h1>
|
||||
</header>
|
||||
|
||||
<section class="glass-card rounded-2xl p-5">
|
||||
<h2 class="font-semibold">API quick start</h2>
|
||||
<pre class="mt-3 text-xs overflow-x-auto bg-black/30 rounded-lg p-3"><code>curl -H "Authorization: Bearer YOUR_LICENSE_KEY" \
|
||||
<div class="flex-1 overflow-y-auto p-6 md:p-10">
|
||||
<div class="max-w-5xl mx-auto grid gap-4 md:grid-cols-2">
|
||||
<section class="glass-card rounded-2xl p-5">
|
||||
<h2 class="font-semibold mb-2">Install & activate</h2>
|
||||
<ol class="list-decimal pl-5 text-sm text-gray-300 space-y-1">
|
||||
<li>Install Dewemoji extension.</li>
|
||||
<li>Open settings and go to Pro tab.</li>
|
||||
<li>Paste your license key and activate.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section class="glass-card rounded-2xl p-5">
|
||||
<h2 class="font-semibold mb-2">API quick start</h2>
|
||||
<pre class="text-xs overflow-x-auto bg-black/30 rounded-lg p-3"><code>curl -H "Authorization: Bearer YOUR_LICENSE_KEY" \
|
||||
"{{ url('/v1/emojis') }}?q=love&limit=20"</code></pre>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="glass-card rounded-2xl p-5 md:col-span-2">
|
||||
<h2 class="font-semibold">Common issues</h2>
|
||||
<ul class="mt-3 list-disc pl-5 text-sm text-gray-300 space-y-1">
|
||||
<li><strong>License limit reached:</strong> deactivate old profile first.</li>
|
||||
<li><strong>API 401 invalid key:</strong> ensure key is valid and active.</li>
|
||||
<li><strong>Insert not working:</strong> click into input and retry.</li>
|
||||
</ul>
|
||||
<p class="mt-4 text-sm text-gray-400">Still stuck? Email <a class="text-brand-ocean hover:underline" href="mailto:hello@dewemoji.com">hello@dewemoji.com</a>.</p>
|
||||
</section>
|
||||
</div>
|
||||
<section class="glass-card rounded-2xl p-5 md:col-span-2">
|
||||
<h2 class="font-semibold mb-2">Common issues</h2>
|
||||
<ul class="list-disc pl-5 text-sm text-gray-300 space-y-1">
|
||||
<li><strong>License limit reached:</strong> deactivate old profile first.</li>
|
||||
<li><strong>API 401 invalid key:</strong> ensure key is active and valid.</li>
|
||||
<li><strong>Insert not working:</strong> focus target input and retry.</li>
|
||||
</ul>
|
||||
<p class="mt-4 text-sm text-gray-400">Need direct help? Email <a class="text-brand-oceanSoft hover:text-white" href="mailto:hello@dewemoji.com">hello@dewemoji.com</a>.</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user