From ce68937c28a662af660b01bdb46f86bb2bc64977 Mon Sep 17 00:00:00 2001
From: fsoussand <fflloo98@me.com>
Date: Thu, 29 Feb 2024 11:44:20 +0100
Subject: [PATCH] index is responsive

---
 src/pages/index.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c8f3fd7..7cb1cf9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,10 @@
-import { Stack, Container, Typography, Box } from "@mui/material";
+import {
+  Stack,
+  Container,
+  Typography,
+  Box,
+  useMediaQuery,
+} from "@mui/material";
 import { useAtom } from "jotai";
 import type { NextPage } from "next";
 import Image from "next/image";
@@ -10,6 +16,7 @@ import AppLink from "src/components/ui/Buttons/AppLink";
 import ObjectiveCard from "src/components/ui/Cards/ObjectiveCard/ObjectiveCard";
 import PageTextTemplate from "src/components/ui/PageTextTemplate/PageTextTemplate";
 import { cartAtom } from "src/store/cart";
+import theme from "src/theming/theme";
 
 import { StaticProps } from "./_app";
 
@@ -22,6 +29,7 @@ const Home: NextPage = () => {
   }, [setCart]);
 
   const emphasisStyle = { color: "primary.main", fontWeight: "bold" };
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const presentationText = (
     <Typography>
@@ -53,13 +61,15 @@ const Home: NextPage = () => {
       <Typography variant="h1" fontSize={40} color="primary.main">
         A11Y INYERFACE
       </Typography>
-      <Container sx={{ width: "800px" }}>{presentationText}</Container>
+      <Container sx={{ width: isMobile ? "100%" : "800px" }}>
+        {presentationText}
+      </Container>
       <Stack spacing="2em" textAlign="center" justifyContent="center">
-        <Stack direction="row" justifyContent="center" spacing="5em">
+        <Stack direction="row" justifyContent="center">
           <Image
             src={require("/public/images/apple-pie.jpeg")}
             alt=""
-            width={330}
+            width={"330px"}
             height={300}
             objectFit="cover"
             style={{ borderRadius: "8px" }}