Skip to main content

Hero Sections

JetShip offers four variants of fully customizable and beautifully crafted Hero sections. Each variant is built as a React component that you can easily import and customize. Below are the available Hero sections with their usage examples.


1. Horizontal Hero Section With Image

The Horizontal Hero Section With Image displays your hero content in a horizontal layout with an image background. Perfect for creating a strong first impression on your landing page with a clean, professional look.

Hero Horizontal Image


2. Vertical Hero Section With Gradient

The Vertical Hero Section With Gradient features a vertical layout with a gradient background. This section creates visual hierarchy and draws attention to your main message while maintaining a modern, sophisticated appearance.

Hero Vertical Gradient


3. Vertical Hero Section With Video

The Vertical Hero Section With Video combines engaging video content with your hero message. Ideal for products that benefit from dynamic visual demonstrations or creating an immersive brand experience.

Hero Vertical Video


4. Horizontal Hero Section With Half Image

The Horizontal Hero Section With Half Image balances content and visuals with a 50/50 split layout. This design creates a strong visual impact while maintaining focus on your message, perfect for product launches or feature highlights.

Hero Horizontal Half Image


Customization Note

Due to the complex nature of these hero sections and their varied text content, customization through props is not available. To customize the content, styling, or layout, you'll need to modify the component files directly in packages/ui/src/blocks/hero.