Hero Sections

A hero sections is a full screen section typically consisting of a background image, or video, or illustrations, or animations, with text.


Hero #1

// import widget/custom components
import { HeroTypedMentors } from 'widgets';
// import required data files
import MentorListData from 'data/marketing/mentor/MentorListData';
export const Hero1Example = () => {
return <HeroTypedMentors
title='Learn a new skill, launch a project, land your dream career.'
typedBefore='1-on-1'
typedArray={['Javascript', 'Startup', 'React', 'Marketing', 'Branding']}
typedAfter='Mentorship'
tags={['Frontend', 'Devops', 'UI/UX designer', 'Data Science', 'Full Stack', 'Backend', 'Data Analyst']}
marqueeData={MentorListData}
/>
}

Hero #2

Learn today’s most in-demand-skills

Classes & Courses website template to start creating your stunning website. All templates are fully customizable.

  • No credit card required
  • Customer service 24/7
  • No setup fee
  • Cancel any time
Explore Online Courses
graphics-2
online course
graphics-1
// import widget/custom components
import { HeroEducationRightImage } from 'widgets';
export const Hero2Example = () => {
return <HeroEducationRightImage
headingPart1='Learn today’s most in-'
headingPart2='demand-skills'
description='Classes & Courses website template to start creating your stunning website. All templates are fully customizable.'
bulletArray={['No credit card required', 'Customer service 24/7', 'No setup fee', 'Cancel any time']}
buttonText='Explore Online Courses'
buttonLink='#'
/>
}

Hero #3

Most trusted education platform

Grow your skills and advance career

Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.

Join Free NowWatch Demo
// import widget/custom components
import { HeroAcademy } from 'widgets';
export const Hero3Example = () => {
return <HeroAcademy
bulletArray={['Most trusted education platform']}
title='Grow your skills and advance career'
description='Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.'
buttonText='Join Free Now'
buttonLink='#'
youTubeVideoID='JRzWRZahOVU' />
}

Hero #4

Find your dream job that you love to do.

The largest remote work community in the world. Sign up and post a job or create your developer profile.

Currently listing 30,642 jobs from 5,717 companies
// import widget/custom components
import { HeroFindJobs } from 'widgets';
export const Hero4Example = () => {
return <HeroFindJobs
title='Find your dream job that you love to do.'
description='The largest remote work community in the world. Sign up and post a job or create your developer profile.'
totalJobs={30642}
totalCompanies={5717}
/>
}

Hero #5

Modern web apps shipped faster

Simple to use, beautiful UI design
Complete complex project with ease
An intuitive admin app for developers
TRUSTED BY MILLIONS OF DEVELOPERS & THOUSANDS OF ENTERPRISE TEAMS
// import widget/custom components
import { HeroGradient } from 'widgets';
// import data files
import LogoList2 from 'data/clientlogos/LogoList2';
export const Hero5Example = () => {
return <HeroGradient
title='Modern web apps shipped faster'
bulletArray={['Simple to use, beautiful UI design', 'Complete complex project with ease', 'An intuitive admin app for developers']}
buttonText='Get started for Free'
buttonLink='#'
hrefText='Questions? Talk to an expert'
hrefLink='#'
logos={LogoList2}
/>
}

Hero #6

Beta-v2.0.0 - Just shipped version

Request Access for Product

Geeks is a customizable, Bootstrap based UI Kits and Templates for Developers.

Rated 5 Stars by over 100+ Users
// import widget/custom components
import { HeroFormCenter } from 'widgets';
export const Hero6Example = () => {
return <HeroFormCenter
badgeText='<span class="fw-bold">Beta-v2.0.0 </span> - Just shipped version'
title='Request Access for Product'
description='Geeks is a customizable, Bootstrap based UI Kits and Templates for Developers.'
promotionalText='Rated 5 Stars <span class="text-muted">by over</span> <span class="text-primary"> 100+ Users</span>'
/>
}

Hero #7

Become a Vanilla JavaScript Developer

In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building incredible, powerful JavaScript applications.

4 Hours
12 Videos
10,234+ Enrolled
Watch Preview

Create Free Account

OR
// import widget/custom components
import { HeroFormRight } from 'widgets';
export const Hero7Example = () => {
return <HeroFormRight
title='Become a Vanilla JavaScript Developer'
description='In this tutorial, we are going to learn about JavaScript (Vanilla JS) - for building incredible, powerful JavaScript applications.'
hours={4}
videos={12}
enrolled={10234}
buttonText='Watch Preview'
buttonLink='#'
/>
}

Hero #8

Build Better|

Build skills with courses Join Geeks to watch, play, learn, make, and discover, uscipit esi viimentum laoreet non et odio.

View Plans Try for Free
  • 30,000 online courses
  • Expert instruction
  • Lifetime access
// import widget/custom components
import { HeroTypedCourses } from 'widgets';
export const Hero8Example = () => {
return <HeroTypedCourses
typedBefore='Build Better'
typedArray={['Skills', 'Products', 'Teams', 'Future']}
description='Build skills with courses Join Geeks to watch, play, learn, make, and discover, uscipit esi viimentum laoreet non et odio.'
bulletArray={['30,000 online courses', 'Expert instruction', 'Lifetime access']}
buttonText1='View Plans'
buttonLink1='#'
buttonText2='Try for Free'
buttonLink2='#'
/>
}

Hero #9

Welcome to Geeks UI Learning Application

Hand-picked Instructor and expertly crafted courses, designed for the modern students and entrepreneur.

Browse Courses Are You Instructor?
// import widget/custom components
import { HeroHeaderDefault } from 'widgets';
export const Hero9Example = () => {
return <HeroHeaderDefault
title='Welcome to Geeks UI Learning Application'
description='Hand-picked Instructor and expertly crafted courses, designed for the modern students and entrepreneur.'
buttonText1='Browse Courses'
buttonLink1='/marketing/courses/course-filter-page/'
buttonText2='Are You Instructor?'
buttonLink2='/authentication/sign-in/'
/>
}
Buy Now