made homepage

frontend/package.json

@@ -18,7 +18,8 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.0",
-    "react-router-dom": "^6.23.0"
+    "react-router-dom": "^6.23.0",
+    "react-type-animation": "^3.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

frontend/src/pages/Home.css

@@ -0,0 +1,29 @@
+.home-container{
+    background-image: url('https://giphy.com/embed/MDa6dnB0CABmv9N1X4');
+    background-repeat: no-repeat;
+    background-size: 100rem 100rem;
+    background-position: center;
+    backdrop-filter: grayscale(100%);
+    /* width: 100%;  */
+    /* aspect-ratio: 16/9; */
+}
+
+.gif-container{
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+#background-video{
+    position: absolute;
+    top: 85%;
+    left: 60%;
+    width: 200rem;
+    height: 200rem;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+}

frontend/src/pages/Home.tsx

@@ -1,9 +1,30 @@
+import { Box, Button } from '@mui/material'
 import React from 'react'
+import TypingAnimation from '../utils/TypingAnimation'
+
+import './Home.css'
 
 const Home = () => {
-  return (
-    <div>Home</div>
-  )
+  return <>
+    <Box className='home-container' width={'100%'} height={'100%'}>
+      <Box sx={{display: 'flex', width: '100%', height: '84.4vh', flexDirection: 'row', alignContent: 'center', mx: 'auto', mt: '3rem'}}>
+        <Box sx={{flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%', gap: 8}}>
+          <Box sx={{width: '100%', display:'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center', flex: 1}}><TypingAnimation /></Box>
+          <Box sx={{display: 'flex', gap: 5, alignItems: 'flex-start', justifyContent: 'space-evenly', flex: 1}}>
+            <Button variant='outlined' sx={{width: '10rem', height: '3rem', color: '#666', borderColor: '#999', borderRadius: '1rem', ':hover':{color: 'white', bgcolor: '#999', borderColor: '#999'}}} href='/login'>Log in</Button>
+            <Button variant='contained' sx={{width: '10rem', height: '3rem', color: 'white', backgroundColor: '#999', borderRadius: '1rem', ':hover':{bgcolor: '#333'}}} href='/signup'>Sign up</Button>
+          </Box>
+        </Box>
+        <Box sx={{flex: 1, display: {md:'flex', sm: 'none', xs: 'none'}, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '100%'}}>
+          {/* <img src='walle.png' alt='Robot homepage image' style={{objectFit: 'contain', position: 'relative', top: '-18%'}}></img> */}
+          <div className='gif-container'><video autoPlay muted loop id="background-video">
+            <source src="moon.mp4" type="video/mp4"/>
+            Your browser does not support the video tag.
+        </video></div>
+        </Box>
+      </Box>  
+    </Box>    
+  </>
 }
 
 export default Home

frontend/src/utils/TypingAnimation.tsx

@@ -0,0 +1,24 @@
+import { TypeAnimation } from 'react-type-animation';
+
+const TypingAnimation = () => {
+  return (
+    <>
+    <span style={{ fontSize: '2em', color: '#555', display: 'inline-block', textShadow: '1px 1px 20px #999' }}>Chat with your own AI</span>
+    <TypeAnimation
+      sequence={[
+        'Built with Gemini AI',
+        2000,
+        'Your own customized ChatGPT',
+        5000
+      ]}
+      wrapper="div"
+      speed={50}
+      style={{ fontSize: '2em', color: '#555', display: 'inline-block', textShadow: '1px 1px 20px #999' }}
+      repeat={Infinity}
+      preRenderFirstString={true}
+    />
+    </>
+  );
+};
+
+export default TypingAnimation;