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.
- Preview
- Code
import HeroHorizontalImage from '@repo/ui/blocks/hero/HeroHorizontalImage'
const Component = () => {
return <HeroHorizontalImage />
}
export default Component
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.
- Preview
- Code
import HeroVerticalGradient from '@repo/ui/blocks/hero/HeroVerticalGradient'
const Component = () => {
return <HeroVerticalGradient />
}
export default Component
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.
- Preview
- Code
import HeroVerticalVideo from '@repo/ui/blocks/hero/HeroVerticalVideo'
const Component = () => {
return <HeroVerticalVideo />
}
export default Component
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.
- Preview
- Code
import HeroHorizontalHalfImage from '@repo/ui/blocks/hero/HeroHorizontalHalfImage'
const Component = () => {
return <HeroHorizontalHalfImage />
}
export default Component
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
.