La Revoltosa
L
Designed byLa Revoltosa
View on AwwwardsOne-Shot Build Prompt
# Beverage Brand Landing Page Hero Section
Build a striking hero section for a beverage brand landing page with a bold red-orange gradient background, large typography, and product bottle imagery. This design features a modern, vibrant aesthetic with strong contrast and premium branding elements.
## Layout Structure
Create a full-viewport hero section with a centered content area. The layout uses a horizontal composition with text on the left and right sides, and a prominent product bottle positioned in the center. The background uses a vibrant red-orange gradient that fills the entire viewport.
## Key Components
**Header Navigation:** Minimal top navigation bar with logo centered and hamburger menu icon on the right. Include a small circular Instagram icon on the left side.
**Hero Typography:** Large, bold sans-serif display text split across two lines reading "LA BURBUJA" and "IBERICA" in all caps. The typography should be substantial and commanding, using white color for maximum contrast against the red background.
**Product Bottle:** Central glass bottle with swing-top closure, featuring the brand logo and illustration. The bottle should have realistic glass transparency effects and be positioned to overlap with the typography.
**Background Elements:** Subtle circular graphic elements in the upper left area to add visual interest without competing with the main content.
**Scroll Indicator:** Small "SCROLL" text in the bottom right corner to guide user interaction.
## Responsive Behavior
On desktop, maintain the horizontal layout with ample spacing. On tablet and mobile, stack elements vertically while preserving the dramatic typography scale. Ensure the bottle imagery remains prominent across all breakpoints.
## Dark/Light Mode
This design uses a fixed vibrant red-orange color scheme. In dark mode implementations, maintain the bold red background while ensuring sufficient contrast for any additional UI elements.
**Design specification**
<design-specification>
```jsonc
{
"project": {
"name": "Beverage Brand Hero",
"description": "Bold landing page hero section with vibrant red gradient background, large typography, and central product bottle"
},
"tokens": {
"colors": {
"primary-500": { "light": "#FF4423", "dark": "#FF4423" },
"primary-600": { "light": "#E53E3E", "dark": "#E53E3E" },
"accent-500": { "light": "#FF6B47", "dark": "#FF6B47" },
"neutral-50": { "light": "#FFFFFF", "dark": "#FFFFFF" },
"neutral-900": { "light": "#1A1A1A", "dark": "#1A1A1A" },
"glass-overlay": { "light": "rgba(255, 255, 255, 0.1)", "dark": "rgba(255, 255, 255, 0.1)" }
},
"typography": {
"families": { "sans": "Inter, system-ui, sans-serif", "display": "Bebas Neue, Impact, sans-serif" },
"sizes": {
"xs": "12px",
"sm": "14px",
"base": "16px",
"lg": "18px",
"xl": "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "48px",
"5xl": "64px",
"6xl": "96px",
"7xl": "128px"
},
"weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700", "black": "900" },
"lineHeights": { "none": "1", "tight": "1.1", "normal": "1.5", "relaxed": "1.75" },
"letterSpacing": { "tight": "-0.05em", "normal": "0em", "wide": "0.1em", "wider": "0.2em" }
},
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"2xl": "48px",
"3xl": "64px",
"4xl": "96px",
"rationale": "8px base unit with geometric progression for consistent rhythm"
},
"radii": {
"sm": "4px",
"md": "8px",
"lg": "12px",
"xl": "16px",
"full": "9999px"
},
"shadows": {
"sm": { "light": "0 1px 2px rgba(0,0,0,0.05)", "dark": "0 1px 2px rgba(0,0,0,0.5)" },
"md": { "light": "0 4px 6px rgba(0,0,0,0.07)", "dark": "0 4px 6px rgba(0,0,0,0.6)" },
"lg": { "light": "0 10px 15px rgba(0,0,0,0.1)", "dark": "0 10px 15px rgba(0,0,0,0.7)" }
}
},
"screens": [
{
"name": "HeroLanding",
"route": "/",
"layout": "Full viewport hero section with gradient background and centered content composition",
"components": [
{
"name": "HeroContainer",
"type": "section",
"properties": {
"background": "linear-gradient(135deg, tokens.colors.primary-500, tokens.colors.accent-500)",
"minHeight": "100vh",
"padding": "tokens.spacing.lg",
"position": "relative",
"overflow": "hidden"
},
"states": {
"default": {}
}
},
{
"name": "NavigationBar",
"type": "header",
"properties": {
"position": "absolute",
"top": "tokens.spacing.lg",
"left": "tokens.spacing.lg",
"right": "tokens.spacing.lg",
"display": "flex",
"justifyContent": "space-between",
"alignItems": "center",
"zIndex": "10"
},
"states": {
"default": {}
}
},
{
"name": "BrandLogo",
"type": "image",
"properties": {
"color": "tokens.colors.neutral-50",
"fontSize": "tokens.typography.sizes.lg",
"fontFamily": "tokens.typography.families.display",
"letterSpacing": "tokens.typography.letterSpacing.wide"
},
"states": {
"default": {}
}
},
{
"name": "MenuButton",
"type": "button",
"properties": {
"background": "tokens.colors.neutral-50",
"borderRadius": "tokens.radii.full",
"width": "48px",
"height": "48px",
"display": "flex",
"alignItems": "center",
"justifyContent": "center"
},
"states": {
"default": {},
"hover": {
"background": "tokens.colors.glass-overlay"
}
}
},
{
"name": "HeroTitle",
"type": "h1",
"properties": {
"fontSize": "tokens.typography.sizes.7xl",
"fontFamily": "tokens.typography.families.display",
"fontWeight": "tokens.typography.weights.black",
"color": "tokens.colors.neutral-50",
"letterSpacing": "tokens.typography.letterSpacing.tight",
"lineHeight": "tokens.typography.lineHeights.none",
"textAlign": "center",
"position": "absolute",
"top": "50%",
"left": "50%",
"transform": "translate(-50%, -50%)",
"zIndex": "5"
},
"states": {
"default": {}
}
},
{
"name": "ProductBottle",
"type": "image",
"properties": {
"position": "absolute",
"top": "50%",
"left": "50%",
"transform": "translate(-50%, -50%)",
"maxHeight": "80vh",
"zIndex": "7",
"filter": "drop-shadow(0 20px 40px rgba(0,0,0,0.3))"
},
"states": {
"default": {}
}
},
{
"name": "ScrollIndicator",
"type": "span",
"properties": {
"position": "absolute",
"bottom": "tokens.spacing.lg",
"right": "tokens.spacing.lg",
"color": "tokens.colors.neutral-50",
"fontSize": "tokens.typography.sizes.sm",
"letterSpacing": "tokens.typography.letterSpacing.wider",
"fontWeight": "tokens.typography.weights.medium"
},
"states": {
"default": {}
}
},
{
"name": "BackgroundGraphics",
"type": "div",
"properties": {
"position": "absolute",
"top": "tokens.spacing.4xl",
"left": "tokens.spacing.4xl",
"width": "120px",
"height": "120px",
"border": "2px solid tokens.colors.glass-overlay",
"borderRadius": "tokens.radii.full",
"zIndex": "1"
},
"states": {
"default": {}
}
}
]
}
]
}
```
</design-specification>Copy this prompt and paste it into your AI coding assistant to build this design.