index page and adaptive

src/App.css

@@ -1,3 +0,0 @@
-*{
-  box-sizing: border-box;
-}

src/components/Question/Question.styles.ts

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+export const QuestionWrapper = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: "15px",
+  border: "3px solid #4B2981",
+  borderRadius: "10px",
+});
+
+export const QuestionTitle = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: "10px"
+});
+
+export const QuestionMetadata = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  color: "#4c4c4c",
+  marginTop: "10px"
+});
+
+export const AuthorMeta = styled("div")({
+  display: "flex",
+  justifyContent: "center",
+});

src/components/Question/Question.tsx

@@ -0,0 +1,51 @@
+import { Chip, Typography } from "@mui/material";
+import {
+  AuthorMeta,
+  QuestionMetadata,
+  QuestionTitle,
+  QuestionWrapper,
+} from "./Question.styles";
+import CategoryIcon from "@mui/icons-material/Category";
+import PersonIcon from "@mui/icons-material/Person";
+
+type Question = {
+  title: string;
+  category: string;
+  description: string;
+  difficulty: number;
+  author: string;
+};
+
+type QuestionProps = {
+  question: Question;
+};
+
+const Question = ({ question }: QuestionProps) => {
+  return (
+    <QuestionWrapper>
+      <QuestionTitle>
+        <Typography sx={{ mr: "10px" }} variant="h5">
+          {question.title}
+        </Typography>
+        <Chip
+          variant="outlined"
+          icon={<CategoryIcon />}
+          color="primary"
+          label={`${question.category}`}
+        />
+      </QuestionTitle>
+      <Typography variant="body1">{question.description}</Typography>
+      <QuestionMetadata>
+        <Typography variant="body1">
+          Difficulty: {question.difficulty}
+        </Typography>
+        <AuthorMeta>
+          <PersonIcon/>
+          <Typography variant="body1">{question.author}</Typography>
+        </AuthorMeta>
+      </QuestionMetadata>
+    </QuestionWrapper>
+  );
+};
+
+export default Question;

src/components/StartTestForm/StartTestForm.styles.tsx

@@ -1,13 +1,19 @@
 import styled from "@emotion/styled";
 
-export const StartTestWrapper = styled('div')({
-    color: "#fff",
-    minWidth: "600px",
-    backgroundColor: "#fff",
-    padding: "10px",
-    borderRadius: "10px",
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: "36px"
-})
+export const StartTestWrapper = styled("div")({
+  color: "#fff",
+  minWidth: "600px",
+  backgroundColor: "#fff",
+  padding: "10px",
+  borderRadius: "10px",
+  display: "flex",
+  justifyContent: "space-between",
+  marginBottom: "36px",
+  flexDirection: "row",
 
+  "@media (max-width: 1024px)": {
+    flexDirection: "column",
+    minWidth: "auto",
+    gap: "12px",
+  },
+});

src/index.css

@@ -1,3 +1,3 @@
 body {
   font-family: 'Roboto', sans-serif;
-}
+}

src/pages/IndexPage/IndexPage.tsx

@@ -2,21 +2,28 @@ import { Typography } from "@mui/material";
 import Container from "../../components/shared/Container";
 import { WelcomeContainer } from "./IndexPage.styles";
 import StartTestForm from "../../components/StartTestForm/StartTestForm";
+import Question from "../../components/Question/Question";
 
 const IndexPage = () => {
+
+const myQuestion = {
+  title: "Example Question",
+  category: "Math",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, urna eu aliquet tincidunt, augue turpis gravida risus, sit amet posuere neque tellus sit amet justo. Curabitur non facilisis orci, vitae eleifend est. Cras fermentum, velit at scelerisque varius, mauris justo cursus lacus, ac porttitor ante metus sit amet nibh. Vivamus imperdiet, diam vel efficitur euismod, urna odio pharetra ipsum, vitae sollicitudin neque enim ut tortor. Donec gravida orci.",
+  difficulty: 3,
+  author: "David"
+};
+
+
   return (
     <Container>
       <WelcomeContainer>
         <Typography variant="h2">Welcome To HoshiAI!</Typography>
         <Typography variant="subtitle1">The best place to learn!</Typography>
       </WelcomeContainer>
-      <StartTestForm/>
-      {/* <ButtonGroup>
-        <Button sx={{ backgroundColor: "#6610F2" }} variant="contained">
-          Im Feeling Lucky
-        </Button>
-      </ButtonGroup> */}
-      <Typography variant="h3">Browse Questions</Typography>
+      <StartTestForm />
+      <Typography sx={{mb:"36px"}} variant="h3">Browse Questions</Typography>
+      <Question question={myQuestion} />
     </Container>
   );
 };