feat: enhance new homepage UI (#56)

mocha-bot · Nov 25, 2024 · cdae977 · cdae977
1 parent 4a7ccca
commit cdae977
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 40 deletions.
diff --git a/src/modules/landingPage/Discover.tsx b/src/modules/landingPage/Discover.tsx
@@ -114,17 +114,43 @@ function Discover() {
     <Flex
       w='full'
       h='full'
-      maxW='5xl'
       justifyContent='space-between'
       alignItems='flex-start'
       flexDirection='column'
-      gap={8}
       py={{ base: 8, md: 24 }}
       color='white'>
-      <Text as='h2' fontWeight='semibold' fontSize='3xl'>
+      <Text
+        as='h2'
+        fontWeight='semibold'
+        fontSize={{
+          base: '16px',
+          md: '20px',
+        }}>
         Discover Room
       </Text>
-      <Text as='h2' fontWeight='light' fontSize='3xl'>
+      <Text
+        as='h2'
+        mt={{
+          base: 8,
+          md: 6,
+        }}
+        mb={{
+          base: 14,
+          md: 20,
+        }}
+        fontWeight='500'
+        maxW={{
+          base: 'full',
+          md: '80%',
+        }}
+        lineHeight={{
+          base: '40px',
+          md: '64px',
+        }}
+        fontSize={{
+          base: '40px',
+          md: '64px',
+        }}>
         Like others, join, connect, and have mocha time together
       </Text>
       {isMobile ? (

diff --git a/src/modules/landingPage/Features.tsx b/src/modules/landingPage/Features.tsx
@@ -22,8 +22,7 @@ function Card({ title, description, imageUrl }: CardProps) {
       color='white'
       justifyContent='flex-start'
       alignItems='flex-start'
-      flexDirection='column'
-      p={4}>
+      flexDirection='column'>
       <Image src={imageUrl} alt={title} borderRadius='lg' w='full' />
       <Box py={4}>
         <Text fontWeight='bold' fontSize='xl'>
@@ -66,7 +65,13 @@ function Title() {
       alignItems='center'
       color='white'
       gap={4}>
-      <Text as='h4' fontWeight='semibold'>
+      <Text
+        as='h4'
+        fontWeight='semibold'
+        fontSize={{
+          base: '16px',
+          md: '20px',
+        }}>
         Our Features
       </Text>
       <Flex
@@ -78,7 +83,10 @@ function Title() {
         letterSpacing='tighter'
         w='full'
         maxW={160}>
-        <Text as='h2' fontSize={{ base: '4xl', md: '5xl' }} lineHeight='none'>
+        <Text
+          as='h2'
+          fontSize={{ base: '28px', md: '48px' }}
+          lineHeight={{ base: '28px', md: '48px' }}>
           Arrange Your Mocha Time With Ease
         </Text>
       </Flex>
@@ -106,9 +114,12 @@ function Features() {
         flexDirection='column'
         gap={8}
         py={10}
-        px={4}>
+        px={{
+          base: 4,
+          md: 10,
+        }}>
         <Title />
-        <SimpleGrid columns={[1, 3]} gap={4}>
+        <SimpleGrid columns={[1, 3]} gap={6}>
           {features.map((feature) => (
             <Card
               key={feature.title}

diff --git a/src/modules/landingPage/Hero.tsx b/src/modules/landingPage/Hero.tsx
@@ -103,6 +103,7 @@ export function Hero() {
                       alt={`${social.name} Icon`}
                     />
                   }
+                  _hover={{ backgroundColor: 'rgba(255, 255, 255, 0.4)' }}
                 />
               </Link>
             ))}

diff --git a/src/modules/landingPage/Invitation.tsx b/src/modules/landingPage/Invitation.tsx
@@ -1,32 +1,56 @@
-import { Box, Flex, Image, Text, useBreakpointValue } from '@chakra-ui/react';
+import { Box, Flex, Image, Text } from '@chakra-ui/react';
 import getConfig from 'next/config';
 
 import Button from '@/uikit/Button';
 
 const { publicRuntimeConfig } = getConfig();
 
 function Invitation() {
-  const isMobile = useBreakpointValue({ base: true, md: false });
-
   return (
     <Flex
       w='full'
       h='full'
-      maxW={{ base: 'full', md: '5xl' }}
       justifyContent='space-between'
       alignItems='center'
-      flexDirection='row'
+      flexDirection={{
+        base: 'column-reverse',
+        md: 'row',
+      }}
       gap={8}
       py={40}
+      px={{
+        base: 0,
+        md: 12,
+      }}
       color='white'>
       <Flex flexDirection='column' gap={10} w='full'>
-        <Box maxW={{ base: 'full', md: 140 }}>
-          <Text as='h2' fontWeight='semibold' fontSize='5xl'>
+        <Box maxW={{ base: 'full', md: '85%' }}>
+          <Text
+            as='h2'
+            fontWeight='semibold'
+            fontSize={{
+              base: '40px',
+              md: '64px',
+            }}
+            lineHeight={{
+              base: '40px',
+              md: '64px',
+            }}>
             Lets get have a mocha time together
           </Text>
         </Box>
         <Box maxW={96}>
-          <Text as='h3' fontWeight='light' fontSize='xl'>
+          <Text
+            as='h3'
+            fontWeight='light'
+            fontSize={{
+              base: '16px',
+              md: '20px',
+            }}
+            lineHeight={{
+              base: '20px',
+              md: '25px',
+            }}>
             Invite mocha from your dashboard now and enjoy connect to others
             with ease. Just right under your own server
           </Text>
@@ -42,15 +66,20 @@ function Invitation() {
           Invite to server
         </Button>
       </Flex>
-      {!isMobile && (
-        <Image
-          src='/assets/images/logo-mocha-base.svg'
-          width='logo.width.xl'
-          height='logo.height.xl'
-          alt='Mocha Logo'
-          color='white'
-        />
-      )}
+      <Image
+        ml='auto'
+        src='/assets/images/logo-mocha-base.svg'
+        width={{
+          base: 'logo.width.lg',
+          md: 'logo.width.xl',
+        }}
+        height={{
+          base: 'logo.height.lg',
+          md: 'logo.height.xl',
+        }}
+        alt='Mocha Logo'
+        color='white'
+      />
     </Flex>
   );
 }

diff --git a/src/theme/button.ts b/src/theme/button.ts
@@ -3,6 +3,7 @@ import { defineStyleConfig } from '@chakra-ui/react';
 const Button = defineStyleConfig({
   variants: {
     glass: {
+      whiteSpace: 'nowrap',
       color: 'white',
       rounded: 56,
       opacity: 0.8,
@@ -29,6 +30,7 @@ const Button = defineStyleConfig({
       },
     },
     'glass-ghost': {
+      whiteSpace: 'nowrap',
       color: 'white',
       opacity: 0.8,
       fontSize: 'sm',

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -11,11 +11,13 @@ const theme = extendTheme({
       width: {
         base: '20px',
         md: '119px',
+        lg: '209px',
         xl: '297px',
       },
       height: {
         base: '20px',
         md: '48px',
+        lg: '209px',
         xl: '297px',
       },
     },

diff --git a/src/uikit/Container.tsx b/src/uikit/Container.tsx
@@ -3,8 +3,14 @@ import type { FlexProps } from '@chakra-ui/react';
 
 export function Container(props: FlexProps) {
   return (
-    <Flex px={{ base: 5, lg: 10 }} w='100%' flexDir='column' {...props}>
-      {props.children}
+    <Flex
+      w='100%'
+      px={{ base: 5, lg: 10 }}
+      flexDir='column'
+      justifyContent='center'>
+      <Flex mx='auto' w='100%' maxW='1200px' flexDir='column' {...props}>
+        {props.children}
+      </Flex>
     </Flex>
   );
 }
diff --git a/src/uikit/Footer.tsx b/src/uikit/Footer.tsx
@@ -1,6 +1,5 @@
 import {
   Box,
-  Container,
   Image,
   Link,
   SimpleGrid,
@@ -11,6 +10,8 @@ import {
 
 import type { FooterInformation } from '@/types/Footer';
 
+import { Container } from './Container';
+
 type SubTitleProps = {
   title: string;
 };
@@ -20,7 +21,10 @@ function SubTitle({ title }: SubTitleProps) {
     <Text
       color='white'
       fontWeight='medium'
-      fontSize='sm'
+      fontSize={{
+        base: '16px',
+        md: '12px',
+      }}
       letterSpacing='widest'
       textTransform='uppercase'>
       {title}
@@ -38,7 +42,7 @@ export function Footer({ informations }: FooterProps) {
 
   return (
     <Box background='black'>
-      <Container as={Stack} maxW='6xl' py={16} px={10}>
+      <Container py={16}>
         <SimpleGrid
           templateColumns={{ sm: '1fr 1fr', md: '4fr 2fr 2fr' }}
           spacing={8}>
@@ -53,27 +57,50 @@ export function Footer({ informations }: FooterProps) {
                 height='logo.height.md'
                 alt='Mocha Logo'
               />
-              <Box color='subtitle'>
-                <Text fontSize='sm'>Your trusted bot for connecting</Text>
-                <Text fontSize='sm'>multi-chat cross-server</Text>
+              <Box color='subtitle' ml={2}>
+                <Text
+                  fontSize={{
+                    base: '16px',
+                    md: '12px',
+                  }}>
+                  Your trusted bot for connecting
+                </Text>
+                <Text
+                  fontSize={{
+                    base: '16px',
+                    md: '12px',
+                  }}>
+                  multi-chat cross-server
+                </Text>
               </Box>
             </Stack>
             {!isMobile && (
-              <Text fontSize='sm' color='subtitle'>
+              <Text
+                fontSize={{
+                  base: '16px',
+                  md: '12px',
+                }}
+                color='subtitle'
+                ml={2}>
                 Copyright © 2022 - {currentYear} Mocha
               </Text>
             )}
           </Stack>
           {/* information */}
           {informations?.map((information) => (
-            <Stack key={information.title} align='flex-start' gap={4}>
+            <Stack key={information.title} align='flex-start' gap={4} ml={2}>
               <SubTitle title={information.title} />
               {information.items.map((item) => (
                 <Link
                   href={item.href}
                   _hover={{ textDecoration: 'none' }}
                   key={item.title}>
-                  <Text fontWeight='hairline' fontSize='sm' color='subtitle'>
+                  <Text
+                    fontWeight='hairline'
+                    fontSize={{
+                      base: '16px',
+                      md: '12px',
+                    }}>
                     {item.title}
                   </Text>
                 </Link>
@@ -83,8 +110,13 @@ export function Footer({ informations }: FooterProps) {
         </SimpleGrid>
       </Container>
       {isMobile && (
-        <Box w='full' px={10} py={4} textAlign='center'>
-          <Text fontSize='sm' color='subtitle'>
+        <Box w='full' px={10} mt={-4} pb={8} textAlign='center'>
+          <Text
+            fontSize={{
+              base: '16px',
+              md: '12px',
+            }}
+            color='subtitle'>
             Copyright © 2020 - {currentYear} Mocha
           </Text>
         </Box>