updated home page

my-app/package.json

@@ -6,9 +6,15 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^5.0.2",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.0-beta.4",
     "react-dom": "^17.0.2",
+    "react-elastic-carousel": "^0.11.5",
+    "react-responsive-carousel": "^3.2.20",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

my-app/src/App.css

@@ -36,3 +36,13 @@
     transform: rotate(360deg);
   }
 }
+body {
+  height: 100vh;
+}
+
+footer {
+  position: relative;
+  bottom: 0;
+  border: 1px solid black;
+  background: #0D1026;
+}

my-app/src/App.js

@@ -1,25 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className='App'>
+      <h1>hello</h1>
     </div>
   );
 }
-
 export default App;

my-app/src/Routes.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Home from "./core/Home";
+import Members from "./core/Members";
+
+const Routes = () => {
+  return (
+    <div>
+      <Router>
+        <Switch>
+          <Route path='/' exact component={Home} />
+          <Route path='/members' exact component={Members} />
+        </Switch>
+      </Router>
+    </div>
+  );
+};
+
+export default Routes;

my-app/src/core/Base.js

@@ -0,0 +1,34 @@
+import React from "react";
+import Menu from "./Menu";
+import Logo from "../images/codex logo 2.png";
+import ContactInfo from "./ContactInfo";
+
+const Base = ({ children }) => {
+  return (
+    <div>
+      <Menu></Menu>
+      {children}
+      <footer>
+        <div>
+          <img style={{ width: "243px", height: "243px" }} src={Logo} alt='' />
+        </div>
+        <div>
+          <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry.
+          </p>
+        </div>
+        <div>
+          <h2 style={{ color: "#f6f6f6", padding: "5px" }}>FOLLOW US</h2>
+          <ContactInfo>
+            <button className='icons-btn'>
+              <img src='https://img.icons8.com/material-rounded/24/000000/github.png' />
+            </button>
+          </ContactInfo>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Base;

my-app/src/core/ContactForm.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ContactForm = () => {
+  return (
+    <div>
+      <form className='form'>
+        <div className='text'>
+          <h1>Join our monthly news letter</h1>
+        </div>
+        <div>
+          <input type='email' placeholder='email' />
+        </div>
+        <div>
+          <button className='btn btn-primary'>Subscribe</button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ContactForm;

my-app/src/core/ContactInfo.js

@@ -0,0 +1,36 @@
+import React from "react";
+
+const ContactInfo = ({ children }) => {
+  return (
+    <div>
+      <div className='icons'>
+        <button className='icons-btn'>
+          <img src='https://img.icons8.com/ios-glyphs/30/000000/instagram-circle.png' />
+        </button>
+        <button className='icons-btn'>
+          <img src='https://img.icons8.com/material-outlined/24/000000/youtube-play--v1.png' />
+        </button>
+        <button className='icons-btn'>
+          <img src='https://img.icons8.com/material-outlined/24/000000/linkedin.png' />
+        </button>
+        <button className='icons-btn'>
+          <img
+            style={{
+              width: "2em",
+              height: "2em",
+              borderRadius: "50%",
+            }}
+            src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3DiBGuDqFLEfrk0FZRchWt8yVZaiqrfUAgyFX0wqO7eKYkWdmvd9CqsK0kZJSRWnVjaQ&usqp=CAU'
+            alt=''
+          />
+        </button>
+        <button className='icons-btn'>
+          <img src='https://img.icons8.com/material-outlined/24/000000/facebook-circled--v6.png' />
+        </button>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ContactInfo;

my-app/src/core/Home.js

@@ -0,0 +1,80 @@
+import React from "react";
+import Base from "./Base";
+import banner from "../images/19362653 1.png";
+import Slider from "./Slider";
+import ContactForm from "./ContactForm";
+import ContactInfo from "./ContactInfo";
+const Home = () => {
+  return (
+    <div>
+      <Base>
+        <div className='section'>
+          <section className='split'>
+            <div>
+              <div className='container1'>
+                {" "}
+                <h2 className='heading'>A Community of Coders from ITER</h2>
+                <p className='p'>
+                  We Code, <br />
+                  We Explore.
+                </p>
+                <ContactInfo></ContactInfo>
+                <button className='btn-github'>
+                  <div className='btn-container' style={{ width: "100%" }}>
+                    <img
+                      style={{
+                        width: "30px",
+                        height: "30px",
+                        marginLeft: "0",
+                        display: "inline-block",
+                      }}
+                      src='https://img.icons8.com/fluency-systems-filled/48/000000/github.png'
+                    />
+                    Visit Github
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div>
+              <div className='container1'>
+                <img className='banner' src={banner} alt='' />
+              </div>
+            </div>
+          </section>
+        </div>
+        <section
+          className='split2'
+          style={{ backgroundColor: "#0C1E3C", height: "43.2em" }}
+        >
+          <div className='display'>
+            <img src='https://img.icons8.com/fluency-systems-regular/48/000000/guest-male.png' />
+            <h1>100+</h1>
+            <h2>Members</h2>
+          </div>
+          <div className='display'>
+            <img src='https://img.icons8.com/ios/50/000000/repository.png' />
+            <h1>30+</h1>
+            <h2>Projects</h2>
+          </div>
+          <div className='display'>
+            <img src='https://img.icons8.com/ios-filled/50/000000/merge-git.png' />
+            <h1>1K+</h1>
+            <h2>Commits</h2>
+          </div>
+        </section>
+
+        <section className='slider'>
+          <div className='container-testimonial'>
+            <Slider></Slider>
+          </div>
+        </section>
+        <section className='contact-form'>
+          <ContactForm></ContactForm>
+        </section>
+      </Base>
+    </div>
+  );
+};
+
+export default Home;

my-app/src/core/Members.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Base from "./Base";
+const Members = () => {
+  return (
+    <div>
+      <Base></Base>
+      <h1>Membres</h1>
+    </div>
+  );
+};
+
+export default Members;

my-app/src/core/Menu.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Link, withRouter } from "react-router-dom";
+import { Navbar, Nav, Container } from "react-bootstrap";
+import Logo from "../images/codex logo 2.png";
+import "../styles/navbar.css";
+
+const currentTab = (history, path) => {
+  if (history.location.pathname === path) {
+    // console.log(history.location.pathname);
+    return { color: "#56ccf2", fontSize: "1.5em", fontWeight: "bold" };
+  } else {
+    return { color: "white", fontSize: "1.5em", fontWeight: "bold" };
+  }
+};
+
+const Menu = ({ history, children }) => {
+  return (
+    <div>
+      {children}
+      <Navbar className='header' collapseOnSelect expand='lg' variant='dark'>
+        {/* <Container> */}
+        <Navbar.Brand className='nav-brand justify-content-start' href='#home'>
+          <img style={{ width: "243px", height: "243px" }} src={Logo} alt='' />
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls='responsive-navbar-nav' />
+        <Navbar.Collapse
+          className='justify-content-end'
+          id='responsive-navbar-nav'
+        >
+          <Nav>
+            <Link style={currentTab(history, "/")} className='nav-link' to='/'>
+              Home
+            </Link>
+            <Link
+              style={currentTab(history, "/members")}
+              className='nav-link'
+              to='/members'
+            >
+              Members
+            </Link>
+            <Link style={currentTab(history, "/")} className='nav-link' to='/'>
+              Events
+            </Link>
+            <Link style={currentTab(history, "/")} className='nav-link' to='/'>
+              About us
+            </Link>
+            <Link style={currentTab(history, "/")} className='nav-link' to='/'>
+              Contact us
+            </Link>
+          </Nav>
+        </Navbar.Collapse>
+        {/* </Container> */}
+      </Navbar>
+    </div>
+  );
+};
+
+export default withRouter(Menu);

my-app/src/core/Slider.js

@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from "react";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import Carousel from "react-elastic-carousel";
+import Testimonial from "./Testimonial";
+const Slider = () => {
+  // const [width, setWidth] = useState(window.innerWidth);
+  // const [show, setShow] = useState(false);
+  // const handleShow = () => {
+  //   setWidth(window.innerWidth);
+  //   if (width <= 400) {
+  //     setShow(false);
+  //   } else {
+  //     setShow(true);
+  //   }
+  // };
+  // useEffect(() => {
+  //   handleShow();
+  // });
+
+  // window.addEventListener("resize", handleShow);
+  return (
+    <>
+      <Carousel
+        infiniteLoop={true}
+        autoPlay={true}
+        showArrows={true}
+        showThumbs={false}
+      >
+        <Testimonial></Testimonial>
+        <Testimonial></Testimonial>
+        <Testimonial></Testimonial>
+        <Testimonial></Testimonial>
+      </Carousel>
+    </>
+  );
+};
+
+export default Slider;