Function HomeClient

freebuff/web/src/app/home-client.tsx:434–575

()

}

export default function HomeClient() {
  return (
    <div className="relative">
      {/* ─── 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 />

        {/* Inline nav overlay */}
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="absolute top-0 left-0 right-0 z-20 container mx-auto px-4 py-4 flex justify-between items-center"
        >
          <Link
            href="/"
            className="flex items-center space-x-2 group transition-all duration-300 hover:translate-x-0.5"
          >
            <Image
              src="/logo-icon.png"
              alt="Freebuff"
              width={28}
              height={28}
              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-zinc-400 group-hover:text-white transition-colors duration-200">
              freebuff
            </span>
          </Link>

          <nav className="flex items-center space-x-1">
            <Link
              href="https://github.com/CodebuffAI/codebuff"
              target="_blank"
              rel="noopener noreferrer"
              className="relative font-medium px-3 py-2 rounded-md transition-all duration-200 text-zinc-400 hover:text-white flex items-center gap-2 text-sm"
              onClick={() =>
                posthog.capture(AnalyticsEvent.FREEBUFF_HOME_GITHUB_CLICKED)
              }
            >
              <Icons.github className="h-4 w-4" />
              <span className="hidden sm:inline">GitHub</span>
            </Link>
          </nav>
        </motion.div>

        {/* Hero content */}
        <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"
            variants={{