Move card to default home folder

2 files changed, 260 insertions, 17 deletions

diff --git a/Home/Default.ui.qml b/Home/Default.ui.qml
index aa2c283..5c57eae 100644
--- a/Home/Default.ui.qml
+++ b/Home/Default.ui.qml
@@ -251,12 +251,20 @@ Flickable {
 						leftMargin: 16
 						right: parent.right
 						rightMargin: 16
-						verticalCenter: parent.verticalCenter
+						verticalCenter: parent
+								.verticalCenter
 					}
 					cellWidth: 142
 					cellHeight: 46
-					implicitHeight: Math.ceil(count / Math.floor(count / (cellWidth * count / width))) * cellHeight
-					model: ["Web Design", "Development", "Graphic Design", "Marketing", "Finance"]
+					implicitHeight: Math.ceil(count
+							/ Math.floor(count
+								/ (cellWidth
+									* count
+									/ width)
+								)) * cellHeight
+					model: ["Web Design", "Development",
+						"Graphic Design", "Marketing",
+						"Finance"]
 					delegate: TabItem {}
 				}
 			}
@@ -266,13 +274,20 @@ Flickable {
 				property real preservedAspectHeight: width * 1.6
 				Layout.leftMargin: -12.8
 				Layout.rightMargin: -12.8
-				Layout.preferredHeight: width < 576
-					? preservedAspectHeight * tabsContent.currentCount
-					: width < 768
-					? preservedAspectHeight / 2 * Math.ceil(tabsContent.currentCount / 2)
-					: width < 992
-					? preservedAspectHeight / 3 * Math.ceil(tabsContent.currentCount / 3)
-					: preservedAspectHeight / 4 * Math.ceil(tabsContent.currentCount / 4)
+				Layout.preferredHeight: body.width < 576
+					? preservedAspectHeight
+					* tabsContent.currentCount
+					: body.width < 768
+					? preservedAspectHeight / 2
+					* Math.ceil(tabsContent.currentCount
+							/ 2)
+					: body.width < 992
+					? preservedAspectHeight / 3
+					* Math.ceil(tabsContent.currentCount
+							/ 3)
+					: preservedAspectHeight / 4
+					* Math.ceil(tabsContent.currentCount
+							/ 4)
 
 				Repeater {
 					id: tabsContent
@@ -351,20 +366,26 @@ Flickable {
 					GridView {
 						id: tabPane
 						interactive: false
-						cellWidth: width < 576 ? width
-							: width < 768 ? width / 2
-							: width < 992 ? width / 3
+						cellWidth: body.width < 576
+							? width
+							: body.width < 768
+							? width / 2
+							: body.width < 992
+							? width / 3
 							: width / 4
 						cellHeight: cellWidth
 							* 400 / 533 + 273.35
 						model: content
-						delegate: CardGrid {
-							width: tabPane.cellWidth
-							height: tabPane.cellHeight
+						delegate: Default.Card {
+							width: tabPane
+								.cellWidth
+							height: tabPane
+								.cellHeight
 							imageSource: image
 							badgeText: level
 							badgeColor: levelColor
-							badgeBackgroundColor: levelBackgroundColor
+							badgeBackgroundColor
+							: levelBackgroundColor
 							titleText: title
 							truncatedText: truncated
 						}
diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml
new file mode 100644
index 0000000..d10ebf1
--- /dev/null
+++ b/Home/Default/Card.ui.qml
@@ -0,0 +1,222 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+import Eduport 1.4
+
+Item {
+	property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
+	readonly property color allLevelsColor: "#ff6f42c1"
+	readonly property color beginnerColor: "#ff0cbc87"
+	readonly property color intermediateColor: "#ff17a2b8"
+	readonly property color allLevelsBackgroundColor: "#1a6f42c1"
+	readonly property color beginnerBackgroundColor: "#1a0cbc87"
+	readonly property color intermediateBackgroundColor: "#1a17a2b8"
+	property string badgeText: "All level"
+	property color badgeColor: "#ff6f42c1"
+	property color badgeBackgroundColor: "#1a6f42c1"
+	property string titleText: "Build Responsive Websites with HTML"
+	property alias titleArea: titleArea
+	property string truncatedText: "Far advanced settling say finished raillery. Offered chiefly farther"
+
+	DropShadow {
+		source: rectangle
+		color: "#261d3a53"
+		radius: 5
+		samples: 11
+		anchors.fill: rectangle
+	}
+
+	Rectangle {
+		id: rectangle
+		radius: 8
+		anchors {
+			fill: parent
+			topMargin: 25.6
+			leftMargin: 12.8
+			rightMargin: 12.8
+		}
+
+		Image {
+			id: image
+			anchors {
+				top: parent.top
+				left: parent.left
+				right: parent.right
+			}
+			source: imageSource
+			fillMode: Image.PreserveAspectFit
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: image.width
+					height: image.height
+					radius: 8
+				}
+			}
+		}
+
+		Rectangle {
+			height: 16
+			anchors {
+				left: parent.left
+				right: parent.right
+				bottom: image.bottom
+			}
+		}
+
+		ColumnLayout {
+			id: body
+			anchors {
+				top: image.bottom
+				left: parent.left
+				leftMargin: 20
+				right: parent.right
+				rightMargin: 20
+				bottom: footer.top
+			}
+
+			Item {
+				id: badgeAndFavorite
+				height: badge.height
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+
+				Label {
+					id: badge
+					anchors.left: parent.left
+					topPadding: 4.463
+					leftPadding: 8.287
+					rightPadding: 8.287
+					bottomPadding: 4.463
+					text: badgeText
+					color: badgeColor
+					font {
+						family: Bootstrap.bodyFont
+									.family
+						pointSize: Bootstrap
+								.badgeFontSize
+					}
+					background: Rectangle {
+						color: badgeBackgroundColor
+						radius: 6
+					}
+				}
+
+				Image {
+					id: favorite
+					source: "../../Font-Awesome/svgs/solid/heart.svg"
+					sourceSize {
+						width: 15
+						height: 15
+					}
+					anchors {
+						right: parent.right
+						verticalCenter: parent
+								.verticalCenter
+					}
+				}
+			}
+
+			Label {
+				id: title
+				text: titleText
+				color: Qt.rgba(.141, .161, .176, 1.0)
+				wrapMode: Text.Wrap
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: Eduport.hFont.family
+					weight: Eduport.hFont.weight
+					pointSize: 20.1 + .00075 * parent.width
+				}
+
+				MouseArea {
+					id: titleArea
+					anchors.fill: parent
+				}
+			}
+
+			Label {
+				text: truncatedText
+				color: Qt.rgba(.455, .459, .475, 1.0)
+				wrapMode: Text.Wrap
+				elide: Text.ElideRight
+				maximumLineCount: 2
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: Bootstrap.bodyFont.family
+					weight: Bootstrap.bodyFont.weight
+					pointSize: Bootstrap.bodyFont.pointSize
+				}
+			}
+
+			RowLayout {
+				id: listInline
+			}
+		}
+
+		ColumnLayout {
+			id: footer
+			anchors {
+				left: parent.left
+				leftMargin: 16
+				right: parent.right
+				rightMargin: 16
+				bottom: parent.bottom
+				bottomMargin: 16
+			}
+
+			Rectangle {
+				border {
+					color: "#229a9ea4"
+					width: .5
+				}
+				height: 1
+				Layout.fillWidth: true
+				Layout.topMargin: 16
+				Layout.bottomMargin: 16
+			}
+
+			Item {
+				Layout.fillWidth: true
+
+				Label {
+					id: duration
+					text: "15h 30m"
+					anchors {
+						top: parent.top
+						left: parent.left
+						bottom: parent.bottom
+					}
+					font {
+						family: Eduport.fwLightFont
+									.family
+						weight: Eduport.fwLightFont
+									.weight
+						pointSize: Eduport.h6FontSize
+					}
+				}
+
+				Label {
+					id: lectures
+					text: "68 lectures"
+					anchors {
+						top: parent.top
+						right: parent.right
+						bottom: parent.bottom
+					}
+					font {
+						family: Eduport.fwLightFont
+									.family
+						weight: Eduport.fwLightFont
+									.weight
+						pointSize: Eduport.h6FontSize
+					}
+				}
+			}
+		}
+	}
+}