Hero Components

Hero sections are the first thing visitors see on your landing page. SaaSKit includes 5 pre-built hero variants.

Available Hero Variants

Hero1 - Centered Hero

Perfect for simple, focused messaging.

---
import Hero1 from '../components/heros/Hero1';
---

<Hero1 />

Features:

Centered content
Primary CTA button
Secondary link
Clean, minimal design

Hero2 - Split Hero

Ideal for showcasing your product with an image.

---
import Hero2 from '../components/heros/Hero2';
---

<Hero2 />

Features:

Split layout (text + image)
Responsive design
Multiple CTAs
Image on right side

Hero3 - Gradient Hero

Eye-catching gradient background with features.

---
import Hero3 from '../components/heros/Hero3';
---

<Hero3 />

Features:

Gradient background
Feature highlights
Animated elements
Modern aesthetic

Hero4 - Minimal Hero

Clean, minimal design for sophisticated brands.

---
import Hero4 from '../components/heros/Hero4';
---

<Hero4 />

Features:

Minimal design
Typography-focused
Subtle animations
Professional look

Hero5 - Video Hero

Hero with video background support.

---
import Hero5 from '../components/heros/Hero5';
---

<Hero5 />

Features:

Video background option
Overlay support
Play button
Full-screen option

Customization

Changing Text

Edit the component file directly or pass props:

---
import Hero1 from '../components/heros/Hero1';
---

<Hero1 
  title="Your Custom Title"
  subtitle="Your custom subtitle"
  primaryCTA="Get Started"
  secondaryCTA="Learn More"
/>

Changing Colors

Modify Tailwind classes in the component:

// Change background
<div className="bg-gradient-to-r from-blue-500 to-purple-600">

// Change button
<button className="bg-green-500 hover:bg-green-600">

Adding Images

Replace placeholder images:

<img 
  src="/your-image.jpg" 
  alt="Description"
  className="w-full h-auto"
/>

Best Practices

Clear Value Proposition - State your value clearly
Single Primary CTA - Don’t overwhelm with options
Mobile Responsive - Test on all screen sizes
Fast Loading - Optimize images and assets
Accessible - Include proper alt text and ARIA labels

Examples

Custom Hero with Props

---
import Hero1 from '../components/heros/Hero1';
---

<Hero1 
  title="Transform Your Business"
  subtitle="The all-in-one solution for modern teams"
  primaryCTA="Start Free Trial"
  primaryCTALink="/signup"
  secondaryCTA="Watch Demo"
  secondaryCTALink="/demo"
/>

Combining with Other Sections

---
import Hero1 from '../components/heros/Hero1';
import Features from '../components/sections/Features';
---

<Hero1 />
<Features />

Performance Tips

Use optimized images (WebP format)
Lazy load below-the-fold content
Minimize JavaScript
Use CSS animations over JS animations

Next Steps

Section Components - Add content sections
Customization Guide - Learn advanced customization
Styling Guide - Master Tailwind CSS

Choose the hero that fits your brand! 🎨