SiteGen Welcome Step

src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js

@@ -0,0 +1,32 @@
+import { useNavigate } from 'react-router-dom';
+
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { store as nfdOnboardingStore } from '../../../store';
+import classNames from 'classnames';
+
+const NextButtonSiteGen = ( { text, className } ) => {
+	const navigate = useNavigate();
+	const { nextStep } = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+		};
+	} );
+	return (
+		<Button
+			className={ classNames(
+				'nfd-onboarding-button--site-gen-next',
+				className
+			) }
+			onClick={ () => {
+				if ( nextStep ) {
+					navigate( nextStep.path );
+				}
+			} }
+		>
+			{ text }
+		</Button>
+	);
+};
+
+export default NextButtonSiteGen;

src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss

@@ -0,0 +1,25 @@
+.nfd-onboarding-button {
+
+	&--site-gen-next {
+		display: block;
+		background-color: var(--nfd-onboarding-primary);
+		color: var(--nfd-onboarding-secondary);
+		text-align: center;
+		width: 164px;
+		height: 50px;
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
+		margin-top: 24px;
+		border-radius: 6px;
+
+		@media (min-width: 2600px ) {
+			width: 250px;
+			height: 76px;
+		}
+
+		@media (max-width: #{ ($break-small) }) {
+			width: 100px;
+			height: 30px;
+			margin-top: 10px;
+		}
+	}
+}

src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss

@@ -189,5 +189,7 @@ html.nfd-interface-interface-skeleton__html-container {
 
 	&--sitegen {
 		background-image: var(--sitegen-background);
+		background-repeat: no-repeat;
+		background-size: cover;
 	}
 }

src/OnboardingSPA/components/SiteGenPlaceholder/index.js

@@ -1,29 +1,12 @@
-import { useNavigate } from 'react-router-dom';
-
-import { useSelect } from '@wordpress/data';
-import { Button } from '@wordpress/components';
-import { store as nfdOnboardingStore } from '../../store';
+import NextButtonSiteGen from '../Button/NextButtonSiteGen';
 
 const SiteGenPlaceholder = ( { heading } ) => {
-	const navigate = useNavigate();
-	const { nextStep } = useSelect( ( select ) => {
-		return {
-			nextStep: select( nfdOnboardingStore ).getNextStep(),
-		};
-	} );
 	return (
 		<div className="nfd-onboarding-placeholder--site-gen">
 			<h1 className="nfd-onboarding-placeholder--site-gen__heading">
 				{ heading }
 			</h1>
-			<Button
-				className="nfd-onboarding-placeholder--site-gen__button"
-				onClick={ () => {
-					navigate( nextStep.path );
-				} }
-			>
-				Go Next
-			</Button>
+			<NextButtonSiteGen text={ 'Go Next' } />
 		</div>
 	);
 };

src/OnboardingSPA/components/SiteGenPlaceholder/stylesheet.scss

@@ -11,15 +11,5 @@
 			font-size: 70px;
 		}
 
-		&__button {
-			display: block;
-			background-color: var(--nfd-onboarding-primary);
-			color: var(--nfd-onboarding-secondary);
-			text-align: center;
-			width: 164px;
-			height: 50px;
-			font-size: 15px;
-			margin-top: 24px;
-		}
 	}
 }

src/OnboardingSPA/components/StateHandlers/Flow/index.js

@@ -7,7 +7,11 @@
 import { store as nfdOnboardingStore } from '../../../store';
 import { switchFlow } from '../../../utils/api/flow';
 import { MAX_RETRIES_FLOW_SWITCH } from '../../../../constants';
-import { ECOMMERCE_FLOW } from '../../../data/flows/constants';
+import {
+	DEFAULT_FLOW,
+	ECOMMERCE_FLOW,
+	SITEGEN_FLOW,
+} from '../../../data/flows/constants';
 import { removeQueryParam } from '../../../utils';
 import { commerce } from '../../../chapters/commerce';
 import EcommerceStepLoader from '../../Loaders/Step/Ecommerce';
@@ -86,20 +90,20 @@
 			setActiveFlow( onboardingFlow );
 			setActiveStep( location.pathname );
 		}
 	}, [ location.pathname ] );
 
 	// TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled.
 	const handleRender = () => {
 		switch ( newFlow ) {
-			case 'ecommerce':
+			case ECOMMERCE_FLOW:
 				return <EcommerceStepLoader />;
 		}
 
 		switch ( window.nfdOnboarding.currentFlow ) {
-			case 'wp-setup':
-			case 'ecommerce':
+			case DEFAULT_FLOW:
+			case ECOMMERCE_FLOW:
 				return <SiteBuild />;
-			case 'sitegen':
+			case SITEGEN_FLOW:
 				return <SiteGen />;
 		}
 	};

src/OnboardingSPA/steps/SiteGen/Welcome/contents.js

@@ -0,0 +1,14 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __( 'Website Creator for WordPress', 'wp-module-onboarding' ),
+		subHeading: __(
+			'Tell our AI engine what kind of site you want to make and let it handle the content and design for you.',
+			'wp-module-onboarding'
+		),
+		buttonText: __( 'Get Started', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;

src/OnboardingSPA/steps/SiteGen/Welcome/index.js

@@ -1,12 +1,11 @@
-import CommonLayout from '../../../components/Layouts/Common';
-
 import { useEffect } from '@wordpress/element';
-
 import { useDispatch } from '@wordpress/data';
+
+import CommonLayout from '../../../components/Layouts/Common';
+import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
 import { store as nfdOnboardingStore } from '../../../store';
 import { HEADER_SITEGEN } from '../../../../constants';
-
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import getContents from './contents';
 
 const SiteGenWelcome = () => {
 	const {
@@ -24,12 +23,25 @@ const SiteGenWelcome = () => {
 		setIsHeaderNavigationEnabled( true );
 		setDrawerActiveView( false );
 	} );
+
+	const content = getContents();
 	return (
-		<CommonLayout
-			isCentered
-			className="nfd-onboarding-step--site-gen__welcome"
-		>
-			<SiteGenPlaceholder heading={ 'Welcome' } />
+		<CommonLayout className="nfd-onboarding-step--site-gen__welcome">
+			<div className="nfd-onboarding-step--site-gen__welcome__container">
+				<div className="nfd-onboarding-step--site-gen__welcome__container__animation"></div>
+				<div className="nfd-onboarding-step--site-gen__welcome__container__heading">
+					<div className="nfd-onboarding-step--site-gen__welcome__container__heading__image"></div>
+					<p className="nfd-onboarding-step--site-gen__welcome__container__heading__text">
+						{ content.heading }
+					</p>
+				</div>
+				<div className="nfd-onboarding-step--site-gen__welcome__container__sub-heading">
+					<p className="nfd-onboarding-step--site-gen__welcome__container__sub-heading__text">
+						{ content.subHeading }
+					</p>
+				</div>
+				<NextButtonSiteGen text={ content.buttonText } />
+			</div>
 		</CommonLayout>
 	);
 };

src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss

@@ -0,0 +1,85 @@
+.nfd-onboarding-step {
+
+	&--site-gen {
+
+		&__welcome {
+			display: flex;
+			justify-content: center;
+
+			&__container {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 500px;
+
+				@media (max-width: #{ ($break-small) }) {
+					margin: 16px;
+				}
+
+				@media (min-width: 2600px ) {
+					width: 1000px;
+				}
+
+				&__animation {
+					background-image: var(--sitegen-ai-animation);
+					background-repeat: no-repeat;
+					background-size: cover;
+					width: 250px;
+					height: 183px;
+				}
+
+				&__heading {
+					display: flex;
+					flex-direction: row;
+					width: 100%;
+					padding: 0;
+					justify-content: center;
+					align-items: center;
+
+					&__image {
+						height: 36px;
+						width: 42px;
+						background-image: var(--sitegen-ai-icon);
+						background-repeat: no-repeat;
+						background-size: cover;
+
+						@media (max-width: #{ ($break-small) }) {
+							width: 32px;
+							height: 27px;
+						}
+
+						@media (min-width: 2600px ) {
+							width: 100px;
+							height: 86px;
+						}
+
+					}
+
+					&__text {
+						color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.875rem, 0.6818rem + 0.9659vw, 3rem);
+						margin-left: 15px;
+						white-space: normal;
+						line-height: 1;
+					}
+				}
+
+				&__sub-heading {
+					width: 100%;
+					margin: 10px;
+					padding: 0;
+
+					&__text {
+						text-align: center;
+						color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
+						margin: 0;
+						padding: 0;
+					}
+				}
+			}
+		}
+
+	}
+}

src/OnboardingSPA/styles/_icons.scss

@@ -38,4 +38,6 @@ body {
 	--site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg);
 
 	--sitegen-background: url(../static/images/sitegen-bg.png);
+	--sitegen-ai-animation: url(../static/images/sitegen-ai-animation.gif);
+	--sitegen-ai-icon: url(../static/icons/sitegen-ai-icon.svg);
 }

src/OnboardingSPA/styles/app.scss

@@ -46,7 +46,8 @@
 @import "../components/AdminBar/stylesheet";
 @import "../components/ProgressBar/stylesheet";
 @import "../components/Button/ButtonDark/stylesheet";
-@import "../components//SiteGenPlaceholder/stylesheet.scss";
+@import "../components/SiteGenPlaceholder/stylesheet";
+@import "../components/Button/NextButtonSiteGen/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
@@ -62,6 +63,7 @@
 @import "../steps/DesignHeaderMenu/stylesheet";
 @import "../steps/SiteFeatures/stylesheet";
 @import "../steps/TheFork/stylesheet";
+@import "../steps/SiteGen/Welcome/stylesheet";
 
 .nfd-onboarding-container {
 	display: flex;