From cdb8feed1dde66c9702dc980d2e166ce13df34f8 Mon Sep 17 00:00:00 2001 From: izabellalarsson Date: Wed, 24 Nov 2021 10:13:07 +0100 Subject: [PATCH 1/4] remove console.log --- client/src/components/BlockContent/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/BlockContent/index.js b/client/src/components/BlockContent/index.js index 954e4098..8f6cc0be 100644 --- a/client/src/components/BlockContent/index.js +++ b/client/src/components/BlockContent/index.js @@ -66,7 +66,6 @@ const serializers = (withAnchor, variant, color, textAlign, anchorColor) => ({ }, marks: { internalLink: ({ mark, children }) => { - console.log('mark', mark.reference) return ( Date: Wed, 24 Nov 2021 10:13:33 +0100 Subject: [PATCH 2/4] chore: update start page schema to set hero text --- studio/schemas/pages/startPage.js | 34 ++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/studio/schemas/pages/startPage.js b/studio/schemas/pages/startPage.js index 45ceaef3..125a075b 100644 --- a/studio/schemas/pages/startPage.js +++ b/studio/schemas/pages/startPage.js @@ -3,7 +3,39 @@ export default { type: 'document', title: 'Startsida', fields: [ - // { type: 'hero', name: 'hero' }, + { + name: 'hero', + type: 'object', + title: 'Hero', + options: { + collapsible: true, + }, + fields: [ + { + name: 'title', + title: 'Titel', + type: 'string', + validation: (Rules) => + Rules.required().error('Du behöver sätta en rubrik.'), + }, + { + name: 'subtitle', + title: 'Underrubrik', + type: 'text', + validation: (Rules) => + Rules.required().error( + 'En underrubrik kan vara snyggt att ha också.' + ), + }, + { + name: 'cta', + title: 'Call to action', + type: 'cta', + description: + 'Om du vill ha en CTA på hero sektionen så fyller du i det här.', + }, + ], + }, { type: 'layout', name: 'layout' }, { type: 'document', From 63fa2cc75ad9cec60ef0383839a70413fefb932d Mon Sep 17 00:00:00 2001 From: izabellalarsson Date: Wed, 24 Nov 2021 10:14:30 +0100 Subject: [PATCH 3/4] chore: change nav color and checking if hero is set --- client/src/pages/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/pages/index.js b/client/src/pages/index.js index 3aaa5f6d..e1bb348f 100644 --- a/client/src/pages/index.js +++ b/client/src/pages/index.js @@ -39,10 +39,10 @@ const StartPage = ({ data, preview = false }) => { } return ( - + {preview && } - + {page?.hero && } {layout.map((content) => getLayoutComponent(content))} Date: Wed, 24 Nov 2021 10:17:30 +0100 Subject: [PATCH 4/4] feat: add new hero for start page --- client/src/sections/startpage/Hero.js | 10 +- .../src/sections/startpage/OpenSouceHero.js | 177 ++++++++++++++++++ 2 files changed, 182 insertions(+), 5 deletions(-) create mode 100644 client/src/sections/startpage/OpenSouceHero.js diff --git a/client/src/sections/startpage/Hero.js b/client/src/sections/startpage/Hero.js index 2db29d99..4ab74bed 100644 --- a/client/src/sections/startpage/Hero.js +++ b/client/src/sections/startpage/Hero.js @@ -1,8 +1,8 @@ -import React from "react" -import GlitchHero from "./GlitchHero" +import React from 'react' +import GlitchHero from './GlitchHero' +import OpenSouceHero from './OpenSouceHero' -const Hero = () => { - return +const Hero = ({ content }) => { + return } - export default Hero diff --git a/client/src/sections/startpage/OpenSouceHero.js b/client/src/sections/startpage/OpenSouceHero.js new file mode 100644 index 00000000..f123ad40 --- /dev/null +++ b/client/src/sections/startpage/OpenSouceHero.js @@ -0,0 +1,177 @@ +import React from 'react' +import styled from 'styled-components' +import { Container } from 'react-bootstrap' +import Link from 'next/link' +import { Title, Section, Text, Button } from '../../components/Core' +import { getRouteNameFromPageType } from '../../utils/helpers' +const Wrapper = styled.div` + background: ${({ theme }) => theme.colors.secondary}; + height: 100vh; +` + +const TextContainer = styled.div` + display: flex; + width: 60%; + height: 88%; + flex-direction: column; + justify-content: center; +` +const OpenSouceHero = ({ content }) => { + return ( +
+ +
+ + + + {content.title} + + {content.subtitle} + + + + + +
+ +
+ ) +} + +const Wrap = styled.div` + position: relative; + width: fit-content; + display: flex; + justify-content: center; + align-items: center; + top: ${({ top }) => top}; + right: ${({ right }) => right}; + + h3 { + position: absolute; + font-size: 24px; + padding: 12.5%; + text-align: left; + color: #000; + } + + svg { + overflow: visible; + } + + line { + stroke-width: 5; + stroke-linecap: round; + stroke: ${({ theme }) => theme.colors.info}; + } + + line:nth-of-type(1) { + stroke-dasharray: 66; + stroke-dashoffset: 66; + animation: one 0.5s ease-out forwards; + } + + line:nth-of-type(2) { + stroke-dasharray: 254; + stroke-dashoffset: 254; + animation: two 0.5s 0.29s ease-out forwards; + } + + line:nth-of-type(3) { + stroke-dasharray: 139; + stroke-dashoffset: 139; + animation: to-zero 0.5s 0.54s ease-out forwards; + } + + line:nth-of-type(4) { + stroke-dasharray: 255; + stroke-dashoffset: -255; + animation: to-zero 0.5s 0.98s ease-out forwards; + } + + line:nth-of-type(5) { + stroke-dasharray: 68; + stroke-dashoffset: -68; + animation: to-zero 0.5s 1.4s linear forwards; + } + + line:nth-of-type(6) { + stroke-dasharray: 71; + stroke-dashoffset: 71; + animation: to-zero 0.5s 1.89s ease-out forwards; + } + + line:nth-of-type(7) { + stroke-dasharray: 207; + stroke-dashoffset: 207; + animation: seven 0.5s 2.3s ease-out forwards; + } + + @keyframes one { + to { + stroke-dashoffset: -66; + } + } + + @keyframes to-zero { + to { + stroke-dashoffset: 0; + } + } + + @keyframes seven { + to { + stroke-dashoffset: 50; + } + } + + @keyframes two { + to { + stroke-dashoffset: -210; + } + } +` + +const BoxSvg = ({ text, top = 0, right = 0 }) => { + return ( + +

{text}

+ + + + + + + + + + + ) +} + +export default OpenSouceHero