Add descriptionsection

.storybook/preview.js

@@ -1,4 +1,7 @@
+import myTheme from '../src/@snek-at/jaen/@chakra-ui/theme'
+
 export const parameters = {
+  chakra: {theme: myTheme},
   actions: {argTypesRegex: '^on[A-Z].*'},
   layout: 'fullscreen',
   controls: {

package.json

@@ -39,8 +39,14 @@
     "@chakra-ui/react": "^1.6.7",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@fontsource/fira-code": "^4.5.1",
+    "@fontsource/fira-sans": "^4.5.0",
+    "@fontsource/noto-sans": "^4.5.1",
+    "@fontsource/nunito": "^4.5.0",
+    "@fontsource/ubuntu": "^4.5.0",
     "@snek-at/jaen": "^2.0.0",
     "@snek-at/jaen-pages": "^2.0.0",
+    "@snek-at/react-lottie": "^1.0.0-beta.3",
     "@snek-at/storybook-addon-chakra-ui": "^1.0.0-beta.1",
     "electron": "^14.0.0",
     "framer-motion": "^4.1.17",
@@ -57,6 +63,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-typed": "^1.2.0",
     "sharp": "^0.29.1"
   },
   "devDependencies": {

src/@snek-at/jaen/@chakra-ui/theme.ts

@@ -1,5 +1,10 @@
 import {extendTheme} from '@chakra-ui/react'
 
+import "@fontsource/nunito/900.css"
+import "@fontsource/ubuntu/700.css"
+import "@fontsource/fira-sans"
+import "@fontsource/fira-code"
+
 const theme = {
   colors: {
     linuxday: {

src/components/molecules/DescriptionCard/index.stories.tsx

@@ -0,0 +1,28 @@
+import DescriptionCard from '.'
+import {Story, Meta} from '@storybook/react'
+import {ComponentProps} from 'react'
+
+export default {
+  component: DescriptionCard,
+  title: 'HomePage/DescriptionSection'
+} as Meta
+
+const Template: Story<ComponentProps<typeof DescriptionCard>> = args => (
+  <DescriptionCard {...args} />
+)
+
+export const Card = Template.bind({})
+Card.args = {
+  title: 'title',
+  lottie: '',
+  index: 1,
+  text: (
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    </p>
+  )
+}

src/components/molecules/DescriptionCard/index.tsx

@@ -0,0 +1,103 @@
+
+import {chakra, Heading, Box, Flex, useColorModeValue} from '@chakra-ui/react'
+
+import {
+  createLottie,
+  Lottie,
+  LottieFnFn,
+  LottieFnResult
+} from '@snek-at/react-lottie'
+
+const backgrounds = [
+  `url("data:image/svg+xml, %3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'560\' height=\'185\' viewBox=\'0 0 560 185\' fill=\'none\'%3E%3Cellipse cx=\'102.633\' cy=\'61.0737\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23ED64A6\' /%3E%3Cellipse cx=\'399.573\' cy=\'123.926\' rx=\'102.633\' ry=\'61.0737\' fill=\'%23F56565\' /%3E%3Cellipse cx=\'366.192\' cy=\'73.2292\' rx=\'193.808\' ry=\'73.2292\' fill=\'%2338B2AC\' /%3E%3Cellipse cx=\'222.705\' cy=\'110.585\' rx=\'193.808\' ry=\'73.2292\' fill=\'%23ED8936\' /%3E%3C/svg%3E")`,
+  `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ED8936'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%2348BB78'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%230BC5EA'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%23ED64A6'/%3E%3C/svg%3E")`,
+  `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='102.633' cy='61.0737' rx='102.633' ry='61.0737' fill='%23ED8936'/%3E%3Cellipse cx='399.573' cy='123.926' rx='102.633' ry='61.0737' fill='%2348BB78'/%3E%3Cellipse cx='366.192' cy='73.2292' rx='193.808' ry='73.2292' fill='%230BC5EA'/%3E%3Cellipse cx='222.705' cy='110.585' rx='193.808' ry='73.2292' fill='%23ED64A6'/%3E%3C/svg%3E")`,
+  `url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='185' viewBox='0 0 560 185' fill='none'%3E%3Cellipse cx='457.367' cy='123.926' rx='102.633' ry='61.0737' transform='rotate(-180 457.367 123.926)' fill='%23ECC94B'/%3E%3Cellipse cx='160.427' cy='61.0737' rx='102.633' ry='61.0737' transform='rotate(-180 160.427 61.0737)' fill='%239F7AEA'/%3E%3Cellipse cx='193.808' cy='111.771' rx='193.808' ry='73.2292' transform='rotate(-180 193.808 111.771)' fill='%234299E1'/%3E%3Cellipse cx='337.295' cy='74.415' rx='193.808' ry='73.2292' transform='rotate(-180 337.295 74.415)' fill='%2348BB78'/%3E%3C/svg%3E")`
+]
+
+interface DescriptionCardProps {
+  title: string
+  lottie: React.ReactNode
+  index: number
+  text: React.ReactNode
+}
+
+const DescriptionCard = (props: DescriptionCardProps) => {
+  const {title, lottie, index, text} = props
+
+  const LottieAnimation: LottieFnFn = () => container => {
+    let creator: LottieFnResult['creator']
+    const containerProps: LottieFnResult['containerProps'] = {
+      style: {width: "100%"}
+    }
+
+    creator = createLottie({
+      container,
+      animationData: lottie,
+      loop: false
+    })
+
+    return {creator, containerProps}
+  }
+
+  return (
+    <Lottie lottie={LottieAnimation()} forceReloadDeps={[LottieAnimation()]}>
+      {({container, animation}) => (
+        <Flex
+          onMouseEnter={() =>
+            animation.playSegments([0, animation.totalFrames], true)
+          }
+          boxShadow={'lg'}
+          maxW={'640px'}
+          direction={{base: 'column', lg: 'row'}}
+          width={'full'}
+          rounded={'xl'}
+          p={10}
+          justifyContent={'space-between'}
+          position={'relative'}
+          bg={useColorModeValue('white', 'gray.800')}
+          _before={{
+            content: '""',
+            position: 'absolute',
+            zIndex: '-1',
+            height: 'full',
+            maxW: '640px',
+            width: 'full',
+            filter: 'blur(40px)',
+            transform: 'scale(0.98)',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            top: 0,
+            left: 0,
+            backgroundImage: backgrounds[index % 4]
+          }}>
+            <Box
+              width={{base: '150px', lg: '1000px'}}
+              alignSelf={'center'}
+              m={{base: '0 0 35px 0', lg: '0 35px 0 0'}}
+            >
+              {container}
+            </Box>
+          <Flex
+            direction={'column'}
+            textAlign={'left'}
+            justifyContent={'space-between'}>
+            <Heading fontFamily={'Ubuntu'} as="h5" size="lg">
+              {title}
+            </Heading>
+            <chakra.p
+              fontFamily={'Fira Sans'}
+              fontWeight={'medium'}
+              pt={4}>
+              {text ||
+                'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam'}
+            </chakra.p>
+          </Flex>
+        </Flex>
+      )}
+    </Lottie>
+
+  )
+}
+
+export default DescriptionCard

src/components/organisms/sections/DescriptionSection/index.stories.tsx

@@ -0,0 +1,64 @@
+import DescriptionSection, {DescriptionSectionProps} from '.'
+import {Story, Meta} from '@storybook/react'
+
+export default {
+  component: DescriptionSection,
+  title: 'HomePage/DescriptionSection'
+} as Meta
+
+const Template: Story<DescriptionSectionProps> = args => (
+  <DescriptionSection {...args} />
+)
+
+export const Section = Template.bind({})
+
+Section.args = {
+  headlines: (
+    [
+      "Deine chance deine FOSS zu presentieren.",
+      "Deine chance dich mit Experten auszutauschen.",
+      "Deine chance dich in der welt der technik einzubringen.",
+    ]
+  ),
+  teaser: (
+    <h2>
+      Vertreter aus Wirtschaft, Bildung und der Linux-Gemeinde treffen sich zum Wissensaustausch und knüpfen neue Netzwerke.
+    </h2>
+  ),
+  digitalisingtext: (
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    </p>
+  ),
+  linuxtext: (
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    </p>
+  ),
+  networkingtext: (
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    </p>
+  ),
+  securitytext: (
+    <p>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    </p>
+  )
+}

src/components/organisms/sections/DescriptionSection/index.tsx

@@ -0,0 +1,110 @@
+import {useColorMode} from '@chakra-ui/react'
+import {Flex, Box, SimpleGrid, Container, Heading} from '@chakra-ui/react'
+
+
+//> Additional
+// Typing animations
+import Typed from "react-typed";
+
+import DescriptionCard from '../../../molecules/DescriptionCard'
+
+export interface DescriptionSectionProps {
+  headlines: string[]
+  teaser: React.ReactNode
+  securitytext: React.ReactNode
+  linuxtext: React.ReactNode
+  networkingtext: React.ReactNode
+  digitalisingtext: React.ReactNode
+}
+
+const DescriptionSection = ({
+  headlines,
+  teaser,
+  securitytext,
+  linuxtext,
+  networkingtext,
+  digitalisingtext
+}: DescriptionSectionProps) => {
+
+  const {colorMode} = useColorMode()
+  const dm = colorMode === 'light'
+
+  return (
+    <Box mt="20">
+      <Container
+        maxW={{base: '100%', md: '80%'}}
+      >
+        <Heading as="h2" size="4xl" minH="12rem">
+          <Typed
+            strings={headlines}
+            typeSpeed={30}
+            backSpeed={50}
+            loop
+          />
+        </Heading>
+      </Container>
+      <Container
+        maxW={{base: '100%', md: '80%'}}
+        mt={10}
+      >
+        {/* <Box w="100%">
+          {teaser}
+        </Box> */}
+      </Container>
+      <Flex
+        pb={20}
+        justifyContent={'center'}
+        direction={'column'}
+        width={'full'}>
+        <SimpleGrid
+          columns={{base: 1, lg: 2}}
+          spacing={'20'}
+          mt={10}
+          mx={'auto'}>
+          <DescriptionCard
+            title="Security"
+            index={1}
+            lottie={
+              require(dm
+                ? `./457-shield-security-outline.json`
+                : `./457-shield-security-outline-dm.json`)
+            }
+            text={securitytext}
+          />
+          <DescriptionCard
+            title="Networking"
+            index={2}
+            lottie={
+              require(dm
+                ? `./680-it-developer-outline.json`
+                : `./680-it-developer-outline-dm.json`)
+            }
+            text={networkingtext}
+          />
+          <DescriptionCard
+            title="Digitalisierung"
+            index={3}
+            lottie={
+              require(dm
+                ? `./959-internet-outline.json`
+                : `./959-internet-outline-dm.json`)
+            }
+            text={digitalisingtext}
+          />
+          <DescriptionCard
+            title="Linux"
+            index={4}
+            lottie={
+              require(dm
+                ? `./1132-penguin-outline.json`
+                : `./1132-penguin-outline-dm.json`)
+            }
+            text={linuxtext}
+          />
+        </SimpleGrid>
+      </Flex>
+    </Box>
+  )
+}
+
+export default DescriptionSection