LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-01-15 15:24:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add CMS content, styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-24 16:11:55 +02:00
parent 38ed8df422
commit 047aef8759
14 changed files with 152 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/sections/about/hero/hero.module.scss
View File

@ -17,6 +17,7 @@
position: relative;
align-self: center;
width: 102%;
min-height: tovw(875px, 'default', 414px);
margin-top: tovw(-165px, 'default');
padding-top: tovw(30px, 'default', 20px);
mix-blend-mode: lighten;
@ -81,6 +82,8 @@
place-content: space-between;
}
z-index: 5;
h1 {
@include respond-to('mobile') {
width: 90%;
@ -127,6 +130,7 @@
display: flex;
justify-content: space-between;
gap: tovw(60px, 'default', 20px);
z-index: 5;
div {
&:first-child {

11
src/components/sections/about/related/index.tsx
View File

@ -16,10 +16,13 @@ export interface Props {
isInPost?: boolean
isFeatured?: boolean
reduced?: boolean
data: any
data?: {
featuredHeading?: string
}
blogData: any
}
const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
const Related = ({ data, blogData, isInPost, isFeatured, reduced }: Props) => {
const [sliderRef] = useKeenSlider<HTMLDivElement>({
initial: 0,
loop: true,
@ -45,13 +48,13 @@ const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
<Container className={clsx(s['heading'], isInPost && s.altheader)}>
<Heading as="h2" variant="lg">
{isInPost && !isFeatured && 'Related articles'}
{isFeatured && !isInPost && 'Featured articles'}
{isFeatured && !isInPost && data?.featuredHeading}
{!isFeatured && !isInPost && 'Learn more'}
</Heading>
</Container>
<div className={s['slider__container']}>
<div className={clsx(s['events'], 'keen-slider')} ref={sliderRef}>
{data.map((item: any, i: Key) => (
{blogData.map((item: any, i: Key) => (
<Card
key={i}
data={item}

2
src/components/sections/homepage/hero/hero.module.scss
View File

@ -52,7 +52,7 @@
rgb(255 255 255 / 0) 90%,
var(--color-black) 100%
);
width: 100%;
width: 101%;
height: 101%;
content: '';
pointer-events: none;

40
src/components/sections/newsroom/hero/index.tsx
View File

@ -7,16 +7,16 @@ import Heading from '~/components/primitives/heading'
import s from './hero.module.scss'
// interface Props {
// data: {
// heroHeading: string
// heroLine: string
// }
// }
const Hero = () => {
// const heroVideoRef = useRef<HTMLVideoElement>(null)
interface Props {
data: {
heroHeading: string
heroLine: string
heroButtonLabel: string
heroButtonLink: string
}
}
const Hero = ({ data }: Props) => {
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
@ -26,20 +26,6 @@ const Hero = () => {
alt="hero"
src="/images/press/press.png"
/>
{/* <div className={s.video_container}>
<video
autoPlay
ref={heroVideoRef}
controls={false}
loop
muted
playsInline={true}
preload="true"
>
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
</video>
</div> */}
<img
className={s.hero__mobile}
loading="eager"
@ -50,7 +36,7 @@ const Hero = () => {
<div className={s.body}>
<div>
<Heading as="h1" variant="xl">
Newsroom
{data?.heroHeading}
</Heading>
<Arrow className={s['arrow']} />
</div>
@ -58,11 +44,11 @@ const Hero = () => {
<div className={s.text__container}>
<Line className={s.line} height={144} />
<Heading as="h2" variant="sm">
Contact press at laconic.com for press inquiries.
{data?.heroLine}
</Heading>
</div>
<ButtonLink variant="primary" href="https://google.com">
Get in touch
<ButtonLink variant="primary" href={data?.heroButtonLink}>
{data?.heroButtonLabel}
</ButtonLink>
</div>
</div>

28
src/components/sections/newsroom/media/index.tsx
View File

@ -6,11 +6,21 @@ import Heading from '~/components/primitives/heading'
import s from './media.module.scss'
// interface Props {
// data: {}
// }
interface Props {
data: {
mediaHeading: string
mediaVideo01Label: string
mediaVideo01Link: string
mediaVideo02Label: string
mediaVideo02Link: string
mediaVideo03Label: string
mediaVideo03Link: string
mediaVideo04Label: string
mediaVideo04Link: string
}
}
const Media = () => {
const Media = ({ data }: Props) => {
const [sliderRef] = useKeenSlider<HTMLDivElement>({
initial: 0,
loop: true,
@ -30,7 +40,7 @@ const Media = () => {
<Container className={s['container']}>
<div className={s['header']}>
<Heading as="h2" variant="md">
Media
{data?.mediaHeading}
</Heading>
<span>04</span>
</div>
@ -51,7 +61,7 @@ const Media = () => {
</div>
<div className={s['content']}>
<Heading as="h2" variant="sm" font="tthoves">
Introducing Laconic video
{data?.mediaVideo01Label}
</Heading>
</div>
</div>
@ -71,7 +81,7 @@ const Media = () => {
</div>
<div className={s['content']}>
<Heading as="h2" variant="sm" font="tthoves">
Introducing Laconic video
{data?.mediaVideo02Label}
</Heading>
</div>
</div>
@ -91,7 +101,7 @@ const Media = () => {
</div>
<div className={s['content']}>
<Heading as="h2" variant="sm" font="tthoves">
Introducing Laconic video
{data?.mediaVideo03Label}
</Heading>
</div>
</div>
@ -111,7 +121,7 @@ const Media = () => {
</div>
<div className={s['content']}>
<Heading as="h2" variant="sm" font="tthoves">
Introducing Laconic video
{data?.mediaVideo04Label}
</Heading>
</div>
</div>

10
src/components/sections/newsroom/press/index.tsx
View File

@ -13,10 +13,14 @@ import s from './press.module.scss'
// TODO
export interface Props {
data: {
pressHeading: string
pressHeadingNumber: string
}
blogData: any
}
const Press = ({ blogData }: Props) => {
const Press = ({ data, blogData }: Props) => {
const [loaded, setLoaded] = useState(false)
const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
@ -43,9 +47,9 @@ const Press = ({ blogData }: Props) => {
<Container className={s.heading}>
<div className={s['header']}>
<Heading as="h2" variant="md">
Press Releases
{data?.pressHeading}
</Heading>
<span>04</span>
<span>{data?.pressHeadingNumber}</span>
</div>
</Container>
<div className={s['slider__container']}>

5
src/components/sections/products/hero/hero.module.scss
View File

@ -27,10 +27,11 @@
align-self: center;
position: relative;
width: 82%;
min-height: tovw(914px, 'default', 434px);
margin-top: tovw(-165px, 'default');
margin-bottom: tovw(-140px, 'default');
padding-top: tovw(30px, 'default', 20px);
width: 82%;
mix-blend-mode: lighten;
video {
@ -89,6 +90,7 @@
margin: 0;
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
z-index: 5;
}
ol {
@ -136,6 +138,7 @@
display: grid;
gap: tovw(113px, 'default', 40px);
grid-template-columns: 1fr 1.15fr;
z-index: 5;
p:first-child {
@include respond-to('mobile') {

60
src/lib/cms/queries/press.js
View File

@ -1,3 +1,55 @@
const PressHero = {
query: `
{
pressPage {
heroButtonLabel
heroButtonLink
heroHeading
heroLine
}
}
`
}
const PressMedia = {
query: `
{
pressPage {
mediaHeading
mediaVideo01Label
mediaVideo01Link
mediaVideo02Label
mediaVideo02Link
mediaVideo03Label
mediaVideo03Link
mediaVideo04Label
mediaVideo04Link
}
}
`
}
const PressPress = {
query: `
{
pressPage {
pressHeading
pressHeadingNumber
}
}
`
}
const PressFeaturedSection = {
query: `
{
pressPage {
featuredHeading
}
}
`
}
const PressFeatured = {
query: `
{
@ -23,4 +75,10 @@ const PressFeatured = {
`
}
export { PressFeatured }
export {
PressFeatured,
PressFeaturedSection,
PressHero,
PressMedia,
PressPress
}

2
src/pages/about.tsx
View File

@ -74,7 +74,7 @@ const About = ({
<Team teamData={teamsData} data={teamsPageData} />
<Whitepaper data={whitepaperData} />
<Roadmap data={roadmapData} />
<Related data={initialBlogPosts?.data} reduced={true} />
<Related blogData={initialBlogPosts?.data} reduced={true} />
</PageLayout>
)
}

2
src/pages/blog/[slug].tsx
View File

@ -38,7 +38,7 @@ const BlogPost = ({
<Hero data={post} />
<Content data={post} />
<Shares url={completeUrl} />
{latestPosts?.length > 0 && <Related isInPost data={latestPosts} />}
{latestPosts?.length > 0 && <Related isInPost blogData={latestPosts} />}
</PageLayout>
)
}

2
src/pages/careers.tsx
View File

@ -74,7 +74,7 @@ const Careers = ({
<Values data={valuesData} />
<WhyJoin data={whyData} />
<Positions data={positionsSectData} positionsData={positionsData} />
<Related data={initialBlogPosts?.data} reduced={true} />
<Related blogData={initialBlogPosts?.data} reduced={true} />
</PageLayout>
)
}

1
src/pages/partners.tsx
View File

@ -8,7 +8,6 @@ import { Meta } from '~/components/common/meta'
import { PageLayout } from '~/components/layout/page'
import WhatOthersSay from '~/components/sections/homepage/what-others-say'
import Contact from '~/components/sections/partners/contact'
// import Related from '~/components/sections/about/related'
import Hero from '~/components/sections/partners/hero'
import Opportunities from '~/components/sections/partners/opportunities'
import { HomeOthers, Testimonials } from '~/lib/cms/queries/home'

43
src/pages/press.tsx
View File

@ -10,7 +10,13 @@ import Related from '~/components/sections/about/related'
import Hero from '~/components/sections/newsroom/hero'
import Media from '~/components/sections/newsroom/media'
import Press from '~/components/sections/newsroom/press'
import { PressFeatured } from '~/lib/cms/queries/press'
import {
PressFeatured,
PressFeaturedSection,
PressHero,
PressMedia,
PressPress
} from '~/lib/cms/queries/press'
import { request } from '../lib/datocms'
@ -22,12 +28,22 @@ export const getStaticProps = async () => {
const heroBlogPost = allBlogPosts.data[0]
const [pressData] = await Promise.all([request(PressFeatured)])
const [pressHero, pressFeatured, pressFeaturedData, pressMedia, pressPress] =
await Promise.all([
request(PressHero),
request(PressFeaturedSection),
request(PressFeatured),
request(PressMedia),
request(PressPress)
])
return {
props: {
// heroData: heroData?.careersPage,
pressData: pressData?.allBlogPosts?.slice(0, 3),
heroData: pressHero?.pressPage,
featuredData: pressFeatured?.pressPage,
featuredPostsData: pressFeaturedData?.allBlogPosts?.slice(0, 3),
mediaData: pressMedia?.pressPage,
pressData: pressPress?.pressPage,
initialBlogPosts: {
pagination: allBlogPosts?.pagination,
data: allBlogPosts?.data.slice(0, 3)
@ -44,16 +60,25 @@ export const getStaticProps = async () => {
const Newsroom = ({
initialBlogPosts,
heroData,
featuredData,
featuredPostsData,
mediaData,
pressData
}: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<PageLayout>
<Meta />
<Hero />
<Related data={pressData} isFeatured={true} reduced={false} />
<Press blogData={initialBlogPosts?.data} />
<Media />
<Related data={initialBlogPosts?.data} reduced={true} />
<Hero data={heroData} />
<Related
data={featuredData}
blogData={featuredPostsData}
isFeatured={true}
reduced={false}
/>
<Press data={pressData} blogData={initialBlogPosts?.data} />
<Media data={mediaData} />
<Related blogData={initialBlogPosts?.data} reduced={true} />
</PageLayout>
)
}

2
src/pages/products.tsx
View File

@ -82,7 +82,7 @@ const Products = ({
<Network data={networkData} />
<AppSection data={appData} />
<Token data={tokenData} />
<Related data={initialBlogPosts?.data} reduced={true} />
<Related blogData={initialBlogPosts?.data} reduced={true} />
</PageLayout>
)
}