The following Prompt can be directly used within WebpageHero.com or your AI of choice. My recommendation is to fully walk through the prompt and customize it for your own needs. Think of this as a template.
--- START PROMPT ---
Overview
Create a premium, modern, dark-themed landing page. The design should utilize deep
glassmorphism (heavy backdrop blurs, subtle semi-transparent borders) to create a sleek,
high-end tech aesthetic. The font should be clean, sans-serif, with tight tracking for
headers and loose tracking for body text.
1. Background & Base Layer
Video Background: Set a full-screen, auto-playing, looping, and muted video in the
absolute background at exactly 100% opacity.
Video URL: https://cdn.sceneai.art/Hero%20Section%20Video/c897580b-e301-4c46-94e3-3f2c975e1773.mp4
Overlay/Shadow: To ensure the left-aligned text remains readable over the video, apply a
dark gradient shadow on the left side of the screen. It should cover about 2/3 of the screen
width, starting at 60% black opacity on the far left and smoothly fading to completely
transparent towards the right.
Base Color: The underlying background color (behind the video) should be a very dark
zinc/black (bg-zinc-950), and the default text color should be white.
2. Top Navigation
Layout: Spaced horizontally (flex between) with a max width of 1440px, centered on the
page with ample horizontal padding.
Logo (Left): Use an 'Aperture' icon (from Lucide React or similar) that rotates 90 degrees
smoothly when hovered over.
Links (Center): Include the links: "Use case", "Pricing", "Blog", "Docs", and "Company".
Hide these on mobile screens. The text should be small, medium weight, and 70% white
opacity, transitioning to solid white on hover.
Action Buttons (Right):
Login Button: Glassy dark style. 5% white background with heavy backdrop blur, a subtle 10%
white border, and white text. Add a slight white glowing shadow on hover.
Signup Button: Glassy light style. 80% white background with heavy backdrop blur, 50% white
border, and black text. Make the background solid white and enhance the glow on hover.
3. Hero Section
Layout: Left-aligned, vertically centered within the remaining screen height. Limit the
maximum width of the text content to about 768px (max-w-3xl).
Social Proof Tag: A small, pill-shaped glassy container (5% white bg, backdrop blur, 10%
white border) with a subtle drop shadow. Content: 3 overlapping, small circular user avatars
(use http://pravatar.cc) followed by the text "Join 1M+ developers". Extra small text,
medium weight, 80% white opacity. Exactly 20 pixels of space below this tag.
Main Heading:
Text: "Unleash the power" (Line 1) / "of Generative AI" (Line 2)
Typography: Very large (6xl to 80px), semi-bold, tight letter spacing, 1.05 line height.
Color: Solid white (100% opacity). Exactly 12 pixels of space below the heading.
Subheading: "The ultimate serverless compute engine designed to train, deploy, and scale
your machine learning models effortlessly." Large to extra-large font, light weight, wide
tracking, relaxed line height. White at exactly 80% opacity. 48 pixels of space below.
4. CTA Buttons
Layout: Placed side-by-side (or stacked on mobile) with a 16px gap.
Primary Button ("Get started"): Large, rounded pill shape. Glassy light style (80% white bg,
backdrop blur, 40% white border). Black text, semi-bold. Include a right-pointing arrow icon
that nudges right on hover. The button should scale up slightly (1.05x) on hover.
Secondary Button ("Book a demo"): Large, rounded pill shape. Glassy dark style (20% black bg,
backdrop blur, 15% white border). White text, medium weight. Background brightens slightly on hover.
--- END PROMPT ---
--- START PROMPT ---
Overview
Create a premium, modern, dark-themed landing page. The design should utilize deep
glassmorphism (heavy backdrop blurs, subtle semi-transparent borders) to create a sleek,
high-end tech aesthetic. The font should be clean, sans-serif, with tight tracking for
headers and loose tracking for body text.
1. Background & Base Layer
Video Background: Set a full-screen, auto-playing, looping, and muted video in the
absolute background at exactly 100% opacity.
Video URL: https://cdn.sceneai.art/Hero%20Section%20Video/c897580b-e301-4c46-94e3-3f2c975e1773.mp4
Overlay/Shadow: To ensure the left-aligned text remains readable over the video, apply a
dark gradient shadow on the left side of the screen. It should cover about 2/3 of the screen
width, starting at 60% black opacity on the far left and smoothly fading to completely
transparent towards the right.
Base Color: The underlying background color (behind the video) should be a very dark
zinc/black (bg-zinc-950), and the default text color should be white.
2. Top Navigation
Layout: Spaced horizontally (flex between) with a max width of 1440px, centered on the
page with ample horizontal padding.
Logo (Left): Use an 'Aperture' icon (from Lucide React or similar) that rotates 90 degrees
smoothly when hovered over.
Links (Center): Include the links: "Use case", "Pricing", "Blog", "Docs", and "Company".
Hide these on mobile screens. The text should be small, medium weight, and 70% white
opacity, transitioning to solid white on hover.
Action Buttons (Right):
Login Button: Glassy dark style. 5% white background with heavy backdrop blur, a subtle 10%
white border, and white text. Add a slight white glowing shadow on hover.
Signup Button: Glassy light style. 80% white background with heavy backdrop blur, 50% white
border, and black text. Make the background solid white and enhance the glow on hover.
3. Hero Section
Layout: Left-aligned, vertically centered within the remaining screen height. Limit the
maximum width of the text content to about 768px (max-w-3xl).
Social Proof Tag: A small, pill-shaped glassy container (5% white bg, backdrop blur, 10%
white border) with a subtle drop shadow. Content: 3 overlapping, small circular user avatars
(use http://pravatar.cc) followed by the text "Join 1M+ developers". Extra small text,
medium weight, 80% white opacity. Exactly 20 pixels of space below this tag.
Main Heading:
Text: "Unleash the power" (Line 1) / "of Generative AI" (Line 2)
Typography: Very large (6xl to 80px), semi-bold, tight letter spacing, 1.05 line height.
Color: Solid white (100% opacity). Exactly 12 pixels of space below the heading.
Subheading: "The ultimate serverless compute engine designed to train, deploy, and scale
your machine learning models effortlessly." Large to extra-large font, light weight, wide
tracking, relaxed line height. White at exactly 80% opacity. 48 pixels of space below.
4. CTA Buttons
Layout: Placed side-by-side (or stacked on mobile) with a 16px gap.
Primary Button ("Get started"): Large, rounded pill shape. Glassy light style (80% white bg,
backdrop blur, 40% white border). Black text, semi-bold. Include a right-pointing arrow icon
that nudges right on hover. The button should scale up slightly (1.05x) on hover.
Secondary Button ("Book a demo"): Large, rounded pill shape. Glassy dark style (20% black bg,
backdrop blur, 15% white border). White text, medium weight. Background brightens slightly on hover.
--- END PROMPT ---