├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── components
        ├── AboutSection.js
        ├── Cards.js
        ├── FaqSection.js
        ├── GlobalStyle.js
        ├── Movie.js
        ├── Nav.js
        ├── Question.js
        ├── ServicesSection.js
        └── Wave.js
    ├── img
        ├── athlete-small.png
        ├── athlete1.png
        ├── athlete2.png
        ├── clock.svg
        ├── diaphragm.svg
        ├── goodtimes-small.png
        ├── home1.png
        ├── home2.png
        ├── money.svg
        ├── teamwork.svg
        ├── theathlete-big.png
        ├── theracer-small.png
        └── wave.svg
    ├── index.js
    ├── pages
        ├── AboutUs.js
        └── OurWork.js
    ├── serviceWorker.js
    └── util.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `npm start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `npm test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `npm run build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `npm run eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 
46 | ### Code Splitting
47 | 
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 | 
50 | ### Analyzing the Bundle Size
51 | 
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 | 
54 | ### Making a Progressive Web App
55 | 
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 | 
58 | ### Advanced Configuration
59 | 
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 | 
62 | ### Deployment
63 | 
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 | 
66 | ### `npm run build` fails to minify
67 | 
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dev-portofolio",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.5.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "framer-motion": "^2.7.7",
10 |     "react": "^16.13.1",
11 |     "react-dom": "^16.13.1",
12 |     "react-intersection-observer": "^8.29.0",
13 |     "react-router-dom": "^5.2.0",
14 |     "react-scripts": "3.4.3",
15 |     "styled-components": "^5.2.0"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": "react-app"
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link
13 |       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lobster&display=swap"
14 |       rel="stylesheet"
15 |     />
16 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
17 |     <!--
18 |       manifest.json provides metadata used when your web app is installed on a
19 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
20 |     -->
21 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
22 |     <!--
23 |       Notice the use of %PUBLIC_URL% in the tags above.
24 |       It will be replaced with the URL of the `public` folder during the build.
25 |       Only files inside the `public` folder can be referenced from the HTML.
26 | 
27 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
28 |       work correctly both with client-side routing and a non-root public URL.
29 |       Learn how to configure a non-root public URL by running `npm run build`.
30 |     -->
31 |     <title>React App</title>
32 |   </head>
33 |   <body>
34 |     <noscript>You need to enable JavaScript to run this app.</noscript>
35 |     <div id="root"></div>
36 |     <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | //Import Components
 3 | import Nav from "./components/Nav";
 4 | import GlobalStyle from "./components/GlobalStyle";
 5 | //Import Pages
 6 | import AboutUs from "./pages/AboutUs";
 7 | import OurWork from "./pages/OurWork";
 8 | //Router
 9 | import { Switch, Route, useLocation } from "react-router-dom";
10 | import { AnimatePresence } from "framer-motion";
11 | 
12 | function App() {
13 |   const location = useLocation();
14 | 
15 |   return (
16 |     <div className="App">
17 |       <GlobalStyle />
18 |       <Nav />
19 |       <AnimatePresence exitBeforeEnter>
20 |         <Switch location={location} key={location.pathname}>
21 |           <Route path="/" exact>
22 |             <AboutUs />
23 |           </Route>
24 |           <Route path="/work">
25 |             <OurWork />
26 |           </Route>
27 |         </Switch>
28 |       </AnimatePresence>
29 |     </div>
30 |   );
31 | }
32 | 
33 | export default App;
34 | 


--------------------------------------------------------------------------------
/src/components/AboutSection.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import homeImg1 from "../img/home1.png";
 3 | import { motion } from "framer-motion";
 4 | import { container, titleAnim, fade, photoAnim } from "../util";
 5 | import styled from "styled-components";
 6 | import Wave from "../components/Wave";
 7 | 
 8 | const AboutSection = () => {
 9 |   return (
10 |     <About variants={container} initial="hidden" animate="show" exit="exit">
11 |       <Description>
12 |         <div>
13 |           <Hide>
14 |             <motion.h2 variants={titleAnim}>We work to make</motion.h2>
15 |           </Hide>
16 |           <Hide>
17 |             <motion.h2 variants={titleAnim}>
18 |               your <span>dreams</span> come
19 |             </motion.h2>
20 |           </Hide>
21 |           <Hide>
22 |             <motion.h2 variants={titleAnim}> true.</motion.h2>
23 |           </Hide>
24 |         </div>
25 | 
26 |         <motion.p variants={fade}>
27 |           Contact us for any photography or videography ideas that you have. We
28 |           have professionals with amazing skills to help you achieve it.
29 |         </motion.p>
30 |         <motion.button variants={fade}>Contact Us</motion.button>
31 |       </Description>
32 |       <Image>
33 |         <motion.img
34 |           initial="hidden"
35 |           animate="show"
36 |           variants={photoAnim}
37 |           src={homeImg1}
38 |           alt="camera holding"
39 |         />
40 |       </Image>
41 |       <Wave />
42 |     </About>
43 |   );
44 | };
45 | 
46 | const About = styled(motion.div)`
47 |   background: #1b1b1b;
48 |   min-height: 90vh;
49 |   color: white;
50 |   display: flex;
51 |   align-items: center;
52 |   justify-content: space-between;
53 |   padding: 5rem 10rem;
54 | `;
55 | const Description = styled.div`
56 |   color: white;
57 |   z-index: 2;
58 |   flex: 1;
59 |   padding-right: 5rem;
60 |   h2 {
61 |     font-weight: lighter;
62 |   }
63 |   p {
64 |     padding: 3rem 0rem;
65 |     color: #cccccc;
66 |   }
67 |   span {
68 |     font-weight: bold;
69 |     color: #23d997;
70 |   }
71 |   button {
72 |     padding: 1rem 2rem;
73 |     border: 3px solid #23d997;
74 |     background: transparent;
75 |     color: white;
76 |     transition: all 0.5s ease;
77 |     &:hover {
78 |       background: #23d997;
79 |       color: white;
80 |     }
81 |   }
82 | `;
83 | const Image = styled.div`
84 |   z-index: 2;
85 |   flex: 1;
86 |   overflow: hidden;
87 |   img {
88 |     width: 100%;
89 |     height: 80vh;
90 |     object-fit: cover;
91 |   }
92 | `;
93 | 
94 | const Hide = styled.div`
95 |   overflow: hidden;
96 | `;
97 | 
98 | export default AboutSection;
99 | 


--------------------------------------------------------------------------------
/src/components/Cards.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import styled from "styled-components";
  3 | 
  4 | const Cards = () => {
  5 |   return (
  6 |     <StyledCards>
  7 |       <StyledCard>
  8 |         <div className="icon">
  9 |           <svg
 10 |             width="50"
 11 |             height="50"
 12 |             viewBox="0 0 50 50"
 13 |             fill="none"
 14 |             xmlns="http://www.w3.org/2000/svg"
 15 |           >
 16 |             <g clipPath="url(#clip0)">
 17 |               <path
 18 |                 d="M49.9036 27.3096C49.4547 22.7941 47.4374 18.5371 44.2231 15.3227C41.4761 12.5759 38.114 10.8107 34.5762 10.0258V7.54452C36.0212 7.18505 37.0952 5.87711 37.0952 4.3225C37.0952 2.49161 35.6057 1.00214 33.7748 1.00214H26.7435C24.9126 1.00214 23.4231 2.49161 23.4231 4.3225C23.4231 5.87702 24.4972 7.18495 25.942 7.54452V10.0327C22.4151 10.8209 19.0641 12.5837 16.325 15.3228C15.7255 15.9222 15.1728 16.551 14.6668 17.2045C14.6423 17.2027 14.6178 17.2008 14.5928 17.2008H7.63362C7.09435 17.2008 6.65704 17.638 6.65704 18.1774C6.65704 18.7168 7.09435 19.154 7.63362 19.154H13.338C12.622 20.3527 12.0446 21.6116 11.6052 22.9076H0.976578C0.437312 22.9076 0 23.3448 0 23.8841C0 24.4235 0.437312 24.8607 0.976578 24.8607H11.0533C10.7718 26.0962 10.6103 27.3535 10.5686 28.6144H6.2501C5.71083 28.6144 5.27352 29.0516 5.27352 29.591C5.27352 30.1303 5.71083 30.5675 6.2501 30.5675H10.5998C10.6822 31.8316 10.8854 33.0891 11.2095 34.3212H4.88289C4.34362 34.3212 3.90631 34.7584 3.90631 35.2978C3.90631 35.8372 4.34362 36.2744 4.88289 36.2744H11.8328C12.7908 38.8087 14.288 41.184 16.325 43.221C19.5424 46.4384 23.8038 48.4562 28.324 48.9028C28.9691 48.9665 29.6147 48.998 30.2595 48.998C34.0703 48.998 37.8326 47.8952 41.0251 45.8162C41.477 45.5219 41.6049 44.9169 41.3105 44.4649C41.0162 44.013 40.4112 43.8851 39.9592 44.1795C32.9711 48.73 23.6123 47.7461 17.706 41.8399C10.776 34.9099 10.776 23.634 17.706 16.7039C24.6359 9.77405 35.9118 9.77405 42.8419 16.7039C48.7403 22.6025 49.7296 31.9533 45.1941 38.938C44.9003 39.3903 45.0289 39.9952 45.4812 40.2889C45.9337 40.5826 46.5384 40.454 46.8321 40.0017C49.2554 36.2697 50.3462 31.7623 49.9036 27.3096ZM25.3763 4.3226C25.3763 3.56868 25.9896 2.95539 26.7435 2.95539H33.7748C34.5288 2.95539 35.1421 3.56868 35.1421 4.3226C35.1421 5.07652 34.5288 5.68981 33.7748 5.68981H33.5996H26.9186H26.7435C25.9896 5.68981 25.3763 5.07642 25.3763 4.3226ZM27.8952 9.697V7.64296H32.6231V9.69348C31.0531 9.50676 29.4648 9.50793 27.8952 9.697Z"
 19 |                 fill="#23D997"
 20 |               />
 21 |               <path
 22 |                 d="M43.5329 41.5533C43.2751 41.5533 43.0241 41.6578 42.8426 41.8395C42.6599 42.0211 42.5563 42.2731 42.5563 42.5299C42.5563 42.7867 42.6599 43.0387 42.8426 43.2203C43.0241 43.403 43.2752 43.5065 43.5329 43.5065C43.7897 43.5065 44.0407 43.403 44.2233 43.2203C44.405 43.0387 44.5095 42.7867 44.5095 42.5299C44.5095 42.2731 44.4051 42.0211 44.2233 41.8395C44.0407 41.6578 43.7896 41.5533 43.5329 41.5533Z"
 23 |                 fill="#23D997"
 24 |               />
 25 |               <path
 26 |                 d="M30.274 14.1222C21.9206 14.1222 15.1245 20.9182 15.1245 29.2717C15.1245 37.6253 21.9206 44.4213 30.274 44.4213C38.6275 44.4213 45.4236 37.6253 45.4236 29.2717C45.4236 20.9182 38.6275 14.1222 30.274 14.1222ZM30.274 42.4681C22.9974 42.4681 17.0776 36.5482 17.0776 29.2717C17.0776 21.9953 22.9974 16.0753 30.274 16.0753C37.5506 16.0753 43.4704 21.9953 43.4704 29.2717C43.4704 36.5482 37.5506 42.4681 30.274 42.4681Z"
 27 |                 fill="#23D997"
 28 |               />
 29 |               <path
 30 |                 d="M36.4515 21.7133L31.6145 26.5502C31.21 26.3502 30.755 26.2372 30.274 26.2372C29.793 26.2372 29.3381 26.3502 28.9336 26.5502L26.7688 24.3854C26.3873 24.004 25.7692 24.004 25.3876 24.3854C25.0063 24.7667 25.0063 25.3851 25.3876 25.7665L27.5524 27.9312C27.3523 28.3357 27.2394 28.7907 27.2394 29.2717C27.2394 30.945 28.6006 32.3063 30.274 32.3063C31.9474 32.3063 33.3086 30.945 33.3086 29.2717C33.3086 28.7907 33.1956 28.3357 32.9956 27.9312L37.6906 23.2362L37.8325 23.0943C38.2139 22.713 38.2139 22.0946 37.8325 21.7133C37.4512 21.3319 36.833 21.3319 36.4515 21.7133ZM30.274 30.3532C29.6777 30.3532 29.1926 29.8681 29.1926 29.2718C29.1926 28.6755 29.6777 28.1903 30.274 28.1903C30.8703 28.1903 31.3555 28.6755 31.3555 29.2718C31.3555 29.8681 30.8703 30.3532 30.274 30.3532Z"
 31 |                 fill="#23D997"
 32 |               />
 33 |               <path
 34 |                 d="M40.7155 28.3071H39.8107C39.2714 28.3071 38.8341 28.7443 38.8341 29.2836C38.8341 29.823 39.2714 30.2602 39.8107 30.2602H40.7155C41.2547 30.2602 41.692 29.823 41.692 29.2836C41.692 28.7443 41.2547 28.3071 40.7155 28.3071Z"
 35 |                 fill="#23D997"
 36 |               />
 37 |               <path
 38 |                 d="M20.7372 28.2832H19.8325C19.2933 28.2832 18.856 28.7204 18.856 29.2598C18.856 29.7991 19.2933 30.2363 19.8325 30.2363H20.7372C21.2765 30.2363 21.7138 29.7991 21.7138 29.2598C21.7138 28.7204 21.2765 28.2832 20.7372 28.2832Z"
 39 |                 fill="#23D997"
 40 |               />
 41 |               <path
 42 |                 d="M30.2859 20.7115C30.8252 20.7115 31.2625 20.2743 31.2625 19.7349V18.8303C31.2625 18.2909 30.8252 17.8537 30.2859 17.8537C29.7467 17.8537 29.3093 18.2909 29.3093 18.8303V19.7349C29.3093 20.2743 29.7467 20.7115 30.2859 20.7115Z"
 43 |                 fill="#23D997"
 44 |               />
 45 |               <path
 46 |                 d="M30.2621 37.8319C29.7228 37.8319 29.2855 38.2691 29.2855 38.8085V39.7132C29.2855 40.2525 29.7228 40.6897 30.2621 40.6897C30.8013 40.6897 31.2386 40.2525 31.2386 39.7132V38.8085C31.2386 38.2691 30.8013 37.8319 30.2621 37.8319Z"
 47 |                 fill="#23D997"
 48 |               />
 49 |               <path
 50 |                 d="M0.976562 34.3208C0.719727 34.3208 0.467773 34.4253 0.286133 34.6069C0.104492 34.7886 0 35.0405 0 35.2974C0 35.5552 0.104395 35.8062 0.286133 35.9878C0.467871 36.1694 0.719727 36.2739 0.976562 36.2739C1.2334 36.2739 1.48535 36.1694 1.66689 35.9878C1.84854 35.8062 1.95312 35.5542 1.95312 35.2974C1.95312 35.0405 1.84863 34.7886 1.66689 34.6069C1.48535 34.4253 1.2334 34.3208 0.976562 34.3208Z"
 51 |                 fill="#23D997"
 52 |               />
 53 |             </g>
 54 |             <defs>
 55 |               <clipPath id="clip0">
 56 |                 <rect width="50" height="50" fill="white" />
 57 |               </clipPath>
 58 |             </defs>
 59 |           </svg>
 60 |           <h3>Efficient</h3>
 61 |         </div>
 62 |         <p>Lorem ipsum dolor sit amet.</p>
 63 |       </StyledCard>
 64 |       <StyledCard>
 65 |         <div className="icon">
 66 |           <svg
 67 |             width="50"
 68 |             height="50"
 69 |             viewBox="0 0 50 50"
 70 |             fill="none"
 71 |             xmlns="http://www.w3.org/2000/svg"
 72 |           >
 73 |             <path
 74 |               d="M49.9298 27.8306C49.9297 27.8303 49.9297 27.8302 49.9296 27.83L40.4894 4.12643C40.289 3.62279 39.7182 3.37692 39.2145 3.57728C39.2142 3.5774 39.2138 3.57752 39.2134 3.57777L0.915752 18.8275C0.759569 18.895 0.62412 19.0027 0.523147 19.1397C0.204646 19.3052 0.0034353 19.6327 0 19.9916V45.511C0 46.053 0.439473 46.4925 0.981513 46.4925H42.2051C42.7471 46.4925 43.1866 46.053 43.1866 45.511V31.5735L49.3819 29.1059C49.8854 28.9051 50.1307 28.3341 49.9298 27.8306ZM41.2236 44.5294H1.96303V20.9731H41.2236V44.5294ZM16.3765 19.015L32.811 12.4664C34.2778 14.0081 36.3101 14.8843 38.438 14.8927L40.0771 19.015H16.3765ZM43.1866 29.4652V19.9916C43.1866 19.4496 42.7471 19.0101 42.2051 19.0101H42.1894L40.1095 13.7865C40.0865 13.7429 40.0596 13.7015 40.0291 13.6628C39.9238 13.1901 39.486 12.8675 39.0034 12.907C37.0234 13.0875 35.0865 12.2535 33.8573 10.6908C33.5514 10.3133 33.0138 10.2194 32.598 10.4709C32.5514 10.4765 32.5051 10.485 32.4596 10.4965L12.3955 18.486C12.1527 18.5812 11.9585 18.77 11.8567 19.0101H5.76345L39.0289 5.76458L47.7438 27.6474L43.1866 29.4652Z"
 75 |               fill="#23D997"
 76 |             />
 77 |             <path
 78 |               d="M4.62686 37.9033C6.53246 38.4665 8.02363 39.9558 8.58923 41.8607C8.71326 42.2765 9.09569 42.5614 9.52951 42.5615C9.58043 42.5583 9.63098 42.5507 9.68067 42.5389C9.72471 42.5515 9.76974 42.5607 9.81514 42.5664H33.3715C33.4119 42.5611 33.4519 42.5529 33.4912 42.5419C33.9816 42.6611 34.4758 42.3604 34.5952 41.87C34.5955 41.8682 34.596 41.8665 34.5964 41.8646C35.1605 39.9578 36.6519 38.4664 38.5587 37.9023C39.0212 37.7609 39.3085 37.3001 39.2321 36.8226C39.2452 36.775 39.2546 36.7264 39.2605 36.6773V28.8252C39.2548 28.776 39.2449 28.7275 39.2311 28.68C39.308 28.2023 39.0205 27.7413 38.5578 27.6003C36.6509 27.0363 35.1599 25.5443 34.5974 23.637C34.4553 23.1714 33.9899 22.8833 33.5098 22.9636C33.4644 22.951 33.4182 22.9418 33.3715 22.9362H9.81514C9.76569 22.942 9.71674 22.9519 9.66889 22.9656C9.19151 22.8895 8.73093 23.1768 8.58923 23.6389C8.02473 25.5454 6.53345 27.0363 4.62686 27.6003C4.16444 27.7416 3.8771 28.2025 3.95354 28.68C3.94078 28.7277 3.93158 28.7762 3.92606 28.8252V36.6773C3.9317 36.7235 3.9409 36.7691 3.95354 36.8138C3.87305 37.2943 4.16101 37.7603 4.62686 37.9033ZM5.88908 29.2237C7.85996 28.4321 9.42204 26.8701 10.2136 24.8992H32.972C33.7639 26.8701 35.3264 28.4321 37.2975 29.2237V36.2788C35.3272 37.0713 33.7654 38.6331 32.973 40.6034H10.2136C9.42118 38.6331 7.85935 37.0713 5.88908 36.2788V29.2237Z"
 79 |               fill="#23D997"
 80 |             />
 81 |             <path
 82 |               d="M21.5933 38.6404C24.8458 38.6404 27.4824 36.0038 27.4824 32.7513C27.4824 29.4988 24.8458 26.8622 21.5933 26.8622C18.3408 26.8622 15.7042 29.4988 15.7042 32.7513C15.7074 36.0025 18.3422 38.6372 21.5933 38.6404ZM21.5933 28.8253C23.7616 28.8253 25.5194 30.583 25.5194 32.7513C25.5194 34.9196 23.7616 36.6774 21.5933 36.6774C19.425 36.6774 17.6672 34.9196 17.6672 32.7513C17.6672 30.583 19.425 28.8253 21.5933 28.8253Z"
 83 |               fill="#23D997"
 84 |             />
 85 |             <path
 86 |               d="M10.7966 34.2235C11.6097 34.2235 12.2689 33.5643 12.2689 32.7513C12.2689 31.9382 11.6097 31.279 10.7966 31.279C9.98358 31.279 9.32437 31.9382 9.32437 32.7513C9.32437 33.5644 9.98358 34.2235 10.7966 34.2235ZM10.7966 32.2605C11.0677 32.2605 11.2874 32.4802 11.2874 32.7513C11.2874 33.0223 11.0677 33.242 10.7966 33.242C10.5256 33.242 10.3059 33.0223 10.3059 32.7513C10.3059 32.4802 10.5256 32.2605 10.7966 32.2605Z"
 87 |               fill="#23D997"
 88 |             />
 89 |             <path
 90 |               d="M32.3899 34.2235C33.203 34.2235 33.8622 33.5643 33.8622 32.7513C33.8622 31.9382 33.203 31.279 32.3899 31.279C31.5769 31.279 30.9177 31.9382 30.9177 32.7513C30.9177 33.5644 31.5769 34.2235 32.3899 34.2235ZM32.3899 32.2605C32.661 32.2605 32.8807 32.4802 32.8807 32.7513C32.8807 33.0223 32.661 33.242 32.3899 33.242C32.1189 33.242 31.8992 33.0223 31.8992 32.7513C31.8992 32.4802 32.1189 32.2605 32.3899 32.2605Z"
 91 |               fill="#23D997"
 92 |             />
 93 |           </svg>
 94 |           <h3>Affordable</h3>
 95 |         </div>
 96 |         <p>Lorem ipsum dolor sit amet.</p>
 97 |       </StyledCard>
 98 |       <StyledCard>
 99 |         <div className="icon">
100 |           <svg
101 |             width="50"
102 |             height="50"
103 |             viewBox="0 0 50 50"
104 |             fill="none"
105 |             xmlns="http://www.w3.org/2000/svg"
106 |           >
107 |             <path
108 |               d="M40.527 5.43286L27.4952 14.901L49.3307 30.7656C49.7676 28.9176 50 26.9915 50 25.0121C50 17.0893 46.2947 10.0165 40.527 5.43286Z"
109 |               fill="#23D997"
110 |             />
111 |             <path
112 |               d="M37.9867 3.65718C34.1994 1.34536 29.7525 0.0119629 25 0.0119629C19.8924 0.0119629 15.1385 1.55278 11.1763 4.19233L16.1563 19.5181L37.9867 3.65718Z"
113 |               fill="#23D997"
114 |             />
115 |             <path
116 |               d="M8.70518 6.06763C3.37842 10.6558 0 17.4465 0 25.012C0 27.3367 0.320117 29.5877 0.916504 31.7248H17.0424L8.70518 6.06763Z"
117 |               fill="#23D997"
118 |             />
119 |             <path
120 |               d="M1.93525 34.6545C5.58769 43.3584 14.0285 49.5738 23.9435 49.9881L28.9257 34.6545H1.93525Z"
121 |               fill="#23D997"
122 |             />
123 |             <path
124 |               d="M27.0434 49.928C36.8724 49.129 45.1109 42.6205 48.4298 33.7322L35.3851 24.2546L27.0434 49.928Z"
125 |               fill="#23D997"
126 |             />
127 |           </svg>
128 | 
129 |           <h3>Pro Grade Gear</h3>
130 |         </div>
131 |         <p>Lorem ipsum dolor sit amet.</p>
132 |       </StyledCard>
133 |       <StyledCard>
134 |         <div className="icon">
135 |           <svg
136 |             width="55"
137 |             height="50"
138 |             viewBox="0 0 55 50"
139 |             fill="none"
140 |             xmlns="http://www.w3.org/2000/svg"
141 |           >
142 |             <g clipPath="url(#clip0)">
143 |               <path
144 |                 d="M44.315 24.431C49.9172 19.8242 50.376 11.9355 45.3396 6.81113C40.7205 2.1112 32.989 1.31276 27.3406 4.95246C21.1832 0.97752 12.669 2.32109 8.32342 7.95328C4.33603 13.1213 5.20537 20.2008 10.3468 24.4309C3.95844 27.5113 -0.0287222 33.5842 0.000217514 40.1897V45.5469C0.000217514 46.5331 0.874244 47.3326 1.95245 47.3326H52.7094C53.7876 47.3326 54.6617 46.5331 54.6617 45.5469V40.1897C54.6905 33.5842 50.7033 27.5113 44.315 24.431ZM35.1396 6.26139C40.5228 6.25595 44.8917 10.2433 44.8978 15.1675C44.902 18.6793 42.6523 21.8663 39.1513 23.3077C39.001 23.3702 38.8507 23.4273 38.6985 23.4863C38.2167 23.6641 37.7198 23.8055 37.2128 23.9095C37.1153 23.9292 37.0176 23.9399 36.9181 23.9578C36.3516 24.0571 35.7768 24.1102 35.2001 24.1167C34.9404 24.1167 34.6788 24.0988 34.4192 24.0775C34.3216 24.0775 34.2239 24.0775 34.1264 24.0596C33.0168 23.9401 31.9375 23.6491 30.9345 23.1989C30.8975 23.1828 30.8544 23.1845 30.8174 23.1703C30.6221 23.0846 30.427 23.0096 30.2532 22.9131C30.2689 22.8952 30.2786 22.8757 30.2942 22.8578C31.1894 21.8056 31.8951 20.6296 32.3849 19.3739L32.4454 19.2238C32.6682 18.6241 32.8411 18.0099 32.9628 17.3863C32.9804 17.2953 32.994 17.2077 33.0097 17.1096C33.1226 16.4748 33.182 15.8331 33.1874 15.1899C33.1817 14.548 33.1224 13.9074 33.0097 13.2738C32.994 13.181 32.9804 13.0952 32.9628 12.997C32.8411 12.3735 32.6682 11.7592 32.4454 11.1595L32.3849 11.0095C31.8951 9.75378 31.1893 8.57772 30.2942 7.52555C30.2785 7.50766 30.2688 7.48809 30.2532 7.4702C31.7364 6.67877 33.4225 6.2615 35.1396 6.26139ZM9.76115 15.19C9.74731 10.2717 14.0948 6.27437 19.4716 6.26171C21.992 6.25575 24.4168 7.14417 26.2358 8.74C26.349 8.84003 26.4603 8.93995 26.5695 9.04354C26.9048 9.36486 27.214 9.70805 27.4949 10.0703C27.5808 10.181 27.6589 10.2989 27.7389 10.4132C28.0117 10.7973 28.2512 11.2003 28.4553 11.6185C28.5041 11.7203 28.5412 11.8239 28.5841 11.9256C28.7899 12.3882 28.9519 12.8661 29.0683 13.3541C29.082 13.4077 29.0859 13.4613 29.0976 13.5166C29.3449 14.6254 29.3449 15.7685 29.0976 16.8773C29.0859 16.9326 29.0819 16.9862 29.0683 17.0398C28.952 17.5278 28.79 18.0057 28.5841 18.4683C28.5412 18.5701 28.504 18.6737 28.4553 18.7754C28.251 19.193 28.0115 19.5954 27.7389 19.979C27.6588 20.0932 27.5808 20.2111 27.4949 20.3218C27.2141 20.6842 26.9048 21.0273 26.5695 21.3486C26.4602 21.4522 26.3489 21.5522 26.2358 21.6521C25.4453 22.3411 24.534 22.9037 23.5398 23.3164C23.3817 23.3824 23.2216 23.4432 23.0596 23.495C22.589 23.6659 22.1048 23.8031 21.6111 23.9057C21.4881 23.9307 21.3612 23.9449 21.2363 23.9646C20.7062 24.0549 20.1687 24.1044 19.6296 24.1128H19.4149C18.8758 24.1045 18.3383 24.0549 17.8082 23.9646C17.6833 23.9449 17.5563 23.9307 17.4334 23.9057C16.9397 23.8031 16.4554 23.6659 15.9849 23.495C15.8228 23.4361 15.6628 23.3754 15.5047 23.3164C12.012 21.8739 9.76561 18.6952 9.76115 15.19ZM35.1396 43.7612H3.90457V40.1898C3.87597 34.1387 8.04398 28.7361 14.2863 26.7328C17.6373 28.009 21.4067 28.009 24.7579 26.7328C25.4097 26.9506 26.0448 27.2077 26.6593 27.5025C27.0654 27.6935 27.4402 27.9114 27.8306 28.131C28.0845 28.2756 28.3421 28.4167 28.5862 28.5757C28.963 28.8203 29.3182 29.0864 29.6677 29.3596C29.8922 29.5382 30.1147 29.7167 30.3255 29.8953C30.6476 30.1738 30.9502 30.4685 31.2411 30.7703C31.4499 30.9882 31.653 31.2096 31.8463 31.4382C32.1021 31.7381 32.346 32.0453 32.5725 32.3613C32.7678 32.6292 32.9415 32.9077 33.1132 33.1863C33.3085 33.4934 33.4881 33.8006 33.652 34.1203C33.816 34.4399 33.9605 34.7899 34.101 35.131C34.2239 35.4274 34.3548 35.7221 34.4562 36.0238C34.5929 36.4381 34.6886 36.8666 34.7842 37.2952C34.8428 37.5487 34.9189 37.797 34.9618 38.0541C35.0775 38.7611 35.1368 39.4749 35.1395 40.1898V43.7612H35.1396ZM50.7572 43.7612H39.044V40.1898C39.044 39.6309 39.0089 39.0773 38.9543 38.5291C38.9386 38.3684 38.9114 38.2095 38.8918 38.0488C38.8391 37.6541 38.7786 37.2631 38.6965 36.8755C38.6614 36.7101 38.6244 36.544 38.5852 36.3773C38.4916 35.9797 38.3829 35.5856 38.2592 35.1952C38.2183 35.0666 38.1811 34.9362 38.1382 34.8095C37.5916 33.211 36.7994 31.6918 35.7859 30.2971L35.7097 30.1953C35.374 29.7393 35.0154 29.2983 34.634 28.8721L34.6204 28.856C34.23 28.4132 33.8063 27.9827 33.3612 27.5756C33.3866 27.5756 33.414 27.5756 33.4413 27.5756C33.9922 27.6418 34.5469 27.6776 35.1026 27.6827H35.21C35.7243 27.6787 36.2378 27.6482 36.7484 27.5917C36.9085 27.5738 37.0667 27.547 37.2267 27.5238C37.6419 27.4655 38.0519 27.3899 38.4566 27.2971C38.5717 27.2703 38.6889 27.2453 38.806 27.2149C39.3371 27.0828 39.8587 26.9205 40.3677 26.7292C46.6146 28.7305 50.7864 34.1356 50.7573 40.1899V43.7612H50.7572Z"
145 |                 fill="#23D997"
146 |               />
147 |             </g>
148 |             <defs>
149 |               <clipPath id="clip0">
150 |                 <rect width="54.6617" height="50" fill="white" />
151 |               </clipPath>
152 |             </defs>
153 |           </svg>
154 |           <h3>Teamwork</h3>
155 |         </div>
156 |         <p>Lorem ipsum dolor sit amet.</p>
157 |       </StyledCard>
158 |     </StyledCards>
159 |   );
160 | };
161 | 
162 | const StyledCards = styled.div`
163 |   display: flex;
164 |   flex-wrap: wrap;
165 | `;
166 | const StyledCard = styled.div`
167 |   flex-basis: 20rem;
168 | 
169 |   .icon {
170 |     display: flex;
171 |     align-items: center;
172 |     h3 {
173 |       margin-left: 1rem;
174 |       background: white;
175 |       color: black;
176 |       padding: 1rem;
177 |     }
178 |   }
179 | `;
180 | 
181 | export default Cards;
182 | 


--------------------------------------------------------------------------------
/src/components/FaqSection.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { motion, useAnimation } from "framer-motion";
  3 | import { useInView } from "react-intersection-observer";
  4 | import styled from "styled-components";
  5 | import { reveal } from "../util";
  6 | import Question from "./Question";
  7 | 
  8 | const FaqSection = () => {
  9 |   //State
 10 |   const [toggleFaq, setToggleFaq] = useState([
 11 |     {
 12 |       title: "How Do I Start?",
 13 |       description: `Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum voluptatem dolorum obcaecati aperiam impedit, architecto reprehenderit aliquid tempore excepturi consequatur esse quis magni odit? Nesciunt animi veritatis distinctio rerum quo.
 14 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum expedita facere quasi aliquam harum saepe fuga suscipit enim quisquam alias?`,
 15 |       active: false,
 16 |     },
 17 |     {
 18 |       title: "What Products do you offer?",
 19 |       description: `Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum voluptatem dolorum obcaecati aperiam impedit, architecto reprehenderit aliquid tempore excepturi consequatur esse quis magni odit? Nesciunt animi veritatis distinctio rerum quo.
 20 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum expedita facere quasi aliquam harum saepe fuga suscipit enim quisquam alias?`,
 21 |       active: false,
 22 |     },
 23 |     {
 24 |       title: "Diferrent Payment Methods",
 25 |       description: `Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum voluptatem dolorum obcaecati aperiam impedit, architecto reprehenderit aliquid tempore excepturi consequatur esse quis magni odit? Nesciunt animi veritatis distinctio rerum quo.
 26 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum expedita facere quasi aliquam harum saepe fuga suscipit enim quisquam alias?`,
 27 |       active: false,
 28 |     },
 29 |     {
 30 |       title: "Daily Schedule",
 31 |       description: `Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum voluptatem dolorum obcaecati aperiam impedit, architecto reprehenderit aliquid tempore excepturi consequatur esse quis magni odit? Nesciunt animi veritatis distinctio rerum quo.
 32 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum expedita facere quasi aliquam harum saepe fuga suscipit enim quisquam alias?`,
 33 |       active: false,
 34 |     },
 35 |   ]);
 36 |   //Scroll Animation
 37 |   const faqControls = useAnimation();
 38 |   const [faq, faqView] = useInView({ threshold: 0.75 });
 39 |   useEffect(() => {
 40 |     if (faqView) {
 41 |       faqControls.start("show");
 42 |     }
 43 |   }, [faqControls, faqView]);
 44 |   return (
 45 |     <Faq
 46 |       transition={{ duration: 0.75 }}
 47 |       ref={faq}
 48 |       animate={faqControls}
 49 |       initial="hidden"
 50 |       variants={reveal}
 51 |     >
 52 |       <h2>
 53 |         Any Questions?<span>FAQ</span>
 54 |       </h2>
 55 |       {toggleFaq.map((faq) => (
 56 |         <Question
 57 |           toggleFaq={toggleFaq}
 58 |           key={faq.title}
 59 |           faq={faq}
 60 |           setToggleFaq={setToggleFaq}
 61 |         />
 62 |       ))}
 63 |     </Faq>
 64 |   );
 65 | };
 66 | 
 67 | const Faq = styled(motion.section)`
 68 |   min-height: 100vh;
 69 |   padding: 5rem 10rem;
 70 |   background: #1b1b1b;
 71 |   color: white;
 72 | 
 73 |   span {
 74 |     display: block;
 75 |     color: #23d997;
 76 |     font-weight: bold;
 77 |   }
 78 |   h2 {
 79 |     font-weight: lighter;
 80 |     padding-bottom: 2rem;
 81 |   }
 82 |   .question {
 83 |     padding: 3rem 0rem;
 84 |     cursor: pointer;
 85 |   }
 86 |   .faq-line {
 87 |     background: #cccccc;
 88 |     height: 0.2rem;
 89 |     margin: 1rem 0rem;
 90 |     width: 100%;
 91 |   }
 92 |   .answer {
 93 |     padding: 2rem 0rem;
 94 |     p {
 95 |       padding: 1rem 0rem;
 96 |     }
 97 |   }
 98 | `;
 99 | 
100 | export default FaqSection;
101 | 


--------------------------------------------------------------------------------
/src/components/GlobalStyle.js:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from "styled-components";
 2 | 
 3 | const GlobalStyle = createGlobalStyle`
 4 |     *{
 5 |         margin: 0;
 6 |         padding: 0;
 7 |         box-sizing: border-box;
 8 |     }
 9 |     body{
10 |         font-family: 'Inter', sans-serif;
11 |         background: #1B1B1B;
12 |     }
13 |     button{
14 |         font-family: 'Inter', sans-serif;
15 |         font-weight: bold;
16 |         font-size: 1.1rem;
17 |         cursor: pointer;
18 |     }
19 |     a{
20 |         font-size: 1.1rem;
21 |         
22 |     }
23 |     h2{
24 |         font-size: 5.5rem;
25 |     }
26 |     p{
27 |         font-size: 1.6rem;
28 |         line-height: 150%;
29 |     }
30 |     h4{
31 |         font-size: 2.5rem;
32 |     }
33 | `;
34 | 
35 | export default GlobalStyle;
36 | 


--------------------------------------------------------------------------------
/src/components/Movie.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import { motion } from "framer-motion";
 4 | import { fade, lineAnim, workPhoto } from "../util";
 5 | 
 6 | const Movie = ({ imgSrc, title }) => {
 7 |   return (
 8 |     <StyledMovie>
 9 |       <motion.h2 variants={fade}>{title}</motion.h2>
10 |       <motion.div variants={lineAnim} className="line"></motion.div>
11 |       <div className="img-container">
12 |         <motion.img
13 |           animate="show"
14 |           initial="hidden"
15 |           variants={workPhoto}
16 |           whileHover={{
17 |             scale: 1.2,
18 |           }}
19 |           src={imgSrc}
20 |           alt=""
21 |         />
22 |       </div>
23 |     </StyledMovie>
24 |   );
25 | };
26 | 
27 | const StyledMovie = styled.div`
28 |   padding-bottom: 10rem;
29 |   .line {
30 |     height: 1rem;
31 |     background: #cccccc;
32 |     margin-bottom: 3rem;
33 |   }
34 |   .img-container {
35 |     overflow: hidden;
36 |     cursor: pointer;
37 |   }
38 |   img {
39 |     width: 100%;
40 |     height: 70vh;
41 |     object-fit: cover;
42 |     transition: all 0.75s ease-in-out;
43 |   }
44 | `;
45 | 
46 | export default Movie;
47 | 


--------------------------------------------------------------------------------
/src/components/Nav.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import { Link, useHistory } from "react-router-dom";
 4 | import { motion } from "framer-motion";
 5 | 
 6 | const Nav = () => {
 7 |   const history = useHistory();
 8 |   const activePath = history.location.pathname;
 9 |   return (
10 |     <StyledNav>
11 |       <h1>
12 |         <Link id="logo" to="/">
13 |           Capture
14 |         </Link>
15 |       </h1>
16 |       <ul>
17 |         <li>
18 |           <Link to="/">1. About Us</Link>
19 |           <Line
20 |             transition={{ duration: 0.75 }}
21 |             initial={{ width: "0%" }}
22 |             animate={{ width: activePath === "/" ? "50%" : "0%" }}
23 |           />
24 |         </li>
25 |         <li>
26 |           <Link to="/work">2. Our Work</Link>
27 |           <Line
28 |             transition={{ duration: 0.75 }}
29 |             initial={{ width: "0%" }}
30 |             animate={{ width: activePath === "/work" ? "50%" : "0%" }}
31 |           />
32 |         </li>
33 |         <li>
34 |           <Link to="/contact">3. Contact Us</Link>
35 |           <div className="line3"></div>
36 |         </li>
37 |       </ul>
38 |     </StyledNav>
39 |   );
40 | };
41 | 
42 | const StyledNav = styled.nav`
43 |   min-height: 10vh;
44 |   display: flex;
45 |   margin: auto;
46 |   justify-content: space-between;
47 |   align-items: center;
48 |   background: #282828;
49 |   padding: 1rem 10rem;
50 |   ul {
51 |     display: flex;
52 |     list-style: none;
53 |   }
54 |   li {
55 |     padding-left: 10rem;
56 |     position: relative;
57 |   }
58 |   a {
59 |     color: white;
60 |     text-decoration: none;
61 |   }
62 |   #logo {
63 |     font-size: 1.5rem;
64 |     font-family: "Lobster", cursive;
65 |     font-weight: lighter;
66 |   }
67 | `;
68 | 
69 | const Line = styled(motion.div)`
70 |   height: 0.3rem;
71 |   background: #23d997;
72 |   width: 5%;
73 |   position: absolute;
74 |   bottom: -80%;
75 |   left: 60%;
76 | `;
77 | 
78 | export default Nav;
79 | 


--------------------------------------------------------------------------------
/src/components/Question.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { motion } from "framer-motion";
 3 | 
 4 | const Question = ({ faq, setToggleFaq, toggleFaq }) => {
 5 |   const toggleActive = () => {
 6 |     console.log(toggleFaq);
 7 |     const newFaqs = toggleFaq.map((state) => {
 8 |       if (state.title === faq.title) {
 9 |         return { ...state, active: !state.active };
10 |       } else {
11 |         return { ...state };
12 |       }
13 |     });
14 |     setToggleFaq(newFaqs);
15 |   };
16 |   return (
17 |     <motion.div layout onClick={toggleActive} className="question">
18 |       <h4>{faq.title}</h4>
19 |       <div className="answer">
20 |         {faq.active && (
21 |           <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
22 |             <p>{faq.description}</p>
23 |             <p>
24 |               Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum
25 |               expedita facere quasi aliquam harum saepe fuga suscipit enim
26 |               quisquam alias?
27 |             </p>
28 |           </motion.div>
29 |         )}
30 |       </div>
31 |       <div className="faq-line"></div>
32 |     </motion.div>
33 |   );
34 | };
35 | 
36 | export default Question;
37 | 


--------------------------------------------------------------------------------
/src/components/ServicesSection.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from "react";
 2 | import { useInView } from "react-intersection-observer";
 3 | import { useAnimation } from "framer-motion";
 4 | import Cards from "../components/Cards";
 5 | import styled from "styled-components";
 6 | import homeImg2 from "../img/home2.png";
 7 | import { reveal } from "../util";
 8 | import { motion } from "framer-motion";
 9 | 
10 | const ServicesSection = () => {
11 |   const serviceControls = useAnimation();
12 |   const [description, descView] = useInView({ threshold: 0.75 });
13 |   //Use Effect
14 |   useEffect(() => {
15 |     if (descView) {
16 |       serviceControls.start("show");
17 |     }
18 |   }, [serviceControls, descView]);
19 |   return (
20 |     <Services
21 |       ref={description}
22 |       animate={serviceControls}
23 |       initial="hidden"
24 |       variants={reveal}
25 |     >
26 |       <Description>
27 |         <h2>
28 |           High <span>quality</span> services.
29 |         </h2>
30 |         <Cards />
31 |       </Description>
32 |       <Image>
33 |         <img src={homeImg2} alt="camera" />
34 |       </Image>
35 |     </Services>
36 |   );
37 | };
38 | 
39 | const Services = styled(motion.section)`
40 |   background: #1b1b1b;
41 |   min-height: 90vh;
42 |   color: white;
43 |   display: flex;
44 |   align-items: center;
45 |   justify-content: space-between;
46 |   padding: 5rem 10rem;
47 |   h2 {
48 |     margin-bottom: 4rem;
49 |   }
50 |   p {
51 |     width: 70%;
52 |     padding: 2rem 0rem 4rem 0rem;
53 |   }
54 | `;
55 | const Description = styled.div`
56 |   color: white;
57 |   z-index: 2;
58 |   flex: 1;
59 |   padding-right: 5rem;
60 |   h2 {
61 |     font-weight: lighter;
62 |   }
63 |   p {
64 |     padding: 3rem 0rem;
65 |     color: #cccccc;
66 |   }
67 |   span {
68 |     font-weight: bold;
69 |     color: #23d997;
70 |   }
71 |   button {
72 |     padding: 1rem 2rem;
73 |     border: 3px solid #23d997;
74 |     background: transparent;
75 |     color: white;
76 |     transition: all 0.5s ease;
77 |     &:hover {
78 |       background: #23d997;
79 |       color: white;
80 |     }
81 |   }
82 | `;
83 | const Image = styled.div`
84 |   z-index: 2;
85 |   flex: 1;
86 |   overflow: hidden;
87 |   img {
88 |     width: 100%;
89 |     height: 80vh;
90 |     object-fit: cover;
91 |   }
92 | `;
93 | 
94 | export default ServicesSection;
95 | 


--------------------------------------------------------------------------------
/src/components/Wave.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import { motion } from "framer-motion";
 4 | 
 5 | const Wave = () => (
 6 |   <WaveSvg
 7 |     viewBox="0 0 1440 363"
 8 |     fill="none"
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |   >
11 |     <motion.path
12 |       initial={{ pathLength: 0, pathOffset: 1 }}
13 |       animate={{ pathLength: 1, pathOffset: 0 }}
14 |       transition={{ duration: 1 }}
15 |       d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5"
16 |       stroke="#D96ED4"
17 |       strokeOpacity="0.5"
18 |       strokeWidth="10"
19 |     />
20 |   </WaveSvg>
21 | );
22 | 
23 | const WaveSvg = styled.svg`
24 |   position: absolute;
25 |   left: 0;
26 |   z-index: 1;
27 | `;
28 | 
29 | export default Wave;
30 | 


--------------------------------------------------------------------------------
/src/img/athlete-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/athlete-small.png


--------------------------------------------------------------------------------
/src/img/athlete1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/athlete1.png


--------------------------------------------------------------------------------
/src/img/athlete2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/athlete2.png


--------------------------------------------------------------------------------
/src/img/clock.svg:
--------------------------------------------------------------------------------
 1 | <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0)">
 3 | <path d="M49.9036 27.3096C49.4547 22.7941 47.4374 18.5371 44.2231 15.3227C41.4761 12.5759 38.114 10.8107 34.5762 10.0258V7.54452C36.0212 7.18505 37.0952 5.87711 37.0952 4.3225C37.0952 2.49161 35.6057 1.00214 33.7748 1.00214H26.7435C24.9126 1.00214 23.4231 2.49161 23.4231 4.3225C23.4231 5.87702 24.4972 7.18495 25.942 7.54452V10.0327C22.4151 10.8209 19.0641 12.5837 16.325 15.3228C15.7255 15.9222 15.1728 16.551 14.6668 17.2045C14.6423 17.2027 14.6178 17.2008 14.5928 17.2008H7.63362C7.09435 17.2008 6.65704 17.638 6.65704 18.1774C6.65704 18.7168 7.09435 19.154 7.63362 19.154H13.338C12.622 20.3527 12.0446 21.6116 11.6052 22.9076H0.976578C0.437312 22.9076 0 23.3448 0 23.8841C0 24.4235 0.437312 24.8607 0.976578 24.8607H11.0533C10.7718 26.0962 10.6103 27.3535 10.5686 28.6144H6.2501C5.71083 28.6144 5.27352 29.0516 5.27352 29.591C5.27352 30.1303 5.71083 30.5675 6.2501 30.5675H10.5998C10.6822 31.8316 10.8854 33.0891 11.2095 34.3212H4.88289C4.34362 34.3212 3.90631 34.7584 3.90631 35.2978C3.90631 35.8372 4.34362 36.2744 4.88289 36.2744H11.8328C12.7908 38.8087 14.288 41.184 16.325 43.221C19.5424 46.4384 23.8038 48.4562 28.324 48.9028C28.9691 48.9665 29.6147 48.998 30.2595 48.998C34.0703 48.998 37.8326 47.8952 41.0251 45.8162C41.477 45.5219 41.6049 44.9169 41.3105 44.4649C41.0162 44.013 40.4112 43.8851 39.9592 44.1795C32.9711 48.73 23.6123 47.7461 17.706 41.8399C10.776 34.9099 10.776 23.634 17.706 16.7039C24.6359 9.77405 35.9118 9.77405 42.8419 16.7039C48.7403 22.6025 49.7296 31.9533 45.1941 38.938C44.9003 39.3903 45.0289 39.9952 45.4812 40.2889C45.9337 40.5826 46.5384 40.454 46.8321 40.0017C49.2554 36.2697 50.3462 31.7623 49.9036 27.3096ZM25.3763 4.3226C25.3763 3.56868 25.9896 2.95539 26.7435 2.95539H33.7748C34.5288 2.95539 35.1421 3.56868 35.1421 4.3226C35.1421 5.07652 34.5288 5.68981 33.7748 5.68981H33.5996H26.9186H26.7435C25.9896 5.68981 25.3763 5.07642 25.3763 4.3226ZM27.8952 9.697V7.64296H32.6231V9.69348C31.0531 9.50676 29.4648 9.50793 27.8952 9.697Z" fill="#23D997"/>
 4 | <path d="M43.5329 41.5533C43.2751 41.5533 43.0241 41.6578 42.8426 41.8395C42.6599 42.0211 42.5563 42.2731 42.5563 42.5299C42.5563 42.7867 42.6599 43.0387 42.8426 43.2203C43.0241 43.403 43.2752 43.5065 43.5329 43.5065C43.7897 43.5065 44.0407 43.403 44.2233 43.2203C44.405 43.0387 44.5095 42.7867 44.5095 42.5299C44.5095 42.2731 44.4051 42.0211 44.2233 41.8395C44.0407 41.6578 43.7896 41.5533 43.5329 41.5533Z" fill="#23D997"/>
 5 | <path d="M30.274 14.1222C21.9206 14.1222 15.1245 20.9182 15.1245 29.2717C15.1245 37.6253 21.9206 44.4213 30.274 44.4213C38.6275 44.4213 45.4236 37.6253 45.4236 29.2717C45.4236 20.9182 38.6275 14.1222 30.274 14.1222ZM30.274 42.4681C22.9974 42.4681 17.0776 36.5482 17.0776 29.2717C17.0776 21.9953 22.9974 16.0753 30.274 16.0753C37.5506 16.0753 43.4704 21.9953 43.4704 29.2717C43.4704 36.5482 37.5506 42.4681 30.274 42.4681Z" fill="#23D997"/>
 6 | <path d="M36.4515 21.7133L31.6145 26.5502C31.21 26.3502 30.755 26.2372 30.274 26.2372C29.793 26.2372 29.3381 26.3502 28.9336 26.5502L26.7688 24.3854C26.3873 24.004 25.7692 24.004 25.3876 24.3854C25.0063 24.7667 25.0063 25.3851 25.3876 25.7665L27.5524 27.9312C27.3523 28.3357 27.2394 28.7907 27.2394 29.2717C27.2394 30.945 28.6006 32.3063 30.274 32.3063C31.9474 32.3063 33.3086 30.945 33.3086 29.2717C33.3086 28.7907 33.1956 28.3357 32.9956 27.9312L37.6906 23.2362L37.8325 23.0943C38.2139 22.713 38.2139 22.0946 37.8325 21.7133C37.4512 21.3319 36.833 21.3319 36.4515 21.7133ZM30.274 30.3532C29.6777 30.3532 29.1926 29.8681 29.1926 29.2718C29.1926 28.6755 29.6777 28.1903 30.274 28.1903C30.8703 28.1903 31.3555 28.6755 31.3555 29.2718C31.3555 29.8681 30.8703 30.3532 30.274 30.3532Z" fill="#23D997"/>
 7 | <path d="M40.7155 28.3071H39.8107C39.2714 28.3071 38.8341 28.7443 38.8341 29.2836C38.8341 29.823 39.2714 30.2602 39.8107 30.2602H40.7155C41.2547 30.2602 41.692 29.823 41.692 29.2836C41.692 28.7443 41.2547 28.3071 40.7155 28.3071Z" fill="#23D997"/>
 8 | <path d="M20.7372 28.2832H19.8325C19.2933 28.2832 18.856 28.7204 18.856 29.2598C18.856 29.7991 19.2933 30.2363 19.8325 30.2363H20.7372C21.2765 30.2363 21.7138 29.7991 21.7138 29.2598C21.7138 28.7204 21.2765 28.2832 20.7372 28.2832Z" fill="#23D997"/>
 9 | <path d="M30.2859 20.7115C30.8252 20.7115 31.2625 20.2743 31.2625 19.7349V18.8303C31.2625 18.2909 30.8252 17.8537 30.2859 17.8537C29.7467 17.8537 29.3093 18.2909 29.3093 18.8303V19.7349C29.3093 20.2743 29.7467 20.7115 30.2859 20.7115Z" fill="#23D997"/>
10 | <path d="M30.2621 37.8319C29.7228 37.8319 29.2855 38.2691 29.2855 38.8085V39.7132C29.2855 40.2525 29.7228 40.6897 30.2621 40.6897C30.8013 40.6897 31.2386 40.2525 31.2386 39.7132V38.8085C31.2386 38.2691 30.8013 37.8319 30.2621 37.8319Z" fill="#23D997"/>
11 | <path d="M0.976562 34.3208C0.719727 34.3208 0.467773 34.4253 0.286133 34.6069C0.104492 34.7886 0 35.0405 0 35.2974C0 35.5552 0.104395 35.8062 0.286133 35.9878C0.467871 36.1694 0.719727 36.2739 0.976562 36.2739C1.2334 36.2739 1.48535 36.1694 1.66689 35.9878C1.84854 35.8062 1.95312 35.5542 1.95312 35.2974C1.95312 35.0405 1.84863 34.7886 1.66689 34.6069C1.48535 34.4253 1.2334 34.3208 0.976562 34.3208Z" fill="#23D997"/>
12 | </g>
13 | <defs>
14 | <clipPath id="clip0">
15 | <rect width="50" height="50" fill="white"/>
16 | </clipPath>
17 | </defs>
18 | </svg>
19 | 


--------------------------------------------------------------------------------
/src/img/diaphragm.svg:
--------------------------------------------------------------------------------
1 | <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M40.527 5.43286L27.4952 14.901L49.3307 30.7656C49.7676 28.9176 50 26.9915 50 25.0121C50 17.0893 46.2947 10.0165 40.527 5.43286Z" fill="#23D997"/>
3 | <path d="M37.9867 3.65718C34.1994 1.34536 29.7525 0.0119629 25 0.0119629C19.8924 0.0119629 15.1385 1.55278 11.1763 4.19233L16.1563 19.5181L37.9867 3.65718Z" fill="#23D997"/>
4 | <path d="M8.70518 6.06763C3.37842 10.6558 0 17.4465 0 25.012C0 27.3367 0.320117 29.5877 0.916504 31.7248H17.0424L8.70518 6.06763Z" fill="#23D997"/>
5 | <path d="M1.93525 34.6545C5.58769 43.3584 14.0285 49.5738 23.9435 49.9881L28.9257 34.6545H1.93525Z" fill="#23D997"/>
6 | <path d="M27.0434 49.928C36.8724 49.129 45.1109 42.6205 48.4298 33.7322L35.3851 24.2546L27.0434 49.928Z" fill="#23D997"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/img/goodtimes-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/goodtimes-small.png


--------------------------------------------------------------------------------
/src/img/home1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/home1.png


--------------------------------------------------------------------------------
/src/img/home2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/home2.png


--------------------------------------------------------------------------------
/src/img/money.svg:
--------------------------------------------------------------------------------
1 | <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M49.9298 27.8306C49.9297 27.8303 49.9297 27.8302 49.9296 27.83L40.4894 4.12643C40.289 3.62279 39.7182 3.37692 39.2145 3.57728C39.2142 3.5774 39.2138 3.57752 39.2134 3.57777L0.915752 18.8275C0.759569 18.895 0.62412 19.0027 0.523147 19.1397C0.204646 19.3052 0.0034353 19.6327 0 19.9916V45.511C0 46.053 0.439473 46.4925 0.981513 46.4925H42.2051C42.7471 46.4925 43.1866 46.053 43.1866 45.511V31.5735L49.3819 29.1059C49.8854 28.9051 50.1307 28.3341 49.9298 27.8306ZM41.2236 44.5294H1.96303V20.9731H41.2236V44.5294ZM16.3765 19.015L32.811 12.4664C34.2778 14.0081 36.3101 14.8843 38.438 14.8927L40.0771 19.015H16.3765ZM43.1866 29.4652V19.9916C43.1866 19.4496 42.7471 19.0101 42.2051 19.0101H42.1894L40.1095 13.7865C40.0865 13.7429 40.0596 13.7015 40.0291 13.6628C39.9238 13.1901 39.486 12.8675 39.0034 12.907C37.0234 13.0875 35.0865 12.2535 33.8573 10.6908C33.5514 10.3133 33.0138 10.2194 32.598 10.4709C32.5514 10.4765 32.5051 10.485 32.4596 10.4965L12.3955 18.486C12.1527 18.5812 11.9585 18.77 11.8567 19.0101H5.76345L39.0289 5.76458L47.7438 27.6474L43.1866 29.4652Z" fill="#23D997"/>
3 | <path d="M4.62686 37.9033C6.53246 38.4665 8.02363 39.9558 8.58923 41.8607C8.71326 42.2765 9.09569 42.5614 9.52951 42.5615C9.58043 42.5583 9.63098 42.5507 9.68067 42.5389C9.72471 42.5515 9.76974 42.5607 9.81514 42.5664H33.3715C33.4119 42.5611 33.4519 42.5529 33.4912 42.5419C33.9816 42.6611 34.4758 42.3604 34.5952 41.87C34.5955 41.8682 34.596 41.8665 34.5964 41.8646C35.1605 39.9578 36.6519 38.4664 38.5587 37.9023C39.0212 37.7609 39.3085 37.3001 39.2321 36.8226C39.2452 36.775 39.2546 36.7264 39.2605 36.6773V28.8252C39.2548 28.776 39.2449 28.7275 39.2311 28.68C39.308 28.2023 39.0205 27.7413 38.5578 27.6003C36.6509 27.0363 35.1599 25.5443 34.5974 23.637C34.4553 23.1714 33.9899 22.8833 33.5098 22.9636C33.4644 22.951 33.4182 22.9418 33.3715 22.9362H9.81514C9.76569 22.942 9.71674 22.9519 9.66889 22.9656C9.19151 22.8895 8.73093 23.1768 8.58923 23.6389C8.02473 25.5454 6.53345 27.0363 4.62686 27.6003C4.16444 27.7416 3.8771 28.2025 3.95354 28.68C3.94078 28.7277 3.93158 28.7762 3.92606 28.8252V36.6773C3.9317 36.7235 3.9409 36.7691 3.95354 36.8138C3.87305 37.2943 4.16101 37.7603 4.62686 37.9033ZM5.88908 29.2237C7.85996 28.4321 9.42204 26.8701 10.2136 24.8992H32.972C33.7639 26.8701 35.3264 28.4321 37.2975 29.2237V36.2788C35.3272 37.0713 33.7654 38.6331 32.973 40.6034H10.2136C9.42118 38.6331 7.85935 37.0713 5.88908 36.2788V29.2237Z" fill="#23D997"/>
4 | <path d="M21.5933 38.6404C24.8458 38.6404 27.4824 36.0038 27.4824 32.7513C27.4824 29.4988 24.8458 26.8622 21.5933 26.8622C18.3408 26.8622 15.7042 29.4988 15.7042 32.7513C15.7074 36.0025 18.3422 38.6372 21.5933 38.6404ZM21.5933 28.8253C23.7616 28.8253 25.5194 30.583 25.5194 32.7513C25.5194 34.9196 23.7616 36.6774 21.5933 36.6774C19.425 36.6774 17.6672 34.9196 17.6672 32.7513C17.6672 30.583 19.425 28.8253 21.5933 28.8253Z" fill="#23D997"/>
5 | <path d="M10.7966 34.2235C11.6097 34.2235 12.2689 33.5643 12.2689 32.7513C12.2689 31.9382 11.6097 31.279 10.7966 31.279C9.98358 31.279 9.32437 31.9382 9.32437 32.7513C9.32437 33.5644 9.98358 34.2235 10.7966 34.2235ZM10.7966 32.2605C11.0677 32.2605 11.2874 32.4802 11.2874 32.7513C11.2874 33.0223 11.0677 33.242 10.7966 33.242C10.5256 33.242 10.3059 33.0223 10.3059 32.7513C10.3059 32.4802 10.5256 32.2605 10.7966 32.2605Z" fill="#23D997"/>
6 | <path d="M32.3899 34.2235C33.203 34.2235 33.8622 33.5643 33.8622 32.7513C33.8622 31.9382 33.203 31.279 32.3899 31.279C31.5769 31.279 30.9177 31.9382 30.9177 32.7513C30.9177 33.5644 31.5769 34.2235 32.3899 34.2235ZM32.3899 32.2605C32.661 32.2605 32.8807 32.4802 32.8807 32.7513C32.8807 33.0223 32.661 33.242 32.3899 33.242C32.1189 33.242 31.8992 33.0223 31.8992 32.7513C31.8992 32.4802 32.1189 32.2605 32.3899 32.2605Z" fill="#23D997"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/img/teamwork.svg:
--------------------------------------------------------------------------------
 1 | <svg width="55" height="50" viewBox="0 0 55 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clipPath="url(#clip0)">
 3 | <path d="M44.315 24.431C49.9172 19.8242 50.376 11.9355 45.3396 6.81113C40.7205 2.1112 32.989 1.31276 27.3406 4.95246C21.1832 0.97752 12.669 2.32109 8.32342 7.95328C4.33603 13.1213 5.20537 20.2008 10.3468 24.4309C3.95844 27.5113 -0.0287222 33.5842 0.000217514 40.1897V45.5469C0.000217514 46.5331 0.874244 47.3326 1.95245 47.3326H52.7094C53.7876 47.3326 54.6617 46.5331 54.6617 45.5469V40.1897C54.6905 33.5842 50.7033 27.5113 44.315 24.431ZM35.1396 6.26139C40.5228 6.25595 44.8917 10.2433 44.8978 15.1675C44.902 18.6793 42.6523 21.8663 39.1513 23.3077C39.001 23.3702 38.8507 23.4273 38.6985 23.4863C38.2167 23.6641 37.7198 23.8055 37.2128 23.9095C37.1153 23.9292 37.0176 23.9399 36.9181 23.9578C36.3516 24.0571 35.7768 24.1102 35.2001 24.1167C34.9404 24.1167 34.6788 24.0988 34.4192 24.0775C34.3216 24.0775 34.2239 24.0775 34.1264 24.0596C33.0168 23.9401 31.9375 23.6491 30.9345 23.1989C30.8975 23.1828 30.8544 23.1845 30.8174 23.1703C30.6221 23.0846 30.427 23.0096 30.2532 22.9131C30.2689 22.8952 30.2786 22.8757 30.2942 22.8578C31.1894 21.8056 31.8951 20.6296 32.3849 19.3739L32.4454 19.2238C32.6682 18.6241 32.8411 18.0099 32.9628 17.3863C32.9804 17.2953 32.994 17.2077 33.0097 17.1096C33.1226 16.4748 33.182 15.8331 33.1874 15.1899C33.1817 14.548 33.1224 13.9074 33.0097 13.2738C32.994 13.181 32.9804 13.0952 32.9628 12.997C32.8411 12.3735 32.6682 11.7592 32.4454 11.1595L32.3849 11.0095C31.8951 9.75378 31.1893 8.57772 30.2942 7.52555C30.2785 7.50766 30.2688 7.48809 30.2532 7.4702C31.7364 6.67877 33.4225 6.2615 35.1396 6.26139ZM9.76115 15.19C9.74731 10.2717 14.0948 6.27437 19.4716 6.26171C21.992 6.25575 24.4168 7.14417 26.2358 8.74C26.349 8.84003 26.4603 8.93995 26.5695 9.04354C26.9048 9.36486 27.214 9.70805 27.4949 10.0703C27.5808 10.181 27.6589 10.2989 27.7389 10.4132C28.0117 10.7973 28.2512 11.2003 28.4553 11.6185C28.5041 11.7203 28.5412 11.8239 28.5841 11.9256C28.7899 12.3882 28.9519 12.8661 29.0683 13.3541C29.082 13.4077 29.0859 13.4613 29.0976 13.5166C29.3449 14.6254 29.3449 15.7685 29.0976 16.8773C29.0859 16.9326 29.0819 16.9862 29.0683 17.0398C28.952 17.5278 28.79 18.0057 28.5841 18.4683C28.5412 18.5701 28.504 18.6737 28.4553 18.7754C28.251 19.193 28.0115 19.5954 27.7389 19.979C27.6588 20.0932 27.5808 20.2111 27.4949 20.3218C27.2141 20.6842 26.9048 21.0273 26.5695 21.3486C26.4602 21.4522 26.3489 21.5522 26.2358 21.6521C25.4453 22.3411 24.534 22.9037 23.5398 23.3164C23.3817 23.3824 23.2216 23.4432 23.0596 23.495C22.589 23.6659 22.1048 23.8031 21.6111 23.9057C21.4881 23.9307 21.3612 23.9449 21.2363 23.9646C20.7062 24.0549 20.1687 24.1044 19.6296 24.1128H19.4149C18.8758 24.1045 18.3383 24.0549 17.8082 23.9646C17.6833 23.9449 17.5563 23.9307 17.4334 23.9057C16.9397 23.8031 16.4554 23.6659 15.9849 23.495C15.8228 23.4361 15.6628 23.3754 15.5047 23.3164C12.012 21.8739 9.76561 18.6952 9.76115 15.19ZM35.1396 43.7612H3.90457V40.1898C3.87597 34.1387 8.04398 28.7361 14.2863 26.7328C17.6373 28.009 21.4067 28.009 24.7579 26.7328C25.4097 26.9506 26.0448 27.2077 26.6593 27.5025C27.0654 27.6935 27.4402 27.9114 27.8306 28.131C28.0845 28.2756 28.3421 28.4167 28.5862 28.5757C28.963 28.8203 29.3182 29.0864 29.6677 29.3596C29.8922 29.5382 30.1147 29.7167 30.3255 29.8953C30.6476 30.1738 30.9502 30.4685 31.2411 30.7703C31.4499 30.9882 31.653 31.2096 31.8463 31.4382C32.1021 31.7381 32.346 32.0453 32.5725 32.3613C32.7678 32.6292 32.9415 32.9077 33.1132 33.1863C33.3085 33.4934 33.4881 33.8006 33.652 34.1203C33.816 34.4399 33.9605 34.7899 34.101 35.131C34.2239 35.4274 34.3548 35.7221 34.4562 36.0238C34.5929 36.4381 34.6886 36.8666 34.7842 37.2952C34.8428 37.5487 34.9189 37.797 34.9618 38.0541C35.0775 38.7611 35.1368 39.4749 35.1395 40.1898V43.7612H35.1396ZM50.7572 43.7612H39.044V40.1898C39.044 39.6309 39.0089 39.0773 38.9543 38.5291C38.9386 38.3684 38.9114 38.2095 38.8918 38.0488C38.8391 37.6541 38.7786 37.2631 38.6965 36.8755C38.6614 36.7101 38.6244 36.544 38.5852 36.3773C38.4916 35.9797 38.3829 35.5856 38.2592 35.1952C38.2183 35.0666 38.1811 34.9362 38.1382 34.8095C37.5916 33.211 36.7994 31.6918 35.7859 30.2971L35.7097 30.1953C35.374 29.7393 35.0154 29.2983 34.634 28.8721L34.6204 28.856C34.23 28.4132 33.8063 27.9827 33.3612 27.5756C33.3866 27.5756 33.414 27.5756 33.4413 27.5756C33.9922 27.6418 34.5469 27.6776 35.1026 27.6827H35.21C35.7243 27.6787 36.2378 27.6482 36.7484 27.5917C36.9085 27.5738 37.0667 27.547 37.2267 27.5238C37.6419 27.4655 38.0519 27.3899 38.4566 27.2971C38.5717 27.2703 38.6889 27.2453 38.806 27.2149C39.3371 27.0828 39.8587 26.9205 40.3677 26.7292C46.6146 28.7305 50.7864 34.1356 50.7573 40.1899V43.7612H50.7572Z" fill="#23D997"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0">
 7 | <rect width="54.6617" height="50" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/src/img/theathlete-big.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/theathlete-big.png


--------------------------------------------------------------------------------
/src/img/theracer-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/developedbyed/capture/7b9e8abcf36163f1e5fa0305c3f866e44cf0e45c/src/img/theracer-small.png


--------------------------------------------------------------------------------
/src/img/wave.svg:
--------------------------------------------------------------------------------
1 | <svg width="1440" height="363" viewBox="0 0 1440 363" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M1440 27.4774C1352.73 19.8184 1122.41 49.0556 899.331 227.276C620.48 450.052 354.282 355.647 170.328 185.318C23.165 49.0556 -4.21721 8.32998 0.487081 5" stroke="#D96ED4" strokeOpacity="0.1" strokeWidth="10"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import App from "./App";
 4 | import * as serviceWorker from "./serviceWorker";
 5 | import { BrowserRouter } from "react-router-dom";
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <BrowserRouter>
10 |       <App />
11 |     </BrowserRouter>
12 |   </React.StrictMode>,
13 |   document.getElementById("root")
14 | );
15 | 
16 | // If you want your app to work offline and load faster, you can change
17 | // unregister() to register() below. Note this comes with some pitfalls.
18 | // Learn more about service workers: https://bit.ly/CRA-PWA
19 | serviceWorker.unregister();
20 | 


--------------------------------------------------------------------------------
/src/pages/AboutUs.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import FaqSection from "../components/FaqSection";
 3 | import AboutSection from "../components/AboutSection";
 4 | import ServicesSection from "../components/ServicesSection";
 5 | 
 6 | const AboutUs = () => {
 7 |   return (
 8 |     <>
 9 |       <AboutSection />
10 |       <ServicesSection />
11 |       <FaqSection />
12 |     </>
13 |   );
14 | };
15 | 
16 | export default AboutUs;
17 | 


--------------------------------------------------------------------------------
/src/pages/OurWork.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styled from "styled-components";
 3 | import Movie from "../components/Movie";
 4 | 
 5 | //Import Images
 6 | import athlete from "../img/athlete-small.png";
 7 | import goodtimes from "../img/goodtimes-small.png";
 8 | import theracer from "../img/theracer-small.png";
 9 | //Motion
10 | import { motion } from "framer-motion";
11 | import { containerWork } from "../util";
12 | 
13 | const OurWork = () => {
14 |   return (
15 |     <Work variants={containerWork} initial="hidden" animate="show" exit="exit">
16 |       <Movie imgSrc={athlete} title={"The Athlete"} />
17 |       <Movie imgSrc={goodtimes} title={"Good Times Never End"} />
18 |       <Movie imgSrc={theracer} title={"The Racer"} />
19 |     </Work>
20 |   );
21 | };
22 | 
23 | const Work = styled(motion.section)`
24 |   min-height: 100vh;
25 |   padding: 5rem 10rem;
26 | `;
27 | 
28 | export default OurWork;
29 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | export const container = {
 2 |   hidden: { opacity: 0 },
 3 |   show: {
 4 |     opacity: 1,
 5 |     transition: {
 6 |       staggerChildren: 0.2,
 7 |       duration: 0.5,
 8 |       when: "beforeChildren",
 9 |     },
10 |   },
11 |   exit: {
12 |     opacity: 0,
13 |     transition: { ease: "easeInOut", duration: 1 },
14 |   },
15 | };
16 | export const containerWork = {
17 |   hidden: { opacity: 0 },
18 |   show: {
19 |     background: "#FFFFFF",
20 |     opacity: 1,
21 |     transition: {
22 |       staggerChildren: 0.2,
23 |       duration: 0.5,
24 |       ease: "easeOut",
25 | 
26 |       when: "beforeChildren",
27 |     },
28 |   },
29 |   exit: {
30 |     opacity: 0,
31 |     transition: { ease: "easeInOut", duration: 1 },
32 |   },
33 | };
34 | 
35 | export const titleAnim = {
36 |   hidden: { y: 100 },
37 |   show: {
38 |     y: 0,
39 |     transition: { type: "tween", ease: "circOut", duration: 0.75 },
40 |   },
41 | };
42 | export const fade = {
43 |   hidden: { opacity: 0 },
44 |   show: {
45 |     opacity: 1,
46 |     transition: { type: "tween", ease: "circOut", duration: 1 },
47 |   },
48 | };
49 | export const photoAnim = {
50 |   hidden: { scale: 1.5, opacity: 0 },
51 |   show: {
52 |     scale: 1,
53 |     opacity: 1,
54 |     transition: {
55 |       type: "tween",
56 |       ease: "circOut",
57 |       duration: 1,
58 |       delay: 0.75,
59 |     },
60 |   },
61 | };
62 | 
63 | export const lineAnim = {
64 |   hidden: { width: "0%" },
65 |   show: {
66 |     width: "100%",
67 |     transition: { duration: 1 },
68 |   },
69 | };
70 | 
71 | export const workPhoto = {
72 |   hidden: { scale: 1.5 },
73 |   show: {
74 |     scale: 1,
75 |     transition: {
76 |       type: "tween",
77 |       ease: "easeOut",
78 |       duration: 0.5,
79 |     },
80 |   },
81 | };
82 | 
83 | export const reveal = {
84 |   hidden: { opacity: 0, scale: 0.9 },
85 |   show: {
86 |     opacity: 1,
87 |     scale: 1,
88 |     transition: {
89 |       type: "tween",
90 |       ease: "easeOut",
91 |       duration: 1,
92 |     },
93 |   },
94 | };
95 | 


--------------------------------------------------------------------------------