Merge pull request #139 from EnigmaVSSUT/dev-v2

fix : pages made responsive and events added

package.json

@@ -46,4 +46,4 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "typescript": "^5.0.2"
   }
-}
+}

src/app/blogs/Blogs.jsx

@@ -1,4 +1,4 @@
-import { Stack, Typography } from "@mui/material";
+import { Stack, Typography,Box} from "@mui/material";
 import blogStyles from "./blogs.module.css";
 import AnimatePage from "../../ui/AnimatePage";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -78,15 +78,15 @@ export default function Blogs() {
 	};
 
 	return (
-		<AnimatePage>
+		// <AnimatePage>
 			<Stack
 				orderColor="#f0f"
 				justifyContent="flex-start"
 				alignItems={"center"}
 				position="relative"
 				paddingBottom="10rem"
 			>
-				<Typography variant="h2" className={blogStyles.blogs} paddingY="20px">
+				<Typography variant="h2" className={blogStyles.blogs} paddingY="20px" sx={{fontSize:{xs:"30px",md:"45px",lg:"60px"},}}>
 					Blogs
 				</Typography>
 				<Stack
@@ -103,17 +103,17 @@ export default function Blogs() {
 							className={blogStyles.main}
 							key={index}
 							minHeight="300px"
-							minWidth="400px"
+							minWidth="250px"
 							borderRadius="10px"
 							position="relative"
 						>
-							<img
+							<Box
+							component="img"
+							src={blog.img}
 								className={blogStyles.blogimage}
 								height="300px"
-								width="400px"
-								src={blog.img}
 								alt={blog.title}
-								style={{ objectFit: "cover", borderRadius: "20px" }}
+								sx={{ objectFit: "cover", borderRadius: "20px",width:{xs:"250px",md:"400px"} }}
 							/>
 							<Stack
 								className={blogStyles.title}
@@ -124,7 +124,7 @@ export default function Blogs() {
 								alignItems="self-start"
 								justifyContent="space-between"
 							>
-								<Typography className={blogStyles.titleHeading} variant="h6" sx={{width:'300px'}}>{blog.title}</Typography>
+								<Typography className={blogStyles.titleHeading} variant="h6" sx={{width:"100%"}}>{blog.title}</Typography>
 								<Typography variant="caption">{blog.date}</Typography>
 							</Stack>
 							<Stack
@@ -155,6 +155,6 @@ export default function Blogs() {
 					</IconButton>
 				</Stack>
 			</Stack>
-		</AnimatePage>
+		// </AnimatePage>
 	);
 }

src/app/events/Events.jsx

@@ -6,31 +6,32 @@ import Calender from "./components/Calender";
 import { useResponsive } from "../../hooks/useResponsive";
 
 export default function Events() {
-	const { isLaptop, isTablet } = useResponsive();
-	return (
-		<AnimatePage>
-			<Stack
-				justifyContent="flex-start"
-				alignItems={"center"}
-				position="relative"
-				paddingBottom={"2rem"}
-			>
-				<Typography variant={isTablet ? "h4" : "h2"} paddingY="20px">
-					Events
-				</Typography>
-				<Stack
-					paddingY={3}
-					direction={isLaptop ? "column-reverse" : "row"}
-					gap={isTablet ? 10 : 20}
-				>
-					<Stack className={eventStyles.eventsList}>
-						<EventList />
-					</Stack>
-					<Stack className={eventStyles.calender} padding={3}>
-						<Calender />
-					</Stack>
-				</Stack>
-			</Stack>
-		</AnimatePage>
-	);
+  return (
+    <AnimatePage>
+    <Stack
+        justifyContent="flex-start"
+        alignItems={"center"}
+        position="relative"
+        paddingBottom={"2rem"}
+
+    >
+        <Typography variant="h2" paddingY="20px" sx={{fontSize:{xs:"30px",md:"45px",lg:"60px"},}}>
+
+            Events
+        </Typography>
+    <Stack paddingY={3}    sx={{flexDirection:{xs:"column-reverse",md:"row"} ,width:"90vw",paddingX:{lg:"40px",md:"10px"} }}>
+
+        <Stack className={eventStyles.eventsList}  sx={{width:{md:"100vw"},marginTop:{md:"30px",sm:"30px",xs:"30px"}}}>
+        <EventList />
+        </Stack>
+        <Stack className={eventStyles.calender}   sx={{width:{md:"100vw",lg:"auto"},justifyContent:"center",alignItems:"center",position:{lg:"sticky",md:"unset"},top:"120px"}}>
+        <Calender />
+        </Stack>
+
+
+        </Stack>
+
+        </Stack>
+        </AnimatePage>
+  )
 }

src/app/events/components/Calender.jsx

@@ -10,36 +10,26 @@ import Typography from "@mui/material/Typography";
 import { useResponsive } from "../../../hooks/useResponsive";
 
 export default function Calendar() {
-	const [setPickedDate] = useDatePicker((state) => [state.setPickedDate]);
-	const [value, setValue] = useState();
+
 	const pickedDate = useDatePicker((state) => state.pickedDate);
 	const { isLaptop, isTablet } = useResponsive();
 
+	const [setPickedDate] = useDatePicker((state) => [state.setPickedDate]);
+	const [value, setValue] = useState(dayjs());
+
 	return (
-		<Stack
-			direction={isTablet ? "column" : "row"}
-			gap={isTablet ? 2 : 10}
-			justifyContent={"center"}
-			alignItems={"center"}
-		>
-			<LocalizationProvider dateAdapter={AdapterDayjs}>
-				<DemoContainer components={["DateCalendar", "DateCalendar"]}>
-					<DemoItem>
-						<DateCalendar
-							value={value}
-							onChange={(newValue) => {
-								setPickedDate(newValue.format("dddd, MMMM DD"));
-								setValue(newValue);
-							}}
-						/>
-					</DemoItem>
-				</DemoContainer>
-			</LocalizationProvider>
-			{isLaptop && (
-				<Stack>
-					<Typography variant={isTablet ? "h6" : "h4"}>{pickedDate}</Typography>
-				</Stack>
-			)}
-		</Stack>
+		<LocalizationProvider dateAdapter={AdapterDayjs} >
+			<DemoContainer components={['DateCalendar', 'DateCalendar']} >
+				<DemoItem >
+					<DateCalendar
+						value={value}
+						onChange={(newValue) => {
+							setPickedDate(newValue.format('dddd, MMMM DD'));
+							setValue(newValue);
+						}}
+					/>
+				</DemoItem>
+			</DemoContainer>
+		</LocalizationProvider>
 	);
 }

src/app/events/components/EventCard.jsx

@@ -5,13 +5,7 @@ import { useResponsive } from "../../../hooks/useResponsive";
 export default function EventCard({ key, date, title, info }) {
 	const { isTablet } = useResponsive();
 	return (
-		<Stack
-			className={eventStyles.eventcard}
-			width={isTablet ? "350px" : "650px"}
-			key={key}
-			padding={4}
-			borderRadius={2}
-		>
+		<Stack className={eventStyles.eventcard} sx={{width:{xs:"100%",md:"650px"}}} key={key} padding={4} borderRadius={2}>
 			<Stack className={eventStyles.upper} paddingY={2} gap={1}>
 				<Typography variant="h6">{date}</Typography>
 				<Stack>
@@ -21,7 +15,7 @@ export default function EventCard({ key, date, title, info }) {
 			</Stack>
 
 			<Stack gap={2}>
-				<Typography variant="h4" sx={{ color: "#35FF1F" }}>
+				<Typography variant="h4" sx={{ color: "#35FF1F" ,fontSize:{xs:"14px",md:"25px",lg:"40px"},}}>
 					{title}
 				</Typography>