crated gallery and updatedn navbar

site/src/App.tsx

@@ -1,6 +1,6 @@
 import NavBar from './components/Navbar'
 import Gallery from "./components/Gallery";
-import Content from "./components/Content";
+// import Content from "./components/Content";
 import CustomFooter from "./components/CustomFooter";
 
 
@@ -9,9 +9,8 @@ import './styles/App.css'
 function App() {
   return (
     <>
-      <NavBar  active='2'/>
+      <NavBar  active='1'/>
       <Gallery />
-      <Content/>
       <CustomFooter/>
     </>
   )

site/src/components/Gallery.tsx

@@ -1,32 +1,32 @@
 import ImageList from '@mui/material/ImageList';
 import ImageListItem from '@mui/material/ImageListItem';
-import structures from "../data";
+import {realPhotos} from "../data";
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import ImageListItemBar from '@mui/material/ImageListItemBar';
-const imgData = structures.slice(0, -1);
+const imgData = realPhotos.slice(0,3)
 
 function Gallery() {
   return (
     <Container maxWidth="lg">
-      <Box sx={{ width: 800, height: 585, overflowY: 'scroll', m: '20px auto' }}>
+      <Box sx={{ width: "90%", height: 'min-content', m: '20px auto' } }>
         <ImageList
           variant="masonry"
           sx={{
             columnCount: {
               xs: '1 !important',
-              sm: '2 !important',
+              sm: '3 !important',
               md: '3 !important',
-              lg: '4 !important',
+              lg: '3 !important',
             },
           }}
-          gap={8}>
+          gap={5}>
-          {imgData.map((item) => (
+          {imgData.map((item,index) => (
-            <ImageListItem key={item.img}>
+            <ImageListItem key={item.img} sx={{paddingTop: index%2!=0 ? '0px' : '5px'}}>
               <img
+                alt={item.title}
                 srcSet={item.img}
                 src={item.img}
-                alt={item.title}
                 loading="lazy"
               />
               <ImageListItemBar position="bottom" title={ item.title } />

site/src/components/Navbar.tsx

@@ -20,10 +20,9 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     flexShrink: 0,
-    borderRadius: `calc(${theme.shape.borderRadius}px + 8px)`,
+    borderRadius: `calc(${theme.shape.borderRadius}/2px)`,
     border: '1px solid',
     borderColor: theme.palette.divider,
-    padding: '8px 12px',
 }));
 
 
@@ -39,7 +38,6 @@ const StyledMenuItem =styled(MenuItem)(({}) => ({
     '&:hover': {
         backgroundColor: 'rgba(69, 146, 223, 0.45)',
     },
-
 }));
 interface ComponentProps {
     active: string;
@@ -57,20 +55,20 @@ function NavBar({ active }: ComponentProps) {
             sx={{
                 boxShadow: 0,
                 bgcolor: 'transparent',
-                mt: '28px',
+                mt: '10px',
             }}
         >
             <Container maxWidth="xl">
-                <StyledToolbar>
+                <StyledToolbar sx={{p:"0px"}}>
                     <Typography variant="h6" sx={{ color: '#5d8aa8' }}>
-                        Самые высокие здания и сооружения
+                        Сайт -  портфолио
                     </Typography>
-                    <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                    <Box sx={{ display: { xs: 'none', md: 'flex' ,p:"0px"}  }}>
                         <Button variant={active == '1' ? 'contained' : 'text'} color="info" size="medium">
                             Главная
                         </Button>
                         <Button variant={active == '2' ? 'contained' : 'text'} color="info" size="medium">
-                            Список зданий
+                            Цены на оперативную память
                         </Button>
                         <Button variant={active == '3' ? 'contained' : 'text'} color="info" size="medium">
                             Контакты
@@ -92,7 +90,7 @@ function NavBar({ active }: ComponentProps) {
                             </Box>
                             <MenuList>
                                 <StyledMenuItem selected={active == '1'}> Главная </StyledMenuItem>
-                                <StyledMenuItem selected={active == '2'}>Список зданий</StyledMenuItem>
+                                <StyledMenuItem selected={active == '2'}>Цены на оперативную память</StyledMenuItem>
                                 <StyledMenuItem selected={active == '3'}>Контакты</StyledMenuItem>
                             </MenuList>
                         </Drawer>

site/src/data.tsx

@@ -1,21 +1,23 @@
-import IrlPhoto0 from "./images/photos/image0.png";
+import irlPhoto0 from "./images/photos/image0.png";
-import IrlPhoto1 from "./images/photos/image1.png";
+import irlPhoto1 from "./images/photos/image1.png";
-import IrlPhoto2 from "./images/photos/image2.png";
+import irlPhoto2 from "./images/photos/image2.png";
-import IrlPhoto3 from "./images/photos/image3.png";
+import irlPhoto3 from "./images/photos/image3.png";
-import IrlPhoto4 from "./images/photos/image4.png";
+import irlPhoto4 from "./images/photos/image4.png";
-import IrlPhoto5 from "./images/photos/image5.png";
+import irlPhoto5 from "./images/photos/image5.png";
-import IrlPhoto7 from "./images/photos/image7.png";
+import irlPhoto6 from "./images/photos/image6.png";
-import Playback from "./images/photos/playback.mp4";
+import irlPhoto7 from "./images/photos/image7.png";
+import playbackVideo from "./images/photos/playback.mp4";
 
 const realPhotos = [
-    IrlPhoto0,
+    { img: irlPhoto0, title: "Sunset" },
-    IrlPhoto1,
+    { img: irlPhoto1, title: "building with louds on bg" },
-    IrlPhoto2,
+    { img: irlPhoto2, title: "moon" },
-    IrlPhoto3,
+    { img: irlPhoto3, title: "dragonfly" },
-    IrlPhoto4,
+    { img: irlPhoto4, title: "maple leaves" },
-    IrlPhoto5,
+    { img: irlPhoto5, title: "sea" },
-    IrlPhoto7
+    { img: irlPhoto6, title: "sunset" },
-]
+    { img: irlPhoto7, title: "mmm green" }
+];
 
 //import sideards photos
 import SidecardPhoto0 from "./images/sidecards/AQ_monitor.png";
@@ -89,5 +91,4 @@ const mainCards =  [
 ]
 
 
-
+export { realPhotos, sidecardData, mainCards, playbackVideo };
-export default {sidecardData, realPhotos, Playback, mainCards};