small responsive tweaks to current design progress

Author: rudietuesdays

app/page.js

@@ -6,8 +6,8 @@ import { funnel } from "@/app/fonts"
 // chakra ui imports
 import {
   Box,
+  ClientOnly,
   Container,
-  Heading
 } from "@chakra-ui/react"
 
 import {
@@ -23,22 +23,22 @@ export default function Home() {
   const mode = useColorMode()
 
   return (
-    <Box
-      bgAttachment="fixed"
-      bgImage={mode.colorMode === "dark" ? "url('/assets/images/bg.png')" : ""}
-      bgPosition="center"
-      bgRepeat="no-repeat"
-      bgSize="cover"
-    >
-      <Container marginTop={12}>
+    <ClientOnly>
+      <Box
+        bgAttachment="fixed"
+        bgImage={mode?.colorMode === "dark" ? "url('/assets/images/bg.png')" : ""}
+        bgPosition="center"
+        bgRepeat="no-repeat"
+        bgSize="cover"
+      >
         <Header />
-      </Container>
-      <Container marginTop={12}>
-        <Hero />
-      </Container>
-      <Box marginY={20}>
-        <Footer />
-      </Box>
-    </Box >
+        <Container marginTop={12}>
+          <Hero />
+        </Container>
+        <Box marginTop={12}>
+          <Footer />
+        </Box>
+      </Box >
+    </ClientOnly>
   )
 }

components/sections/footer.jsx

@@ -29,11 +29,15 @@ export default function Footer() {
 
   return (
     <ClientOnly>
-      <Container id="contact">
+      <Container id="contact" paddingBottom={12}>
         <Heading color={color}>
           Contact us
         </Heading>
-        <Flex direction={["column", "column", "row"]} justify="space-between" marginTop={8}>
+        <Flex
+          direction={["column", "column", "row"]}
+          gap={[8, 8, 4]}
+          justify="space-between"
+          marginTop={8}>
           <Flex direction={["column", "row"]} gap={4}>
             <Link color={color} href="mailto:team@throneless.tech">
               Email

components/sections/header.jsx

@@ -2,7 +2,6 @@
 
 // chakra ui imports
 import {
-  Box,
   Container,
   Heading,
   VisuallyHidden,
@@ -23,8 +22,12 @@ export default function Header() {
 
   return (
     <ClientOnly>
-      <Box>
-        <Flex direction="row" justify="space-between">
+      <Container paddingTop={12}>
+        <Flex
+          alignItems={["flex-end", "flex-end", "center"]}
+          direction={["column-reverse", "column-reverse", "row"]}
+          gap={[8, 6]}
+          justify={"space-between"}>
           <Heading as="h1" width={340}>
             <VisuallyHidden>
               Throneless Tech
@@ -33,7 +36,7 @@ export default function Header() {
           </Heading>
           <ColorModeButton />
         </Flex>
-      </Box>
+      </Container>
     </ClientOnly>
   )
 }