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).
相关推荐
Midjourney Prompt Generator
AWeirdDev
扮演 Midjourney 提示词生成器,把一个想法扩写成详尽、富有想象力的图像描述。
promptmarkdown
Usability Testing Scenario & Information Architecture Blueprint
AmirMotefaker
一个「角色/任务/规则」结构的提示词模板,让模型为移动端结账流程设计可用性测试场景与信息架构蓝图。
promptmarkdown
Midjourney/Stable Diffusion Prompt Engineering Template
AmirMotefaker
用于撰写高质量 Midjourney v6 / Stable Diffusion 图像提示词的模板,包含精确的镜头与灯光参数。
promptmarkdown