diff --git a/public/_assets/happy-smiley-face.svg b/public/_assets/happy-smiley-face.svg new file mode 100644 index 000000000..7cd0708ef --- /dev/null +++ b/public/_assets/happy-smiley-face.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/sections/openness/Openness.tsx b/src/components/sections/openness/Openness.tsx new file mode 100644 index 000000000..54cec6ad8 --- /dev/null +++ b/src/components/sections/openness/Openness.tsx @@ -0,0 +1,26 @@ +import { SanityImage } from "src/components/image/SanityImage"; +import SmileyBox from "src/components/smileyBox/SmileyBox"; +import Text from "src/components/text/Text"; +import { OpennessSection } from "studio/lib/interfaces/pages"; + +import styles from "./openness.module.css"; + +export interface OpennessProps { + section: OpennessSection; +} + +export default function Openness({ section }: OpennessProps) { + return ( +
+ + {section.basicTitle} + +
+
+ +
+ +
+
+ ); +} diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css new file mode 100644 index 000000000..aac10389e --- /dev/null +++ b/src/components/sections/openness/openness.module.css @@ -0,0 +1,55 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + max-width: var(--max-content-width-large); + margin: 5rem auto; + gap: 2rem; + color: var(--text-primary); +} + +.title { + width: 40rem; + color: var(--text-primary); + + @media (max-width: 834px) { + width: 25.875rem; + } + + @media (max-width: 425px) { + width: 19.4375rem; + } +} + +.content { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0.25rem; + gap: 1rem; + + @media (max-width: 768px) { + display: flex; + flex-direction: column; + padding: 1.5rem; + } +} + +.image { + height: 30rem; + + & img { + border-radius: 0.375rem 6rem 0.375rem 0.375rem; + } + + @media (max-width: 834px) { + height: 26.25rem; + align-self: stretch; + } + + @media (max-width: 425px) { + align-self: stretch; + height: 22.375; + } +} diff --git a/src/components/smileyBox/SmileyBox.tsx b/src/components/smileyBox/SmileyBox.tsx new file mode 100644 index 000000000..a2ae212a8 --- /dev/null +++ b/src/components/smileyBox/SmileyBox.tsx @@ -0,0 +1,19 @@ +import Text from "src/components/text/Text"; + +import styles from "./smileyBox.module.css"; + +type SmileyBoxProps = { + background?: "dark" | "light"; + description: string; +}; + +export default function SmileyBox({ description }: SmileyBoxProps) { + return ( +
+
+
+ {description} +
+
+ ); +} diff --git a/src/components/smileyBox/smileyBox.module.css b/src/components/smileyBox/smileyBox.module.css new file mode 100644 index 000000000..13b9723c7 --- /dev/null +++ b/src/components/smileyBox/smileyBox.module.css @@ -0,0 +1,48 @@ +.wrapper { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + height: 30rem; + min-width: 19.75rem; + padding: 2.25rem; + border-radius: 6rem 6rem 0.375rem 0.375rem; + background-color: #dafbdc; + + @media (max-width: 834px) { + align-self: stretch; + height: 26.25rem; + } + + @media (max-width: 425px) { + align-self: stretch; + height: 26.25rem; + min-width: 19.4375rem; + } +} + +.smiley { + &::before { + content: ""; + display: block; + width: 4.86119rem; + height: 4.86119rem; + -webkit-mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + -webkit-mask-size: cover; + mask: url("/_assets/happy-smiley-face.svg") no-repeat center; + mask-size: cover; + background-color: var(--text-primary); + } +} + +.description { + align-self: stretch; + + @media (max-width: 834px) { + max-width: 27.1875rem; + } + + @media (max-width: 425px) { + max-width: 19.4375rem; + } +} diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index e7918fc16..7ba5d73d5 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -22,6 +22,7 @@ import ImageSectionComponentPreview from "src/components/sections/imageSection/I import Jobs from "src/components/sections/jobs/Jobs"; import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad"; import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview"; +import Openness from "src/components/sections/openness/Openness"; import { Testimonials } from "src/components/sections/testimonials/Testimonials"; import TestimonialsPreview from "src/components/sections/testimonials/TestimonialsPreview"; import { Locale } from "src/i18n/routing"; @@ -289,6 +290,8 @@ const SectionRenderer = ({ return ; case "employeeHighlight": return ; + case "opennessSection": + return ; default: return null; } diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 8560b5035..7fe2dbdca 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -157,6 +157,14 @@ export interface EmployeeHighlightSection { employeePhoto: IImage; } +export interface OpennessSection { + _type: "opennessSection"; + _key: string; + basicTitle: string; + image: IImage; + description: string; +} + export type Section = | HeroSection | LogoSaladSection @@ -173,7 +181,8 @@ export type Section = | EmployeesSection | EmployeeHighlightSection | CompensationCalculatorSection - | JobsSection; + | JobsSection + | OpennessSection; export interface PageBuilder { _createdAt: string; diff --git a/studio/lib/queries/pages.ts b/studio/lib/queries/pages.ts index d0db592f2..831b8d651 100644 --- a/studio/lib/queries/pages.ts +++ b/studio/lib/queries/pages.ts @@ -100,6 +100,10 @@ const SECTIONS_FRAGMENT = groq` }, _type == "customerCasesEntry" => { "basicTitle":${translatedFieldFragment("basicTitle")}, + }, + _type == "opennessSection" => { + "basicTitle": ${translatedFieldFragment("basicTitle")}, + "description": ${translatedFieldFragment("description")}, } } `; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index 76ebecc45..a80429aea 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -13,6 +13,7 @@ import imageSection from "studio/schemas/objects/sections/image"; import imageSplitSection from "studio/schemas/objects/sections/imagesplit"; import { jobs } from "studio/schemas/objects/sections/jobs"; import logoSalad from "studio/schemas/objects/sections/logoSalad"; +import { opennessSection } from "studio/schemas/objects/sections/openness"; import seo from "studio/schemas/objects/seo"; import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { firstTranslation } from "studio/utils/i18n"; @@ -57,6 +58,7 @@ const pageBuilder = defineType({ jobs, employeeHighlightSection, compensationCalculator, + opennessSection, ], }), ], diff --git a/studio/schemas/objects/sections/openness.ts b/studio/schemas/objects/sections/openness.ts new file mode 100644 index 000000000..937f3423c --- /dev/null +++ b/studio/schemas/objects/sections/openness.ts @@ -0,0 +1,45 @@ +import { defineField } from "sanity"; + +import { titleID } from "studio/schemas/fields/text"; +export const opennessID = "opennessSection"; + +export const opennessSection = defineField({ + name: opennessID, + title: "Openness", + type: "object", + fields: [ + { + name: titleID.basic, + title: "Title", + description: + "Enter the primary title that will be displayed at the top of the section.", + type: "internationalizedArrayString", + validation: (rule) => rule.required(), + }, + { + name: "image", + type: "image", + title: "Image", + description: "An image of the openness", + options: { + hotspot: true, + }, + validation: (rule) => rule.required(), + }, + { + name: "description", + title: "Description", + description: + "Enter the description that will be displayed in the smiley block.", + type: "internationalizedArrayString", + validation: (rule) => rule.required(), + }, + ], + preview: { + prepare() { + return { + title: "Openness Section", + }; + }, + }, +});