) for the navbar links
38 | */
39 | .navbar__link {
40 | font-size: 0.85rem;
41 | text-decoration: none;
42 | color: rgb(255, 255, 255);
43 | text-align: center;
44 | padding: 10px;
45 | margin: 0px 5px;
46 | border-style: solid;
47 | border-width: 0px 0px 1px 0px;
48 | border-color: transparent;
49 | transition: 250ms;
50 | }
51 |
52 | .navbar__link:hover {
53 | border-color: white;
54 | transition: 250ms;
55 | }
56 |
57 | .navbar__menu {
58 | color: white;
59 | display: none;
60 | cursor: pointer;
61 | }
62 |
63 | @media screen and (max-width: 800px) {
64 | .navbar__list {
65 | display: flex;
66 | flex-direction: column;
67 | justify-content: space-evenly;
68 | align-items: center;
69 | top: 70px;
70 | left: -100%;
71 | width: 100%;
72 | height: 300px;
73 | position: absolute;
74 | transition: all 0.5s ease;
75 | }
76 |
77 | .navbar__list--active {
78 | left: 0;
79 | }
80 |
81 | .navbar__menu {
82 | display: block;
83 | }
84 |
85 | .navbar__item {
86 | width: 100%;
87 | display: flex;
88 | justify-content: center;
89 | align-items: center;
90 | border-radius: 0;
91 | flex: 1;
92 | }
93 |
94 | .navbar__link {
95 | display: flex;
96 | height: 100%;
97 | width: 100%;
98 | justify-content: center;
99 | align-items: center;
100 | margin: 0px;
101 | border-width: 0px;
102 | background-color: black;
103 | opacity: 0.75;
104 | }
105 |
106 | .navbar__link:hover {
107 | border-width: 0px;
108 | opacity: 0.9;
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import "./Navbar.css";
3 | import { FiMenu, FiX } from "react-icons/fi";
4 |
5 | const Navbar = ({ navbarLinks }) => {
6 | // Determines if the "menu icon" was clicked or not. Note that this icon is only visible when the window width is small.
7 | const [menuClicked, setMenuClicked] = useState(false);
8 |
9 | const toggleMenuClick = () => {
10 | setMenuClicked(!menuClicked);
11 | };
12 |
13 | return (
14 |
41 | );
42 | };
43 |
44 | export default Navbar;
45 |
--------------------------------------------------------------------------------
/src/components/Slider.css:
--------------------------------------------------------------------------------
1 | .slider {
2 | display: flex;
3 | align-items: center;
4 | margin: 20px;
5 |
6 | opacity: 0;
7 | transform: scale(85%);
8 | transition: 2s;
9 | }
10 |
11 | .slider--zoom {
12 | opacity: 1;
13 | transform: scale(100%);
14 | transition: 2s;
15 | }
16 |
17 | .slider__image {
18 | width: 60%;
19 | }
20 |
21 | .slider__content {
22 | flex: 1;
23 | display: flex;
24 | flex-direction: column;
25 | justify-content: center;
26 | align-items: center;
27 | padding: 20px;
28 | text-align: center;
29 | }
30 |
31 | .slider__title {
32 | text-align: center;
33 | }
34 |
35 | @media screen and (max-width: 800px) {
36 | .slider {
37 | flex-direction: column;
38 | background-color: rgb(236, 236, 236);
39 | }
40 |
41 | .slider__image {
42 | width: 100%;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/Slider.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./Slider.css";
3 | import { useInView } from "react-intersection-observer";
4 |
5 | const Slider = ({ imageSrc, title, subtitle, flipped }) => {
6 | const { ref, inView } = useInView({
7 | /* Optional options */
8 | threshold: 0.4,
9 | });
10 |
11 | const renderContent = () => {
12 | if (!flipped) {
13 | return (
14 | <>
15 | 
16 |
17 |
{title}
18 |
{subtitle}
19 |
26 |
{title}
27 |
{subtitle}
28 |
37 | {renderContent()}
38 |
39 | );
40 | };
41 |
42 | export default Slider;
43 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
8 |
9 | ## Animation (onScroll)
10 | ###### Using [`Intersection Observer`](https://github.com/thebuilder/react-intersection-observer#readme)
11 | 
12 |
13 | ## Responsive
14 | 
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-landing-page-v1",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.14.1",
7 | "@testing-library/react": "^11.2.7",
8 | "@testing-library/user-event": "^12.8.3",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-icons": "^4.2.0",
12 | "react-intersection-observer": "^8.32.0",
13 | "react-scripts": "4.0.3",
14 | "web-vitals": "^1.1.2"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "eslintConfig": {
23 | "extends": [
24 | "react-app",
25 | "react-app/jest"
26 | ]
27 | },
28 | "browserslist": {
29 | "production": [
30 | ">0.2%",
31 | "not dead",
32 | "not op_mini all"
33 | ],
34 | "development": [
35 | "last 1 chrome version",
36 | "last 1 firefox version",
37 | "last 1 safari version"
38 | ]
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DLabbate/react-landing-page-v1/0d8aa47817beb10cdf18e77a146aa6f2a1acf574/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
28 |
29 |
33 |
37 |