Revamp GDevelop Homepage

* New "Get Started" section, to guide newcomers on where to start with GDevelop
* New "Build" section, the entry point for your projects
* New "Learn" section, the entry point to tutorials and future help tools
* New "Play" section, the entry point for all games created with GDevelop
* New "Community" section, the entry point to stay informed with the GDevelop world

Author: ClementPasteau

newIDE/app/public/res/homepage/explore-games.png

@@ -217,7 +217,7 @@ export const AssetDetails = ({
         <Line justifyContent="space-between" noMargin>
           <Column>
             <Line alignItems="baseline" noMargin>
-              <Text size="title" displayInlineAsSpan>
+              <Text size="block-title" displayInlineAsSpan>
                 {assetShortHeader.name}
               </Text>
               <Spacer />
@@ -234,6 +234,7 @@ export const AssetDetails = ({
                             Window.openExternalURL(author.website);
                             event.preventDefault();
                           }}
+                          color="secondary"
                         >
                           {author.name}
                         </Link>
@@ -426,6 +427,7 @@ export const AssetDetails = ({
                             Window.openExternalURL(assetLicense.website);
                             event.preventDefault();
                           }}
+                          color="secondary"
                         >
                           {assetLicense.name}
                         </Link>
@@ -450,7 +452,7 @@ export const AssetDetails = ({
         {asset && (
           <Column expand>
             <Line noMargin>
-              <Text size="title" displayInlineAsSpan>
+              <Text size="block-title" displayInlineAsSpan>
                 <Trans>You might like</Trans>
               </Text>
             </Line>

newIDE/app/public/res/homepage/follow-tutorial.png

@@ -136,10 +136,13 @@ export function ExampleDialog({
         )}
         <Line alignItems="center" noMargin>
           {hasIcon ? (
-            <ExampleIcon exampleShortHeader={exampleShortHeader} size={40} />
+            <ExampleIcon
+              exampleShortHeader={exampleShortHeader}
+              type="thumbnail"
+            />
           ) : null}
           <Column expand noMargin={!hasIcon}>
-            <Text noMargin size="title">
+            <Text noMargin size="block-title">
               {exampleShortHeader.name}
             </Text>
           </Column>

newIDE/app/public/res/homepage/start-building.png

@@ -16,21 +16,36 @@ const styles = {
   },
 };
 
+const ICON_SIZES = {
+  preview: 120,
+  thumbnail: 40,
+};
+
 type Props = {|
   exampleShortHeader: ExampleShortHeader,
-  size: number,
+  type: 'thumbnail' | 'preview',
 |};
 
-export const ExampleIcon = ({ exampleShortHeader, size }: Props) => {
+export const ExampleIcon = ({ exampleShortHeader, type }: Props) => {
+  const size = type === 'thumbnail' ? ICON_SIZES.thumbnail : ICON_SIZES.preview;
+  let iconUrl = exampleShortHeader.previewImageUrls[0];
+  if (type === 'thumbnail') {
+    const thumbnailUrl = exampleShortHeader.previewImageUrls.find(url =>
+      url.endsWith('thumbnail.png')
+    );
+    if (thumbnailUrl) iconUrl = thumbnailUrl;
+  }
+  if (type === 'preview') {
+    const previewUrl = exampleShortHeader.previewImageUrls.find(url =>
+      url.endsWith('preview.png')
+    );
+    if (previewUrl) iconUrl = previewUrl;
+  }
   return (
     <div style={styles.iconBackground}>
       <CorsAwareImage
         style={{ ...styles.icon, height: size }}
-        src={
-          exampleShortHeader.previewImageUrls.find(url =>
-            url.endsWith('thumbnail.png')
-          ) || exampleShortHeader.previewImageUrls[0]
-        }
+        src={iconUrl}
         alt={exampleShortHeader.name}
       />
     </div>

newIDE/app/public/res/homepage/take-the-tour.png

@@ -103,7 +103,10 @@ export const ExampleListItem = ({
       <Line noMargin expand>
         <ButtonBase style={styles.button} onClick={onChoose} focusRipple>
           {!!exampleShortHeader.previewImageUrls.length && (
-            <ExampleIcon exampleShortHeader={exampleShortHeader} size={64} />
+            <ExampleIcon
+              exampleShortHeader={exampleShortHeader}
+              type="preview"
+            />
           )}
           <Column expand>
             <Text noMargin>{renderExampleField('name')} </Text>

newIDE/app/src/AssetStore/AssetDetails.js

@@ -135,6 +135,7 @@ export const ExampleStoreStateProvider = ({
     chosenFilters,
     excludedTiers,
     defaultFirstSearchItemIds: firstExampleIds,
+    shuffleResults: false,
   });
 
   const exampleStoreState = React.useMemo(

newIDE/app/src/AssetStore/ExampleStore/ExampleDialog.js

@@ -15,15 +15,23 @@ import { type SearchMatch } from '../../UI/Search/UseSearchStructuredItem';
 import { sendExampleDetailsOpened } from '../../Utils/Analytics/EventSender';
 import { t } from '@lingui/macro';
 
+// When showing examples, always put the starters first.
+const prepareExamples = (examples: Array<ExampleShortHeader>) =>
+  examples.sort((example1, example2) =>
+    example1.tags.includes('Starter') && !example2.tags.includes('Starter')
+      ? 1
+      : 0
+  );
+
+const getExampleName = (exampleShortHeader: ExampleShortHeader) =>
+  exampleShortHeader.name;
+
 type Props = {|
   isOpening: boolean,
   onOpen: ExampleShortHeader => Promise<void>,
   focusOnMount?: boolean,
 |};
 
-const getExampleName = (exampleShortHeader: ExampleShortHeader) =>
-  exampleShortHeader.name;
-
 export const ExampleStore = ({ isOpening, onOpen, focusOnMount }: Props) => {
   const [
     selectedExampleShortHeader,
@@ -106,7 +114,8 @@ export const ExampleStore = ({ isOpening, onOpen, focusOnMount }: Props) => {
                 onRetry={fetchExamplesAndFilters}
                 error={error}
                 searchItems={
-                  searchResults && searchResults.map(({ item }) => item)
+                  searchResults &&
+                  prepareExamples(searchResults.map(({ item }) => item))
                 }
                 getSearchItemUniqueId={getExampleName}
                 renderSearchItem={(exampleShortHeader, onHeightComputed) => (