From 9028b742f8f764217ccb04335d94c88966cbbb71 Mon Sep 17 00:00:00 2001 From: kaitranntt Date: Wed, 17 Dec 2025 18:57:12 -0500 Subject: [PATCH] feat(ui): add ClaudeKit badge and Sponsor buttons to navbar - replace "CCS Config" header text with two promotional buttons - add ClaudeKit badge with logo linking to claudekit.cc - add Sponsor button with heart icon linking to GitHub Sponsors - both buttons feature hover effects and consistent styling - fix dark theme hover text visibility --- ui/public/logos/claudekit-logo.png | Bin 0 -> 3184 bytes ui/src/components/claudekit-badge.tsx | 49 ++++++++++++++++++++++++++ ui/src/components/layout.tsx | 7 +++- ui/src/components/sponsor-button.tsx | 46 ++++++++++++++++++++++++ 4 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 ui/public/logos/claudekit-logo.png create mode 100644 ui/src/components/claudekit-badge.tsx create mode 100644 ui/src/components/sponsor-button.tsx diff --git a/ui/public/logos/claudekit-logo.png b/ui/public/logos/claudekit-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..22c9fecc5883ec70b09b3be188d9b5c170787b7c GIT binary patch literal 3184 zcmZ{mc{CeZyT+p>6b%|6U_5Ag|dna3(8(!qR%n1MhE~1T4 zcg|Gl-{JtC?RMu563^rs#^{b201zq-07S(B0EcH*)G`1Nbarvo4FJ&02LOcpi(0MV zX9qxc6GIe$`R^+0sLnZaF8CWc1ONbB;D3t+@T^Gq%w!Klo9VN!aPtX4R1djOXC#*v z8l`LFMXf4W$Pw+g?MGIJ{kidT{`ZEvyT&eZZ+IVF*CGml+lqv>Zr{ERyu>e`+^fe8 zXK8?2!nb7@?3VlzJUaKXb!=-=QwQHM#N#5d15j83M3&FAaGgquF6W)}pX^a{Lg6p|c8)qtK3XM~n(l^$;PG>dAzfP5 zQWGpc>V9>OYt{Z>#3q*Up{--tb4qaf|i_hknPT}^IbIArz zDz3%RdYnmjOI$ZpkEL0hEa|@A7dZ6%Gx9`-FfwSDh)L7KAF00&_nSUQAr})lH zznLr~;!_)u`i?QVYQdWQA>u{q0&>%wB7HtsmE|I5ZY$3QM>yX_vLQ<(>{L!O$#gej zZqEUD3@)^k((UVtPoSy6*wROhE7y3Tm9;0!4wAW8vye+Kt50+Z(Nc0zLU|&Cqb12z zTPA#{NA7gqo#-ihhKLskz=p~6s3CZ!`=gZ};NxAhqZ;|B&!rNBz{$dDwC*wH48YzLlv z{gH9KOzh+K`>-~Z?&A% zyw&v!zExBLHBt1}K|*~wqPOAJJr+K_jc+%vAcG5zc>WAnlnM}t_JOdbvQ*hR81v#U zk-Z2hkyydKLxug~mtPBA9#R@rnG!1$b#?TkL_rkys=&t8RX816<@IO{(*u=LubmumkUuvhPEp&U%V#1 zk4x(25T4|X;GmV?@K1aUDy_;t62BJmmEQ?Zbz5;g1vS56)gj`itlJxxdo6lKUCG6_ zDekr((2j)#P+u+|zf8)96yM#LUDUQey8_HFYyEzjsVVgEtG9t?1{5B^FAy90bkNy9 zl&!u0D&iC4k4XGH57KSth?(T%q?>k;R-jc=2V^`A2U3nTrz@?pjTGf?M37C3R@lZA z{IbcNr5o9X0)4`Nsy9#n+{uS;%Yix=0tOZ(ziCQ+M+J%D?=Mod*0R8XuKU0*Gq}5* zOrH0Xv%*-bh8p3%xV{=vmy|`f3>V|#f)9V%0AQSxHLR@?4=MBJoGRD7%c zAU7h9Rk8=pOO)@A9Wf|b>s2-K16fOHC%dWpWHoh4N1CgvZW>E<5(i26MOG#tfLxF6 znL{<^wK@2FXGgM;|K;4T zYoPqlLzswmIO|S^q*_0G&L!n4f)xE0a_>*|FQ>yB1gu8zg=dhzW{Zou;HM7%iJ~h}>IKDb*8;R3B^qC4%ahdXb_tZm4skap4O{*;$PzHKopwL{i3pCEQWl zgPtb2jfSOe_VAT@X2PolP+Pu=5cnNrO6g#Tz5+kdSADAPc*)>vd;*(o+dbpH(aIQ# zP}gK)z6+wca>w)J=kFh<)N6rUZ~2VD**D4F1jRD$s|sWKOoaZA^fa0StO4_g;aico zu>8FM=2#ibPuLs$JZ&bbH(abQy>Wi>4SQz0of792y6e5Y&QnqJUgo(BkpEELpv`>b z-|zEr)u3o$n+Oo%AC~4u3QY@tNHj}v(TxjS)HGopH+wu-hBIx4CIaQ+c#m1TszeHz zCz#{mCrLkj=^GU#QayK@?P@b@<-zrZ22kzu#iP7SCgPT;+{taEJDnDuL?;`u*kd2U z=q)G3o&D&ZkA4w~99CTM(F?nWz%N(moAgMIur}TUUDpEZI+$#)O~a2SVBK`>(d%&) zg6wv#lvIq8q2S6VT;Gg5w?HH*lbeTK;=_?5G;UPLrB4ig)dxC8qxu@>c`|k( z3?!4s=&^icvSQ7~#CcOiwf;Yx>Wr#;KUP>onf<1^6)zHE&|2Z+99~=>x&8SCr9@_S zjj#VYhFiLEdNFQoDk!gW4_9R03JDht^VeiZFt!~8SEV;L{Z6kwKE2x72L5$(=eHJT z3Gug)2SSmjc1Iei#YK|ErM-#^bw%p1EFVY}3~6yTxt#o5J$}ratWn!__x90aEqfnd zopnfeQaA3!+pu+Q19PMSeFC#a?yw-XrdWvH3JBZ~!FUDBu5FE-TU(b@=`U+|`icwl zpbKjy8yqhxididwxRExx!|V>v)uoxG<#5Y*wf57(@D8T~Pp98AQY}L+$2I~nH%X4! z*SjINUhl?kxK%%Ip_?ppi4~E;66>Ds$7m+D?W?>gEr|_;#W~l(FZsoK3)Bl+u`~o` zAU{s~9fP0~7tGKfrv3j&+DvYAexlpweyQ+CXZi-#OwJSvkL%o#(6YOw9R5w!+Vu#N zy&}@SEu3TbT%RXPV~*LL(HYu8`}B}szWBE4lo_NUa%K5+W;_iUDQM8TKlB|}GA6n) zwi3w8YMlp0q5X!kD6Tht&zG5ui!>W4? zDO}f^u8JnZh7@m(f7DCZWrR$6D&oLC~K zE}f^vZ%$PmyoRJpG=6p7DJpamxs(cg|8P!*V^!s&^OJX8hsvt2>IehKPm_g7USM}N zqX~QZtiqIm_6x~m!s>GEaqMlKUob^U!33N_29ZbH%H)e5x~iwp!E$!8ywRX(^e0 zbC|y4K|&bWZBL>neA~+8*|3G2Vwcrk9V*E6w&N1IIoYmYqa$9CljU zhjjNkvobwx)`Pf|8P^lG2dI zkkx+xI6n_>&yfEPba({*n;`rD34z|Y`vHOXaQ^?tKoyl?Hc%B!RhXt4^nXKUdA_in PF#xo_IqKDKZZZD@Be@1l literal 0 HcmV?d00001 diff --git a/ui/src/components/claudekit-badge.tsx b/ui/src/components/claudekit-badge.tsx new file mode 100644 index 00000000..a8c4308b --- /dev/null +++ b/ui/src/components/claudekit-badge.tsx @@ -0,0 +1,49 @@ +/** + * ClaudeKit Badge Button + * + * "Powered by ClaudeKit" badge for navbar, inspired by landing page design. + * Compact version optimized for header placement. + */ + +import { cn } from '@/lib/utils'; + +const CLAUDEKIT_URL = 'https://claudekit.cc?ref=HMNKXOHN'; + +export function ClaudeKitBadge() { + return ( + + ClaudeKit + + + Powered by + + + ClaudeKit + + + + ); +} diff --git a/ui/src/components/layout.tsx b/ui/src/components/layout.tsx index e7f841d7..a98494cc 100644 --- a/ui/src/components/layout.tsx +++ b/ui/src/components/layout.tsx @@ -9,6 +9,8 @@ import { DocsLink } from '@/components/docs-link'; import { ConnectionIndicator } from '@/components/connection-indicator'; import { LocalhostDisclaimer } from '@/components/localhost-disclaimer'; import { Skeleton } from '@/components/ui/skeleton'; +import { ClaudeKitBadge } from '@/components/claudekit-badge'; +import { SponsorButton } from '@/components/sponsor-button'; function PageLoader() { return ( @@ -25,7 +27,10 @@ export function Layout() {
-
CCS Config
+
+ + +
diff --git a/ui/src/components/sponsor-button.tsx b/ui/src/components/sponsor-button.tsx new file mode 100644 index 00000000..382d9afb --- /dev/null +++ b/ui/src/components/sponsor-button.tsx @@ -0,0 +1,46 @@ +/** + * Sponsor Button + * + * GitHub Sponsors button for navbar. + * Heart icon with hover animation. + */ + +import { Heart } from 'lucide-react'; +import { cn } from '@/lib/utils'; + +const SPONSOR_URL = 'https://github.com/sponsors/kaitranntt'; + +export function SponsorButton() { + return ( + + + + Sponsor + + + ); +}