Finish layout of home carousel

src/pages/Home/Home.tsx

-import { Typography } from 'antd';
-
 import usePageTitle from '../../hooks/usePageTitle';
 
 import { HomeCarousel } from './HomeCarousel';
@@ -7,13 +5,7 @@ import { HomeCarousel } from './HomeCarousel';
 const Home = () => {
 	usePageTitle('Home');
 
-	return (
-		<>
-			<Typography>Add text</Typography>
-			<HomeCarousel />
-			<Typography>Add text</Typography>
-		</>
-	);
+	return <HomeCarousel />;
 };
 
 export default Home;

src/pages/Home/HomeCarousel.tsx

-import { Carousel } from 'antd';
+import { Carousel, Typography } from 'antd';
 import { useMemo, useState } from 'react';
 
 import { useLoggedInUser } from '../../hooks/useLoggedInUser';
@@ -15,6 +15,7 @@ type SlideProps = {
 	isLoggedIn: boolean;
 	setAuthModalType: SetAuthModalType;
 	setIsAuthModalVisible: SetIsAuthModalVisible;
+	text: string;
 	imagePath: string;
 };
 
@@ -22,10 +23,11 @@ const Slide = ({
 	isLoggedIn,
 	setAuthModalType,
 	setIsAuthModalVisible,
+	text,
 	imagePath
 }: SlideProps) => {
 	const containerStyle = {
-		height: '800px',
+		height: '95vh',
 		backgroundImage: `url("${imagePath}")`,
 		backgroundSize: 'cover',
 		backgroundPosition: 'center',
@@ -37,7 +39,26 @@ const Slide = ({
 	return (
 		<div style={containerStyle}>
 			{!isLoggedIn ? (
-				<>
+				<div
+					style={{
+						background: '#eeeeee',
+						padding: 50,
+						display: 'flex',
+						flexDirection: 'column',
+						justifyContent: 'center',
+						alignItems: 'center'
+					}}
+				>
+					<Typography
+						style={{ fontSize: 65, fontWeight: 'bold', textAlign: 'center' }}
+					>
+						{text}
+					</Typography>
+					<div
+						style={{
+							display: 'flex'
+						}}
+					>
 						<SignInButton
 							setAuthModalType={setAuthModalType}
 							setIsAuthModalVisible={setIsAuthModalVisible}
@@ -46,18 +67,19 @@ const Slide = ({
 							setAuthModalType={setAuthModalType}
 							setIsAuthModalVisible={setIsAuthModalVisible}
 						/>
-				</>
+					</div>
+				</div>
 			) : null}
 		</div>
 	);
 };
 
-// replace placeholders with website screenshots
-const imagePaths = [
-	'/placeholder.png',
-	'/placeholder.png',
-	'/placeholder.png',
-	'/placeholder.png'
+// TODO: replace placeholders with website screenshots
+const slideData = [
+	{ imagePath: '/placeholder.png', text: 'Fight pokemons' }, // TODO: place image from game
+	{ imagePath: '/placeholder.png', text: 'Buy items' }, // TODO: place image from store
+	{ imagePath: '/placeholder.png', text: 'Reach the top' }, // TODO: place image from leaderboard
+	{ imagePath: '/placeholder.png', text: 'Know your enemies' } // TODO: place image from encyclopedia
 ];
 
 export const HomeCarousel = () => {
@@ -70,13 +92,14 @@ export const HomeCarousel = () => {
 	return (
 		<>
 			<Carousel autoplay>
-				{imagePaths.map((path, idx) => (
+				{slideData.map(({ imagePath, text }, idx) => (
 					<Slide
 						key={idx}
+						text={text}
 						setIsAuthModalVisible={setIsAuthModalVisible}
 						setAuthModalType={setAuthModalType}
 						isLoggedIn={isLoggedIn}
-						imagePath={path}
+						imagePath={imagePath}
 					/>
 				))}
 			</Carousel>