separated game card into it's own .qml

shell/CMakeLists.txt

@@ -20,6 +20,7 @@ qt_add_qml_module(nomad-shell
     QML_FILES
         qml/Main.qml
         qml/NavigationManager.qml
+        qml/GameCard.qml
 )
 
 target_link_libraries(nomad-shell

shell/qml/GameCard.qml

@@ -0,0 +1,24 @@
+import  QtQuick
+
+Item {
+    id: root 
+
+    property bool highlighted: false
+
+    width: 120
+    height: 180
+
+    scale: highlighted ? 1.10 : 1.0
+
+    Behavior on scale {
+        NumberAnimation {
+            duration: 120
+            easing.type: Easing.OutCubic
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: "white"
+    }
+}

shell/qml/Main.qml

@@ -222,13 +222,10 @@ QtObject {
                     gamesList.scrollTo(gamesList.snappedContentX(gamesList.contentX))
                 }
 
-                delegate: Rectangle { // TODO: design a real game card QML to replace this placeholder
+                delegate: GameCard {
                     id: gameTile
 
-                    width: 120  
+                    highlighted: navigationManager.currentItem === gameTile 
-                    height: 180
-
-                    color: navigationManager.currentItem === gameTile ? "blue" : "white"
 
                     function onNavigationFocused() {
                         gamesList.currentIndex = index