ALEPH HUB
/EN
提交
← 返回
Q
Communityprompt

Qumica Software Hero

用于在 React + Tailwind 中构建深色玻璃拟态软件公司英雄区块的提示词,包含全屏背景视频、动态渐变 CTA 按钮和集成 logo 跑马灯。

概览安全

详述浮动胶囊导航栏、社交证明头像、斜体衬线标题点缀、渐变与微光按钮动画,以及自动化工具 logo 从右向左的跑马灯。为一次性生成落地页而写。

Build a modern, high-performance Hero Section for a software company called "Qumica" using React and Tailwind CSS with the following specifications:

1. Visual Foundation & Background

Background Video: Set a full-screen, 100% opacity, high-resolution video as the background using this URL: https://cdn.sceneai.art/Hero Section Video/247f75dd-335a-4aaa-ba65-47df2f7b24b9.mp4.

Overlay: Add a very minimal bg-black/10 overlay to ensure text readability without dulling the video.

Atmosphere: Dark theme with glassmorphism and a sophisticated tech aesthetic.

2. Navigation Bar

Style: A floating, pill-shaped nav bar centered at the top.

Glass Effect: Use bg-black/40, backdrop-blur-xl, and a subtle border-white/10.

CTA Button: A "Generate" button on the right with a "glassy" effect: bg-white/15, backdrop-blur-2xl, and a border-white/40 stroke.

3. Hero Content (Shifted Upwards)

Layout: Flex column centered horizontally, but positioned in the upper half of the viewport (pt-44).

Social Proof: A "Trusted by 500+ teams" component featuring a 3-avatar group (stacked), 5 orange stars, and text, all scaled to 105% of standard size.

Headline: "Ready to elevate your digital infrastructure?" Use a bold sans-serif font, with "elevate" in an italic serif font.

Subheadline: "We build high-performance solutions to modernize operations and drive growth across your entire organization." (Ensure it breaks into 2 lines on desktop).

4. Call to Action Buttons

Primary Button ("Generate"): - Gradient: Dynamic from-orange-500 via-purple-600 to-orange-500.

Animation: An automated 4s infinite gradient shift (bg-[length:200%_200%]).

Effects: An automated 3s infinite light "sweep" shimmer effect moving horizontally across the button.

Icon: Include a Sparkles icon.

Secondary Button ("View Platform"): - Style: A white glass effect using bg-white/10, backdrop-blur-xl, and border-white/30.

Icon: Include a Play icon.

5. Animated Footer (Integration Marquee)

Label: "Integrating with leading automation" in uppercase, 10px spacing above the logos.

Marquee: A continuous right-to-left infinite scrolling marquee featuring logos for: Zapier, Make, n8n, UiPath, Tray.io, and Workato.

Logo Styling: Use white/90 text with subtle drop shadows.

6. Technical Requirements

Use lucide-react for all icons.

Implement smooth CSS keyframe animations for the marquee, the gradient shift, and the light sweep.

Ensure the layout is fully responsive (mobile-friendly).
#hero-section#react#tailwind#glassmorphism#video-background
相关推荐
Midjourney Prompt Generator
AWeirdDev
Community

扮演 Midjourney 提示词生成器,把一个想法扩写成详尽、富有想象力的图像描述。

promptmarkdown
Usability Testing Scenario & Information Architecture Blueprint
AmirMotefaker
Community

一个「角色/任务/规则」结构的提示词模板,让模型为移动端结账流程设计可用性测试场景与信息架构蓝图。

promptmarkdown
Midjourney/Stable Diffusion Prompt Engineering Template
AmirMotefaker
Community

用于撰写高质量 Midjourney v6 / Stable Diffusion 图像提示词的模板,包含精确的镜头与灯光参数。

promptmarkdown