User Profile

A user profile is a directory of stored user settings and information for the related user account.

Profile Cover Card

Design
Code
mentor 1

Jitu Chauhan

Software Engineer at Apple7+ years in UX Design & Brand Design.
SaveAsk questions
5.0(16 Reviews)
40+ Mentees
Gujarat,India

Skills

FrontendHTMLCSSReactJavascriptVuejsNext.js
Quick Responder
// import node module libraries
import Link from 'next/link'
import { Badge, Card, Image } from 'react-bootstrap'
import { GeoAltFill, HeartFill, PeopleFill, StarFill } from 'react-bootstrap-icons'


export const UserProfile1Example = () => {
    const skills = ['Frontend', 'HTML', 'CSS', 'React', 'Javascript', 'Vuejs', 'Next.js']
    return (
        <section className='p-4 bg-light rounded-3'>
            <Card>
                <div
                    className="rounded-top-3"
                    style={{
                        backgroundImage: 'url(/images/mentor/mentor-single.png)',
                        backgroundPosition: 'center',
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: 'cover',
                        height: '228px'
                    }}
                ></div>
                <Card.Body className="p-md-5">
                    <div className="d-flex flex-column gap-5">
                        <div className="mt-n8">
                            <Image src="/images/mentor/mentor-img-single.jpg" alt="mentor 1" className="img-fluid rounded-4 mt-n8" />
                        </div>
                        <div className="d-flex flex-column gap-5">
                            <div className="d-flex flex-column gap-3">
                                <div className="d-flex flex-md-row flex-column justify-content-between gap-2">
                                    <div>
                                        <h1 className="mb-0">Jitu Chauhan</h1>
                                        <div className="d-flex flex-lg-row flex-column gap-2">
                                            <small className="fw-medium text-gray-800">Software Engineer at Apple</small>
                                            <small className="fw-medium text-success">7+ years in UX Design & Brand Design.</small>
                                        </div>
                                    </div>
                                    <div className="d-flex flex-row gap-3 align-items-center">
                                        <Link href="#!" className="btn btn-outline-white">
                                            <span><HeartFill size={13} className="me-1" /> </span> Save
                                        </Link>
                                        <Link href="#!" className="btn btn-outline-white">Ask questions</Link>
                                    </div>
                                </div>
                                <div className="d-flex flex-md-row flex-column gap-md-4 gap-2">
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><StarFill size={13} className="text-warning align-baseline" /> </span>
                                        <span> <span className="text-gray-800 fw-bold">5.0</span>(16 Reviews) </span>
                                    </div>
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><PeopleFill size={13} className="text-primary align-baseline" /> </span>
                                        <span>  <span className="text-gray-800 fw-bold">40+</span>  Mentees </span>
                                    </div>
                                    <div className="d-flex flex-row gap-2 align-items-center lh-1">
                                        <span><GeoAltFill size={13} className="text-danger" /> </span>
                                        <span>Gujarat,India</span>
                                    </div>
                                </div>
                            </div>
                            <div className="d-flex flex-column gap-2">
                                <h3 className="mb-0">Skills</h3>
                                <div className="gap-2 d-flex flex-wrap">
                                    {skills.map((skill, index) => {
                                        return <Link href="#!" key={index} className="btn btn-tag btn-sm">{skill}</Link>
                                    })}
                                </div>
                            </div>
                            <div>
                                <Badge className="rounded-pill text-success-emphasis bg-success-subtle border border-success align-items-center">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" className="bi bi-reply-fill me-1 align-text-top" viewBox="0 0 16 16">
                                            <path d="M5.921 11.9 1.353 8.62a.72.72 0 0 1 0-1.238L5.921 4.1A.716.716 0 0 1 7 4.719V6c1.5 0 6 0 7 8-2.5-4.5-7-4-7-4v1.281c0 .56-.606.898-1.079.62z" />
                                        </svg>
                                    </span>
                                    Quick Responder
                                </Badge>
                            </div>
                        </div>
                    </div>
                </Card.Body>
            </Card>
        </section>
    )
}

Profile Card

Design
Code
mentor 1

Andrew Lupien

Quality Assurance Engineer
@ Microsoft
5 yrs Exp.
5(12 Reviews)
Starting from

$35.00

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


// import widget/custom components
import { MentorCard } from 'widgets'


export const UserProfile2Example = () => {
    const data = [
        {
            id: 1,
            image: '/images/mentor/mentor-img-7.jpg',
            mentorName: 'Andrew Lupien',
            mentorRole: 'Quality Assurance Engineer',
            company: "Microsoft",
            experience: 5,
            reviews: 12,
            ratings: 5.0,
            verified: true,
            price: 35,
            allowFreeTrial: true
        }
    ]
    return (
        <section className="py-6 bg-light">
            <Container>
                <Row>
                    <Col xxl={3} xl={4} md={6} xs={12}>
                        <MentorCard mentor={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

Profile With Counter

Design
Code
YOUR INSTRUCTOR

Hi, I’m James Davies,
I will be taking you through lessons.

Create beautiful website with this Geeks UI template. Get started building a site today.

45

Lessons

10,500+

Students

12+

Learning Hours

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


export const UserProfile3Example = () => {
    return (
        <section className="py-8 py-lg-18 bg-white">
            <Container>
                <Row className="mb-6 align-items-center justify-content-center">
                    <Col md={10}>
                        <Row className="align-items-center ">
                            <Col xl={6} md={12} sm={12} lg={7} className="text-center text-lg-start order-1 " >
                                <span className="text-primary mb-3 d-block text-uppercase fw-semi-bold ls-xl">
                                    YOUR INSTRUCTOR
                                </span>
                                <h2 className="mb-2 display-4 fw-bold mb-3">
                                    Hi, I’m <span className="text-primary">James Davies</span>, <br />I will be taking you through lessons.
                                </h2>
                                <p className="fs-3 pe-6">
                                    Create beautiful website with this Geeks UI template. Get started building a site today.
                                </p>
                                <hr className="my-5" />
                                <Row>
                                    <Col className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">45</h2>
                                        <p className="mb-0">Lessons</p>
                                    </Col>
                                    <Col lg={5} className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">10,500+</h2>
                                        <p className="mb-0">Students</p>
                                    </Col>
                                    <Col className="col-sm mb-3 mb-lg-0">
                                        <h2 className="h1 fw-bold mb-0 ls-xs">12+</h2>
                                        <p className="mb-0">Learning Hours</p>
                                    </Col>
                                </Row>
                            </Col>
                            <Col xl={{ span: 5, offset: 1 }} md={12} sm={12} lg={{ span: 5, order: 2 }} className="mb-6 mb-lg-0 text-center "  >
                                <Image src='/images/instructor/instructor-img.png' alt="" className="img-fluid" />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

Contact Card

Design
Code

Wade Warren

United States

Message
Enrolled7 July, 2020
Progress10%
// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';


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


export const UserProfile4Example = () => {
    const data = [
        {
            id: 1,
            name: 'Wade Warren',
            image: '/images/avatar/avatar-3.jpg',
            locations: 'United States',
            joined: '7 July, 2020',
            progress: 10,
        }
    ]
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={3} xl={4} md={6} xs={12}>
                        <StudentEnrolledCard student={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>


    )
}

Profile Card

Design
Code

Jenny Wilson

Front-end Developer, Designer

Students50,274
Instructor Rating4.6
Courses 6 
// import node module libraries
import { Col, Container, Row } from 'react-bootstrap';


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


export const UserProfile5Example = () => {
    const data = [
        {
            id: 1,
            name: 'Jenny Wilson',
            image: '/images/avatar/avatar-1.jpg',
            topic: 'Front-end Developer, Designer',
            courses: 6,
            students: 50274,
            rating: 4.6
        }
    ];
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={4} xl={4} md={6} xs={12}>
                        <StudentInstructorInfoCard instructor={data[0]} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

Profile Page Header

Design
Code

Jenny Wilson

@Jennywilson

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


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


export const UserProfile6Example = () => {
    const dashboardData = {
        avatar: '/images/avatar/avatar-1.jpg',
        name: 'Jenny Wilson',
        username: '@Jennywilson',
        linkname: 'Create New Course',
        link: '/marketing/instructor/add-new-course/',
    };
    return (
        <section className="py-3 bg-light rounded-3">
            <Container fluid>
                <ProfileCover dashboardData={dashboardData} />
            </Container>
        </section>
    )
}

Instructor Profile Card

Design
Code

Jenny Wilson

Front-end Developer, Designer

4.5Instructor Rating
11,604
Students
32
Courses
12,230
Reviews

I am an Innovation designer focussing on UX/UI based in Berlin. As a creative resident at Figma explored the city of the future and how new technologies.

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


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


export const UserProfile7Example = () => {
    const data = {
        id: 1,
        name: 'Jenny Wilson',
        image: '/images/avatar/avatar-1.jpg',
        designation: 'Front-end Developer, Designer',
        rating: 4.5,
        reviews: 12230,
        students: 11604,
        courses: 32,
        verified: true,
        link: '/marketing/instructor/profile',
        about: 'I am an Innovation designer focussing on UX/UI based in Berlin. As a creative resident at Figma explored the city of the future and how new technologies.'
    };
    return (
        <section className="py-6 bg-light rounded-3">
            <Container>
                <Row>
                    <Col xxl={5} xl={5} md={6} xs={12}>
                        <InstructorProfileSummaryCard data={data} />
                    </Col>
                </Row>
            </Container>
        </section>
    )
}
Buy Now