Stats

A component that displays content as a stats with numbers.

Stats #1

Design

Code

316,000+

Qualified Instructor

1.8 Billion+

Course enrolments

41,000+

Courses in 42 languages

179,000+

Online Videos

// import node module libraries
import { Col, Row, Container } from 'react-bootstrap';

// import widget/custom components
import { StatTopBigIcon } from 'widgets';

export const Stats1Example = () => {
    return (
        <section className="py-8">
            <Container>
                <Row>
                    <Col lg={3} md={6} className="border-top-md border-bottom border-end-md ">
                        <StatTopBigIcon
                            title="Qualified Instructor"
                            value="316,000+"
                            iconName="award"
                            colorVariant="info"
                        />
                    </Col>
                    <Col lg={3} md={6} className="border-top-md border-bottom border-end-lg ">
                        <StatTopBigIcon
                            title="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 ">
                        <StatTopBigIcon
                            title="Courses in 42 languages"
                            value="41,000+"
                            iconName="tv"
                            colorVariant="primary"
                        />
                    </Col>
                    <Col lg={3} md={6} className="border-top-lg border-bottom ">
                        <StatTopBigIcon
                            title="Online Videos"
                            value="179,000+"
                            iconName="film"
                            colorVariant="success"
                        />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

Stats #2

Design

Code

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 libraries
import { 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

Design

Code

Revenue

$467.34

Earning this month$203.23

Students Enrollments

12,000

New this month120+

Courses Rating

4.80

Rating this month10+

// import node module libraries
import { Row, Col } from 'react-bootstrap';

// import widget/custom components
import { StatRightBadge } from 'widgets';

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">
                    <StatRightBadge
                        title="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">
                    <StatRightBadge
                        title="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">
                    <StatRightBadge
                        title="Courses Rating"
                        subtitle="Rating this month"
                        value="4.80"
                        badgeValue="10+"
                        colorVariant="warning"
                    />
                </Col>
            </Row>
        </section>
    )
}

Stats #4

Design

Code

$3,210

Earning this month

$3,800

Account Balance

$10,800

Life Time Sales

// import node module libraries
import { Col, Row } from 'react-bootstrap';

// import widget/custom components
import { StatTopIcon } from 'widgets';

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">
                    <StatTopIcon
                        title="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">
                    <StatTopIcon
                        title="Account Balance"
                        value="$3,800"
                        iconName="shopping-bag"
                        colorVariant="danger"
                        progress={65}
                    />
                </Col>
                <Col lg={4} md={12} sm={12}>
                    <StatTopIcon
                        title="Life Time Sales"
                        value="$10,800"
                        iconName="send"
                        colorVariant="warning"
                        progress={65}
                    />
                </Col>
            </Row>
        </section>
    );
}

Stats #5

Design

Code

TOTAL POSTS

2,000

100 Last 30 Days

ASSETS

367

300+ Media Object

USERS

13,234

1.5k in 30Days

COMMENTS

120

20+ Comments

// import node module libraries
import { Col, Row } from 'react-bootstrap';
import { mdiAccountMultiple, mdiImageMultiple, mdiMessageReplyText, mdiTextBoxMultiple } from '@mdi/js';

// import widget/custom components
import { StatRightBGIcon } from 'widgets';

export const Stats5 = () => {
    return (
        <section className="p-4 bg-light rounded-3">
            <Row>
                <Col xl={3} lg={6} md={12} sm={12}>
                    <StatRightBGIcon
                        title="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}>
                    <StatRightBGIcon
                        title="ASSETS"
                        value="367"
                        summary="300+ Media Object"
                        iconName={mdiImageMultiple}
                        iconColorVariant="warning"
                        classValue="mb-4"
                    />
                </Col>
                <Col xl={3} lg={6} md={12} sm={12}>
                    <StatRightBGIcon
                        title="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}>
                    <StatRightBGIcon
                        title="COMMENTS"
                        value="120"
                        summary="20+ Comments"
                        iconName={mdiMessageReplyText}
                        iconColorVariant="info"
                        classValue="mb-4"
                    />
                </Col>
            </Row>
        </section>
    );
}

Stats #6

Design

Code

SALES

$10,800

+20.9$Number of sales

COURSES

2,456

120+Number of pending

STUDENTS

1,22,456

+1200Students

INSTRUCTOR

22,786

+200Instructor

// import node module libraries
import { Row, Col } from 'react-bootstrap';

// import widget/custom components
import { StatRightIcon } from 'widgets';

export const Stats6 = () => {
    return (
        <section className="p-4 bg-light rounded-3">
            <Row>
                <Col xl={3} lg={6} md={12} sm={12}>
                    <StatRightIcon
                        title="SALES"
                        value="$10,800"
                        summary="Number of sales"
                        summaryValue="+20.9$"
                        summaryIcon="up"
                        showSummaryIcon
                        iconName="shopping-bag"
                        iconColorVariant="primary"
                        classValue="mb-4"
                    />
                </Col>

                <Col xl={3} lg={6} md={12} sm={12}>
                    <StatRightIcon
                        title="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}>
                    <StatRightIcon
                        title="STUDENTS"
                        value="1,22,456"
                        summary="Students"
                        summaryValue="+1200"
                        summaryIcon="up"
                        showSummaryIcon
                        iconName="users"
                        iconColorVariant="primary"
                        classValue="mb-4"
                    />
                </Col>

                <Col xl={3} lg={6} md={12} sm={12}>
                    <StatRightIcon
                        title="INSTRUCTOR"
                        value="22,786"
                        summary="Instructor"
                        summaryValue="+200"
                        summaryIcon="up"
                        showSummaryIcon
                        iconName="user-check"
                        iconColorVariant="primary"
                        classValue="mb-4"
                    />
                </Col>
            </Row>
        </section>
    );
}