Doc: Update front page and getting started page

Apply new design and images from the UX team.

Task-number: QTCREATORBUG-30248
Change-Id: I202288f0dccedc65e47cd8bdfa49915d47cd79cd
Reviewed-by: hjk <hjk@qt.io>
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
Reviewed-by: Eike Ziller <eike.ziller@qt.io>

doc/qtcreator/config/qtcreator-project.qdocconf

@@ -1,5 +1,5 @@
 project     = qtcreator
-description = "$IDE_DISPLAY_NAME Manual"
+description = "$IDE_DISPLAY_NAME Documentation"
 url         = http://doc.qt.io/$IDE_ID
 
 #Words to ignore for auto-linking
@@ -57,14 +57,14 @@ qhp.projects            = QtCreator
 qhp.QtCreator.file             = qtcreator.qhp
 qhp.QtCreator.namespace        = org.qt-project.qtcreator.$QTC_VERSION_TAG
 qhp.QtCreator.virtualFolder    = doc
-qhp.QtCreator.indexTitle       = $IDE_DISPLAY_NAME Manual $QTC_VERSION
+qhp.QtCreator.indexTitle       = $IDE_DISPLAY_NAME Documentation $QTC_VERSION
 qhp.QtCreator.filterAttributes = $IDE_ID $QTC_VERSION
 qhp.QtCreator.customFilters.QtCreator.name = $IDE_DISPLAY_NAME $QTC_VERSION
 qhp.QtCreator.customFilters.QtCreator.filterAttributes = $IDE_ID $QTC_VERSION
 qhp.QtCreator.indexRoot        =
 
 qhp.QtCreator.subprojects = manual
-qhp.QtCreator.subprojects.manual.title = $IDE_DISPLAY_NAME Manual
+qhp.QtCreator.subprojects.manual.title = $IDE_DISPLAY_NAME Documentation
 qhp.QtCreator.subprojects.manual.indexTitle = All Topics
 qhp.QtCreator.subprojects.manual.type = manual
 
@@ -73,10 +73,10 @@ qhp.QtCreator.subprojects.manual.type = manual
 macro.see                       = "\\sa"
 macro.function                  = "\\fn"
 
-navigation.landingpage = "$IDE_DISPLAY_NAME Manual"
+navigation.landingpage = "$IDE_DISPLAY_NAME Documentation"
 
 # Auto-generate navigation linking based on "All Topics":
 navigation.toctitles = "All Topics"
 navigation.toctitles.inclusive = false
 
-buildversion = "$IDE_DISPLAY_NAME Manual $QTC_VERSION"
+buildversion = "$IDE_DISPLAY_NAME $QTC_VERSION"

doc/qtcreator/config/style/qt5-sidebar.html

@@ -1,16 +1,20 @@
 <div class="sectionlist normallist">
     <ul>
-            <li><a href="qtcreator-toc.html">Click Here for a List of All Topics</a></li>
+            <li><a href="qtcreator-toc.html">ALL TOPICS</a></li>
+    </ul>
+</div>
+<div class="sectionlist normallist">
+    <ul>
+            <li><a href="creator-how-to-install.html">Installation</a></li>
     </ul>
 </div>
 <div class="sectionlist normallist">
     <div class="heading">
-        <h2>Developing with Qt Creator</h2>
+        <h2>Getting Started</h2>
     </div>
     <div class="indexboxcont indexboxbar">
         <ul>
             <li><a href="creator-overview.html">Overview</a></li>
-            <li><a href="creator-getting-started.html">Getting Started</a></li>
             <li><a href="creator-project-creating.html">Creating Projects</a></li>
             <li><a href="creator-configuring-projects.html">Configuring Projects</a></li>
             <li><a href="creator-debugging.html">Debugging</a></li>

doc/qtcreator/src/external-resources/external-resources.qdoc

@@ -1,6 +1,10 @@
 // Copyright (C) 2022 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
+/*!
+    \externalpage https://doc.qt.io/index.html
+    \title Qt Documentation
+*/
 /*!
     \externalpage https://www.perforce.com/manuals/cmdref/Content/CmdRef/P4CONFIG.html
     \title Perforce: P4CONFIG

doc/qtcreator/src/howto/creator-only/creator-how-to-install.qdoc

@@ -3,14 +3,13 @@
 
 /*!
     \page creator-how-to-install.html
-    \previouspage creator-how-tos.html
+    \previouspage index.html
+    \nextpage creator-getting-started.html
 
-    \ingroup creator-how-to-use
+    \title Installation
-
-    \title Install \QC
 
     You can install either a \e commercial or \e {open source} version of \QC in
-    many ways:
+    the following ways:
 
     \list
         \li As a part of a Qt installation with \l{Get and Install Qt}{\QOI}.
@@ -43,11 +42,11 @@
     To develop with Qt, you also need a Qt version. You can register Qt versions
     in the stand-alone \QC to use them in \l{Kits}{kits}.
 
-    \section2 Use package managers
+    \section2 Using Package Managers
 
     The \QC packages that package managers offer are not
     officially supported. For links to official releases, see
-    \l {Download installation packages}.
+    \l {Downloading Installation Packages}.
 
     On Windows you can use \c chocolatey, and on \macos you can use \c brew.
     These package managers install the latest \QC releases available online.
@@ -68,7 +67,7 @@
     \note Linux distributions might have old \QC versions, so you might want to
     download and install the latest version.
 
-    \section2 Download installation packages
+    \section2 Downloading Installation Packages
 
     You can download \QC installation packages from:
 
@@ -81,7 +80,7 @@
         \li \l{https://github.com/qt-creator/qt-creator/releases}{GitHub}
     \endlist
 
-    \section2 Build from sources
+    \section2 Building from Sources
 
     To test the very latest \QC version, maybe with your own changes,
     you can build it from sources. For more information, see

doc/qtcreator/src/overview/creator-only/creator-configuring.qdoc

@@ -144,5 +144,5 @@
     To install plugins, go to \uicontrol Help > \uicontrol {About Plugins} and
     select \uicontrol {Install Plugins}.
 
-    \sa {Install \QC}, {Reset \QC settings}, {Preferences}
+    \sa {Installation}, {Reset \QC settings}, {Preferences}
 */

doc/qtcreator/src/overview/creator-only/creator-getting-started.qdoc

@@ -1,14 +1,8 @@
-// Copyright (C) 2023 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
-// **********************************************************************
-// NOTE: the sections are not ordered by their logical order to avoid
-// reshuffling the file each time the index order changes (i.e., often).
-// Run the fixnavi.pl script to adjust the links to the index order.
-// **********************************************************************
-
 /*!
-    \previouspage index.html
+    \previouspage creator-how-to-install.html
     \page creator-getting-started.html
     \nextpage creator-overview.html
 
@@ -18,19 +12,17 @@
     \l{https://www.qt.io/academy/course-catalog#getting-started-with-qt-creator}
     {Getting Started with Qt Creator} course in Qt Academy.
 
-    For more information about installing \QC, see \l{Install \QC}.
+    \table borderless
-
-    \table
         \row
-            \li \inlineimage front-gs.png
+            \li \inlineimage icons/installation.png
-            \li \inlineimage front-ui.png
+            \li \inlineimage icons/ide.png
-            \li \inlineimage front-advanced.png
+            \li \inlineimage icons/getting-started.png
         \row
-            \li \b {\l{Developing with \QC}}
+            \li \b {\l{Overview}}
 
                 If you have not used an integrated development environment (IDE)
                 before, or want to know what kind of IDE \QC is, go to
-                \l{Developing with \QC}.
+                \l{Overview}.
             \li \b {\l{User Interface}}
 
                 If you have not used \QC before, and want to become familiar
@@ -43,9 +35,9 @@
                 control systems. For an overview of the options you have, go to
                 \l{Configuring Qt Creator}.
         \row
-            \li \inlineimage front-preview.png
+            \li \inlineimage icons/platform-and-toolchain.png
-            \li \inlineimage front-help.png
+            \li \inlineimage icons/tutorials.png
-            \li
+            \li \inlineimage icons/api-reference.png
         \row
             \li \b {\l{Building and Running an Example}}
 
@@ -59,7 +51,11 @@
                 Now you are ready to start developing your own applications.
                 Pick a tutorial to follow in \l{Tutorials}. To start developing
                 for mobile devices, select \l{Creating a Mobile Application}.
-            \li
+            \li \b{\l {Qt Documentation}}
+
+                For more examples, as well as the details about using Qt tools
+                and APIs to develop Qt applications, go to \l {Qt Documentation}.
     \endtable
 
+    \sa {Installation}
 */

doc/qtcreator/src/overview/creator-only/creator-overview.qdoc

@@ -8,11 +8,11 @@
 // **********************************************************************
 
 /*!
-    \previouspage index.html
+    \previouspage creator-getting-started.html
     \page creator-overview.html
-    \nextpage creator-getting-started.html
+    \nextpage creator-quick-tour.html
 
-    \title Developing with \QC
+    \title Overview
 
     \QC is a cross-platform, complete integrated development environment
     (IDE) that you can use to create applications for desktop, embedded,

doc/qtcreator/src/qtcreator-toc.qdoc

@@ -13,10 +13,10 @@
     {Qt documentation} portal or in the \l {Get help}{Help} mode.
 
     \list
-        \li \l{Developing with \QC}
+        \li \l{Installation}
-        \list
         \li \l{Getting Started}
             \list
+                \li \l{Overview}
                 \li \l{User Interface}
                 \li \l{Configuring Qt Creator}
             \endlist
@@ -24,7 +24,6 @@
         \li \l{Configuring Projects}
         \li \l{Debugging}
         \li \l{Analyzing Code}
-        \endlist
         \li \l{Tutorials}
             \generatelist creator-tutorials
         \li \l{How To}

doc/qtcreator/src/qtcreator.qdoc

@@ -1,75 +1,95 @@
-// Copyright (C) 2023 The Qt Company Ltd.
+// Copyright (C) 2024 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
-// **********************************************************************
-// NOTE: the sections are not ordered by their logical order to avoid
-// reshuffling the file each time the index order changes (i.e., often).
-// Run the fixnavi.pl script to adjust the links to the index order.
-// **********************************************************************
-
 /*!
     \page index.html
-    \nextpage creator-overview.html
+    \nextpage creator-how-to-install.html
 
-    \title Qt Creator Manual
+    \keyword {Qt Creator Manual}
+    \title Qt Creator Documentation
 
-    \QC is a cross-platform, complete integrated development environment
+    \raw HTML
-    (IDE) that you can use to create applications for
+    <style>
-    \l{Desktop Platforms}{desktop}, \l {Embedded Platforms}{embedded}, and
+    .main-navigation table { table-layout: fixed; }
-    \l{Mobile Platforms}{mobile device} platforms, such as \l Android and
+    .main-navigation table tr:first-child { text-align: center; background: none; }
-    \l iOS. It is available for \l Linux, \l \macos and \l Windows
+    </style>
-    operating systems. For more information, see \l{Supported Platforms}.
+    \endraw
 
-    In addition, you can use the experimental
+    \div {class="main-navigation"}
-    \l{Build applications for the web}{WebAssembly plugin}
+    \table borderless 100%
-    to build applications in web format and run them in web
-    browsers.
-
-    \table
         \row
-            \li {4,1} \b {\l{All Topics}}
+            \li \inlineimage icons/installation.png
+            \li \inlineimage icons/getting-started.png
+            \li \inlineimage icons/tutorials.png
         \row
-            \li \inlineimage front-gs.png
+            \li \b {INSTALLATION}
-            \li \inlineimage front-coding.png
+
-            \li \inlineimage front-help.png
+                Install either a \e commercial or \e {open source} version of \QC
-            \li \inlineimage front-advanced.png
+                with \QOI or as a stand-alone tool on Linux, \macos, or Windows.
+
+                \l {Installation}
+            \li \b {GETTING STARTED}
+
+                Learn about the \QC features and UI, as well as how you can make
+                \QC behave more like your favorite code editor or IDE.
+
+                \l{Getting Started}
+            \li \b {TUTORIALS}
+
+                Follow the tutorials to create basic Qt applications for the
+                desktop and mobile devices by using Qt Widgets and Qt Quick.
+
+                \l{Tutorials}
+    \endtable
+    \enddiv
+
+    \section1 About
+
+    Use the \QC cross-platform, complete integrated development environment
+    (IDE) to create applications for \l{Desktop Platforms}{desktop},
+    \l {Embedded Platforms}{embedded}, and \l{Mobile Platforms}{mobile device}
+    platforms, such as \l Android and \l iOS. Also, you can build applications
+    in web format and run them in web browsers with
+    \l{Build applications for the web}{Qt for WebAssembly}.
+
+    \b {HOW TO}
+
+    \raw HTML
+    <style>
+    .link-list table { table-layout: fixed; }
+    .link-list table, .link-list table tr:first-child { background: none; border: none; }
+    </style>
+    \endraw
+
+    \div {class="link-list"}
+    \table 100%
         \row
-            \li \b {\l{Developing with \QC}}
+            \li \inlineimage icons/demo-32x32.png
+            \li \inlineimage icons/build-32x32.png
+            \li \inlineimage icons/settings-32x32.png
+        \row
+                \li Work with Code
                     \list
-                    \li \l{Getting Started}
-                    \li \l{Creating Projects}
-                    \li \l{Configuring Projects}
-                    \li \l{Debugging}
-                    \li \l{Analyzing Code}
-                \endlist
-            \li \b {\l{Tutorials}}
-                \generatelist creator-tutorials
-            \li \b {\l{How To}}
-                \list
-                    \li \l{Analyze}
-                    \li \l{Build and Run}
-                    \li \l{Debug}
-                    \li \l{Design UIs}
-                    \li \l{Develop for Devices}
                         \li \l{Edit Code}
-                    \li \l{Manage Projects}
+                        \li \l{Debug}
-                    \li \l{Read Documentation}
+                        \li \l{Analyze}
                         \li \l{Test}
+                    \endlist
+                \li Build and Run Applications
+                    \list
+                        \li \l{Manage Projects}
+                        \li \l{Manage Kits}
+                        \li \l{Build and Run}
+                        \li \l{Develop for Devices}
+                    \endlist
+                \li Use Tools and Extensions
+                    \list
                         \li \l{Use \QC}
                         \li \l{Use the UI}
-                \endlist
+                        \li \l{Design UIs}
-            \li \b {\l{Reference}}
+                        \li \l{Create Models and Diagrams}
-                \list
+                        \li \l{Read Documentation}
-                    \li \l {Acknowledgements}
-                    \li \l {Build Systems}
-                    \li \l {Devices}
-                    \li \l {Command-Line Options}
-                    \li \l {Custom Wizards}
-                    \li \l {Keyboard Shortcuts}
-                    \li \l {Preferences}
-                    \li \l {Supported Platforms}
-                    \li \l {Version Control Systems}
-                    \li \l {Views}
                     \endlist
     \endtable
+    \enddiv
 */