Documentation: Improve Gutenberg platform docs homepage (WordPress#59749

)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

platform-docs/package.json

@@ -16,8 +16,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=16.0.0",
-		"npm": ">=8 <9"
+		"node": ">=20.10.0",
+		"npm": ">=10.2.3"
 	},
 	"dependencies": {
 		"@docusaurus/core": "2.4.1",

platform-docs/src/components/HomepageBlocks/index.js

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+const blocks = [
+	{
+		title: 'Paragraph',
+		img: require( '@site/static/img/paragraph.png' ).default,
+	},
+	{
+		title: 'Heading',
+		img: require( '@site/static/img/heading.png' ).default,
+	},
+	{
+		title: 'Media & Text',
+		img: require( '@site/static/img/media-text.png' ).default,
+	},
+	{
+		title: 'Image',
+		img: require( '@site/static/img/image.png' ).default,
+	},
+	{
+		title: 'Cover',
+		img: require( '@site/static/img/cover.png' ).default,
+	},
+	{
+		title: 'Gallery',
+		img: require( '@site/static/img/gallery.png' ).default,
+	},
+	{
+		title: 'Video',
+		img: require( '@site/static/img/video.png' ).default,
+	},
+	{
+		title: 'Audio',
+		img: require( '@site/static/img/audio.png' ).default,
+	},
+	{
+		title: 'Columns',
+		img: require( '@site/static/img/columns.png' ).default,
+	},
+	{
+		title: 'File',
+		img: require( '@site/static/img/file.png' ).default,
+	},
+	{
+		title: 'Code',
+		img: require( '@site/static/img/code.png' ).default,
+	},
+	{
+		title: 'List',
+		img: require( '@site/static/img/list.png' ).default,
+	},
+];
+
+function Block( { img, title } ) {
+	return (
+		<div className={ styles.block }>
+			<div>
+				<img className={ styles.image } src={ img } alt={ title } />
+			</div>
+			<h3 className={ styles.blockTitle }>{ title }</h3>
+		</div>
+	);
+}
+
+export default function HomepageBlocks() {
+	return (
+		<section className={ styles.blocks }>
+			<div className={ clsx( 'container', styles.titleContainer ) }>
+				<h2 className={ styles.title }>Be your own builder.</h2>
+				<p className={ styles.description }>
+					Blocks allow users to build their own content without any
+					coding knowledge. Here’s a selection of the default blocks
+					included with Gutenberg:
+				</p>
+			</div>
+			<div className={ clsx( 'container', styles.grid ) }>
+				{ blocks.map( ( props, idx ) => (
+					<Block key={ idx } { ...props } />
+				) ) }
+			</div>
+		</section>
+	);
+}

platform-docs/src/components/HomepageBlocks/styles.module.css

@@ -0,0 +1,52 @@
+.blocks {
+	padding: 8rem 0;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.titleContainer {
+	max-width: 1000px;
+}
+
+.title {
+	font-weight: 400;
+	font-size: 60px;
+}
+
+[data-theme="dark"] .title {
+	color: #fff;
+}
+
+.description {
+	font-size: 20px;
+}
+
+.grid {
+	max-width: 1000px;
+	display: grid;
+	gap: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+}
+
+.image {
+	width: 100%;
+	aspect-ratio: 1/1;
+}
+
+.block {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.blockTitle {
+	padding: 0;
+	margin: 0;
+	font-weight: 400;
+	text-align: center;
+}
+
+[data-theme="dark"] .blockTitle {
+	color: #fff;
+}

platform-docs/src/components/HomepageFeatures/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React from 'react';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -11,8 +12,7 @@ import styles from './styles.module.css';
 const FeatureList = [
 	{
 		title: 'Easy to Use',
-		Svg: require( '@site/static/img/undraw_docusaurus_mountain.svg' )
-			.default,
+		img: require( '@site/static/img/block-media-text.png' ).default,
 		description: (
 			<>
 				Gutenberg was designed from the ground up to be easily installed
@@ -22,39 +22,49 @@ const FeatureList = [
 	},
 	{
 		title: 'Flexible',
-		Svg: require( '@site/static/img/undraw_docusaurus_tree.svg' ).default,
+		img: require( '@site/static/img/plugin-icon.png' ).default,
 		description: (
 			<>
 				Gutenberg allows you to customize the UI of your block editor as
 				you wish.
 			</>
 		),
 	},
+	{
+		title: 'Multi devices',
+		img: require( '@site/static/img/mobile-icon.png' ).default,
+		description: <>Work across screen sizes and devices.</>,
+	},
 	{
 		title: 'Powered by React',
-		Svg: require( '@site/static/img/undraw_docusaurus_react.svg' ).default,
+		svg: require( '@site/static/img/react-icon.svg' ).default,
 		description: <>Extend or customize your block editor using React.</>,
 	},
 ];
 
-function Feature( { Svg, title, description } ) {
+function Feature( { svg: Svg, img, title, description } ) {
 	return (
 		<div className={ styles.feature }>
-			<div className="text--center">
-				<Svg className={ styles.featureSvg } role="img" />
-			</div>
-			<div className="text--center padding-horiz--md">
-				<h3>{ title }</h3>
-				<p>{ description }</p>
+			<div>
+				{ !! Svg && <Svg className={ styles.featureSvg } role="img" /> }
+				{ !! img && (
+					<img
+						className={ styles.featureSvg }
+						src={ img }
+						alt={ title }
+					/>
+				) }
 			</div>
+			<h3 className={ styles.title }>{ title }</h3>
+			<p>{ description }</p>
 		</div>
 	);
 }
 
 export default function HomepageFeatures() {
 	return (
 		<section className={ styles.features }>
-			<div className="row">
+			<div className={ clsx( 'container', styles.grid ) }>
 				{ FeatureList.map( ( props, idx ) => (
 					<Feature key={ idx } { ...props } />
 				) ) }

platform-docs/src/components/HomepageFeatures/styles.module.css

@@ -1,21 +1,34 @@
 .features {
-	display: flex;
-	align-items: center;
-	padding: 2rem 0;
-	background: var(--ifm-color-secondary);
+	padding: 4rem 0;
+	background: url(@site/static/img/gradient_background.png);
+	background-attachment: fixed;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: 50% 50%;
+	color: #fff;
 }
 
-.features > div {
-	max-width: var(--ifm-container-width);
-	margin: auto;
-	justify-content: space-between;
+.grid {
+	max-width: 800px;
+	display: grid;
+	gap: 6rem;
+	grid-template-columns: 1fr 1fr;
 }
 
 .featureSvg {
-	height: 200px;
-	width: 200px;
+	height: 40px;
+	width: 40px;
+	fill: #fff;
 }
 
 .feature {
-	max-width: 30%;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.title {
+	color: #fff;
+	padding: 0;
+	margin: 0;
 }

platform-docs/src/components/HomepageThanks/index.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+export default function HomepageThanks() {
+	return (
+		<section className={ styles.thanks }>
+			<div className={ clsx( 'container', styles.container ) }>
+				<h2 className={ styles.title }>Thanks for trying Gutenberg.</h2>
+				<div className={ styles.columns }>
+					<p className={ styles.description }>
+						Gutenberg is project by the WordPress community. New
+						developments and experiments will continue in the{ ' ' }
+						<a href="http://github.com/wordPress/gutenberg/">
+							Gutenberg repository
+						</a>
+						.
+					</p>
+					<div className={ styles.links }>
+						<div>
+							<a href="https://twitter.com/WordPress">
+								Twitter ↗
+							</a>
+						</div>
+						<div>
+							<a href="http://github.com/wordPress/gutenberg/">
+								Github ↗
+							</a>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}

platform-docs/src/components/HomepageThanks/styles.module.css

@@ -0,0 +1,31 @@
+.thanks {
+	padding: 8rem 0;
+	background: rgb(236, 246, 250);
+	color: #000;
+}
+
+[data-theme="dark"] .thanks a {
+	color: var(--ifm-color-secondary);
+}
+
+.container {
+	max-width: 1000px;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.title {
+	font-weight: 400;
+	font-size: 60px;
+}
+
+.description {
+	font-size: 20px;
+}
+
+.columns {
+	display: grid;
+	gap: 4rem;
+	grid-template-columns: 1fr 1fr;
+}

platform-docs/src/components/HomepageTrustedBy/styles.module.css

@@ -1,5 +1,5 @@
 .container {
-	padding: 5rem 0 2rem;
+	padding: 5rem 0 4rem;
 	background: #fff;
 	color: var(--ifm-color-gray-800);
 }