diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
new file mode 100644
index 000000000..742cb078d
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default NextButtonSiteGen;
diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
new file mode 100644
index 000000000..4fd7d8707
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss
index 7d47de994..f6dfbae10 100644
--- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss
+++ b/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;
}
}
diff --git a/src/OnboardingSPA/components/SiteGenPlaceholder/index.js b/src/OnboardingSPA/components/SiteGenPlaceholder/index.js
index ceebd3913..49a9d8aed 100644
--- a/src/OnboardingSPA/components/SiteGenPlaceholder/index.js
+++ b/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 (
{ heading }
-
+
);
};
diff --git a/src/OnboardingSPA/components/SiteGenPlaceholder/stylesheet.scss b/src/OnboardingSPA/components/SiteGenPlaceholder/stylesheet.scss
index 741c92f2a..d22b0aa9a 100644
--- a/src/OnboardingSPA/components/SiteGenPlaceholder/stylesheet.scss
+++ b/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;
- }
}
}
diff --git a/src/OnboardingSPA/components/StateHandlers/Flow/index.js b/src/OnboardingSPA/components/StateHandlers/Flow/index.js
index 2adc29f72..673daf52a 100644
--- a/src/OnboardingSPA/components/StateHandlers/Flow/index.js
+++ b/src/OnboardingSPA/components/StateHandlers/Flow/index.js
@@ -7,7 +7,11 @@ import { HiiveAnalytics } from '@newfold-labs/js-utility-ui-analytics';
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';
@@ -91,15 +95,15 @@ const FlowStateHandler = () => {
// TODO: Remove handleRender and replace with only children once Chapter Prioritization is enabled.
const handleRender = () => {
switch ( newFlow ) {
- case 'ecommerce':
+ case ECOMMERCE_FLOW:
return ;
}
switch ( window.nfdOnboarding.currentFlow ) {
- case 'wp-setup':
- case 'ecommerce':
+ case DEFAULT_FLOW:
+ case ECOMMERCE_FLOW:
return ;
- case 'sitegen':
+ case SITEGEN_FLOW:
return ;
}
};
diff --git a/src/OnboardingSPA/static/icons/sitegen-ai-icon.svg b/src/OnboardingSPA/static/icons/sitegen-ai-icon.svg
new file mode 100644
index 000000000..ce5ef2ae2
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen-ai-icon.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/OnboardingSPA/static/images/sitegen-ai-animation.gif b/src/OnboardingSPA/static/images/sitegen-ai-animation.gif
new file mode 100644
index 000000000..bb5614215
Binary files /dev/null and b/src/OnboardingSPA/static/images/sitegen-ai-animation.gif differ
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js b/src/OnboardingSPA/steps/SiteGen/Welcome/contents.js
new file mode 100644
index 000000000..acdfa6fa1
--- /dev/null
+++ b/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;
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js b/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
index fdd0279b8..e6aec3439 100644
--- a/src/OnboardingSPA/steps/SiteGen/Welcome/index.js
+++ b/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 (
-
-
+
+
+
+
+
+
+ { content.heading }
+
+
+
+
+ { content.subHeading }
+
+
+
+