霓虹渐变

{/* 主按钮 - 流体霓虹 */}
<button className="
  px-6 py-3 md:px-8 md:py-4
  bg-gradient-to-r from-cyan-400 via-pink-500 to-cyan-400
  bg-[length:200%_auto] bg-left
  text-white font-bold
  rounded-xl
  border-4 border-white/20
  shadow-[0_0_18px_rgba(236,72,153,0.45)]
  hover:bg-right
  hover:shadow-[0_0_24px_#ec4899,0_0_42px_rgba(34,211,238,0.45)]
  hover:-translate-y-1
  active:scale-[0.98]
  active:shadow-[inset_0_0_20px_rgba(255,255,255,0.8)]
  transition-all duration-500 ease-out
  text-sm md:text-base
">
  开始免费试用
</button>

{/* 次按钮 - 电流描边 */}
<button className="
  px-6 py-3 md:px-8 md:py-4
  bg-transparent
  text-white font-bold
  rounded-xl
  border-4 border-cyan-400
  shadow-[0_0_12px_rgba(34,211,238,0.25)]
  hover:bg-cyan-400/10
  hover:shadow-[0_0_20px_rgba(34,211,238,0.5),0_0_36px_rgba(168,85,247,0.35)]
  transition-all duration-500 ease-out
  text-sm md:text-base
">
  观看演示
</button>

<div className="
  group relative overflow-hidden
  bg-gradient-to-br from-purple-500 via-pink-500 to-cyan-400
  bg-[length:200%_200%] bg-left
  rounded-2xl md:rounded-3xl
  border-4 border-yellow-400
  p-6 md:p-8
  shadow-[0_0_28px_rgba(168,85,247,0.4)]
  hover:bg-right
  hover:shadow-[0_0_24px_#ec4899,0_0_44px_rgba(34,211,238,0.45)]
  hover:-translate-y-2
  transition-all duration-500 ease-out
">
  <div className="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4 shadow-[0_0_15px_rgba(255,255,255,0.25)] group-hover:scale-110 group-hover:animate-pulse transition-all duration-500">
    <Zap className="w-6 h-6 text-white" />
  </div>
  <h3 className="text-xl md:text-2xl font-bold text-white mb-2">极速响应</h3>
  <p className="text-white/85 text-sm md:text-base">
    渐变流动、双层色散发光与通电图标共同构成高能霓虹反馈。
  </p>
</div>

<div className="relative">
  <input
    type="text"
    placeholder="输入你的邮箱..."
    className="
      w-full
      px-5 py-4
      bg-white/5
      border-2 border-purple-500/50
      rounded-xl
      text-white
      placeholder:text-white/40
      focus:outline-none
      focus:border-cyan-400
      focus:shadow-[0_0_20px_rgba(34,211,238,0.3)]
      transition-all duration-300
    "
  />
  <button className="
    absolute right-2 top-1/2 -translate-y-1/2
    px-4 py-2
    bg-gradient-to-r from-cyan-400 to-purple-500
    rounded-lg
    text-white font-medium text-sm
    hover:shadow-[0_0_15px_rgba(168,85,247,0.5)]
    transition-all duration-300
  ">
    订阅
  </button>
</div>

<nav className="
  fixed top-0 left-0 right-0 z-50
  bg-[#0f0a1e]/80 backdrop-blur-xl
  border border-purple-500/20
  px-4 md:px-8
  py-4
">
  <div className="max-w-7xl mx-auto flex items-center justify-between">
    {/* Logo */}
    <a href="/" className="flex items-center gap-2">
      <div className="w-8 h-8 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-lg flex items-center justify-center">
        <Sparkles className="w-5 h-5 text-white" />
      </div>
      <span className="font-bold text-white text-lg">ACME公司</span>
    </a>

    {/* Nav Links */}
    <div className="hidden md:flex items-center gap-8">
      <a href="#" className="text-pink-400 font-medium hover:text-pink-300 transition-colors">特色</a>
      <a href="#" className="text-white/70 font-medium hover:text-white transition-colors">定价</a>
      <a href="#" className="text-white/70 font-medium hover:text-white transition-colors">关于</a>
      <a href="#" className="text-white/70 font-medium hover:text-white transition-colors">联系方式</a>
    </div>

    {/* CTA */}
    <div className="flex items-center gap-3">
      <a href="#" className="text-cyan-400 font-medium hover:text-cyan-300 transition-colors">登录</a>
      <button className="
        px-4 py-2
        bg-gradient-to-r from-cyan-400 to-purple-500
        text-white font-medium
        rounded-lg
        border border-white/20
        hover:shadow-[0_0_15px_rgba(168,85,247,0.5)]
        transition-all duration-300
      ">
        开始
      </button>
    </div>
  </div>
</nav>

<section className="
  min-h-screen
  bg-[#0f0a1e]
  bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))]
  from-purple-900/20 via-[#0f0a1e] to-[#0f0a1e]
  px-4 md:px-8
  py-20 md:py-32
  overflow-hidden
  relative
">
  {/* 装饰元素 */}
  <div className="absolute top-20 left-10 text-yellow-400 animate-pulse">
    <Star className="w-6 h-6 fill-current" />
  </div>
  <div className="absolute top-40 right-20 text-pink-400">
    <Rocket className="w-8 h-8" />
  </div>
  <div className="absolute bottom-40 left-1/4 text-cyan-400 animate-bounce">
    <Sparkles className="w-5 h-5" />
  </div>

  <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
    {/* 左侧文字 */}
    <div>
      {/* 标签 */}
      <div className="
        inline-flex items-center gap-2
        px-4 py-2 mb-6
        border-2 border-dashed border-yellow-400
        rounded-full
        text-yellow-400 text-sm font-medium
      ">
        <Star className="w-4 h-4 fill-current" />
        加入已经在使用 ACME 的 50,000+ 团队
        <Star className="w-4 h-4 fill-current" />
      </div>

      {/* 标题 */}
      <h1 className="text-4xl md:text-6xl lg:text-7xl font-black mb-6">
        <span className="text-purple-400">改变</span>
        <span className="text-cyan-400">你的方式</span>
        <br />
        <span className="text-pink-400">团队</span>
        <br />
        <span className="text-white">著作</span>
      </h1>

      {/* 描述 */}
      <p className="text-white/70 text-lg md:text-xl max-w-lg mb-8">
        Acme平台通过强大的工具将您的团队整合在一起，旨在简化工作流程、提升生产力并推动成果。
      </p>

      {/* 按钮 */}
      <div className="flex flex-wrap gap-4">
        <button className="
          px-6 py-4
          bg-gradient-to-r from-cyan-400 via-green-400 to-yellow-400
          text-black font-bold
          rounded-xl
          border-2 border-pink-400
          shadow-[0_0_20px_rgba(34,211,238,0.4)]
          hover:shadow-[0_0_30px_rgba(34,211,238,0.6)]
          hover:scale-105
          transition-all duration-300
          flex items-center gap-2
        ">
          开始免费试用
          <Sparkles className="w-5 h-5" />
        </button>
        <button className="
          px-6 py-4
          bg-transparent
          text-white font-bold
          rounded-xl
          border-2 border-white/30
          hover:border-white/50
          hover:bg-white/5
          transition-all duration-300
          flex items-center gap-2
        ">
          <ArrowRight className="w-5 h-5" />
          观看演示
        </button>
      </div>
    </div>

    {/* 右侧卡片 */}
    <div className="relative">
      {/* 紫粉卡片 */}
      <div className="
        absolute -top-4 -left-4 md:top-0 md:left-0
        w-48 md:w-56
        bg-gradient-to-br from-purple-500 to-pink-500
        rounded-2xl
        border-4 border-yellow-400
        p-5
        shadow-[0_0_30px_rgba(168,85,247,0.5)]
        transform rotate-[-8deg]
        z-10
      ">
        <Zap className="w-10 h-10 text-white mb-3" />
        <p className="text-white font-bold text-lg">快点</p>
      </div>

      {/* 青绿卡片 */}
      <div className="
        absolute top-20 right-0 md:top-24 md:right-4
        w-48 md:w-56
        bg-gradient-to-br from-green-400 to-cyan-400
        rounded-2xl
        border-4 border-pink-400
        p-5
        shadow-[0_0_30px_rgba(34,211,238,0.5)]
        transform rotate-[5deg]
        z-20
      ">
        <Shield className="w-10 h-10 text-white mb-3" />
        <p className="text-white font-bold text-lg">安全</p>
      </div>

      {/* 粉红卡片 */}
      <div className="
        absolute bottom-0 left-1/4
        w-52 md:w-64
        bg-gradient-to-br from-pink-500 to-rose-500
        rounded-2xl
        border-4 border-cyan-400
        p-5
        shadow-[0_0_30px_rgba(236,72,153,0.5)]
        transform rotate-[3deg]
        z-30
      ">
        <Users className="w-10 h-10 text-white mb-3" />
        <p className="text-white font-bold text-lg">团队</p>
      </div>
    </div>
  </div>
</section>

<div className="
  fixed bottom-6 right-6
  flex items-center gap-2
  bg-[#1a1a2e]/90 backdrop-blur-xl
  rounded-xl
  border border-white/10
  p-2
">
  <button className="
    px-4 py-2
    bg-white/10
    text-white text-sm font-medium
    rounded-lg
    hover:bg-white/20
    transition-colors
  ">
    设计/提示
  </button>
  <button className="
    px-4 py-2
    text-white/60 text-sm font-medium
    rounded-lg
    hover:text-white hover:bg-white/10
    transition-colors
  ">
    提示
  </button>
  <button className="
    px-4 py-2
    bg-gradient-to-r from-purple-500 to-pink-500
    text-white text-sm font-medium
    rounded-lg
    hover:shadow-[0_0_15px_rgba(168,85,247,0.5)]
    transition-all
    flex items-center gap-2
  ">
    <Palette className="w-4 h-4" />
    风格
  </button>
</div>