-
-
-
- { content.heading }
-
-
+
- { content.facebookTitle }
+
{ content.facebookTitle }
{ content.facebookDesc }
@@ -54,7 +52,12 @@ const SiteGenSiteSocialMedia = () => {
className="nfd-onboarding-step--site-gen__social-media__container__buttons__skip"
text={ content.buttons.skip }
/>
-
+ { isLargeViewport && (
+
+ ) }
diff --git a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
index f72ce8510..43901277e 100644
--- a/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss
@@ -6,38 +6,20 @@
&__container {
- &__heading {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
-
- &__animation {
- background-image: var(--sitegen-ai-animation);
- background-repeat: no-repeat;
- background-size: contain;
- width: 83px;
- height: 72px;
- }
-
- &__text {
- color: var(--nfd-onboarding-primary);
- font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
- margin-left: 15px;
- white-space: normal;
- line-height: 1;
- }
- }
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
&__buttons {
+ width: 95%;
display: flex;
- flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 16px;
&__skip {
- font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
+ font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
font-style: normal;
font-weight: 510;
margin-right: 24px;
@@ -47,31 +29,56 @@
color: var(--nfd-onboarding-primary);
}
}
+
+ @media (max-width: #{ ($break-small) }) {
+ justify-content: center;
+ margin-bottom: 50px;
+ }
}
}
&__contain {
- width: 600px;
margin: 16px;
border: 1.25px solid var(--nfd-onboarding-site-logo-border);
border-radius: 8px;
- padding: 24px;
+ padding: 30px 35px;
display: flex;
- flex-direction: row;
- justify-content: left;
+ justify-content: space-between;
align-items: left;
+ width: 40vw;
+
+ @media (max-width: #{ ($break-large) }) {
+ width: 80vw;
+ }
&__containleft {
- width: 400px;
+ width: 65%;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--nfd-onboarding-primary);
- font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
- margin-left: 15px;
+ margin-right: 25px;
white-space: normal;
line-height: 1;
+
+ span {
+ font-size: clamp(1.1rem, 0.927rem + 0.364vw, 1.8rem);
+ }
+
+ p {
+ margin-top: 15px;
+ font-size: clamp(0.6rem, 0.755rem + 0.227vw, 1.3rem);
+
+ @media (max-width: #{ ($break-small) }) {
+ text-align: justify;
+ }
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ margin-right: 0;
+ }
}
&__containright {
@@ -89,6 +96,15 @@
border: none;
border-radius: 5px;
cursor: pointer;
+ justify-content: center;
+
+ &:hover {
+ background-color: #0065ea;
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ }
}
&__button i {
@@ -96,7 +112,12 @@
background-image: var(--facebook-icon);
width: 25px;
height: 25px;
- filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(215deg) brightness(104%) contrast(102%);
+ filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(376%) hue-rotate(220deg) brightness(120%) contrast(100%);
+ }
+
+ @media (max-width: #{ ($break-small) }) {
+ width: 100%;
+ margin: 30px 0;
}
}
}
@@ -105,10 +126,10 @@
&__contain {
margin: 8px;
+ padding: 24px;
flex-direction: column;
justify-content: center;
align-items: center;
- width: 85%;
}
&__containright {
diff --git a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
index dbe0c868d..90f8a5653 100644
--- a/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Welcome/stylesheet.scss
@@ -40,9 +40,11 @@
&__image {
height: 36px;
width: 42px;
- background-image: var(--sitegen-ai-icon);
- background-repeat: no-repeat;
+ border-radius: 7px;
background-size: cover;
+ background-repeat: no-repeat;
+ background-image: var(--sitegen-ai-icon);
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
@media (max-width: #{ ($break-small) }) {
width: 32px;
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/store/actions.js b/src/OnboardingSPA/store/actions.js
index e28d52f62..da6ae43d5 100644
--- a/src/OnboardingSPA/store/actions.js
+++ b/src/OnboardingSPA/store/actions.js
@@ -189,6 +189,13 @@ export function setHeaderActiveView( view ) {
};
}
+export function setFooterNavEnabled( navEnabled ) {
+ return {
+ type: 'SET_FOOTER_NAV_ENABLED',
+ navEnabled,
+ };
+}
+
export function setFooterActiveView( view ) {
return {
type: 'SET_FOOTER_ACTIVE_VIEW',
diff --git a/src/OnboardingSPA/store/reducer.js b/src/OnboardingSPA/store/reducer.js
index 8954a5368..e475ad0e2 100644
--- a/src/OnboardingSPA/store/reducer.js
+++ b/src/OnboardingSPA/store/reducer.js
@@ -302,11 +302,17 @@ export function queue( state = [], action ) {
export function footer(
state = {
footers,
+ navEnabled: true,
view: FOOTER_SITEGEN,
},
action
) {
switch ( action.type ) {
+ case 'SET_FOOTER_NAV_ENABLED':
+ return {
+ ...state,
+ navEnabled: action.navEnabled,
+ };
case 'SET_FOOTER_ACTIVE_VIEW':
return {
...state,
diff --git a/src/OnboardingSPA/store/selectors.js b/src/OnboardingSPA/store/selectors.js
index db049431d..1df9bb30e 100644
--- a/src/OnboardingSPA/store/selectors.js
+++ b/src/OnboardingSPA/store/selectors.js
@@ -57,6 +57,10 @@ export function getFooterActiveView( state ) {
return state.footer.view;
}
+export function getFooterNavEnabled( state ) {
+ return state.footer.navEnabled;
+}
+
/**
* Gets current Newfold brand
*
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 60ed495f0..acc09819c 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;
@@ -301,6 +302,8 @@ body {
}
.nfd-onboarding-sitegen-light {
+
+ --sitegen-background: #ededed;
--nfd-onboarding-primary: #000;
--nfd-onboarding-primary-rgb: 0, 0, 0;
--nfd-onboarding-hover: #c3c4c7;
@@ -341,5 +344,6 @@ body {
--nfd-onboarding-preview-favorite-background: #1E2327;
--nfd-onboarding-favorite-fill : #EF4A71;
--nfd-onboarding-button-background: #363E4459;
+ --sitegen-background: url(../static/images/ai_bg.png);
}
}
diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss
index d7d075eb6..019614084 100644
--- a/src/OnboardingSPA/styles/_icons.scss
+++ b/src/OnboardingSPA/styles/_icons.scss
@@ -37,7 +37,8 @@ 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.png);
+ --sitegen-background-high-res: url(../static/images/ai_bg.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 4551395bf..c99563ad3 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";