mirror of
https://github.com/hanzoai/billing.git
synced 2026-10-30 18:46:54 +00:00
zooqueen
8a0d8db2a9
A focused input painted THREE affordances (brightened border + 3px halo +
2px outline). Root cause: two rules in @hanzo/design's @layer base (inlined
into @hanzo/ui's dist/styles.css) both compute to (0,1,0) because :where()
zeroes specificity, so the generic `:focus-visible{outline:2px}` overrode the
field rule's own `outline:none`. The one-place fix already shipped in
@hanzo/design 0.4.9 / @hanzo/ui 8.0.69+ — but @hanzo/ui inlines the base layer
at ITS build time, so the layer billing renders is set by its @hanzo/ui pin,
not its @hanzo/design pin. Billing sat at ui 8.0.47 (the double-ring layer).
Bump ui ^8.0.47->^8.0.72 + design ^0.5.1 + the gui/shell peers (caret already
permitted it; this raises the floor past the fix), and delete billing's own 16
focus overrides across 12 files — after the bump they double-up (and the coupon
input painted nothing without removing them). Verified in a browser: one 2px
ring at 2px offset on billing/console/app, light + dark, :focus-visible correct
(a mouse-clicked button doesn't ring). tsc clean, build green, gui-css-check
24/24, the --page workaround re-checked at 8.0.72.
147 lines
6.7 KiB
TypeScript
147 lines
6.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
|
|
export function ReferralSection() {
|
|
const [email, setEmail] = useState('')
|
|
const [sent, setSent] = useState(false)
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!email.trim()) return
|
|
// Optimistic — show success even if the backend endpoint isn't wired
|
|
setSent(true)
|
|
}
|
|
|
|
return (
|
|
<section style={{
|
|
maxWidth: '1100px',
|
|
margin: '0 auto',
|
|
padding: '0 24px 80px',
|
|
}}>
|
|
<div style={{
|
|
background: 'color-mix(in oklab, var(--color-text) 2.5%, transparent)',
|
|
border: '1px solid color-mix(in oklab, var(--color-text) 8%, transparent)',
|
|
borderRadius: '20px',
|
|
padding: '48px',
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
|
|
gap: '40px',
|
|
alignItems: 'center',
|
|
}}>
|
|
{/* Left: copy */}
|
|
<div>
|
|
<div style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: '6px',
|
|
background: 'rgba(251,191,36,0.08)',
|
|
border: '1px solid rgba(251,191,36,0.15)',
|
|
borderRadius: '99px',
|
|
padding: '3px 10px',
|
|
marginBottom: '16px',
|
|
fontSize: '11px',
|
|
fontWeight: 600,
|
|
color: 'rgba(251,191,36,0.85)',
|
|
letterSpacing: '0.05em',
|
|
textTransform: 'uppercase',
|
|
}}>
|
|
Affiliate Program
|
|
</div>
|
|
<h2 style={{ fontSize: '28px', fontWeight: 700, color: 'var(--color-text)', margin: '0 0 12px', letterSpacing: '-0.025em', lineHeight: 1.2 }}>
|
|
Refer and earn
|
|
</h2>
|
|
<p style={{ fontSize: '15px', color: 'color-mix(in oklab, var(--color-text) 45%, transparent)', margin: '0 0 24px', lineHeight: 1.6 }}>
|
|
Earn <strong style={{ color: 'color-mix(in oklab, var(--color-text) 75%, transparent)' }}>20% recurring commission</strong> for every customer you refer. No cap. Paid monthly to your Hanzo balance or bank.
|
|
</p>
|
|
<ul style={{ margin: '0 0 8px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
|
{[
|
|
'20% recurring commission on every payment',
|
|
'Real-time dashboard at hanzo.ai/affiliate',
|
|
'Payouts via balance credit or ACH/wire',
|
|
'60-day attribution window',
|
|
].map((item, i) => (
|
|
<li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', fontSize: '13px', color: 'color-mix(in oklab, var(--color-text) 55%, transparent)' }}>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: '1px', color: '#4ade80' }}>
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Right: sign-up form */}
|
|
<div style={{
|
|
background: 'color-mix(in oklab, var(--color-text) 3%, transparent)',
|
|
border: '1px solid color-mix(in oklab, var(--color-text) 8%, transparent)',
|
|
borderRadius: '14px',
|
|
padding: '28px',
|
|
}}>
|
|
{sent ? (
|
|
<div style={{ textAlign: 'center', padding: '16px 0' }}>
|
|
<div style={{ width: '48px', height: '48px', background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.2)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<polyline points="20 6 9 17 4 12" />
|
|
</svg>
|
|
</div>
|
|
<p style={{ fontSize: '15px', fontWeight: 600, color: 'var(--color-text)', margin: '0 0 6px' }}>You're on the list</p>
|
|
<p style={{ fontSize: '13px', color: 'color-mix(in oklab, var(--color-text) 40%, transparent)', margin: 0 }}>
|
|
We'll send your affiliate link and dashboard access to <strong style={{ color: 'color-mix(in oklab, var(--color-text) 70%, transparent)' }}>{email}</strong>.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
<div>
|
|
<p style={{ fontSize: '14px', fontWeight: 600, color: 'var(--color-text)', margin: '0 0 6px' }}>Join the affiliate program</p>
|
|
<p style={{ fontSize: '13px', color: 'color-mix(in oklab, var(--color-text) 40%, transparent)', margin: 0 }}>
|
|
Enter your email to get your unique referral link.
|
|
</p>
|
|
</div>
|
|
<input
|
|
type="email"
|
|
required
|
|
placeholder="[email protected]"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
style={{
|
|
background: 'color-mix(in oklab, var(--color-text) 4%, transparent)',
|
|
border: '1px solid color-mix(in oklab, var(--color-text) 10%, transparent)',
|
|
borderRadius: '8px',
|
|
padding: '10px 14px',
|
|
color: 'var(--color-text)',
|
|
fontSize: '14px',
|
|
width: '100%',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
style={{
|
|
background: 'var(--color-brand)',
|
|
color: 'var(--color-brand-foreground)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
padding: '11px 16px',
|
|
fontSize: '14px',
|
|
fontWeight: 600,
|
|
cursor: 'pointer',
|
|
transition: 'opacity 0.15s',
|
|
}}
|
|
onMouseEnter={(e) => { (e.currentTarget as HTMLButtonElement).style.opacity = '0.85' }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLButtonElement).style.opacity = '1' }}
|
|
>
|
|
Get my referral link
|
|
</button>
|
|
<p style={{ fontSize: '11px', color: 'color-mix(in oklab, var(--color-text) 25%, transparent)', margin: 0, textAlign: 'center' }}>
|
|
By joining you agree to the{' '}
|
|
<a href="https://hanzo.ai/legal/affiliate" style={{ color: 'color-mix(in oklab, var(--color-text) 40%, transparent)', textDecoration: 'underline' }}>affiliate terms</a>.
|
|
</p>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|