feat: Update section layouts and add lazy loading for images

netsnek · Jun 13, 2024 · 59ea9dc · 59ea9dc
1 parent 151a5f9
commit 59ea9dc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/src/components/sections/Pains.tsx b/src/components/sections/Pains.tsx
@@ -8,14 +8,16 @@ import {
   Grid,
   HStack,
   Center,
-  Button
+  Button,
+  Flex
 } from '@chakra-ui/react'
 import { Field, Head } from '@atsnek/jaen'
 
 const Pains = () => {
   return (
-    <HStack
+    <Flex
       as="section"
+      flexDir={{ base: 'column', lg: 'row' }}
       w={"full"}
       borderRadius="2xl"
       mb={{ base: '0', lg: '16' }}
@@ -26,6 +28,7 @@ const Pains = () => {
       zIndex={0}>
       <Image
         w={"500px"}
+        mb="8"
         src="images/pains-image-1.png"
         alt="grapes"
       />
@@ -78,14 +81,17 @@ Möchtest du deine Zeit <i>aktiver und erfüllter</i> nutzen können?<br/>
           Mein Ziel ist es, dass du nicht nur deine eigenen Ziele übertriffst, sondern auch außerhalb der Arbeit aktiv und erfüllt leben kannst. Jeder Tag bietet dir 24 Stunden. Wenn du gesunde 8 Stunden schläfst, bleiben dir noch 16 wertvolle Stunden – und jede einzelne davon sollte lebenswert sein.
           "
         />
-        <HStack alignItems="center">
+        <Flex
+          alignItems="center"
+          flexDir={{ base: 'column-reverse', lg: 'row' }}
+        >
           <Button
-            mr="8"
+            mr={{ base: '0', lg: '8' }}
           >
             Lernen wir uns kennen
           </Button>
           <Field.Text
-            //mt={{ base: '20 !important', md: '0' }}
+            mb={{ base: '2', md: '0' }}
             //mb="8"
             as={Text}
             fontSize={{ base: 'sm', lg: 'md' }}
@@ -94,14 +100,13 @@ Möchtest du deine Zeit <i>aktiver und erfüllter</i> nutzen können?<br/>
             //fontWeight="bold"
             textAlign="left"
             name="PainsSectionSubheading1"
-            defaultValue="
-            Kostenlos und unverbindlich.<br/>
+            defaultValue="Kostenlos und unverbindlich.<br/>
             Eine Stunde nur für dich.
           "
           />
-        </HStack>
+        </Flex>
       </Container>
-    </HStack>
+    </Flex>
   )
 }
 

diff --git a/src/components/sections/Special.tsx b/src/components/sections/Special.tsx
@@ -62,18 +62,22 @@ const Special = () => {
           alt="apple"
         />
         <Image
+          display={{ base: 'none', lg: 'block' }}
           src="images/svg/spaghetti.svg"
           alt="spaghetti"
         />
         <Image
+          display={{ base: 'none', lg: 'block' }}
           src="images/svg/fish.svg"
           alt="fish"
         />
         <Image
+          display={{ base: 'none', lg: 'block' }}
           src="images/svg/cut_mushroom.svg"
           alt="cut mushroom"
         />
         <Image
+          display={{ base: 'none', lg: 'block' }}
           src="images/svg/wine_glass.svg"
           alt="wine glass"
         />

diff --git a/src/components/sections/Sweets.tsx b/src/components/sections/Sweets.tsx
@@ -1,6 +1,7 @@
 import {
   Image,
   Box,
+  Flex,
   Container,
   Heading,
   Text,
@@ -14,8 +15,9 @@ import { Field, Head } from '@atsnek/jaen'
 
 const Sweets = () => {
   return (
-    <HStack
+    <Flex
       as="section"
+      flexDir={{ base: 'column-reverse', lg: 'row' }}
       w={"full"}
       borderRadius="2xl"
       mb={{ base: '0', lg: '16' }}
@@ -74,11 +76,12 @@ Ob du beruflich oft unterwegs bist und häufig außer Haus isst oder es vorziehs
         </Button>
       </Container>
       <Image
+        mb="8"
         w={"500px"}
         src="images/sweets-image-1.png"
         alt="grapes"
       />
-    </HStack>
+    </Flex>
   )
 }