mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 17:29:45 +00:00
77dfa4f165
The legal brief on third-party trademark use says: avoid the WhatsApp teal/green palette and any visual treatment that could read as a WhatsApp/Meta product. Emerald-500 was used as the primary brand colour across hero, CTAs, sidebar, charts, badges, and the favicon — close enough in hue to WhatsApp's signature green to muddy the line. Swapping to Tailwind violet (which matches the Hostinger brand purple #7c3aed) makes the visual identity unambiguously ours. Scope: - Mechanical Tailwind class swap: emerald-* → violet-* across src/. - src/app/globals.css: --primary, --ring, --sidebar-primary, --sidebar-ring, --chart-1 oklch tokens swapped from emerald (oklch 0.696 0.17 162) to Hostinger-aligned violet (oklch 0.526 0.247 293). - src/app/icon.tsx: favicon background #10b981 → #7c3aed. - src/app/opengraph-image.tsx: badge bg, accent text, gradient. - src/components/landing/hero.tsx + cta-banner.tsx: radial-gradient hex. - src/components/landing/mock/analytics-mock.tsx: marketing chart line. - src/components/dashboard/conversations-chart.tsx + response-time-chart.tsx: "Outgoing" series colour. Distinguishable from "Incoming" blue at a glance; we can revisit the chart pair later for stronger colourblind contrast (separate concern). - README.md: license badge colour parameter. Out of scope: - src/components/settings/tag-manager.tsx still offers "Emerald" as one of the user-pickable contact-tag colours alongside Blue / Yellow / Red / etc. — that's a user data choice, not a brand mark. Contrast check: white text on #7c3aed measures ~4.78:1 (WCAG AA passing for normal body text). Violet-400 (#a78bfa) on slate-950 measures ~10:1 for accent text, well clear of AA. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import type { Metadata } from 'next'
|
|
import { notFound } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
|
import { listDocs, loadDoc } from '@/lib/docs/content'
|
|
|
|
interface DocPageProps {
|
|
params: Promise<{ slug: string }>
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
const pages = await listDocs()
|
|
return pages.map((p) => ({ slug: p.slug }))
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: DocPageProps): Promise<Metadata> {
|
|
const { slug } = await params
|
|
const doc = await loadDoc(slug)
|
|
if (!doc) return {}
|
|
return {
|
|
title: doc.title,
|
|
description: doc.description,
|
|
}
|
|
}
|
|
|
|
export default async function DocPage({ params }: DocPageProps) {
|
|
const { slug } = await params
|
|
const doc = await loadDoc(slug)
|
|
if (!doc) notFound()
|
|
|
|
const pages = await listDocs()
|
|
const idx = pages.findIndex((p) => p.slug === slug)
|
|
const prev = idx > 0 ? pages[idx - 1] : null
|
|
const next = idx >= 0 && idx < pages.length - 1 ? pages[idx + 1] : null
|
|
|
|
return (
|
|
<article className="mx-auto w-full max-w-3xl">
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-violet-400">
|
|
{doc.section}
|
|
</p>
|
|
<div
|
|
className="doc-prose mt-2"
|
|
dangerouslySetInnerHTML={{ __html: doc.html }}
|
|
/>
|
|
|
|
<nav
|
|
aria-label="Pagination"
|
|
className="mt-16 grid grid-cols-1 gap-3 border-t border-slate-800 pt-8 sm:grid-cols-2"
|
|
>
|
|
{prev ? (
|
|
<Link
|
|
href={`/docs/${prev.slug}`}
|
|
className="group flex flex-col gap-1 rounded-xl border border-slate-800 bg-slate-900/40 px-5 py-4 transition-colors hover:border-slate-700 hover:bg-slate-900/70"
|
|
>
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
|
<ArrowLeft className="h-3.5 w-3.5" />
|
|
Previous
|
|
</span>
|
|
<span className="text-sm font-semibold text-white">
|
|
{prev.title}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<span />
|
|
)}
|
|
{next ? (
|
|
<Link
|
|
href={`/docs/${next.slug}`}
|
|
className="group flex flex-col items-end gap-1 rounded-xl border border-slate-800 bg-slate-900/40 px-5 py-4 text-right transition-colors hover:border-slate-700 hover:bg-slate-900/70"
|
|
>
|
|
<span className="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
|
Next
|
|
<ArrowRight className="h-3.5 w-3.5" />
|
|
</span>
|
|
<span className="text-sm font-semibold text-white">
|
|
{next.title}
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<span />
|
|
)}
|
|
</nav>
|
|
</article>
|
|
)
|
|
}
|