[New] Index 화면 컴포넌트 추가

 import React, { useEffect } from 'react'
-import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
-import { Container } from '@chakra-ui/react'
+import { BrowserRouter, Route, Redirect, Switch, Link, useHistory } from 'react-router-dom'
+import {
+  Container,
+  Heading,
+  Button,
+  Segment,
+  Message,
+  Form,
+  Input,
+  Transition,
+  Select,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  VStack,
+  Stack,
+  StackDivider,
+  Box,
+  Text,
+  List, ListItem, ListIcon, OrderedList, UnorderedList,
+  Table,
+  Thead,
+  Tbody,
+  Tfoot,
+  Tr,
+  Th,
+  Td,
+  TableCaption,
+  Flex,
+  HStack,
+  Wrap,
+} from '@chakra-ui/react'
+import {
+  Divider,
+} from 'semantic-ui-react'
+
+
+const Feature = ({ title, desc, ...rest }) => {
+  return (
+    <Box p={5} shadow="md" borderWidth="1px" {...rest}>
+      <Heading fontSize="xl">{title}</Heading>
+      <Text mt={4}>{desc}</Text>
+    </Box>
+  )
+}
 
 
 const Index = () => {
+  const history = useHistory()
+
   return (
     <Container>
-      asdfasdfasdf
+      <Divider hidden />
+      <Wrap justify="right">
+        <Button size="xs" colorScheme="blue" variant="outline"
+                onClick={() => history.push('/sign-in') }
+        >
+          SIGN IN
+        </Button>
+        <Button size="xs" colorScheme="blue"
+                onClick={() => history.push('/sign-up') }
+        >
+          SIGN UP
+        </Button>
+      </Wrap>
+
+      <Heading>The Infrastructure Cloud</Heading>
+      <Text>Easily deploy cloud servers, bare metal, and storage worldwide!</Text>
+
+      <Divider hidden />
+
+
+      <Stack  spacing={8}>
+        <Feature
+          title='Cloud Compute'
+          desc='Powerful compute instances with Intel CPUs and 100% SSD storage.'
+        />
+
+        <Feature
+          title='Bare Metal'
+          desc='Fully automated dedicated servers with zero virtualization layer.'
+        />
+      </Stack >
+
+      <Divider hidden />
+
+      <Stack  spacing={8}>
+        <Feature
+          title='Block Storage'
+          desc='Fast SSD-backed scalable and redundant storage with up to 10TB volumes.'
+        />
+
+        <Feature
+          title='Dedicated Cloud'
+          desc='Dedicated cloud compute instances without the noisy neighbors.'
+        />
+      </Stack >
+
+      <Divider hidden />
     </Container>
   )
 }