#7 Home page and page theme draft created

v36u · Mar 25, 2023 · 205f223 · 205f223
1 parent e409bdf
commit 205f223
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/public/assets/logoConversea.png b/public/assets/logoConversea.png
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -22,6 +22,11 @@ const App = (({
           fontSizes: {
             xl: '12px',
           },
+          globalStyles: (theme) => ({
+            body: {
+              backgroundColor: theme.colors.indigo[1],
+            },
+          }),
         }}
       >
         <Component {...pageProps} />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,11 @@
-import { Button, Container, Stack, Title } from '@mantine/core';
+import {
+  BackgroundImage,
+  Box,
+  Button,
+  Container,
+  Stack,
+  Title,
+} from '@mantine/core';
 import { GetServerSideProps } from 'next';
 import { FC } from 'react';
 
@@ -8,21 +15,41 @@ const IndexPage: FC = () => {
       <Title order={1} align="center">
         Conversea
       </Title>
-      <Stack
+
+      <Title mt={50} order={3} align="center">
+        Insert pompous motto
+      </Title>
+
+      <Box
         mx="auto"
-        mt="xl"
-        align="center"
-        h={300}
-        w={300}
-        spacing="xl"
-        justify="center"
+        mt={50}
+        p="md"
+        h={400}
+        w={400}
         sx={(theme) => ({
-          backgroundColor: theme.colors.gray[0],
+          backgroundColor: theme.colors.indigo[0],
+          textAlign: 'center',
+          padding: theme.spacing.xl,
+          borderRadius: theme.radius.md,
         })}
       >
-        <Button variant="outline">Inregistrare</Button>
-        <Button variant="outline">Logare</Button>
-      </Stack>
+        <BackgroundImage src="/assets/logoConversea.png">
+          <Stack mx="auto" align="center" h={400} spacing="xl" justify="center">
+            <Button
+              variant="gradient"
+              gradient={{ from: '#ed6ea0', to: '#ec8c69', deg: 35 }}
+            >
+              Inregistrare
+            </Button>
+            <Button
+              variant="gradient"
+              gradient={{ from: 'indigo', to: 'cyan' }}
+            >
+              Logare
+            </Button>
+          </Stack>
+        </BackgroundImage>
+      </Box>
     </Container>
   );
 };