diff --git a/src/Brands/bluehost/bluehost-logo.svg b/src/Brands/bluehost/bluehost-logo.svg new file mode 100644 index 000000000..50304ada3 --- /dev/null +++ b/src/Brands/bluehost/bluehost-logo.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js new file mode 100644 index 000000000..88e9a6cd2 --- /dev/null +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/index.js @@ -0,0 +1,23 @@ +/** + * Interface Cards with standard design. + * + * @param {Object} root0 + * @param {string} root0.title + * @param {string} root0.subtitle + */ + +const HeadingWithSubHeading = ( { title, subtitle } ) => { + return ( +
+

{ title }

+ { subtitle && ( +
+ { subtitle } +
+
+ ) } +
+ ); +}; + +export default HeadingWithSubHeading; diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss new file mode 100644 index 000000000..a953cf381 --- /dev/null +++ b/src/OnboardingSPA/components/HeadingWithSubHeading/SiteGen/stylesheet.scss @@ -0,0 +1,34 @@ +.nfd-onboarding-step { + + &__heading { + color: var(--nfd-onboarding-primary); + width: 96%; + margin: 50px 0 50px; + line-height: 1; + + &__title { + font-weight: 300; + text-align: center; + color: var(--nfd-onboarding-primary); + margin: 35px !important; + font-size: 30px; + } + + &__subtitle { + color: var(--nfd-onboarding-primary) !important; + font-weight: 300; + text-align: center; + font-size: 20px; + } + + &__icon { + display: inline-flex; + width: 100px; + height: 17px; + background-image: var(--nfd-onboarding-logo-name); + background-size: contain; + background-repeat: no-repeat; + filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(200%) contrast(200%); + } + } +} diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index db4d1fb09..61787425d 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -9,6 +9,7 @@ import themeToggleHOC from '../themeToggleHOC'; import NewfoldInterfaceSkeleton from '../index'; import { ThemeProvider } from '../../ThemeContextProvider'; import { store as nfdOnboardingStore } from '../../../store'; +import classNames from 'classnames'; import { setFlow } from '../../../utils/api/flow'; import { generateSiteGenMeta, @@ -24,6 +25,15 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( ); const SiteGen = () => { + const { newfoldBrand } = useSelect( ( select ) => { + return { + newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), + }; + }, [] ); + + useEffect( () => { + document.body.classList.add( `nfd-brand-${ newfoldBrand }` ); + }, [ newfoldBrand ] ); const location = useLocation(); const { currentData } = useSelect( ( select ) => { @@ -117,7 +127,10 @@ const SiteGen = () => { } content={ } sidebar={ } diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js index 76eb1f59f..8c709b42a 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js @@ -14,9 +14,19 @@ import { forwardRef, useEffect } from '@wordpress/element'; import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useMergeRefs } from '@wordpress/compose'; +import bgAiImg from '../../static/images/ai_bg.png'; function useHTMLClass( className ) { useEffect( () => { + // eslint-disable-next-line no-undef + const mainImage = new Image(); + mainImage.src = bgAiImg; + mainImage.onload = () => { + document.querySelector( + '.nfd-onboarding-skeleton--sitegen' + ).style.backgroundImage = `url('${ bgAiImg }')`; + }; + const element = document && document.querySelector( `html:not(.${ className })` ); if ( ! element ) { diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss index 63a890554..a884be481 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/style.scss @@ -190,3 +190,4 @@ html.nfd-interface-interface-skeleton__html-container { } } } + diff --git a/src/OnboardingSPA/components/StartOptions/index.js b/src/OnboardingSPA/components/StartOptions/index.js new file mode 100644 index 000000000..26b180dfb --- /dev/null +++ b/src/OnboardingSPA/components/StartOptions/index.js @@ -0,0 +1,93 @@ +import { SITEGEN_FLOW } from '../../data/flows/constants'; +import { resolveGetDataForFlow } from '../../data/flows'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { validateFlow } from '../../data/flows/utils'; +import { useNavigate } from 'react-router-dom'; +import { store as nfdOnboardingStore } from '../../store'; + +const StartOptions = ( { questionnaire, oldFlow, options } ) => { + const navigate = useNavigate(); + const { brandConfig, migrationUrl } = useSelect( ( select ) => { + return { + brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), + migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(), + }; + } ); + const { + updateAllSteps, + updateTopSteps, + updateRoutes, + updateDesignRoutes, + updateInitialize, + } = useDispatch( nfdOnboardingStore ); + + const switchFlow = ( newFlow ) => { + if ( ! validateFlow( brandConfig, newFlow ) ) { + return false; + } + const currentFlow = window.nfdOnboarding.currentFlow; + const getData = resolveGetDataForFlow( newFlow ); + const data = getData(); + updateAllSteps( data.steps ); + updateTopSteps( data?.topSteps ); + updateRoutes( data.routes ); + updateDesignRoutes( data?.designRoutes ); + if ( SITEGEN_FLOW !== currentFlow ) { + window.nfdOnboarding.oldFlow = currentFlow; + } + window.nfdOnboarding.currentFlow = newFlow; + updateInitialize( true ); + navigate( data.steps[ 1 ].path ); + }; + const selectFlow = ( flow ) => { + switch ( flow ) { + case 'onboarding': + return switchFlow( oldFlow ); + case 'ai': + return switchFlow( SITEGEN_FLOW ); + case 'migration': + return window.open( migrationUrl, '_blank' ); + } + }; + return ( +
+

+ { questionnaire } +

+
+ { options.map( ( tab, idx ) => { + return ( +
{ + selectFlow( tab.flow ); + } } + onKeyDown={ () => { + { + selectFlow( tab.flow ); + } + } } + > +

+ { tab.span && ( + + { tab.span } + + ) } + { tab.title } +

+

+ { tab.subtitle } +

+
+ ); + } ) } +
+
+ ); +}; + +export default StartOptions; diff --git a/src/OnboardingSPA/components/StartOptions/stylesheet.scss b/src/OnboardingSPA/components/StartOptions/stylesheet.scss new file mode 100644 index 000000000..8fbd1c460 --- /dev/null +++ b/src/OnboardingSPA/components/StartOptions/stylesheet.scss @@ -0,0 +1,73 @@ +.nfd-onboarding-sitegen-options { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + &__questionnaire { + color: var(--nfd-onboarding-primary); + font-weight: 500; + text-align: center; + font-size: 18px; + } + + &__container { + display: flex; + justify-content: center; + flex-wrap: wrap; + + &__options { + flex: 1; + min-width: 310px; + height: 130px; + border: 1px solid #9ca2a7; + text-align: center; + padding: 24px; + padding-top: 50px; + margin: 20px; + border-radius: 16px; + color: var(--nfd-onboarding-primary); + font-size: 20px; + + &__span { + background-color: var(--nfd-onboarding-white); + color: rgb(6, 0, 0); + padding-right: 6px; + padding-left: 5px; + margin-right: 5px; + border: 1px solid #fff; + border-radius: 8px; + } + } + + &__options:hover { + background-color: rgba(6, 0, 0, 0.3); + cursor: pointer; + outline: 2px solid #9ca2a7; + transition: 0.1s linear; + } + + &__heading { + color: var(--nfd-onboarding-primary); + width: 96%; + margin: 50px 0 50px; + line-height: 1; + + &__title { + font-weight: 510; + text-align: center; + color: var(--nfd-onboarding-primary); + font-size: 20px; + line-height: 20px; + } + + &__subtitle { + color: var(--nfd-onboarding-primary) !important; + font-weight: 510; + text-align: center; + font-size: 14px; + line-height: 16.71px; + } + } + } +} diff --git a/src/OnboardingSPA/static/images/sitegen/sitegen-bg.png b/src/OnboardingSPA/static/images/ai_bg.png similarity index 100% rename from src/OnboardingSPA/static/images/sitegen/sitegen-bg.png rename to src/OnboardingSPA/static/images/ai_bg.png diff --git a/src/OnboardingSPA/static/images/ai_bg_low.png b/src/OnboardingSPA/static/images/ai_bg_low.png new file mode 100644 index 000000000..097f385e9 Binary files /dev/null and b/src/OnboardingSPA/static/images/ai_bg_low.png differ diff --git a/src/OnboardingSPA/steps/TheFork/contents.js b/src/OnboardingSPA/steps/TheFork/contents.js new file mode 100644 index 000000000..e4a75f776 --- /dev/null +++ b/src/OnboardingSPA/steps/TheFork/contents.js @@ -0,0 +1,50 @@ +import { __ } from '@wordpress/i18n'; + +const getContents = () => { + return { + heading: __( 'Welcome to WordPress', 'wp-module-onboarding' ), + subheading: __( 'powered by ', 'wp-module-onboarding' ), + questionnaire: __( + 'Where would you like to start?', + 'wp-module-onboarding' + ), + options: [ + { + title: __( 'Build it myself', 'wp-module-onboarding' ), + subtitle: __( + "We'll stay out of your way.", + 'wp-module-onboarding' + ), + flow: 'onboarding', + }, + { + title: __( ' Website Creator', 'wp-module-onboarding' ), + subtitle: __( + 'Custom Al generated content & design.', + 'wp-module-onboarding' + ), + span: __( 'AI', 'wp-module-onboarding' ), + flow: 'ai', + }, + { + title: __( 'Hire a Pro', 'wp-module-onboarding' ), + subtitle: __( + 'Leave it to our WordPress experts.', + 'wp-module-onboarding' + ), + flow: 'migration', + }, + ], + + importtext: __( + 'Already have a WordPress site you want to import?', + 'wp-module-onboarding' + ), + importlink: __( + 'https://my.bluehost.com/cgi/services/migration', + 'wp-module-onboarding' + ), + }; +}; + +export default getContents; diff --git a/src/OnboardingSPA/steps/TheFork/index.js b/src/OnboardingSPA/steps/TheFork/index.js index f4549419e..7da697a97 100644 --- a/src/OnboardingSPA/steps/TheFork/index.js +++ b/src/OnboardingSPA/steps/TheFork/index.js @@ -1,61 +1,26 @@ import CommonLayout from '../../components/Layouts/Common'; import { useEffect } from '@wordpress/element'; +import { useDispatch } from '@wordpress/data'; -import { useSelect, useDispatch } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../store'; import { FOOTER_SITEGEN, HEADER_SITEGEN } from '../../../constants'; -import { useNavigate } from 'react-router-dom'; - -import { Button } from '@wordpress/components'; -import { DEFAULT_FLOW, SITEGEN_FLOW } from '../../data/flows/constants'; - -import { resolveGetDataForFlow } from '../../data/flows'; -import { validateFlow } from '../../data/flows/utils'; +import { DEFAULT_FLOW } from '../../data/flows/constants'; +import HeadingWithSubHeading from '../../components/HeadingWithSubHeading/SiteGen/index'; +import StartOptions from '../../components/StartOptions'; +import getContents from './contents'; const TheFork = () => { - const navigate = useNavigate(); - const { brandConfig, migrationUrl } = useSelect( ( select ) => { - return { - brandConfig: select( nfdOnboardingStore ).getNewfoldBrandConfig(), - migrationUrl: select( nfdOnboardingStore ).getMigrationUrl(), - }; - } ); - const { setIsHeaderEnabled, setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, setIsHeaderNavigationEnabled, - updateAllSteps, - updateTopSteps, - updateRoutes, - updateDesignRoutes, - updateInitialize, setFooterActiveView, } = useDispatch( nfdOnboardingStore ); - const switchFlow = ( newFlow ) => { - if ( ! validateFlow( brandConfig, newFlow ) ) { - return false; - } - const currentFlow = window.nfdOnboarding.currentFlow; - const getData = resolveGetDataForFlow( newFlow ); - const data = getData(); - updateAllSteps( data.steps ); - updateTopSteps( data?.topSteps ); - updateRoutes( data.routes ); - updateDesignRoutes( data?.designRoutes ); - if ( SITEGEN_FLOW !== currentFlow ) { - window.nfdOnboarding.oldFlow = currentFlow; - } - window.nfdOnboarding.currentFlow = newFlow; - updateInitialize( true ); - navigate( data.steps[ 1 ].path ); - }; - useEffect( () => { setIsHeaderEnabled( false ); setSidebarActiveView( false ); @@ -68,38 +33,30 @@ const TheFork = () => { const oldFlow = window.nfdOnboarding?.oldFlow ? window.nfdOnboarding.oldFlow : DEFAULT_FLOW; + + const content = getContents(); return ( -

- The Fork -

-
- { validateFlow( brandConfig, SITEGEN_FLOW ) && ( - - ) } - - { migrationUrl && ( - - ) } -
+ + +
+
+ + { content.importtext } + ); }; diff --git a/src/OnboardingSPA/steps/TheFork/stylesheet.scss b/src/OnboardingSPA/steps/TheFork/stylesheet.scss index 2a0641235..84b14e08c 100644 --- a/src/OnboardingSPA/steps/TheFork/stylesheet.scss +++ b/src/OnboardingSPA/steps/TheFork/stylesheet.scss @@ -10,7 +10,16 @@ &__heading { color: var(--nfd-onboarding-primary); - font-size: 70px; + width: 96%; + margin: 50px 0 50px; + line-height: 1; + + &__questionnaire { + color: var(--nfd-onboarding-primary); + font-weight: 500; + text-align: center; + font-size: 18px; + } } &__buttons { @@ -30,6 +39,15 @@ margin: 24px; } } + + &__importsite { + color: var(--nfd-onboarding-primary); + font-weight: 510; + text-align: center; + font-size: 18px; + line-height: 20px; + margin-top: 35px !important; + } } } } diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 79dea6bed..df2f4556f 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -58,6 +58,7 @@ body { --nfd-onboarding-contrast-icon: url(../../Brands/bluehost/dark.svg); --nfd-onboarding-icon: url(../../Brands/bluehost/icon.svg); --nfd-onboarding-logo: url(../../Brands/bluehost/logo.svg); + --nfd-onboarding-logo-name: url(../../Brands/bluehost/bluehost-logo.svg); --nfd-onboarding-primary: #3575d3; --nfd-onboarding-highlighted--rgb: 123, 177, 253; --nfd-onboarding-primary-alt: #2c76dc; diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 17b6bad17..e6a113c4d 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -37,7 +37,7 @@ body { --site-features-wishlist: url(../static/icons/site-features/wishlist.svg); --site-features-comingsoon: url(../static/icons/site-features/comingsoon.svg); - --sitegen-background: url(../static/images/sitegen/sitegen-bg.png); + --sitegen-background: url(../static/images/ai_bg_low.png); --sitegen-ai-icon: url(../static/icons/sitegen/sitegen-ai-icon.svg); --sitegen-image-upload-icon: url(../static/icons/sitegen/image-upload.svg); --sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif); diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 91d285a83..50b83b213 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -46,6 +46,8 @@ @import "../components/AdminBar/stylesheet"; @import "../components/ProgressBar/stylesheet"; @import "../components/Button/ButtonDark/stylesheet"; +@import "../components/HeadingWithSubHeading/SiteGen/stylesheet"; +@import "../components/StartOptions/stylesheet"; @import "../components/ImageUploader/components/ImageUploaderWithText/stylesheet"; @import "../components/Button/ButtonNext/stylesheet"; @import "../components/Loaders/Spinner/stylesheet";