feat: 🎸 style the detail page and bottom the fotter

src/App.jsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import "./App.css";
 import Header from "./components/Header/Header";
 import Footer from "./components/Footer/Footer";
@@ -10,10 +9,8 @@ import About from "./components/About";
 import Contact from "./components/Contact";
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
-    <>
+    <div style={{ position: "relative" }}>
       <Header />
       <Routes>
         <Route path='/fer-lab1/' element={<Content />} />
@@ -23,7 +20,7 @@ function App() {
         <Route path='/fer-lab1/contact' element={<Contact />} />
       </Routes>
       <Footer />
-    </>
+    </div>
   );
 }
 

src/components/About.jsx

@@ -70,7 +70,6 @@ export default function About() {
         minHeight: "100vh",
         backgroundColor: theme.mainContent.backgroundColor,
         color: theme.text.primary,
-        paddingBottom: "604px",
       }}
     >
       <Container

src/components/Contact.jsx

@@ -52,7 +52,6 @@ export default function Contact() {
         minHeight: "100vh",
         backgroundColor: theme.mainContent.backgroundColor,
         color: theme.text.primary,
-        paddingBottom: "36px",
       }}
     >
       <Container

src/components/Footer/Footer.css

@@ -22,8 +22,9 @@ main {
 }
 
 .footer {
+  bottom: 0;
   flex-shrink: 0;
-  bottom: -100px;
+  /* bottom: -100px; */
   left: 0;
   width: 100%;
   transition: bottom 0.3s ease-in-out;

src/components/OrchidDetail.jsx

@@ -1,12 +1,24 @@
-import React from "react";
+import React, { useContext } from "react";
 import { useParams, useNavigate } from "react-router-dom";
-import { Box, Typography, Button, Rating } from "@mui/material";
+import {
+  Box,
+  Typography,
+  Button,
+  Rating,
+  Paper,
+  Chip,
+  Divider,
+  Container,
+} from "@mui/material";
+import { Grid } from "@mui/joy";
 import { Orchids } from "../ListOfOrchids";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import CategoryIcon from "@mui/icons-material/Category";
 import ColorLensIcon from "@mui/icons-material/ColorLens";
-import { useContext } from "react";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import StarIcon from "@mui/icons-material/Star";
 import { ThemeContext } from "../themes/ThemeContext";
+import { AspectRatio } from "@mui/joy";
 
 export default function OrchidDetail() {
   const { id } = useParams();
@@ -15,71 +27,134 @@ export default function OrchidDetail() {
   const { theme } = useContext(ThemeContext);
 
   if (!orchid) {
-    return <Typography>Orchid not found</Typography>;
+    return (
+      <Container
+        maxWidth='lg'
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+          bgcolor: theme.mainContent.backgroundColor,
+        }}
+      >
+        <Typography variant='h4' color={theme.text.primary}>
+          Orchid not found
+        </Typography>
+      </Container>
+    );
   }
 
   return (
-    <Box
+    <Container
+      maxWidth={false}
       sx={{
-        maxWidth: 800,
-        margin: "auto",
-        padding: 4,
         color: theme.text.primary,
         bgcolor: theme.mainContent.backgroundColor,
+        py: 4,
       }}
     >
       <Button
         onClick={() => navigate("/fer-lab1")}
-        variant='outlined'
-        sx={{ mb: 2 }}
+        variant='contained'
+        startIcon={<ArrowBackIcon />}
+        sx={{ mb: 3, backgroundColor: theme.button.primary }}
       >
         Back to List
       </Button>
-      <img
-        src={orchid.image}
-        alt={orchid.name}
-        style={{
-          width: "100%",
-          height: 400,
-          objectFit: "cover",
-          marginBottom: 2,
+      <Paper
+        elevation={3}
+        sx={{
+          overflow: "hidden",
+          borderRadius: 2,
+          backgroundColor: theme.mainContent.backgroundColor,
+          color: theme.text.primary,
         }}
-      />
-      <Typography variant='h3' component='h1' gutterBottom>
-        {orchid.name}
-      </Typography>
-      <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
-        <Rating name='read-only' value={orchid.rating} readOnly />
-        <Typography variant='body1' sx={{ ml: 1 }}>
-          ({orchid.rating}/5)
-        </Typography>
-      </Box>
-      <Typography
-        variant='body1'
-        sx={{ mb: 2, display: "flex", alignItems: "center" }}
       >
-        <LocationOnIcon sx={{ mr: 1 }} /> Origin: {orchid.origin}
-      </Typography>
-      <Typography
-        variant='body1'
-        sx={{ mb: 2, display: "flex", alignItems: "center" }}
-      >
-        <CategoryIcon sx={{ mr: 1 }} /> Category: {orchid.category}
-      </Typography>
-      <Typography
-        variant='body1'
-        sx={{ mb: 2, display: "flex", alignItems: "center" }}
-      >
-        <ColorLensIcon sx={{ mr: 1 }} /> Color: {orchid.color}
-      </Typography>
-      <Typography variant='body1'>
-        {orchid.detail}
-      </Typography>
-      {orchid.isSpecial && (
-        <Typography variant='body1' sx={{ fontStyle: "italic", color: "gold" }}>
-          This is a special orchid!
-        </Typography>
-      )}
-    </Box>
+        <Grid container spacing={0}>
+          <Grid item xs={12} md={6}>
+            <AspectRatio ratio='4/3'>
+              <img
+                src={orchid.image}
+                alt={orchid.name}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  color: theme.text.primary,
+                }}
+              />
+            </AspectRatio>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <Box sx={{ p: 3 }}>
+              <Typography variant='h4' component='h1' gutterBottom>
+                {orchid.name}
+              </Typography>
+              <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
+                <Rating
+                  name='read-only'
+                  value={orchid.rating}
+                  readOnly
+                  precision={0.5}
+                  emptyIcon={
+                    <StarIcon style={{ opacity: 0.55 }} fontSize='inherit' />
+                  }
+                />
+                <Typography variant='body1' sx={{ ml: 1 }}>
+                  ({orchid.rating}/5)
+                </Typography>
+              </Box>
+              <Divider sx={{ my: 2 }} />
+              <Typography
+                variant='body1'
+                sx={{ mb: 2, display: "flex", alignItems: "center" }}
+              >
+                <LocationOnIcon sx={{ mr: 1, color: theme.text.secondary }} />
+                Origin:{" "}
+                <Chip
+                  label={orchid.origin}
+                  sx={{ ml: 1, color: theme.icon.color }}
+                />
+              </Typography>
+              <Typography
+                variant='body1'
+                sx={{ mb: 2, display: "flex", alignItems: "center" }}
+              >
+                <CategoryIcon sx={{ mr: 1, color: theme.text.secondary }} />
+                Category:{" "}
+                <Chip
+                  label={orchid.category}
+                  sx={{ ml: 1, color: theme.icon.color }}
+                />
+              </Typography>
+              <Typography
+                variant='body1'
+                sx={{ mb: 2, display: "flex", alignItems: "center" }}
+              >
+                <ColorLensIcon sx={{ mr: 1, color: theme.text.secondary }} />
+                Color:{" "}
+                <Chip
+                  label={orchid.color}
+                  sx={{ ml: 1, color: theme.icon.color }}
+                />
+              </Typography>
+              <Divider sx={{ my: 2 }} />
+              <Typography variant='body1' paragraph>
+                {orchid.detail}
+              </Typography>
+              {orchid.isSpecial && (
+                <Chip
+                  icon={<StarIcon />}
+                  label='Special Orchid'
+                  color='warning'
+                  sx={{ mt: 2 }}
+                />
+              )}
+            </Box>
+          </Grid>
+        </Grid>
+      </Paper>
+    </Container>
   );
 }