Hero section with gradient backgrounds, badge, and CTA buttons
Props
badgeTextOptionalText displayed in the top badge
"Webflow × Contra Hackathon Entry"titleOptionalMain heading text
"webcn"subtitleOptionalSubtitle text below the main title
"Full-stack React components for Webflow"descriptionOptionalDetailed description text
"Leverage Webflow's new code components feature to build production-ready applications. Drop in authentication, databases, and complex UI — all running natively in Webflow."primaryCtaTextOptionalText for the primary call-to-action button
"Browse Components"primaryCtaUrlOptionalURL or anchor link for primary button (e.g., #components, /page, https://...)
"#components"secondaryCtaTextOptionalText for the secondary call-to-action button
"View Demo"secondaryCtaUrlOptionalURL or anchor link for secondary button (e.g., #demo, /page, https://...)
"#demo"showBadgeOptionalToggle visibility of the top badge
trueshowTechStackOptionalToggle visibility of the technology stack section
trueshowBackgroundOptionalToggle the DarkVeil animated background effect
truehueShiftOptionalAdjust the color hue of the background (0-360 degrees)
100noiseIntensityOptionalAmount of visual noise/grain effect (0-1)
0.2scanlineIntensityOptionalStrength of scanline effect (0-1)
0.4speedOptionalSpeed of the background animation (0-5)
1.2scanlineFrequencyOptionalFrequency/density of scanlines (0-2)
0.6warpAmountOptionalAmount of warping/distortion effect (0-1)
0.4resolutionScaleOptionalRendering resolution (0.5-2, lower = better performance)
1Usage
<HeroWrapper badgeText="Hackathon Entry" title="webcn" subtitle="Full-stack components" />Category
LandingLibrary
webcn Landing Page
webcnFile Path
src/libraries/webcn/components/Hero.webflow.tsx