Fixing height problem on homepage

openradx · Jan 5, 2025 · 0070b20 · 0070b20
1 parent 403d0a3
commit 0070b20
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 71 deletions.
diff --git a/src/components/common/MainLayout.tsx b/src/components/common/MainLayout.tsx
@@ -10,7 +10,7 @@ import { TallFooter } from "./TallFooter"
 interface MainLayoutProps {
   size?: "full" | MantineSize
   withoutAccountControl?: boolean
-  footerSize?: "small" | "tall"
+  footerSize?: "small" | "tall" | "none"
   backgroundImage?: boolean
   children: ReactNode
 }

diff --git a/src/components/home/Home.module.css b/src/components/home/Home.module.css
@@ -1,31 +1,39 @@
-.wrapper {
-  padding-top: 180px;
-  padding-bottom: 150px;
-
-  @media (max-width: $mantine-breakpoint-xs) {
-    padding-top: 80px;
-    padding-bottom: 50px;
-  }
+.hero {
+  position: relative;
+  background-size: cover;
+  background-position: center;
 }
 
-.inner {
-  position: relative;
+.container {
+  height: rem(700px);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  padding-bottom: calc(var(--mantine-spacing-xl) * 6);
   z-index: 1;
+  position: relative;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    height: rem(500px);
+    padding-bottom: calc(var(--mantine-spacing-xl) * 3);
+  }
 }
 
 .title {
-  font-weight: 800;
-  font-size: 60px;
-  letter-spacing: -1px;
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-xs);
-  text-align: center;
-  font-family: "Greycliff CF", var(--mantine-font-family);
+  color: var(--mantine-color-white);
+  font-size: rem(50px);
+  font-weight: 900;
+  line-height: 1.1;
+
+  @media (max-width: $mantine-breakpoint-sm) {
+    font-size: rem(40px);
+    line-height: 1.2;
+  }
 
   @media (max-width: $mantine-breakpoint-xs) {
-    font-size: 28px;
-    text-align: left;
+    font-size: rem(28px);
+    line-height: 1.3;
   }
 
   @mixin light {
@@ -42,13 +50,14 @@
 }
 
 .description {
-  text-align: center;
+  color: var(--mantine-color-white);
+  max-width: rem(600px);
   font-weight: 500;
-  font-size: var(--mantine-font-size-xl);
+  text-align: center;
 
-  @media (max-width: $mantine-breakpoint-xs) {
-    font-size: var(--mantine-font-size-md);
-    text-align: left;
+  @media (max-width: $mantine-breakpoint-sm) {
+    max-width: 100%;
+    font-size: var(--mantine-font-size-sm);
   }
 
   @mixin light {
@@ -62,13 +71,9 @@
 
 .controls {
   margin-top: calc(var(--mantine-spacing-xl) * 1.5);
-  display: flex;
-  justify-content: center;
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
 
-  @media (max-width: $mantine-breakpoint-xs) {
-    flex-direction: column;
+  @media (max-width: $mantine-breakpoint-sm) {
+    width: 100%;
   }
 }
 
@@ -95,5 +100,12 @@
 
 .secondaryControl {
   color: var(--mantine-color-white);
-  background-color: var(--mantine-color-gray-5);
+  background-color: var(--mantine-color-gray-6);
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx
@@ -1,11 +1,12 @@
-import { Title, Text, Image, Flex, Container, Button } from "@mantine/core"
+import { Title, Text, Image, Flex, Container, Button, Group } from "@mantine/core"
 import cx from "clsx"
 import NextImage from "next/image"
 import Link from "next/link"
 import { appConfig } from "~/appConfig"
 import { useSiteTranslation } from "~/hooks/useSiteTranslation"
 import { useUser } from "~/hooks/useUser"
 import logo from "~/images/logo.png"
+import { CopyrightMessage } from "../common/CopyrightMessage"
 import classes from "./Home.module.css"
 
 export const Home = () => {
@@ -14,44 +15,41 @@ export const Home = () => {
   const loggedIn = !!user
 
   return (
-    <div className={classes.wrapper}>
-      <div className={classes.inner}>
-        <Title className={classes.title}>
-          <Flex direction="row" justify="center" align="center" gap="md">
-            {t("Home.welcomeText")}
-            <Image component={NextImage} src={logo} alt="Logo" h={100} w={100} />
-            <Text
-              inherit
-              variant="gradient"
-              gradient={{ from: "cyan", to: "teal", deg: 100 }}
-              component="span"
-            >
-              {appConfig.medreporterTitle}
-            </Text>
-          </Flex>
-        </Title>
-
-        <Container size={640}>
-          <Text size="lg" className={classes.description}>
-            {t("Home.homeDescription")}
+    <Container className={classes.container} size="md">
+      <Title className={classes.title}>
+        <Flex direction="row" justify="center" align="center" gap="md">
+          {t("Home.welcomeText")}
+          <Image component={NextImage} src={logo} alt="Logo" h={100} w={100} />
+          <Text
+            inherit
+            variant="gradient"
+            gradient={{ from: "cyan", to: "teal", deg: 100 }}
+            component="span"
+          >
+            {appConfig.medreporterTitle}
           </Text>
-        </Container>
-
-        <div className={classes.controls}>
-          <Link href="/templates" legacyBehavior>
-            <Button className={classes.control} variant="white" size="lg">
-              {t("Home.templatesTitle")}
+        </Flex>
+      </Title>
+      <Text size="xl" mt="xl" className={classes.description}>
+        {t("Home.homeDescription")}
+      </Text>
+      <Group className={classes.controls}>
+        <Link href="/templates" legacyBehavior>
+          <Button className={classes.control} variant="white" size="lg">
+            {t("Home.templatesTitle")}
+          </Button>
+        </Link>
+        {loggedIn && (
+          <Link href="/templates/new" legacyBehavior>
+            <Button className={cx(classes.control, classes.secondaryControl)} size="lg">
+              {t("Home.newTitle")}
             </Button>
           </Link>
-          {loggedIn && (
-            <Link href="/templates/new" legacyBehavior>
-              <Button className={cx(classes.control, classes.secondaryControl)} size="lg">
-                {t("Home.newTitle")}
-              </Button>
-            </Link>
-          )}
-        </div>
+        )}
+      </Group>
+      <div className={classes.footer}>
+        <CopyrightMessage />
       </div>
-    </div>
+    </Container>
   )
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -31,6 +31,10 @@ const HomePage: PageWithLayout = () => {
   )
 }
 
-HomePage.getLayout = (page: ReactElement) => <MainLayout backgroundImage>{page}</MainLayout>
+HomePage.getLayout = (page: ReactElement) => (
+  <MainLayout backgroundImage footerSize="none">
+    {page}
+  </MainLayout>
+)
 
 export default HomePage
diff --git a/src/pages/templates/index.tsx b/src/pages/templates/index.tsx
@@ -40,6 +40,6 @@ const TemplatesPage: PageWithLayout = () => {
   )
 }
 
-TemplatesPage.getLayout = (page) => <MainLayout size="full">{page}</MainLayout>
+TemplatesPage.getLayout = (page) => <MainLayout size="xl">{page}</MainLayout>
 
 export default TemplatesPage