From 1a3e57b57ddc4c4b37284476f8ea44dfe7128760 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 8 Nov 2023 18:27:33 +0530
Subject: [PATCH 01/14] Code Dump

---
 .../components/AIHeading/index.js             | 10 +++
 .../components/AIHeading/stylesheet.scss      | 24 ++++++
 .../TextInput/TextInputSiteGen/index.js       | 86 +++++++++++++++++++
 .../TextInputSiteGen/stylesheet.scss          | 66 ++++++++++++++
 .../steps/SiteGen/SiteDetails/contents.js     | 17 ++++
 .../steps/SiteGen/SiteDetails/index.js        | 35 ++++++--
 .../steps/SiteGen/SiteDetails/stylesheet.scss | 16 ++++
 src/OnboardingSPA/styles/app.scss             |  5 +-
 8 files changed, 249 insertions(+), 10 deletions(-)
 create mode 100644 src/OnboardingSPA/components/AIHeading/index.js
 create mode 100644 src/OnboardingSPA/components/AIHeading/stylesheet.scss
 create mode 100644 src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
 create mode 100644 src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
 create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
 create mode 100644 src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss

diff --git a/src/OnboardingSPA/components/AIHeading/index.js b/src/OnboardingSPA/components/AIHeading/index.js
new file mode 100644
index 000000000..93fd2b8d3
--- /dev/null
+++ b/src/OnboardingSPA/components/AIHeading/index.js
@@ -0,0 +1,10 @@
+const AIHeading = ( { title } ) => {
+	return (
+		<div className={ 'ai-heading' }>
+			<div className={ 'ai-heading--icon' } />
+			<div className={ 'ai-heading--title' }>{ title }</div>
+		</div>
+	);
+};
+
+export default AIHeading;
diff --git a/src/OnboardingSPA/components/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/AIHeading/stylesheet.scss
new file mode 100644
index 000000000..6072bdc03
--- /dev/null
+++ b/src/OnboardingSPA/components/AIHeading/stylesheet.scss
@@ -0,0 +1,24 @@
+.ai-heading {
+
+	display: flex;
+	margin-bottom: 20px;
+	align-items: center;
+
+	&--icon {
+		width: 50px;
+		margin: 4px;
+		height: 50px;
+		background-size: 200%;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-image: var(--ai-logo);
+	}
+
+	&--title {
+		margin: 10px;
+		line-height: 1.5;
+		font-weight: 500;
+		font-size: 1.4rem;
+		color: var(--nfd-onboarding-primary);
+	}
+}
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
new file mode 100644
index 000000000..c213f45ec
--- /dev/null
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/index.js
@@ -0,0 +1,86 @@
+import classNames from 'classnames';
+import { useRef, useEffect, useState, memo } from '@wordpress/element';
+
+const TextInputSiteGen = ( {
+	hint,
+	height,
+	placeholder,
+	customerInput,
+	setCustomerInput,
+} ) => {
+	const textareaRef = useRef( null );
+	const [ inputText, setInputText ] = useState( 'nfd-sg-input-box__field' );
+
+	useEffect( () => {
+		textareaRef.current.style.height = height;
+		const scrollHeight = textareaRef.current.scrollHeight;
+		textareaRef.current.style.height = scrollHeight + 'px';
+	}, [ customerInput ] );
+
+	const calculateDetail = ( num ) => {
+		const selectedButton = 'nfd-sg-input-box__info-icon--selected';
+		switch ( num ) {
+			case 1:
+				if ( customerInput?.length > 30 ) return selectedButton;
+				break;
+			case 2:
+				if ( customerInput?.length > 60 ) return selectedButton;
+				break;
+			case 3:
+				if ( customerInput?.length > 100 ) return selectedButton;
+		}
+	};
+
+	const onTextChange = ( e ) => {
+		e.preventDefault();
+		setCustomerInput( e.target.value );
+		setInputText( 'nfd-sg-input-box__field' );
+	};
+
+	return (
+		<div className={ 'nfd-sg-input' }>
+			<label htmlFor={ inputText }>
+				<div className={ 'nfd-sg-input-box' }>
+					<textarea
+						type="text"
+						className={ inputText }
+						ref={ textareaRef }
+						style={ { height: '47px' } }
+						placeholder={ placeholder }
+						value={ customerInput }
+						onChange={ ( e ) => onTextChange( e ) }
+					/>
+				</div>
+				{ customerInput ? (
+					<div className={ 'nfd-sg-input-box__info' }>
+						<div className={ 'nfd-sg-input-box__info-text' }>
+							Detail
+						</div>
+						<div
+							className={ classNames(
+								'nfd-sg-input-box__info-icon',
+								calculateDetail( 1 )
+							) }
+						/>
+						<div
+							className={ classNames(
+								'nfd-sg-input-box__info-icon',
+								calculateDetail( 2 )
+							) }
+						/>
+						<div
+							className={ classNames(
+								'nfd-sg-input-box__info-icon',
+								calculateDetail( 3 )
+							) }
+						/>
+					</div>
+				) : (
+					<p className={ 'nfd-sg-input-box__hint' }>{ hint }</p>
+				) }
+			</label>
+		</div>
+	);
+};
+
+export default memo( TextInputSiteGen );
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
new file mode 100644
index 000000000..a6c1d0aef
--- /dev/null
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -0,0 +1,66 @@
+$border: #d6d6d6;
+$letter-spacing: 0.5px;
+
+.nfd-sg-input {
+	margin-top: 25px;
+	margin-bottom: 25px;
+	width: 100% !important;
+
+	&-box {
+		margin-bottom: 10px;
+		border-bottom: 2px solid $border;
+
+		&__field {
+			padding-top: 10px;
+			font-size: 1.5rem;
+			background: transparent;
+			letter-spacing: $letter-spacing;
+
+			width: 100%;
+			resize: none;
+			border: none;
+			max-height: 150px;
+			color: var(--nfd-onboarding-primary);
+
+			&:focus {
+				box-shadow: none;
+			}
+		}
+
+		&__hint {
+			margin-top: 30px;
+			font-weight: 300;
+			font-size: 0.87rem;
+			padding: 0 1.5px;
+			letter-spacing: $letter-spacing;
+			color: var(--nfd-onboarding-primary);
+
+		}
+
+		&__info {
+			display: flex;
+			margin-top: 30px;
+			align-items: center;
+
+			&-text {
+				margin: 3px;
+				margin-right: 8px;
+				font-size: 0.87rem;
+				color: var(--nfd-onboarding-primary);
+			}
+
+			&-icon {
+				width: 10px;
+				height: 6px;
+				margin: 3px;
+				border-radius: 6px;
+				background-color: var(--nfd-onboarding-primary);
+
+				&--selected {
+					background-color: #1de082;
+				}
+			}
+		}
+	}
+
+}
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
new file mode 100644
index 000000000..228b5ff48
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
@@ -0,0 +1,17 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'Tell me some details about the site you want created?',
+			'wp-module-onboarding'
+		),
+		inputPlaceholder: __(
+			'I want a site for my company that sells…',
+			'wp-module-onboarding'
+		),
+		inputHint: __( 'The more detail the better', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index 06fea7cac..3949c13eb 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -1,14 +1,18 @@
 import CommonLayout from '../../../components/Layouts/Common';
 
-import { useEffect } from '@wordpress/element';
-
 import { useDispatch } from '@wordpress/data';
-import { store as nfdOnboardingStore } from '../../../store';
 import { HEADER_SITEGEN } from '../../../../constants';
+import { useEffect, useState } from '@wordpress/element';
+import { store as nfdOnboardingStore } from '../../../store';
 
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import getContents from './contents';
+import AIHeading from '../../../components/AIHeading';
+import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
 
 const SiteGenSiteDetails = () => {
+	const content = getContents();
+	const [ customerInput, setCustomerInput ] = useState();
+
 	const {
 		setIsHeaderEnabled,
 		setSidebarActiveView,
@@ -22,12 +26,25 @@ const SiteGenSiteDetails = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 	} );
+
+	// const checkAndNavigate = () => {
+	// 	// console.log( customerInput );
+	// 	// console.log( 'Navigate to the next screen!' );
+	// };
+
 	return (
-		<CommonLayout
-			isCentered
-			className="nfd-onboarding-step--site-gen__site-details"
-		>
-			<SiteGenPlaceholder heading={ 'Site Details' } />
+		<CommonLayout isCentered>
+			<div className={ 'nfd-sg-site-details' }>
+				<AIHeading title={ content.heading } />
+				<TextInputSiteGen
+					placeholder={ content.inputPlaceholder }
+					hint={ content.inputHint }
+					height={ '40px' }
+					customerInput={ customerInput }
+					setCustomerInput={ setCustomerInput }
+				/>
+				<div className={ 'nfd-sg-site-details-endrow' }></div>
+			</div>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
new file mode 100644
index 000000000..bbb9aa3c9
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
@@ -0,0 +1,16 @@
+.nfd-sg-site-details {
+
+	@media (max-width: #{ ($break-small) }) {
+		margin: 20px;
+	}
+
+	&-endrow {
+		width: 100%;
+		display: flex;
+		justify-content: flex-end;
+
+		@media (max-width: #{ ($break-small) }) {
+			justify-content: center;
+		}
+	}
+}
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 992bea2af..c12fb7be8 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -46,7 +46,9 @@
 @import "../components/AdminBar/stylesheet";
 @import "../components/ProgressBar/stylesheet";
 @import "../components/Button/ButtonDark/stylesheet";
-@import "../components//SiteGenPlaceholder/stylesheet.scss";
+@import "../components/SiteGenPlaceholder/stylesheet";
+@import "../components/AIHeading/stylesheet";
+@import "../components/TextInput/TextInputSiteGen/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
@@ -62,6 +64,7 @@
 @import "../steps/DesignHeaderMenu/stylesheet";
 @import "../steps/SiteFeatures/stylesheet";
 @import "../steps/TheFork/stylesheet";
+@import "../steps/SiteGen/SiteDetails/stylesheet";
 
 .nfd-onboarding-container {
 	display: flex;

From 6dc5e23d535917f0c10cd287827bcbe77877eb4e Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 9 Nov 2023 13:58:20 +0530
Subject: [PATCH 02/14] Code Dump v0.1

---
 .../components/AIHeading/stylesheet.scss      |  4 +--
 .../Button/NextButtonSiteGen/index.js         |  8 +++--
 .../Button/NextButtonSiteGen/stylesheet.scss  |  4 +++
 .../TextInputSiteGen/stylesheet.scss          | 13 ++++++--
 .../steps/SiteGen/SiteDetails/contents.js     |  1 +
 .../steps/SiteGen/SiteDetails/index.js        | 31 ++++++++++++-------
 .../steps/SiteGen/SiteDetails/stylesheet.scss | 18 +++++++++++
 7 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/src/OnboardingSPA/components/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/AIHeading/stylesheet.scss
index 6072bdc03..51c3e5f17 100644
--- a/src/OnboardingSPA/components/AIHeading/stylesheet.scss
+++ b/src/OnboardingSPA/components/AIHeading/stylesheet.scss
@@ -11,14 +11,14 @@
 		background-size: 200%;
 		background-position: center;
 		background-repeat: no-repeat;
-		background-image: var(--ai-logo);
+		background-image: var(--sitegen-ai-animation);
 	}
 
 	&--title {
 		margin: 10px;
 		line-height: 1.5;
 		font-weight: 500;
-		font-size: 1.4rem;
+		font-size: 1.2rem;
 		color: var(--nfd-onboarding-primary);
 	}
 }
diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
index 742cb078d..65edb256a 100644
--- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
+++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
@@ -1,9 +1,9 @@
+import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
-
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
+import { Icon, chevronRight } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../store';
-import classNames from 'classnames';
 
 const NextButtonSiteGen = ( { text, className } ) => {
 	const navigate = useNavigate();
@@ -25,6 +25,10 @@ const NextButtonSiteGen = ( { text, className } ) => {
 			} }
 		>
 			{ text }
+			<Icon
+				className={ 'nfd-onboarding-button--site-gen-next--icon' }
+				icon={ chevronRight }
+			/>
 		</Button>
 	);
 };
diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
index 4fd7d8707..4d0da3d46 100644
--- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
+++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
@@ -22,4 +22,8 @@
 			margin-top: 10px;
 		}
 	}
+
+	&--icon {
+		fill: var(--nfd-onboarding-secondary);
+	}
 }
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
index a6c1d0aef..d34785317 100644
--- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -1,5 +1,6 @@
 $border: #d6d6d6;
 $letter-spacing: 0.5px;
+$selected-detail: #1de082;
 
 .nfd-sg-input {
 	margin-top: 25px;
@@ -25,6 +26,11 @@ $letter-spacing: 0.5px;
 			&:focus {
 				box-shadow: none;
 			}
+
+			&::placeholder {
+				font-weight: 100;
+				color: $border;
+			}
 		}
 
 		&__hint {
@@ -32,9 +38,9 @@ $letter-spacing: 0.5px;
 			font-weight: 300;
 			font-size: 0.87rem;
 			padding: 0 1.5px;
+			animation: fadeIn 100ms ease-out;
 			letter-spacing: $letter-spacing;
 			color: var(--nfd-onboarding-primary);
-
 		}
 
 		&__info {
@@ -46,6 +52,7 @@ $letter-spacing: 0.5px;
 				margin: 3px;
 				margin-right: 8px;
 				font-size: 0.87rem;
+				animation: fadeIn 100ms ease-in;
 				color: var(--nfd-onboarding-primary);
 			}
 
@@ -54,10 +61,12 @@ $letter-spacing: 0.5px;
 				height: 6px;
 				margin: 3px;
 				border-radius: 6px;
+				animation: fadeIn 100ms ease-in;
 				background-color: var(--nfd-onboarding-primary);
 
 				&--selected {
-					background-color: #1de082;
+					animation: fadeIn 400ms ease-in-out;
+					background-color: $selected-detail;
 				}
 			}
 		}
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
index 228b5ff48..9fc5fee8b 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js
@@ -11,6 +11,7 @@ const getContents = () => {
 			'wp-module-onboarding'
 		),
 		inputHint: __( 'The more detail the better', 'wp-module-onboarding' ),
+		buttonText: __( 'Next', 'wp-module-onboarding' ),
 	};
 };
 
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index 3949c13eb..9afa61f09 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -8,6 +8,8 @@ import { store as nfdOnboardingStore } from '../../../store';
 import getContents from './contents';
 import AIHeading from '../../../components/AIHeading';
 import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
+import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
+import Animate from '../../../components/Animate';
 
 const SiteGenSiteDetails = () => {
 	const content = getContents();
@@ -34,17 +36,24 @@ const SiteGenSiteDetails = () => {
 
 	return (
 		<CommonLayout isCentered>
-			<div className={ 'nfd-sg-site-details' }>
-				<AIHeading title={ content.heading } />
-				<TextInputSiteGen
-					placeholder={ content.inputPlaceholder }
-					hint={ content.inputHint }
-					height={ '40px' }
-					customerInput={ customerInput }
-					setCustomerInput={ setCustomerInput }
-				/>
-				<div className={ 'nfd-sg-site-details-endrow' }></div>
-			</div>
+			<Animate type={ 'fade-in' }>
+				<div className={ 'nfd-sg-site-details' }>
+					<AIHeading title={ content.heading } />
+					<TextInputSiteGen
+						placeholder={ content.inputPlaceholder }
+						hint={ content.inputHint }
+						height={ '40px' }
+						customerInput={ customerInput }
+						setCustomerInput={ setCustomerInput }
+					/>
+					<div className={ 'nfd-sg-site-details-endrow' }>
+						<NextButtonSiteGen
+							className={ 'nfd-sg-site-details--next-btn' }
+							text={ content.buttonText }
+						/>
+					</div>
+				</div>
+			</Animate>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
index bbb9aa3c9..98ae9f8c1 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
@@ -13,4 +13,22 @@
 			justify-content: center;
 		}
 	}
+
+	&--next-btn {
+		width: 100px;
+		color: var(--nfd-onboarding-secondary);
+		display: flex;
+		font-size: 1rem;
+		cursor: pointer;
+		padding-left: 24px;
+		align-items: center;
+		border-radius: 8px;
+		justify-content: center;
+		background-color: var(--nfd-onboarding-primary);
+		transition: all 300ms ease-in-out;
+
+		&:hover {
+			box-shadow: 5px 5px rgba($color:  var(--nfd-onboarding-secondary), $alpha: 0.1);
+		}
+	}
 }

From d8a29baa3be6d11e3959d973c90061529ed67501 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 9 Nov 2023 14:01:37 +0530
Subject: [PATCH 03/14] Update scss

---
 .../Button/NextButtonSiteGen/stylesheet.scss      | 15 +++++++++------
 .../steps/SiteGen/SiteDetails/index.js            |  9 ++++-----
 .../steps/SiteGen/SiteDetails/stylesheet.scss     |  5 -----
 3 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
index 4d0da3d46..7003deaeb 100644
--- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
+++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/stylesheet.scss
@@ -1,15 +1,18 @@
 .nfd-onboarding-button {
 
 	&--site-gen-next {
-		display: block;
-		background-color: var(--nfd-onboarding-primary);
-		color: var(--nfd-onboarding-secondary);
-		text-align: center;
 		width: 164px;
 		height: 50px;
-		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
+		display: flex;
+		cursor: pointer;
 		margin-top: 24px;
-		border-radius: 6px;
+		text-align: center;
+		border-radius: 8px;
+		align-items: center;
+		justify-content: center;
+		color: var(--nfd-onboarding-secondary);
+		background-color: var(--nfd-onboarding-primary);
+		font-size: clamp(0.5rem, 0.3864rem + 0.5682vw, 1.75rem);
 
 		@media (min-width: 2600px ) {
 			width: 250px;
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index 9afa61f09..b5831a23f 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -1,15 +1,14 @@
-import CommonLayout from '../../../components/Layouts/Common';
-
 import { useDispatch } from '@wordpress/data';
-import { HEADER_SITEGEN } from '../../../../constants';
 import { useEffect, useState } from '@wordpress/element';
-import { store as nfdOnboardingStore } from '../../../store';
 
 import getContents from './contents';
+import Animate from '../../../components/Animate';
 import AIHeading from '../../../components/AIHeading';
+import { HEADER_SITEGEN } from '../../../../constants';
+import { store as nfdOnboardingStore } from '../../../store';
+import CommonLayout from '../../../components/Layouts/Common';
 import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
 import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
-import Animate from '../../../components/Animate';
 
 const SiteGenSiteDetails = () => {
 	const content = getContents();
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
index 98ae9f8c1..dd264c6c3 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/stylesheet.scss
@@ -17,13 +17,8 @@
 	&--next-btn {
 		width: 100px;
 		color: var(--nfd-onboarding-secondary);
-		display: flex;
 		font-size: 1rem;
-		cursor: pointer;
 		padding-left: 24px;
-		align-items: center;
-		border-radius: 8px;
-		justify-content: center;
 		background-color: var(--nfd-onboarding-primary);
 		transition: all 300ms ease-in-out;
 

From 702e1442167d7d97115ddc76ef9fdef09c03c1fb Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 9 Nov 2023 15:22:36 +0530
Subject: [PATCH 04/14] Experience Dump

---
 .../components/Animate/stylesheet.scss        | 22 +++++-
 .../components/CardWithOptions/index.js       | 63 +++++++++++++++
 .../CardWithOptions/stylesheet.scss           | 79 +++++++++++++++++++
 .../Loaders/SiteGenLoader/contents.js         | 32 ++++++++
 .../components/Loaders/SiteGenLoader/index.js | 46 +++++++++++
 .../Loaders/SiteGenLoader/stylesheet.scss     | 65 +++++++++++++++
 .../steps/SiteGen/Experience/contents.js      | 36 +++++++++
 .../steps/SiteGen/Experience/index.js         | 50 +++++++++---
 .../steps/SiteGen/Experience/stylesheet.scss  |  6 ++
 src/OnboardingSPA/styles/app.scss             |  3 +
 10 files changed, 387 insertions(+), 15 deletions(-)
 create mode 100644 src/OnboardingSPA/components/CardWithOptions/index.js
 create mode 100644 src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
 create mode 100644 src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js
 create mode 100644 src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
 create mode 100644 src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
 create mode 100644 src/OnboardingSPA/steps/SiteGen/Experience/contents.js
 create mode 100644 src/OnboardingSPA/steps/SiteGen/Experience/stylesheet.scss

diff --git a/src/OnboardingSPA/components/Animate/stylesheet.scss b/src/OnboardingSPA/components/Animate/stylesheet.scss
index 2f187e862..c68f02711 100644
--- a/src/OnboardingSPA/components/Animate/stylesheet.scss
+++ b/src/OnboardingSPA/components/Animate/stylesheet.scss
@@ -109,6 +109,25 @@
 	}
 }
 
+@keyframes fadeInFast {
+
+	0% {
+		opacity: 0.1;
+	}
+
+	25% {
+		opacity: 1;
+	}
+
+	75% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0.1;
+	}
+}
+
 .animate {
 
 	&__blank {
@@ -141,7 +160,6 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
 			}
 		}
 
@@ -150,7 +168,6 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
 			}
 		}
 
@@ -159,7 +176,6 @@
 
 			@media (prefers-reduced-motion) {
 				animation: none !important;
-				translation: none !important;
 			}
 		}
 	}
diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
new file mode 100644
index 000000000..6437b0547
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -0,0 +1,63 @@
+import { Icon, chevronRight } from '@wordpress/icons';
+
+const CardWithOptions = ( { title, options, skip, setSelection } ) => {
+	const buildOptions = () => {
+		return options.map( ( data, idx ) => {
+			return (
+				<div
+					key={ idx }
+					role="button"
+					tabIndex={ 0 }
+					className={ 'nfd-sg-card__data__option' }
+					onClick={ () => {
+						setSelection( idx );
+					} }
+					onKeyDown={ () => {
+						setSelection( idx );
+					} }
+				>
+					<div className={ 'nfd-sg-card__data__option__left' }>
+						<div
+							className={ 'nfd-sg-card__data__option__left_top' }
+						>
+							{ data.title }
+						</div>
+						<div
+							className={
+								'nfd-sg-card__data__option__left_bottom'
+							}
+						>
+							{ data.desc }
+						</div>
+					</div>
+					<Icon
+						className={ 'nfd-sg-card__data__option__right' }
+						icon={ chevronRight }
+					/>
+				</div>
+			);
+		} );
+	};
+
+	return (
+		<div className={ 'nfd-sg-card' }>
+			<div className={ 'nfd-sg-card__title' }>{ title }</div>
+			<div className={ 'nfd-sg-card__data' }>{ buildOptions() }</div>
+			<div
+				role="button"
+				tabIndex={ 0 }
+				className={ 'nfd-sg-card__skip' }
+				onClick={ () => {
+					setSelection( -1 );
+				} }
+				onKeyDown={ () => {
+					setSelection( -1 );
+				} }
+			>
+				{ skip }
+			</div>
+		</div>
+	);
+};
+
+export default CardWithOptions;
diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
new file mode 100644
index 000000000..1676d0f78
--- /dev/null
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -0,0 +1,79 @@
+$background-color: #1e2327;
+
+.nfd-sg-card {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 24px 12px;
+	border-radius: 12px;
+	background-color: $background-color;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
+
+	&__title {
+		color: var(--nfd-onboarding-white);
+		margin: 16px;
+		line-height: 2;
+		font-size: 18px;
+		text-align: center;
+		margin-bottom: 30px;
+		letter-spacing: 1.5px;
+	}
+
+	&__data {
+		margin: 12px;
+
+		&__option {
+			display: flex;
+			cursor: pointer;
+			margin: 16px 4px;
+			align-items: center;
+			border-radius: 4px 4px 0 0;
+			padding: 16px 12px 20px 12px;
+			justify-content: space-between;
+			transition: background-color 400ms ease-in-out;
+
+			&:not(:last-child) {
+				border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
+			}
+
+			&:hover {
+				background-color: #262c30;
+			}
+
+			&__left_top {
+				color: var(--nfd-onboarding-white);
+				font-size: 16px;
+				font-weight: 500;
+				padding-bottom: 12px;
+			}
+
+			&__left_bottom {
+				color: var(--nfd-onboarding-white);
+				font-size: 14px;
+				font-weight: 300;
+			}
+
+			&__right {
+				fill: var(--nfd-onboarding-white);
+				transition: all 200ms ease-in-out;
+
+				&:hover {
+					transform: scale(1.1);
+				}
+			}
+		}
+	}
+
+	&__skip {
+		cursor: pointer;
+		text-align: end;
+		margin: 0 20px 6px 20px;
+		transition: color 200ms ease-in-out;
+		color: rgba(var(--nfd-onboarding-white-rgb), 0.8);
+
+		&:hover {
+			color: var(--nfd-onboarding-white);
+		}
+	}
+}
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js
new file mode 100644
index 000000000..3ebb1b078
--- /dev/null
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/contents.js
@@ -0,0 +1,32 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		title: __( 'Building Website', 'wp-module-onboarding' ),
+		status: [
+			{
+				title: __( 'Generating Website', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finding Font Pairings', 'wp-module-onboarding' ),
+			},
+			{
+				title: __(
+					'Building Custom Color Palettes',
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Populating Images', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Finalizing Previews', 'wp-module-onboarding' ),
+			},
+			{
+				title: __( 'Packaging Website', 'wp-module-onboarding' ),
+			},
+		],
+	};
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
new file mode 100644
index 000000000..21893434d
--- /dev/null
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -0,0 +1,46 @@
+import getContents from './contents';
+import { useEffect, useState } from '@wordpress/element';
+
+const SiteGenLoader = () => {
+	let statusIdx = 0;
+	const content = getContents();
+	const [ percentage, setPercentage ] = useState( 0 );
+	const [ status, setStatus ] = useState( content.status[ statusIdx ].title );
+
+	const checkStatus = async () => {
+		// Make fake API Call to get the status.
+		if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 );
+	};
+
+	useEffect( () => {
+		const statusTimer = setInterval( () => {
+			checkStatus();
+			statusIdx += 1;
+			if ( statusIdx === content.status.length ) statusIdx = 0;
+			setStatus( content.status[ statusIdx ].title );
+		}, 3000 );
+		return () => {
+			clearInterval( statusTimer );
+		};
+	}, [] );
+
+	return (
+		<div className={ 'nfd-sg-loader' }>
+			<div className={ 'nfd-sg-loader__title' }>{ content.title }</div>
+			<div className={ 'nfd-sg-loader__progress' }>
+				<div className={ 'nfd-sg-loader__progress_bars' }>
+					<div className={ 'nfd-sg-loader__progress_bars_bg' } />
+					<div
+						className={ 'nfd-sg-loader__progress_bars_bar' }
+						style={ { width: `${ percentage }%` } }
+					/>
+				</div>
+			</div>
+			<div
+				className={ 'nfd-sg-loader__status' }
+			>{ `${ status }...` }</div>
+		</div>
+	);
+};
+
+export default SiteGenLoader;
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
new file mode 100644
index 000000000..30ae10f54
--- /dev/null
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -0,0 +1,65 @@
+$background-color: #1e2327;
+
+.nfd-sg-loader {
+
+	margin: 8px;
+	max-width: 90vw;
+	padding: 16px 12px;
+	border-radius: 12px;
+	background-color: $background-color;
+	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
+	box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
+
+	&__title {
+		line-height: 2;
+		font-size: 18px;
+		text-align: center;
+		letter-spacing: 1.5px;
+		color: var(--nfd-onboarding-white);
+	}
+
+	&__progress {
+		display: flex;
+		margin: 20px 60px;
+		align-items: center;
+		justify-content: center;
+
+		@media (max-width: #{ ($break-small) }) {
+			margin: 20px 30px;
+		}
+
+		&_bars {
+			width: 100%;
+			display: flex;
+			position: relative;
+			align-items: center;
+			justify-content: start;
+
+			&_bg {
+				height: 6px;
+				width: 100%;
+				border-radius: 6px;
+				background-color: var(--nfd-onboarding-progress-bar-background);
+			}
+
+			&_bar {
+				top: 0;
+				height: 6px;
+				max-width: 100%;
+				border-radius: 6px;
+				position: absolute;
+				transition: width 2s ease-in-out;
+				background-color: var(--nfd-onboarding-progress-bar-fill);
+			}
+		}
+	}
+
+	&__status {
+		line-height: 2;
+		font-size: 14px;
+		text-align: center;
+		letter-spacing: 1.3px;
+		color: var(--nfd-onboarding-white);
+		animation: fadeInFast 3s ease-out infinite;
+	}
+}
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/contents.js b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
new file mode 100644
index 000000000..246dbb06e
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/contents.js
@@ -0,0 +1,36 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'How familiar are you with using WordPress?',
+			'wp-module-onboarding'
+		),
+		options: [
+			{
+				title: __( 'Beginner', 'wp-module-onboarding' ),
+				desc: __(
+					'First time here, where am I?',
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Used it some', 'wp-module-onboarding' ),
+				desc: __(
+					"I'll ask for help when I need it",
+					'wp-module-onboarding'
+				),
+			},
+			{
+				title: __( 'Expert', 'wp-module-onboarding' ),
+				desc: __(
+					"Stay out of my way, I know what I'm doing",
+					'wp-module-onboarding'
+				),
+			},
+		],
+		skip: __( 'Skip', 'wp-module-onboarding' ),
+	};
+};
+
+export default getContents;
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 1e2d51463..6ff78f893 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -1,14 +1,26 @@
-import CommonLayout from '../../../components/Layouts/Common';
-
-import { useEffect } from '@wordpress/element';
+import { useNavigate } from 'react-router-dom';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
 
-import { useDispatch } from '@wordpress/data';
-import { store as nfdOnboardingStore } from '../../../store';
+import getContents from './contents';
 import { HEADER_SITEGEN } from '../../../../constants';
-
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import { store as nfdOnboardingStore } from '../../../store';
+import CommonLayout from '../../../components/Layouts/Common';
+import CardWithOptions from '../../../components/CardWithOptions';
+import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 
 const SiteGenExperience = () => {
+	const navigate = useNavigate();
+	const content = getContents();
+	// Index of the selection user makes
+	const [ selection, setSelection ] = useState();
+
+	const { nextStep } = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+		};
+	} );
+
 	const {
 		setIsHeaderEnabled,
 		setSidebarActiveView,
@@ -22,12 +34,26 @@ const SiteGenExperience = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 	} );
+
+	useEffect( () => {
+		// undefined => not selected, 0-2 => Selections, -1 => Skip
+		// console.log( 'Selection changed to', selection );
+		if ( selection !== undefined && nextStep ) {
+			navigate( nextStep.path );
+		}
+	}, [ selection ] );
+
 	return (
-		<CommonLayout
-			isCentered
-			className="nfd-onboarding-step--site-gen__experience"
-		>
-			<SiteGenPlaceholder heading={ 'Experience' } />
+		<CommonLayout isCentered>
+			<div className={ 'nfd-sg-experience-level' }>
+				<SiteGenLoader />
+				<CardWithOptions
+					title={ content.heading }
+					options={ content.options }
+					skip={ content.skip }
+					setSelection={ setSelection }
+				/>
+			</div>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Experience/stylesheet.scss
new file mode 100644
index 000000000..ee5e0c38f
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/stylesheet.scss
@@ -0,0 +1,6 @@
+.nfd-sg-experience-level {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+}
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 00f63b2f0..ab963c369 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -50,6 +50,8 @@
 @import "../components/AIHeading/stylesheet";
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
+@import "../components/CardWithOptions/stylesheet";
+@import "../components/Loaders/SiteGenLoader/stylesheet";
 
 // CSS for Pages
 @import "../steps/BasicInfo/stylesheet";
@@ -66,6 +68,7 @@
 @import "../steps/SiteFeatures/stylesheet";
 @import "../steps/TheFork/stylesheet";
 @import "../steps/SiteGen/SiteDetails/stylesheet";
+@import "../steps/SiteGen/Experience/stylesheet";
 @import "../steps/SiteGen/Welcome/stylesheet";
 
 .nfd-onboarding-container {

From 0358765db38bd4614e977ff81846de4942db0ea4 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 9 Nov 2023 15:24:18 +0530
Subject: [PATCH 05/14] Update stylesheet.scss

---
 .../components/Loaders/SiteGenLoader/stylesheet.scss            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index 30ae10f54..7f6adf9b4 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -33,7 +33,7 @@ $background-color: #1e2327;
 			display: flex;
 			position: relative;
 			align-items: center;
-			justify-content: start;
+			justify-content: flex-start;
 
 			&_bg {
 				height: 6px;

From 433f85dec1919f4e3d3d6415a3ace1f0e02fb39b Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 9 Nov 2023 18:46:13 +0530
Subject: [PATCH 06/14] Refactor Code

---
 src/OnboardingSPA/components/ErrorState/Step/index.js           | 2 +-
 src/OnboardingSPA/components/{ => Heading}/AIHeading/index.js   | 0
 .../components/{ => Heading}/AIHeading/stylesheet.scss          | 0
 .../components/{ => Heading}/HeadingWithSubHeading/index.js     | 0
 .../{ => Heading}/HeadingWithSubHeading/stylesheet.scss         | 0
 src/OnboardingSPA/components/Loaders/Step/index.js              | 2 +-
 src/OnboardingSPA/pages/ErrorPage/index.js                      | 2 +-
 src/OnboardingSPA/steps/BasicInfo/index.js                      | 2 +-
 src/OnboardingSPA/steps/DesignHomepageMenu/index.js             | 2 +-
 src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js         | 2 +-
 src/OnboardingSPA/steps/SiteFeatures/index.js                   | 2 +-
 src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js            | 2 +-
 src/OnboardingSPA/steps/SitePages/index.js                      | 2 +-
 src/OnboardingSPA/steps/TopPriority/index.js                    | 2 +-
 14 files changed, 10 insertions(+), 10 deletions(-)
 rename src/OnboardingSPA/components/{ => Heading}/AIHeading/index.js (100%)
 rename src/OnboardingSPA/components/{ => Heading}/AIHeading/stylesheet.scss (100%)
 rename src/OnboardingSPA/components/{ => Heading}/HeadingWithSubHeading/index.js (100%)
 rename src/OnboardingSPA/components/{ => Heading}/HeadingWithSubHeading/stylesheet.scss (100%)

diff --git a/src/OnboardingSPA/components/ErrorState/Step/index.js b/src/OnboardingSPA/components/ErrorState/Step/index.js
index d97570176..909eda268 100644
--- a/src/OnboardingSPA/components/ErrorState/Step/index.js
+++ b/src/OnboardingSPA/components/ErrorState/Step/index.js
@@ -1,5 +1,5 @@
 import CommonLayout from '../../Layouts/Common';
-import HeadingWithSubHeading from '../../HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../Heading/HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 
 const StepErrorState = ( { title, subtitle, error } ) => {
diff --git a/src/OnboardingSPA/components/AIHeading/index.js b/src/OnboardingSPA/components/Heading/AIHeading/index.js
similarity index 100%
rename from src/OnboardingSPA/components/AIHeading/index.js
rename to src/OnboardingSPA/components/Heading/AIHeading/index.js
diff --git a/src/OnboardingSPA/components/AIHeading/stylesheet.scss b/src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/AIHeading/stylesheet.scss
rename to src/OnboardingSPA/components/Heading/AIHeading/stylesheet.scss
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/index.js b/src/OnboardingSPA/components/Heading/HeadingWithSubHeading/index.js
similarity index 100%
rename from src/OnboardingSPA/components/HeadingWithSubHeading/index.js
rename to src/OnboardingSPA/components/Heading/HeadingWithSubHeading/index.js
diff --git a/src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss b/src/OnboardingSPA/components/Heading/HeadingWithSubHeading/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/HeadingWithSubHeading/stylesheet.scss
rename to src/OnboardingSPA/components/Heading/HeadingWithSubHeading/stylesheet.scss
diff --git a/src/OnboardingSPA/components/Loaders/Step/index.js b/src/OnboardingSPA/components/Loaders/Step/index.js
index ea84b1950..09f655d1f 100644
--- a/src/OnboardingSPA/components/Loaders/Step/index.js
+++ b/src/OnboardingSPA/components/Loaders/Step/index.js
@@ -1,5 +1,5 @@
 import CommonLayout from '../../Layouts/Common';
-import HeadingWithSubHeading from '../../HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../Heading/HeadingWithSubHeading';
 import NeedHelpTag from '../../NeedHelpTag';
 
 const StepLoader = ( { title, subtitle } ) => {
diff --git a/src/OnboardingSPA/pages/ErrorPage/index.js b/src/OnboardingSPA/pages/ErrorPage/index.js
index eb14fc4e0..760da6d6a 100644
--- a/src/OnboardingSPA/pages/ErrorPage/index.js
+++ b/src/OnboardingSPA/pages/ErrorPage/index.js
@@ -2,7 +2,7 @@ import { useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 
 import CommonLayout from '../../components/Layouts/Common';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PAGE } from '../../../constants';
 import { store as nfdOnboardingStore } from '../../store';
 import { useViewportMatch } from '@wordpress/compose';
diff --git a/src/OnboardingSPA/steps/BasicInfo/index.js b/src/OnboardingSPA/steps/BasicInfo/index.js
index 4c73b3fc6..d9b91ccf1 100644
--- a/src/OnboardingSPA/steps/BasicInfo/index.js
+++ b/src/OnboardingSPA/steps/BasicInfo/index.js
@@ -1,5 +1,5 @@
 import CommonLayout from '../../components/Layouts/Common';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import BasicInfoForm from './basicInfoForm';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';
 import { store as nfdOnboardingStore } from '../../store';
diff --git a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
index 91e772c7c..845282dfe 100644
--- a/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
+++ b/src/OnboardingSPA/steps/DesignHomepageMenu/index.js
@@ -11,7 +11,7 @@ import {
 	THEME_STATUS_INIT,
 	SIDEBAR_LEARN_MORE,
 } from '../../../constants';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import { DesignStateHandler } from '../../components/StateHandlers';
 import {
 	LivePreviewSelectableCard,
diff --git a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
index 9409a42ce..a1a5e02c5 100644
--- a/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
+++ b/src/OnboardingSPA/steps/DesignThemeStyles/Menu/index.js
@@ -5,7 +5,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import getContents from '../contents';
 import { store as nfdOnboardingStore } from '../../../store';
 import CommonLayout from '../../../components/Layouts/Common';
-import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../../components/Heading/HeadingWithSubHeading';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { getPatterns } from '../../../utils/api/patterns';
 import { getGlobalStyles } from '../../../utils/api/themes';
diff --git a/src/OnboardingSPA/steps/SiteFeatures/index.js b/src/OnboardingSPA/steps/SiteFeatures/index.js
index a8265e459..d7eb37f2a 100644
--- a/src/OnboardingSPA/steps/SiteFeatures/index.js
+++ b/src/OnboardingSPA/steps/SiteFeatures/index.js
@@ -8,7 +8,7 @@ import { store as nfdOnboardingStore } from '../../store';
 import { SIDEBAR_LEARN_MORE, VIEW_NAV_PRIMARY } from '../../../constants';
 import CommonLayout from '../../components/Layouts/Common';
 import { getSiteFeatures } from '../../utils/api/plugins';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import CheckboxList from '../../components/CheckboxTemplate/CheckboxList';
 import { CheckboxListSkeleton } from '../../components/CheckboxTemplate';
 import getContents from './contents';
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index b5831a23f..be45c518e 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -3,9 +3,9 @@ import { useEffect, useState } from '@wordpress/element';
 
 import getContents from './contents';
 import Animate from '../../../components/Animate';
-import AIHeading from '../../../components/AIHeading';
 import { HEADER_SITEGEN } from '../../../../constants';
 import { store as nfdOnboardingStore } from '../../../store';
+import AIHeading from '../../../components/Heading/AIHeading';
 import CommonLayout from '../../../components/Layouts/Common';
 import TextInputSiteGen from '../../../components/TextInput/TextInputSiteGen';
 import NextButtonSiteGen from '../../../components/Button/NextButtonSiteGen';
diff --git a/src/OnboardingSPA/steps/SitePages/index.js b/src/OnboardingSPA/steps/SitePages/index.js
index bea7a884e..6cd9986fa 100644
--- a/src/OnboardingSPA/steps/SitePages/index.js
+++ b/src/OnboardingSPA/steps/SitePages/index.js
@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 
 import { store as nfdOnboardingStore } from '../../store';
 import CommonLayout from '../../components/Layouts/Common';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import { getPatterns } from '../../utils/api/patterns';
 import {
 	THEME_STATUS_ACTIVE,
diff --git a/src/OnboardingSPA/steps/TopPriority/index.js b/src/OnboardingSPA/steps/TopPriority/index.js
index 37a66e526..d42ab1621 100644
--- a/src/OnboardingSPA/steps/TopPriority/index.js
+++ b/src/OnboardingSPA/steps/TopPriority/index.js
@@ -6,7 +6,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import SkipButton from '../../components/SkipButton';
 import { store as nfdOnboardingStore } from '../../store';
 import CommonLayout from '../../components/Layouts/Common';
-import HeadingWithSubHeading from '../../components/HeadingWithSubHeading';
+import HeadingWithSubHeading from '../../components/Heading/HeadingWithSubHeading';
 import SelectableCardList from '../../components/SelectableCardList/selectable-card-list';
 import getContents from './contents';
 import {

From 0bcedb0a0fa74439e7ca1fde0d855ce27d0166fd Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 10 Nov 2023 17:08:21 +0530
Subject: [PATCH 07/14] Update app.scss

---
 src/OnboardingSPA/styles/app.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index ab963c369..0cc81de2d 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -21,7 +21,7 @@
 @import "../components/NewfoldLargeCard/stylesheet";
 @import "../components/SelectableCard/stylesheet";
 @import "../components/SelectableCardList/stylesheet";
-@import "../components/HeadingWithSubHeading/stylesheet";
+@import "../components/Heading/HeadingWithSubHeading/stylesheet";
 @import "../components/Button/stylesheet";
 @import "../components/CardHeader/stylesheet";
 @import "../components/NeedHelpTag/stylesheet";
@@ -47,7 +47,7 @@
 @import "../components/ProgressBar/stylesheet";
 @import "../components/Button/ButtonDark/stylesheet";
 @import "../components/SiteGenPlaceholder/stylesheet";
-@import "../components/AIHeading/stylesheet";
+@import "../components/Heading/AIHeading/stylesheet";
 @import "../components/TextInput/TextInputSiteGen/stylesheet";
 @import "../components/Button/NextButtonSiteGen/stylesheet";
 @import "../components/CardWithOptions/stylesheet";

From 8ce2a8873d9289a4131f9550bfebf9ab96550483 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Wed, 15 Nov 2023 16:29:31 +0530
Subject: [PATCH 08/14] Add Building Page

---
 .../components/Loaders/SiteGenLoader/index.js | 18 ++++++
 .../steps/SiteGen/Building/index.js           | 14 ++++-
 .../steps/SiteGen/Building/stylesheet.scss    | 63 +++++++++++++++++++
 src/OnboardingSPA/styles/app.scss             |  1 +
 4 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss

diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index 21893434d..afc73097b 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -1,12 +1,22 @@
 import getContents from './contents';
+import { useSelect } from '@wordpress/data';
+import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from '@wordpress/element';
+import { store as nfdOnboardingStore } from '../../../store';
 
 const SiteGenLoader = () => {
 	let statusIdx = 0;
 	const content = getContents();
+	const navigate = useNavigate();
 	const [ percentage, setPercentage ] = useState( 0 );
 	const [ status, setStatus ] = useState( content.status[ statusIdx ].title );
 
+	const { nextStep } = useSelect( ( select ) => {
+		return {
+			nextStep: select( nfdOnboardingStore ).getNextStep(),
+		};
+	} );
+
 	const checkStatus = async () => {
 		// Make fake API Call to get the status.
 		if ( percentage !== 100 ) setPercentage( ( t ) => t + 10 );
@@ -24,6 +34,14 @@ const SiteGenLoader = () => {
 		};
 	}, [] );
 
+	useEffect( () => {
+		if ( percentage === 100 ) {
+			if ( nextStep ) {
+				navigate( nextStep.path );
+			}
+		}
+	}, [ percentage ] );
+
 	return (
 		<div className={ 'nfd-sg-loader' }>
 			<div className={ 'nfd-sg-loader__title' }>{ content.title }</div>
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 80c6b9bbc..6b657ad43 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -6,7 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
 import { HEADER_SITEGEN } from '../../../../constants';
 
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import SiteGenLoader from '../../../components/Loaders/SiteGenLoader';
 
 const SiteGenBuilding = () => {
 	const {
@@ -27,7 +27,17 @@ const SiteGenBuilding = () => {
 			isCentered
 			className="nfd-onboarding-step--site-gen__building"
 		>
-			<SiteGenPlaceholder heading={ 'Building Previews' } />
+			<div className="site-gen__building_skimmer">
+				<div className="site-gen__building_skimmer--header"></div>
+				<div className="site-gen__building_skimmer--body"></div>
+				<div className="site-gen__building_skimmer--footer">
+					<div className="site-gen__building_skimmer--footer_left"></div>
+					<div className="site-gen__building_skimmer--footer_right"></div>
+				</div>
+			</div>
+			<div className="site-gen__building_loader__overlay">
+				<SiteGenLoader />
+			</div>
 		</CommonLayout>
 	);
 };
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
new file mode 100644
index 000000000..ca60b791f
--- /dev/null
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -0,0 +1,63 @@
+.nfd-onboarding-step--site-gen__building {
+	padding: 40px;
+	position: relative;
+}
+
+.site-gen__building {
+
+	&_skimmer {
+
+		&--header {
+			height: 80px;
+			width: 90vw;
+			margin-bottom: 30px;
+			border-radius: 24px;
+			background: rgba(255, 255, 255, 0.05);
+			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+			border: 0.25px solid rgba(255, 255, 255, 0.26);
+		}
+
+		&--body {
+			height: 500px;
+			width: 90vw;
+			border-radius: 24px;
+			margin-bottom: 30px;
+			background: rgba(255, 255, 255, 0.05);
+			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+			border: 0.25px solid rgba(255, 255, 255, 0.26);
+		}
+
+		&--footer {
+			display: flex;
+			align-items: center;
+			flex-direction: row;
+			justify-content: space-between;
+
+			&_left {
+				height: 300px;
+				width: 55vw;
+				border-radius: 24px;
+				background: rgba(255, 255, 255, 0.05);
+				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+				border: 0.25px solid rgba(255, 255, 255, 0.26);
+			}
+
+			&_right {
+				height: 300px;
+				width: 33vw;
+				border-radius: 24px;
+				background: rgba(255, 255, 255, 0.05);
+				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+				border: 0.25px solid rgba(255, 255, 255, 0.26);
+			}
+		}
+	}
+
+	&_loader__overlay {
+		position: absolute;
+		top: 40%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}
+
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index 0cc81de2d..e40189907 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -70,6 +70,7 @@
 @import "../steps/SiteGen/SiteDetails/stylesheet";
 @import "../steps/SiteGen/Experience/stylesheet";
 @import "../steps/SiteGen/Welcome/stylesheet";
+@import "../steps/SiteGen/Building/stylesheet";
 
 .nfd-onboarding-container {
 	display: flex;

From 234c407ad8ebe4157b72af428270cd07bfeaaf9d Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 16 Nov 2023 11:43:27 +0530
Subject: [PATCH 09/14] Add Animation

---
 .../Header/components/SiteGenHeader/index.js  |  2 +-
 .../steps/SiteGen/Building/index.js           |  8 ++--
 .../steps/SiteGen/Building/stylesheet.scss    | 47 ++++++++++---------
 3 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
index 2f0027111..db3390a10 100644
--- a/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
+++ b/src/OnboardingSPA/components/Header/components/SiteGenHeader/index.js
@@ -34,7 +34,7 @@ const SiteGenHeader = () => {
 	);
 
 	const currentStepIndex = findIndex( allSteps, {
-		path: currentStep.path,
+		path: currentStep?.path,
 	} );
 	const progress = ( currentStepIndex / allSteps.length ) * 100;
 
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 6b657ad43..1f3af5a96 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -28,11 +28,11 @@ const SiteGenBuilding = () => {
 			className="nfd-onboarding-step--site-gen__building"
 		>
 			<div className="site-gen__building_skimmer">
-				<div className="site-gen__building_skimmer--header"></div>
-				<div className="site-gen__building_skimmer--body"></div>
+				<div className="site-gen__building_skimmer--main site-gen__building_skimmer--header"></div>
+				<div className="site-gen__building_skimmer--main site-gen__building_skimmer--body"></div>
 				<div className="site-gen__building_skimmer--footer">
-					<div className="site-gen__building_skimmer--footer_left"></div>
-					<div className="site-gen__building_skimmer--footer_right"></div>
+					<div className="site-gen__building_skimmer--main site-gen__building_skimmer--footer_left"></div>
+					<div className="site-gen__building_skimmer--main site-gen__building_skimmer--footer_right"></div>
 				</div>
 			</div>
 			<div className="site-gen__building_loader__overlay">
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
index ca60b791f..cc69c7c13 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -1,30 +1,37 @@
 .nfd-onboarding-step--site-gen__building {
-	padding: 40px;
+	margin: 20px;
+	padding: 20px;
 	position: relative;
 }
 
+@property --angle {
+	inherits: true;
+	syntax: "<angle>";
+	initial-value: 90deg;
+}
+
 .site-gen__building {
 
 	&_skimmer {
 
-		&--header {
-			height: 80px;
-			width: 90vw;
-			margin-bottom: 30px;
+		&--main {
 			border-radius: 24px;
+			margin-bottom: 30px;
 			background: rgba(255, 255, 255, 0.05);
 			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 			border: 0.25px solid rgba(255, 255, 255, 0.26);
+			animation: borderRotate 2500ms infinite forwards;
+			border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30;
+		}
+
+		&--header {
+			height: 80px;
+			width: 90vw;
 		}
 
 		&--body {
-			height: 500px;
 			width: 90vw;
-			border-radius: 24px;
-			margin-bottom: 30px;
-			background: rgba(255, 255, 255, 0.05);
-			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-			border: 0.25px solid rgba(255, 255, 255, 0.26);
+			height: 500px;
 		}
 
 		&--footer {
@@ -34,21 +41,13 @@
 			justify-content: space-between;
 
 			&_left {
-				height: 300px;
 				width: 55vw;
-				border-radius: 24px;
-				background: rgba(255, 255, 255, 0.05);
-				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-				border: 0.25px solid rgba(255, 255, 255, 0.26);
+				height: 300px;
 			}
 
 			&_right {
-				height: 300px;
 				width: 33vw;
-				border-radius: 24px;
-				background: rgba(255, 255, 255, 0.05);
-				box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-				border: 0.25px solid rgba(255, 255, 255, 0.26);
+				height: 300px;
 			}
 		}
 	}
@@ -61,3 +60,9 @@
 	}
 }
 
+@keyframes borderRotate {
+
+	100% {
+		--angle: 360deg;
+	}
+}

From f44285e04ffa26954b66ce1dc682f553a8176492 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 16 Nov 2023 13:24:27 +0530
Subject: [PATCH 10/14] Update stylesheet.scss

---
 src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
index cc69c7c13..337852584 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -15,7 +15,6 @@
 	&_skimmer {
 
 		&--main {
-			border-radius: 24px;
 			margin-bottom: 30px;
 			background: rgba(255, 255, 255, 0.05);
 			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

From 5e7ebc294137cbd57c8d7bbe937dba79d8115f25 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Thu, 16 Nov 2023 19:01:20 +0530
Subject: [PATCH 11/14] Support to maintain state

---
 .../Button/NextButtonSiteGen/index.js         |  5 +++-
 .../components/CardWithOptions/index.js       | 18 ++++++++----
 .../steps/SiteGen/Experience/index.js         | 28 ++++++++++++++-----
 .../steps/SiteGen/SiteDetails/index.js        | 26 +++++++++++++----
 4 files changed, 58 insertions(+), 19 deletions(-)

diff --git a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
index 65edb256a..145f392ea 100644
--- a/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
+++ b/src/OnboardingSPA/components/Button/NextButtonSiteGen/index.js
@@ -5,7 +5,7 @@ import { Button } from '@wordpress/components';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const NextButtonSiteGen = ( { text, className } ) => {
+const NextButtonSiteGen = ( { text, className, callback = null } ) => {
 	const navigate = useNavigate();
 	const { nextStep } = useSelect( ( select ) => {
 		return {
@@ -19,6 +19,9 @@ const NextButtonSiteGen = ( { text, className } ) => {
 				className
 			) }
 			onClick={ () => {
+				if ( callback && typeof callback === 'function' ) {
+					callback();
+				}
 				if ( nextStep ) {
 					navigate( nextStep.path );
 				}
diff --git a/src/OnboardingSPA/components/CardWithOptions/index.js b/src/OnboardingSPA/components/CardWithOptions/index.js
index 6437b0547..6ac5c8fff 100644
--- a/src/OnboardingSPA/components/CardWithOptions/index.js
+++ b/src/OnboardingSPA/components/CardWithOptions/index.js
@@ -1,6 +1,6 @@
 import { Icon, chevronRight } from '@wordpress/icons';
 
-const CardWithOptions = ( { title, options, skip, setSelection } ) => {
+const CardWithOptions = ( { title, options, skip, callback } ) => {
 	const buildOptions = () => {
 		return options.map( ( data, idx ) => {
 			return (
@@ -10,10 +10,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => {
 					tabIndex={ 0 }
 					className={ 'nfd-sg-card__data__option' }
 					onClick={ () => {
-						setSelection( idx );
+						if ( callback && typeof callback === 'function' ) {
+							callback( idx + 1 );
+						}
 					} }
 					onKeyDown={ () => {
-						setSelection( idx );
+						if ( callback && typeof callback === 'function' ) {
+							callback( idx + 1 );
+						}
 					} }
 				>
 					<div className={ 'nfd-sg-card__data__option__left' }>
@@ -48,10 +52,14 @@ const CardWithOptions = ( { title, options, skip, setSelection } ) => {
 				tabIndex={ 0 }
 				className={ 'nfd-sg-card__skip' }
 				onClick={ () => {
-					setSelection( -1 );
+					if ( callback && typeof callback === 'function' ) {
+						callback( -1 );
+					}
 				} }
 				onKeyDown={ () => {
-					setSelection( -1 );
+					if ( callback && typeof callback === 'function' ) {
+						callback( -1 );
+					}
 				} }
 			>
 				{ skip }
diff --git a/src/OnboardingSPA/steps/SiteGen/Experience/index.js b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
index 6ff78f893..d04bb4628 100644
--- a/src/OnboardingSPA/steps/SiteGen/Experience/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Experience/index.js
@@ -13,10 +13,13 @@ const SiteGenExperience = () => {
 	const navigate = useNavigate();
 	const content = getContents();
 	// Index of the selection user makes
+	/* eslint-disable no-unused-vars */
 	const [ selection, setSelection ] = useState();
 
-	const { nextStep } = useSelect( ( select ) => {
+	const { currentData, nextStep } = useSelect( ( select ) => {
 		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
 			nextStep: select( nfdOnboardingStore ).getNextStep(),
 		};
 	} );
@@ -26,6 +29,7 @@ const SiteGenExperience = () => {
 		setSidebarActiveView,
 		setHeaderActiveView,
 		setDrawerActiveView,
+		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -33,15 +37,25 @@ const SiteGenExperience = () => {
 		setSidebarActiveView( false );
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
+
+		if ( currentData.sitegen.experience?.level ) {
+			setSelection( currentData.sitegen.experience.level );
+		}
 	} );
 
-	useEffect( () => {
-		// undefined => not selected, 0-2 => Selections, -1 => Skip
-		// console.log( 'Selection changed to', selection );
-		if ( selection !== undefined && nextStep ) {
+	const checkAndNavigate = ( idx ) => {
+		// 0 - Not Selected
+		// 1-2 Options
+		// -1 Skip
+		setSelection( idx );
+		currentData.sitegen.experience.level = idx;
+		setCurrentOnboardingData( currentData );
+		// console.log( selection );
+		// console.log( 'Navigate to the next screen!' );
+		if ( nextStep ) {
 			navigate( nextStep.path );
 		}
-	}, [ selection ] );
+	};
 
 	return (
 		<CommonLayout isCentered>
@@ -51,7 +65,7 @@ const SiteGenExperience = () => {
 					title={ content.heading }
 					options={ content.options }
 					skip={ content.skip }
-					setSelection={ setSelection }
+					callback={ checkAndNavigate }
 				/>
 			</div>
 		</CommonLayout>
diff --git a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
index be45c518e..efc9db610 100644
--- a/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js
@@ -1,4 +1,4 @@
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 
 import getContents from './contents';
@@ -14,11 +14,19 @@ const SiteGenSiteDetails = () => {
 	const content = getContents();
 	const [ customerInput, setCustomerInput ] = useState();
 
+	const { currentData } = useSelect( ( select ) => {
+		return {
+			currentData:
+				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+		};
+	} );
+
 	const {
 		setIsHeaderEnabled,
 		setSidebarActiveView,
 		setHeaderActiveView,
 		setDrawerActiveView,
+		setCurrentOnboardingData,
 	} = useDispatch( nfdOnboardingStore );
 
 	useEffect( () => {
@@ -26,12 +34,17 @@ const SiteGenSiteDetails = () => {
 		setSidebarActiveView( false );
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
-	} );
 
-	// const checkAndNavigate = () => {
-	// 	// console.log( customerInput );
-	// 	// console.log( 'Navigate to the next screen!' );
-	// };
+		if ( currentData.sitegen.siteDetails?.prompt !== '' ) {
+			setCustomerInput( currentData.sitegen.siteDetails.prompt );
+		}
+	}, [] );
+
+	const checkAndNavigate = () => {
+		currentData.sitegen.siteDetails.prompt = customerInput;
+		setCurrentOnboardingData( currentData );
+		// console.log( 'Navigate to the next screen!' );
+	};
 
 	return (
 		<CommonLayout isCentered>
@@ -49,6 +62,7 @@ const SiteGenSiteDetails = () => {
 						<NextButtonSiteGen
 							className={ 'nfd-sg-site-details--next-btn' }
 							text={ content.buttonText }
+							callback={ checkAndNavigate }
 						/>
 					</div>
 				</div>

From 0b035259e35932580d6404c23adca9b783ba46b7 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 17 Nov 2023 10:13:13 +0530
Subject: [PATCH 12/14] Fix Styling and Stuff

---
 .../CardWithOptions/stylesheet.scss           | 18 ++++++------
 .../components/Loaders/SiteGenLoader/index.js |  4 +--
 .../Loaders/SiteGenLoader/stylesheet.scss     |  6 ++--
 .../{ => TextInputSiteBuild}/contents.js      |  0
 .../{ => TextInputSiteBuild}/index.js         |  6 ++--
 .../{ => TextInputSiteBuild}/stylesheet.scss  |  0
 .../TextInputSiteGen/stylesheet.scss          |  5 ++--
 .../steps/BasicInfo/basicInfoForm.js          |  6 ++--
 .../steps/SiteGen/Building/index.js           |  2 +-
 .../steps/SiteGen/Building/stylesheet.scss    | 28 +++++++++----------
 src/OnboardingSPA/styles/_branding.scss       | 20 +++++++++++--
 src/OnboardingSPA/styles/app.scss             |  2 +-
 12 files changed, 55 insertions(+), 42 deletions(-)
 rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/contents.js (100%)
 rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/index.js (91%)
 rename src/OnboardingSPA/components/TextInput/{ => TextInputSiteBuild}/stylesheet.scss (100%)

diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index 1676d0f78..878145ca3 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: #1e2327;
+$background-color: var(--nfd-onboarding-admin-bar-background);
 
 .nfd-sg-card {
 
@@ -11,7 +11,7 @@ $background-color: #1e2327;
 	box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
 
 	&__title {
-		color: var(--nfd-onboarding-white);
+		color: var(--nfd-onboarding-primary);
 		margin: 16px;
 		line-height: 2;
 		font-size: 18px;
@@ -34,28 +34,28 @@ $background-color: #1e2327;
 			transition: background-color 400ms ease-in-out;
 
 			&:not(:last-child) {
-				border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
+				border-bottom: 0.5px solid rgba(var(--nfd-onboarding-primary-rgb), 0.3);
 			}
 
 			&:hover {
-				background-color: #262c30;
+				background-color: var(--nfd-onboarding-hover);
 			}
 
 			&__left_top {
-				color: var(--nfd-onboarding-white);
+				color: var(--nfd-onboarding-primary);
 				font-size: 16px;
 				font-weight: 500;
 				padding-bottom: 12px;
 			}
 
 			&__left_bottom {
-				color: var(--nfd-onboarding-white);
+				color: var(--nfd-onboarding-primary);
 				font-size: 14px;
 				font-weight: 300;
 			}
 
 			&__right {
-				fill: var(--nfd-onboarding-white);
+				fill: var(--nfd-onboarding-primary);
 				transition: all 200ms ease-in-out;
 
 				&:hover {
@@ -70,10 +70,10 @@ $background-color: #1e2327;
 		text-align: end;
 		margin: 0 20px 6px 20px;
 		transition: color 200ms ease-in-out;
-		color: rgba(var(--nfd-onboarding-white-rgb), 0.8);
+		color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
 
 		&:hover {
-			color: var(--nfd-onboarding-white);
+			color: var(--nfd-onboarding-primary);
 		}
 	}
 }
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
index afc73097b..72a0c9a8b 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/index.js
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from '@wordpress/element';
 import { store as nfdOnboardingStore } from '../../../store';
 
-const SiteGenLoader = () => {
+const SiteGenLoader = ( { autoNavigate = false } ) => {
 	let statusIdx = 0;
 	const content = getContents();
 	const navigate = useNavigate();
@@ -36,7 +36,7 @@ const SiteGenLoader = () => {
 
 	useEffect( () => {
 		if ( percentage === 100 ) {
-			if ( nextStep ) {
+			if ( nextStep && autoNavigate ) {
 				navigate( nextStep.path );
 			}
 		}
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index 7f6adf9b4..2b8da098c 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: #1e2327;
+$background-color: var(--nfd-onboarding-admin-bar-background);
 
 .nfd-sg-loader {
 
@@ -15,7 +15,7 @@ $background-color: #1e2327;
 		font-size: 18px;
 		text-align: center;
 		letter-spacing: 1.5px;
-		color: var(--nfd-onboarding-white);
+		color: var(--nfd-onboarding-primary);
 	}
 
 	&__progress {
@@ -59,7 +59,7 @@ $background-color: #1e2327;
 		font-size: 14px;
 		text-align: center;
 		letter-spacing: 1.3px;
-		color: var(--nfd-onboarding-white);
+		color: var(--nfd-onboarding-primary);
 		animation: fadeInFast 3s ease-out infinite;
 	}
 }
diff --git a/src/OnboardingSPA/components/TextInput/contents.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js
similarity index 100%
rename from src/OnboardingSPA/components/TextInput/contents.js
rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/contents.js
diff --git a/src/OnboardingSPA/components/TextInput/index.js b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js
similarity index 91%
rename from src/OnboardingSPA/components/TextInput/index.js
rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js
index 6859ff853..ad2ae1dea 100644
--- a/src/OnboardingSPA/components/TextInput/index.js
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/index.js
@@ -1,7 +1,7 @@
 import { useRef, useEffect, useState, memo } from '@wordpress/element';
 import getContents from './contents';
 
-const TextInput = ( {
+const TextInputSiteBuild = ( {
 	title,
 	hint,
 	placeholder,
@@ -58,5 +58,5 @@ const TextInput = ( {
 	);
 };
 
-const TextInputMemo = memo( TextInput );
-export default TextInputMemo;
+const TextInputSiteBuildMemo = memo( TextInputSiteBuild );
+export default TextInputSiteBuildMemo;
diff --git a/src/OnboardingSPA/components/TextInput/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss
similarity index 100%
rename from src/OnboardingSPA/components/TextInput/stylesheet.scss
rename to src/OnboardingSPA/components/TextInput/TextInputSiteBuild/stylesheet.scss
diff --git a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
index d34785317..c13ecdb00 100644
--- a/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
+++ b/src/OnboardingSPA/components/TextInput/TextInputSiteGen/stylesheet.scss
@@ -1,4 +1,3 @@
-$border: #d6d6d6;
 $letter-spacing: 0.5px;
 $selected-detail: #1de082;
 
@@ -9,7 +8,7 @@ $selected-detail: #1de082;
 
 	&-box {
 		margin-bottom: 10px;
-		border-bottom: 2px solid $border;
+		border-bottom: 2px solid rgba(var(--nfd-onboarding-primary-rgb), 0.5);
 
 		&__field {
 			padding-top: 10px;
@@ -29,7 +28,7 @@ $selected-detail: #1de082;
 
 			&::placeholder {
 				font-weight: 100;
-				color: $border;
+				color: rgba(var(--nfd-onboarding-primary-rgb), 0.8);
 			}
 		}
 
diff --git a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
index cd49b12e8..7c085a4b0 100644
--- a/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
+++ b/src/OnboardingSPA/steps/BasicInfo/basicInfoForm.js
@@ -2,7 +2,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 import getContents from './contents';
-import TextInput from '../../components/TextInput';
+import TextInputSiteBuild from '../../components/TextInput/TextInputSiteBuild';
 import SkipButton from '../../components/SkipButton';
 import MiniPreview from '../../components/MiniPreview';
 import Animate from '../../components/Animate';
@@ -142,7 +142,7 @@ const BasicInfoForm = () => {
 			<div className={ 'basic-info' }>
 				<div className="basic-info-form">
 					<div className="basic-info-form__left">
-						<TextInput
+						<TextInputSiteBuild
 							title={ content.siteTitle.title }
 							hint={ content.siteTitle.hint }
 							placeholder={ content.siteTitle.placeholder }
@@ -152,7 +152,7 @@ const BasicInfoForm = () => {
 							textValueSetter={ setSiteTitle }
 						/>
 
-						<TextInput
+						<TextInputSiteBuild
 							title={ content.siteDesc.title }
 							hint={ content.siteDesc.hint }
 							placeholder={ content.siteDesc.placeholder }
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/index.js b/src/OnboardingSPA/steps/SiteGen/Building/index.js
index 1f3af5a96..91a1d5543 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/index.js
+++ b/src/OnboardingSPA/steps/SiteGen/Building/index.js
@@ -36,7 +36,7 @@ const SiteGenBuilding = () => {
 				</div>
 			</div>
 			<div className="site-gen__building_loader__overlay">
-				<SiteGenLoader />
+				<SiteGenLoader autoNavigate={ true } />
 			</div>
 		</CommonLayout>
 	);
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
index 337852584..10982d026 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -1,15 +1,22 @@
-.nfd-onboarding-step--site-gen__building {
-	margin: 20px;
-	padding: 20px;
-	position: relative;
-}
-
 @property --angle {
 	inherits: true;
 	syntax: "<angle>";
 	initial-value: 90deg;
 }
 
+@keyframes borderRotate {
+
+	100% {
+		--angle: 360deg;
+	}
+}
+
+.nfd-onboarding-step--site-gen__building {
+	margin: 20px;
+	padding: 20px;
+	position: relative;
+}
+
 .site-gen__building {
 
 	&_skimmer {
@@ -19,7 +26,7 @@
 			background: rgba(255, 255, 255, 0.05);
 			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 			border: 0.25px solid rgba(255, 255, 255, 0.26);
-			animation: borderRotate 2500ms infinite forwards;
+			animation: borderRotate 3500ms infinite forwards;
 			border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30;
 		}
 
@@ -58,10 +65,3 @@
 		transform: translate(-50%, -50%);
 	}
 }
-
-@keyframes borderRotate {
-
-	100% {
-		--angle: 360deg;
-	}
-}
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 3f3ff7a55..47ed8906d 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -295,13 +295,27 @@ body {
 		}
 	}
 
-	.nfd-onboarding-sitegen-dark {
-		--nfd-onboarding-admin-bar-background: #1d2327;
+	.nfd-onboarding-sitegen-light {
+		--nfd-onboarding-primary: #000;
+		--nfd-onboarding-primary-rgb: 0, 0, 0;
+		--nfd-onboarding-hover: #c3c4c7;
+		--nfd-onboarding-secondary: #fff;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-admin-bar-background: #fff;
+		--nfd-onboarding-progress-bar-fill: #0060f0;
+		--nfd-onboarding-progress-bar-background: #d5d5d5;
 		--nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
+	}
+
+	.nfd-onboarding-sitegen-dark {
 		--nfd-onboarding-primary: #fff;
+		--nfd-onboarding-primary-rgb: 255, 255, 255;
+		--nfd-onboarding-hover: #262c30;
 		--nfd-onboarding-secondary: #000;
-		--nfd-onboarding-progress-bar-background: #353a40;
+		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;
+		--nfd-onboarding-progress-bar-background: #353a40;
+		--nfd-onboarding-navigation-back-background: rgba(54, 62, 68, 0.35);
 	}
 }
diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss
index e40189907..5c5a32131 100644
--- a/src/OnboardingSPA/styles/app.scss
+++ b/src/OnboardingSPA/styles/app.scss
@@ -15,7 +15,7 @@
 @import "../components/Tooltip/stylesheet";
 @import "../components/ImageUploader/stylesheet";
 @import "../components/SocialMediaForm/stylesheet";
-@import "../components/TextInput/stylesheet";
+@import "../components/TextInput/TextInputSiteBuild/stylesheet";
 @import "../components/ExitToWordPress/stylesheet";
 @import "../components/Accordion/stylesheet";
 @import "../components/NewfoldLargeCard/stylesheet";

From 8d2cee4579f26de44a4af7b0e095ef78d9442794 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Fri, 17 Nov 2023 10:33:52 +0530
Subject: [PATCH 13/14] Fix CSS

---
 .../components/CardWithOptions/stylesheet.scss            | 2 +-
 .../components/Loaders/SiteGenLoader/stylesheet.scss      | 7 ++++++-
 src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss  | 8 ++++----
 src/OnboardingSPA/styles/_branding.scss                   | 4 ++++
 src/OnboardingSPA/styles/_interface.scss                  | 1 +
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index 878145ca3..30b1d2ffd 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -8,7 +8,7 @@ $background-color: var(--nfd-onboarding-admin-bar-background);
 	border-radius: 12px;
 	background-color: $background-color;
 	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
-	box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
+	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-primary-rgb), $alpha: 0.05);
 
 	&__title {
 		color: var(--nfd-onboarding-primary);
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index 2b8da098c..fb1c725c0 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -8,7 +8,12 @@ $background-color: var(--nfd-onboarding-admin-bar-background);
 	border-radius: 12px;
 	background-color: $background-color;
 	width: clamp(18.75rem, 22.6136rem + 5.6818vw, 31.25rem);
-	box-shadow: 3px 3px 5px rgba($color: var(--nfd-onboarding-black), $alpha: 0.2);
+	box-shadow: 3px 3px 5px rgba(var(--nfd-onboarding-black-rgb), $alpha: 0.05);
+
+	@media (max-width: #{ ($break-small) }) {
+		margin: 20px;
+		max-width: 80vw;
+	}
 
 	&__title {
 		line-height: 2;
diff --git a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
index 10982d026..325405a1c 100644
--- a/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
+++ b/src/OnboardingSPA/steps/SiteGen/Building/stylesheet.scss
@@ -23,11 +23,11 @@
 
 		&--main {
 			margin-bottom: 30px;
-			background: rgba(255, 255, 255, 0.05);
-			box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-			border: 0.25px solid rgba(255, 255, 255, 0.26);
+			background: rgba(var(--nfd-onboarding-primary-rgb), 0.05);
+			box-shadow: 0 4px 30px rgba(var(--nfd-onboarding-secondary-rgb), 0.1);
 			animation: borderRotate 3500ms infinite forwards;
-			border-image: conic-gradient(from var(--angle), rgba(255, 255, 255, 0.26) calc(var(--angle) + 0.5deg), rgba(168, 239, 255, 0.5) calc(var(--angle) + 1deg)) 30;
+			border: 0.25px solid rgba(var(--nfd-onboarding-secondary-rgb), 0.26);
+			border-image: conic-gradient(from var(--angle), rgba(var(--nfd-onboarding-secondary-rgb), 0.26) calc(var(--angle) + 0.5deg), rgba(var(--nfd-onboarding-shimmer-color), 0.5) calc(var(--angle) + 1deg)) 30;
 		}
 
 		&--header {
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 47ed8906d..a7346d818 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -300,7 +300,9 @@ body {
 		--nfd-onboarding-primary-rgb: 0, 0, 0;
 		--nfd-onboarding-hover: #c3c4c7;
 		--nfd-onboarding-secondary: #fff;
+		--nfd-onboarding-secondary-rgb: 255, 255, 255;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-shimmer-color: 0, 0, 0;
 		--nfd-onboarding-admin-bar-background: #fff;
 		--nfd-onboarding-progress-bar-fill: #0060f0;
 		--nfd-onboarding-progress-bar-background: #d5d5d5;
@@ -312,7 +314,9 @@ body {
 		--nfd-onboarding-primary-rgb: 255, 255, 255;
 		--nfd-onboarding-hover: #262c30;
 		--nfd-onboarding-secondary: #000;
+		--nfd-onboarding-secondary-rgb: 0, 0, 0;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-shimmer-color: 168, 239, 255;
 		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;
 		--nfd-onboarding-progress-bar-background: #353a40;
diff --git a/src/OnboardingSPA/styles/_interface.scss b/src/OnboardingSPA/styles/_interface.scss
index 75d7d1265..98b81f65e 100644
--- a/src/OnboardingSPA/styles/_interface.scss
+++ b/src/OnboardingSPA/styles/_interface.scss
@@ -25,6 +25,7 @@ body {
 	--nfd-onboarding-white: #fff;
 	--nfd-onboarding-white-rgb: 255, 255, 255;
 	--nfd-onboarding-black: #000;
+	--nfd-onboarding-black-rgb: 0, 0, 0;
 	--nfd-onboarding-header-base: var(--nfd-onboarding-light);
 	--nfd-onboarding-header-contrast: var(--nfd-onboarding-dark);
 	--nfd-onboarding-content-base: var(--nfd-onboarding-light);

From 857a0d05275395d74743c96a80b629c19e3b2ed3 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Sat, 18 Nov 2023 14:22:22 +0530
Subject: [PATCH 14/14] Fix CSS

---
 src/OnboardingSPA/components/CardWithOptions/stylesheet.scss  | 2 +-
 .../components/Loaders/SiteGenLoader/stylesheet.scss          | 2 +-
 src/OnboardingSPA/styles/_branding.scss                       | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
index 30b1d2ffd..3a1e8b2f9 100644
--- a/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
+++ b/src/OnboardingSPA/components/CardWithOptions/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: var(--nfd-onboarding-admin-bar-background);
+$background-color: var(--nfd-onboarding-card-background);
 
 .nfd-sg-card {
 
diff --git a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
index fb1c725c0..a32bacc27 100644
--- a/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
+++ b/src/OnboardingSPA/components/Loaders/SiteGenLoader/stylesheet.scss
@@ -1,4 +1,4 @@
-$background-color: var(--nfd-onboarding-admin-bar-background);
+$background-color: var(--nfd-onboarding-card-background);
 
 .nfd-sg-loader {
 
diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
index 882a70347..700b00494 100644
--- a/src/OnboardingSPA/styles/_branding.scss
+++ b/src/OnboardingSPA/styles/_branding.scss
@@ -303,7 +303,8 @@ body {
 		--nfd-onboarding-secondary-rgb: 255, 255, 255;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
 		--nfd-onboarding-shimmer-color: 0, 0, 0;
-		--nfd-onboarding-admin-bar-background: #fff;
+		--nfd-onboarding-card-background: #fff;
+		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;
 		--nfd-onboarding-progress-bar-background: #d5d5d5;
 		--nfd-onboarding-site-logo-on-drag: rgba(53, 59, 64, 0.3);
@@ -317,6 +318,7 @@ body {
 		--nfd-onboarding-secondary: #000;
 		--nfd-onboarding-secondary-rgb: 0, 0, 0;
 		--nfd-onboarding-admin-bar-color: #c3c4c7;
+		--nfd-onboarding-card-background: #1d2327;
 		--nfd-onboarding-shimmer-color: 168, 239, 255;
 		--nfd-onboarding-admin-bar-background: #1d2327;
 		--nfd-onboarding-progress-bar-fill: #0060f0;