Neon Gradient Strip
Neon emerald-to-gray gradient strip with outer glow, rocket icon, and gradient text. Maximum-impact roadmap and evolving-project teasers for dark landing pages. Premium futuristic announcement component.
Dependencies
react
lucide-react
npm install lucide-reactimport { Rocket } from "lucide-react";
export function NeonGradientStrip() {
return (
<div className="relative max-w-lg overflow-hidden rounded-2xl p-[1px] shadow-[0_0_48px_rgba(52,211,153,0.45),0_0_96px_rgba(52,211,153,0.15)]">
<div className="absolute inset-0 bg-gradient-to-r from-emerald-400 via-green-500 to-zinc-500 opacity-90" />
<div className="relative flex items-center gap-3 rounded-2xl bg-gradient-to-r from-zinc-950 via-zinc-900 to-zinc-950 px-5 py-3 shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]">
<Rocket className="h-5 w-5 text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.8)]" />
<p className="bg-gradient-to-r from-emerald-200 to-zinc-300 bg-clip-text text-sm font-semibold text-transparent">
Project evolving — more features soon!
</p>
</div>
</div>
);
}
Please implement this code in the current project and add it to (Your Desired Section, e.g. homepage hero, pricing page, dashboard). Change the primary accent color to (YOUR HEX CODE COLOR, e.g. #6366F1).
Requirements:
- Use React + Tailwind CSS (match the project's existing setup)
- Install dependencies if needed: npm install lucide-react
- Keep the layout responsive on mobile and desktop
- Replace placeholder copy with content that fits the project
The UI code:
import { Rocket } from "lucide-react";
export function NeonGradientStrip() {
return (
<div className="relative max-w-lg overflow-hidden rounded-2xl p-[1px] shadow-[0_0_48px_rgba(52,211,153,0.45),0_0_96px_rgba(52,211,153,0.15)]">
<div className="absolute inset-0 bg-gradient-to-r from-emerald-400 via-green-500 to-zinc-500 opacity-90" />
<div className="relative flex items-center gap-3 rounded-2xl bg-gradient-to-r from-zinc-950 via-zinc-900 to-zinc-950 px-5 py-3 shadow-[0_1px_0_rgba(255,255,255,0.06)_inset]">
<Rocket className="h-5 w-5 text-emerald-400 drop-shadow-[0_0_8px_rgba(52,211,153,0.8)]" />
<p className="bg-gradient-to-r from-emerald-200 to-zinc-300 bg-clip-text text-sm font-semibold text-transparent">
Project evolving — more features soon!
</p>
</div>
</div>
);
}
Replace (Your Desired Section) and (YOUR HEX CODE COLOR) before pasting into Cursor, Copilot, or ChatGPT.