Welcome to Nova Suite

Experience Work Without the Noise with our complete workspace solution.

Get Started Learn More

Simple & Clean

Just add the hero tag and watch the magic happen. No complex setup required.

One Call to Action

Sometimes you just need one button to guide users to the next step.

Take Action

Detailed Information

This hero section demonstrates how the component handles longer content. The animated background and particles create a dynamic, engaging experience that draws attention to your message while maintaining readability and visual appeal.

Primary Action Secondary Action Third Option

How to Use the Hero Component

Basic Usage

<hero>
    <div class="particle-1"></div>
    <div class="particle-2"></div>
    <div class="particle-3"></div>
    
    <div class="hero-content">
        <h1>Your Title</h1>
        <p>Your description text</p>
        <div class="hero-buttons">
            <a href="#" class="hero-button primary">Primary Button</a>
            <a href="#" class="hero-button secondary">Secondary Button</a>
        </div>
    </div>
</hero>

Features

  • • Animated Background: Shifting gradient with Nova brand colors
  • • Floating Particles: Animated dots that move around the hero area
  • • Gradient Text: Animated gradient effect on the main heading
  • • Staggered Animations: Content fades in with timing delays
  • • Responsive Design: Works perfectly on all screen sizes
  • • Interactive Buttons: Hover effects and glow animations

Customization

The hero component uses CSS custom properties, so you can easily customize colors by modifying the CSS variables in css/styles.css.