Infrastructure
Lihat contoh asli ↗Prompt lengkap
tersalin
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).