Hero

The Hero component represents a hero section of the website, featuring a captivating title, description, and a call-to-action form.

Props

The Hero component accepts the following props:

• subtitle (string, required): The subtitle or tagline for the hero section.

• titleFront (string, required): The front part of the title displayed in the hero section.

• titleHighlight (string, required): The highlighted part of the title displayed in the hero section.

• titleBack (string, required): The back part of the title displayed in the hero section.

• description (string, required): The description or main content of the hero section.

• buttonText (string, required): The text to be displayed on the call-to-action button.

• callToAction (string, required): Additional text or information regarding the call-to-action.

• shapeImages (string[], required): An array of three image paths representing shapes or illustrations to be displayed in the hero section.

• shapeImageAlt (string[], required): An array of three alternate text descriptions for the shape images.

• heroImageLight (string, required): The image path for the light-themed version of the hero image.

• heroImageDark (string, required): The image path for the dark-themed version of the hero image.

Usage Example

<Hero
    subtitle='🔥 Solid is one of the best option for you.'
    titleFront='Complete Tailwind CSS'
    titleHighlight='Template'
    titleBack='for SaaS Website'
    description='Solid is a complete Tailwind CSS template crafted specially for SaaS, Software Mobile App and Web App Sites.'
    buttonText='Get Started'
    callToAction='Try for free no credit card required.'
    shapeImages={['./images/shape/shape-01.png', './images/shape/shape-02.svg', './images/shape/shape-03.svg']}
    shapeImageAlt={['shape', 'shape', 'shape']}
    heroImageLight='./images/hero/hero-light.svg'
    heroImageDark='./images/hero/hero-dark.svg'
/>

In the example above, the Hero component is used with sample data to render a hero section. Make sure to replace the prop values with the appropriate data and adjust the image paths based on your project structure.

Styling

The Hero component uses Tailwind CSS utility classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on Tailwind CSS, refer to the official documentation: https://tailwindcss.com/docs