Skip to content

Commit c9c0582

Browse files
phucbmphucbm
committed
feat(docs): add product hunt badges
1 parent c2aed41 commit c9c0582

2 files changed

Lines changed: 63 additions & 40 deletions

File tree

‎website/src/components/CTABanner.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { GITHUB, RELEASES } from '../constants'
2-
import { useLanguage } from '../contexts/language'
1+
import {GITHUB, RELEASES} from '../constants'
2+
import {useLanguage} from '../contexts/language'
33

44
export default function CTABanner() {
55
const { t } = useLanguage()
@@ -24,9 +24,20 @@ export default function CTABanner() {
2424
className="font-mono font-bold text-xs tracking-[0.08em] uppercase no-underline bg-transparent text-paper py-[18px] px-8 border-2 border-paper/50 transition-colors duration-100 hover:bg-paper/[0.12] hover:border-paper"
2525
>{t.cta.githubBtn}</a>
2626
</div>
27-
<a href="https://launch.j2team.dev/products/claude-usage-monitor" target="_blank" rel="noopener noreferrer" className="inline-block self-start">
28-
<img src="https://launch.j2team.dev/badge/claude-usage-monitor/light" alt="Claude Usage Monitor - Launched on J2TEAM Launch" width="200" height="43" loading="lazy" />
29-
</a>
27+
<div className="flex items-start gap-2 flex-wrap mt-4">
28+
<a className="inline-block"
29+
href="https://www.producthunt.com/products/claude-usage-monitor-3?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-claude-usage-monitor-3"
30+
target="_blank" rel="noopener noreferrer"><img
31+
alt="Claude Usage Monitor - Multiple Claude.ai accounts tracked from your Mac menu bar. | Product Hunt"
32+
width="250" height="54"
33+
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1136430&amp;theme=neutral&amp;t=1777628906554"/></a>
34+
<a href="https://launch.j2team.dev/products/claude-usage-monitor" target="_blank"
35+
rel="noopener noreferrer" className="inline-block">
36+
<img src="https://launch.j2team.dev/badge/claude-usage-monitor/neutral"
37+
alt="Claude Usage Monitor - Launched on J2TEAM Launch" width="200" height="43"
38+
loading="lazy"/>
39+
</a>
40+
</div>
3041
</div>
3142
</div>
3243
</section>

‎website/src/components/Hero.tsx‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { useEffect, useState } from 'react'
2-
import { GITHUB, RELEASES } from '../constants'
3-
import { useLanguage } from '../contexts/language'
1+
import {useEffect, useState} from 'react'
2+
import {GITHUB, RELEASES} from '../constants'
3+
import {useLanguage} from '../contexts/language'
44
import RingsMockup from './RingsMockup'
55

66
function randomTime() {
@@ -31,41 +31,53 @@ export default function Hero() {
3131
<div className="grid grid-cols-12 gap-6 lg:gap-8 items-end py-[40px] lg:pt-16 lg:pb-14">
3232

3333
{/* Text */}
34-
<div className="col-span-12 lg:col-span-8">
35-
<p className="font-mono text-[11px] font-bold tracking-[0.15em] uppercase text-primary mb-[18px]">
36-
{t.hero.badge}
37-
</p>
38-
<h1 className="font-display text-[clamp(56px,9vw,116px)] leading-[0.88] uppercase text-ink mb-8">
39-
CLAUDE<br />USAGE<br /><span className="text-primary">MONITOR</span>
40-
</h1>
41-
<p className="font-mono text-sm leading-[1.75] text-[#3A3A3A] max-w-[460px] mb-10"
42-
dangerouslySetInnerHTML={{ __html: t.hero.description }}
43-
/>
44-
<div className="flex gap-[10px] flex-wrap">
45-
<a href={RELEASES} target="_blank" rel="noopener noreferrer"
46-
className="inline-block bg-primary text-white border-2 border-primary font-mono font-bold uppercase tracking-[0.08em] py-[15px] px-8 text-xs no-underline transition-colors duration-100 hover:bg-ink hover:border-ink"
47-
>{t.hero.downloadBtn}</a>
48-
<a href={GITHUB} target="_blank" rel="noopener noreferrer"
49-
className="inline-block bg-transparent text-ink border-2 border-ink font-mono font-bold uppercase tracking-[0.08em] py-[15px] px-8 text-xs no-underline transition-colors duration-100 hover:bg-ink hover:text-paper"
50-
>{t.hero.githubBtn}</a>
34+
<div className="col-span-12 lg:col-span-8">
35+
<p className="font-mono text-[11px] font-bold tracking-[0.15em] uppercase text-primary mb-[18px]">
36+
{t.hero.badge}
37+
</p>
38+
<h1 className="font-display text-[clamp(56px,9vw,116px)] leading-[0.88] uppercase text-ink mb-8">
39+
CLAUDE<br/>USAGE<br/><span className="text-primary">MONITOR</span>
40+
</h1>
41+
<p className="font-mono text-sm leading-[1.75] text-[#3A3A3A] max-w-[460px] mb-10"
42+
dangerouslySetInnerHTML={{__html: t.hero.description}}
43+
/>
44+
<div className="flex gap-[10px] flex-wrap">
45+
<a href={RELEASES} target="_blank" rel="noopener noreferrer"
46+
className="inline-block bg-primary text-white border-2 border-primary font-mono font-bold uppercase tracking-[0.08em] py-[15px] px-8 text-xs no-underline transition-colors duration-100 hover:bg-ink hover:border-ink"
47+
>{t.hero.downloadBtn}</a>
48+
<a href={GITHUB} target="_blank" rel="noopener noreferrer"
49+
className="inline-block bg-transparent text-ink border-2 border-ink font-mono font-bold uppercase tracking-[0.08em] py-[15px] px-8 text-xs no-underline transition-colors duration-100 hover:bg-ink hover:text-paper"
50+
>{t.hero.githubBtn}</a>
51+
</div>
52+
<p className="mt-[14px] font-mono text-[11px] text-muted tracking-[0.06em]">
53+
{t.hero.meta}
54+
</p>
55+
<p className="flex items-start gap-2 flex-wrap mt-4">
56+
<a className="inline-block"
57+
href="https://www.producthunt.com/products/claude-usage-monitor-3?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-claude-usage-monitor-3"
58+
target="_blank" rel="noopener noreferrer"><img
59+
alt="Claude Usage Monitor - Multiple Claude.ai accounts tracked from your Mac menu bar. | Product Hunt"
60+
width="250" height="54"
61+
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1136430&amp;theme=neutral&amp;t=1777628906554"/></a>
62+
<a href="https://launch.j2team.dev/products/claude-usage-monitor" target="_blank"
63+
rel="noopener noreferrer" className="inline-block">
64+
<img src="https://launch.j2team.dev/badge/claude-usage-monitor/neutral"
65+
alt="Claude Usage Monitor - Launched on J2TEAM Launch" width="200" height="43"
66+
loading="lazy"/>
67+
</a>
68+
</p>
5169
</div>
52-
<p className="mt-[14px] font-mono text-[11px] text-muted tracking-[0.06em]">
53-
{t.hero.meta}
54-
</p>
55-
<a href="https://launch.j2team.dev/products/claude-usage-monitor" target="_blank" rel="noopener noreferrer" className="inline-block mt-4">
56-
<img src="https://launch.j2team.dev/badge/claude-usage-monitor/neutral" alt="Claude Usage Monitor - Launched on J2TEAM Launch" width="200" height="43" loading="lazy" />
57-
</a>
58-
</div>
5970

60-
{/* Mockup panel */}
61-
<div className="mockup-panel col-span-12 lg:col-span-4 flex flex-col">
71+
{/* Mockup panel */}
72+
<div className="mockup-panel col-span-12 lg:col-span-4 flex flex-col">
6273

63-
{/* Mockup menu bar */}
64-
<div className="w-full h-[26px] bg-ink/90 flex items-center justify-between px-3 mb-[-2px] border-2 border-ink">
65-
{/* Left: apple + app names */}
66-
<div className="flex items-center gap-3">
67-
<span className="text-white/80 text-[11px]">&#63743;</span>
68-
<span className="font-mono text-[10px] font-bold text-white/60 tracking-wide">Finder</span>
74+
{/* Mockup menu bar */}
75+
<div
76+
className="w-full h-[26px] bg-ink/90 flex items-center justify-between px-3 mb-[-2px] border-2 border-ink">
77+
{/* Left: apple + app names */}
78+
<div className="flex items-center gap-3">
79+
<span className="text-white/80 text-[11px]">&#63743;</span>
80+
<span className="font-mono text-[10px] font-bold text-white/60 tracking-wide">Finder</span>
6981
</div>
7082
{/* Right: badge + clock */}
7183
<div className="flex items-center gap-3">

0 commit comments

Comments
 (0)