From 4f16123206faa464567ec1ab27bd1b3db4331484 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Sun, 3 Dec 2023 07:38:41 +0530 Subject: [PATCH 1/3] Initial changes --- .../LivePreview/SiteGenCard/index.js | 103 +++++++++++++++ .../LivePreview/SiteGenCard/stylesheet.scss | 117 ++++++++++++++++++ src/OnboardingSPA/data/homepages/1.json | 5 + src/OnboardingSPA/data/homepages/2.json | 5 + src/OnboardingSPA/data/homepages/3.json | 4 + src/OnboardingSPA/data/homepages/4.json | 4 + .../data/homepages/getHomepages.js | 8 ++ .../static/icons/sitegen/favorite.svg | 3 + .../static/icons/sitegen/regenerate.svg | 3 + .../steps/SiteGen/Editor/Header/index.js | 64 ++++++++++ .../SiteGen/Editor/Header/stylesheet.scss | 68 ++++++++++ .../steps/SiteGen/Editor/index.js | 29 ++++- .../steps/SiteGen/Editor/step.js | 2 + .../steps/SiteGen/Editor/stylesheet.scss | 16 +++ .../steps/SiteGen/Preview/contents.js | 11 ++ .../steps/SiteGen/Preview/index.js | 92 +++++++++++++- .../steps/SiteGen/Preview/stylesheet.scss | 61 +++++++++ src/OnboardingSPA/styles/_branding.scss | 7 ++ src/OnboardingSPA/styles/_icons.scss | 2 + src/OnboardingSPA/styles/app.scss | 4 + 20 files changed, 598 insertions(+), 10 deletions(-) create mode 100644 src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js create mode 100644 src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss create mode 100644 src/OnboardingSPA/data/homepages/1.json create mode 100644 src/OnboardingSPA/data/homepages/2.json create mode 100644 src/OnboardingSPA/data/homepages/3.json create mode 100644 src/OnboardingSPA/data/homepages/4.json create mode 100644 src/OnboardingSPA/data/homepages/getHomepages.js create mode 100644 src/OnboardingSPA/static/icons/sitegen/favorite.svg create mode 100644 src/OnboardingSPA/static/icons/sitegen/regenerate.svg create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss create mode 100644 src/OnboardingSPA/steps/SiteGen/Preview/contents.js create mode 100644 src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js new file mode 100644 index 000000000..15c2e8376 --- /dev/null +++ b/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js @@ -0,0 +1,103 @@ +import { Icon, search } from '@wordpress/icons'; +import { LivePreview } from '..'; +import favorite from '../../../static/icons/sitegen/favorite.svg'; + +const LivePreviewSiteGenCard = ( { + className = 'nfd-onboarding-live-preview--sitegen-card', + slug, + title, + blockGrammer, + styling, + isFavorite = false, + viewportWidth, + previewSettings, + skeletonLoadingTime = 2500, + onFavorite, + onRegenerate, + onPreview, +} ) => { + const handleFavorite = ( slug ) => { + if ( typeof onFavorite === 'function' ) { + return onFavorite( slug ); + } + + return false; + }; + + const handleRegenerate = ( slug ) => { + if ( typeof onRegenerate === 'function' ) { + return onRegenerate( slug ); + } + + return false; + }; + + const handlePreview = () => { + if ( typeof onPreview === 'function' ) { + return onPreview( slug ); + } + + return false; + }; + return ( +
+
+ +
handlePreview( slug ) } + > +
+ +

+ Preview +

+
+
+
+
+
+ handleFavorite( slug ) } + /> +
+ { title } +
+
+
+
handleRegenerate( slug ) } + >
+
+ Regenerate +
+
+
+
+ ); +}; + +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..6a36494de --- /dev/null +++ b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss @@ -0,0 +1,117 @@ +.nfd-onboarding-live-preview { + &--sitegen-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 24px; + 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: 20px; + margin-right: 12px; + cursor: pointer; + + &__fill { + background-color: var(--nfd-onboarding-favorite-fill); + } + + } + + &__text {} + } + + &__regenerate { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + &__icon { + background-image: var(--sitegen-regenerate); + width: 16px; + height: 18px; + margin-right: 12px; + } + } + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/1.json b/src/OnboardingSPA/data/homepages/1.json new file mode 100644 index 000000000..652efc18e --- /dev/null +++ b/src/OnboardingSPA/data/homepages/1.json @@ -0,0 +1,5 @@ +{ + "slug": "version-1", + "title": "Version 1", + "content": "\n
\n \n\t
\n\t\t\n\t\t

Memorable Experiences

\n\t\t\n\t\t\n\t\t

Elevate your function
to the industry’s finest

\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n
\n \n

Area of Practice

\n \n
\n \n \n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

01

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

02

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

03

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

04

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

05

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

06

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\n
\n \n\n\n
\n\n\n\n
\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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
\n\t\t\t\n\t\t\t

Discover 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Come 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\n
\n\n \n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

25k

\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

Drinks served

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

50k

\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

Attendee Registrations

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

12

\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

Promotions held

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

15

\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

Professional associations

\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
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t

★ ★ ★ ★ ★

\n\t\n\t\n\t
\n\t\t\n\t\t

My 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\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\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\t

/

\n\t\t\n\t\t\n\t\t

Customer

\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

We 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

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\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Frequently Asked Questions

\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Is 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

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\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
\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

How 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

You 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\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\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Can 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

Yes, 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
\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

How 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

We 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
\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

Can 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

Yes, 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\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\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n\n \n\t
\n\n\t\t\t\t\t\n\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

Discover the authorities

\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\n\t\t\n\t\t

Our Crew

\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t
\n\t\n\n
\n" +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/2.json b/src/OnboardingSPA/data/homepages/2.json new file mode 100644 index 000000000..11029d64c --- /dev/null +++ b/src/OnboardingSPA/data/homepages/2.json @@ -0,0 +1,5 @@ +{ + "slug": "version-2", + "title": "Version 2", + "content": "\n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t

Memorable 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

Elevate your function
to the industry’s finest

\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\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\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n\n\n
\n \n \n\t
\n\t\t\n\t\t
\n\t\t\n\t\t\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\t\t\n\t\t\t\t\t\t

Legal Disciplines

\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\n\t\t\t\n\t\t\t\n\t\t\t

Practice Areas

\n\t\t\t\n\t\t
\n\t\t\n\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Being 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\t\n\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Criminal 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

Our 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\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Family 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

Our 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\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Business 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

Our 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\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n \n
\n\n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

How We Work

\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

Work Process

\n\t\t\n\t
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

01

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

02

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

03

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Business Law

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\n
\n \n\n\n
\n \n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Success

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

Proven track of successfully resolved cases for over 20 years

\n\t\t\t\t\n\t\t\t
\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\t\t\n\t\t\t\t\t

12k

\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t

Clients

\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\t\t\t\n\t\t\t\t\t

20

\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t

Years

\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
\n\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n \n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Who are we

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

Award 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

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\t\t\t\t\n\t\t\t
\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\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n\n
\n\n\n\n
\n\n \n
\n\n \n
\n\n \n
\n \n \n\t
\n\n\t\t\t\t\t\n\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

Testimonials

\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\n\t\t\n\t\t

Our Customers Said

\n\t\t\n\t
\n\t\n\n
\n \n\n \n
\n \n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

★ ★ ★ ★ ★

\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t

4.85 from 1,300+ reviews

\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n \n
\n \n\n
\n \n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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

A 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\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\t\t\t\n\t\t\t\t\t

— Martha Nazario

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\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

The 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\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\t\t\t\n\t\t\t\t\t

— Alex Martinez

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\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

The 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\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\t\t\t\n\t\t\t\t\t

— Antoine Crawford

\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
\n\t\t\n\t
\n\t\n \n\n
\n \n
\n\n\n\n
\n\n \n
\n\n \n\t
\n\n\t\t\t\t\t\n\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

Have Questions?

\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\n\t\t\n\t\t

Frequently Asked
Questions

\n\t\t\n\t
\n\t\n\n \n
\n \n
\n \n
\n \n
\n \n

Is there a free trial available?

\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
\n \n

Can I change my plan later?

\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 \n
\n \n

What is your cancellation policy?

\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
\n \n

How does billing work?

\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
\n \n

How do I change my personal info?

\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 \n
\n \n

Can I get an invoice for my purchase?

\n \n \n
\n \n

Yes, you can. Please contact our customer support and provide your purchase number.

\n \n
\n \n
\n \n
\n \n
\n \n
\n\n\t\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

More inquiries?

\n\t\t\t\t\n \n\t\t\t\t

You couldn't acquire satisfactory answers? Join us for a brief convo.

\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\n\t
\n\t\n
\n \n\n
\n \n\n
\n\n" +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/3.json b/src/OnboardingSPA/data/homepages/3.json new file mode 100644 index 000000000..93d94f7ad --- /dev/null +++ b/src/OnboardingSPA/data/homepages/3.json @@ -0,0 +1,4 @@ +{ "slug": "version-3", +"title": "Version 3", + "content": "\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Successful Initiatives

\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

Impress for Success
with our experts

\n\t\t\n\t\t\t\t\n\t\t

Elevate 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

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
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n \n\t
\n\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t

Practice Areas

\n\t\t\t\n\t\t
\n\t\t\n\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Being 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\t\n\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n

01

\n \n \n \n

Customize

\n \n
\n \n \n \n
\n \n

Investment Planning

\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n

02

\n \n \n \n

Evaluate

\n \n
\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 \n

Strategize

\n \n
\n \n \n \n
\n \n

Wealth Management

\n \n
\n \n
\n \n
\n \n
\n \n\n
\n\n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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

Top 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\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
\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
\n\t\t\t\n\t\t\t

Sell 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

Effortlessly 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\t\t\n\t\t\t\t\t\t

24/7 Support

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Our 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\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

Analytics and Reporting

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Stay 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\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\t\t\n\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Boost 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

Make 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\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
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\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\t\n\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Alex Martinez

\n\t\t\t\n\n\t\t\t\n\t\t\t

CEO, ABC Company

\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\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\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

Top 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\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
\n\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
\n\t\n
\n \n\n\n
\n\n \n
\n \n
\n \n \n \n

Simple pricing, for everyone.

\n \n
\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
\n \n\n \n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Passion

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

Starting 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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Package 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

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\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n \n \t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Luxury Welness

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

$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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Benefits:

\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

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\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n \n \t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Entrepreneurs

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

$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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Package 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

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\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
\n\t\t\n \n \t
\n\t\n\t\n\t

All pricing is in USD. You can cancel your account at any time. 
All renewals are at full price.

\n\t\n
\n \n\n
\n\n\n\n
\n\n \n\t
\n\n\t\t\n\t\t\n\t\t

What our customers say

\n\t\t\n\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 \n
\n \n

Sarah Johnson

\n \n \n

Owner, Sarah's Artisanal Bakery

\n \n
\n \n
\n \n
\n \n\n
\n\n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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

Curious 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

Contact 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Is 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

We 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Things 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

With 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\t\t\n\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
\n\t\t\t\n\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

Payment 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

A 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Simpler 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

Our 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Want 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

Sure! 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\t\t\t\n\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
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Would you like additional assistance?

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

Are 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\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

We 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

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\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n
\n" +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/4.json b/src/OnboardingSPA/data/homepages/4.json new file mode 100644 index 000000000..61c7dc11f --- /dev/null +++ b/src/OnboardingSPA/data/homepages/4.json @@ -0,0 +1,4 @@ +{ "slug": "version-4", +"title": "Version 4", + "content": "\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Successful Initiatives

\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

Impress for Success
with our experts

\n\t\t\n\t\t\t\t\n\t\t

Elevate 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

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
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"/
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n \n\t
\n\t\t\n\t\t
\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t

Practice Areas

\n\t\t\t\n\t\t
\n\t\t\n\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Being 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\t\n\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n \n

01

\n \n \n \n

Customize

\n \n
\n \n \n \n
\n \n

Investment Planning

\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n

02

\n \n \n \n

Evaluate

\n \n
\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 \n

Strategize

\n \n
\n \n \n \n
\n \n

Wealth Management

\n \n
\n \n
\n \n
\n \n
\n \n\n
\n\n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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

Top 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\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
\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
\n\t\t\t\n\t\t\t

Sell 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

Effortlessly 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\t\t\n\t\t\t\t\t\t

24/7 Support

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Our 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\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

Analytics and Reporting

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Stay 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\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\t\t\n\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Boost 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

Make 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\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
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\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\t\n\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Alex Martinez

\n\t\t\t\n\n\t\t\t\n\t\t\t

CEO, ABC Company

\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\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\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

Top 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\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
\n\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
\n\t\n
\n \n\n\n
\n\n \n
\n \n
\n \n \n \n

Simple pricing, for everyone.

\n \n
\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
\n \n\n \n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Passion

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

Starting 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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Package 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

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\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n \n \t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Luxury Welness

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

$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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Benefits:

\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

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\t\t\n\t\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n \n \t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Entrepreneurs

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

All 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\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

$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\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\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\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Package 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

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\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
\n\t\t\n \n \t
\n\t\n\t\n\t

All pricing is in USD. You can cancel your account at any time. 
All renewals are at full price.

\n\t\n
\n \n\n
\n\n\n\n
\n\n \n\t
\n\n\t\t\n\t\t\n\t\t

What our customers say

\n\t\t\n\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 \n
\n \n

Sarah Johnson

\n \n \n

Owner, Sarah's Artisanal Bakery

\n \n
\n \n
\n \n
\n \n\n
\n\n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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

Curious 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

Contact 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Is 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

We 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Things 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

With 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\t\t\n\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
\n\t\t\t\n\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

Payment 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

A 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Simpler 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

Our 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\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\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

Want 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

Sure! 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\t\t\t\n\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
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

Would you like additional assistance?

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

Are 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\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

We 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

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\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n
\n" +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/getHomepages.js b/src/OnboardingSPA/data/homepages/getHomepages.js new file mode 100644 index 000000000..675071ac2 --- /dev/null +++ b/src/OnboardingSPA/data/homepages/getHomepages.js @@ -0,0 +1,8 @@ +import one from './1.json'; +import two from './2.json'; +import three from './3.json'; +const getHomepages = () => { + return [one, two, three]; +} + +export default getHomepages; \ No newline at end of file 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/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js new file mode 100644 index 000000000..e8af98d14 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -0,0 +1,64 @@ +import { Fill, Dropdown } from '@wordpress/components'; +import { HEADER_CENTER, HEADER_END, HEADER_SITEGEN, HEADER_START } from '../../../../../constants'; +import { Icon, chevronDown, home } from '@wordpress/icons'; +import { store as nfdOnboardingStore } from '../../../../store'; + +import { useSelect, useDispatch } from '@wordpress/data'; + +import { useEffect, useState } from '@wordpress/element'; + +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 ); + } + + useEffect(() => { + if ( currentData.sitegen.homepages.active ) { + + setHomepage(currentData.sitegen.homepages.active) + } + }, []) + return <> + +
+ +
+
+ +
+
+ { + return <> +

+
+

{homepage.title}

+ +
+ + + }} + renderContent={() =>
Hello World
} + /> +
+
+ + + +} + +export default StepSiteGenEditorHeader; \ No newline at end of file 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..f80e46c55 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss @@ -0,0 +1,68 @@ +.nfd-onboarding-header { + &--sitegen{ + &__editor { + &__start { + &__regenerate { + margin-left: 20px; + height: 36px; + color: var(--nfd-onboarding-primary); + background-color: var(--nfd-onboarding-preview-favorite-background); + border: none; + :hover { + 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: 20px; + width: 20px; + margin-right: 15px; + cursor: pointer; + + &__fill { + background-color: var(--nfd-onboarding-favorite-fill); + } + } + + &__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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 05fc7fee6..f4139ddcd 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -1,14 +1,15 @@ 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'; const StepSiteGenEditor = () => { + const [ pattern, setPattern ] = useState(); const { setIsHeaderEnabled, setSidebarActiveView, @@ -16,18 +17,36 @@ const StepSiteGenEditor = () => { setDrawerActiveView, } = useDispatch( nfdOnboardingStore ); + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + useEffect( () => { setIsHeaderEnabled( true ); setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); - } ); + const homepage = currentData.sitegen.homepages.active; + setPattern( homepage.content ); + }, [] ); return ( - +
+ { pattern && ( + + ) } +
); }; 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..62cb84662 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss @@ -0,0 +1,16 @@ +.nfd-onboarding-step { + &--site-gen { + &__editor { + &__live-preview { + height: 100%; + width: 100%; + } + + .live-preview { + &-custom { + width: 100%; + } + } + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/contents.js b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js new file mode 100644 index 000000000..eb0550058 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js @@ -0,0 +1,11 @@ +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 \ No newline at end of file diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index f16ba778e..f0d6e51c4 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -1,33 +1,115 @@ 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 from '../../../data/homepages/getHomepages'; const SiteGenPreview = () => { + const navigate = useNavigate(); + const [ homepages, setHomepages ] = useState(); const { setIsHeaderEnabled, setSidebarActiveView, setHeaderActiveView, setDrawerActiveView, + setCurrentOnboardingData, } = useDispatch( nfdOnboardingStore ); + const { currentData, nextStep } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + nextStep: select( nfdOnboardingStore ).getNextStep(), + }; + } ); + useEffect( () => { setIsHeaderEnabled( true ); setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); - } ); + + const homepagesResponse = getHomepages(); + currentData.sitegen.homepages.data = homepagesResponse; + setCurrentOnboardingData( currentData ); + + const homePagesObject = {}; + + homepagesResponse.forEach( ( homepage ) => { + homePagesObject[ homepage.slug ] = homepage; + } ); + setHomepages( homePagesObject ); + }, [] ); + + 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 content = getContents(); + return ( - +
+

+ { content.heading } +

+
+ { content.subheading } +
+
+
+ { homepages && + Object.keys( homepages ).map( ( homepage ) => { + const data = homepages[ homepage ]; + return ( + + ); + } ) } +
+
+
+

+ { content.favoriteInfo } +

+
); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss new file mode 100644 index 000000000..2ea50d916 --- /dev/null +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -0,0 +1,61 @@ +.nfd-onboarding-step { + &--site-gen { + &__preview { + display: flex; + flex-direction: column; + justify-content: space-around; + + &__context { + text-align: center; + color: var(--nfd-onboarding-primary); + display: flex; + flex-direction: column; + width: 450px; + justify-content: center; + align-items: center; + margin:16px 0px; + &__heading { + font-size: 28px; + } + + &__subheading { + font-size: 18px; + } + } + + &__live_previews { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100%; + height: 300px; + } + + &__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 0px; + 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; + } + } + + + } + } +} \ No newline at end of file diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index 79dea6bed..60ed495f0 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -316,6 +316,10 @@ body { --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: var(--nfd-onboarding-primary); --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); + --nfd-onboarding-preview-favorite-background: #1E2327; + --nfd-onboarding-favorite-fill : #EF4A71; + --nfd-onboarding-button-background: #363E4459; + } .nfd-onboarding-sitegen-dark { @@ -334,5 +338,8 @@ body { --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1); --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); + --nfd-onboarding-preview-favorite-background: #1E2327; + --nfd-onboarding-favorite-fill : #EF4A71; + --nfd-onboarding-button-background: #363E4459; } } diff --git a/src/OnboardingSPA/styles/_icons.scss b/src/OnboardingSPA/styles/_icons.scss index 17b6bad17..d7d075eb6 100644 --- a/src/OnboardingSPA/styles/_icons.scss +++ b/src/OnboardingSPA/styles/_icons.scss @@ -43,4 +43,6 @@ body { --sitegen-ai-animation: url(../static/images/sitegen/sitegen-ai-animation.gif); --sitegen-toggle-theme-icon-dark: url(../static/icons/sitegen/toggle-dark-mode.svg); --sitegen-toggle-theme-icon-light: url(../static/icons/sitegen/toggle-light-mode.png); + --sitegen-favorite: url(../static/icons/sitegen/favorite.svg); + --sitegen-regenerate: url(../static/icons/sitegen/regenerate.svg); } diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index 91d285a83..4551395bf 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -57,6 +57,7 @@ @import "../components/CardWithOptions/stylesheet"; @import "../components/Loaders/SiteGenLoader/stylesheet"; @import "../components/Footer/stylesheet"; +@import "../components/LivePreview/SiteGenCard/stylesheet.scss"; // CSS for Pages @import "../steps/BasicInfo/stylesheet"; @@ -78,6 +79,9 @@ @import "../steps/SiteGen/SocialMedia/stylesheet"; @import "../steps/SiteGen/Welcome/stylesheet"; @import "../steps/SiteGen/Building/stylesheet"; +@import "../steps/SiteGen/Preview/stylesheet.scss"; +@import "../steps/SiteGen/Editor/stylesheet.scss"; +@import "../steps/SiteGen/Editor/Header/stylesheet.scss"; .nfd-onboarding-container { display: flex; From 9f6ab77759f10f45a4c99636765fc16bfb1251d5 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Dec 2023 01:13:16 +0530 Subject: [PATCH 2/3] Favorites, regeneration and maintaining state --- src/OnboardingSPA/components/Header/index.js | 18 +- .../LivePreview/SiteGenCard/index.js | 4 +- .../LivePreview/SiteGenCard/stylesheet.scss | 8 +- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 4 +- .../SitegenEditorPatterns/Sidebar.js | 59 ++++ .../SitegenEditorPatterns/stylesheet.scss | 0 src/OnboardingSPA/data/homepages/1.json | 5 - .../data/homepages/getHomepages.js | 8 - src/OnboardingSPA/data/sidebars/index.js | 17 +- .../data/sitegen/homepages/1.json | 5 + .../data/{ => sitegen}/homepages/2.json | 0 .../data/{ => sitegen}/homepages/3.json | 0 .../data/{ => sitegen}/homepages/4.json | 0 .../data/sitegen/homepages/homepages.js | 25 ++ .../data/sitegen/sitemeta/siteMeta.js | 39 +++ .../data/sitegen/sitemeta/siteMeta.json | 305 ++++++++++++++++++ .../static/icons/sitegen/favorite-filled.svg | 3 + .../static/icons/sitegen/settings.svg | 8 + .../steps/SiteGen/Editor/Header/index.js | 170 +++++++--- .../SiteGen/Editor/Header/stylesheet.scss | 65 +++- .../SiteGen/Editor/Sidebar/Patterns/index.js | 17 + .../steps/SiteGen/Editor/index.js | 54 +++- .../steps/SiteGen/Preview/index.js | 108 +++++-- .../steps/SiteGen/Preview/stylesheet.scss | 5 +- .../steps/SiteGen/SiteLogo/index.js | 38 ++- src/OnboardingSPA/styles/_branding.scss | 1 + src/OnboardingSPA/styles/_icons.scss | 2 + src/constants.js | 1 + 28 files changed, 831 insertions(+), 138 deletions(-) create mode 100644 src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js create mode 100644 src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss delete mode 100644 src/OnboardingSPA/data/homepages/1.json delete mode 100644 src/OnboardingSPA/data/homepages/getHomepages.js create mode 100644 src/OnboardingSPA/data/sitegen/homepages/1.json rename src/OnboardingSPA/data/{ => sitegen}/homepages/2.json (100%) rename src/OnboardingSPA/data/{ => sitegen}/homepages/3.json (100%) rename src/OnboardingSPA/data/{ => sitegen}/homepages/4.json (100%) create mode 100644 src/OnboardingSPA/data/sitegen/homepages/homepages.js create mode 100644 src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js create mode 100644 src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.json create mode 100644 src/OnboardingSPA/static/icons/sitegen/favorite-filled.svg create mode 100644 src/OnboardingSPA/static/icons/sitegen/settings.svg create mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js diff --git a/src/OnboardingSPA/components/Header/index.js b/src/OnboardingSPA/components/Header/index.js index 5950c1f4b..6506cf1c2 100644 --- a/src/OnboardingSPA/components/Header/index.js +++ b/src/OnboardingSPA/components/Header/index.js @@ -9,18 +9,22 @@ import { HEADER_START, HEADER_TOP, } from '../../../constants'; +import classNames from 'classnames'; +import { stepSiteGenEditor } from '../../steps/SiteGen/Editor/step'; const Header = () => { - const { headers, headerActiveView, isHeaderEnabled } = useSelect( - ( select ) => { + const { headers, headerActiveView, isHeaderEnabled, currentStep } = + useSelect( ( select ) => { return { headers: select( nfdOnboardingStore ).getHeaders(), headerActiveView: select( nfdOnboardingStore ).getHeaderActiveView(), isHeaderEnabled: select( nfdOnboardingStore ).isHeaderEnabled(), + currentStep: select( nfdOnboardingStore ).getCurrentStep(), }; - } - ); + } ); + + const isEditorStep = currentStep === stepSiteGenEditor; return ( <> @@ -35,7 +39,11 @@ const Header = () => { { isHeaderEnabled && ( -
+
- { - const { newfoldBrand } = useSelect( ( select ) => { + const { newfoldBrand, currentStep } = useSelect( ( select ) => { return { newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), + currentStep: select( nfdOnboardingStore ).getCurrentStep(), }; }, [] ); 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..9535bcce0 --- /dev/null +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -0,0 +1,59 @@ +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 ( + + + }> + +
+ +
+
+ { currentStep?.sidebars?.LearnMore && + currentStep?.sidebars?.LearnMore.SidebarComponents.map( + ( SidebarComponent, index ) => { + return ( + + + + ); + } + ) } +
+
+
+ ); +}; + +export default memo( SitegenEditorPatternsSidebar ); diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/OnboardingSPA/data/homepages/1.json b/src/OnboardingSPA/data/homepages/1.json deleted file mode 100644 index 652efc18e..000000000 --- a/src/OnboardingSPA/data/homepages/1.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "slug": "version-1", - "title": "Version 1", - "content": "\n
\n \n\t
\n\t\t\n\t\t

Memorable Experiences

\n\t\t\n\t\t\n\t\t

Elevate your function
to the industry’s finest

\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n
\n \n

Area of Practice

\n \n
\n \n \n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

01

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

02

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

03

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

04

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

05

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

06

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\n
\n \n\n\n
\n\n\n\n
\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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
\n\t\t\t\n\t\t\t

Discover 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Come 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\n
\n\n \n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

25k

\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

Drinks served

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

50k

\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

Attendee Registrations

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

12

\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

Promotions held

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

15

\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

Professional associations

\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
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t

★ ★ ★ ★ ★

\n\t\n\t\n\t
\n\t\t\n\t\t

My 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\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\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\t

/

\n\t\t\n\t\t\n\t\t

Customer

\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

We 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

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\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Frequently Asked Questions

\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Is 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

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\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
\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

How 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

You 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\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\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Can 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

Yes, 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
\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

How 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

We 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
\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

Can 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

Yes, 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\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\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n\n \n\t
\n\n\t\t\t\t\t\n\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

Discover the authorities

\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\n\t\t\n\t\t

Our Crew

\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t
\n\t\n\n
\n" -} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/getHomepages.js b/src/OnboardingSPA/data/homepages/getHomepages.js deleted file mode 100644 index 675071ac2..000000000 --- a/src/OnboardingSPA/data/homepages/getHomepages.js +++ /dev/null @@ -1,8 +0,0 @@ -import one from './1.json'; -import two from './2.json'; -import three from './3.json'; -const getHomepages = () => { - return [one, two, three]; -} - -export default getHomepages; \ No newline at end of file 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
\n\t
\n\t\n\t\n\t
\n\t\n\t\n\t\n\t
\n\t
\n\t
\n\t\n
\n \n\t
\n\t\t\n\t\t

Memorable Experiences

\n\t\t\n\t\t\n\t\t

Elevate your function
to the industry’s finest

\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\"\"
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n
\n \n

Area of Practice

\n \n
\n \n \n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

01

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

02

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

03

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

04

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Portfolio Management

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

05

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Performance Reviews

\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\t\t\n\t\t\t\t\t\t

We 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\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\t\t\n\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

06

\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Financial Planning

\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\t\t\n\t\t\t\t\t\t

We 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\t\n\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
\n\t\n
\n \n\n\n
\n\n\n\n
\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\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
\n\t\t\t\n\t\t\t

Discover 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Come 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

Experience 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\t\n\t\t\t\n\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\n\t\t
\n\t\t\n\t
\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\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\n\t
\n\t\n\t\n\n
\n\n \n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

25k

\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

Drinks served

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

50k

\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

Attendee Registrations

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

12

\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

Promotions held

\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
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t

15

\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

Professional associations

\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
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t

★ ★ ★ ★ ★

\n\t\n\t\n\t
\n\t\t\n\t\t

My 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\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\n\t\t\t\n\t\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\t

/

\n\t\t\n\t\t\n\t\t

Customer

\n\t\t\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\"\"\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

We 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

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\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\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
\n\t\t\t\t\n\t\t\t
\n\t\t\t\n\t\t
\n\t
\n\t\n
\n \n\n\n
\n \n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Frequently Asked Questions

\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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\t\t\n\t\t\t\t\t\t

Is 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

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\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
\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

How 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

You 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\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\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t

Can 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

Yes, 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
\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

How 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

We 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
\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

Can 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

Yes, 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\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\n\t\t\t
\n\t\t\t\n\t\t
\n\t\t\n\t
\n\t\n
\n \n\n\n
\n\n \n\t
\n\n\t\t\t\t\t\n\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

Discover the authorities

\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\n\t\t\n\t\t

Our Crew

\n\t\t\n\t
\n\t\n\n \n\t
\n\t\t\n\t\t\n\t\t\n\t\t
\n\t\t\t\n\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
\n\t\t\t\n\t\t
\n\t\t\n\t\t\n\t\t\n\t\t\n\t
\n\t\n\n
\n" +} \ No newline at end of file diff --git a/src/OnboardingSPA/data/homepages/2.json b/src/OnboardingSPA/data/sitegen/homepages/2.json similarity index 100% rename from src/OnboardingSPA/data/homepages/2.json rename to src/OnboardingSPA/data/sitegen/homepages/2.json diff --git a/src/OnboardingSPA/data/homepages/3.json b/src/OnboardingSPA/data/sitegen/homepages/3.json similarity index 100% rename from src/OnboardingSPA/data/homepages/3.json rename to src/OnboardingSPA/data/sitegen/homepages/3.json diff --git a/src/OnboardingSPA/data/homepages/4.json b/src/OnboardingSPA/data/sitegen/homepages/4.json similarity index 100% rename from src/OnboardingSPA/data/homepages/4.json rename to src/OnboardingSPA/data/sitegen/homepages/4.json diff --git a/src/OnboardingSPA/data/sitegen/homepages/homepages.js b/src/OnboardingSPA/data/sitegen/homepages/homepages.js new file mode 100644 index 000000000..34f9ab1e9 --- /dev/null +++ b/src/OnboardingSPA/data/sitegen/homepages/homepages.js @@ -0,0 +1,25 @@ +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 ) => { + console.log('homepage', 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 }; \ No newline at end of file diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js new file mode 100644 index 000000000..83156a301 --- /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 = () => { + let 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(); + console.log(colorPalettes) + let keys = Object.keys( colorPalettes ); + if ( activeColorPaletteSlug ) { + keys = keys.filter(( key ) => { + return key != activeColorPaletteSlug + }) + } + + const rand = Math.floor( Math.random() * keys.length ); + console.log(rand) + return { + slug: keys[2], + palette: colorPalettes[ keys[ 2 ] ] + } +} + +export {getSiteMeta, getColorPalettes, getRandomColorPalette}; \ No newline at end of file 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/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 index e8af98d14..6f55d84fe 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -1,64 +1,138 @@ import { Fill, Dropdown } from '@wordpress/components'; -import { HEADER_CENTER, HEADER_END, HEADER_SITEGEN, HEADER_START } from '../../../../../constants'; -import { Icon, chevronDown, home } from '@wordpress/icons'; +import { + HEADER_CENTER, + HEADER_END, + HEADER_SITEGEN, + HEADER_START, +} from '../../../../../constants'; +import { Icon, chevronDown, chevronRight, home } 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 [ homepage, setHomepage ] = useState(); - const { setCurrentOnboardingData } = useDispatch(nfdOnboardingStore); - const { currentData } = useSelect((select) => { - return { - currentData: select(nfdOnboardingStore).getCurrentOnboardingData(), - } - }) + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const { currentData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); - const handleFavorite = () => { + const handleFavorite = () => { homepage.favorite = ! homepage.favorite; - currentData.sitegen.homepages.data[homepage.slug] = homepage; + currentData.sitegen.homepages.data[ homepage.slug ] = homepage; setCurrentOnboardingData( currentData ); - } + }; - useEffect(() => { - if ( currentData.sitegen.homepages.active ) { + const handleRegenerate = () => { + const newPage = getRandom( { ...homepage } ); + setHomepage( newPage ); + currentData.sitegen.homepages.data[ newPage.slug ] = newPage; + currentData.sitegen.homepages.active = newPage; + setCurrentOnboardingData( currentData ); + }; - setHomepage(currentData.sitegen.homepages.active) - } - }, []) - return <> - -
- -
-
- -
-
- { - return <> -

-
-

{homepage.title}

- -
- + const generateChildThemes = () => {}; - }} - renderContent={() =>
Hello World
} - /> -
-
- - - -} + useEffect( () => { + if ( currentData?.sitegen?.homepages?.active ) { + setHomepage( currentData.sitegen.homepages.active ); + } + }, [ currentData ] ); + return ( + <> + +
+
handleRegenerate() } + > +
+
+ Regenerate +
+
+
+
+ + { homepage && ( +
+
+ { + return ( + <> +

+
+

+ { homepage.title } +

+ +
+ + ); + } } + renderContent={ () => ( +
+

+ Rename +

+

+ View All +

+
+ ) } + /> +
+ ) } +
+ +
+
+
+
+ Customize +
+
+
+
+ Save & Continue +
+ +
+
+
+ + ); +}; -export default StepSiteGenEditorHeader; \ No newline at end of file +export default StepSiteGenEditorHeader; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss index f80e46c55..c068666e5 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss @@ -1,4 +1,7 @@ .nfd-onboarding-header { + &--dark { + background-color: var(--nfd-onboarding-editor-header-background); + } &--sitegen{ &__editor { &__start { @@ -6,11 +9,9 @@ margin-left: 20px; height: 36px; color: var(--nfd-onboarding-primary); - background-color: var(--nfd-onboarding-preview-favorite-background); - border: none; - :hover { - cursor: pointer; - } + background-color: var(--nfd-onboarding-button-background); + border-radius: 8px; + cursor: pointer; &__icon { background-image: var(--sitegen-regenerate); width: 16px; @@ -35,13 +36,13 @@ &__favorite-icon { background-image: var(--sitegen-favorite); - height: 20px; + height: 21px; width: 20px; margin-right: 15px; cursor: pointer; &__fill { - background-color: var(--nfd-onboarding-favorite-fill); + background-image: var(--sitegen-favorite-filled); } } @@ -61,6 +62,56 @@ height: 20px; } } + + &__content { + &__rename, &__view-all { + height: 40px; + padding: 0px 9px 0px 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: 0px 12px 0px 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: 0px 12px 0px 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..821ce88b4 --- /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
Hello World
+} + +export default Patterns; \ No newline at end of file diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index f4139ddcd..04d91cb2d 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -7,9 +7,15 @@ import { store as nfdOnboardingStore } from '../../../store'; import { HEADER_SITEGEN } from '../../../../constants'; import { LivePreview } from '../../../components/LivePreview'; +import { getGlobalStyles } from '../../../utils/api/themes'; + +import { cloneDeep } from 'lodash'; const StepSiteGenEditor = () => { - const [ pattern, setPattern ] = useState(); + const [ activeHomepage, setActiveHomepage ] = useState(); + const [ colorPalette, setColorPalette ] = useState(); + const [ globalStyles, setGlobalStyles ] = useState( [] ); + const [ reRender, setReRender ] = useState( false ); const { setIsHeaderEnabled, setSidebarActiveView, @@ -24,28 +30,54 @@ const StepSiteGenEditor = () => { }; } ); - useEffect( () => { + const loadData = async () => { setIsHeaderEnabled( true ); setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); const homepage = currentData.sitegen.homepages.active; - setPattern( homepage.content ); + setActiveHomepage( homepage ); + const globalStyles = await getGlobalStyles(); + setGlobalStyles( globalStyles.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 ( + + ); + }; return (
- { pattern && ( - - ) } + { activeHomepage && + colorPalette && + globalStyles && + reRender && + buildPreview() }
); diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index f0d6e51c4..0fdea5b0b 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -11,11 +11,20 @@ import { HEADER_SITEGEN } from '../../../../constants'; import LivePreviewSiteGenCard from '../../../components/LivePreview/SiteGenCard'; import getContents from './contents'; -import getHomepages from '../../../data/homepages/getHomepages'; +import { + getHomepages, + getRandom, +} from '../../../data/sitegen/homepages/homepages'; +import { getColorPalettes } from '../../../data/sitegen/sitemeta/siteMeta'; +import { getGlobalStyles } from '../../../utils/api/themes'; + +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, @@ -32,22 +41,42 @@ const SiteGenPreview = () => { }; } ); - useEffect( () => { + 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 globalStyles = await getGlobalStyles(); + setGlobalStyles( globalStyles.body ); - const homepagesResponse = getHomepages(); - currentData.sitegen.homepages.data = homepagesResponse; - setCurrentOnboardingData( currentData ); - - const homePagesObject = {}; + setHomepages( homepagesObject ); + }; - homepagesResponse.forEach( ( homepage ) => { - homePagesObject[ homepage.slug ] = homepage; - } ); - setHomepages( homePagesObject ); + useEffect( () => { + loadData(); }, [] ); const handleFavorite = ( slug ) => { @@ -69,8 +98,44 @@ const SiteGenPreview = () => { 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 ( + + ); + } ); + }; + return ( {
- { homepages && - Object.keys( homepages ).map( ( homepage ) => { - const data = homepages[ homepage ]; - return ( - - ); - } ) } + { homepages && globalStyles && ( + { buildPreviews() } + ) }
diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index 2ea50d916..c93d9cc08 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -3,7 +3,8 @@ &__preview { display: flex; flex-direction: column; - justify-content: space-around; + justify-content: space-evenly; + align-items: center; &__context { text-align: center; @@ -29,7 +30,7 @@ align-items: center; justify-content: center; width: 100%; - height: 300px; + margin-top: 30px; } &__favorite-info { diff --git a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js index 573de8f2d..e7a25d89f 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 = ( siteLogo ) => { + const currentDataCopy = { ...currentData }; + currentDataCopy.data.siteLogo.id = siteLogo.id; + currentDataCopy.data.siteLogo.url = siteLogo.url; + currentDataCopy.data.siteLogo.fileName = siteLogo.fileName; + currentDataCopy.data.siteLogo.fileSize = siteLogo.fileSize; + setCurrentOnboardingData( currentDataCopy ); + setFooterNavEnabled( siteLogo.id !== 0 ); + editEntityRecord( 'root', 'site', undefined, { + site_logo: siteLogo.id, + } ); + setSiteLogo( siteLogo ); + }; const content = getContents(); return ( @@ -77,7 +87,7 @@ const SiteGenSiteLogo = () => {
Date: Thu, 7 Dec 2023 12:02:19 +0530 Subject: [PATCH 3/3] Lint fixes --- .../LivePreview/SiteGenCard/index.js | 23 +- .../LivePreview/SiteGenCard/stylesheet.scss | 238 +++++++++-------- .../NewfoldInterfaceSkeleton/SiteGen/index.js | 4 +- .../SitegenEditorPatterns/Sidebar.js | 6 +- .../SitegenEditorPatterns/stylesheet.scss | 0 .../data/sitegen/homepages/homepages.js | 31 +-- .../data/sitegen/sitemeta/siteMeta.js | 60 ++--- .../steps/SiteGen/Editor/Header/index.js | 38 ++- .../SiteGen/Editor/Header/stylesheet.scss | 248 +++++++++--------- .../SiteGen/Editor/Sidebar/Patterns/index.js | 14 +- .../steps/SiteGen/Editor/index.js | 5 +- .../steps/SiteGen/Editor/stylesheet.scss | 32 ++- .../steps/SiteGen/Preview/contents.js | 20 +- .../steps/SiteGen/Preview/index.js | 5 +- .../steps/SiteGen/Preview/stylesheet.scss | 126 ++++----- .../steps/SiteGen/SiteLogo/index.js | 16 +- src/OnboardingSPA/styles/_branding.scss | 12 +- src/OnboardingSPA/styles/app.scss | 8 +- 18 files changed, 474 insertions(+), 412 deletions(-) delete mode 100644 src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js b/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js index 0e939e21c..036d81d70 100644 --- a/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js +++ b/src/OnboardingSPA/components/LivePreview/SiteGenCard/index.js @@ -1,4 +1,6 @@ import { Icon, search } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + import { LivePreview } from '..'; const LivePreviewSiteGenCard = ( { @@ -15,7 +17,7 @@ const LivePreviewSiteGenCard = ( { onRegenerate, onPreview, } ) => { - const handleFavorite = ( slug ) => { + const handleFavorite = () => { if ( typeof onFavorite === 'function' ) { return onFavorite( slug ); } @@ -23,7 +25,7 @@ const LivePreviewSiteGenCard = ( { return false; }; - const handleRegenerate = ( slug ) => { + const handleRegenerate = () => { if ( typeof onRegenerate === 'function' ) { return onRegenerate( slug ); } @@ -50,7 +52,10 @@ const LivePreviewSiteGenCard = ( { />
handlePreview( slug ) } + onKeyDown={ () => handlePreview( slug ) } >
- Preview + { __( 'Preview', 'wp-module-onboarding' ) }

@@ -74,7 +79,10 @@ const LivePreviewSiteGenCard = ( { isFavorite && `${ className }__buttons__favorite__icon__fill` }` } - onClick={ () => handleFavorite( slug ) } + role="button" + tabIndex={ 0 } + onClick={ () => handleFavorite() } + onKeyDown={ () => handleFavorite() } />
handleRegenerate( slug ) } + role="button" + tabIndex={ 0 } + onClick={ () => handleRegenerate() } + onKeyDown={ () => handleRegenerate() } >
- Regenerate + { __( 'Regenerate', 'wp-module-onboarding' ) }
diff --git a/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss index ea08d7566..35e158b08 100644 --- a/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss +++ b/src/OnboardingSPA/components/LivePreview/SiteGenCard/stylesheet.scss @@ -1,117 +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; - } - } - } - } -} \ No newline at end of file + + &--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/NewfoldInterfaceSkeleton/SiteGen/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js index 557825e35..61787425d 100644 --- a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js +++ b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/SiteGen/index.js @@ -16,7 +16,6 @@ import { getSiteGenIdentifiers, } from '../../../utils/api/siteGen'; import Footer from '../../Footer'; -import { stepSiteGenEditor } from '../../../steps/SiteGen/Editor/step'; // Wrapping the NewfoldInterfaceSkeleton with the HOC to make theme available const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( @@ -26,10 +25,9 @@ const ThemedNewfoldInterfaceSkeleton = themeToggleHOC( ); const SiteGen = () => { - const { newfoldBrand, currentStep } = useSelect( ( select ) => { + const { newfoldBrand } = useSelect( ( select ) => { return { newfoldBrand: select( nfdOnboardingStore ).getNewfoldBrand(), - currentStep: select( nfdOnboardingStore ).getCurrentStep(), }; }, [] ); diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 9535bcce0..68db7bcae 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -23,12 +23,14 @@ const SitegenEditorPatternsSidebar = () => { setIsSidebarOpened( false ); }; return ( - + - }> + }> diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/OnboardingSPA/data/sitegen/homepages/homepages.js b/src/OnboardingSPA/data/sitegen/homepages/homepages.js index 34f9ab1e9..7a7454c11 100644 --- a/src/OnboardingSPA/data/sitegen/homepages/homepages.js +++ b/src/OnboardingSPA/data/sitegen/homepages/homepages.js @@ -1,25 +1,22 @@ -import {getRandomColorPalette} from '../sitemeta/siteMeta'; +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]; -} + return [ one, two, three ]; +}; const getRandom = ( homepage ) => { - console.log('homepage', 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; + 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 }; \ No newline at end of file +export { getHomepages, getRandom }; diff --git a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js index 83156a301..a8198761b 100644 --- a/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js +++ b/src/OnboardingSPA/data/sitegen/sitemeta/siteMeta.js @@ -1,39 +1,39 @@ import siteMeta from './siteMeta.json'; const getSiteMeta = () => { - return siteMeta; -} + return siteMeta; +}; const getColorPalettes = () => { - let 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] - } - }) - }) + 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; -} + return colorPalettes; +}; const getRandomColorPalette = ( activeColorPaletteSlug ) => { - const colorPalettes = getColorPalettes(); - console.log(colorPalettes) - let keys = Object.keys( colorPalettes ); - if ( activeColorPaletteSlug ) { - keys = keys.filter(( key ) => { - return key != 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 ); - console.log(rand) - return { - slug: keys[2], - palette: colorPalettes[ keys[ 2 ] ] - } -} + const rand = Math.floor( Math.random() * keys.length ); + return { + slug: keys[ rand ], + palette: colorPalettes[ keys[ rand ] ], + }; +}; -export {getSiteMeta, getColorPalettes, getRandomColorPalette}; \ No newline at end of file +export { getSiteMeta, getColorPalettes, getRandomColorPalette }; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 6f55d84fe..1bbef3883 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -1,3 +1,4 @@ +import { __ } from '@wordpress/i18n'; import { Fill, Dropdown } from '@wordpress/components'; import { HEADER_CENTER, @@ -5,7 +6,7 @@ import { HEADER_SITEGEN, HEADER_START, } from '../../../../../constants'; -import { Icon, chevronDown, chevronRight, home } from '@wordpress/icons'; +import { Icon, chevronDown, chevronRight } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../../store'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -51,7 +52,10 @@ const StepSiteGenEditorHeader = () => {
handleRegenerate() } + onKeyDown={ () => handleRegenerate() } >
{
- Regenerate + { __( 'Regenerate', 'wp-module-onboarding' ) }
@@ -70,18 +74,24 @@ const StepSiteGenEditorHeader = () => {
{ + renderToggle={ ( { onToggle } ) => { return ( <> -

+ >

@@ -98,10 +108,16 @@ const StepSiteGenEditorHeader = () => { renderContent={ () => (

- Rename + { __( + 'Rename', + 'wp-module-onboarding' + ) }

- View All + { __( + 'View All', + 'wp-module-onboarding' + ) }

) } @@ -114,15 +130,19 @@ const StepSiteGenEditorHeader = () => {
- Customize + Customize{ ' ' } + { __( 'Customize', 'wp-module-onboarding' ) }
- Save & Continue + { __( 'Save & Continue', 'wp-module-onboarding' ) }
{ - const { setSidebarActiveView } = useDispatch( nfdOnboardingStore ) + const { setSidebarActiveView } = useDispatch( nfdOnboardingStore ); - useEffect(() => { - setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); - }, []) - return
Hello World
-} + useEffect( () => { + setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); + }, [] ); + return
Hello World
; +}; -export default Patterns; \ No newline at end of file +export default Patterns; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 04d91cb2d..dfdf24371 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -9,6 +9,7 @@ import { HEADER_SITEGEN } from '../../../../constants'; 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 = () => { @@ -37,8 +38,8 @@ const StepSiteGenEditor = () => { setDrawerActiveView( false ); const homepage = currentData.sitegen.homepages.active; setActiveHomepage( homepage ); - const globalStyles = await getGlobalStyles(); - setGlobalStyles( globalStyles.body ); + const globalStylesResponse = await getGlobalStyles(); + setGlobalStyles( globalStylesResponse.body ); setColorPalette( homepage.color.palette ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss index 62cb84662..421df366b 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/stylesheet.scss @@ -1,16 +1,20 @@ .nfd-onboarding-step { - &--site-gen { - &__editor { - &__live-preview { - height: 100%; - width: 100%; - } - .live-preview { - &-custom { - width: 100%; - } - } - } - } -} \ No newline at end of file + &--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 index eb0550058..d35c4b3de 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/contents.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/contents.js @@ -1,11 +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'), - } -} + 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 \ No newline at end of file +export default getContents; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 0fdea5b0b..dac077d03 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -18,6 +18,7 @@ import { 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'; @@ -69,8 +70,8 @@ const SiteGenPreview = () => { } else { homepagesObject = currentData.sitegen.homepages.data; } - const globalStyles = await getGlobalStyles(); - setGlobalStyles( globalStyles.body ); + const globalStylesResponse = await getGlobalStyles(); + setGlobalStyles( globalStylesResponse.body ); setHomepages( homepagesObject ); }; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index c93d9cc08..825c9aa2f 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -1,62 +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 0px; - &__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 0px; - 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; - } - } - - - } - } -} \ No newline at end of file + + &--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 e7a25d89f..50f9161b3 100644 --- a/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js +++ b/src/OnboardingSPA/steps/SiteGen/SiteLogo/index.js @@ -63,18 +63,18 @@ const SiteGenSiteLogo = () => { getEditedEntityRecord( 'root', 'site' ); }, [] ); - const handleSiteLogo = ( siteLogo ) => { + const handleSiteLogo = ( siteLogoNew ) => { const currentDataCopy = { ...currentData }; - currentDataCopy.data.siteLogo.id = siteLogo.id; - currentDataCopy.data.siteLogo.url = siteLogo.url; - currentDataCopy.data.siteLogo.fileName = siteLogo.fileName; - currentDataCopy.data.siteLogo.fileSize = siteLogo.fileSize; + 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( siteLogo.id !== 0 ); + setFooterNavEnabled( siteLogoNew.id !== 0 ); editEntityRecord( 'root', 'site', undefined, { - site_logo: siteLogo.id, + site_logo: siteLogoNew.id, } ); - setSiteLogo( siteLogo ); + setSiteLogo( siteLogoNew ); }; const content = getContents(); diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss index e5a94bca6..7efde1b77 100644 --- a/src/OnboardingSPA/styles/_branding.scss +++ b/src/OnboardingSPA/styles/_branding.scss @@ -319,9 +319,9 @@ body { --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: var(--nfd-onboarding-primary); --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); - --nfd-onboarding-preview-favorite-background: #1E2327; - --nfd-onboarding-favorite-fill : #EF4A71; - --nfd-onboarding-button-background: #363E4459; + --nfd-onboarding-preview-favorite-background: #1e2327; + --nfd-onboarding-favorite-fill: #ef4a71; + --nfd-onboarding-button-background: #363e4459; } @@ -341,10 +341,10 @@ body { --nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35); --nfd-onboarding-site-logo-border: rgba(156, 162, 167, 1); --nfd-onboarding-header-border: rgba(var(--nfd-onboarding-primary-rgb), 0.3); - --nfd-onboarding-preview-favorite-background: #1E2327; + --nfd-onboarding-preview-favorite-background: #1e2327; --nfd-onboarding-editor-header-background: var(--nfd-onboarding-preview-favorite-background); - --nfd-onboarding-favorite-fill : #EF4A71; - --nfd-onboarding-button-background: #363E4459; + --nfd-onboarding-favorite-fill: #ef4a71; + --nfd-onboarding-button-background: #363e4459; --sitegen-background: url(../static/images/ai_bg.png); } } diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index c99563ad3..cb759c0c7 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -59,7 +59,7 @@ @import "../components/CardWithOptions/stylesheet"; @import "../components/Loaders/SiteGenLoader/stylesheet"; @import "../components/Footer/stylesheet"; -@import "../components/LivePreview/SiteGenCard/stylesheet.scss"; +@import "../components/LivePreview/SiteGenCard/stylesheet"; // CSS for Pages @import "../steps/BasicInfo/stylesheet"; @@ -81,9 +81,9 @@ @import "../steps/SiteGen/SocialMedia/stylesheet"; @import "../steps/SiteGen/Welcome/stylesheet"; @import "../steps/SiteGen/Building/stylesheet"; -@import "../steps/SiteGen/Preview/stylesheet.scss"; -@import "../steps/SiteGen/Editor/stylesheet.scss"; -@import "../steps/SiteGen/Editor/Header/stylesheet.scss"; +@import "../steps/SiteGen/Preview/stylesheet"; +@import "../steps/SiteGen/Editor/stylesheet"; +@import "../steps/SiteGen/Editor/Header/stylesheet"; .nfd-onboarding-container { display: flex;