style(index): Separate title components

pages/index.js

@@ -36,18 +36,26 @@ export default function Home({ data, placeholders }) {
         <title>Philippe Bureau - Galerie</title>
         <link rel="icon" href="/favicon.ico" />
         <Box overflow="hidden" bg="gray.100" minH="100vh">
-          <Container>
+          <Container
+            my="1rem"
+            >
             <Text
               as="h1"
               color="gray.700"
               fontWeight="semibold"
-              mb="1rem"
               textAlign="center"
-              textDecoration="underline"
-              fontSize={["5xl", "5xl", "6xl", "6xl"]}
+              fontSize={["0.5em", "1em", "2em", "2em"]}
             >
-              Philippe Bureau - Galerie Photo
+              Philippe Bureau
             </Text>
+              <Text
+                as="h1"
+                color="gray.700"
+                textAlign="center"
+                fontSize={["0.25em", "0.5em", "1em", "1em"]}
+              >
+                Galerie Photo
+              </Text>
           </Container>
           <Wrap px={"10rem"} spacing={"1rem"} mb={1} justify="center">
             {photos.map((photo) => (