Landing
台灯 Hero 区域
深色 hero 区域,中央台灯光锥照亮标题和 CTA。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark hero section with a lamp/light-source effect. A narrow cone of light should descend from the top center, widening as it reaches the headline, with soft edges and a radial gradient fade. The headline and subheadline sit inside the illuminated area in off-white text, while the surrounding background stays near-black. Add a small glowing CTA pill below the text. Use CSS gradients, masks, and opacity layers. Use Tailwind CSS. No images, no illustrations—only light, shadow, and type.
中文提示词
创建一个深色 hero 区域,带有灯具/光源效果。一道狭窄的光锥从顶部中心向下延伸,到达标题时逐渐变宽,边缘柔和并径向渐变淡出。标题和副标题位于照亮区域内,使用米白色文字,周围背景保持近黑色。文字下方添加一个发光 CTA 胶囊按钮。使用 CSS 渐变、遮罩和透明度层。使用 Tailwind CSS。无图片、无插图——只有光、影和字体。

Overview
使用单一光锥吸引注意力的戏剧感 hero 区域。灵感来自 Aceternity UI 的 Lamp Effect 和深色高端落地页。
Features
- 从顶部中心向下延伸的光锥
- 柔和径向渐变边缘
- 被照亮的标题和副标题
- 近黑色周围背景
- 发光 CTA 胶囊
- 纯 CSS 光影效果
Usage
适用于产品发布、开发工具或希望实现电影感揭示的创意作品集。
Customization
修改 prompt 以:
- 加载时动画显示光锥
- 在光束内添加漂浮尘埃粒子
- 将光锥颜色改为琥珀色或青色
- 添加滚动驱动的变暗效果