diff --git a/frontend/.env.example b/frontend/.env.example new file mode 100644 index 0000000..a762bdf --- /dev/null +++ b/frontend/.env.example @@ -0,0 +1,3 @@ +REACT_APP_FORMSPREE_FORM_CODE = moqgpayj +REACT_APP_GITHUB_REPO_URL = https://github.com/shravan20/github-readme-quotes +REACT_APP_CONTACT_EMAIL = mrshravankumarb@gmail.com diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 532d4ea..fac2898 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,16 +8,21 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@formspree/react": "^2.5.1", "@material-ui/core": "^4.11.1", "@material-ui/lab": "^4.0.0-alpha.56", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.3.0", + "dotenv": "^16.4.5", "react": "^17.0.1", "react-dom": "^17.0.1", "react-icons": "^5.3.0", "react-scripts": "5.0.1", "web-vitals": "^0.2.4" + }, + "devDependencies": { + "dotenv-webpack": "^8.1.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -2511,6 +2516,30 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@formspree/core": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@formspree/core/-/core-3.0.1.tgz", + "integrity": "sha512-jGNgrEtL8mx8k1kkmeNfyeoP1a+H2kci8TMG7CT3R5k3ssqr0Sl1j10SIKo74CFZVewMW4JjMYwcunWUPfutSQ==", + "license": "MIT", + "dependencies": { + "@stripe/stripe-js": "^1.35.0" + } + }, + "node_modules/@formspree/react": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@formspree/react/-/react-2.5.1.tgz", + "integrity": "sha512-Yhxyn32m3zH63i0DNpnBq55zargDlbihqC0wlK18dqU7GOUqJXKY+WywLXuTRGfqo79/hT+Qx6eFS6M0J6eh0A==", + "license": "MIT", + "dependencies": { + "@formspree/core": "^3.0.1", + "@stripe/react-stripe-js": "^1.7.1", + "@stripe/stripe-js": "^1.35.0" + }, + "peerDependencies": { + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.11", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz", @@ -3723,6 +3752,26 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@stripe/react-stripe-js": { + "version": "1.16.5", + "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-1.16.5.tgz", + "integrity": "sha512-lVPW3IfwdacyS22pP+nBB6/GNFRRhT/4jfgAK6T2guQmtzPwJV1DogiGGaBNhiKtSY18+yS8KlHSu+PvZNclvQ==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "@stripe/stripe-js": "^1.44.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@stripe/stripe-js": { + "version": "1.54.2", + "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.54.2.tgz", + "integrity": "sha512-R1PwtDvUfs99cAjfuQ/WpwJ3c92+DAMy9xGApjqlWQMj0FKQabUAys2swfTRNzuYAYJh7NqK2dzcYVNkKLEKUg==", + "license": "MIT" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -7101,9 +7150,33 @@ } }, "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "version": "16.4.5", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", + "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, + "node_modules/dotenv-defaults": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz", + "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "dotenv": "^8.2.0" + } + }, + "node_modules/dotenv-defaults/node_modules/dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true, + "license": "BSD-2-Clause", "engines": { "node": ">=10" } @@ -7113,6 +7186,22 @@ "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==" }, + "node_modules/dotenv-webpack": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-8.1.0.tgz", + "integrity": "sha512-owK1JcsPkIobeqjVrk6h7jPED/W6ZpdFsMPR+5ursB7/SdgDyO+VzAU+szK8C8u3qUhtENyYnj8eyXMR5kkGag==", + "dev": true, + "license": "MIT", + "dependencies": { + "dotenv-defaults": "^2.0.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "webpack": "^4 || ^5" + } + }, "node_modules/duplexer": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz", @@ -14694,6 +14783,15 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=10" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index d5f9de3..368db41 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -3,11 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "@formspree/react": "^2.5.1", "@material-ui/core": "^4.11.1", "@material-ui/lab": "^4.0.0-alpha.56", "@testing-library/jest-dom": "^5.11.6", "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^12.3.0", + "dotenv": "^16.4.5", "react": "^17.0.1", "react-dom": "^17.0.1", "react-icons": "^5.3.0", @@ -37,5 +39,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "dotenv-webpack": "^8.1.0" } } diff --git a/frontend/src/components/Footer/Footer.js b/frontend/src/components/Footer/Footer.js new file mode 100644 index 0000000..05f7b7d --- /dev/null +++ b/frontend/src/components/Footer/Footer.js @@ -0,0 +1,72 @@ +import React from "react"; +import Grid from '@material-ui/core/Grid'; +import Box from '@material-ui/core/Box'; +import TextField from '@material-ui/core/TextField'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import Link from '@material-ui/core/Link'; +import Paper from '@material-ui/core/Paper'; +import { useForm } from '@formspree/react'; +import ResponseSuccess from "./ResponseSuccess"; + + +const GITHUB_REPO_URL = process.env.REACT_APP_GITHUB_REPO_URL || 'https://github.com/shravan20/github-readme-quotes'; +const CONTACT_EMAIL = process.env.REACT_APP_CONTACT_EMAIL || 'shravan@ohmyscript.com'; + +const Footer = () => { + const [state, handleSubmitFormspree] = useForm(process.env.REACT_APP_FORMSPREE_FORM_CODE); + return ( + + + {state.succeeded && } + + {!state.succeeded &&
+ + + + + Drop us a message: + + + + + + + + + + + + + + + + +
} + + + + + + + Sitemap + + + + About Us + + + Contact Us + + + Terms and Conditions + + + + + ) +} + +export default Footer; diff --git a/frontend/src/components/Footer/ResponseSuccess.js b/frontend/src/components/Footer/ResponseSuccess.js new file mode 100644 index 0000000..6ae9974 --- /dev/null +++ b/frontend/src/components/Footer/ResponseSuccess.js @@ -0,0 +1,26 @@ +import React from "react"; +import Paper from '@material-ui/core/Paper'; +import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; + +const useStyles = makeStyles((theme) => ({ + paper: { + height: '90%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + backgroundColor: '#DBE2E9', + }, + })); + +function ResponseSuccess(){ + const classes = useStyles(); + return ( + Your response has been recorded successfully! + ) +} + +ResponseSuccess.propTypes = {}; + +export default ResponseSuccess; diff --git a/frontend/src/components/Pages/Home/index.js b/frontend/src/components/Pages/Home/index.js index 0d71bfe..7eb029b 100644 --- a/frontend/src/components/Pages/Home/index.js +++ b/frontend/src/components/Pages/Home/index.js @@ -5,6 +5,7 @@ import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../ import TextField from '@material-ui/core/TextField'; import Autocomplete from '@material-ui/lab/Autocomplete'; import ContributorsCard from '../../ContributorsCard/ContributorCard' +import Footer from '../../Footer/Footer'; const Home = () => { const [theme, setTheme] = useState(themes[0]); @@ -146,6 +147,7 @@ const Home = () => { } +