Merge commit '0f2807e6a518c09f4926bc5cda65c1ce3321732d'

8 files changed, 1034 insertions, 0 deletions

diff --git a/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml
new file mode 100644
index 0000000..8dfbff3
--- /dev/null
+++ b/Course/Detail/Classic/Content/Main/TabContents/Curriculum/CourseLecture.ui.qml
@@ -0,0 +1,63 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Rectangle {
+	width: coursecontent.width
+	height: coursecontent.height
+	color: "#fff"
+	RowLayout {
+		id: coursecontent
+		spacing: 8
+		Layout.margins: 8
+		Button {
+			id: play
+			icon.source: "Font-Awesome/svgs/solid/circle-play.svg"
+			icon.color: "#ffffff"
+			Layout.margins: 8
+			display: AbstractButton.IconOnly
+			Layout.preferredHeight: 32
+			Layout.preferredWidth: 32
+			Layout.minimumHeight: 32
+			Layout.minimumWidth: 32
+			background: Rectangle {
+				color: play.down ? "#ff2c2c": "#4dff2c2c"
+				radius: 100
+			}
+		}
+		Label {
+			id: coursetitle
+			Layout.margins: 8
+			color: "#000000"
+			text: "Course title"
+			font.pointSize: 16
+			font.family: "roboto"
+			verticalAlignment: Text.AlignVCenter
+		}
+		Label {
+			Layout.margins: 8
+			id: premiumbadge
+			color: "#ffffff"
+			text: "Premium"
+			font.pointSize: 12
+			font.family: "roboto"
+			verticalAlignment: Text.AlignVCenter
+			rightPadding: 8
+			leftPadding: 8
+			padding: 4
+			background: Rectangle {
+				color: "#fd7e14"
+				radius: 8
+			}
+		}
+		Label {
+			Layout.margins: 8
+			id: courselength
+			color: "#4d000000"
+			text: "11m 12s"
+			font.pointSize: 16
+			font.family: "roboto"
+			Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+		}
+	}
+}
diff --git a/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml
new file mode 100644
index 0000000..22a102a
--- /dev/null
+++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/LeaveReview.ui.qml
@@ -0,0 +1,98 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Column {
+	spacing: 16
+	Layout.fillWidth: true
+	Label {
+		color: "#000000"
+		text: "Leave a review"
+		font.pointSize: 21
+		font.family: "roboto"
+		font.styleName: "Medium"
+		Layout.fillWidth: true
+	}
+	RowLayout {
+		Layout.fillWidth: true
+		TextField {
+			placeholderTextColor: "#7f000000"
+			placeholderText: "Full name"
+			background: Rectangle {
+				radius: 8
+				color: "#f5f7f9"
+			}
+			Layout.fillWidth: true
+		}
+		TextField {
+			placeholderTextColor: "#7f000000"
+			placeholderText: "Email"
+			background: Rectangle {
+				radius: 8
+				color: "#f5f7f9"
+			}
+			Layout.fillWidth: true
+		}
+	}
+	ComboBox {
+		id: reviewChoices
+		Layout.fillWidth: true
+		font.pointSize: 14
+		font.family: "roboto"
+		model: ListModel {
+			ListElement {
+				label: "Please choose one"
+			}
+			ListElement {
+				label: "5/5"
+			}
+			ListElement {
+				label: "4/5"
+			}
+			ListElement {
+				label: "3/5"
+			}
+			ListElement {
+				label: "2/5"
+			}
+			ListElement {
+				label: "1/5"
+			}
+		}
+		background: Rectangle{
+			radius: 8
+			color: "#f5f7f9"
+		}
+	}
+    TextArea {
+        id: textArea
+        placeholderText: qsTr("Text Area")
+        Layout.preferredHeight: 82
+        Layout.minimumHeight: 82
+        background: Rectangle{
+            radius: 8
+            color: "#f5f7f9"
+        }
+    }
+    Button {
+    	id: button
+    	text: qsTr("Post a review")
+    	font.pixelSize: 14
+    	implicitHeight: 36
+    	Layout.fillWidth: true
+    	contentItem: Text {
+    		color: "#ffffff"
+    		text: "Login"
+    		horizontalAlignment: Text.AlignHCenter
+    		verticalAlignment: Text.AlignVCenter
+    		font.weight: Font.Medium
+    		font.family: "Roboto"
+    		font.pointSize: 14
+    	}
+
+    	background: Rectangle {
+    		color: button.down ? "#055aab" : "#066ac9"
+    		radius: 8
+    	}
+    }
+}
diff --git a/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
new file mode 100644
index 0000000..4f7f4a3
--- /dev/null
+++ b/Course/Detail/Classic/Content/Main/TabContents/Reviews/ReviewItem.ui.qml
@@ -0,0 +1,69 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.12
+
+Item {
+	width: reviewItem.width
+	height: reviewItem.height
+	RowLayout {
+		id:reviewItem
+		spacing: 16
+		RowLayout {
+			id: reviewAvatar
+			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+			Rectangle {
+				id: avatarMask
+				radius: 100
+				Layout.preferredHeight: 82
+				Layout.preferredWidth: 82
+				Layout.minimumHeight: 82
+				Layout.minimumWidth: 82
+				Image{
+					id: avatarImage
+					source: "https://eduport.webestica.com/assets/images/avatar/09.jpg"
+					sourceSize: Qt.size(parent.width, parent.height)
+					visible: false
+				}
+			}
+			OpacityMask {
+				anchors.fill: avatarMask
+				source: avatarImage
+				maskSource: avatarMask
+			}
+		}
+		ColumnLayout {
+			id: reviewDetails
+			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+			Layout.maximumWidth: 680
+			spacing: 8
+			
+			Label {
+				id: reviewerName
+				color: "#000000"
+				text: "Reviewer Name"
+				font.pointSize: 21
+				font.family: "roboto"
+				Layout.fillWidth: true
+			}
+			Label {
+				id: reviewTimestamp
+				color: "#4d000000"
+				text: "2 days ago"
+				font.pointSize: 14
+				font.family: "roboto"
+				Layout.fillWidth: true
+			}
+			Label {
+				id: reviewText
+				color: "#4d000000"
+				text: "Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among. Handsome met debating sir dwelling age material. As style lived he worse dried. Offered related so visitors we private removed. Moderate do subjects to distance."
+				wrapMode: Text.WordWrap
+				font.pointSize: 16
+				font.family: "roboto"
+				Layout.fillWidth: true
+			}
+		}
+
+	}
+}
\ No newline at end of file
diff --git a/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml
new file mode 100644
index 0000000..3572dbf
--- /dev/null
+++ b/Course/Detail/Classic/Content/Sidebar/RecentlyViewedCard.ui.qml
@@ -0,0 +1,125 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+Rectangle {
+	id: recentlyViewedCard
+	Layout.fillWidth: true
+	implicitHeight: recentlyCardContent.height
+	color: "#ffffff"
+	radius: 8
+	anchors.margins: 24
+	
+	ColumnLayout {
+		id: recentlyCardContent
+		anchors {
+			left: parent.left
+			right: parent.right
+		}
+		spacing: 16
+		Label {
+			text: qsTr("Recently viewed")
+			font.pointSize: 22
+			font.family: "roboto"
+			color: "#000000"
+			Layout.fillWidth: true
+			Layout.leftMargin: 24
+			Layout.topMargin: 24
+			Layout.rightMargin: 24
+		}
+		RowLayout {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+			spacing: 16
+			Layout.leftMargin: 24
+			Layout.rightMargin: 24
+			Rectangle {
+				color: "#eee"
+				height: 80
+				width: 100
+				radius: 8
+			}
+			ColumnLayout {
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				Label {
+					text: qsTr("Course title")
+					font.pointSize: 14
+					font.family: "roboto"
+					font.styleName: "Medium"
+					color: "#000000"
+					Layout.fillWidth: true
+				}
+				RowLayout {
+					Layout.fillWidth: true
+					Layout.fillHeight: true
+					Label {
+						text: qsTr("$")
+						font.pointSize: 14
+						font.family: "roboto"
+						font.styleName: "Medium"
+						color: "#0cbc87"
+						Layout.fillWidth: true
+					}
+					Label {
+						text: qsTr("4.5")
+						horizontalAlignment: Text.AlignRight
+						font.pointSize: 14
+						font.family: "roboto"
+						font.styleName: "Medium"
+						color: "#000000"
+						Layout.fillWidth: true
+					}
+				}
+			}
+		}
+		RowLayout {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+			spacing: 16
+			Layout.leftMargin: 24
+			Layout.rightMargin: 24
+			Layout.bottomMargin: 24
+			Rectangle {
+				color: "#eee"
+				height: 80
+				width: 100
+				radius: 8
+			}
+			ColumnLayout {
+				Layout.fillWidth: true
+				Layout.fillHeight: true
+				Label {
+					text: qsTr("Course title")
+					font.pointSize: 14
+					font.family: "roboto"
+					font.styleName: "Medium"
+					color: "#000000"
+					Layout.fillWidth: true
+				}
+				RowLayout {
+					Layout.fillWidth: true
+					Layout.fillHeight: true
+					Label {
+						text: qsTr("$")
+						font.pointSize: 14
+						font.family: "roboto"
+						font.styleName: "Medium"
+						color: "#0cbc87"
+						Layout.fillWidth: true
+					}
+					Label {
+						text: qsTr("4.5")
+						horizontalAlignment: Text.AlignRight
+						font.pointSize: 14
+						font.family: "roboto"
+						font.styleName: "Medium"
+						color: "#000000"
+						Layout.fillWidth: true
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
new file mode 100644
index 0000000..f715a94
--- /dev/null
+++ b/Course/Detail/Classic/Content/Sidebar/Video-alt.ui.qml
@@ -0,0 +1,169 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+Item {
+	width: 350
+	height: 450
+	DropShadow {
+		color: "#4d000000"
+		source: courseVideoCard
+		verticalOffset: 4
+		radius: 12
+		samples: 12
+		anchors.fill: courseVideoCard
+	}
+	Rectangle {
+		id: courseVideoCard
+		radius: 8
+		anchors.fill: parent
+		anchors.rightMargin: 8
+		anchors.leftMargin: 8
+		anchors.bottomMargin: 8
+		anchors.topMargin: 8
+		ColumnLayout {
+			id: courseDetailVideo
+			anchors.fill: parent
+			Rectangle {
+				id: courseVideoThumbnail
+				radius: 8
+				Layout.rightMargin: 8
+				Layout.leftMargin: 8
+				Layout.bottomMargin: 0
+				Layout.topMargin: 8
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+				Image {
+					id: courseVideoImage
+					source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+					fillMode: Image.PreserveAspectCrop
+					width: parent.width
+					height: parent.height
+					visible: false
+				}
+				OpacityMask {
+					id: courseVideoMask
+					anchors.fill: courseVideoThumbnail
+					source: courseVideoImage
+					maskSource: courseVideoThumbnail
+				}
+				ColorOverlay {
+					anchors.fill: courseVideoMask
+					source: courseVideoMask
+					color: "#80000000"
+				}
+				Button {
+					id: playVideoButton
+					width: 44
+					height: 44
+					anchors.verticalCenter: parent.verticalCenter
+					icon.height: 44
+					icon.width: 44
+					icon.color: "#ffffff"
+					flat: true
+					icon.source: "Font-Awesome/svgs/solid/circle-play.svg"
+					display: AbstractButton.IconOnly
+					anchors.horizontalCenter: parent.horizontalCenter
+				}
+			}
+			RowLayout {
+				id: priceAndTime
+				spacing: 8
+				Layout.rightMargin: 16
+				Layout.leftMargin: 16
+				Layout.topMargin: 8
+				Layout.bottomMargin: 4
+				Label {
+					id: publishedPrice
+					color: "#000000"
+					text: "$150"
+					font.weight: Font.Medium
+					verticalAlignment: Text.AlignVCenter
+					font.pointSize: 32
+					font.family: "Roboto"
+				}
+				Label {
+					id: originalPrice
+					color: "#80000000"
+					text: "$150"
+					font.strikeout: true
+					font.weight: Font.Medium
+					verticalAlignment: Text.AlignVCenter
+					font.pointSize: 16
+					font.family: "Roboto"
+				}
+				Label {
+					id: discount
+					color: "#ffffff"
+					text: "60% off"
+					horizontalAlignment: Text.AlignHCenter
+					verticalAlignment: Text.AlignVCenter
+					font.pointSize: 12
+					rightPadding: 8
+					leftPadding: 8
+					bottomPadding: 4
+					topPadding: 4
+					font.family: "Roboto"
+					background: Rectangle {
+						width: discount.width
+						height: discount.height
+						color: "#fd7e14"
+						radius: 4
+					}
+				}
+			}
+			RowLayout {
+				id: timerContent
+				Layout.topMargin: 4
+				Layout.bottomMargin: 8
+				Layout.rightMargin: 16
+				Layout.leftMargin: 16
+				spacing: 8
+				Image {
+					id: timerIcon
+					source: "Material/svg/filled/timer.svg"
+					sourceSize.height: 24
+					sourceSize.width: 24
+					ColorOverlay {
+						anchors.fill: timerIcon
+						source: timerIcon
+						color: "#d6293e"
+					}
+				}
+
+				Label {
+					color: "#d6293e"
+					text: "5 days left at this price"
+					font.family: "Roboto"
+					font.pointSize: 14
+					font.styleName: "Regular"
+				}
+			}
+			RowLayout {
+				id: cardFooterButton
+				Layout.topMargin: 8
+				Layout.margins: 16
+				spacing: 8
+
+				Button {
+					id: freeTrialButton
+					text: qsTr("Free trial")
+					font.styleName: "Medium"
+					font.pointSize: 14
+					font.family: "Roboto"
+					Layout.fillWidth: true
+				}
+
+				Button {
+					id: buyButton
+					text: qsTr("Buy course")
+					font.styleName: "Medium"
+					font.pointSize: 14
+					font.family: "Roboto"
+					Layout.fillWidth: true
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/Course/Grid/Card.ui.qml b/Course/Grid/Card.ui.qml
new file mode 100644
index 0000000..f6b0206
--- /dev/null
+++ b/Course/Grid/Card.ui.qml
@@ -0,0 +1,269 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+Item {
+	id: item1
+	DropShadow {
+		color: "#4d000000"
+		source: cardItem
+		verticalOffset: 4
+		radius: 40
+		samples: 81
+		anchors.fill: cardItem
+	}
+	Rectangle {
+		id: cardItem
+		anchors.fill: parent
+		Layout.minimumWidth: 300
+		Layout.minimumHeight: 475
+		radius: 8
+		ColumnLayout {
+			id: columnLayout
+			anchors.fill: parent
+			spacing: 0
+			Rectangle {
+				id: cardItemImage
+				radius: 8
+				Layout.fillHeight: true
+				Layout.preferredHeight: 255
+				Layout.fillWidth: true
+				Layout.preferredWidth: 300
+				Image {
+					id: cardItemImageSource
+					source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+					fillMode: Image.PreserveAspectCrop
+					width: parent.width
+					height: parent.height
+					visible: false
+				}
+				OpacityMask {
+					id: cardItemImageMask
+					anchors.fill: cardItemImage
+					source: cardItemImageSource
+					maskSource: cardItemImage
+				}
+
+				Rectangle {
+					id: rectangle
+					width: cardItemImageMask.width
+					height: 5
+					color: "#ffffff"
+					anchors.bottom: cardItemImageMask.bottom
+					anchors.bottomMargin: 0
+				}
+			}
+			ColumnLayout {
+				id: cardItemBody
+				Layout.rightMargin: 20
+				Layout.leftMargin: 20
+				Layout.bottomMargin: 16
+				Layout.topMargin: 16
+				Layout.fillHeight: true
+				Layout.fillWidth: true
+				Item {
+					id: badgeAndFavorite
+					height: favorite.height
+					Layout.fillWidth: true
+					Label {
+						id: badge
+						color: "#0cbc87"
+						text: "All level"
+						anchors.left: parent.left
+						verticalAlignment: Text.AlignVCenter
+						Layout.fillWidth: false
+						rightPadding: 6
+						leftPadding: 6
+						bottomPadding: 4
+						topPadding: 4
+						font.pointSize: 12
+						font.family: "Roboto"
+						background: Rectangle {
+							color: "#4d0cbc87"
+							radius: 8
+						}
+					}
+
+					Button {
+						id: favorite
+						width: 24
+						height: 24
+						text: qsTr("Button")
+						anchors.right: parent.right
+						checkable: true
+						anchors.rightMargin: 0
+						padding: 0
+						rightPadding: 0
+						leftPadding: 0
+						bottomPadding: 0
+						topPadding: 0
+						icon.source: "Material/svg/outlined/heart.svg"
+						display: AbstractButton.IconOnly
+						flat: true
+
+						Connections {
+							target: favorite
+							onStateChanged: favorite.state = "favorite checked"
+						}
+					}
+				}
+			}
+
+			Label {
+				id: cardTitle
+				color: "#000000"
+				text: qsTr("Course title")
+				wrapMode: Text.Wrap
+				Layout.fillWidth: true
+				Layout.bottomMargin: 20
+				font.styleName: "Medium"
+				font.pointSize: 21
+				font.family: "Roboto"
+				Layout.rightMargin: 20
+				Layout.leftMargin: 20
+			}
+
+			RowLayout {
+				id: ratingStar
+				Layout.topMargin: 0
+				spacing: 8
+				Layout.fillWidth: false
+				Layout.margins: 20
+				Layout.rightMargin: 20
+				Layout.leftMargin: 20
+
+				Button {
+					id: star
+					padding: 0
+					rightPadding: 0
+					leftPadding: 0
+					bottomPadding: 0
+					topPadding: 0
+					icon.color: "#80000000"
+					flat: true
+					icon.source: "Material/svg/outlined/star.svg"
+					autoRepeat: false
+					checkable: true
+					display: AbstractButton.IconOnly
+					Layout.maximumHeight: 20
+					Layout.maximumWidth: 20
+					Layout.minimumHeight: 20
+					Layout.minimumWidth: 20
+					Layout.preferredHeight: 20
+					Layout.preferredWidth: 20
+
+					Connections {
+						target: star
+						onStateChanged: star.state = "star checked"
+					}
+				}
+				Label {
+					id: listInlineItemRating
+					color: "#000000"
+					text: "4.0/5/0"
+					font.pointSize: 14
+					font.family: "Roboto"
+					Layout.fillWidth: false
+				}
+			}
+
+			ColumnLayout {
+				id: cardFooter
+				spacing: 8
+				Rectangle {
+					id: cardFooterBorder
+					color: "#dde0e3"
+					border.color: "#dde0e3"
+					border.width: 0
+					Layout.rightMargin: 20
+					Layout.leftMargin: 20
+					Layout.preferredHeight: 1
+					Layout.minimumHeight: 1
+					Layout.fillWidth: true
+				}
+
+				RowLayout {
+					id: cardFooterContent
+					spacing: 8
+					Layout.margins: 20
+					Layout.rightMargin: 20
+					Layout.leftMargin: 20
+					width: cardFooterBorder.width
+
+					RowLayout {
+						id: cardFooterTimer
+						Layout.fillWidth: true
+						spacing: 8
+						Image {
+							id: timerIcon
+							source: "Material/svg/outlined/schedule.svg"
+							sourceSize.height: 16
+							sourceSize.width: 16
+							ColorOverlay {
+								anchors.fill: timerIcon
+								source: timerIcon
+								color: "#d6293e"
+							}
+						}
+
+						Label {
+							color: "#000000"
+							text: "12h 56m"
+							font.family: "Roboto"
+							font.pointSize: 14
+							font.styleName: "Regular"
+						}
+					}
+
+					RowLayout {
+						id: cardFooterLecturers
+						Layout.fillWidth: true
+						spacing: 8
+						Image {
+							id: lecturersIcon
+							source: "Material/svg/outlined/table.svg"
+							sourceSize.height: 16
+							sourceSize.width: 16
+							ColorOverlay {
+								anchors.fill: lecturersIcon
+								source: lecturersIcon
+								color: "#fd7e14"
+							}
+						}
+
+						Label {
+							color: "#000000"
+							text: "12h 56m"
+							font.family: "Roboto"
+							font.pointSize: 14
+							font.styleName: "Regular"
+						}
+					}
+				}
+			}
+		}
+	}
+	states: [
+		State {
+			name: "favorite checked"
+			when: favorite.checked
+
+			PropertyChanges {
+				target: favorite
+				icon.color: "#d6293e"
+				icon.source: "Material/svg/filled/heart.svg"
+			}
+		},
+		State {
+			name: "rating checked"
+			when: star.checked
+
+			PropertyChanges {
+				target: star
+				icon.color: "#f7c32e"
+				icon.source: "Material/svg/filled/star.svg"
+			}
+		}
+	]
+}
diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml
new file mode 100644
index 0000000..a4ad119
--- /dev/null
+++ b/Course/Grid/Minimal.ui.qml
@@ -0,0 +1,170 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "Minimal"
+import "../../Home/Default"
+
+Flickable {
+	property alias courseGrid: courseGrid
+	contentHeight: main.height
+
+	Rectangle {
+		anchors.fill: parent
+		color: Eduport.bsBodyBg
+	}
+
+	ColumnLayout {
+		id: main
+		anchors {
+			top: parent.top
+			left: parent.left
+			right: parent.right
+		}
+
+		FilterBar {}
+
+		GridView {
+			id: courseGrid
+			interactive: false
+			Layout.fillWidth: true
+			implicitHeight: main.width < 576
+				? cellHeight * count
+				: main.width < 768
+				? cellHeight * count / 2
+				: main.width < 992
+				? cellHeight * count / 3
+				: cellHeight * count / 4
+			cellWidth: main.width < 576
+				? width
+				: main.width < 768
+				? width / 2
+				: main.width < 992
+				? width / 3
+				: width / 4
+			cellHeight: cellWidth * 400 / 533 + 220.35
+			model: ListModel {
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: false
+					title: "Sketch from A to Z: for app designer"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Graphic Design Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Create a Design System in Figma"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/07.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Deep Learning with React-Native"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Build Responsive Websites with HTML"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/12.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Build Websites with CSS"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/05.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "The Complete Web Development in python"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/06.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Angular – The Complete Guider"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/10.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Bootstrap 5 From Scratch"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/13.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "PHP with - CMS Project"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Digital Marketing Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/04.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Learn Invision"
+					rate: 3.5
+				}
+			}
+			delegate: Card {
+				width: courseGrid.cellWidth
+				height: courseGrid.cellHeight
+				imageSource: image
+				badgeText: level
+				badgeColor: levelColor
+				badgeBackgroundColor: levelBackgroundColor
+				favorite.checked: liked
+				titleText: title
+				truncatedVisible: false
+				rating: rate
+			}
+		}
+	}
+}
diff --git a/Course/Grid/Minimal/FilterBar.ui.qml b/Course/Grid/Minimal/FilterBar.ui.qml
new file mode 100644
index 0000000..d9bf81a
--- /dev/null
+++ b/Course/Grid/Minimal/FilterBar.ui.qml
@@ -0,0 +1,71 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Rectangle {
+	id: bgLightBorder
+	color: "#f5f7f9"
+	height: filterBarControl.height
+	width: filterBarControl.width
+	Layout.maximumHeight: filterBarControl.height
+	radius: 8
+	border.color: "#33000000"
+	GridLayout {
+		id: filterBarControl
+		anchors.fill: parent
+		rows: 6
+		columns: 6
+		rowSpacing: 16
+		columnSpacing: 16
+		flow: GridLayout.LeftToRight
+		Layout.fillWidth: true
+		TextField {
+			id: keywordInput
+			Layout.fillWidth: true
+			font.family: "Roboto"
+			font.pointSize: 16
+			Layout.bottomMargin: 24
+			Layout.topMargin: 24
+			Layout.leftMargin: 24
+			placeholderText: "Enter keyword"
+		}
+
+		ComboBox {
+			id: categories
+			Layout.fillWidth: true
+			font.pointSize: 16
+			font.family: "Roboto"
+			displayText: "Categories"
+		}
+		ComboBox {
+			id: priceLevel
+			Layout.fillWidth: true
+			font.pointSize: 16
+			font.family: "Roboto"
+			displayText: "Price level"
+		}
+		ComboBox {
+			id: skillLevel
+			Layout.fillWidth: true
+			font.pointSize: 16
+			font.family: "Roboto"
+			displayText: "Skill level"
+		}
+		ComboBox {
+			id: language
+			Layout.fillWidth: true
+			font.pointSize: 16
+			font.family: "Roboto"
+			displayText: "Languange"
+		}
+
+		Button {
+			id: searchButton
+			Layout.fillWidth: true
+			icon.color: "#ffffff"
+			icon.source: "../../../Font-Awesome/svgs/solid/magnifying-glass.svg"
+			Layout.rightMargin: 24
+			display: AbstractButton.IconOnly
+		}
+	}
+}