Add info text and range indicator

src/App.js

@@ -7,6 +7,11 @@ import {
   Center,
   SimpleGrid,
   Box,
+  Text,
+  Stack,
+  useColorModeValue,
+  OrderedList,
+  ListItem,
 
 } from '@chakra-ui/react';
 
@@ -45,20 +50,38 @@ function App() {
     <ChakraProvider theme={theme}>
       <Nav></Nav>
       <Center p={5}>
-        <SimpleGrid columns={{ base: 1, md: 2, lg: 2 }} spacing={4}>
+        <Stack maxWidth={1200}>
+          <Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
+            <Text>
+              <Heading>Allemende Solimieten-Helferlein</Heading>
 
-          <Heading>Wohnung</Heading>
-          <Box></Box>
+              Im Rahmen des Konzept für solidarische Mieten, kann jede Partei in der Allmende ihre Miethöhe selbst bestimmen.
+              Dieses Tool soll als Orientierungshilfe bei der Selbsteinschätzung dienen.
+            </Text>
+            <Text pt={3}>Dies geschieht in folgenden Schritten:
+            </Text>
+            <OrderedList pt={3}>
+              <ListItem>Wähle deine Wohnung aus</ListItem>
+              <ListItem>Bestimme das monatliche Haushaltseinkommen</ListItem>
+              <ListItem>Wähle den Prozentsatz des Nettoeinkommens, den du zu zahlen bereit bist aus</ListItem>
+              <ListItem>Nun siehst du den daraus resultierenden Mietpreis absolut und auf den Quadratmeter gerechnet.</ListItem>
+            </OrderedList>
+          </Box>
+          <SimpleGrid pt={5} columns={{ base: 1, md: 2, lg: 2 }} spacing={4}>
 
-          <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
-          <FlatDetailsCard flat={selectedFlat} />
+            <Heading>Wohnung</Heading>
+            <Box></Box>
 
-          <Heading>Selbsteinschätzung</Heading>
-          <Box></Box>
+            <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
+            <FlatDetailsCard flat={selectedFlat} />
 
-          <SelfEvaluationCard rent={rent} setRent={setRent} />
-          <ResultsCard rent={rent} flat={selectedFlat} />
-        </SimpleGrid>
+            <Heading>Selbsteinschätzung</Heading>
+            <Box></Box>
+
+            <SelfEvaluationCard rent={rent} setRent={setRent} />
+            <ResultsCard rent={rent} flat={selectedFlat} />
+          </SimpleGrid>
+        </Stack>
       </Center>
     </ChakraProvider >
   );