+
+
+ }>
+
+
+ { currentStep?.sidebars?.LearnMore &&
+ currentStep?.sidebars?.LearnMore.SidebarComponents.map(
+ ( SidebarComponent, index ) => {
+ return (
+
+
+ );
+ }
+ ) }
+
+
+
+ );
+};
+
+export default memo( SitegenEditorPatternsSidebar );
diff --git a/src/OnboardingSPA/data/sidebars/index.js b/src/OnboardingSPA/data/sidebars/index.js
index a448adcd4..f45973fc9 100644
--- a/src/OnboardingSPA/data/sidebars/index.js
+++ b/src/OnboardingSPA/data/sidebars/index.js
@@ -1,6 +1,9 @@
import { lazy } from '@wordpress/element';
-import { SIDEBAR_LEARN_MORE } from '../../../constants';
+import {
+ SIDEBAR_LEARN_MORE,
+ SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+} from '../../../constants';
const LearnMoreMenu = lazy( () =>
import( '../../components/Sidebar/components/LearnMore/Menu' )
@@ -9,6 +12,12 @@ const LearnMoreSidebar = lazy( () =>
import( '../../components/Sidebar/components/LearnMore/Sidebar' )
);
+const SitegenEditorPatternsSidebar = lazy( () =>
+ import(
+ '../../components/Sidebar/components/SitegenEditorPatterns/Sidebar'
+ )
+);
+
export const sidebars = [
{
id: SIDEBAR_LEARN_MORE,
@@ -16,4 +25,10 @@ export const sidebars = [
sidebar: LearnMoreSidebar,
enabled: true,
},
+ {
+ id: SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+ menu: SitegenEditorPatternsSidebar,
+ sidebar: SitegenEditorPatternsSidebar,
+ enabled: true,
+ },
];
diff --git a/src/OnboardingSPA/data/sitegen/homepages/1.json b/src/OnboardingSPA/data/sitegen/homepages/1.json
new file mode 100644
index 000000000..a56a2a307
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/homepages/1.json
@@ -0,0 +1,5 @@
+{
+ "slug": "version-1",
+ "title": "Version 1",
+ "content": "\n
+
+
+ { homepage && (
+
+
+
+
+ );
+};
+
+export default StepSiteGenEditorHeader;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
new file mode 100644
index 000000000..df44f103d
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss
@@ -0,0 +1,131 @@
+.nfd-onboarding-header {
+
+ &--dark {
+ background-color: var(--nfd-onboarding-editor-header-background);
+ }
+
+ &--sitegen {
+
+ &__editor {
+
+ &__start {
+
+ &__regenerate {
+ margin-left: 20px;
+ height: 36px;
+ color: var(--nfd-onboarding-primary);
+ background-color: var(--nfd-onboarding-button-background);
+ border-radius: 8px;
+ cursor: pointer;
+
+ &__icon {
+ background-image: var(--sitegen-regenerate);
+ width: 16px;
+ height: 18px;
+ }
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-evenly;
+ width: 130px;
+ }
+ }
+
+ &__center {
+
+ &__dropdown {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+
+ color: var(--nfd-onboarding-primary);
+
+ &__favorite-icon {
+ background-image: var(--sitegen-favorite);
+ height: 21px;
+ width: 20px;
+ margin-right: 15px;
+ cursor: pointer;
+
+ &__fill {
+ background-image: var(--sitegen-favorite-filled);
+ }
+ }
+
+ &__info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ cursor: pointer;
+
+ &__text {
+ font-size: 18px;
+ margin-right: 15px;
+ }
+
+ &__down-icon {
+ fill: var(--nfd-onboarding-primary);
+ width: 20px;
+ height: 20px;
+ }
+ }
+
+ &__content {
+
+ &__rename,
+ &__view-all {
+ height: 40px;
+ padding: 0 9px 0 9px;
+ width: 240px;
+ color: var(--nfd-onboarding-secondary);
+ }
+
+ &__view-all {
+ border-top: 1px solid var(--nfd-onboarding-secondary);
+ }
+ }
+ }
+ }
+
+ &__end {
+ display: flex;
+ flex-direction: row;
+
+ &__customize-button {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ cursor: pointer;
+ background-color: var(--nfd-onboarding-button-background);
+ color: var(--nfd-onboarding-primary);
+ padding: 0 12px 0 12px;
+ margin-right: 16px;
+ height: 36px;
+ border-radius: 8px;
+
+ &__icon {
+ background-image: var(--sitegen-settings);
+ height: 16px;
+ width: 16px;
+ margin-right: 8px;
+ }
+ }
+
+ &__save-button {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ align-items: center;
+ cursor: pointer;
+ background-color: var(--nfd-onboarding-primary);
+ color: var(--nfd-onboarding-secondary);
+ padding: 0 12px 0 12px;
+ height: 36px;
+ border-radius: 8px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js
new file mode 100644
index 000000000..7ac585573
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js
@@ -0,0 +1,17 @@
+import { useDispatch } from '@wordpress/data';
+
+import { useEffect } from '@wordpress/element';
+
+import { store as nfdOnboardingStore } from '../../../../../store';
+import { SIDEBAR_SITEGEN_EDITOR_PATTERNS } from '../../../../../../constants';
+
+const Patterns = () => {
+ const { setSidebarActiveView } = useDispatch( nfdOnboardingStore );
+
+ useEffect( () => {
+ setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS );
+ }, [] );
+ return
-
);
};
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/step.js b/src/OnboardingSPA/steps/SiteGen/Editor/step.js
index ab25039d9..b1c66f6d2 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/step.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/step.js
@@ -2,6 +2,7 @@ import { copy } from '@wordpress/icons';
import { lazy } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Step } from '../../../data/models/Step';
+import StepSiteGenEditorHeader from './Header';
const StepSiteGenEditor = lazy( () => import( './index' ) );
@@ -15,4 +16,5 @@ export const stepSiteGenEditor = new Step( {
SidebarComponents: [],
},
},
+ header: StepSiteGenEditorHeader,
} );
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
new file mode 100644
index 000000000..421df366b
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss
@@ -0,0 +1,20 @@
+.nfd-onboarding-step {
+
+ &--site-gen {
+
+ &__editor {
+
+ &__live-preview {
+ height: 100%;
+ width: 100%;
+ }
+
+ .live-preview {
+
+ &-custom {
+ width: 100%;
+ }
+ }
+ }
+ }
+}
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/contents.js b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js
new file mode 100644
index 000000000..d35c4b3de
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+ return {
+ heading: __( 'Presto, here are 3 versions', 'wp-module-onboarding' ),
+ subheading: __(
+ "We've created 3 unique website designs for you to start with, preview click around or start over.",
+ 'wp-module-onboarding'
+ ),
+ favoriteInfo: __(
+ 'Favorite a generated version to find and use again in the future.',
+ 'wp-module-onboarding'
+ ),
+ };
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
index f16ba778e..dac077d03 100644
--- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js
@@ -1,33 +1,166 @@
import CommonLayout from '../../../components/Layouts/Common';
-import { useEffect } from '@wordpress/element';
+import { useNavigate } from 'react-router-dom';
-import { useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+
+import { useDispatch, useSelect } from '@wordpress/data';
import { store as nfdOnboardingStore } from '../../../store';
import { HEADER_SITEGEN } from '../../../../constants';
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import LivePreviewSiteGenCard from '../../../components/LivePreview/SiteGenCard';
+
+import getContents from './contents';
+import {
+ getHomepages,
+ getRandom,
+} from '../../../data/sitegen/homepages/homepages';
+import { getColorPalettes } from '../../../data/sitegen/sitemeta/siteMeta';
+import { getGlobalStyles } from '../../../utils/api/themes';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { isEmpty, cloneDeep } from 'lodash';
+import Grid from '../../../components/Grid';
const SiteGenPreview = () => {
+ const navigate = useNavigate();
+ const [ homepages, setHomepages ] = useState();
+ const [ globalStyles, setGlobalStyles ] = useState( [] );
const {
setIsHeaderEnabled,
setSidebarActiveView,
setHeaderActiveView,
setDrawerActiveView,
+ setCurrentOnboardingData,
} = useDispatch( nfdOnboardingStore );
- useEffect( () => {
+ const { currentData, nextStep } = useSelect( ( select ) => {
+ return {
+ currentData:
+ select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ nextStep: select( nfdOnboardingStore ).getNextStep(),
+ };
+ } );
+
+ const loadData = async () => {
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
- } );
+ let homepagesObject = {};
+ if ( isEmpty( currentData.sitegen.homepages.data ) ) {
+ const homepagesResponse = getHomepages();
+ const colorsResponse = getColorPalettes();
+ homepagesResponse.forEach( ( homepage, index ) => {
+ if ( ! homepage?.color ) {
+ const paletteKeys = Object.keys( colorsResponse );
+ const paletteIndex =
+ paletteKeys[ index % paletteKeys.length ];
+ homepage.color = {
+ slug: paletteIndex,
+ palette: colorsResponse[ paletteIndex ],
+ };
+ }
+ } );
+ currentData.sitegen.homepages.data = homepagesResponse;
+ setCurrentOnboardingData( currentData );
+ homepagesResponse.forEach( ( homepage ) => {
+ homepagesObject[ homepage.slug ] = homepage;
+ } );
+ } else {
+ homepagesObject = currentData.sitegen.homepages.data;
+ }
+ const globalStylesResponse = await getGlobalStyles();
+ setGlobalStyles( globalStylesResponse.body );
+
+ setHomepages( homepagesObject );
+ };
+
+ useEffect( () => {
+ loadData();
+ }, [] );
+
+ const handleFavorite = ( slug ) => {
+ if ( ! ( slug in homepages ) ) {
+ return false;
+ }
+ homepages[ slug ].favorite = ! homepages[ slug ].favorite;
+ currentData.sitegen.homepages.data = homepages;
+ setCurrentOnboardingData( currentData );
+ };
+
+ const handlePreview = ( slug ) => {
+ if ( ! ( slug in homepages ) ) {
+ return false;
+ }
+ homepages[ slug ].active = ! homepages[ slug ].active;
+ currentData.sitegen.homepages.active = homepages[ slug ];
+ setCurrentOnboardingData( currentData );
+ navigate( nextStep.path );
+ };
+
+ const handleRegenerate = ( slug ) => {
+ if ( ! ( slug in homepages ) ) {
+ return false;
+ }
+ const page = { ...homepages };
+ const newPage = getRandom( { ...page[ slug ] } );
+ page[ newPage.slug ] = newPage;
+ setHomepages( page );
+ currentData.sitegen.homepages.data = page;
+ setCurrentOnboardingData( currentData );
+ };
+
+ const content = getContents();
+
+ const buildPreviews = () => {
+ return Object.keys( homepages ).map( ( homepage ) => {
+ const data = homepages[ homepage ];
+ const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
+ newPreviewSettings.settings.color.palette = data.color.palette;
+ return (
+
-
);
};
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
new file mode 100644
index 000000000..825c9aa2f
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss
@@ -0,0 +1,66 @@
+.nfd-onboarding-step {
+
+ &--site-gen {
+
+ &__preview {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+
+ &__context {
+ text-align: center;
+ color: var(--nfd-onboarding-primary);
+ display: flex;
+ flex-direction: column;
+ width: 450px;
+ justify-content: center;
+ align-items: center;
+ margin: 16px 0;
+
+ &__heading {
+ font-size: 28px;
+ }
+
+ &__subheading {
+ font-size: 18px;
+ }
+ }
+
+ &__live_previews {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin-top: 30px;
+ }
+
+ &__favorite-info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--nfd-onboarding-preview-favorite-background);
+ border-radius: 12px;
+ margin: 16px 0;
+ height: 54px;
+ width: 559px;
+
+ &__icon {
+ background-image: var(--sitegen-favorite);
+ height: 20px;
+ width: 20px;
+ margin-right: 18px;
+ }
+
+ &__text {
+ color: var(--nfd-onboarding-primary);
+ font-size: 16px;
+ }
+ }
+
+
+ }
+ }
+}
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
index 573de8f2d..50f9161b3 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js
@@ -1,6 +1,7 @@
import { useViewportMatch } from '@wordpress/compose';
import { useEffect, useState } from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
import getContents from './contents';
import { HEADER_SITEGEN } from '../../../../constants';
@@ -22,6 +23,12 @@ const SiteGenSiteLogo = () => {
};
} );
+ const { editEntityRecord } = useDispatch( coreStore );
+
+ const { getEditedEntityRecord } = useSelect( ( select ) => {
+ return select( coreStore );
+ }, [] );
+
const {
setFooterNavEnabled,
setIsHeaderEnabled,
@@ -49,23 +56,26 @@ const SiteGenSiteLogo = () => {
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
- if ( currentData.sitegen.siteLogo?.id !== 0 ) {
- return setSiteLogo( currentData.sitegen.siteLogo );
+ if ( currentData.data.siteLogo?.id !== 0 ) {
+ return setSiteLogo( currentData.data.siteLogo );
}
setFooterNavEnabled( false );
+ getEditedEntityRecord( 'root', 'site' );
}, [] );
- useEffect( () => {
- if ( undefined !== siteLogo ) {
- const currentDataCopy = { ...currentData };
- currentDataCopy.sitegen.siteLogo.id = siteLogo.id;
- currentDataCopy.sitegen.siteLogo.url = siteLogo.url;
- currentDataCopy.sitegen.siteLogo.fileName = siteLogo.fileName;
- currentDataCopy.sitegen.siteLogo.fileSize = siteLogo.fileSize;
- setCurrentOnboardingData( currentDataCopy );
- setFooterNavEnabled( siteLogo.id !== 0 );
- }
- }, [ siteLogo ] );
+ const handleSiteLogo = ( siteLogoNew ) => {
+ const currentDataCopy = { ...currentData };
+ currentDataCopy.data.siteLogo.id = siteLogoNew.id;
+ currentDataCopy.data.siteLogo.url = siteLogoNew.url;
+ currentDataCopy.data.siteLogo.fileName = siteLogoNew.fileName;
+ currentDataCopy.data.siteLogo.fileSize = siteLogoNew.fileSize;
+ setCurrentOnboardingData( currentDataCopy );
+ setFooterNavEnabled( siteLogoNew.id !== 0 );
+ editEntityRecord( 'root', 'site', undefined, {
+ site_logo: siteLogoNew.id,
+ } );
+ setSiteLogo( siteLogoNew );
+ };
const content = getContents();
return (
@@ -77,7 +87,7 @@ const SiteGenSiteLogo = () => {
+
+ handlePreview( slug ) }
+ onKeyDown={ () => handlePreview( slug ) }
+ >
+
+
+
+ + { __( 'Preview', 'wp-module-onboarding' ) } +
+
+
+ );
+};
+
+export default LivePreviewSiteGenCard;
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss
new file mode 100644
index 000000000..35e158b08
--- /dev/null
+++ b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss
@@ -0,0 +1,123 @@
+.nfd-onboarding-live-preview {
+
+ &--sitegen-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+
+ &__live-preview-container {
+ position: relative;
+ width: 90%;
+ overflow: hidden;
+ align-items: center;
+ border-radius: 8px;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &__overlay {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ height: 100%;
+ z-index: 2;
+ width: 100%;
+ opacity: 0;
+ transition: 0.5s ease;
+ background-color: rgba(0, 0, 0, 1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &__preview-button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 250px;
+ height: 30px;
+ z-index: 9999;
+ border-radius: 12px;
+ background-color: var(--nfd-onboarding-primary);
+ opacity: 1;
+
+ &__icon {
+ fill: var(--nfd-onboarding-secondary);
+ font-size: 20px;
+ height: 20px;
+ width: 20px;
+ text-align: center;
+ }
+ }
+
+ &:hover {
+ cursor: pointer;
+ opacity: 0.74;
+ }
+ }
+
+ .live-preview {
+
+ &__container {
+
+ &-custom {
+ width: 100%;
+ overflow: hidden;
+ height: 300px;
+ }
+ }
+ }
+
+ }
+
+ &__buttons {
+ width: 90%;
+ color: var(--nfd-onboarding-primary);
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px;
+
+ &__favorite {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ &__icon {
+ width: 20px;
+ height: 21px;
+ margin-right: 12px;
+ cursor: pointer;
+ background-image: var(--sitegen-favorite);
+
+ &__fill {
+ background-image: var(--sitegen-favorite-filled);
+ }
+
+ }
+
+ }
+
+ &__regenerate {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ &__icon {
+ background-image: var(--sitegen-regenerate);
+ width: 16px;
+ height: 18px;
+ margin-right: 12px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
new file mode 100644
index 000000000..68db7bcae
--- /dev/null
+++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js
@@ -0,0 +1,61 @@
+import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components';
+import { Fragment, memo, Suspense } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+import { store as nfdOnboardingStore } from '../../../../store';
+import {
+ SIDEBAR_SITEGEN_EDITOR_PATTERNS,
+ SIDEBAR_SLOTFILL_PREFIX,
+} from '../../../../../constants';
+
+const SitegenEditorPatternsSidebar = () => {
+ const { currentStep } = useSelect( ( select ) => {
+ return {
+ currentStep: select( nfdOnboardingStore ).getCurrentStep(),
+ };
+ } );
+
+ const { setIsSidebarOpened } = useDispatch( nfdOnboardingStore );
+
+ const closeSideBar = () => {
+ setIsSidebarOpened( false );
+ };
+ return (
+
+
+ handleFavorite() }
+ onKeyDown={ () => handleFavorite() }
+ />
+
+
+ { title }
+
+
+
+ handleRegenerate() }
+ onKeyDown={ () => handleRegenerate() }
+ >
+
+ { __( 'Regenerate', 'wp-module-onboarding' ) }
+
+
+
+
+ \n\t
\n\t\n \n\t\n\t\n\t
\n\t\n\t\n\t\n\t\n\t
\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\tElevate your function
\n\t\t\n\t\t\n\t\t\n\t\t\n\t
\n\t\n\t\n\tMemorable Experiences
\n\t\t\n\t\t\n\t\tElevate your function
to the industry’s finest
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1507120410856-1f35574c3b45?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=900&crop=\")
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/218.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/216.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/211.svg\")
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t![\"\"/](\"https://img.logoipsum.com/217.svg\")
\n\t\t\t\n\t\t\n \n
\n \n\n\n\n\n\n\n\n \n
\n \n \n\t\n\tArea of Practice
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t01
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t02
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPerformance Reviews
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t03
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t04
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t05
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPerformance Reviews
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t06
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalised plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\n \n\t
\n\n \n\n \n\t\t\n\t\t
\n\t\n\n \n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1542310441-c2c6c8da6d98?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=&crop=\")
![\"\"](\"https://images.unsplash.com/photo-1682884397223-e071beb4bd91?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=&crop=\")
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tDiscover Our Amazing Workouts
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tExperience amazing daily workouts at our newly opened gym. Choose among classic and modern fitness programs, performed with the guidance of expert trainers.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\tCome and Experience Our Unforgettable Cuisine
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tExperience exquisite fine dining at our newly opened restaurant. Enjoy a delicious menu of classic and modern dishes, prepared with the freshest ingredients.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n\t\n\n\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1467003909585-2f8a72700288?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=600&h=900&crop=\")
![\"\"](\"https://images.unsplash.com/photo-1482049016688-2d3e1b311543?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHJlc3RhdXJhbnR8ZW58MHwxfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=600&h=900&crop=\")
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t25k
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tDrinks served
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t50k
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tAttendee Registrations
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t12
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPromotions held
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t15
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tProfessional associations
\n\t\t\t\t\t\n\t\t\t\t\n \n\t
\n \n\n\n ★ ★ ★ ★ ★
\n\t\n\t\n\t\n\t\t\n\t\t
\n\t\n\t\n\tMy experience at the restaurant was great. The food was delicious, the service was excellent, and the atmosphere was cozy and inviting. Highly recommend this restaurant.
\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![](\"https://images.unsplash.com/photo-1640951613773-54706e06851d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg5fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\tAlex Martinez\n\t\t\t
\n\t\t\t\n\t\t/
\n\t\t\n\t\t\n\t\tCustomer
\n\t\t\n\t\n \n\t
\n \n\n\n \n\t\t![\"\"](\"https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=1500&h=&crop=\")
\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tFrequently Asked Questions
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tIs there a free trial available?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, we offer a free trial period of 14 days. During this period, you will have full access to all of our features and services.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tHow do I change my personal information?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYou can update name, email address and other personal information from the \"Settings\" section.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tCan I change my plan later?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, you can upgrade or downgrade your plan at any time.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tHow does billing work?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tWe have a simple billing system which allows you to pay for services on a monthly basis.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tCan I get an invoice for my purchase?
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tYes, you can. Please contact our customer support and provide your purchase number.
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\n \n\t
\n"
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/2.json b/src/OnboardingSPA/data/sitegen/homepages/2.json
new file mode 100644
index 000000000..11029d64c
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/homepages/2.json
@@ -0,0 +1,5 @@
+{
+ "slug": "version-2",
+ "title": "Version 2",
+ "content": "\n \n\n\t\t\t\t\t\n\t\t\t
\n\t\n\n \n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tDiscover the authorities
\n\t\t\t\t\t\n\t\t\t\tOur Crew
\n\t\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\n\n\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n \n\t
\n \n\n\n\n\t\t![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=1600&h=&crop=\")
\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tMemorable Experiences
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\tElevate your function
to the industry’s finest
\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n \n\t\n\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t
\n\t\t\n\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tLegal Disciplines
\n\t\t\t\t\t\t\n\t\t\t\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n\t\t\n\t\t
\n\t\n \n\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1505664194779-8beaceb93744?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGF3fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tCriminal Defense
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NXwxNzgzMTgyfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tFamily Law
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1517921150947-b52dd0a87619?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MTE2fDE3ODMxODJ8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=338&crop=\")
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tBusiness Law
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tOur process applies techniques from a variety of disciplines distinction in detail and gives careful attention.
\n\t\t\t\t\t\n\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tHow We Work
\n\t\t\t\t\n\t\t\tWork Process
\n\t\t\n\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t01
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tPortfolio Management
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t02
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tFinancial Planning
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t03
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tBusiness Law
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe will work with you to create a personalized plan to help you achieve your financial goals.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n \n \n\t
\n\n\n\n\n\t\t\n\t\t
\n\t\n \n \n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tSuccess
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tProven track of successfully resolved cases for over 20 years
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t12k
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tClients
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t20
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tYears
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1587614313085-5da51cebd8ac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fGNvbGxhYm9yYXRpb258ZW58MHx8MHx8&auto=format&fit=crop&q=80&w=800&h=800&crop=\")
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n\n\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTB8fHRlYW18ZW58MHx8MHx8&auto=format&fit=crop&&q=80&w=800&h=800&crop=\")
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tWho are we
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAward winning lawyers ready to help with any legal issues
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t✓ Easy to use
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t✓ Beautifully designed patterns
\n\t\t\t\t\t\n\t\t\t\t\n\n \n
\n\n\n\n\n\n \n
\n \n\n\n \n
\n \n\n \n\t\n \n \n\t
\n \n\n \n \n\n\t\t\t\t\t\n\t\t\t
\n\t\n\n \n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tTestimonials
\n\t\t\t\t\t\n\t\t\t\tOur Customers Said
\n\t\t\n\t\n \n \n\t
\n \n\n \n\t\t\n\t\t
\n\t\n \n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1583859317429-898db8d9571d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzZ8fHBlcnNvbnxlbnwwfDJ8MHx8&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1682884397531-e3d7650f02fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cGVyc29ufGVufDB8MnwwfHw%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1682884397225-6932fba4e838?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA0fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
![\"\"](\"https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTg5fHxwZXJzb258ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&q=60&w=200&h=200&crop=face\")
\n\t\t\n\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t★ ★ ★ ★ ★
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t4.85 from 1,300+ reviews
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Delizioso\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tA must try for all Italian food lovers! The best Italian restaurant I've ever been to! Highly recommended!
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Martha Nazario
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Authentic Flavour\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tThe pasta dishes are cooked to perfection and the sauces are full of flavour. Highly recommend!
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Alex Martinez
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\"Outstanding Pizza\"\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tThe crust is thin, the sauce is flavourful and the toppings are very fresh. Will come again for sure.
\n\t\t\t\t\t\t\n\t\t\t\t\t★ ★ ★ ★ ★
\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t— Antoine Crawford
\n\t\t\t\t\t\n\t\t\t\t\n\n \n
\n\n"
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/3.json b/src/OnboardingSPA/data/sitegen/homepages/3.json
new file mode 100644
index 000000000..93d94f7ad
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/homepages/3.json
@@ -0,0 +1,4 @@
+{ "slug": "version-3",
+"title": "Version 3",
+ "content": "\n \n\n \n\t
\n \n\n\n\n\t\t\t\t\t\n\t\t\tFrequently Asked
\n\t\t\n\t
\n\t\n\n \n\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tHave Questions?
\n\t\t\t\t\t\n\t\t\t\tFrequently Asked
Questions
\n\t\t\n\t\n \n
\n\n\t\n \n \n
\n \n \n \n \n
\n \n \n \n \n
\n \n Is there a free trial available?
\n \n \n\n \n
\n \n Yes, we offer a free trial period of 14 days. During this period, you will have full access to all of our features and services.
\n \n\n \n
\n \n \n \n \n
\n \n Can I change my plan later?
\n \n \n\n \n
\n \n Yes, you can upgrade or downgrade your plan at any time. You can also switch between monthly and yearly plans.
\n \n\n \n
\n \n \n \n
\n \n What is your cancellation policy?
\n \n \n\n \n
\n \n You can request a refund within 14 days of your purchase. Contact us and we will process your refund.
\n \n\n \n
\n \n\n \n
\n \n \n \n \n
\n \n How does billing work?
\n \n \n\n \n
\n \n We have a simple billing system which allows you to pay for services on a monthly or yearly basis.
\n \n\n \n
\n \n \n \n \n
\n \n How do I change my personal info?
\n \n \n\n \n
\n \n You can update name, email address and other personal information from the \"Settings\" section.
\n \n\n \n
\n \n \n \n
\n \n Can I get an invoice for my purchase?
\n \n \n\n \n
\n \n Yes, you can. Please contact our customer support and provide your purchase number.
\n \n\n \n\t
\n \n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=120&h=120&crop=\")
\n\t\t\n\t\t\n\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tMore inquiries?
\n\t\t\t\t\n \n\t\t\t\tYou couldn't acquire satisfactory answers? Join us for a brief convo.
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\tImpress for Success
\n\t\t\n\t\t\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tSuccessful Initiatives
\n\t\t\t\t\n\t\t\tImpress for Success
with our experts
\n\t\t\n\t\t\t\t\n\t\tElevate your online presence with our advanced technology and customizable design options, which help you build first-rate websites.
\n\t\t\n\t\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t✓ Efficiency is Key
\n\t\t\t\n\t\t\t\n\t\t\t✓ Huge party experience
\n\t\t\t\n\t\t\t\n\t\t\t✓ Maximize Efficiency
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1682899236650-ed6fd1244080?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1583859317429-898db8d9571d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t![\"\"/](\"https://images.unsplash.com/photo-1682884397531-e3d7650f02fd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=600&h=400&crop=\")
\n\t\t\n\t\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n\n \n \n \n \n \n \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\n\t\t\n\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n \n
\n \n\n\n \n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 01
\n \n \n \nCustomize
\n \n\n \n
\n \n Investment Planning
\n \n\n \n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 02
\n \n \n \nEvaluate
\n \n\n \n
\n \n Portfolio Analysis
\n \n\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n 03
\n \n \n \nStrategize
\n \n\n \n
\n \n Wealth Management
\n \n\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjN8fGNyZWF0aXZlJTIwYWdlbmN5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&q=60&w=800&h=800&crop=\")
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ E-commerce Integration
✓ Analytics and Reporting
✓ 24/7 Support
\n\t\t\t\n\t\t\tSell your products online
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tSell your products online
with E-commerce
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tEffortlessly add an online store to your website and start selling your products. Our platform integrates with popular payment gateways and shipping providers.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t24/7 Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tOur dedicated support team is available around the clock to assist you.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tAnalytics and Reporting
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tStay on top of your website's performance with real-time analytics.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\tBoost your website's
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tBoost your website's
visibility with SEO
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tMake sure your website is easily discoverable by search engines and your target audience with our built-in SEO optimization tools.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t
\n\t\t\t\n\t\t\"I appreciated the 24/7 support and the SEO optimization features. Highly recommend!\"
\n\t\n\n\t\n\t\n\t\t\n\t\t![](\"https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&crop=&w=200&h=200&crop=face\")
\n\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tAlex Martinez
\n\t\t\t\n\n\t\t\t\n\t\t\tCEO, ABC Company
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t![\"\"](\"https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=700&h=700&crop=\")
\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ SEO Optimization
✓ Drag and Drop Interface
✓ Customizable Templates
\n\n \n
\n\n\n\n\n \n
\n \n\n \n \n \n \n \n
\n \n \n \n Simple pricing, for everyone.
\n \n\n \n
\n \n As a comprehensive strategy and implementation company, our forte involves providing straightforward, valuable, and enchanting resolutions.
\n \n\n \n\t
\n \n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tPassion
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll inclusive packages for your dream vacation
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tStarting at $99
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/night
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage includes:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Flexible payment options
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Dedicated concierge
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓24/7 Customer Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLuxury Welness
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the essentials to launch your startup
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$29
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mo
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tBenefits:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Billing via credit card
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Access to 3 Event Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Core tech assistance
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Up to 1,000 Requests per month
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tEntrepreneurs
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the resources you require to establish a brand new enterprise
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$49
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mth
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage Contains:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Refundable Payment via debit cards
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Integration with 3rd Party Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Advanced Aid
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Exclusive booking options for prime locations
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Add 3 managerial staff users
\n\t\t\t\t\t\t\n\t\t\t\t\tAll pricing is in USD. You can cancel your account at any time.
All renewals are at full price.
\n\n \n\t
\n\n\n\n \n\n\t\t\n\t\t\n\t\t
\n\t\n\n \n What our customers say
\n\t\t\n\t\n \n
\n \n\n\n \n ![\"\"](\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=900&h=1200&crop=\")
\n \n \n \n \n
\n \n \n \n
\n \n \n “The drag and drop interface made it so easy to build the website, even though I don't have any coding experience.
The customizable templates were also a great starting point, and I was able to create a website that truly reflected my brand.”
\n \n
\n \n Sarah Johnson
\n \n \nOwner, Sarah's Artisanal Bakery
\n \n\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tCurious to learn more?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tContact our expert team today and let's make your celebratory visions a reality!
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tIs rescheduling possible?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe understand things change, so as long as you provide 45 days advanced-notice, you can change your event date up to two times without inuring an additional fee.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tThings change. We get it.
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWith at least 45 days advanced-notice, we'll do our best to optimize your outcome, but note that perishable items purchased may retain your requirement to pay 100% persistence costs.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPayment Process
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tA 50% down-payment is accepted to begin the festivities. Full payment is collected a whole day(24 hours) before your event-date.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tSimpler Invite Management
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tOur guest management portal contains an easy navigable “Invite Share” integration feature that either party can control.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tWant to request an invoice for your purchase?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tSure! Our customer support team can assist you with this. Simply let us know your purchase number when you get in touch.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t![\"\"](\"https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&q=80&w=70&h=70&crop=\")
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tWould you like additional assistance?
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAre any of your questions unanswered? We would be happy to address them - get in touch.
\n\t\t\t\t\n\t\t\t\n \n
\n"
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/4.json b/src/OnboardingSPA/data/sitegen/homepages/4.json
new file mode 100644
index 000000000..61c7dc11f
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/homepages/4.json
@@ -0,0 +1,4 @@
+{ "slug": "version-4",
+"title": "Version 4",
+ "content": "\n \n \n\t
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\tImpress for Success
\n\t\t\n\t\t\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tSuccessful Initiatives
\n\t\t\t\t\n\t\t\tImpress for Success
with our experts
\n\t\t\n\t\t\t\t\n\t\tElevate your online presence with our advanced technology and customizable design options, which help you build first-rate websites.
\n\t\t\n\t\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t✓ Efficiency is Key
\n\t\t\t\n\t\t\t\n\t\t\t✓ Huge party experience
\n\t\t\t\n\t\t\t\n\t\t\t✓ Maximize Efficiency
\n\t\t\t\n\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n \n \n\t
\n\n\n\n \n\t\t\n\t\t
\n\t\n\n \n \n \n \n \n \n\t\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\n\t\t\n\t\tPractice Areas
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\n\t\t\t\n\t\t\t\n\t\t\t\n\t\tBeing a first-choice employer within our sectors. Our process applies techniques from a variety of disciplines.
\n\t\t\t\t\n\t\t\t\n \n
\n \n\n\n \n
\n \n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 01
\n \n \n \nCustomize
\n \n\n \n
\n \n Investment Planning
\n \n\n \n
\n \n \n \n \n \n
\n \n \n \n
\n \n \n \n 02
\n \n \n \nEvaluate
\n \n\n \n
\n \n Portfolio Analysis
\n \n\n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n 03
\n \n \n \nStrategize
\n \n\n \n
\n \n Wealth Management
\n \n\n \n\t
\n \n\n\n \n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ E-commerce Integration
✓ Analytics and Reporting
✓ 24/7 Support
\n\t\t\t\n\t\t\tSell your products online
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tSell your products online
with E-commerce
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tEffortlessly add an online store to your website and start selling your products. Our platform integrates with popular payment gateways and shipping providers.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t24/7 Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tOur dedicated support team is available around the clock to assist you.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tAnalytics and Reporting
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tStay on top of your website's performance with real-time analytics.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\tBoost your website's
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\tBoost your website's
visibility with SEO
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\tMake sure your website is easily discoverable by search engines and your target audience with our built-in SEO optimization tools.
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\t\n\t
\n\t\t\t\n\t\t\"I appreciated the 24/7 support and the SEO optimization features. Highly recommend!\"
\n\t\n\n\t\n\t\n\t\t\n\t\t
\n\t\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\tAlex Martinez
\n\t\t\t\n\n\t\t\t\n\t\t\tCEO, ABC Company
\n\t\t\t\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\tTop Features
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ SEO Optimization
✓ Drag and Drop Interface
✓ Customizable Templates
\n\n \n
\n\n\n\n\n \n
\n \n\n \n \n \n \n \n
\n \n \n \n Simple pricing, for everyone.
\n \n\n \n
\n \n As a comprehensive strategy and implementation company, our forte involves providing straightforward, valuable, and enchanting resolutions.
\n \n\n \n\t
\n \n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tPassion
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll inclusive packages for your dream vacation
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tStarting at $99
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/night
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage includes:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Flexible payment options
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Dedicated concierge
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓24/7 Customer Support
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tLuxury Welness
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the essentials to launch your startup
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$29
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mo
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tBenefits:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Billing via credit card
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Access to 3 Event Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Core tech assistance
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Up to 1,000 Requests per month
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n \n \t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tEntrepreneurs
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tAll the resources you require to establish a brand new enterprise
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t$49
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t/mth
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPackage Contains:
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t✓Refundable Payment via debit cards
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Integration with 3rd Party Planners
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Advanced Aid
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Exclusive booking options for prime locations
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t✓Add 3 managerial staff users
\n\t\t\t\t\t\t\n\t\t\t\t\tAll pricing is in USD. You can cancel your account at any time.
All renewals are at full price.
\n\n \n\t
\n\n\n\n \n\n\t\t\n\t\t\n\t\t
\n\t\n\n \n What our customers say
\n\t\t\n\t\n \n
\n \n\n\n \n
\n \n \n \n \n
\n \n \n \n
\n \n \n “The drag and drop interface made it so easy to build the website, even though I don't have any coding experience.
The customizable templates were also a great starting point, and I was able to create a website that truly reflected my brand.”
\n \n
\n \n Sarah Johnson
\n \n \nOwner, Sarah's Artisanal Bakery
\n \n\n \n\t
\n \n\n\n\n\t\t\n\t\t
\n\t\n\t\n\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tCurious to learn more?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tContact our expert team today and let's make your celebratory visions a reality!
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tIs rescheduling possible?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWe understand things change, so as long as you provide 45 days advanced-notice, you can change your event date up to two times without inuring an additional fee.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tThings change. We get it.
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tWith at least 45 days advanced-notice, we'll do our best to optimize your outcome, but note that perishable items purchased may retain your requirement to pay 100% persistence costs.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tPayment Process
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tA 50% down-payment is accepted to begin the festivities. Full payment is collected a whole day(24 hours) before your event-date.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tSimpler Invite Management
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tOur guest management portal contains an easy navigable “Invite Share” integration feature that either party can control.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\tWant to request an invoice for your purchase?
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\tSure! Our customer support team can assist you with this. Simply let us know your purchase number when you get in touch.
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\n\t\t
\n\t\n \n\t\t\t\n\t\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\tWould you like additional assistance?
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tAre any of your questions unanswered? We would be happy to address them - get in touch.
\n\t\t\t\t\n\t\t\t\n \n
\n"
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/data/sitegen/homepages/homepages.js b/src/OnboardingSPA/data/sitegen/homepages/homepages.js
new file mode 100644
index 000000000..7a7454c11
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/homepages/homepages.js
@@ -0,0 +1,22 @@
+import { getRandomColorPalette } from '../sitemeta/siteMeta';
+import one from './1.json';
+import two from './2.json';
+import three from './3.json';
+import four from './4.json';
+const getHomepages = () => {
+ return [ one, two, three ];
+};
+
+const getRandom = ( homepage ) => {
+ if ( homepage?.favorite ) {
+ homepage.slug = homepage.slug + '-copy';
+ homepage.title = homepage.title + ' Copy';
+ homepage.favorite = false;
+ homepage.color = getRandomColorPalette( homepage?.color?.slug );
+ return homepage;
+ }
+ four.color = getRandomColorPalette( homepage?.color?.slug );
+ return four;
+};
+
+export { getHomepages, getRandom };
diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js
new file mode 100644
index 000000000..a8198761b
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js
@@ -0,0 +1,39 @@
+import siteMeta from './siteMeta.json';
+const getSiteMeta = () => {
+ return siteMeta;
+};
+
+const getColorPalettes = () => {
+ const colorPalettes = {};
+ Object.keys( siteMeta.colorpalette ).forEach( ( colorPalette ) => {
+ colorPalettes[ colorPalette ] = Object.keys(
+ siteMeta.colorpalette[ colorPalette ]
+ ).map( ( slug ) => {
+ return {
+ slug,
+ title: slug[ 0 ].toUpperCase() + slug.slice( 1 ),
+ color: siteMeta.colorpalette[ colorPalette ][ slug ],
+ };
+ } );
+ } );
+
+ return colorPalettes;
+};
+
+const getRandomColorPalette = ( activeColorPaletteSlug ) => {
+ const colorPalettes = getColorPalettes();
+ let keys = Object.keys( colorPalettes );
+ if ( activeColorPaletteSlug ) {
+ keys = keys.filter( ( key ) => {
+ return key !== activeColorPaletteSlug;
+ } );
+ }
+
+ const rand = Math.floor( Math.random() * keys.length );
+ return {
+ slug: keys[ rand ],
+ palette: colorPalettes[ keys[ rand ] ],
+ };
+};
+
+export { getSiteMeta, getColorPalettes, getRandomColorPalette };
diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json
new file mode 100644
index 000000000..4f677166c
--- /dev/null
+++ b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json
@@ -0,0 +1,305 @@
+{
+ "siteclassification": {
+ "primaryType": "health-wellness",
+ "slug": "gym",
+ "emoji": "💪",
+ "wooType": "health-beauty",
+ "keywords": [
+ "fitness",
+ "group",
+ "weight loss",
+ "muscle",
+ "cardio",
+ "strength",
+ "yoga",
+ "pilates",
+ "crossfit",
+ "bodybuilding",
+ "weight",
+ "treadmill",
+ "elliptical",
+ "interval"
+ ],
+ "label": "Gym"
+ },
+ "targetaudience": {
+ "age": {
+ "min": "18",
+ "max": "45"
+ },
+ "gender": "both",
+ "income": {
+ "min": "0",
+ "max": "1000000",
+ "currency": "INR"
+ },
+ "education": "any",
+ "location": "Gym Beach, India",
+ "interests": [
+ "Fitness",
+ "Health",
+ "Exercise",
+ "Wellness"
+ ]
+ },
+ "contenttones": {
+ "tone": "Professional",
+ "undertone": "Positive",
+ "verbosity": 5,
+ "reading_level": 60
+ },
+ "contentstructure": {
+ "homepage1": [
+ "header",
+ "hero",
+ "headings",
+ "features",
+ "gallery",
+ "call-to-action",
+ "pricing-table",
+ "footer"
+ ],
+ "homepage2": [
+ "header",
+ "hero",
+ "team",
+ "features",
+ "gallery",
+ "call-to-action",
+ "testimonials",
+ "footer"
+ ],
+ "homepage3": [
+ "header",
+ "hero",
+ "headings",
+ "features",
+ "gallery",
+ "call-to-action",
+ "faq",
+ "footer"
+ ],
+ "homepage4": [
+ "header",
+ "hero",
+ "headings",
+ "features",
+ "gallery",
+ "call-to-action",
+ "blog",
+ "footer"
+ ],
+ "homepage5": [
+ "header",
+ "hero",
+ "headings",
+ "features",
+ "gallery",
+ "call-to-action",
+ "about",
+ "footer"
+ ]
+ },
+ "colorpalette": {
+ "palette1": {
+ "base": "#FF5733",
+ "contrast": "#FFFFFF",
+ "primary": "#2ECC71",
+ "tertiary": "#F1C40F",
+ "header_background": "#2E86C1",
+ "header_foreground": "#FFFFFF",
+ "header_tiles": "#FFC300",
+ "secondary_background": "#F39C12",
+ "secondary_foreground": "#FFFFFF"
+ },
+ "palette2": {
+ "base": "#FF5733",
+ "contrast": "#FFFFFF",
+ "primary": "#3498DB",
+ "tertiary": "#F1C40F",
+ "header_background": "#2E86C1",
+ "header_foreground": "#FFFFFF",
+ "header_tiles": "#FFC300",
+ "secondary_background": "#F39C12",
+ "secondary_foreground": "#FFFFFF"
+ },
+ "palette3": {
+ "base": "#FF5733",
+ "contrast": "#FFFFFF",
+ "primary": "#9B59B6",
+ "tertiary": "#F1C40F",
+ "header_background": "#2E86C1",
+ "header_foreground": "#FFFFFF",
+ "header_tiles": "#FFC300",
+ "secondary_background": "#F39C12",
+ "secondary_foreground": "#FFFFFF"
+ },
+ "palette4": {
+ "base": "#FF5733",
+ "contrast": "#FFFFFF",
+ "primary": "#E74C3C",
+ "tertiary": "#F1C40F",
+ "header_background": "#2E86C1",
+ "header_foreground": "#FFFFFF",
+ "header_tiles": "#FFC300",
+ "secondary_background": "#F39C12",
+ "secondary_foreground": "#FFFFFF"
+ },
+ "palette5": {
+ "base": "#FF5733",
+ "contrast": "#FFFFFF",
+ "primary": "#1ABC9C",
+ "tertiary": "#F1C40F",
+ "header_background": "#2E86C1",
+ "header_foreground": "#FFFFFF",
+ "header_tiles": "#FFC300",
+ "secondary_background": "#F39C12",
+ "secondary_foreground": "#FFFFFF"
+ }
+ },
+ "sitemap": [
+ {
+ "slug": "home",
+ "path": "/",
+ "title": "Gymmer - Home",
+ "keywords": [
+ "Gymmer",
+ "Gym Beach",
+ "India",
+ "fitness",
+ "workout"
+ ]
+ },
+ {
+ "slug": "about",
+ "path": "/about",
+ "title": "Gymmer - About",
+ "keywords": [
+ "Gymmer",
+ "Gym Beach",
+ "India",
+ "studio",
+ "history"
+ ]
+ },
+ {
+ "slug": "services",
+ "path": "/services",
+ "title": "Gymmer - Services",
+ "keywords": [
+ "Gymmer",
+ "Gym Beach",
+ "India",
+ "classes",
+ "training"
+ ]
+ },
+ {
+ "slug": "gallery",
+ "path": "/gallery",
+ "title": "Gymmer - Gallery",
+ "keywords": [
+ "Gymmer",
+ "Gym Beach",
+ "India",
+ "photos",
+ "videos"
+ ]
+ },
+ {
+ "slug": "contact",
+ "path": "/contact",
+ "title": "Gymmer - Contact",
+ "keywords": [
+ "Gymmer",
+ "Gym Beach",
+ "India",
+ "location",
+ "contact"
+ ]
+ }
+ ],
+ "pluginrecommendation": {
+ "requiredPlugins": [
+ {
+ "title": "Yoast SEO",
+ "description": "Yoast SEO is a comprehensive search engine optimization plugin for WordPress, which offers various features to optimize your site for maximum visibility in search engines.",
+ "slug": "wordpress-seo/wordpress-seo.php",
+ "download_url": "https://downloads.wordpress.org/plugin/wordpress-seo.zip",
+ "premium": false,
+ "requires": []
+ },
+ {
+ "title": "WooCommerce",
+ "description": "WooCommerce is a customizable, open-source eCommerce platform built on WordPress, allowing users to set up online stores with ease.",
+ "slug": "woocommerce/woocommerce.php",
+ "download_url": "https://downloads.wordpress.org/plugin/woocommerce.zip",
+ "premium": false,
+ "requires": []
+ }
+ ],
+ "recommendedPlugins": [
+ {
+ "title": "Jetpack",
+ "description": "Jetpack offers a suite of design, security, and marketing tools for WordPress sites, including real-time backups and easy-to-use performance enhancements.",
+ "slug": "jetpack/jetpack.php",
+ "download_url": "https://downloads.wordpress.org/plugin/jetpack.zip",
+ "premium": false,
+ "requires": []
+ },
+ {
+ "title": "WPForms Lite",
+ "description": "WPForms Lite is a drag-and-drop form builder for WordPress, allowing users to create contact forms, surveys, and more without any coding.",
+ "slug": "wpforms-lite/wpforms.php",
+ "download_url": "https://downloads.wordpress.org/plugin/wpforms-lite.zip",
+ "premium": false,
+ "requires": []
+ }
+ ]
+ },
+ "fontpair": [
+ {
+ "aesthetics": "modern",
+ "font_heading": "Montserrat",
+ "font_content": "Roboto",
+ "spacing": 10,
+ "radius": 5
+ },
+ {
+ "aesthetics": "energetic",
+ "font_heading": "Bebas Neue",
+ "font_content": "Open Sans",
+ "spacing": 8,
+ "radius": 3
+ },
+ {
+ "aesthetics": "bold",
+ "font_heading": "Oswald",
+ "font_content": "Lato",
+ "spacing": 12,
+ "radius": 7
+ },
+ {
+ "aesthetics": "sleek",
+ "font_heading": "Raleway",
+ "font_content": "Nunito",
+ "spacing": 6,
+ "radius": 2
+ },
+ {
+ "aesthetics": "dynamic",
+ "font_heading": "Exo",
+ "font_content": "Poppins",
+ "spacing": 9,
+ "radius": 4
+ }
+ ],
+ "keywords": {
+ "keywords": [
+ "Gym studio",
+ "Gymmer",
+ "Gym Beach",
+ "India"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/src/OnboardingSPA/static/icons/sitegen/favorite-filled.svg b/src/OnboardingSPA/static/icons/sitegen/favorite-filled.svg
new file mode 100644
index 000000000..bfa02dd88
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/favorite-filled.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/OnboardingSPA/static/icons/sitegen/favorite.svg b/src/OnboardingSPA/static/icons/sitegen/favorite.svg
new file mode 100644
index 000000000..5aed1b540
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/favorite.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/OnboardingSPA/static/icons/sitegen/regenerate.svg b/src/OnboardingSPA/static/icons/sitegen/regenerate.svg
new file mode 100644
index 000000000..e9b2b798e
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/regenerate.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/OnboardingSPA/static/icons/sitegen/settings.svg b/src/OnboardingSPA/static/icons/sitegen/settings.svg
new file mode 100644
index 000000000..af76ae43e
--- /dev/null
+++ b/src/OnboardingSPA/static/icons/sitegen/settings.svg
@@ -0,0 +1,8 @@
+
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
new file mode 100644
index 000000000..1bbef3883
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js
@@ -0,0 +1,158 @@
+import { __ } from '@wordpress/i18n';
+import { Fill, Dropdown } from '@wordpress/components';
+import {
+ HEADER_CENTER,
+ HEADER_END,
+ HEADER_SITEGEN,
+ HEADER_START,
+} from '../../../../../constants';
+import { Icon, chevronDown, chevronRight } from '@wordpress/icons';
+import { store as nfdOnboardingStore } from '../../../../store';
+
+import { useSelect, useDispatch } from '@wordpress/data';
+
+import { useEffect, useState } from '@wordpress/element';
+import { getRandom } from '../../../../data/sitegen/homepages/homepages';
+
+const StepSiteGenEditorHeader = () => {
+ const [ homepage, setHomepage ] = useState();
+
+ const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
+ const { currentData } = useSelect( ( select ) => {
+ return {
+ currentData:
+ select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ };
+ } );
+
+ const handleFavorite = () => {
+ homepage.favorite = ! homepage.favorite;
+ currentData.sitegen.homepages.data[ homepage.slug ] = homepage;
+ setCurrentOnboardingData( currentData );
+ };
+
+ const handleRegenerate = () => {
+ const newPage = getRandom( { ...homepage } );
+ setHomepage( newPage );
+ currentData.sitegen.homepages.data[ newPage.slug ] = newPage;
+ currentData.sitegen.homepages.active = newPage;
+ setCurrentOnboardingData( currentData );
+ };
+
+ const generateChildThemes = () => {};
+
+ useEffect( () => {
+ if ( currentData?.sitegen?.homepages?.active ) {
+ setHomepage( currentData.sitegen.homepages.active );
+ }
+ }, [ currentData ] );
+ return (
+ <>
+ \n \n\t
\n \n\n\t\t\n\t\t
\n\t\n \n\t\t\n\t\t\t\n\t\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tWe handle everything
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\tWe handle everything
detail-oriented individuals worry about
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t✓ Effortless experience
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t✓ Exceptional events
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
+
+ handleRegenerate() }
+ onKeyDown={ () => handleRegenerate() }
+ >
+
+
+
+ { __( 'Regenerate', 'wp-module-onboarding' ) }
+
+
+
+ {
+ return (
+ <>
+
+
+ ) }
+
+
+
+ );
+ } }
+ renderContent={ () => (
+ + { homepage.title } +
+
+
+ ) }
+ />
+ + { __( + 'Rename', + 'wp-module-onboarding' + ) } +
++ { __( + 'View All', + 'wp-module-onboarding' + ) } +
+
+
+
+
+
+
+ Customize{ ' ' }
+ { __( 'Customize', 'wp-module-onboarding' ) }
+
+
+
+
+ { __( 'Save & Continue', 'wp-module-onboarding' ) }
+
+ Hello World
;
+};
+
+export default Patterns;
diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
index 05fc7fee6..dfdf24371 100644
--- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js
@@ -1,14 +1,22 @@
import CommonLayout from '../../../components/Layouts/Common';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
import { store as nfdOnboardingStore } from '../../../store';
import { HEADER_SITEGEN } from '../../../../constants';
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import { LivePreview } from '../../../components/LivePreview';
+import { getGlobalStyles } from '../../../utils/api/themes';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { cloneDeep } from 'lodash';
const StepSiteGenEditor = () => {
+ const [ activeHomepage, setActiveHomepage ] = useState();
+ const [ colorPalette, setColorPalette ] = useState();
+ const [ globalStyles, setGlobalStyles ] = useState( [] );
+ const [ reRender, setReRender ] = useState( false );
const {
setIsHeaderEnabled,
setSidebarActiveView,
@@ -16,18 +24,62 @@ const StepSiteGenEditor = () => {
setDrawerActiveView,
} = useDispatch( nfdOnboardingStore );
- useEffect( () => {
+ const { currentData } = useSelect( ( select ) => {
+ return {
+ currentData:
+ select( nfdOnboardingStore ).getCurrentOnboardingData(),
+ };
+ } );
+
+ const loadData = async () => {
setIsHeaderEnabled( true );
setSidebarActiveView( false );
setHeaderActiveView( HEADER_SITEGEN );
setDrawerActiveView( false );
- } );
+ const homepage = currentData.sitegen.homepages.active;
+ setActiveHomepage( homepage );
+ const globalStylesResponse = await getGlobalStyles();
+ setGlobalStyles( globalStylesResponse.body );
+ setColorPalette( homepage.color.palette );
+ };
+
+ useEffect( () => {
+ loadData();
+ }, [] );
+
+ useEffect( () => {
+ if ( currentData?.sitegen?.homepages?.active ) {
+ setActiveHomepage( currentData.sitegen.homepages.active );
+ setReRender( true );
+ }
+ }, [ currentData ] );
+
+ const buildPreview = () => {
+ const newPreviewSettings = cloneDeep( globalStyles[ 0 ] );
+ newPreviewSettings.settings.color.palette =
+ activeHomepage.color.palette;
+ return (
+
+ { activeHomepage &&
+ colorPalette &&
+ globalStyles &&
+ reRender &&
+ buildPreview() }
+
+
+ + { content.heading } +
+
+ { content.subheading }
+
+
+ { homepages && globalStyles && (
+ { buildPreviews() }
+ ) }
+
+
+
+
+ { content.favoriteInfo } +
+