Mid section

package.json

@@ -3,16 +3,25 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.15.4",
     "@reduxjs/toolkit": "^1.9.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.0",
+    "clsx": "^2.1.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.18.0",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

public/index.html

@@ -15,6 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,13 +1,68 @@
-import './App.css';
 import { Routes, Route } from 'react-router-dom';
-import Greeting from './components/Greeting';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Home from './views/home';
+import Page2 from './views/page2';
 
-function App() {
-  return (
+const theme = createTheme({
+  typography: {
+    fontFamily: 'Oswald, sans-serif',
+    h1: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 900,
+      color: '#414F6B',
+      fontSize: '3rem', // Default font size for all screens
+      '@media (min-width:600px)': {
+        fontSize: '6rem', // Font size for screens larger than 600px (tablet and up)
+      },
+      '@media (min-width:1024px)': {
+        fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up)
+      },
+    },
+    h1Secondary: {
+      fontWeight: 900,
+      color: '#4D4D4D', // Second color
+      fontSize: '3rem', // Default font size for all screens
+      '@media (min-width:600px)': {
+        fontSize: '6rem', // Font size for screens larger than 600px (tablet and up)
+      },
+      '@media (min-width:1024px)': {
+        fontSize: '8rem', // Font size for screens larger than 1024px (desktop and up)
+      },
+      margin: 0,
+    },
+    h4: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 900,
+      color: '#4D4D4D',
+    },
+    body: {
+      color: '#4D4D4D',
+    },
+  },
+  palette: {
+    mode: 'light',
+    blue: {
+      dark: '#414F6B',
+      light: '#63769D',
+    },
+    grey: {
+      dark: '#4D4D4D',
+      light: '#AFB3BD',
+    },
+    link: {
+      light: '#FFFFFF',
+      dark: '#414F6B',
+    },
+  },
+});
+
+const App = () => (
+  <ThemeProvider theme={theme}>
     <Routes>
-      <Route path="/" element={<Greeting />} />
+      <Route path="/" element={<Home />} />
+      <Route path="/page2" element={<Page2 />} />
     </Routes>
-  );
-}
+  </ThemeProvider>
+);
 
 export default App;

src/components/customAccordion.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Accordion, AccordionSummary, AccordionDetails, Grid,
+  Typography,
+} from '@mui/material';
+import useCustomStyles from '../styles/useCustonStyles';
+import styles from '../styles/components/carousel';
+
+const CustomAccordions = ({ item, expendedId }) => {
+  const classes = useCustomStyles(styles);
+  const [expanded, setExpanded] = useState(expendedId);
+
+  const handleChange = (panel) => (event, newExpanded) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <Accordion expanded={expanded === item.id} onChange={handleChange(item.id)}>
+      <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+        <Typography>{item.descr}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Grid item key={`image${item.id}`} className={classes.card}>
+          <img src={item.imageUrl} alt={item.descr} />
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+CustomAccordions.propTypes = {
+  item: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    imageUrl: PropTypes.string.isRequired,
+    descr: PropTypes.string.isRequired,
+  }).isRequired,
+  expendedId: PropTypes.string.isRequired,
+};
+
+export default CustomAccordions;

src/components/customCarousel.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import {
+  Box, Grid, Container, useMediaQuery, useTheme,
+} from '@mui/material';
+import CustomAccordions from './customAccordion';
+import useCustomStyles from '../styles/useCustonStyles';
+import styles from '../styles/components/carousel';
+
+const CustomCarousel = (props) => {
+  const { items } = props;
+  const theme = useTheme();
+  const mobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const classes = useCustomStyles(styles);
+  const [start, setStart] = useState(0);
+  const [sequence, setSequence] = useState(items.slice(start, start + 4));
+  const btns = Math.ceil(items.length / 4);
+  const slide = (index) => {
+    const newStart = index * 4;
+    setStart(newStart);
+    setSequence(items.slice(newStart, newStart + 4));
+  };
+  const divArray = Array.from({ length: btns }, (_, index) => index);
+  return (
+    <Box className={classes.container}>
+      <Container>
+
+        <Grid container direction="column">
+          <Grid item container alignItems="center" justifyContent="center">
+            {sequence.map((item) => (mobile ? (
+              <CustomAccordions key={item.id} item={item} expandedId={item.id} />
+            ) : (
+              <Grid item key={`image${item.id}`} className={classes.card}>
+                <img src={item.imageUrl} alt={item.descr} />
+              </Grid>
+            )))}
+          </Grid>
+          <Grid item container alignItems="center" justifyContent="center">
+            {divArray.map((number) => (
+              <Grid
+                className={clsx(classes.paginate, start / 4 === number && classes.opacity)}
+                item
+                key={number + 1}
+                onClick={() => slide(number)}
+              />
+            ))}
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  );
+};
+CustomCarousel.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      imageUrl: PropTypes.string.isRequired,
+      descr: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+};
+export default CustomCarousel;

src/components/footer.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Container, Grid, Typography } from '@mui/material';
+import useCustomStyles from '../styles/useCustonStyles';
+import mainStyles from '../styles';
+
+const Footer = () => {
+  const classes = useCustomStyles(mainStyles);
+  return (
+    <Container>
+      <Grid container className={classes.header} justifyContent="space-between" alignItems="center">
+        <Grid container item lg={3} xs={6}>
+          <Grid item>
+            <img src="images/icons/icon.png" alt="icon" />
+          </Grid>
+          <Grid item>
+            <Typography variant="h6">LOSANGELES</Typography>
+            <Typography variant="h6">MOUNTAINS</Typography>
+          </Grid>
+        </Grid>
+        <Grid item lg={3} xs={6}>
+          <Typography variant="body" size="small">Copy Rights </Typography>
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};
+
+export default Footer;

src/components/header.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { HashLink } from 'react-router-hash-link';
+import PropTypes from 'prop-types';
+import {
+  Box, Grid, useTheme,
+} from '@mui/material';
+import useCustomStyles from '../styles/useCustonStyles';
+import mainStyles from '../styles';
+import styles from '../styles/components/header';
+
+const Header = (props) => {
+  const classes = useCustomStyles(mainStyles);
+  const localClasses = useCustomStyles(styles);
+  const { trigger } = props;
+  const theme = useTheme();
+  return (
+    <Box className={localClasses.headerContainer} sx={{ backgroundColor: trigger ? theme.palette.link.light : 'transparent' }}>
+      <Grid container className={classes.header} justifyContent="space-between" alignItems="center">
+        <Grid item lg={3} xs={6}>
+          <HashLink smooth to="/" className={localClasses.logo}>
+            <img src="images/icon_header.png" alt="icon" />
+          </HashLink>
+        </Grid>
+        <Grid container item lg={3} xs={6} justifyContent="space-between">
+          <Grid item>
+            <HashLink smooth to="/page2#history" className={trigger ? classes.darkLink : classes.lightLink}>
+              01.HISTORY
+            </HashLink>
+          </Grid>
+          <Grid item>
+            <HashLink smooth to="/page2#mountains" className={trigger ? classes.darkLink : classes.lightLink}>
+              02.TEAM
+            </HashLink>
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+Header.propTypes = {
+  trigger: PropTypes.bool.isRequired,
+};
+
+export default Header;

src/components/headlineSection.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  Box, Typography, Grid,
+} from '@mui/material';
+import useCustomStyles from '../styles/useCustonStyles';
+import mainStyles from '../styles';
+
+const HeadlineSection = () => {
+  const classes = useCustomStyles(mainStyles);
+
+  return (
+    <Box className={classes.container}>
+      <Box className={clsx(classes.hiddenBg)} />
+      <img
+        src="images/bg/page1_bg_169.png"
+        className={clsx(classes.homeContainer, classes.subContainer)}
+        alt="image1"
+      />
+      <Grid container className={classes.subContainer} justifyContent="center" alignItems="center">
+        <Grid item>
+          <Typography
+            variant="h1"
+          >
+            LOSANGELES
+          </Typography>
+          <Typography
+            variant="h1Secondary"
+          >
+            MOUNTAINS
+          </Typography>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default HeadlineSection;