← Kembali ke galeri

Infrastructure

SceneAIHero Section
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).