Basic layout

Automattic · Jun 25, 2024 · aceca11 · aceca11
1 parent ae39e5e
commit aceca11
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 28 deletions.
diff --git a/client/my-sites/patterns/components/readymade-template-details/index.tsx b/client/my-sites/patterns/components/readymade-template-details/index.tsx
@@ -1,10 +1,20 @@
+import { addLocaleToPathLocaleInFront } from '@automattic/i18n-utils';
+import { Icon, arrowLeft } from '@wordpress/icons';
+import { useTranslate } from 'i18n-calypso';
+import { useEffect } from 'react';
 import { PatternsGetStarted } from 'calypso/my-sites/patterns/components/get-started';
 import { useReadymadeTemplates } from 'calypso/my-sites/patterns/hooks/use-readymade-templates';
 import { ReadymadeTemplateDetailsFC } from 'calypso/my-sites/patterns/types';
 
 import './style.scss';
 
 export const ReadymadeTemplateDetails: ReadymadeTemplateDetailsFC = ( { id } ) => {
+	useEffect( () => {
+		window.scroll( 0, 0 );
+	}, [] );
+
+	const translate = useTranslate();
+
 	const { data: readymadeTemplates = [] } = useReadymadeTemplates();
 	if ( ! readymadeTemplates.length ) {
 		return null;
@@ -17,10 +27,31 @@ export const ReadymadeTemplateDetails: ReadymadeTemplateDetailsFC = ( { id } ) =
 
 	return (
 		<>
-			<div className="readymade-template-details">
-				<button>Back to patterns</button>
-				<h1>{ readymadeTemplate.title }</h1>
-			</div>
+			<section className="readymade-template-details-wrapper">
+				<div className="readymade-template-details-section">
+					<a
+						href={ addLocaleToPathLocaleInFront( '/patterns' ) }
+						className="readymade-template-details-back"
+					>
+						<Icon icon={ arrowLeft } size={ 24 } /> { translate( 'Back to patterns' ) }
+					</a>
+					<div className="readymade-template-details">
+						<div className="readymade-template-details-content">
+							<div className="readymade-template-details-header">
+								<h1 className="readymade-template-details-title">{ readymadeTemplate.title }</h1>
+							</div>
+							<div
+								className="readymade-template-details-description"
+								// eslint-disable-next-line react/no-danger
+								dangerouslySetInnerHTML={ { __html: readymadeTemplate.description } }
+							/>
+						</div>
+						<div className="readymade-template-details-preview">
+							<img src={ readymadeTemplate.screenshot } alt="" />
+						</div>
+					</div>
+				</div>
+			</section>
 			<PatternsGetStarted />
 		</>
 	);

diff --git a/client/my-sites/patterns/components/readymade-template-details/style.scss b/client/my-sites/patterns/components/readymade-template-details/style.scss
@@ -1,8 +1,62 @@
+@import "@automattic/typography/styles/variables";
 @import "@wordpress/base-styles/breakpoints";
 @import "calypso/my-sites/patterns/mixins";
 
-.readymade-template-details {
-	@include patterns-page-width;
-	background: #1d2327;
+.readymade-template-details-wrapper {
+	background: var(--studio-gray-90);
 	color: var(--studio-white);
+	padding-top: 16px;
+	padding-bottom: 48px;
+}
+
+.readymade-template-details-section {
+	@include patterns-page-width;
+}
+
+a.readymade-template-details-back {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
+	line-height: 26px;
+	color: var(--studio-gray-20);
+
+	svg {
+		fill: var(--studio-gray-20);
+	}
+
+	&:hover {
+		color: var(--studio-gray-10);
+
+		svg {
+			fill: var(--studio-gray-10);
+		}
+	}
+}
+
+.readymade-template-details {
+	padding-top: 40px;
+	display: flex;
+	gap: 64px;
+}
+
+.readymade-template-details-content {
+	width: 40%;
+}
+
+.readymade-template-details-preview {
+	width: 60%;
+}
+
+.readymade-template-details-header {
+	margin-bottom: 40px;
+	display: flex;
+}
+
+.readymade-template-details-title {
+	font-family: $font-recoleta;
+	font-size: 2.5rem; /* stylelint-disable-line scales/font-sizes */
+	line-height: 1.2;
+	letter-spacing: 0.185px;
+	margin-bottom: 0;
 }
diff --git a/client/my-sites/patterns/components/readymade-templates/index.tsx b/client/my-sites/patterns/components/readymade-templates/index.tsx
@@ -13,24 +13,30 @@ export const ReadymadeTemplates = () => {
 	}
 
 	return (
-		<PatternsSection
-			bodyFullWidth
-			description={ translate(
-				'Explore a collection of beautiful site layouts made with our patterns.'
-			) }
-			theme="dark"
-			title={ translate( 'Ready-to-use site layouts' ) }
-		>
-			<div className="readymade-templates">
-				{ readymadeTemplates.map( ( readymadeTemplate ) => (
-					<div className="readymade-template" key={ readymadeTemplate.template_id }>
-						<div className="readymade-template__content">
-							<img src={ readymadeTemplate.screenshot } alt="" />
-						</div>
-						<div className="readymade-template__title">{ readymadeTemplate.title }</div>
-					</div>
-				) ) }
-			</div>
-		</PatternsSection>
+		<div id="site-layouts">
+			<PatternsSection
+				bodyFullWidth
+				description={ translate(
+					'Explore a collection of beautiful site layouts made with our patterns.'
+				) }
+				theme="dark"
+				title={ translate( 'Ready-to-use site layouts' ) }
+			>
+				<div className="readymade-templates">
+					{ readymadeTemplates.map( ( readymadeTemplate ) => (
+						<a
+							href={ `/patterns/site-layouts/${ readymadeTemplate.template_id } ` }
+							className="readymade-template"
+							key={ readymadeTemplate.template_id }
+						>
+							<div className="readymade-template__content">
+								<img src={ readymadeTemplate.screenshot } alt="" />
+							</div>
+							<div className="readymade-template__title">{ readymadeTemplate.title }</div>
+						</a>
+					) ) }
+				</div>
+			</PatternsSection>
+		</div>
 	);
 };
diff --git a/client/my-sites/patterns/components/readymade-templates/style.scss b/client/my-sites/patterns/components/readymade-templates/style.scss
@@ -19,6 +19,10 @@
 	}
 }
 
+a.readymade-template {
+	color: var(--studio-white);
+}
+
 .readymade-template__content {
 	--readymade-template-width: 390px;
 	width: var(--readymade-template-width);

diff --git a/client/my-sites/patterns/index.node.tsx b/client/my-sites/patterns/index.node.tsx
@@ -8,7 +8,7 @@ import {
 import { CategoryGalleryServer } from 'calypso/my-sites/patterns/components/category-gallery/server';
 import { PatternGalleryServer } from 'calypso/my-sites/patterns/components/pattern-gallery/server';
 import { PatternLibrary } from 'calypso/my-sites/patterns/components/pattern-library';
-import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-templates/details';
+import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-template-details';
 import { PatternsContext } from 'calypso/my-sites/patterns/context';
 import { getPatternCategoriesQueryOptions } from 'calypso/my-sites/patterns/hooks/use-pattern-categories';
 import { getPatternsQueryOptions } from 'calypso/my-sites/patterns/hooks/use-patterns';

diff --git a/client/my-sites/patterns/index.web.tsx b/client/my-sites/patterns/index.web.tsx
@@ -9,7 +9,7 @@ import { CategoryGalleryClient } from 'calypso/my-sites/patterns/components/cate
 import { PatternsCategoryNotFound } from 'calypso/my-sites/patterns/components/category-not-found';
 import { PatternGalleryClient } from 'calypso/my-sites/patterns/components/pattern-gallery/client';
 import { PatternLibrary } from 'calypso/my-sites/patterns/components/pattern-library';
-import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-templates/details';
+import { ReadymadeTemplateDetails } from 'calypso/my-sites/patterns/components/readymade-template-details';
 import { PatternsContext } from 'calypso/my-sites/patterns/context';
 import { getPatternCategoriesQueryOptions } from 'calypso/my-sites/patterns/hooks/use-pattern-categories';
 import { extractPatternIdFromHash } from 'calypso/my-sites/patterns/lib/extract-pattern-id-from-hash';