solve conflict #40

client/package.json

@@ -6,17 +6,17 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.5",
     "@mui/material": "^5.0.4",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
+    "@mui/styles": "^5.0.2",
     "axios": "^0.23.0",
     "eslint-config-react-app": "^6.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "react-scripts": "4.0.3"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,5 +1,6 @@
 import { BrowserRouter as Router } from 'react-router-dom';
 import NavBar from './components/Navbar';
+import { Footer } from './components';
 
 function App() {
   return (
@@ -9,9 +10,9 @@ function App() {
         <NavBar />
 
       </Router>
+      <Footer />
     </div>
 
   );
 }
-
 export default App;

client/src/components/Footer/data.js

@@ -0,0 +1,91 @@
+import {
+  AiFillFacebook, AiFillTwitterCircle, AiFillInstagram, AiOutlineWhatsApp,
+} from 'react-icons/ai';
+
+const data = [
+  {
+    title: 'About Us',
+    links: [
+      {
+        href: '/',
+        name: 'Story',
+      },
+      {
+        href: '/',
+        name: 'Clients',
+      },
+      {
+        href: '/',
+        name: 'Testimonials',
+      },
+    ],
+  },
+  {
+    title: 'Services',
+    links: [
+      {
+        href: '/',
+        name: 'Marketing',
+      },
+      {
+        href: '/',
+        name: 'Consulting',
+      },
+      {
+        href: '/',
+        name: 'Development',
+      },
+      {
+        href: '/',
+        name: 'Design',
+      },
+    ],
+  },
+  {
+    title: 'Contact us',
+    links: [
+      {
+        href: '/',
+        name: 'United States',
+      },
+      {
+        href: '/',
+        name: 'United Kingdom',
+      },
+      {
+        href: '/',
+        name: 'Australia',
+      },
+      {
+        href: '/',
+        name: 'Support',
+      },
+    ],
+  },
+  {
+    title: 'Social',
+    links: [
+      {
+        href: '/',
+        name: 'Facebook',
+        children: <AiFillFacebook size={22} />,
+      },
+      {
+        href: '/',
+        name: 'Twitter',
+        children: <AiFillTwitterCircle size={22} />,
+      },
+      {
+        href: '/',
+        name: 'Instagram',
+        children: <AiFillInstagram size={22} />,
+      },
+      {
+        href: '/',
+        name: 'WhatsApp',
+        children: <AiOutlineWhatsApp size={22} />,
+      },
+    ],
+  },
+];
+export default data;

client/src/components/Footer/index.js

@@ -0,0 +1,62 @@
+import {
+  AppBar, Container, Link,
+} from '@mui/material';
+import HomeIcon from '../../assets/homeIcon.png';
+import data from './data';
+import './style.css';
+
+export default function Footer() {
+  return (
+    <section className="footer">
+      <AppBar
+        position="fixed"
+        color="primary"
+        sx={{ top: 'auto', bottom: 0 }}
+        style={{
+          background: '#3381CB', alignItems: 'center',
+        }}
+      >
+        <Container
+          maxWidth="xl"
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+          }}
+        >
+          <div className="wrapper-image">
+            <img
+              src={HomeIcon}
+              alt="home icon"
+              loading="lazy"
+              style={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4, width: '6rem' }}
+            />
+
+          </div>
+          <div className="wrapper-links section2">
+            {
+            data.map(({ title, links }, i) => (
+              <div className={`${title} footer--list`} key={`${title + links + i}`}>
+                <p>
+                  {title}
+                </p>
+                {
+                  links.map(({ href, name, children }) => (
+                    <Link to={href} color="inherit" underline="none" key={`${href + name + i}`}>
+                      {children}
+                      {name}
+                    </Link>
+                  ))
+                }
+              </div>
+            ))
+          }
+          </div>
+        </Container>
+        <div className="copyright">
+          <p style={{ color: '#1B4B80' }}>All right reserved @ to this website</p>
+        </div>
+      </AppBar>
+    </section>
+  );
+}

client/src/components/Footer/style.css

@@ -0,0 +1,43 @@
+.section2 {
+  display: flex;
+  width: 60%;
+  height: 100%;
+  align-content: center;
+  justify-content: space-around;
+  align-items: flex-start;
+  margin-top: 30px;
+}
+
+.footer--list {
+  display: flex;
+  flex-direction: column;
+  height: 50%;
+}
+
+.footer--list > a {
+  font-size: 24px;
+  margin-bottom: 20px;
+  font-size: 18px;
+  text-align: left;
+}
+.footer--list > a > svg {
+  margin-right: 5px;
+}
+
+.footer--list > p {
+  font-size: 26px;
+  color: #fff;
+  margin-bottom: 40px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.Social * {
+  display: flex;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.footer {
+  background-color: black;
+}

client/src/components/ImageSection/ImageSection.js

@@ -0,0 +1,28 @@
+import './imageSection.css';
+
+function ImageSection({ arr }) {
+  const mainImage = arr[0];
+  const images = arr.slice(1);
+  return (
+    <section className="main">
+      <section className="bigImage">
+        <img
+          src={mainImage}
+          alt="home"
+          loading="lazy"
+        />
+      </section>
+      <section className="anotherImage">
+        {images.map((item) => (
+          <img
+            src={item}
+            alt="home"
+            loading="lazy"
+          />
+        ))}
+      </section>
+    </section>
+  );
+}
+
+export default ImageSection;

client/src/components/ImageSection/imageSection.css

@@ -0,0 +1,26 @@
+.main{
+    display: flex;
+    width: 80%;
+    height: 60vh;
+}
+.bigImage{
+    width: 70%;
+}
+.bigImage img{
+    min-width: 100%;
+    max-height: 100%
+}
+.anotherImage{
+    display: flex;
+    flex-direction:column;
+    width: 30%;
+    justify-content: space-between
+
+}
+.anotherImage img{
+    min-width: 100%;
+    min-height: 30%;
+    margin-left:10px;
+    margin-bottom: 6px;
+
+}

client/src/components/Search/index.js

@@ -0,0 +1,11 @@
+import './style.css';
+
+function Search() {
+  return (
+    <div>
+      Hello
+    </div>
+  );
+}
+
+export default Search;

client/src/components/UserContacatCard/index.js

@@ -0,0 +1,87 @@
+import {
+  Card,
+  CardContent,
+  Typography,
+  Avatar,
+  colors,
+
+} from '@mui/material';
+import MdPhone from '@mui/icons-material/Phone';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import EmailIcon from '@mui/icons-material/Email';
+import { makeStyles } from '@mui/styles';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles({
+  card: {
+    backgroundColor: 'secondary',
+    maxWidth: 345,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '10px',
+  },
+  icon: {
+    marginRight: '0.5rem',
+  },
+});
+const contentStyles = { display: 'flex', marginBottom: '15px', alignItems: 'center' };
+
+function UserContactCard({
+  data: {
+    name, phone, image, location, email,
+  },
+}) {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.card} style={{ backgroundColor: '#F1F1F1' }}>
+
+      <Avatar
+        sx={{ bgcolor: colors.green[500], width: 124.02, height: 129.66 }}
+        src={image}
+        variant="rounded"
+      />
+      <CardContent className={classes.card}>
+        <Typography gutterBottom variant="h5" component="div">
+          {name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Building Owner
+        </Typography>
+        <Typography gutterBottom variant="h6" component="div">
+          Contact Info:
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <LocationOnIcon className={classes.icon} />
+          {location}
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <MdPhone className={classes.icon} />
+          {phone}
+        </Typography>
+
+        <Typography sx={contentStyles} variant="body2" color="text.secondary">
+          <EmailIcon className={classes.icon} />
+          {email}
+        </Typography>
+
+      </CardContent>
+    </Card>
+  );
+}
+
+UserContactCard.propTypes = {
+  data: PropTypes.shape({
+    image: PropTypes.string,
+    name: PropTypes.string,
+    location: PropTypes.string,
+    phone: PropTypes.string,
+    email: PropTypes.string,
+  }).isRequired,
+};
+
+export default UserContactCard;

client/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as Search } from './Search';
+export { default as Footer } from './Footer';