responsiveness improved

src/components/About/BasicCard.tsx

@@ -30,6 +30,7 @@ function BasicCard({
                     backgroundColor: cardColor || 'transparent',
                     borderStyle: 'solid',
                     borderColor: color,
+                    padding: '2px',
                     borderWidth: '0.5px',
                     display: 'flex',
                     alignITems: 'center',

src/components/Home/AMCSection.tsx

@@ -3,18 +3,19 @@ import { Box, Typography, useTheme, Link } from '@mui/material';
 import { color, h6_, titleColor } from '@/constants';
 
 import Logo from './Logo';
+import { margin } from '@mui/system';
 
 export default function AMCSection() {
     return (
         <Box
             color={color}
             alignItems="center"
-            height="80vh"
+            minHeight="80vh"
             display="flex"
             flexDirection="column"
             justifyContent="center"
         >
-            <Logo></Logo>
+            <Logo />
             {/* <Typography variant="h1" fontSize="11vw">
                 Aero
             </Typography>
@@ -27,39 +28,41 @@ export default function AMCSection() {
             {/* <Typography fontSize="2vw" mb="4vw">
                 IIT (BHU) Varanasi
             </Typography> */}
-            <Link
-                href="mailto:[email protected]"
-                sx={{
-                    textDecoration: 'none',
-                    '&:hover': {
-                        cursor: 'pointer',
-                    },
-                }}
-            >
-                <Typography
-                    variant="h2"
-                    fontSize={h6_}
-                    borderRadius="1.3em"
-                    padding="0.93em 3.33em"
-                    display="inline-block"
+            <Box sx={{ margin: '30px' }}>
+                <Link
+                    href="mailto:[email protected]"
                     sx={{
-                        borderStyle: 'solid',
-                        borderColor: 'rgba(255,255,255,1)',
-                        borderWidth: '2px',
-                        color: 'rgba(255,255,255,1)',
-                        backgroundColor: 'transparent',
+                        textDecoration: 'none',
                         '&:hover': {
-                            color: color,
-                            backgroundColor: titleColor,
-                            borderColor: titleColor,
+                            cursor: 'pointer',
                         },
-                        transition:
-                            '0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95)',
                     }}
                 >
-                    Contact us
-                </Typography>
-            </Link>
+                    <Typography
+                        variant="h2"
+                        fontSize={h6_}
+                        borderRadius="1.3em"
+                        padding="0.93em 3.33em"
+                        display="inline-block"
+                        sx={{
+                            borderStyle: 'solid',
+                            borderColor: 'rgba(255,255,255,1)',
+                            borderWidth: '2px',
+                            color: 'rgba(255,255,255,1)',
+                            backgroundColor: 'transparent',
+                            '&:hover': {
+                                color: color,
+                                backgroundColor: titleColor,
+                                borderColor: titleColor,
+                            },
+                            transition:
+                                '0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+                        }}
+                    >
+                        Contact us
+                    </Typography>
+                </Link>
+            </Box>
         </Box>
     );
 }

src/components/Home/CardHolder.tsx

@@ -45,9 +45,14 @@ function CardHolder({
             <Box
                 display="grid"
                 gridTemplateColumns={
-                    breakPoint2 ? '30% 30% 30%' : breakPoint ? '45% 45%' : '80%'
+                    breakPoint2
+                        ? '30% 30% 30%'
+                        : breakPoint
+                        ? '45% 45%'
+                        : 'repeat(2, 45%)'
                 }
                 justifyContent={breakPoint ? 'space-between' : 'center'}
+                gap="20px"
             >
                 {' '}
                 <BasicCard

src/components/Home/Logo.tsx

@@ -58,9 +58,10 @@ export default function Logo() {
             width={1080}
             height={1080}
             style={{
-                objectFit: 'cover',
+                objectFit: 'contain',
                 height: (true ? logoHeight : logoHeight) + '%',
                 width: (true ? logoWidth : logoWidth) + '%',
+                minHeight: '95%',
                 marginBottom: 'auto',
                 marginTop: 'auto',
                 zIndex: isAtTop ? 0 : breakPoint ? 50 : 40,

src/data/contact.ts

@@ -10,7 +10,7 @@ export const social: Social = {
 };
 
 export const contactInfo = [
-    'Vivekananda Common Room, Vivekananda Hostel, IIT (BHU), Varanasi - 221005',
+    'CV Raman Common Room, CV Raman Hostel, IIT (BHU), Varanasi - 221005',
     '[email protected]',
-    '[email protected]',
+    // '[email protected]',
 ];

src/pages/index.tsx

@@ -35,7 +35,7 @@ export default function Home() {
                     id="amenities"
                     style={{
                         backgroundColor: bgColor,
-                        padding: '100px 7.5%',
+                        padding: '50px 7.5%',
                     }}
                 >
                     <CardHolder