2 files changed, 130 insertions, 1 deletions
diff --git a/Checkout.ui.qml b/Checkout.ui.qml
index 05a32ba..4e99c3e 100644
--- a/Checkout.ui.qml
+++ b/Checkout.ui.qml
@@ -535,8 +535,41 @@ Flickable {
 							}
 						}
 
+						ListView {
+							id: courseItems
+							interactive: false
+							Layout.fillWidth: true
+							implicitHeight: count * (width * 400 / 533 + (width < 362 ? 37.5 : 18.75) + 86.5)
+							model: ListModel {
+								ListElement {
+									image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+									title: "Sketch from A to Z: for app designer"
+									price: "$150"
+								}
+								ListElement {
+									image: "https://eduport.webestica.com/assets/images/courses/4by3/18.jpg"
+									title: "The Complete Video Production Bootcamp"
+									price: "$350"
+								}
+							}
+							delegate: CourseItem {
+								width: courseItems.width
+							}
+						}
+
+						Rectangle {
+							Layout.fillWidth: true
+							Layout.topMargin: 16
+							Layout.bottomMargin: 16
+							height: 1
+							border {
+								width: .5
+								color: "#0a000000"
+							}
+						}
+
 						ColumnLayout {
-							Layout.margins: 16
+
 							Item {
 								Layout.fillWidth: true
 								implicitHeight: priceLabel.implicitHeight
diff --git a/CourseItem.ui.qml b/CourseItem.ui.qml
new file mode 100644
index 0000000..502803e
--- /dev/null
+++ b/CourseItem.ui.qml
@@ -0,0 +1,96 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
+ColumnLayout {
+	readonly property bool doesntEmbed: Qt.platform.os === "android"
+				|| Qt.platform.os === "linux"
+				|| Qt.platform.os === "osx"
+				|| Qt.platform.os === "unix"
+				|| Qt.platform.os === "windows"
+
+	FontLoader {
+		id: heebo
+		source: "Heebo/Heebo-Bold.ttf"
+	}
+
+	FontLoader {
+		id: regular
+		source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
+	}
+
+	Rectangle {
+		Layout.fillWidth: true
+		Layout.topMargin: 16
+		Layout.bottomMargin: 16
+		height: 1
+		border {
+			width: .5
+			color: "#0a000000"
+		}
+	}
+
+	GridLayout {
+		Layout.topMargin: -16
+		rows: width < 576 ? 2 : 1
+		columns: width < 576 ? 1 : 2
+
+		Rectangle {
+			id: rectangle
+			Layout.topMargin: 16
+			Layout.fillWidth: true
+			implicitHeight: courseItemImage.height
+			radius: 5.2
+
+			Image {
+				id: courseItemImage
+				anchors {
+					left: parent.left
+					right: parent.right
+				}
+				source: image
+				fillMode: Image.PreserveAspectFit
+				layer.enabled: true
+				layer.effect: OpacityMask {
+					maskSource: Rectangle {
+						width: courseItemImage.width
+						height: courseItemImage.height
+						radius: 5.2
+					}
+				}
+			}
+		}
+
+	       ColumnLayout {
+			Layout.topMargin: 16
+
+			Label {
+				Layout.fillWidth: true
+				text: title
+				font {
+					family: heebo.name
+					pointSize: 15
+				}
+			}
+
+			Item {
+				Layout.fillWidth: true
+				Layout.topMargin: 16
+				Label {
+					anchors {
+						top: parent.top
+						left: parent.left
+						bottom: parent.bottom
+					}
+					text: price
+					color: "#0cbc87"
+					font {
+						family: doesntEmbed ? "Roboto" : regular.name
+						pointSize: 15
+					}
+				}
+		       }
+	       }
+       }
+}