diff --git a/package-lock.json b/package-lock.json
index 7be3e3d..2c1a5d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,6 @@
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.21.0",
- "bootstrap": "^4.5.2",
"cors": "^2.8.5",
"firebase": "^8.0.2",
"node-sass": "^5.0.0",
@@ -24,7 +23,9 @@
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-scroll": "^1.8.1",
+ "react-scroll-to-top": "^1.0.9",
"react-slick": "^0.27.12",
+ "react-transition-group": "^4.4.2",
"slick-carousel": "^1.8.1"
}
},
@@ -4579,19 +4580,6 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
- "node_modules/bootstrap": {
- "version": "4.5.2",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
- "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/bootstrap"
- },
- "peerDependencies": {
- "jquery": "1.9.1 - 3",
- "popper.js": "^1.16.1"
- }
- },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -15208,6 +15196,14 @@
"react-dom": "^15.5.4 || ^16.0.0"
}
},
+ "node_modules/react-scroll-to-top": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-1.0.9.tgz",
+ "integrity": "sha512-15R4HRW90idCg2taYSK2Sox/bNBv2Vq9acgu8wbR4mMSclDkNbS3EBenxfUrYh4JHB2WpxWbBty3bb6hQPzScA==",
+ "peerDependencies": {
+ "react": "^16.8.0 || 17.x || ^18"
+ }
+ },
"node_modules/react-slick": {
"version": "0.27.12",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.12.tgz",
@@ -15225,9 +15221,9 @@
}
},
"node_modules/react-transition-group": {
- "version": "4.4.1",
- "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
- "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+ "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
@@ -23000,12 +22996,6 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
- "bootstrap": {
- "version": "4.5.2",
- "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
- "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A==",
- "requires": {}
- },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -31592,6 +31582,12 @@
"prop-types": "^15.7.2"
}
},
+ "react-scroll-to-top": {
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/react-scroll-to-top/-/react-scroll-to-top-1.0.9.tgz",
+ "integrity": "sha512-15R4HRW90idCg2taYSK2Sox/bNBv2Vq9acgu8wbR4mMSclDkNbS3EBenxfUrYh4JHB2WpxWbBty3bb6hQPzScA==",
+ "requires": {}
+ },
"react-slick": {
"version": "0.27.12",
"resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.12.tgz",
@@ -31605,9 +31601,9 @@
}
},
"react-transition-group": {
- "version": "4.4.1",
- "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
- "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+ "version": "4.4.2",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+ "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
diff --git a/package.json b/package.json
index 018adc9..9247cbb 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,6 @@
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.21.0",
- "bootstrap": "^4.5.2",
"cors": "^2.8.5",
"firebase": "^8.0.2",
"node-sass": "^5.0.0",
@@ -19,7 +18,9 @@
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-scroll": "^1.8.1",
+ "react-scroll-to-top": "^1.0.9",
"react-slick": "^0.27.12",
+ "react-transition-group": "^4.4.2",
"slick-carousel": "^1.8.1"
},
"scripts": {
diff --git a/public/index.html b/public/index.html
index 9dd4018..a6867b6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,51 +1,38 @@
-
-
-
-
-
-
-
-
- APPointment - Better Way To Schedule Appointments.
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
+
+
+
-
-
-
+
+
+
+
diff --git a/src/App.js b/src/App.js
index 695e514..f40e367 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,20 +7,22 @@ import PhotoSection from "./Components/PhotoSection";
import ContactSection from "./Components/ContactSection";
import Footer from "./Components/Footer";
import Menu from "./Components/Navbar";
+import ScrollToTop from "react-scroll-to-top";
function App() {
- return (
-
- );
+ return (
+
+ );
}
export default App;
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
index 3a99a21..de702ae 100644
--- a/src/Components/Navbar.js
+++ b/src/Components/Navbar.js
@@ -1,113 +1,97 @@
import React from "react";
-import { withStyles } from "@material-ui/core/styles";
import { Navbar, Nav, Container } from "react-bootstrap";
import { Link } from "react-scroll";
import "./styles/NavbarStyles.css";
-import styles from "./styles/NavbarStyles";
+// import { useScrollPosition } from "../hooks";
-function Menu(props) {
- const { classes } = props;
- return (
-
-
- 
- 
-
-
-
-
-
- );
+
+
+
+
+ );
}
-export default withStyles(styles)(Menu);
+export default Menu;
diff --git a/src/Components/styles/NavbarStyles.css b/src/Components/styles/NavbarStyles.css
index 9f62927..3819863 100644
--- a/src/Components/styles/NavbarStyles.css
+++ b/src/Components/styles/NavbarStyles.css
@@ -1,26 +1,80 @@
+.navbar {
+ position: absolute;
+ width: 99vw;
+ z-index: 999;
+ background: transparent;
+}
+.navbarScroll {
+ width: 99vw;
+ height: 5vh;
+ z-index: 999;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+ background: linear-gradient(
+ to right top,
+ #1960ff,
+ #0077ff,
+ #008aff,
+ #009cff,
+ #00acff,
+ #09b6ff,
+ #23bffe,
+ #3ac8fd,
+ #41cefd,
+ #4ad4fc,
+ #54dafc,
+ #5fe0fb
+ );
+ transition: height 3s linear;
+}
+.navbarLogo {
+ margin-left: 5rem;
+}
+.navbarLinksContainer {
+ margin-left: 5rem;
+ align-items: center;
+ color: #fff !important;
+ text-decoration: none !important;
+}
+.navbarLink {
+ font-size: 150%;
+ width: 100%;
+ height: 100%;
+ white-space: nowrap;
+ text-decoration: none !important;
+ color: #fff !important;
+ display: inline-block;
+ vertical-align: top;
+ letter-spacing: 0.2em;
+ text-align: center;
+}
+
+.navbarLink:hover {
+ color: rgba(255, 255, 255, 0.75);
+}
+
.navlink a {
- position: relative;
+ position: relative;
}
.navlink a::before {
- content: "";
- position: absolute;
- width: 100%;
- height: 2px;
- bottom: -2px;
- left: 0;
- background-color: white;
- visibility: hidden;
- transform: scaleX(0);
- transition: all 0.3s ease-in-out 0s;
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ bottom: -2px;
+ left: 0;
+ background-color: white;
+ visibility: hidden;
+ transform: scaleX(0);
+ transition: all 0.3s ease-in-out 0s;
}
.navlink a:hover::before {
- visibility: visible;
- transform: scaleX(1);
+ visibility: visible;
+ transform: scaleX(1);
}
.navlink a:active::before {
- visibility: visible;
- transform: scaleX(1);
+ visibility: visible;
+ transform: scaleX(1);
}
diff --git a/src/Components/styles/NavbarStyles.js b/src/Components/styles/NavbarStyles.js
index 217faf6..e69de29 100644
--- a/src/Components/styles/NavbarStyles.js
+++ b/src/Components/styles/NavbarStyles.js
@@ -1,32 +0,0 @@
-export default {
- navbar: {
- position: "absolute !important",
- width: "100vw",
- zIndex: "999",
- },
- navbarLogo: {
- marginLeft: "5rem",
- marginTop: "2rem",
- },
- navbarLinksContainer: {
- marginLeft: "5rem",
- alignItems: "center",
- color: "#fff !important",
- textDecoration: "none !important",
- },
- navbarLink: {
- fontSize: "150%",
- width: "100%",
- height: "100%",
- whiteSpace: "nowrap",
- textDecoration: "none !important",
- color: "#fff !important",
- display: "inline-block",
- verticalAlign: "top",
- letterSpacing: "0.2em",
- textAlign: "center",
- "&:hover": {
- color: "rgba(255,255,255,0.75) !important",
- },
- },
-};
diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644
index 0000000..0f237d4
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1 @@
+export * from "./useScrollPosition";
diff --git a/src/hooks/useScrollPosition.js b/src/hooks/useScrollPosition.js
new file mode 100644
index 0000000..1c2fcb2
--- /dev/null
+++ b/src/hooks/useScrollPosition.js
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+export const useScrollPosition = () => {
+ const [scrollPosition, setScrollPosition] = useState(0);
+
+ useEffect(() => {
+ const updatePosition = () => {
+ setScrollPosition(window.pageYOffset);
+ };
+
+ window.addEventListener("scroll", updatePosition);
+
+ updatePosition();
+
+ return () => window.removeEventListener("scroll", updatePosition);
+ }, []);
+
+ return scrollPosition;
+};
diff --git a/src/index.css b/src/index.css
index 95f3ab4..3f12fc3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,14 +1,14 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500&display=swap");
body {
- width: 100vw;
- overflow-x: hidden;
- font-family: "Poppins", sans-serif;
- font-size: 14px;
- line-height: 24px;
- font-weight: 400;
- color: #565656;
- text-align: left;
+ width: 100vw;
+ overflow-x: hidden;
+ font-family: "Poppins", sans-serif;
+ font-size: 14px;
+ line-height: 24px;
+ font-weight: 400;
+ color: #565656;
+ text-align: left;
}
h1,
@@ -17,72 +17,76 @@ h3,
h4,
h5,
h6 {
- font-weight: 600;
- color: #222;
- line-height: 1.2;
+ font-weight: 600;
+ color: #222;
+ line-height: 1.2;
}
ol li,
ul li {
- list-style: none;
+ list-style: none;
}
a,
a:hover,
a:focus,
.btn:focus {
- text-decoration: none !important;
- color: #444;
- outline: none;
- box-shadow: none;
+ text-decoration: none !important;
+ color: #444;
+ outline: none !important;
+ box-shadow: none;
+}
+
+button:focus {
+ outline: none !important;
}
p {
- font-size: 14px;
- font-weight: 400;
- line-height: 24px;
- color: #565656;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 24px;
+ color: #565656;
}
a {
- color: #444;
- transition: all 0.3s ease 0s;
- background-color: transparent;
+ color: #444;
+ transition: all 0.3s ease 0s;
+ background-color: transparent;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
+ font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+ monospace;
}
section {
- width: 100vw;
- display: block;
- position: relative;
- padding: 8em 0 8em 0;
+ width: 100vw;
+ display: block;
+ position: relative;
+ padding: 8em 0 8em 0;
}
.HeadingUnderline {
- position: absolute;
- content: "";
- height: 2px;
- width: 70px;
- background-color: #0362e2;
- top: 45px;
- left: 50%;
- transform: translateX(-50%);
+ position: absolute;
+ content: "";
+ height: 2px;
+ width: 70px;
+ background-color: #0362e2;
+ top: 45px;
+ left: 50%;
+ transform: translateX(-50%);
}
.HeadingUnderlineWhite {
- position: absolute;
- content: "";
- height: 2px;
- width: 70px;
- background-color: white;
- left: 50%;
- transform: translateX(-50%);
+ position: absolute;
+ content: "";
+ height: 2px;
+ width: 70px;
+ background-color: white;
+ left: 50%;
+ transform: translateX(-50%);
}
* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}