update: about page now looks awesome

MichaelTeida · Jan 28, 2024 · bfcc4bb · bfcc4bb
1 parent d6d55a5
commit bfcc4bb
Showing 1 changed file with 20 additions and 20 deletions.
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -15,48 +15,48 @@ export function About() {
     },[mode])
 
     return (
-        <Container sx={{display: "flex", flexDirection: {xs: "column", md: "row"}, justifyContent: "space-between", alignItems: "center", minHeight: 'calc(100dvh - var(--Header-height))'}}>
-            <Box sx={{zIndex: "2",flex: 5, display: "flex", flexDirection: {xs: "column", md: "row"}, gap: 2, flexWrap: "wrap"}}>
-                <Typography component="h1" level="h1">
-                    Welcome to NeuraChat
+        <Container sx={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: {xs: "column", md: "row"}, minWidth: {md: "1350px"}, p: {xs: 4}, py: {xs: 10}, gap: {xs: 6, md: 0}, minHeight: 'calc(100dvh - var(--Header-height))'}}>
+            <Box sx={{zIndex: "2",flex: 6, display: "flex", flexDirection: {xs: "column", md: "row"}, gap: 2, flexWrap: "wrap"}}>
+                <Typography component="h1" level="h1" fontSize={{xs: 45, md: 50}}>
+                    Welcome to <Typography color={"primary"}>NeuraChat</Typography>
                 </Typography>
-                <Typography>
+                <Typography sx={{color: "text.primary"}}>
                     NeuraChat is your ultimate AI companion, revolutionizing the way you interact online. With cutting-edge technology and intuitive design, NeuraChat offers a seamless chat experience unlike any other. Explore the possibilities with NeuraChat today!
                 </Typography>
-                <Box sx={{display: 'flex', flexDirection: {xs: "column", md: "row"}}}>
-                    <List aria-labelledby="advantages">
-                        <ListItem>
-                            <ListItemDecorator>🧅</ListItemDecorator>Limitless Possibilities
+                <Box sx={{display: 'flex', flexDirection: {md: "row"}, gap: {md: 3}}} >
+                    <List aria-labelledby="advantages" >
+                        <ListItem sx={{color: "text.primary", height: 56, p: 0}}>
+                            <ListItemDecorator sx={{mr:-2}}>⭐</ListItemDecorator>Limitless Possibilities
                         </ListItem>
-                        <ListItem>
-                            <ListItemDecorator>🧅</ListItemDecorator>AI-powered conversations.
+                        <ListItem sx={{color: "text.primary", height: 56, p: 0}}>
+                            <ListItemDecorator sx={{mr:-2}}>⭐</ListItemDecorator>AI-powered conversations.
                         </ListItem>
                     </List>
                     <List aria-labelledby="advantages">
-                        <ListItem>
-                            <ListItemDecorator>🧅</ListItemDecorator>Intelligent Problem-Solving
+                        <ListItem sx={{color: "text.primary", height: 56, p: 0}}>
+                            <ListItemDecorator sx={{mr:-2}}>⭐</ListItemDecorator>Intelligent Problem-Solving
                         </ListItem>
-                        <ListItem>
-                            <ListItemDecorator>🧅</ListItemDecorator>User-friendly features.
+                        <ListItem sx={{color: "text.primary", height: 56, p: 0}}>
+                            <ListItemDecorator sx={{mr:-2}}>⭐</ListItemDecorator>User-friendly features.
                         </ListItem>
                     </List>
                 </Box>
-                <Box maxWidth={350} component="img" src={openAiBadge} alt={"Logo NeuraChatAi"}/>
+                <Box display="flex" maxWidth={{xs: 400, md: 350}} alignSelf="center" component="img" src={openAiBadge} alt={"Logo NeuraChatAi"}/>
             </Box>
-            <Box sx={{zIndex: "2", flex: 7}}>
+            <Box sx={{zIndex: "2", flex: 6}}>
                 <AspectRatio
                     objectFit="contain"
                     ratio={1}
                     variant="plain"
                     maxHeight={400}
                     sx={(theme) => ({
-                        minWidth: 400,
+                        minWidth: 350,
                         alignSelf: 'stretch',
                         [theme.breakpoints.up(834)]: {
                             alignSelf: 'initial',
                             flexGrow: 1,
-                            '--AspectRatio-maxHeight': '800px',
-                            '--AspectRatio-minHeight': '800px',
+                            '--AspectRatio-maxHeight': '600px',
+                            '--AspectRatio-minHeight': '600px',
                         },
                     })}
                 >