diff --git a/client/src/App.js b/client/src/App.js index 3523a62..39ff351 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -1,13 +1,37 @@ -import React from 'react' +import React, {useState} from 'react' import Home from './pages/home/Home.js' +import Navbar from './components/navbar/Navbar.js' +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import Team from "./pages/team/Team" +import Hero from './components/hero/Hero.js'; + +export const VisibilityContext = React.createContext() const App = () => { + + const [visibility, setVisibility] = useState(false) + const value = {visibility, setVisibility} + + console.log(visibility) + // console.log("check") + return ( -
- {/*

App

*/} - -
- ) + + + + + + + + + {/* */} + + + + + + ); + } -export default App +export default App \ No newline at end of file diff --git a/client/src/components/hero/Hero.css b/client/src/components/hero/Hero.css index c3af3f4..01e5fc4 100644 --- a/client/src/components/hero/Hero.css +++ b/client/src/components/hero/Hero.css @@ -7,31 +7,59 @@ } .hero-container { - position: relative; - top: -52px; - left: 0; + display: flex; + flex-direction: column; + align-items: center; + min-height: 110vh; + background-image: url("./assets/background-large.png"); + background-repeat: no-repeat; + background-color: #fcfcfc; + background-size: cover; + background-position: center center; + font-family: "Raleway", sans-serif; + height: 95vh; + transform: translate(0,-9vh); + max-height: 100vh; + width: 100%; } -.bg { - max-width: 100%; - z-index: -10; +.hero-content{ + display: flex; + flex-direction: column; + justify-content: space-between; + height: 400px; + width: 80%; + margin-top: 6rem; } -.hero-text { - position: relative; - top: -550px; - left: 170px; - color: #ff577e; - font-family: "Raleway", sans-serif; - height: 300px; - width: 300px; - line-height: 60px; - font-size: 1.5rem; +.hero-content img{ + width: 250px; } -.head-logo { - position: relative; - top: -675px; - left: 100px; - width: 250px; +.hero-text h1{ + color: #ff697e; + font-size: 3.4rem; + font-weight: 400; +} + +@media screen and (max-width:820px) { + .hero-container{ + background: url("./assets//background-mobile.png") no-repeat center center fixed; + background-size: cover; + background-position: center center; + } +} + +@media screen and (max-width:650px) { + .head-logo{ + display: none; + } + .hero-content{ + margin-top: 18rem; + } + .hero-text h1{ + color: #ff697e; + font-size: 2.5rem; + font-weight: 400; } +} \ No newline at end of file diff --git a/client/src/components/hero/Hero.js b/client/src/components/hero/Hero.js index 6540daf..9f83680 100644 --- a/client/src/components/hero/Hero.js +++ b/client/src/components/hero/Hero.js @@ -1,22 +1,53 @@ -import React from 'react' - -// importing the bg -import bg from './assets/Asset6.png' +import React, {useState, useEffect, useRef, useContext} from 'react' import logo from './assets/logo.png' +import {ReactComponent as BgSvg} from "./assets/background-large.svg" import "./Hero.css" +import { VisibilityContext } from "../../App"; + + +const Hero = (props) => { + + // const [isVisible, setIsVisible] = useState(false) + const logoRef = useRef(null) + const { visibility, setVisibility } = useContext(VisibilityContext); + + + const callback = (entries)=>{ + const [entry] = entries + setVisibility(entry.isIntersecting) + } + + + let options = { + root: null, + rootMargin: "0px", + threshold: 0 + } + + useEffect(()=>{ + const observer = new IntersectionObserver(callback, options); + if(logoRef.current) observer.observe(logoRef.current); + + return ()=>{ + if(logoRef.current) observer.unobserve(logoRef.current) + } + + }, [options, logoRef]) -const Hero = () => { return ( -
- - +
+
+ logo
-

Streamlining Your Iot Needs

+

+ Streamlining
Your IOT
Needs... +

+
- ) + ); } -export default Hero +export default Hero \ No newline at end of file diff --git a/client/src/components/hero/assets/Asset6.png b/client/src/components/hero/assets/background-large.png similarity index 100% rename from client/src/components/hero/assets/Asset6.png rename to client/src/components/hero/assets/background-large.png diff --git a/client/src/components/hero/assets/background-large.svg b/client/src/components/hero/assets/background-large.svg new file mode 100644 index 0000000..d0d74eb --- /dev/null +++ b/client/src/components/hero/assets/background-large.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/components/hero/assets/background-mobile.png b/client/src/components/hero/assets/background-mobile.png new file mode 100644 index 0000000..60492c0 Binary files /dev/null and b/client/src/components/hero/assets/background-mobile.png differ diff --git a/client/src/components/navbar/Navbar.css b/client/src/components/navbar/Navbar.css index bae7251..cdd8fc2 100644 --- a/client/src/components/navbar/Navbar.css +++ b/client/src/components/navbar/Navbar.css @@ -1,65 +1,138 @@ @import url("https://fonts.googleapis.com/css2?family=Work+Sans&display=swap"); -* { - box-sizing: border-box; - margin: 0; - padding: 0; - scroll-behavior: smooth; -} - -.nav-container { - top: 0; - left: 0; +.navbar-container { display: flex; - justify-content: space-between; + justify-content: center; + align-items: center; position: fixed; + top: 0; width: 100%; - z-index: 10; + padding: 5px; + min-height: 70px; + z-index: 10000; } -.nav-container a { - text-decoration: none; -} - -.active { - color: #ff697e; +.is-distinct { + box-shadow: 0px 14px 7px 0px #0000000f; + background: #f5f5f5; } -.unselected { - color: #4564bf; +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + width: 80%; + min-height: 60px; } -.home { - margin: 0 75px 0 0; +.nav-logo img { + width: 120px; } -.about { - margin: 0 150px 0 0; -} -.nav-text { +.nav-menu ul { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; - font-size: 0.75rem; + list-style-type: none; +} + +.nav-menu ul li { + margin: 0 1rem; + font-size: larger; font-family: "Work Sans", sans-serif; - color: #4564bf; + font-size: 1.3rem; + font-weight: 400; } -.logo { - width: 140px; - margin: 10px 0 12px 62px; - visibility: hidden; +.nav-menu ul a { + text-decoration: none; + color: #4564bf; } -/*On Scrollll */ -.nav-container.scroll { - background-color: #f5f5f5; - box-shadow: 0px 14px 7px 0px #0000000f; - position: fixed; +.is-active li { + color: #ff577e; } -.logo.scroll-logo { - width: 140px; - margin: 10px 0 12px 62px; - visibility: visible; -} \ No newline at end of file +@media screen and (max-width: 500px) { + .is-distinct { + background: #ffffff; + box-shadow: 0 6px 4px -8px black; + z-index: 100; + } + .navbar { + width: 90%; + } + .nav-menu { + position: fixed; + right: 0; + top: 70.8px; + border-radius: 4px; + background: rgba(0, 0, 0, 0.25); + height: 100vh; + width: 100vw; + transform: translate(0,-115%); + transition: all 0.5s ease; + z-index: -100; + } + .hide{ + transform: translate(0); + } + .nav-menu ul { + flex-direction: column; + background: #ffffff; + align-items: flex-start; + } + .nav-menu ul a { + width: 100%; + line-height: 3rem; + margin-left: 1rem; + } + .hamburger-btn { + position: relative; + display: flex; + justify-content: center; + align-items: center; + right: 5px; + width: 35px; + height: 35px; + cursor: pointer; + transition: all 0.5s ease-in-out; + border-radius: 3px; + z-index: 10000; + } + .hamburger { + width: 28px; + height: 1.6px; + background: #000000; + border-radius: 5px; + transition: all 0.5s ease-in-out; + } + .hamburger::before, + .hamburger::after { + content: ""; + position: absolute; + width: 28px; + height: 1.6px; + background: #000; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2); + transition: all 0.5s ease-in-out; + } + .hamburger::before { + transform: translateY(-10px); + } + .hamburger::after { + transform: translateY(10px); + } + .open .hamburger { + transform: translateX(-8px); + background: transparent; + box-shadow: none; + } + .open .hamburger::before { + transform: rotate(45deg) translate(5px, -5px); + } + .open .hamburger::after { + transform: rotate(-45deg) translate(5px, 5px); + } +} diff --git a/client/src/components/navbar/Navbar.js b/client/src/components/navbar/Navbar.js index 6dc3d9a..2fde37e 100644 --- a/client/src/components/navbar/Navbar.js +++ b/client/src/components/navbar/Navbar.js @@ -1,43 +1,57 @@ -import React, { useState } from 'react' -import { NavLink } from 'react-router-dom' +import React, { useState, useEffect, useRef } from "react"; +import { NavLink } from "react-router-dom"; // importing the logo -import image from './assets/logo.png' - -import "./Navbar.css" - -const Navbar = () => { - - const [navbar, setNavbar] = useState(false) - - const changeNavbar = () => { - if (window.scrollY >= 100) { - setNavbar(true) - } - else { - setNavbar(false) - } - } - - window.addEventListener('scroll', changeNavbar) - - return ( -
- img -
- "active" + (!isActive ? " unselected" : "")}> -
-

Home

-
- - "active" + (!isActive ? " unselected" : "")}> -
-

About Us

-
- -
+import logo from "./assets/logo.png"; + +import "./Navbar.css"; + +const Navbar = (props) => { + const { visibility } = props; + + const [navbar, setNavbar] = useState(false); + const [show, setShow] = useState(false); + const [isVisible, setIsVisible] = useState(); + const menu = useRef(null) + + return ( +
+ +
+ ); +}; -export default Navbar \ No newline at end of file +export default Navbar; diff --git a/client/src/components/upcomingEvents/UpcomingEvents.js b/client/src/components/upcomingEvents/UpcomingEvents.js index 2bd09f8..fd58d36 100644 --- a/client/src/components/upcomingEvents/UpcomingEvents.js +++ b/client/src/components/upcomingEvents/UpcomingEvents.js @@ -1,6 +1,6 @@ import React from 'react' import "./UpcomingEvents.css" -import logooo from './assests/Asset 9.png' +import logooo from './assets/Asset 9.png' const UpcomingEvents = () => { return (
diff --git a/client/src/components/upcomingEvents/assests/Asset 9.png b/client/src/components/upcomingEvents/assests/Asset 9.png deleted file mode 100644 index a31ef1b..0000000 Binary files a/client/src/components/upcomingEvents/assests/Asset 9.png and /dev/null differ diff --git a/client/src/index.js b/client/src/index.js index 6aa3b39..c0b949f 100644 --- a/client/src/index.js +++ b/client/src/index.js @@ -4,8 +4,8 @@ import "./index.css" import App from "./App" ReactDOM.render( - - - , - document.getElementById("root") -) \ No newline at end of file + + , + , + document.getElementById("root") +); \ No newline at end of file diff --git a/client/src/pages/home/Home.js b/client/src/pages/home/Home.js index 3cbe015..300cbe4 100644 --- a/client/src/pages/home/Home.js +++ b/client/src/pages/home/Home.js @@ -1,24 +1,18 @@ -import React from 'react' +import React from "react"; -import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import Navbar from "../../components/navbar/Navbar"; +// import UpcomingEvents from "../../components/upcomingEvents/UpcomingEvents"; import Hero from "../../components/hero/Hero"; -import Form from '../../components/form/Form'; +import Form from "../../components/form/Form"; const Home = () => { - return ( -
- {/* - - - - - - - */} -
-
- ) -} + return ( +
+ +
+
+ ); +}; -export default Home +export default Home; diff --git a/client/src/pages/team/Team.js b/client/src/pages/team/Team.js index ebe7a07..784a37e 100644 --- a/client/src/pages/team/Team.js +++ b/client/src/pages/team/Team.js @@ -1,10 +1,9 @@ import React from 'react' -import AboutUs from '../../components/aboutUs/AboutUs' const Team = () => { return (
- +

Team

) }