Stats
A component that displays content as a stats with numbers.
Stats #1
316,000+
Qualified Instructor1.8 Billion+
Course enrolments41,000+
Courses in 42 languages179,000+
Online Videos// import node module librariesimport { Col, Row, Container } from 'react-bootstrap';// import custom componentsimport StatTopBigIcon from 'components/marketing/common/stats/StatTopBigIcon';export const Stats1Example = () => {return (<section className="py-8"><Container><Row><Col lg={3} md={6} className="border-top-md border-bottom border-end-md "><StatTopBigIcontitle="Qualified Instructor"value="316,000+"iconName="award"colorVariant="info"/></Col><Col lg={3} md={6} className="border-top-md border-bottom border-end-lg "><StatTopBigIcontitle="Course enrolments"value="1.8 Billion+"iconName="users"colorVariant="warning"/></Col><Col lg={3} md={6} className="border-top-lg border-bottom border-end-md "><StatTopBigIcontitle="Courses in 42 languages"value="41,000+"iconName="tv"colorVariant="primary"/></Col><Col lg={3} md={6} className="border-top-lg border-bottom "><StatTopBigIcontitle="Online Videos"value="179,000+"iconName="film"colorVariant="success"/></Col></Row></Container></section>)}
Stats #2
Our core values
Geeks is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.
20M
Learners
57K
Instructors
21K
Courses
380M
Course enrollments
// import node module librariesimport { Col, Container, Row } from 'react-bootstrap';export const Stats2Example = () => {const title = 'Our core values';const description = 'Geeks is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed.';const counters = [{ id: 1, title: 'Learners', value: '20M' },{ id: 2, title: 'Instructors', value: '57K' },{ id: 3, title: 'Courses', value: '21K' },{ id: 4, title: 'Course enrollments', value: '380M' }];return (<section className='py-8'><Container><Row><Col md={6} sm={12} className="offset-right-md-6 mb-6"><h2 className="display-4 mb-3 fw-bold">{title}</h2><p className="lead">{description}</p></Col></Row><Row>{counters.map((item, index) => {return (<Col lg={3} md={6} sm={6} xs={6} key={index}><div className="border-top pt-4 mt-6 mb-5"><h1 className="display-3 fw-bold mb-0">{item.value}</h1><p className="text-uppercase text-muted">{item.title}</p></div></Col>);})}</Row></Container></section>);}
Stats #3
Revenue
$467.34
Earning this month$203.23Students Enrollments
12,000
New this month120+Courses Rating
4.80
Rating this month10+// import node module librariesimport { Row, Col } from 'react-bootstrap';// import custom componentsimport StatRightBadge from 'components/marketing/common/stats/StatRightBadge';export const Stats3Example = () => {return (<section className="p-4 bg-light rounded-3"><Row><Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0"><StatRightBadgetitle="Revenue"subtitle="Earning this month"value="$467.34"badgeValue="$203.23"colorVariant="success"/></Col><Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0"><StatRightBadgetitle="Students Enrollments"subtitle="New this month"value="12,000"badgeValue="120+"colorVariant="info"/></Col><Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0"><StatRightBadgetitle="Courses Rating"subtitle="Rating this month"value="4.80"badgeValue="10+"colorVariant="warning"/></Col></Row></section>)}
Stats #4
$3,210
Earning this month
$3,800
Account Balance
$10,800
Life Time Sales
// import node module librariesimport { Col, Row } from 'react-bootstrap';// import custom componentsimport StatTopIcon from 'components/marketing/common/stats/StatTopIcon';export const Stats4Example = () => {return (<section className="p-4 bg-light rounded-3"><Row><Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0"><StatTopIcontitle="Earning this month"value="$3,210"iconName="folder"colorVariant="primary"progress={65}/></Col><Col lg={4} md={12} sm={12} className="mb-4 mb-lg-0"><StatTopIcontitle="Account Balance"value="$3,800"iconName="shopping-bag"colorVariant="danger"progress={65}/></Col><Col lg={4} md={12} sm={12}><StatTopIcontitle="Life Time Sales"value="$10,800"iconName="send"colorVariant="warning"progress={65}/></Col></Row></section>);}
Stats #5
TOTAL POSTS
2,000
100 Last 30 DaysASSETS
367
300+ Media ObjectUSERS
13,234
1.5k in 30DaysCOMMENTS
120
20+ Comments// import node module librariesimport { Col, Row } from 'react-bootstrap';import { mdiAccountMultiple, mdiImageMultiple, mdiMessageReplyText, mdiTextBoxMultiple } from '@mdi/js';// import custom componentsimport StatRightBGIcon from 'components/dashboard/common/stats/StatRightBGIcon';export const Stats5 = () => {return (<section className="p-4 bg-light rounded-3"><Row><Col xl={3} lg={6} md={12} sm={12}><StatRightBGIcontitle="TOTAL POSTS"value="2,000"summary="100 Last 30 Days"iconName={mdiTextBoxMultiple}iconColorVariant="primary"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightBGIcontitle="ASSETS"value="367"summary="300+ Media Object"iconName={mdiImageMultiple}iconColorVariant="warning"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightBGIcontitle="USERS"value="13,234"summary="1.5k in 30Days"iconName={mdiAccountMultiple}iconColorVariant="success"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightBGIcontitle="COMMENTS"value="120"summary="20+ Comments"iconName={mdiMessageReplyText}iconColorVariant="info"classValue="mb-4"/></Col></Row></section>);}
Stats #6
SALES
$10,800
+20.9$Number of salesCOURSES
2,456
120+Number of pendingSTUDENTS
1,22,456
+1200StudentsINSTRUCTOR
22,786
+200Instructor// import node module librariesimport { Row, Col } from 'react-bootstrap';// import custom componentsimport StatRightIcon from 'components/dashboard/common/stats/StatRightIcon';export const Stats6 = () => {return (<section className="p-4 bg-light rounded-3"><Row><Col xl={3} lg={6} md={12} sm={12}><StatRightIcontitle="SALES"value="$10,800"summary="Number of sales"summaryValue="+20.9$"summaryIcon="up"showSummaryIconiconName="shopping-bag"iconColorVariant="primary"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightIcontitle="COURSES"value="2,456"summary="Number of pending"summaryValue="120+"summaryIcon="down"iconName="book-open"iconColorVariant="primary"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightIcontitle="STUDENTS"value="1,22,456"summary="Students"summaryValue="+1200"summaryIcon="up"showSummaryIconiconName="users"iconColorVariant="primary"classValue="mb-4"/></Col><Col xl={3} lg={6} md={12} sm={12}><StatRightIcontitle="INSTRUCTOR"value="22,786"summary="Instructor"summaryValue="+200"summaryIcon="up"showSummaryIconiconName="user-check"iconColorVariant="primary"classValue="mb-4"/></Col></Row></section>);}