Add carousel to index

pages/index.js

@@ -1,12 +1,26 @@
+import {useState} from 'react'
+import {Button, useMediaQuery} from '@material-ui/core'
 import axios from 'axios'
+
 import HeadLayout from '../components/head-layout'
+import Carousel from '../components/carousel'
 
 export default function Home() {
+  const [handleOpen, setHandleOpen] = useState(false)
+  const handleClick = () => {
+    setHandleOpen(true)
+  }
+
+  const matches = useMediaQuery('(max-width:600px)')
+
   return (
     <HeadLayout tab={0}>
-      <div>
-        Kay-la
-      </div>
+      <Button onClick={handleClick}>Open carousel</Button>
+      <Carousel
+        isMobile={matches}
+        handleOpen={handleOpen}
+        setHandleOpen={setHandleOpen}
+      />
     </HeadLayout>
   )
 }