homepage design, author and category card has been done.

day-15/bs-store/src/App.js

@@ -21,6 +21,8 @@ import UpdateCategory from "./adminpages/categories/UpdateCategory";
 import AddBook from "./adminpages/books/AddBook";
 import Login from "./pages/login/Login";
 import BookList from "./pages/book/BookList";
+import CategoryList from "./pages/category/CategoryList";
+import AuthorList from "./pages/author/AuthorList";
 
 
 function App() {
@@ -60,6 +62,8 @@ function App() {
         <Route path="/auth/login" element={<Login />} />
 
         <Route path="/books" element={<BookList />} />
+        <Route path="/categories" element={<CategoryList />} />
+        <Route path="/authors" element={<AuthorList />} />
 
         <Route path='/' element={<Home />} />
       </Routes>

day-15/bs-store/src/components/author/AuthorCard.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+import { CardActionArea } from '@mui/material';
+
+export default function AuthorCard({ author }) {
+
+    return (
+        <Card sx={{ maxWidth: 200 }}>
+          <CardActionArea>
+            <CardMedia
+              component="img"
+              height="200"
+              image={`/authors/${author.id % 120}.jpg`}
+              alt="green iguana"
+            />
+            <CardContent>
+              <Typography gutterBottom variant="h5" component="div">
+                {author.firstName} {author.lastName}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {author.email}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+        </Card>
+      );
+}

day-15/bs-store/src/components/author/AuthorCardList.js

@@ -0,0 +1,27 @@
+import Grid from "@mui/material/Grid";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getAllAuthors } from "../../store/actions/authorActions";
+import AuthorCard from "./AuthorCard";
+
+
+export default function AuthorCardList() {
+  const { authors } = useSelector((state) => state.author);
+  const authorDispatch = useDispatch();
+
+  useEffect(() => {
+    authorDispatch(getAllAuthors());
+  }, []);
+
+  return (
+    <div>
+      <Grid sx={{ mt: 1, padding: 1 }} container spacing={1}>
+        {authors?.map((author) => (
+          <Grid spacing={1} item xs={5} md={3} lg={2}>
+            <AuthorCard key={author.id} author={author}></AuthorCard>
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  );
+}

day-15/bs-store/src/components/banner/index.js

@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { BannerContainer, BannerContent, BannerDescription, BannerImage, BannerTitle } from "./styles";
+
+
+export default function Banner() {
+    // const theme = useTheme();
+
+    return(
+        <BannerContainer>
+            <BannerImage src="/banner/banner.jpg"></BannerImage>
+            <BannerContent>
+                <Typography variant='h6'>HUGE COLLECTION</Typography>
+                <BannerTitle variant='h2'>NEW BOOKS</BannerTitle>
+
+                <BannerDescription variant='subtitle'>
+                Lorem ipsum dolor sit amet. Eum enim atque a laudantium nobis non 
+                dolores porro et libero corporis ea quia numquam.
+                </BannerDescription>
+            </BannerContent>
+        </BannerContainer>
+    )
+}

day-15/bs-store/src/components/banner/styles.js

@@ -0,0 +1,38 @@
+import { Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { Box } from "@mui/system";
+
+export const BannerContainer = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    padding: '0px 0px',
+    backgroundColor: '#efebe9'
+
+}));
+
+export const BannerImage = styled('img')(({src}) => ({
+    src: `url(${src})`,
+    width: '500px'
+}))
+
+export const BannerContent = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    maxwidth: 420,
+    padding: '30px'
+}));
+
+export const BannerTitle = styled(Typography)(() => ({
+    lineHeight: 1.5,
+    fontSize: '72px',
+    marginBottom: '20px'
+}));
+
+export const BannerDescription = styled(Typography)(() => ({
+    lineHeight: 1.25,
+    letterSpacing: 1.25,
+    marginBottom: '3em'
+}))

day-15/bs-store/src/components/book/BookCard.js

@@ -36,11 +36,7 @@ export default function BookCard({book}) {
   return (
     <Card sx={{ maxWidth: 345 }}>
       <CardHeader
-        action={
-          <IconButton aria-label="settings">
-            <MoreVertIcon />
-          </IconButton>
-        }
+
         title={book.title}
         subheader={book.publisher}
         sx={{minHeight: 80}}
@@ -49,25 +45,23 @@ export default function BookCard({book}) {
         component="img"
         height="194"
         image={`/books/${book.id%120}.jpg`}
-        alt="Paella dish"
+        alt="book image"
         sx={{ objectFit: "contain" }}
       />
       <CardContent sx={{minHeight: 80}}>
       {book.bookAuthors.map((authors) => {
           return (
-            <Typography variant="body2" color="text.secondary" align="center" justifySelf={"center"}>
-              {authors.firstName} {authors.lastName}
-            </Typography>
+            <Typography align='center'>{authors.firstName} {authors.lastName}</Typography>
           );
         })}
+      <Typography paragraph>{book.price} TL</Typography>
+
       </CardContent>
       <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
           <FavoriteIcon />
         </IconButton>
-        <IconButton aria-label="share">
-          <ShareIcon />
-        </IconButton>
+
         <ExpandMore
           expand={expanded}
           onClick={handleExpandClick}
@@ -78,9 +72,9 @@ export default function BookCard({book}) {
         </ExpandMore>
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
-        <CardContent>
-        <Typography paragraph>{book.category.categoryName}</Typography>
-          <Typography paragraph>{book.category.description}</Typography>
+        <CardContent>               
+          <Typography paragraph>Category: {book.category.categoryName}</Typography>
+          <Typography paragraph>Description: {book.category.description}</Typography>
         </CardContent>
       </Collapse>
     </Card>

day-15/bs-store/src/components/category/CategoryCard.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Collapse from '@mui/material/Collapse';
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme, expand }) => ({
+  transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+}));
+
+export default function CategoryCard({category}) {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card sx={{ maxWidth: 345 }}>
+      <CardHeader
+        avatar={
+          <Avatar sx={{ bgcolor: 'GrayText' }} aria-label="recipe">
+            {category.categoryName[0]}
+          </Avatar>
+        }
+
+        title={category.categoryName}
+        sx={{minHeight: 80}}
+      />
+
+      <CardActions disableSpacing>
+
+        <ExpandMore
+          expand={expanded}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </ExpandMore>
+
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Description:</Typography>
+          <Typography paragraph>
+            {category.description}
+          </Typography>
+
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}

day-15/bs-store/src/components/category/CategoryCardList.js

@@ -0,0 +1,27 @@
+import Grid from "@mui/material/Grid";
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getAllCategories } from "../../store/actions/categoryActions";
+import CategoryCard from "./CategoryCard";
+
+
+export default function CategoryCardList() {
+  const { categories } = useSelector((state) => state.category);
+  const categoryDispatch = useDispatch();
+
+  useEffect(() => {
+    categoryDispatch(getAllCategories());
+  }, []);
+
+  return (
+    <div>
+      <Grid sx={{ mt: 3, padding: 2 }} container spacing={3}>
+        {categories?.map((category) => (
+          <Grid spacing={3} item xs={8} md={5} lg={4}>
+            <CategoryCard key={category.id} category={category} />
+          </Grid>
+        ))}
+      </Grid>
+    </div>
+  );
+}