main content done

site/src/App.tsx

@@ -1,9 +1,11 @@
 import NavBar from './components/Navbar'
 import Gallery from "./components/Gallery";
-// import Content from "./components/Content";
+import MainContent from "./components/Content";
 import CustomFooter from "./components/CustomFooter";
 
 
+import {Container} from "@mui/material";
+
 import './styles/App.css'
 
 function App() {
@@ -11,6 +13,7 @@ function App() {
     <>
       <NavBar  active='1'/>
       <Gallery />
+      <MainContent />
       <CustomFooter/>
     </>
   )

site/src/components/BigCard.tsx

@@ -0,0 +1,81 @@
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+interface ComponentProps {
+  data: {
+    img: string,
+    title: string,
+    description: string[]
+  },
+  cardNum: number;
+}
+
+
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  textAlign: 'justify',
+  marginBottom: '1em',
+}));
+
+
+function BigCard({ data, cardNum }: ComponentProps) {
+  const reverseModifier = cardNum % 2 == 0 ? "-reverse" : "";
+
+
+  let textA = data.description.slice(0, -data.description.length / 2);
+  let textB = data.description.slice(-data.description.length / 2);
+
+  // if(reverseModifier){
+  //   [textA,textB] = [textB,textA];
+  // }
+  return (
+    <Card>
+      <CardHeader title={data.title} />
+      <Box sx={{
+        display: 'flex',
+        'flexDirection': {
+          xs: 'column' + reverseModifier,
+          md: 'row' + reverseModifier
+        }
+      }}>
+        <CardContent sx={{order:reverseModifier?2:""}}>
+          {textA.map((item, ind) => (
+            <StyledTypography key={ind} variant="body2">
+              {item}
+            </StyledTypography>
+          ))}
+        </CardContent>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', maxWidth: { xs: '100%', md: "50%" }, bgcolor:"#0581f513" }} >
+          <CardMedia
+            component="img"
+            alt={data.title}
+            image={data.img}
+            sx={{ maxWidth: '100%', objectFit: 'contain' }}
+          />
+        </Box>
+
+        <Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', order: reverseModifier ? 1 : 3 }} >
+          <CardContent>
+            {textB.map((item, ind) => (
+              <StyledTypography key={ind} variant="body2">
+                {item}
+              </StyledTypography>
+            ))}
+          </CardContent>
+          <CardActions sx={{ justifyContent: cardNum % 2 != 0 ? 'end' : "start", alignContent: "flex-end" }} >
+            <Button size="small">Check it out</Button>
+          </CardActions>
+        </Box>
+      </Box>
+    </Card>
+  )
+}
+
+export default BigCard;

site/src/components/BuildCard.tsx

@@ -1,53 +0,0 @@
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
-interface ComponentProps {
-    building: {
-        img: string, 
-        title: string, 
-        description: string[]
-    },
-    cardNum: number;
-  }
-
-
-  const StyledTypography = styled(Typography)(({ theme }) => ({
-    color: theme.palette.text.secondary,
-    textAlign: 'justify',
-    marginBottom: '1em',
-  }));
-
-
-function BuildCard({ building,cardNum} : ComponentProps) {
-    return (
-      <Card  style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{  display: 'flex' }} >
-        <CardMedia
-            component="img"
-            alt={ building.title }
-            image={ building.img }
-        />
-        <Box>
-          <CardContent>
-            <Typography gutterBottom variant="h5" >
-              { building.title }
-            </Typography>
-            { building.description.map((item, ind) => (
-              <StyledTypography key={ind} variant="body2">    
-                { item }
-              </StyledTypography>
-            ))}
-          </CardContent>
-          <CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
-            <Button size="small">Подробнее</Button>
-          </CardActions>
-        </Box>
-      </Card>
-    )
-}
-
-export default BuildCard;

site/src/components/Content.tsx

@@ -1,19 +1,17 @@
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import structures from "../data";
+import {mainCards} from "../data";
-import BuildCard from "./BuildCard"
+import BigCard from "./BigCard"
-const cardData = [structures[3], structures[6], structures[9], structures[7]]
+const cardData = mainCards
 
 function Content() {
   return (
     <Container maxWidth="xl">
-      <Grid container spacing={{ xs: 3, md: 6 }}>
+      {cardData.map((item, index) => (
-        {cardData.map((item, index) => (
+        <Grid key={index} size={{ xs: 12, md: 6 }} >
-          <Grid key={index} size={{ xs: 12, md: 6 }} >
+          <BigCard data={ item } cardNum={index} />
-            <BuildCard building={ item } cardNum={index} />
+        </Grid>
-          </Grid>
+      ))}
-        ))}
-      </Grid>
     </Container>
   );
 }

site/src/components/Gallery.tsx

@@ -9,7 +9,7 @@ const imgData = realPhotos.slice(0,3)
 function Gallery() {
   return (
     <Container maxWidth="lg">
-      <Box sx={{ width: "90%", height: 'min-content', m: '20px auto' } }>
+      <Box sx={{ width: {xs:"100%", sm:"90%"}, height: 'min-content', m: '20px auto' } }>
         <ImageList
           variant="masonry"
           sx={{

site/src/data.tsx

@@ -10,7 +10,7 @@ import playbackVideo from "./images/photos/playback.mp4";
 
 const realPhotos = [
     { img: irlPhoto0, title: "Sunset" },
-    { img: irlPhoto1, title: "building with louds on bg" },
+    { img: irlPhoto1, title: "building with clouds on bg" },
     { img: irlPhoto2, title: "moon" },
     { img: irlPhoto3, title: "dragonfly" },
     { img: irlPhoto4, title: "maple leaves" },