Merge commit '36879d0b289bcd4276d1ebc0e3ab6a0d38e0f59a'

2 files changed, 144 insertions, 156 deletions

diff --git a/Counter.ui.qml b/Counter.ui.qml
index e6e7318..f75b2ce 100644
--- a/Counter.ui.qml
+++ b/Counter.ui.qml
@@ -3,39 +3,39 @@ import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 
 Item {
-	property alias area: area
-
 	Rectangle {
 		color: bgColor
 		radius: 8
 		anchors {
-			top: parent.top
+			fill: parent
 			topMargin: 25.6
-			left: parent.left
 			leftMargin: 12.8
-			right: parent.right
 			rightMargin: 12.8
-			bottom: parent.bottom
 		}
 
-		RowLayout {
+		Item {
 			anchors {
-				top: parent.top
-				topMargin: 25.6
-				left: parent.left
-				leftMargin: 25.6
-				right: parent.right
-				rightMargin: 25.6
-				bottom: parent.bottom
-				bottomMargin: 25.6
+				fill: parent
+				margins: 25.6
 			}
 
 			Image {
+				id: image
 				source: icon
-				sourceSize.height: parent.height
+				sourceSize.height: column.height * 3 / 4
+				fillMode: Image.PreserveAspectFit
+				x: (parent.width - (width + column.width + 25.6)) / 2
+				anchors.verticalCenter: parent.verticalCenter
 			}
 
 			ColumnLayout {
+				id: column
+				spacing: 0
+				anchors {
+					left: image.right
+					leftMargin: 25.6
+				}
+
 				FontLoader {
 					id: bold
 					source: "Heebo/Heebo-Bold.ttf"
@@ -45,28 +45,27 @@ Item {
 					text: count
 					font {
 						family: bold.name
-						pixelSize: 21
+						pointSize: 20.1
+						weight: Font.Bold
 					}
+					Layout.fillWidth: true
 				}
 
 				FontLoader {
 					id: medium
-					source: "Heebo/Heebo-Bold.ttf"
+					source: "Heebo/Heebo-Medium.ttf"
 				}
 
 				Label {
 					text: title
 					font {
 						family: medium.name
-						pixelSize: 15
+						pointSize: 15
+						weight: Font.Medium
 					}
+					Layout.fillWidth: true
 				}
 			}
 		}
-
-		MouseArea {
-			id: area
-			anchors.fill: parent
-		}
 	}
 }
diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml
index 4aa79cb..438cd8f 100644
--- a/HomeDefault.ui.qml
+++ b/HomeDefault.ui.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
 
 Flickable {
 	property alias counter: counter
@@ -25,11 +26,17 @@ Flickable {
 			id: banner
 			columns: width < 992 ? 1 : 2
 			rows: width < 992 ? 2 : 1
-			Layout.topMargin: 48
-			Layout.leftMargin: 51.28
-			Layout.rightMargin: 51.28
+			Layout.leftMargin: -9
+			Layout.rightMargin: -9
+			Layout.bottomMargin: 48
 
 			ColumnLayout {
+				Layout.topMargin: 48
+				Layout.leftMargin: 15
+				Layout.rightMargin: 15
+				Layout.bottomMargin: 48
+				Layout.maximumWidth: body.width < 992
+					? body.width : body.width / 2
 
 				FontLoader {
 					id: heebo
@@ -109,16 +116,42 @@ Flickable {
 				}
 			}
 
-			ColumnLayout {
+			Item {
 				Layout.topMargin: 48
 				Layout.leftMargin: 24
 				Layout.rightMargin: 24
+				Layout.fillWidth: true
+				implicitHeight: image.height
+
+				DropShadow {
+					source: angularRectangle
+					anchors.fill: angularRectangle
+					color: Qt.rgba(.113, .227, .325, .15)
+				}
+
+				Rectangle {
+					id: angularRectangle
+					radius: 8
+					implicitWidth: angularImage.width + 16
+					implicitHeight: angularImage.height + 16
+					anchors {
+						top: parent.top
+						right: parent.right
+						rightMargin: 24
+					}
+
+					Image {
+						id: angularImage
+						source: "https://eduport.webestica.com/assets/images/client/angular.svg"
+						anchors.centerIn: parent
+					}
+				}
 
 				Image {
 					id: image
 					source: "https://eduport.webestica.com/assets/images/element/07.png"
+					width: parent.width
 					fillMode: Image.PreserveAspectFit
-					Layout.fillWidth: true
 				}
 			}
 		}
@@ -131,7 +164,7 @@ Flickable {
 				: width / 4
 			cellHeight: 125.6
 			Layout.fillWidth: true
-			Layout.preferredHeight: width < 576
+			implicitHeight: width < 576
 				? cellHeight * count
 				: width < 1200 ? cellHeight * count / 2
 				: cellHeight
@@ -162,152 +195,108 @@ Flickable {
 					bgColor: "#1a17a2b8"
 				}
 			}
+
+			delegate: Counter {
+				implicitWidth: counter.cellWidth
+				implicitHeight: counter.cellHeight
+			}
 		}
 
 		ColumnLayout {
+			Layout.topMargin: 64
 			Layout.leftMargin: 15
 			Layout.rightMargin: 15
-			Layout.bottomMargin: 25.6
+			Layout.bottomMargin: 48
 
-			Label {
-				text: qsTr("Most Popular Courses")
-				color: "#24292d"
-				horizontalAlignment: Text.AlignHCenter
-				wrapMode: Text.Wrap
-				Layout.fillWidth: true
-				Layout.bottomMargin: 8
-				font {
-					family: heebo.name
-					pointSize: 22.5 + .020625 * width
-				}
-			}
+			ColumnLayout {
+				Layout.bottomMargin: 25.6
 
-			Label {
-				text: qsTr("Choose from hundreds of courses from specialist organizations")
-				color: "#747579"
-				horizontalAlignment: Text.AlignHCenter
-				wrapMode: Text.Wrap
-				Layout.fillWidth: true
-				font {
-					family: doesntEmbed ? "Roboto"
-							: roboto.name
-					pointSize: 15
+				Label {
+					text: qsTr("Most Popular Courses")
+					color: "#24292d"
+					horizontalAlignment: Text.AlignHCenter
+					wrapMode: Text.Wrap
+					Layout.fillWidth: true
+					Layout.bottomMargin: 8
+					font {
+						family: heebo.name
+						pointSize: 22.5 + .020625 * width
+					}
 				}
-			}
-		}
-
-		TabBar {
-			id: tabs
-			currentIndex: tabsContent.currentIndex
-			background: Rectangle{
-				color: Qt.rgba(.0235, .416, .788, .1)
-				radius: 10
-			}
-			horizontalPadding: 16
-			verticalPadding: 10
-			Layout.fillWidth: true
-			Layout.bottomMargin: 25.6
 
-			TabButton {
-				id: webDesign
-				text: qsTr("Web Design")
-				horizontalPadding: 16
-				verticalPadding: 8
-				anchors {
-					rightMargin: 8
-					bottomMargin: 8
-				}
-				background: Rectangle {
-					color: "#066ac9"
-					radius: 5.2
+				Label {
+					text: qsTr("Choose from hundreds of courses from specialist organizations")
+					color: "#747579"
+					horizontalAlignment: Text.AlignHCenter
+					wrapMode: Text.Wrap
+					Layout.fillWidth: true
+					font {
+						family: doesntEmbed ? "Roboto" : roboto.name
+						pointSize: 15
+					}
 				}
 			}
 
-			TabButton {
-				id: development
-				text: qsTr("Development")
-				horizontalPadding: 16
-				verticalPadding: 8
-				anchors {
-					rightMargin: 8
-					bottomMargin: 8
-				}
-				background: Rectangle {
-					color: "#066ac9"
-					radius: 5.2
+			TabBar {
+				id: tabs
+				currentIndex: tabsContent.currentIndex
+				background: Rectangle{
+					color: Qt.rgba(.0235, .416, .788, .1)
+					radius: 10
 				}
-			}
-
-			TabButton {
-				id: graphicDesign
-				text: qsTr("Graphic Design")
 				horizontalPadding: 16
-				verticalPadding: 8
-				anchors {
-					rightMargin: 8
-					bottomMargin: 8
-				}
-				background: Rectangle {
-					color: "#066ac9"
-					radius: 5.2
-				}
-			}
+				verticalPadding: 10
+				Layout.fillWidth: true
+				Layout.bottomMargin: 25.6
 
-			TabButton {
-				id: marketing
-				text: qsTr("Marketing")
-				horizontalPadding: 16
-				verticalPadding: 8
-				anchors {
-					rightMargin: 8
-					bottomMargin: 8
-				}
-				background: Rectangle {
-					color: "#066ac9"
-					radius: 5.2
-				}
-			}
+				Repeater {
+					model: ["Web Design", "Development",
+						       "Graphic Design",
+						       "Marketing", "Finance"]
 
-			TabButton {
-				id: finance
-				text: qsTr("Finance")
-				horizontalPadding: 16
-				verticalPadding: 8
-				anchors {
-					rightMargin: 8
-					bottomMargin: 8
-				}
-				background: Rectangle {
-					color: "#066ac9"
-					radius: 5.2
+					TabButton {
+						text: modelData
+						horizontalPadding: 16
+						verticalPadding: 8
+						width: Math.max(124,
+								tabs.width / 5)
+						anchors {
+							rightMargin: 8
+							bottomMargin: 8
+						}
+						background: Rectangle {
+							color: "#066ac9"
+							radius: 5.2
+						}
+					}
 				}
 			}
-		}
 
-		StackLayout {
-			id: tabsContent
-			currentIndex: tabs.currentIndex
-			Layout.preferredHeight: popular.height
+			StackLayout {
+				id: tabsContent
+				currentIndex: tabs.currentIndex
+				Layout.preferredHeight: popular.height
 
-			GridView {
-				id: popular
-				interactive: false
-				Layout.fillWidth: true
-				cellWidth: width < 576 ? width
-					: width < 768 ? width / 2
-					: width < 992 ? width / 3
-					: width / 4
-				cellHeight: cellWidth * 1.3
-				height: width < 576
-					? cellHeight * count
-					: width < 768
-					? cellHeight
-					* (count + count % 2) / 2
-					: width < 992
-					? cellHeight
-					* (count + (count + 1) % 3) / 3
-					: cellHeight
-					* (count + (count + 2) % 4) / 4
+				GridView {
+					id: popular
+					interactive: false
+					Layout.fillWidth: true
+					cellWidth: width < 576 ? width
+						: width < 768 ? width / 2
+						: width < 992 ? width / 3
+						: width / 4
+					cellHeight: cellWidth * 1.3
+					height: width < 576
+						? cellHeight * count
+						: width < 768
+						? cellHeight
+						* (count + count % 2) / 2
+						: width < 992
+						? cellHeight
+						* (count + (count + 1) % 3) / 3
+						: cellHeight
+						* (count + (count + 2) % 4) / 4
+				}
 			}
 		}
 	}