initial commit

src/OnboardingSPA/steps/SiteGen/SocialMedia/contents.js

@@ -0,0 +1,24 @@
+import { __ } from '@wordpress/i18n';
+
+const getContents = () => {
+	return {
+		heading: __(
+			'Do you want to include any content from Facebook?',
+			'wp-module-onboarding'
+		),
+		facebookTitle: __(
+			'Connect a Facebook Account',
+			'wp-module-onboarding'
+		),
+		facebookdesc: __(
+			'By connecting a Facebook profile, we can fetch relevant data to increase the accuracy of your Al generated site.',
+			'wp-module-onboarding'
+		),
+		facebookbutton: __( 'Connect Facebook', 'wp-module-onboarding' ),
+		buttons: {
+			skip: __( 'Skip for now', 'wp-module-onboarding' ),
+		},
+	};
+};
+
+export default getContents;

src/OnboardingSPA/steps/SiteGen/SocialMedia/index.js

@@ -5,8 +5,10 @@ import { useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as nfdOnboardingStore } from '../../../store';
 import { HEADER_SITEGEN } from '../../../../constants';
-
-import SiteGenPlaceholder from '../../../components/SiteGenPlaceholder';
+import getContents from './contents';
+import ButtonNext from '../../../components/Button/ButtonNext';
+import SkipButton from '../../../components/SkipButton';
+import ImageUploaderWithText from '../../../components/ImageUploader/components/ImageUploaderWithText';
 
 const SiteGenSiteSocialMedia = () => {
 	const {
@@ -22,12 +24,40 @@ const SiteGenSiteSocialMedia = () => {
 		setHeaderActiveView( HEADER_SITEGEN );
 		setDrawerActiveView( false );
 	} );
+
+	const content = getContents();
 	return (
 		<CommonLayout
 			isCentered
 			className="nfd-onboarding-step--site-gen__social-media"
 		>
-			<SiteGenPlaceholder heading={ 'Social Media' } />
+			<div className="nfd-onboarding-step--site-gen__social-media__container">
+				<div className="nfd-onboarding-step--site-gen__social-media__container__heading">
+					<div className="nfd-onboarding-step--site-gen__social-media__container__heading__animation"></div>
+					<p className="nfd-onboarding-step--site-gen__social-media__container__heading__text">
+						{ content.heading }
+					</p>
+				</div>
+				<div className="nfd-onboarding-step--site-gen__social-media__contain ">
+					<div className="nfd-onboarding-step--site-gen__social-media__contain__containleft ">
+						{ content.facebookTitle }
+						<p>{ content.facebookdesc }</p>
+					</div>
+					<div className="nfd-onboarding-step--site-gen__social-media__contain__containright ">
+						<button className="nfd-onboarding-step--site-gen__social-media__contain__containright__button ">
+						<i></i>{ content.facebookbutton }
+						</button>
+					</div>
+				</div>
+				<div className="nfd-onboarding-step--site-gen__social-media__container__buttons">
+					<SkipButton
+						callback={ () => resetSiteLogo() }
+						className="nfd-onboarding-step--site-gen__social-media__container__buttons__skip"
+						text={ content.buttons.skip }
+					/>
+					<ButtonNext disabled={ true } />
+				</div>
+			</div>
 		</CommonLayout>
 	);
 };

src/OnboardingSPA/steps/SiteGen/SocialMedia/stylesheet.scss

@@ -0,0 +1,104 @@
+.nfd-onboarding-step {
+
+	&--site-gen {
+
+		&__social-media {
+
+			&__container {
+
+				&__heading {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: center;
+
+					&__animation {
+						background-image: var(--sitegen-ai-animation);
+						background-repeat: no-repeat;
+						background-size: contain;
+						width: 83px;
+						height: 72px;
+					}
+
+					&__text {
+						color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
+						margin-left: 15px;
+						white-space: normal;
+						line-height: 1;
+					}
+				}
+
+				&__buttons {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					justify-content: flex-end;
+					padding: 16px;
+
+					&__skip {
+						font-size: clamp(0.5rem, 0.4091rem + 0.4545vw, 1.5rem);
+						font-style: normal;
+						font-weight: 510;
+						margin-right: 24px;
+
+						&:hover {
+							text-decoration: underline;
+							color: var(--nfd-onboarding-primary);
+						}
+					}
+				}
+
+			}
+
+			&__contain {
+				width: 600px;
+				margin: 16px;
+				border: 1.25px dashed var(--nfd-onboarding-site-logo-border);
+				border-radius: 8px;
+				padding: 24px;
+				display: flex;
+				flex-direction: row;
+				justify-content: left;
+				align-items: left;
+
+				&__containleft {
+					width: 400px;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					color: var(--nfd-onboarding-primary);
+						font-size: clamp(0.875rem, 0.7727rem + 0.5114vw, 2rem);
+						margin-left: 15px;
+						white-space: normal;
+						line-height: 1;
+				}
+
+				&__containright {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+
+					&__button {
+						display: inline-flex;
+						align-items: center;
+						padding: 10px 15px;
+						background-color: #1877f2;
+						color: #fff;
+						border: none;
+						border-radius: 5px;
+						cursor: pointer;
+					}
+
+					&__button i {
+						margin-right: 8px;
+						background-image: var(--facebook-icon);
+						width: 25px;
+						height: 25px;
+					}
+				}
+			}
+		}
+	}
+}

src/OnboardingSPA/styles/app.scss

@@ -66,6 +66,7 @@
 @import "../steps/SiteFeatures/stylesheet";
 @import "../steps/TheFork/stylesheet";
 @import "../steps/SiteGen/SiteLogo/stylesheet";
+@import "../steps/SiteGen/SocialMedia/stylesheet.scss";
 
 .nfd-onboarding-container {
 	display: flex;