Components
A polished Webflow-inspired landing grid with neon-blue glow accents, modular feature cards, and an isolated logo component ready for reuse in demos or production. Built for Tailwind utility classes with a fallback global stylesheet for font, glow, and small UI polish.
npx @21st-dev/cli add dhileepkumargm/neon-flow-uiLoading preview...
import React from 'react';
import FeatureCard, { MainLogo } from "@/components/ui/neon-flow-ui";
export default function DemoOne() {
const features = [
{ id: 1, title: 'New CMS', desc: 'More powerful collections & data.', icon: 'cms' },
{ id: 2, title: '3D Spline Tools', desc: 'Native 3D scene integration.', icon: 'spline' },
{ id: 3, title: 'AI Variables', desc: 'Generate themes with AI.', icon: 'ai' },
{ id: 4, title: 'New Layouts', desc: 'Advanced grid & flex controls.', icon: 'layouts' },
{ id: 5, title: 'Localization', desc: 'Build for a global audience.', icon: 'localization' },
{ id: 6, title: 'And More...', desc: 'Tons of new updates.', icon: 'more' },
];
return (
<>
<div className="min-h-screen bg-black text-gray-200 font-sans flex items-center justify-center p-6">
<div className="w-full max-w-5xl mx-auto">
<header className="text-center mb-16">
<h1 className="text-5xl md:text-7xl font-black text-white mb-4">
Webflow Released
</h1>
<p className="text-4xl md:text-6xl font-bold text-blue-400 neon-text">
Summer 2024
</p>
</header>
<main>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
<div className="sm:col-span-2 lg:col-span-2 flex items-center justify-center p-8 bg-gray-900/50 border border-blue-800/50 rounded-2xl backdrop-blur-sm transition-all duration-300 hover:border-blue-500 hover:scale-105 neon-glow">
<MainLogo className="w-24 h-24 text-white icon-glow" />
</div>
{features.map(f => (
<FeatureCard key={f.id} title={f.title} desc={f.desc} icon={f.icon} />
))}
</div>
</main>
</div>
</div>
</>
);
}