feat: hero desktop (#39)

* feat: hero desktop

* fix: style fixed value

src/modules/LandingPage/Hero.tsx

@@ -0,0 +1,100 @@
+import {
+  Button,
+  HStack,
+  IconButton,
+  Image,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+
+export function Hero() {
+  return (
+    <VStack
+      w='100%'
+      px={{ base: 4, md: 8, lg: '6rem' }}
+      mt={{ base: 8, md: 12, lg: '11rem' }}
+      alignItems='flex-start'
+      spacing='3rem'>
+      <VStack maxW='60%' alignItems='flex-start' spacing={12}>
+        <Text
+          color='white'
+          fontSize={{ base: '2xl', md: '4xl', lg: '6xl' }}
+          lineHeight='normal'
+          fontWeight='bold'>
+          Drink mocha with people accross the universe
+        </Text>
+        <Text color='white' fontSize={20} lineHeight='normal' fontWeight={400}>
+          Mocha is a Discord bot for multi-chat cross-server, that allows you to
+          send messages to multiple channels at once.{' '}
+        </Text>
+      </VStack>
+      <HStack w='100%' justifyContent='space-between'>
+        <HStack>
+          <Button
+            size='lg'
+            color='white'
+            rounded='full'
+            backgroundColor='rgba(1, 1, 1, 0.40)'
+            fontSize='sm'
+            fontWeight={500}
+            variant='outline'>
+            Discover More
+          </Button>
+          <Button
+            size='lg'
+            color='white'
+            rounded='full'
+            fontSize='sm'
+            fontWeight={500}
+            variant='ghost'>
+            See Documentation
+          </Button>
+        </HStack>
+        <HStack spacing={8}>
+          <IconButton
+            isRound
+            backgroundColor='rgba(255, 255, 255, 0.20)'
+            p='6px'
+            aria-label='discord mocha'
+            icon={
+              <Image
+                src='assets/icons/discord-fill.svg'
+                width={8}
+                height={8}
+                alt='Discord Icon'
+              />
+            }
+          />
+          <IconButton
+            isRound
+            backgroundColor='rgba(255, 255, 255, 0.20)'
+            p='6px'
+            aria-label='github mocha'
+            icon={
+              <Image
+                src='assets/icons/github-fill.svg'
+                width={8}
+                height={8}
+                alt='Github Icon'
+              />
+            }
+          />
+          <IconButton
+            isRound
+            backgroundColor='rgba(255, 255, 255, 0.20)'
+            p='6px'
+            aria-label='product hunt mocha'
+            icon={
+              <Image
+                src='assets/icons/product-hunt-fill.svg'
+                width={8}
+                height={8}
+                alt='Product Hunt Icon'
+              />
+            }
+          />
+        </HStack>
+      </HStack>
+    </VStack>
+  );
+}

src/modules/LandingPage/LandingPageContainer.tsx

@@ -1,11 +1,11 @@
-import { Box } from '@chakra-ui/react';
-
 import Layout from '@/uikit/Layout';
 
+import { Hero } from './Hero';
+
 export function LandingPageContainer() {
   return (
     <Layout>
-      <Box />
+      <Hero />
     </Layout>
   );
 }

src/uikit/Layout.tsx

@@ -15,7 +15,7 @@ function Layout({ children }: LayoutProps) {
       backgroundRepeat='no-repeat'
       backgroundSize='cover'>
       <Header />
-      <Box as='main' pt='8' h='100vh'>
+      <Box as='main' pt='8' h='100vh' zIndex={999}>
         {children}
       </Box>
       <Footer />