Skip to content

Commit

Permalink
add case study page
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanjermey
seanjermey committed Oct 16, 2023
1 parent 0448708 commit aa21751
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 10 deletions.
172 changes: 172 additions & 0 deletions ...ges/recruitment-solutions/case-studies/[url_slug]/__components/CaseStudyContent/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
import PropTypes from "prop-types";
import clsx from "classnames";
import { Col, Container, Row } from "react-bootstrap";
import { BlockQuoteCard, DynamicText } from "@/ui";

export default function CaseStudyContent({
className,
client,
contact,
business_type,
staffing_type,
geographical_footprint,
number_of_employees,
turnover,
company_background,
key_features,
challenge,
solution,
journey,
result,
testimonial,
url_slug,
}) {
return (
<div className={clsx(className)}>
<div className="py-5">
<Container>
<Row>
<Col xs={12} md={4}>
<aside className="bg-primary text-white p-4">
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.client.title`}>Client</DynamicText>
</dt>
<dd>{client}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.contact.title`}>
Contact
</DynamicText>
</dt>
<dd>{contact}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.business_type.title`}>
Business type
</DynamicText>
</dt>
<dd>{business_type}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.staffing_type.title`}>
Staffing type
</DynamicText>
</dt>
<dd>{staffing_type}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.geographical_footprint.title`}>
Geographical footprint
</DynamicText>
</dt>
<dd>{geographical_footprint}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.number_of_employees.title`}>
Number of employees
</DynamicText>
</dt>
<dd>{number_of_employees}</dd>
</dl>
<dl>
<dt>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.turnover.title`}>
Turnover
</DynamicText>
</dt>
<dd>{turnover}</dd>
</dl>
</aside>
</Col>
<Col xs={12} md={8}>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.background.title`} tag="h2">
Company Background
</DynamicText>
<div dangerouslySetInnerHTML={{ __html: company_background }} />
<aside className="bg-light text-tertiary p-4">
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.features.title`} tag="h3">
Key Features
</DynamicText>
<ul>
{key_features.split(",").map((i) => (
<li>{i.trim()}</li>
))}
</ul>
</aside>
</Col>
</Row>
</Container>
</div>
<div className="bg-light py-5">
<Container>
<Row>
<Col xs={12} md={6}>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.challenge.title`} tag="h2">
The Challenge
</DynamicText>
<div dangerouslySetInnerHTML={{ __html: challenge }} />
</Col>
<Col xs={12} md={6}></Col>
</Row>
</Container>
</div>
<div className="py-5">
<Container>
<Row>
<Col xs={12} md={6}></Col>
<Col xs={12} md={6}>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.solution.title`} tag="h2">
The Solution
</DynamicText>
<div dangerouslySetInnerHTML={{ __html: solution }} />
</Col>
</Row>
</Container>
</div>
<div className="bg-primary text-white py-5">
<Container>
<Row>
<Col xs={12} md={6}>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.journey.title`} tag="h2">
The Journey
</DynamicText>
<div dangerouslySetInnerHTML={{ __html: journey }} />
</Col>
<Col xs={12} md={6}></Col>
</Row>
</Container>
</div>
<div className="bg-tertiary text-white py-5">
<Container>
<Row>
<Col xs={12} md={{ span: 6, offset: 3 }}>
<DynamicText path={`page.${url_slug}.component.CaseStudyContent.result.title`} tag="h2">
The Result
</DynamicText>
<div dangerouslySetInnerHTML={{ __html: result }} />
</Col>
</Row>
</Container>
</div>
<div className="py-5">
<Container>
<BlockQuoteCard quote={testimonial} />
</Container>
</div>
</div>
);
}

CaseStudyContent.defaultProps = {
className: "py-5",
};

CaseStudyContent.propTypes = {
className: PropTypes.string,
};
3 changes: 3 additions & 0 deletions src/pages/recruitment-solutions/case-studies/[url_slug]/__components/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { lazy } from "react";

export const CaseStudyContent = lazy(() => import("./CaseStudyContent"));
5 changes: 4 additions & 1 deletion src/pages/recruitment-solutions/case-studies/[url_slug]/index.page.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { Content } from "@/ui";
import { getRoute } from "@/getters/getRoute";
import { casestudyHelper } from "@/helpers/casestudyHelper";
import * as additionalComponents from "./__components";

export default function CaseStudyPage({ content }) {
return (
<>
<Content items={content} />
<Content items={content} additionalComponents={additionalComponents} />
</>
);
}
Expand Down Expand Up @@ -34,13 +35,15 @@ export async function getStaticProps({ params: { url_slug } }) {
path: `page.caseStudy.${url_slug}.component.Header.title`,
placeholder: casestudy.title,
},
img: casestudy.cover_image ?? null,
back: {
path: "page.caseStudy.component.Header.back",
placeholder: `Back to Case Studies`,
href: getRoute("caseStudies"),
},
},
},
{ component: "CaseStudyContent", props: { ...casestudy } },
],
},
};
Expand Down
17 changes: 8 additions & 9 deletions src/ui/BlockQuoteCard/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ export default function BlockQuoteCard({ className, quote, author }) {
return (
<blockquote className={clsx(className, classes.card, "p-4")}>
<section dangerouslySetInnerHTML={{ __html: quote }} />
<cite>
<b dangerouslySetInnerHTML={{ __html: author.name }} />
<br />
<span dangerouslySetInnerHTML={{ __html: author.position }} />
</cite>
{author && (
<cite>
<b dangerouslySetInnerHTML={{ __html: author.name }} />
<br />
<span dangerouslySetInnerHTML={{ __html: author.position }} />
</cite>
)}
<svg width="33" height="28" viewBox="0 0 33 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5 27.9717L0.911547 0.971677L32.0885 0.971679L16.5 27.9717Z" />
</svg>
Expand All @@ -21,10 +23,7 @@ export default function BlockQuoteCard({ className, quote, author }) {
BlockQuoteCard.defaultProps = {
className: "",
quote: "",
author: {
name: "",
position: "",
},
author: null,
};

BlockQuoteCard.propTypes = {
Expand Down

0 comments on commit aa21751

Please sign in to comment.