Revert "New WelcomePage qds-2.3 branch"

This reverts commit 679696650ef113a1e120b6ec9d89dd15c356e4bb.
The new welcome page is not fully ready, yet.

Change-Id: I194ab9c6a6d18a81c7a7fe08a9631c2bc4f2f8a7
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

54 files changed, 1336 insertions, 19 deletions

diff --git a/src/plugins/studiowelcome/qml/welcomepage/AccountImage.qml b/src/plugins/studiowelcome/qml/welcomepage/AccountImage.qml
new file mode 100644
index 0000000000..719ff05546
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/AccountImage.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import welcome 1.0
+import StudioFonts 1.0
+
+Image {
+    id: account_icon
+
+    source: "images/" + (mouseArea.containsMouse ? "icon_hover.png" : "icon_default.png")
+
+    Text {
+        id: account
+        color: mouseArea.containsMouse ? Constants.textHoverColor
+                                       : Constants.textDefaultColor
+        text: qsTr("Account")
+        anchors.top: parent.bottom
+        anchors.horizontalCenter: parent.horizontalCenter
+        font.family: StudioFonts.titilliumWeb_regular
+        font.pixelSize: 16
+        renderType: Text.NativeRendering
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        anchors.margins: -25
+        hoverEnabled: true
+
+        onClicked: Qt.openUrlExternally("https://login.qt.io/login/")
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/CustomScrollBar.qml b/src/plugins/studiowelcome/qml/welcomepage/CustomScrollBar.qml
new file mode 100644
index 0000000000..a6042e24cc
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/CustomScrollBar.qml
@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Templates 2.15 as Controls
+import welcome 1.0
+
+Controls.ScrollBar {
+    id: scrollBar
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+
+    padding: active ? 1 : 2
+    visible: orientation === Qt.Horizontal ? contentWidth > width : contentHeight > height
+    minimumSize: orientation === Qt.Horizontal ? height / width : width / height
+
+    contentItem: Rectangle {
+        implicitWidth: 13
+        implicitHeight: 13
+        color: active ? Constants.textHoverColor : Constants.textDefaultColor
+    }
+
+    background: Rectangle {
+        implicitWidth: 16
+        implicitHeight: 16
+        color: "#3b3c3d"
+        visible: active
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/CustomScrollView.qml b/src/plugins/studiowelcome/qml/welcomepage/CustomScrollView.qml
new file mode 100644
index 0000000000..0fbdfa9f00
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/CustomScrollView.qml
@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick.Templates 2.15 as Controls
+
+Controls.ScrollView {
+    id: control
+
+    Controls.ScrollBar.vertical: CustomScrollBar {
+           parent: control
+           x: control.mirrored ? 0 : control.width - width
+           y: control.topPadding
+           height: control.availableHeight
+       }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml b/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml
new file mode 100644
index 0000000000..c13ef5b1b3
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/ExamplesModel.qml
@@ -0,0 +1,148 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+    ListElement {
+        projectName: "ClusterTutorial"
+        qmlFileName: "content/Cluster_Art.ui.qml"
+        thumbnail: "images/tutorialclusterdemo_thumbnail.png"
+        displayName: "Cluster Tutorial"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "CoffeeMachine"
+        qmlFileName: "content/ApplicationFlowForm.ui.qml"
+        thumbnail: "images/coffeemachinedemo_thumbnail.png"
+        displayName: "Coffee Machine"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "SideMenu"
+        qmlFileName: "content/MainForm.ui.qml"
+        thumbnail: "images/sidemenu_demo.png"
+        displayName: "Side Menu"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "WebinarDemo"
+        qmlFileName: "content/MainApp.ui.qml"
+        thumbnail: "images/webinardemo_thumbnail.png"
+        displayName: "Webinar Demo"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "EBikeDesign"
+        qmlFileName: "content/Screen01.ui.qml"
+        thumbnail: "images/ebike_demo_thumbnail.png"
+        displayName: "E-Bike Design"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "ProgressBar"
+        qmlFileName: "content/ProgressBar.ui.qml"
+        thumbnail: "images/progressbar_demo.png"
+        displayName: "Progress Bar"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "washingMachineUI"
+        qmlFileName: "washingMachineUI.qml"
+        thumbnail: "images/washingmachinedemo_thumbnail.png"
+        displayName: "Washing Machine"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "SimpleKeyboard"
+        qmlFileName: "SimpleKeyboard.qml"
+        thumbnail: "images/virtualkeyboard_thumbnail.png"
+        displayName: "Virtual Keyboard"
+        showDownload: false
+    }
+
+    ListElement {
+        projectName: "highendivisystem"
+        qmlFileName: "Screen01.ui.qml"
+        thumbnail: "images/highendivi_thumbnail.png"
+        displayName: "IVI System"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/highendivisystem.zip"
+        showDownload: true
+    }
+
+    ListElement {
+        projectName: "digitalcluster"
+        qmlFileName: "Screen01.ui.qml"
+        thumbnail: "images/digital_cluster_thumbnail.png"
+        displayName: "Digital Cluster"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/digitalcluster.zip"
+        showDownload: true
+    }
+
+    ListElement {
+        projectName: "effectdemo"
+        qmlFileName: "Screen01.ui.qml"
+        thumbnail: "images/effectdemo_thumbnail.png"
+        displayName: "Effect Demo"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/effectdemo.zip"
+        showDownload: true
+    }
+
+
+    ListElement {
+        projectName: "cppdemoproject"
+        explicitQmlproject: "qml/qdsproject.qmlproject"
+        qmlFileName: "WashingMachineHome/MainFile.ui.qml"
+        thumbnail: "images/cppdemo_thumbnail.png"
+        displayName: "C++ Demo Project"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/cppdemoproject.zip"
+        showDownload: true
+    }
+
+    ListElement {
+        projectName: "particles"
+        qmlFileName: "Screen01.ui.qml"
+        thumbnail: "images/particles_thumbnail.png"
+        displayName: "Particle Demo"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/particles.zip"
+        showDownload: true
+    }
+
+    ListElement {
+        projectName: "thermo"
+        qmlFileName: "thermo.ui.qml"
+        thumbnail: "images/thermo_thumbnail.png"
+        displayName: "Thermostat Demo"
+        url: "https://download.qt.io/learning/examples/qtdesignstudio/thermo.zip"
+        showDownload: true
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml b/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml
new file mode 100644
index 0000000000..18e645c324
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/HoverOverDesaturate.qml
@@ -0,0 +1,215 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Timeline 1.0
+import welcome 1.0
+import StudioFonts 1.0
+
+Item {
+    id: root
+    visible: true
+    width: 270
+    height: 175
+    property alias imageSource: image.source
+    property alias labelText: label.text
+
+    property alias downloadIcon: downloadCloud.visible
+
+    signal clicked()
+
+    onVisibleChanged: {
+        animateOpacity.start()
+        animateScale.start()
+    }
+
+    NumberAnimation {
+        id: animateOpacity
+        property: "opacity"
+        from: 0
+        to: 1.0
+        duration: 400
+    }
+    NumberAnimation {
+        id: animateScale
+        property: "scale"
+        from: 0
+        to: 1.0
+        duration: 400
+    }
+
+    Rectangle {
+        id: rectangle
+        x: 0
+        y: 0
+        width: 270
+        height: 146
+
+        MouseArea {
+            x: 17
+            y: 12
+            height: 125
+            anchors.bottomMargin: -label.height
+            anchors.fill: parent
+            hoverEnabled: true
+            onHoveredChanged: {
+                if (saturationEffect.desaturation === 1)
+                    saturationEffect.desaturation = 0
+                if (saturationEffect.desaturation === 0)
+                    saturationEffect.desaturation = 1
+                if (saturationEffect.desaturation === 0)
+                    rectangle.color = "#262728"
+                if (saturationEffect.desaturation === 1)
+                    rectangle.color = "#404244"
+                if (saturationEffect.desaturation === 0)
+                    label.color = "#686868"
+                if (saturationEffect.desaturation === 1)
+                    label.color = Constants.textDefaultColor
+            }
+
+            onExited: {
+                saturationEffect.desaturation = 1
+                rectangle.color = "#262728"
+                label.color = "#686868"
+            }
+
+            onClicked: root.clicked()
+        }
+    }
+
+    SaturationEffect {
+        id: saturationEffect
+        x: 15
+        y: 10
+        width: 240
+        height: 125
+        desaturation: 0
+        antialiasing: true
+        Behavior on desaturation {
+            PropertyAnimation {
+            }
+        }
+
+        Image {
+            id: image
+            width: 240
+            height: 125
+            fillMode: Image.PreserveAspectFit
+        }
+    }
+
+    Timeline {
+        id: animation
+        startFrame: 0
+        enabled: true
+        endFrame: 1000
+
+        KeyframeGroup {
+            target: saturationEffect
+            property: "desaturation"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+            }
+        }
+
+        KeyframeGroup {
+            target: label
+            property: "color"
+
+            Keyframe {
+                value: "#686868"
+                frame: 0
+            }
+
+            Keyframe {
+                value: Constants.textDefaultColor
+                frame: 1000
+            }
+        }
+
+        KeyframeGroup {
+            target: rectangle
+            property: "color"
+
+            Keyframe {
+                value: "#262728"
+                frame: 0
+            }
+
+            Keyframe {
+                value: "#404244"
+                frame: 1000
+            }
+        }
+    }
+
+    PropertyAnimation {
+        id: propertyAnimation
+        target: animation
+        property: "currentFrame"
+        running: false
+        duration: 1000
+        to: animation.endFrame
+        from: animation.startFrame
+        loops: 1
+    }
+
+    Text {
+        id: label
+        x: 1
+        y: 145
+        color: "#686868"
+
+        renderType: Text.NativeRendering
+        font.pixelSize: 14
+        font.family: StudioFonts.titilliumWeb_regular
+    }
+
+    Image {
+        id: downloadCloud
+        x: 210
+        y: 118
+        width: 60
+        height: 60
+        source: "images/downloadCloud.svg"
+        sourceSize.height: 60
+        sourceSize.width: 60
+        fillMode: Image.PreserveAspectFit
+        visible: false
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:1.3300000429153442}D{i:8}
+}
+##^##*/
diff --git a/src/plugins/studiowelcome/qml/welcomepage/MyButton.qml b/src/plugins/studiowelcome/qml/welcomepage/MyButton.qml
new file mode 100644
index 0000000000..a73191350e
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/MyButton.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import QtQuick.Templates 2.3
+import welcome 1.0
+import StudioFonts 1.0
+
+Button {
+    id: button
+
+    property color hoverColor: Constants.textHoverColor
+    property color defaultColor: Constants.textDefaultColor
+    property color checkedColor: Constants.textDefaultColor
+
+    text: "test"
+
+    implicitWidth: background.width
+    implicitHeight: background.height
+
+    contentItem: Text {
+        id: textButton
+        text: button.text
+
+        color: checked ? button.checkedColor :
+                         button.hovered ? button.hoverColor :
+                                          button.defaultColor
+        font.family: StudioFonts.titilliumWeb_regular
+        renderType: Text.NativeRendering
+        font.pixelSize: 18
+    }
+
+    background: Item {
+        width: textButton.implicitWidth
+        height: textButton.implicitHeight
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/MyTabButton.qml b/src/plugins/studiowelcome/qml/welcomepage/MyTabButton.qml
new file mode 100644
index 0000000000..420b3a2b67
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/MyTabButton.qml
@@ -0,0 +1,33 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+
+MyButton {
+    checkable: true
+    autoExclusive: true
+    defaultColor: "#686868"
+    hoverColor: "#79797C"
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml b/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml
new file mode 100644
index 0000000000..099c123ecf
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/ProjectsGrid.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.9
+import welcome 1.0
+
+GridView {
+    id: root
+    cellHeight: 180
+    cellWidth: 285
+
+    clip: true
+
+    signal itemSelected(int index, variant item)
+
+    delegate: HoverOverDesaturate {
+        id: hoverOverDesaturate
+        imageSource: typeof(thumbnail) === "undefined" ? "images/thumbnail_test.png" : thumbnail;
+        labelText: displayName
+        downloadIcon: typeof(showDownload) === "undefined" ? false : showDownload;
+        onClicked: root.itemSelected(index, root.model.get(index))
+
+        SequentialAnimation {
+            id: animation
+            running: hoverOverDesaturate.visible
+
+            PropertyAction {
+                target: hoverOverDesaturate
+                property: "scale"
+                value: 0.0
+            }
+            PauseAnimation {
+                duration: model.index > 0 ? 100 * model.index : 0
+            }
+            NumberAnimation {
+                target: hoverOverDesaturate
+                property: "scale"
+                from: 0.0
+                to: 1.0
+                duration: 200
+                easing.type: Easing.InOutExpo
+            }
+        }
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/SaturationEffect.qml b/src/plugins/studiowelcome/qml/welcomepage/SaturationEffect.qml
new file mode 100644
index 0000000000..32d2448d6e
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/SaturationEffect.qml
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property real desaturation: 1.0
+
+    Rectangle {
+        z: 10
+        anchors.fill: parent
+        color: "#2d2e30"
+        anchors.margins: -16
+
+        opacity: root.desaturation * 0.6
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/TutorialsModel.qml b/src/plugins/studiowelcome/qml/welcomepage/TutorialsModel.qml
new file mode 100644
index 0000000000..efb59e5a0a
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/TutorialsModel.qml
@@ -0,0 +1,130 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+    ListElement {
+        displayName: "The Designer Tool Developers Love"
+        thumbnail: "images/webinar1.png"
+        url: "https://youtu.be/gU_tDbebAzM"
+    }
+
+    ListElement {
+        displayName: "From Photoshop to Prototype"
+        thumbnail: "images/webinar2.png"
+        url: "https://youtu.be/ZzbucmQPU44"
+    }
+
+    ListElement {
+        displayName: "Qt for Designers and Developers"
+        thumbnail: "images/designer_and_developers.png"
+        url: "https://www.youtube.com/watch?v=EgjCvZWEPWk"
+    }
+
+    ListElement {
+        displayName: "QTWS - Designer and Developer Workflow"
+        thumbnail: "images/qtws_video_thumbnail.png"
+        url: "https://www.youtube.com/watch?v=4ug0EUdS2RM"
+    }
+
+    ListElement {
+        displayName: "QTWS - Turn UI designs into working prototypes"
+        thumbnail: "images/bridging_the_gap.png"
+        url: "https://www.youtube.com/watch?v=qQM2oEWRBOw&feature=emb_logo"
+    }
+
+    ListElement {
+        displayName: "What's New in Design Studio 1.5"
+        thumbnail: "images/what_is_new_15.png"
+        url: "https://www.youtube.com/watch?v=e-HAZrisi5o"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: UI Navigation"
+        thumbnail: "images/Qt_QT_nav.png"
+        url: "https://youtu.be/RfEYO-5Mw6s"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: Text Element"
+        thumbnail: "images/Qt_QT_textElement.png"
+        url: "https://youtu.be/yOUdg1o2KJM"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: Animated Image"
+        thumbnail: "images/Qt_QT_animatedImage.png"
+        url: "https://youtu.be/DVWd_xMMgvg"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: Slider Control"
+        thumbnail: "images/Qt_QT_sliderControl.png"
+        url: "https://youtu.be/Ed8WS03C-Vk"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: Bindings"
+        thumbnail: "images/Qt_QT_bindings.png"
+        url: "https://youtu.be/UfvA04CIXv0"
+    }
+
+    ListElement {
+        displayName: "Qt Design Studio QuickTip: Interactive 3D"
+        thumbnail: "images/Qt_QT_interactive3d.png"
+        url: "https://youtu.be/w1yhDl93YI0"
+    }
+
+    ListElement {
+        displayName: "Sketch Bridge Tutorial - Part 1"
+        thumbnail: "images/sketchTutorial_1.png"
+        url: "https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-1"
+    }
+
+    ListElement {
+        displayName: "Sketch Bridge Tutorial - Part 2"
+        thumbnail: "images/sketchTutorial_2.png"
+        url: "https://www.qt.io/blog/qt-design-studio-sketch-bridge-tutorial-part-2"
+    }
+
+    ListElement {
+        displayName: "Create New Project"
+        thumbnail: "images/gettingStarted_newProject.png"
+        url: "https://youtu.be/9ihYeC0YJ0M"
+    }
+
+    ListElement {
+        displayName: "Using Qt Quick 3D Components"
+        thumbnail: "images/gettingStarted_3dComponents.png"
+        url: "https://youtu.be/u3kZJjlk3CY"
+    }
+
+    ListElement {
+        displayName: "Using Custom Shaders, Materials, and Effects"
+        thumbnail: "images/gettingStarted_shaders.png"
+        url: "https://youtu.be/bMXeeQw6BYs"
+    }
+}
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_animatedImage.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_animatedImage.png
index b374319a3e..b374319a3e 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_animatedImage.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_animatedImage.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_bindings.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_bindings.png
index a750dce19a..a750dce19a 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_bindings.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_bindings.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_interactive3d.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_interactive3d.png
index 28c05655ce..28c05655ce 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_interactive3d.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_interactive3d.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_nav.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_nav.png
index 50cc98b56b..50cc98b56b 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_nav.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_nav.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_sliderControl.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_sliderControl.png
index 158dfa7dd7..158dfa7dd7 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_sliderControl.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_sliderControl.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_textElement.png b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_textElement.png
index 784a3c57ba..784a3c57ba 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/Qt_QT_textElement.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/Qt_QT_textElement.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/bridging_the_gap.png b/src/plugins/studiowelcome/qml/welcomepage/images/bridging_the_gap.png
index 2702abf417..2702abf417 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/bridging_the_gap.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/bridging_the_gap.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/coffeemachinedemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/coffeemachinedemo_thumbnail.png
index ced7ae80d1..ced7ae80d1 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/coffeemachinedemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/coffeemachinedemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/cppdemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/cppdemo_thumbnail.png
index f92be7f50f..f92be7f50f 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/cppdemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/cppdemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/designer_and_developers.png b/src/plugins/studiowelcome/qml/welcomepage/images/designer_and_developers.png
index 870a597282..870a597282 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/designer_and_developers.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/designer_and_developers.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/digital_cluster_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/digital_cluster_thumbnail.png
index afad8c8c7b..afad8c8c7b 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/digital_cluster_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/digital_cluster_thumbnail.png
diff --git a/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg b/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg
new file mode 100644
index 0000000000..3a527c3e54
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/downloadCloud.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 128 128" overflow="visible" xml:space="preserve">
+<g transform="translate(0.000000,2000.000000) scale(0.100000,-0.100000)">
+	<path fill="#686868" d="M764,19815.1c-12.5-0.6-28.9-2.1-38.4-3.5c-30-4.3-73-22.5-107.4-45.4c-19.9-13.2-34.6-25.2-51.1-41.6
+		c-18.6-18.6-30.1-33.4-43.2-55.8l-5.8-9.9l-6.7,3.2c-44.8,21.1-105.6,27.1-154.5,15.3c-35.4-8.5-75.1-30-104.5-56.5
+		c-3.4-3.1-6.8-6-7.5-6.5c-2.2-1.6-17.1-17.9-22.3-24.5c-7.4-9.3-16.5-23.4-21.7-33.8c-13.5-26.7-25.2-66.5-26.7-91l-0.4-7
+		l-15.9-7.9c-26.7-13.3-44.8-26.6-66.8-49.2c-18.9-19.3-31.4-36.4-41.9-57c-22.4-44.3-29.9-95.3-20.8-142.8
+		c8.4-44.1,29.1-83.5,61.5-117.1c35.2-36.5,62.1-52.4,108.2-64c24-6,47.3-7.8,115.4-8.9c12.4-0.2,29.7-0.4,38.4-0.6
+		c78.9-1.6,573.8-2.5,615.8-1.1c54,1.7,79,3.6,101.9,7.4c21.4,3.6,36.6,8.4,59.7,18.8c31.7,14.3,49.3,26.2,71,48
+		c22.6,22.7,38,46.4,49.6,76.8c14.6,38.2,19.8,83.7,13.7,121.3c-5.2,31.9-19.8,67.7-38.7,94.4c-10.5,14.7-28.8,34.7-42.7,46.2
+		c-28.8,24.1-58.1,39.7-90.8,48.4c-7.5,2-9.1,2.7-9.1,3.6c0,0.6,0.8,6.8,1.7,13.7c1.6,11.5,1.7,14.2,1.7,32.8
+		c0,21.9-0.9,31.7-4.4,49.8c-9.2,46.3-30,91.8-59.8,130.6c-21.3,27.8-49.5,53.4-77,69.9c-31.4,18.8-83.2,39.1-108.8,42.6
+		C819.9,19815.7,790.2,19816.3,764,19815.1z M828,19778.4c13-1.8,27.2-6.1,48.6-14.6c24-9.6,42.8-19,56.8-28.3
+		c57.9-38.7,101.4-106.8,113.6-178c3.9-22.6,4.1-43.6,0.6-69.7c-1.1-8.4-2.2-19-2.3-23.5c-0.3-7.6-0.3-8.5,1.1-11.6
+		c0.9-2.1,2.6-4.4,4.6-6.1c3.6-3.2,4.9-3.7,23.6-8.6c19.7-5.2,28.8-8.4,42.2-15.2c32.3-16.2,62.4-42.8,82-72.5
+		c14.5-22,26.1-52.4,29.9-78.6c0.8-5.6,1.1-11.6,1.1-22.8c-0.1-55-19.5-104.3-55.1-140.1c-18.5-18.6-39.9-32.1-71-44.9
+		c-32.4-13.4-63.1-16.9-162.9-18.8c-36.3-0.7-402.6-0.4-440.8,0.4c-8.2,0.2-43.7,0.4-78.9,0.6c-93.9,0.5-151.4,1.6-178.1,3.5
+		c-14.9,1.1-24.2,2.5-36.8,5.7c-39,9.9-59.1,21.9-89.9,53.6c-26,26.7-44.1,60-51.4,94.6c-8.9,42.1-3.2,84.4,16.8,124.7
+		c11.5,23.2,33.3,48.7,58.8,69c10.2,8.2,20.3,14.4,34.3,21.2c21.2,10.4,27.7,15.3,32,24.5c2.4,5,3.5,10.5,3.5,17.2
+		c0,12.4,5.9,37,14,59.1c4.4,11.9,12.1,27.5,18.3,36.7c18.9,28.3,49.9,55,83.7,71.9c29.5,14.8,54.5,20.2,89.4,19.4
+		c15-0.3,24.8-1.4,38-4c18.7-3.7,30.7-8,51.1-18.1c17-8.6,19.2-9.1,25.8-7.2c6.1,1.8,8.7,4.9,18.6,22.2c10.8,19,14.4,24.8,20.7,33.2
+		c28.7,38.1,74.9,72.8,121.8,91.3c23.8,9.4,36.1,12.1,62.8,13.9c5.6,0.4,11.6,0.8,13.3,0.9C774.9,19779.8,823.3,19779.1,828,19778.4
+		z"/>
+</g>
+<path  fill="#686868" d="M82.4,65.7L70.2,78.7c0,0-0.1,0-0.1,0l0-33.5c0-1.6-1.2-3.1-2.9-3.2c-1.7-0.1-3.1,1.3-3.1,3v33.7c0,0,0,0-0.1,0L52,65.7
+	c-0.9-1-2.5-1.1-3.6-0.1h0c-1,0.9-1.1,2.5-0.1,3.6l16.7,18c1.2,1.3,3.2,1.3,4.3,0l16.7-18c0.9-1,0.9-2.6-0.1-3.6h0
+	C84.9,64.6,83.3,64.6,82.4,65.7z"/>
+</svg>
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/ebike_demo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/ebike_demo_thumbnail.png
index 67cf3b9bff..67cf3b9bff 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/ebike_demo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/ebike_demo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/effectdemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/effectdemo_thumbnail.png
index 505c02e88e..505c02e88e 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/effectdemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/effectdemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_3dComponents.png b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_3dComponents.png
index 9708bff083..9708bff083 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_3dComponents.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_3dComponents.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_newProject.png b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_newProject.png
index 812b412b0a..812b412b0a 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_newProject.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_newProject.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_shaders.png b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_shaders.png
index 70e1774704..70e1774704 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/gettingStarted_shaders.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/gettingStarted_shaders.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/highendivi_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/highendivi_thumbnail.png
index 5428c80776..5428c80776 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/highendivi_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/highendivi_thumbnail.png
diff --git a/src/plugins/studiowelcome/qml/welcomepage/images/icon_default.png b/src/plugins/studiowelcome/qml/welcomepage/images/icon_default.png
new file mode 100644
index 0000000000..82b852a408
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/icon_default.png
diff --git a/src/plugins/studiowelcome/qml/welcomepage/images/icon_hover.png b/src/plugins/studiowelcome/qml/welcomepage/images/icon_hover.png
new file mode 100644
index 0000000000..693fdaf7b5
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/icon_hover.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/particles_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/particles_thumbnail.png
index f3014ab054..f3014ab054 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/particles_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/particles_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/progressbar_demo.png b/src/plugins/studiowelcome/qml/welcomepage/images/progressbar_demo.png
index b1af2d8f41..b1af2d8f41 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/progressbar_demo.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/progressbar_demo.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/qtws_video_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/qtws_video_thumbnail.png
index e24783aee0..e24783aee0 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/qtws_video_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/qtws_video_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/sidemenu_demo.png b/src/plugins/studiowelcome/qml/welcomepage/images/sidemenu_demo.png
index b577ed4a0d..b577ed4a0d 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/sidemenu_demo.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/sidemenu_demo.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/sketchTutorial_1.png b/src/plugins/studiowelcome/qml/welcomepage/images/sketchTutorial_1.png
index 2285b93d64..2285b93d64 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/sketchTutorial_1.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/sketchTutorial_1.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/sketchTutorial_2.png b/src/plugins/studiowelcome/qml/welcomepage/images/sketchTutorial_2.png
index fec8c65ea3..fec8c65ea3 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/sketchTutorial_2.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/sketchTutorial_2.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/thermo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/thermo_thumbnail.png
index 48bd48b8ce..48bd48b8ce 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/thermo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/thermo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/thumbnail_test.png b/src/plugins/studiowelcome/qml/welcomepage/images/thumbnail_test.png
index 3c4834e644..3c4834e644 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/thumbnail_test.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/thumbnail_test.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/tutorialclusterdemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/tutorialclusterdemo_thumbnail.png
index 925a1247ca..925a1247ca 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/tutorialclusterdemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/tutorialclusterdemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/virtualkeyboard_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/virtualkeyboard_thumbnail.png
index 20471299a9..20471299a9 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/virtualkeyboard_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/virtualkeyboard_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/washingmachinedemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/washingmachinedemo_thumbnail.png
index b5246626c5..b5246626c5 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/washingmachinedemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/washingmachinedemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/webinar1.png b/src/plugins/studiowelcome/qml/welcomepage/images/webinar1.png
index ba24ffc3bf..ba24ffc3bf 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/webinar1.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/webinar1.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/webinar2.png b/src/plugins/studiowelcome/qml/welcomepage/images/webinar2.png
index 325c7cdc33..325c7cdc33 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/webinar2.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/webinar2.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/webinardemo_thumbnail.png b/src/plugins/studiowelcome/qml/welcomepage/images/webinardemo_thumbnail.png
index 3cd777ab3f..3cd777ab3f 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/webinardemo_thumbnail.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/webinardemo_thumbnail.png
diff --git a/share/qtcreator/qmldesigner/welcomepage/images/what_is_new_15.png b/src/plugins/studiowelcome/qml/welcomepage/images/what_is_new_15.png
index 8fb3f07287..8fb3f07287 100644
--- a/share/qtcreator/qmldesigner/welcomepage/images/what_is_new_15.png
+++ b/src/plugins/studiowelcome/qml/welcomepage/images/what_is_new_15.png
diff --git a/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/Constants.qml b/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/Constants.qml
new file mode 100644
index 0000000000..84f8da8d10
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/Constants.qml
@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+pragma Singleton
+
+import QtQuick 2.6
+import StudioFonts 1.0
+
+QtObject {
+    readonly property color backgroundColor: "#443224"
+
+    readonly property color textDefaultColor: "#b9b9ba"
+
+    readonly property color textHoverColor: "#ffffff"
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/qmldir b/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/qmldir
new file mode 100644
index 0000000000..616ac20353
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/imports/welcome/qmldir
@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml
diff --git a/src/plugins/studiowelcome/qml/welcomepage/main.qml b/src/plugins/studiowelcome/qml/welcomepage/main.qml
new file mode 100644
index 0000000000..ca09aa07a5
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/main.qml
@@ -0,0 +1,204 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.3
+import welcome 1.0
+import projectmodel 1.0
+import StudioFonts 1.0
+
+Item {
+    width: 1024
+    height: 786
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: parent
+        visible: true
+        color: "#2d2e30"
+
+        StackLayout {
+            id: stackLayout
+            anchors.margins: 10
+            anchors.top: topLine.bottom
+            anchors.bottom: bottomLine.top
+            anchors.right: parent.right
+            anchors.left: parent.left
+
+            CustomScrollView {
+                ProjectsGrid {
+                    model: ProjectModel {
+                        id: projectModel
+                    }
+                    onItemSelected: function(index, item) { projectModel.openProjectAt(index) }
+                }
+            }
+
+            CustomScrollView {
+                ProjectsGrid {
+                    model: ExamplesModel {}
+                    onItemSelected: function(index, item) {
+                        projectModel.openExample(item.projectName, item.qmlFileName, item.url, item.explicitQmlproject)
+                    }
+                }
+            }
+
+            CustomScrollView{
+                ProjectsGrid {
+                    model: TutorialsModel {}
+                    onItemSelected: function(index, item) { Qt.openUrlExternally(item.url) }
+                }
+            }
+        }
+        Rectangle {
+            id: topLine
+            height: 1
+            color: "#bababa"
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.top: parent.top
+            anchors.topMargin: 200
+        }
+
+        Rectangle {
+            id: bottomLine
+            height: 1
+            color: "#bababa"
+            anchors.left: topLine.left
+            anchors.right: topLine.right
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 60
+        }
+
+        Row {
+            x: 8
+            y: 160
+            spacing: 26
+
+            MyTabButton {
+                text: qsTr("Recent Projects")
+                checked: true
+                onClicked: stackLayout.currentIndex = 0
+            }
+
+            MyTabButton {
+                text: qsTr("Examples")
+                onClicked: stackLayout.currentIndex = 1
+            }
+
+            MyTabButton {
+                text: qsTr("Tutorials")
+                onClicked: stackLayout.currentIndex = 2
+            }
+        }
+
+        AccountImage {
+            id: account
+            x: 946
+            y: 29
+            anchors.right: parent.right
+            anchors.rightMargin: 40
+        }
+
+        GridLayout {
+            y: 78
+            anchors.horizontalCenter: parent.horizontalCenter
+            columnSpacing: 10
+            rows: 2
+            columns: 2
+
+            Text {
+                id: welcomeTo
+                color: Constants.textDefaultColor
+                text: qsTr("Welcome to")
+                renderType: Text.NativeRendering
+                font.pixelSize: 22
+                font.family: StudioFonts.titilliumWeb_regular
+            }
+
+            Text {
+                id: qtDesignStudio
+                color: "#4cd265"
+                text: qsTr("Qt Design Studio")
+                renderType: Text.NativeRendering
+                font.family: StudioFonts.titilliumWeb_regular
+                font.pixelSize: 22
+            }
+
+            MyButton {
+                text: qsTr("Create New")
+                onClicked: projectModel.createProject()
+            }
+
+            MyButton {
+                text: qsTr("Open Project")
+                onClicked: projectModel.openProject()
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            }
+        }
+
+        RowLayout {
+            y: 732
+            height: 28
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 26
+            spacing: 50
+
+            MyButton {
+                text: qsTr("Help")
+                onClicked: projectModel.showHelp()
+            }
+
+            MyButton {
+                text: qsTr("Community")
+                onClicked: Qt.openUrlExternally("https://forum.qt.io/")
+            }
+
+            MyButton {
+                text: qsTr("Blog")
+                onClicked: Qt.openUrlExternally("http://blog.qt.io/")
+            }
+        }
+
+        Text {
+            id: qtDesignStudio1
+            x: 891
+            y: 171
+            color: "#ffffff"
+            text: qsTr("Community Edition")
+            anchors.right: parent.right
+            anchors.rightMargin: 23
+            font.weight: Font.Light
+            font.pixelSize: 14
+            font.family: StudioFonts.titilliumWeb_regular
+            renderType: Text.NativeRendering
+            visible: projectModel.communityVersion
+        }
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/ProjectModel.qml b/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/ProjectModel.qml
new file mode 100644
index 0000000000..bca1783d42
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/ProjectModel.qml
@@ -0,0 +1,138 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+ListModel {
+
+    property bool communityVersion: true
+    ListElement {
+        displayName: "Project 01"
+        prettyFilePath: "my_file_1"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 02"
+        prettyFilePath: "my_file_2"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 03"
+        prettyFilePath: "my_file_3"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 04"
+        prettyFilePath: "my_file_4"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 05"
+        prettyFilePath: "my_file_5"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 06"
+        prettyFilePath: "my_file_6"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 07"
+        prettyFilePath: "my_file_7"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 08"
+        filename: "my_file_8"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 09"
+        filename: "my_file_9"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 10"
+        prettyFilePath: "my_file_10"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 11"
+        filename: "my_file_11"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 12"
+        prettyFilePath: "my_file_12"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 13"
+        filename: "my_file_13"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 14"
+        prettyFilePath: "my_file_14"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 15"
+        filename: "my_file_15"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 16"
+        filename: "my_file_16"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 17"
+        filename: "my_file_17"
+        thumbnail: "images/thumbnail_test.png"
+    }
+
+    ListElement {
+        displayName: "Project 18"
+        prettyFilePath: "my_file_18"
+        thumbnail: "images/thumbnail_test.png"
+    }
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/qmldir b/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/qmldir
new file mode 100644
index 0000000000..0d7bc345c2
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/mockData/projectmodel/qmldir
@@ -0,0 +1 @@
+ProjectModel 1.0 ProjectModel.qml
diff --git a/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/UsageStatisticModel.qml b/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/UsageStatisticModel.qml
new file mode 100644
index 0000000000..c19250f214
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/UsageStatisticModel.qml
@@ -0,0 +1,30 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+QtObject {
+    property bool usageStatisticEnabled: false
+}
diff --git a/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/qmldir b/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/qmldir
new file mode 100644
index 0000000000..c83a43a8ae
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/mockData/usagestatistics/qmldir
@@ -0,0 +1 @@
+UsageStatisticModel 1.0 UsageStatisticModel.qml
diff --git a/src/plugins/studiowelcome/qml/welcomepage/welcomepage.qmlproject b/src/plugins/studiowelcome/qml/welcomepage/welcomepage.qmlproject
new file mode 100644
index 0000000000..de393d88b0
--- /dev/null
+++ b/src/plugins/studiowelcome/qml/welcomepage/welcomepage.qmlproject
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "main.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports", "mockData", "../../../../share/3rdparty/studiofonts" ]
+
+    Environment {
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+}
diff --git a/src/plugins/studiowelcome/studiowelcomeplugin.cpp b/src/plugins/studiowelcome/studiowelcomeplugin.cpp
index 92531da324..470ca73144 100644
--- a/src/plugins/studiowelcome/studiowelcomeplugin.cpp
+++ b/src/plugins/studiowelcome/studiowelcomeplugin.cpp
@@ -42,8 +42,6 @@
 #include <projectexplorer/projectexplorer.h>
 #include <projectexplorer/projectmanager.h>
 
-#include <qmldesigner/components/componentcore/theme.h>
-
 #include <utils/checkablemessagebox.h>
 #include <utils/icon.h>
 #include <utils/infobar.h>
@@ -57,7 +55,6 @@
 #include <QFileInfo>
 #include <QFontDatabase>
 #include <QPointer>
-#include <QShortcut>
 #include <QQmlContext>
 #include <QQmlEngine>
 #include <QQuickItem>
@@ -380,7 +377,6 @@ void StudioWelcomePlugin::extensionsInitialized()
 #endif
 
 
-
             QTC_ASSERT(s_view->rootObject(),
                        qWarning() << "The StudioWelcomePlugin has a runtime depdendency on "
                                      "qt/qtquicktimeline.";
@@ -454,22 +450,16 @@ WelcomeMode::WelcomeMode()
 
     m_modeWidget = new QQuickWidget;
     m_modeWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
-    QmlDesigner::Theme::setupTheme(m_modeWidget->engine());
     m_modeWidget->engine()->addImportPath("qrc:/studiofonts");
-    m_modeWidget->engine()->addImportPath(Core::ICore::resourcePath("qmldesigner/propertyEditorQmlSources/imports").toString());
-
-    const QString welcomePagePath = Core::ICore::resourcePath("qmldesigner/welcomepage").toString();
-    m_modeWidget->engine()->addImportPath(welcomePagePath + "/imports");
-    m_modeWidget->setSource(QUrl::fromLocalFile(welcomePagePath + "/main.qml"));
-
-    QShortcut *updateShortcut = nullptr;
-    if (Utils::HostOsInfo::isMacHost())
-        updateShortcut = new QShortcut(QKeySequence(Qt::ALT + Qt::Key_F5), m_modeWidget);
-    else
-        updateShortcut = new QShortcut(QKeySequence(Qt::CTRL + Qt::Key_F5), m_modeWidget);
-    connect(updateShortcut, &QShortcut::activated, this, [this, welcomePagePath](){
-        m_modeWidget->setSource(QUrl::fromLocalFile(welcomePagePath + "/main.qml"));
-    });
+#ifdef QT_DEBUG
+    m_modeWidget->engine()->addImportPath(QLatin1String(STUDIO_QML_PATH)
+                                    + "welcomepage/imports");
+    m_modeWidget->setSource(QUrl::fromLocalFile(QLatin1String(STUDIO_QML_PATH)
+                                  + "welcomepage/main.qml"));
+#else
+    m_modeWidget->engine()->addImportPath("qrc:/qml/welcomepage/imports");
+    m_modeWidget->setSource(QUrl("qrc:/qml/welcomepage/main.qml"));
+#endif
 
     setWidget(m_modeWidget);