freebuff web: improve styles

jahooma · jahooma · commit 58ff484b6540 · 2026-03-10T18:30:46.000-07:00
diff --git a/freebuff/web/src/app/home-client.tsx b/freebuff/web/src/app/home-client.tsx
@@ -68,7 +68,7 @@ function SetupGuide() {
       <button
         onClick={() => setIsOpen(!isOpen)}
         aria-expanded={isOpen}
-        className="flex items-center gap-2 mx-auto text-sm text-zinc-400 hover:text-acid-green transition-colors duration-200 cursor-pointer group"
+        className="flex items-center gap-2 mx-auto text-sm text-zinc-400 hover:text-acid-matrix transition-colors duration-200 cursor-pointer group"
       >
         <span>Install guide</span>
         <motion.span
@@ -92,7 +92,7 @@ function SetupGuide() {
               <ol className="space-y-4">
                 {setupSteps.map((step, i) => (
                   <li key={i} className="flex gap-3">
-                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-acid-green/10 border border-acid-green/30 flex items-center justify-center text-xs font-mono text-acid-green">
+                    <span className="flex-shrink-0 w-6 h-6 rounded-full bg-acid-matrix/10 border border-acid-matrix/30 flex items-center justify-center text-xs font-mono text-acid-matrix">
                       {i + 1}
                     </span>
                     <div className="flex-1 min-w-0">
@@ -101,7 +101,7 @@ function SetupGuide() {
                         <p className="text-xs text-zinc-500 mt-0.5">{step.description}</p>
                       )}
                       {'command' in step && step.command && (
-                        <div className="mt-1.5 flex items-center gap-2 bg-zinc-800/60 border border-zinc-700/40 rounded-md px-3 py-1.5 hover:border-acid-green/30 transition-colors duration-200">
+                        <div className="mt-1.5 flex items-center gap-2 bg-zinc-800/60 border border-zinc-700/40 rounded-md px-3 py-1.5 hover:border-acid-matrix/30 transition-colors duration-200">
                           <code className="font-mono text-xs text-white/80 flex-1 select-all">
                             {step.command}
                           </code>
@@ -125,12 +125,12 @@ function InstallCommand({ className }: { className?: string }) {
     <div
       className={cn(
         'flex items-center gap-2 bg-zinc-900/80 border border-zinc-700/50 rounded-lg px-4 py-3 font-mono text-sm',
-        'hover:border-acid-green/50 hover:shadow-[0_0_20px_rgba(0,255,149,0.12)] transition-all duration-300',
+        'hover:border-acid-matrix/50 hover:shadow-[0_0_20px_rgba(124,255,63,0.12)] transition-all duration-300',
         'gradient-border-shine',
         className,
       )}
     >
-      <span className="text-acid-green select-none">$</span>
+      <span className="text-acid-matrix select-none">$</span>
       <code className="text-white/90 select-all flex-1">
         {INSTALL_COMMAND}
       </code>
@@ -156,7 +156,7 @@ function FAQList() {
           >
             <button
               onClick={() => setOpenIndex(isOpen ? null : i)}
-              className="w-full flex items-center justify-between gap-4 bg-zinc-900/50 border border-zinc-800 rounded-xl px-6 py-4 text-left hover:border-acid-green/30 hover:bg-zinc-900/80 transition-all duration-300 cursor-pointer"
+              className="w-full flex items-center justify-between gap-4 bg-zinc-900/50 border border-zinc-800 rounded-xl px-6 py-4 text-left hover:border-acid-matrix/30 hover:bg-zinc-900/80 transition-all duration-300 cursor-pointer"
             >
               <span className="font-semibold text-white">{faq.question}</span>
               <motion.span
@@ -192,9 +192,61 @@ function FAQList() {
 const PHILOSOPHY_WORDS = [
   { word: 'SIMPLE', description: 'No modes. No config. Just code.' },
   { word: 'FAST', description: 'Up to 3× the speed of Claude Code' },
-  { word: 'LOADED', description: 'Web research, browser use, and more — built in' },
+  { word: 'LOADED', description: 'Built in web research, browser use, and more' },
 ]
 
+function PhilosophySection() {
+  const [litWords, setLitWords] = useState<Set<number>>(new Set())
+
+  const lightUp = (i: number) => {
+    setLitWords(prev => {
+      const next = new Set(prev)
+      next.add(i)
+      return next
+    })
+  }
+
+  const dimDown = (i: number) => {
+    setLitWords(prev => {
+      const next = new Set(prev)
+      next.delete(i)
+      return next
+    })
+  }
+
+  return (
+    <div className="relative z-10 container mx-auto max-w-5xl px-4 pt-16 md:pt-24 pb-24 md:pb-32">
+      <div className="flex flex-col gap-12 md:gap-16">
+        {PHILOSOPHY_WORDS.map((item, i) => (
+          <motion.div
+            key={item.word}
+            initial={{ opacity: 0, filter: 'blur(12px)' }}
+            whileInView={{ opacity: 1, filter: 'blur(0px)' }}
+            viewport={{ once: true, amount: 0.5 }}
+            transition={{ duration: 0.7, delay: i * 0.1 }}
+            className="group"
+          >
+            <motion.div
+              onViewportEnter={() => lightUp(i)}
+              onViewportLeave={() => dimDown(i)}
+              viewport={{ margin: '0px 0px -55% 0px' }}
+              className={cn(
+                'font-dm-mono text-7xl md:text-[8rem] lg:text-[10rem] font-medium leading-[0.85] tracking-tighter select-none transition-all duration-500',
+                litWords.has(i) ? 'keyword-filled' : 'keyword-hollow',
+              )}
+            >
+              {item.word}
+            </motion.div>
+            <p className="mt-3 md:mt-4 text-zinc-500 text-sm md:text-base font-mono tracking-wide">
+              {item.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 const wordVariant = {
   initial: { opacity: 0, y: 30, filter: 'blur(8px)' },
   animate: {
@@ -211,12 +263,12 @@ const wordVariant = {
 export default function HomeClient() {
   return (
     <div className="relative">
-      {/* ─── Hero Section ─── */}
-      <section className="relative min-h-[90vh] flex flex-col items-center justify-center overflow-hidden">
-        {/* Layered backgrounds */}
-        <div className="absolute inset-0 bg-gradient-to-b from-dark-forest-green via-black to-black" />
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,255,149,0.12),transparent_60%)]" />
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_50%_80%_at_50%_100%,rgba(0,255,149,0.04),transparent_60%)]" />
+      {/* ─── Hero + Philosophy: unified section ─── */}
+      <div className="relative overflow-hidden">
+        {/* Shared layered backgrounds */}
+        <div className="absolute inset-0 bg-gradient-to-b from-dark-forest-green via-black/95 to-black" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-10%,rgba(124,255,63,0.12),transparent_50%)]" />
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_40%_at_50%_65%,rgba(124,255,63,0.06),transparent_50%)]" />
 
         <HeroGrid />
         <BackgroundBeams />
@@ -237,9 +289,9 @@ export default function HomeClient() {
               alt="Freebuff"
               width={28}
               height={28}
-              className="rounded-sm transition-all duration-300 group-hover:brightness-110"
+              className="rounded-sm opacity-60 group-hover:opacity-100 transition-all duration-300 group-hover:brightness-110"
             />
-            <span className="text-xl tracking-widest font-serif text-white">
+            <span className="text-xl tracking-widest font-serif text-zinc-400 group-hover:text-white transition-colors duration-200">
               freebuff
             </span>
           </Link>
@@ -258,7 +310,7 @@ export default function HomeClient() {
         </motion.div>
 
         {/* Hero content */}
-        <div className="relative z-10 container mx-auto px-4 pt-20 pb-12 text-center">
+        <div className="relative z-10 container mx-auto px-4 pt-32 pb-16 md:pt-40 md:pb-20 text-center min-h-screen flex flex-col items-center justify-center">
           {/* Headline with staggered word animation */}
           <motion.h1
             className="hero-heading mb-8"
@@ -275,7 +327,7 @@ export default function HomeClient() {
                 <motion.span
                   key={i}
                   variants={wordVariant}
-                  className={word === 'free' ? 'inline-block mr-[0.3em] text-acid-green neon-text animate-glow-pulse' : 'inline-block mr-[0.3em] text-white'}
+                  className={word === 'free' ? 'inline-block mr-[0.3em] text-acid-matrix neon-text animate-glow-pulse' : 'inline-block mr-[0.3em] text-white'}
                 >
                   {word}
                 </motion.span>
@@ -298,7 +350,7 @@ export default function HomeClient() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 1.0 }}
-            className="max-w-md mx-auto mb-4"
+            className="max-w-lg w-full mx-auto mb-4"
           >
             <InstallCommand />
           </motion.div>
@@ -313,56 +365,28 @@ export default function HomeClient() {
           </motion.div>
         </div>
 
-        {/* Bottom fade */}
-        <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent" />
-      </section>
+        {/* Philosophy content — same background, continuous flow */}
+        <PhilosophySection />
 
-      {/* ─── Philosophy Section ─── */}
-      <section className="relative py-24 md:py-32 px-4 overflow-hidden">
-        <div className="relative z-10 container mx-auto max-w-5xl">
-          <div className="flex flex-col gap-12 md:gap-16">
-            {PHILOSOPHY_WORDS.map((item, i) => (
-              <motion.div
-                key={item.word}
-                initial={{ opacity: 0, filter: 'blur(12px)' }}
-                whileInView={{ opacity: 1, filter: 'blur(0px)' }}
-                viewport={{ once: true, amount: 0.5 }}
-                transition={{ duration: 0.7, delay: i * 0.1 }}
-                className="group"
-              >
-                <div className="keyword-hollow font-dm-mono text-7xl md:text-[8rem] lg:text-[10rem] font-medium leading-[0.85] tracking-tighter select-none">
-                  {item.word}
-                </div>
-                <p className="mt-3 md:mt-4 text-zinc-500 text-sm md:text-base font-mono tracking-wide">
-                  {item.description}
-                </p>
-              </motion.div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* Divider */}
-      <div className="h-px bg-gradient-to-r from-transparent via-acid-green/30 to-transparent" />
-
-      {/* ─── FAQ Section ─── */}
-      <section className="py-24 px-4">
-        <div className="container mx-auto max-w-2xl">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.3 }}
-            transition={{ duration: 0.6 }}
-            className="text-center mb-12"
-          >
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">
-              Frequently asked questions
-            </h2>
-          </motion.div>
+        {/* ─── FAQ Section ─── */}
+        <div className="relative z-10 py-24 px-4">
+          <div className="container mx-auto max-w-2xl">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, amount: 0.3 }}
+              transition={{ duration: 0.6 }}
+              className="text-center mb-12"
+            >
+              <h2 className="text-3xl md:text-4xl font-bold mb-4">
+                Frequently asked questions
+              </h2>
+            </motion.div>
 
-          <FAQList />
+            <FAQList />
+          </div>
         </div>
-      </section>
+      </div>
     </div>
   )
 }
diff --git a/freebuff/web/src/components/background-beams.tsx b/freebuff/web/src/components/background-beams.tsx
@@ -37,7 +37,7 @@ export function BackgroundBeams({ className }: { className?: string }) {
         className="absolute left-[--beam-x] top-[--beam-y] h-px w-px"
         style={{
           boxShadow:
-            '0 0 150px 80px rgba(0, 255, 149, 0.08), 0 0 300px 150px rgba(0, 255, 149, 0.04)',
+            '0 0 150px 80px rgba(124, 255, 63, 0.08), 0 0 300px 150px rgba(124, 255, 63, 0.04)',
           transform: 'translate(-50%, -50%)',
         }}
       />
diff --git a/freebuff/web/src/components/copy-button.tsx b/freebuff/web/src/components/copy-button.tsx
@@ -30,7 +30,7 @@ export function CopyButton({
       aria-label={`Copy: ${value}`}
     >
       {copied ? (
-        <Check className="h-4 w-4 text-acid-green" />
+        <Check className="h-4 w-4 text-acid-matrix" />
       ) : (
         <Copy className="h-4 w-4 text-white/60" />
       )}
diff --git a/freebuff/web/src/components/footer.tsx b/freebuff/web/src/components/footer.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 
 export function Footer() {
   return (
-    <footer className="w-full border-t">
+    <footer className="w-full">
       <div className="container mx-auto flex flex-col gap-4 py-8 px-4">
         <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
           <div>
@@ -66,20 +66,12 @@ export function Footer() {
               >
                 Terms of Service
               </Link>
+              <span className="text-xs text-muted-foreground mt-1">
+                © {new Date().getFullYear()} Freebuff
+              </span>
             </nav>
           </div>
         </div>
-
-        <div className="border-t pt-4 text-center text-xs text-muted-foreground">
-          © {new Date().getFullYear()} Freebuff. Built on the{' '}
-          <Link
-            href="https://codebuff.com"
-            className="hover:text-primary underline underline-offset-4"
-          >
-            Codebuff
-          </Link>{' '}
-          platform.
-        </div>
       </div>
     </footer>
   )
diff --git a/freebuff/web/src/components/hero-grid.tsx b/freebuff/web/src/components/hero-grid.tsx
@@ -10,7 +10,7 @@ export function HeroGrid({ className }: { className?: string }) {
         className="absolute inset-0 opacity-[0.03]"
         style={{
           backgroundImage:
-            'radial-gradient(circle, #00FF95 1px, transparent 1px)',
+            'radial-gradient(circle, #7CFF3F 1px, transparent 1px)',
           backgroundSize: '32px 32px',
         }}
       />
@@ -20,7 +20,7 @@ export function HeroGrid({ className }: { className?: string }) {
           className="h-px w-full"
           style={{
             background:
-              'linear-gradient(90deg, transparent, rgba(0,255,149,0.15) 20%, rgba(0,255,149,0.3) 50%, rgba(0,255,149,0.15) 80%, transparent)',
+              'linear-gradient(90deg, transparent, rgba(124,255,63,0.15) 20%, rgba(124,255,63,0.3) 50%, rgba(124,255,63,0.15) 80%, transparent)',
           }}
         />
       </div>
@@ -29,7 +29,7 @@ export function HeroGrid({ className }: { className?: string }) {
         className="absolute inset-0 opacity-[0.025]"
         style={{
           backgroundImage:
-            'linear-gradient(90deg, #00FF95 1px, transparent 1px)',
+            'linear-gradient(90deg, #7CFF3F 1px, transparent 1px)',
           backgroundSize: '120px 120px',
         }}
       />
diff --git a/freebuff/web/src/components/terminal-demo.tsx b/freebuff/web/src/components/terminal-demo.tsx
@@ -42,13 +42,13 @@ export function TerminalDemo() {
   const getLineColor = (type: string) => {
     switch (type) {
       case 'prompt':
-        return 'text-acid-green'
+        return 'text-acid-matrix'
       case 'user':
         return 'text-white font-medium'
       case 'agent':
         return 'text-zinc-300'
       case 'success':
-        return 'text-acid-green font-medium'
+        return 'text-acid-matrix font-medium'
       default:
         return 'text-zinc-500'
     }
@@ -62,7 +62,7 @@ export function TerminalDemo() {
       className="relative mx-auto max-w-2xl"
     >
       {/* Glow behind terminal */}
-      <div className="absolute -inset-4 bg-acid-green/[0.03] blur-2xl rounded-3xl" />
+      <div className="absolute -inset-4 bg-acid-matrix/[0.03] blur-2xl rounded-3xl" />
 
       <div className="relative rounded-xl border border-zinc-800/80 bg-zinc-950/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50">
         {/* Title bar */}
@@ -93,7 +93,7 @@ export function TerminalDemo() {
             ))}
           </AnimatePresence>
           {visibleLines < DEMO_LINES.length && (
-            <span className="inline-block w-2 h-4 bg-acid-green/70 animate-terminal-cursor" />
+            <span className="inline-block w-2 h-4 bg-acid-matrix/70 animate-terminal-cursor" />
           )}
         </div>
       </div>
diff --git a/freebuff/web/src/styles/globals.css b/freebuff/web/src/styles/globals.css
diff --git a/freebuff/web/tailwind.config.ts b/freebuff/web/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ export function CopyButton({`
`30`	`30`	aria-label={`Copy: ${value}`}
`31`	`31`	`>`
`32`	`32`	`{copied ? (`
`33`		`- <Check className="h-4 w-4 text-acid-green" />`
	`33`	`+ <Check className="h-4 w-4 text-acid-matrix" />`
`34`	`34`	`) : (`
`35`	`35`	`<Copy className="h-4 w-4 text-white/60" />`
`36`	`36`	`)}`