diff --git a/public/images/newsroom/play.png b/public/images/newsroom/play.png new file mode 100644 index 0000000..b907edc Binary files /dev/null and b/public/images/newsroom/play.png differ diff --git a/public/images/newsroom/play.svg b/public/images/newsroom/play.svg new file mode 100644 index 0000000..5de4bab --- /dev/null +++ b/public/images/newsroom/play.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/images/newsroom/prev01.jpg b/public/images/newsroom/prev01.jpg new file mode 100644 index 0000000..edad5f7 Binary files /dev/null and b/public/images/newsroom/prev01.jpg differ diff --git a/public/images/newsroom/prev02.jpg b/public/images/newsroom/prev02.jpg new file mode 100644 index 0000000..219561a Binary files /dev/null and b/public/images/newsroom/prev02.jpg differ diff --git a/public/images/newsroom/prev03.jpg b/public/images/newsroom/prev03.jpg new file mode 100644 index 0000000..2cdb90c Binary files /dev/null and b/public/images/newsroom/prev03.jpg differ diff --git a/public/images/newsroom/prev04.jpg b/public/images/newsroom/prev04.jpg new file mode 100644 index 0000000..365b138 Binary files /dev/null and b/public/images/newsroom/prev04.jpg differ diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss index c5fe2a3..a7f79f6 100644 --- a/src/components/common/card/card.module.scss +++ b/src/components/common/card/card.module.scss @@ -183,7 +183,7 @@ gap: tovw(30px, 'default', 25px); &.is_news { - gap: tovw(70px, 'default', 40px); + gap: tovw(60px, 'default', 30px); } } diff --git a/src/components/common/card/index.tsx b/src/components/common/card/index.tsx index 4e39186..cd6b5e2 100644 --- a/src/components/common/card/index.tsx +++ b/src/components/common/card/index.tsx @@ -17,9 +17,10 @@ interface CardProps { className?: string data?: any isNews?: boolean + reduced?: boolean } -const Card = ({ className, data, isNews = false }: CardProps) => { +const Card = ({ className, data, isNews = false, reduced }: CardProps) => { const [eventDate, setEventDate] = useState() const [eventTime, setEventTime] = useState() @@ -77,7 +78,7 @@ const Card = ({ className, data, isNews = false }: CardProps) => { {isNews ? data?.title : data?.eventTitle} -

{isNews ? getDescription(data) : data?.eventDesc}

+ {!reduced &&

{isNews ? getDescription(data) : data?.eventDesc}

} {isNews ? 'READ ARTICLE' : 'LEARN MORE'} diff --git a/src/components/sections/about/related/index.tsx b/src/components/sections/about/related/index.tsx index 29db7f5..84c439e 100644 --- a/src/components/sections/about/related/index.tsx +++ b/src/components/sections/about/related/index.tsx @@ -14,21 +14,23 @@ import s from './related.module.scss' // TODO export interface Props { isInPost?: boolean + isFeatured?: boolean data: any } -const Related = ({ data, isInPost }: Props) => { +const Related = ({ data, isInPost, isFeatured }: Props) => { const [sliderRef] = useKeenSlider({ initial: 0, loop: true, mode: 'free-snap', breakpoints: { - '(min-width: 1141px)': { + '(min-width: 901px)': { slides: { perView: 3, spacing: 35 }, loop: false }, - '(max-width: 1140px)': { - slides: { perView: 2.9, spacing: 22 } + '(max-width: 1300px)': { + slides: { perView: 3, spacing: 15 }, + loop: false }, '(max-width: 900px)': { slides: { perView: 1.12, spacing: 12 } @@ -40,16 +42,25 @@ const Related = ({ data, isInPost }: Props) => {
- {isInPost ? 'Related articles' : 'Learn More'} + {isInPost && !isFeatured && 'Related articles'} + {isFeatured && !isInPost && 'Featured articles'} + {!isFeatured && !isInPost && 'Learn more'}
{data.map((item: any, i: Key) => ( - + ))}
+ {isFeatured &&
}
) } diff --git a/src/components/sections/about/related/related.module.scss b/src/components/sections/about/related/related.module.scss index 42a40bf..5b7d8c1 100644 --- a/src/components/sections/about/related/related.module.scss +++ b/src/components/sections/about/related/related.module.scss @@ -20,7 +20,7 @@ margin-left: auto; width: calc(100% - tovw(205px, 'default', 16px)); - @media screen and (min-width: 1141px) { + @media screen and (min-width: 901px) { margin: 0 auto; } } @@ -40,7 +40,7 @@ margin-bottom: tovw(90px, 'default', 64px); &.altheader { - @media screen and (min-width: 1141px) { + @media screen and (min-width: 901px) { place-content: center; } } @@ -55,30 +55,6 @@ font-family: var(--font-tt-hoves), sans-serif; font-size: tovw(24px, 'default', 18px); } - - .gradient { - @include respond-to('mobile') { - display: none; - } - - position: absolute; - right: 0; - left: 0; - opacity: 0.4; - z-index: -1; - margin-left: 0; - background: linear-gradient( - 180deg, - rgb(229 229 229 / 0) 0%, - rgb(241 241 241 / 0.4) 48.91%, - rgb(241 241 241 / 0) 89.23% - ); - width: 100%; - height: tovw(500px, 'default', 250px); - content: ''; - pointer-events: none; - user-select: none; - } } .events { @@ -88,7 +64,7 @@ padding-left: tovw(100px); - @media screen and (min-width: 1141px) { + @media screen and (min-width: 901px) { margin: 0 auto; padding: 0; width: 100%; @@ -119,7 +95,7 @@ height: 100%; content: ''; - @media screen and (min-width: 1141px) { + @media screen and (min-width: 900px) { display: none; } } @@ -135,4 +111,29 @@ z-index: 5; } } + + .gradient { + @include respond-to('mobile') { + display: none; + } + + position: absolute; + right: 0; + bottom: tovw(80px, 'default', 80px); + left: 0; + margin-left: 0; + background: linear-gradient( + 180deg, + rgb(229 229 229 / 0) 0%, + rgb(241 241 241 / 0.5) 48.91%, + rgb(241 241 241 / 0) 89.23% + ); + opacity: 0.4; + width: 100%; + height: tovw(960px, 'default', 750px); + content: ''; + pointer-events: none; + user-select: none; + z-index: -1; + } } diff --git a/src/components/sections/newsroom/hero/hero.module.scss b/src/components/sections/newsroom/hero/hero.module.scss new file mode 100644 index 0000000..64a3190 --- /dev/null +++ b/src/components/sections/newsroom/hero/hero.module.scss @@ -0,0 +1,176 @@ +@import '~/css/helpers'; + +.section { + @include respond-to('mobile') { + margin-bottom: tovw(88px, 'mobile'); + padding: 0; + width: 100vw; + justify-content: flex-start; + } + + display: flex; + flex-direction: column; + justify-content: center; + padding: tovw(100px, 'default', 50px) 0; + max-width: 100%; + min-height: calc(var(--vh) * 100); + + .container { + @include respond-to('mobile') { + padding: 0 tovw(56px, 'default', 16px); + } + } + + .video_container { + align-self: center; + position: relative; + margin-top: tovw(-165px, 'default'); + margin-bottom: tovw(-140px, 'default'); + padding-top: tovw(30px, 'default', 20px); + width: 82%; + mix-blend-mode: lighten; + + video { + @include respond-to('mobile') { + display: none; + } + + width: 100%; + } + + &::after { + position: absolute; + top: 0; + left: 0; + z-index: 1; + background: radial-gradient( + ellipse, + rgb(3 3 3 / 0) 60%, + rgb(3 3 3 / 1) 75%, + rgb(3 3 3 / 1) 100% + ); + width: 100%; + height: 100%; + content: ''; + } + } + + .hero__mobile { + @include respond-to('mobile') { + display: flex; + margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) + tovw(16px, 'mobile', 20px); + width: 200%; + mix-blend-mode: screen; + place-self: center; + mask-image: linear-gradient( + 0deg, + rgb(255 255 255 / 0) 0%, + rgb(0 0 0) 25% + ); + } + + display: none; + } + + .body { + @include respond-to('mobile') { + flex-direction: column; + align-items: flex-start; + } + + display: flex; + justify-content: space-between; + margin-top: tovw(16px, 'default', 10px); + + h1 { + @include respond-to('mobile') { + width: 100%; + font-size: tovw(50px, 'mobile'); + } + + margin: 0; + font-size: tovw(100px, 'default', 50px); + width: tovw(600px, 'default', 300px); + text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); + } + + .text__container { + @include respond-to('mobile') { + margin-top: tovw(25px, 'mobile'); + } + + display: flex; + align-items: center; + + h2 { + @include respond-to('mobile') { + min-width: tovw(75px, 'mobile'); + } + + line-height: 120%; + padding-top: tovw(15px, 'default', 15px); + width: tovw(600px, 'default', 300px); + } + + .line { + @include respond-to('mobile') { + top: unset; + margin: 0; + left: 0; + height: tovw(100px, 'default', 90px); + transform: rotate(0deg) translateY(tovw(8px, 'default', 8px)) + scaleX(1.2) scaleY(1.4); + } + + margin-top: tovw(8px, 'default', 8px); + height: tovw(90px, 'default', 90px); + transform: scaleX(1.5); + padding-right: tovw(25px, 'default', 15px); + } + } + + div:first-child { + @include respond-to('mobile') { + width: 100%; + display: flex; + justify-content: space-between; + } + + .arrow { + @include respond-to('mobile') { + display: unset; + position: relative; + align-self: flex-end; + padding-bottom: tovw(10px, 'mobile', 10px); + width: tovw(18px, 'mobile', 18px); + } + + display: none; + } + } + + a { + margin-top: tovw(50px, 'default', 25px); + } + } + + .gradient { + @include respond-to('mobile') { + height: 80%; + } + + position: absolute; + top: 0; + left: 0; + z-index: 2; + mix-blend-mode: screen; + background: linear-gradient( + 180deg, + rgb(0 0 244 / 0.9) 1.63%, + rgb(0 0 244 / 0) 99.89% + ); + width: 100%; + height: tovw(740px, 'default', 740px); + } +} diff --git a/src/components/sections/newsroom/hero/index.tsx b/src/components/sections/newsroom/hero/index.tsx new file mode 100644 index 0000000..3ca5870 --- /dev/null +++ b/src/components/sections/newsroom/hero/index.tsx @@ -0,0 +1,70 @@ +import { useRef } from 'react' + +import { Arrow } from '~/components/icons/arrow' +import Line from '~/components/icons/line' +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import { ButtonLink } from '~/components/primitives/button' +import Heading from '~/components/primitives/heading' + +import s from './hero.module.scss' + +// interface Props { +// data: { +// heroHeading: string +// heroLine: string +// } +// } + +const Hero = () => { + const heroVideoRef = useRef(null) + + return ( +
+
+
+ +
+ hero + +
+
+ + Newsroom + + +
+
+
+ + + Contact press at laconic.com for press inquiries. + +
+ + Get in touch + +
+
+ +
+ ) +} + +export default Hero diff --git a/src/components/sections/newsroom/media/index.tsx b/src/components/sections/newsroom/media/index.tsx new file mode 100644 index 0000000..90da2a5 --- /dev/null +++ b/src/components/sections/newsroom/media/index.tsx @@ -0,0 +1,124 @@ +import { useKeenSlider } from 'keen-slider/react' + +import { Container } from '~/components/layout/container' +import Section from '~/components/layout/section' +import Heading from '~/components/primitives/heading' + +import s from './media.module.scss' + +// interface Props { +// data: {} +// } + +const Media = () => { + const [sliderRef] = useKeenSlider({ + initial: 0, + loop: true, + mode: 'snap', + breakpoints: { + '(max-width: 900px)': { + slides: { perView: 1.12, spacing: 12 } + }, + '(min-width: 901px)': { + disabled: true + } + } + }) + + return ( +
+ +
+ + Media + + 04 +
+
+
+
+ image + play +
+
+ + Introducing Laconic video + +
+
+
+
+ image + play +
+
+ + Introducing Laconic video + +
+
+
+
+ image + play +
+
+ + Introducing Laconic video + +
+
+
+
+ image + play +
+
+ + Introducing Laconic video + +
+
+
+ +
+ ) +} + +export default Media diff --git a/src/components/sections/newsroom/media/media.module.scss b/src/components/sections/newsroom/media/media.module.scss new file mode 100644 index 0000000..246cf66 --- /dev/null +++ b/src/components/sections/newsroom/media/media.module.scss @@ -0,0 +1,134 @@ +@import '~/css/helpers'; + +.section { + @include respond-to('mobile') { + padding-bottom: 0; + } + + position: relative; + margin: tovw(140px, 'default', 110px) 0; + padding: tovw(104px, 'default', 90px) 0; + + .container { + @include respond-to('mobile') { + padding: 0 tovw(56px, 'default', 16px); + width: 100%; + } + + position: relative; + width: tovw(1076px, 'default', 400px); + + .header { + @include respond-to('mobile') { + align-items: flex-end; + } + + display: flex; + justify-content: space-between; + border-bottom: tovw(1px, 'default', 1px) solid var(--color-white); + padding-bottom: tovw(36px, 'default', 24px); + margin-bottom: tovw(56px, 'default', 40px); + + > h2 { + text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); + } + + span { + padding-top: tovw(35px, 'default', 14px); + color: var(--color-grey-light); + font-family: var(--font-dm-mono), sans-serif; + font-size: tovw(18px, 'default', 12px); + } + } + + .media__block { + // @include respond-to('mobile') { + // } + + @include respond-to('mobile') { + display: flex; + gap: unset; + width: calc(100% - tovw(16px, 'mobile')); + } + + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: tovw(45px, 'default', 40px) tovw(24px, 'default', 20px); + + .item { + display: flex; + flex-direction: column; + padding-bottom: tovw(2px, 'default', 2px); + white-space: normal; + width: 100%; + } + + .image__container { + cursor: pointer; + position: relative; + display: flex; + place-content: center; + place-items: center; + width: 100%; + margin: 0 0 tovw(20px, 'default', 16px) 0; + border-top: tovw(1px, 'default', 1px) solid var(--color-white); + border-bottom: tovw(1px, 'default', 1px) solid var(--color-white); + + &:hover { + img:first-child { + opacity: 80%; + filter: grayscale(50%); + transition: all 300ms; + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + + @supports (aspect-ratio: 16 / 9) { + aspect-ratio: 16 / 9; + } + } + + .play { + position: absolute; + height: tovw(83px, 'default', 60px); + width: tovw(83px, 'default', 60px); + z-index: 3; + } + } + + .content { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; + gap: tovw(24px, 'default', 18px); + place-content: space-between; + + a { + padding-top: tovw(20px, 'default', 12px); + width: fit-content; + } + + h2 { + font-size: tovw(40px, 'default', 24px); + text-transform: none !important; + line-height: 1.2; + } + + p { + @include respond-to('mobile') { + line-height: 1.6; + } + + margin: 0; + line-height: 1.4; + font-size: tovw(18px, 'default', 15px); + } + } + } + } +} diff --git a/src/components/sections/partners/hero/hero.module.scss b/src/components/sections/partners/hero/hero.module.scss index 61e5fcd..f1ae9ff 100644 --- a/src/components/sections/partners/hero/hero.module.scss +++ b/src/components/sections/partners/hero/hero.module.scss @@ -98,6 +98,7 @@ font-size: tovw(100px, 'default', 70px); width: tovw(600px, 'default', 300px); text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4); + z-index: 5; } .text__container { @@ -110,6 +111,7 @@ display: flex; flex-direction: column; width: tovw(645px, 'default', 300px); + z-index: 5; p { margin: tovw(25px, 'default', 10px) 0; diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx index c229598..7ebfe7b 100644 --- a/src/pages/blog/[slug].tsx +++ b/src/pages/blog/[slug].tsx @@ -38,7 +38,7 @@ const BlogPost = ({ - + {latestPosts?.length > 0 && } ) } diff --git a/src/pages/newsroom.tsx b/src/pages/newsroom.tsx new file mode 100644 index 0000000..f03eb47 --- /dev/null +++ b/src/pages/newsroom.tsx @@ -0,0 +1,67 @@ +import { + getBlogPosts as serverGetBlogPosts, + getBlogPostsCategories as serverGetBlogPostsCategories +} from 'lib/blog' +import { InferGetStaticPropsType } from 'next' + +import { Meta } from '~/components/common/meta' +import { PageLayout } from '~/components/layout/page' +import Related from '~/components/sections/about/related' +import Hero from '~/components/sections/newsroom/hero' +import Media from '~/components/sections/newsroom/media' + +// import { +// CareersHero, +// CareersPositions, +// CareersPositionsSection, +// CareersValues, +// CareersWhy +// } from '~/lib/cms/queries/careers' +// import { request } from '../lib/datocms' + +export const getStaticProps = async () => { + const [allBlogPosts, categories] = await Promise.all([ + serverGetBlogPosts({ page: 1 }), + serverGetBlogPostsCategories() + ]) + + const heroBlogPost = allBlogPosts.data[0] + + // const [latestData] = await Promise.all([request(HomeLatest)]) + + return { + props: { + // heroData: heroData?.careersPage, + // valuesData: valuesData?.careersPage, + // positionsSectData: positionsSectData?.careersPage, + // whyData: whyData?.careersPage, + // positionsData: positionsData?.allPositions, + initialBlogPosts: { + pagination: allBlogPosts.pagination, + data: allBlogPosts.data.slice(0, 3) + }, + categories, + page: + { + heroBlogPost + } ?? null + }, + revalidate: 60 + } +} + +const Newsroom = ({ + initialBlogPosts +}: InferGetStaticPropsType) => { + return ( + + + + + + + + ) +} + +export default Newsroom