​
Variants

​
Default

resources/js/Components/Sections/HeroDefault.vue

​
Align

align?: "left" | "center" | "right" You can pass the prop align to the component to display it’s layout in three different ways.
Defaults to center.

​
Floating

resources/js/Components/Sections/HeroFloating.vue This version has centered content with floating blocks where you can put images, colors, logos, etc.
By default there are six floating blocks, but you can easily update this. This components has no props.
More Hero Components will be available with v2.

​
Testimonials

You can pass testimonials stats to any hero component. By default, they are used on Homepage, passed from app/Http/Controllers/HomepageController.php to resources/js/Pages/Index.vue component as:
  • avgRating: Average rating of all approved reviews.
  • testimonialCount: Total exact number of approved reviews.
  • testimonialUsers: Contains list of recent 6 reviewers (you can update that number in HomepageController) and rounded number of total reviews.

​
Stars and rating

Show stars with average rating and total number of reviews: 
<StarsRating v-if="avgRating" :rating="avgRating" :total-reviews="testimonialCount" />
Show stars with average rating: 
<StarsRating v-if="avgRating" :rating="avgRating" />

​
Reviewers

Show avatars (or acronym fallback) with name on hover and total number of reviewers. 
<AvatarGroup v-if="reviewers" :data="reviewers" :total="totalReviewers" />
This number is formatted by default using get_total_value() helper function.
For more details visit component pages: Stars rating and Avatar groups.