mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 09:19:51 +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>
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { Plug, Users, Zap } from 'lucide-react'
|
|
import { Section, SectionHeader } from './section'
|
|
|
|
const STEPS = [
|
|
{
|
|
num: '01',
|
|
icon: Plug,
|
|
title: 'Connect your WhatsApp number',
|
|
body:
|
|
'Paste your phone number ID and access token from Meta. Works with any Meta-approved WhatsApp Business API provider.',
|
|
},
|
|
{
|
|
num: '02',
|
|
icon: Users,
|
|
title: 'Bring in your contacts',
|
|
body:
|
|
'Import a CSV, or let incoming messages build your contact list automatically. Tags and custom fields are ready from day one.',
|
|
},
|
|
{
|
|
num: '03',
|
|
icon: Zap,
|
|
title: 'Reply, automate, measure',
|
|
body:
|
|
'Use the shared inbox with your team, set up flows for repeat work, and track what is actually moving the needle in your analytics.',
|
|
},
|
|
]
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<Section id="how-it-works">
|
|
<SectionHeader
|
|
eyebrow="How it works"
|
|
title="Live in under 30 minutes"
|
|
description="Most teams are up and running before their first coffee refill. No onboarding calls required."
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
{STEPS.map((s) => {
|
|
const Icon = s.icon
|
|
return (
|
|
<div
|
|
key={s.num}
|
|
className="relative rounded-xl border border-slate-800 bg-slate-900/40 p-6"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10 text-violet-400">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<span
|
|
className="text-xl font-bold tracking-tight text-slate-800 tabular-nums"
|
|
aria-hidden
|
|
>
|
|
{s.num}
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-4 text-base font-semibold text-white">
|
|
{s.title}
|
|
</h3>
|
|
<p className="mt-1.5 text-sm leading-relaxed text-slate-400">
|
|
{s.body}
|
|
</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|