Merge pull request #5 from fga-eps-mds/82-criacao-pagina-vantagens

US03 e US04 - Página de Login e Vantagens
fga-eps-mds · Dec 9, 2024 · 7e95b56 · 7e95b56
2 parents 34efafe + d682b8c
commit 7e95b56
Show file tree

Hide file tree

Showing 24 changed files with 2,650 additions and 1,690 deletions.
diff --git a/src/Components/AdvantagesCard/index.css b/src/Components/AdvantagesCard/index.css
@@ -0,0 +1,36 @@
+.containerCard {
+  width: 291px;
+  height: 196px;
+  background-color: #3d160d;
+  border-radius: 40px;
+  gap: 22px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #ebdec9;
+  font-family: "Noto Sans";
+  text-align: center;
+}
+
+.text {
+  color: #ebdec9;
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  letter-spacing: 2px;
+}
+
+.link {
+  color: #e5d8c1;
+  text-decoration: underline;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 2px;
+}
+.link:hover {
+  cursor: pointer;
+}
diff --git a/src/Components/AdvantagesCard/index.jsx b/src/Components/AdvantagesCard/index.jsx
@@ -0,0 +1,20 @@
+import PropTypes from "prop-types";
+import "./index.css";
+
+export default function AdvantagesCard({ title, onClick }) {
+  return (
+    <>
+      <div className="containerCard">
+        <p className="text">{title}</p>
+        <a className="link" onClick={onClick}>
+          Saber mais
+        </a>
+      </div>
+    </>
+  );
+}
+
+AdvantagesCard.propTypes = {
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+};
diff --git a/src/Components/AdvantagesModal/index.css b/src/Components/AdvantagesModal/index.css
@@ -0,0 +1,64 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Caixa principal do modal */
+.modal-box {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  align-items: center;
+  gap: 3rem;
+  border-radius: 10px;
+  padding: 3rem;
+  width: 100%;
+  max-width: 800px;
+  max-height: fit-content;
+  font-family: Noto Sans;
+  background-color: #3d160d; /* Cor marrom */
+  color: #ebdec9; /* Texto branco */
+}
+
+/* Botão de fechar */
+.close-button {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  border: none;
+  background: none;
+  color: #ebdec9;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0.5rem;
+}
+
+/* Cabeçalho do modal */
+.modal-header {
+  padding-bottom: 1rem;
+  line-height: 1.6; /* Espaç    display: flex;amento entre linhas */
+  margin-top: 10px;
+  font-size: 3.125rem;
+  letter-spacing: 0.1rem; /* Espaçamento entre letras */
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 2px;
+  overflow-wrap: anywhere;
+}
+
+.modal-main-info {
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: 2px;
+  gap: 1.5rem;
+  overflow-wrap: anywhere;
+}
diff --git a/src/Components/AdvantagesModal/index.jsx b/src/Components/AdvantagesModal/index.jsx
@@ -0,0 +1,32 @@
+import PropTypes from "prop-types";
+import "./index.css";
+
+export default function AdvantagesModal({ title, description, onClose }) {
+  return (
+    <>
+      <div className="modal-overlay">
+        <div className="modal-box">
+          <button className="close-button" onClick={onClose}>
+            &times;
+          </button>
+
+          <h2 className="modal-header">{title}</h2>
+          <div className="modal-main-info">
+            <p className="modal-description">{description}</p>
+
+            <p className="modal-contacts">
+              Para mais informações, entre em contato com o Sindicato pelo
+              número <b>(61) 3321-1949</b>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+AdvantagesModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
diff --git a/src/Components/FieldText/index.jsx b/src/Components/FieldText/index.jsx
@@ -1,65 +1,65 @@
-import PropTypes from "prop-types";
-import theme from "../../Styles/global";
-import TextField from "@mui/material/TextField";
-
-export default function FieldText({
-  label,
-  value,
-  onChange,
-  disabled,
-  onBlur,
-  erro,
-  type,
-}) {
-  return (
-    <TextField
-      id={`field-${label.replace(/\s+/g, "-").toLowerCase()}`} // Gera um id único baseado no label
-      label={label}
-      value={value}
-      variant="filled"
-      onChange={onChange}
-      disabled={disabled}
-      onBlur={onBlur}
-      error={erro}
-      type={type}
-      sx={{
-        margin: ".7rem",
-        background: "#EAE3D7",
-        backgroundColor: "#EAE3D7",
-        borderRadius: "5px",
-        "& .MuiInput-underline:before": {
-          borderBottomColor: theme.palette.main, // Cor da borda inferior antes do foco
-        },
-        "& .MuiInput-underline:hover:before": {
-          borderBottomColor: theme.palette.main, // Cor da borda inferior ao passar o mouse
-        },
-        "& .MuiInput-underline:after": {
-          borderBottomColor: theme.palette.main, // Cor da borda inferior após o foco
-        },
-        "& .MuiInputBase-input": {
-          color: theme.palette.contrastText, // Cor do texto
-        },
-        "& .MuiInputLabel-root": {
-          color: theme.palette.main,
-          fontFamily: '"Noto Sans", sans-serif',
-        },
-        "& .MuiInputLabel-root.Mui-focused": {
-          color: theme.palette.main, // Cor do rótulo quando focado
-        },
-        "& .MuiInputBase-input::placeholder": {
-          fontFamily: '"Overpass", sans-serif', // Fonte do placeholder
-        },
-      }}
-    />
-  );
-}
-
-FieldText.propTypes = {
-  label: PropTypes.string.isRequired,
-  value: PropTypes.any.isRequired,
-  onChange: PropTypes.func.isRequired,
-  disabled: PropTypes.bool,
-  onBlur: PropTypes.func, // Added prop type for onBlur
-  erro: PropTypes.bool, // Added prop type for erro
-  type: PropTypes.string,
-};
+import PropTypes from "prop-types";
+import theme from "../../Styles/global";
+import TextField from "@mui/material/TextField";
+
+export default function FieldText({
+  label,
+  value,
+  onChange,
+  disabled,
+  onBlur,
+  erro,
+  type,
+}) {
+  return (
+    <TextField
+      id={`field-${label.replace(/\s+/g, "-").toLowerCase()}`} // Gera um id único baseado no label
+      label={label}
+      value={value}
+      variant="filled"
+      onChange={onChange}
+      disabled={disabled}
+      onBlur={onBlur}
+      error={erro}
+      type={type}
+      sx={{
+        margin: ".7rem",
+        background: "#EAE3D7",
+        backgroundColor: "#EAE3D7",
+        borderRadius: "5px",
+        "& .MuiInput-underline:before": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior antes do foco
+        },
+        "& .MuiInput-underline:hover:before": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior ao passar o mouse
+        },
+        "& .MuiInput-underline:after": {
+          borderBottomColor: theme.palette.main, // Cor da borda inferior após o foco
+        },
+        "& .MuiInputBase-input": {
+          color: theme.palette.contrastText, // Cor do texto
+        },
+        "& .MuiInputLabel-root": {
+          color: theme.palette.main,
+          fontFamily: '"Noto Sans", sans-serif',
+        },
+        "& .MuiInputLabel-root.Mui-focused": {
+          color: theme.palette.main, // Cor do rótulo quando focado
+        },
+        "& .MuiInputBase-input::placeholder": {
+          fontFamily: '"Overpass", sans-serif', // Fonte do placeholder
+        },
+      }}
+    />
+  );
+}
+
+FieldText.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  onChange: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  onBlur: PropTypes.func, // Added prop type for onBlur
+  erro: PropTypes.bool, // Added prop type for erro
+  type: PropTypes.string,
+};
diff --git a/src/Components/Footer/index.css b/src/Components/Footer/index.css
@@ -0,0 +1,55 @@
+.footer {
+  background-color: #f9f6f3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 6rem;
+  z-index: 100;
+  position: relative;
+  bottom: 0;
+  padding: 0 2.813rem;
+  border-top: 1px solid #dab66f;
+}
+
+.copyright {
+  position: absolute;
+  justify-items: center;
+  font-size: 0.75rem;
+  color: #3d160d;
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.46px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.copyright p {
+  text-align: center;
+}
+
+.icons {
+  justify-content: space-between;
+}
+
+@media (max-width: 1175px) {
+  .copyright {
+    position: relative;
+    left: auto;
+    transform: none;
+  }
+}
+@media (max-width: 945px) {
+  .logoFooter {
+    display: none;
+  }
+}
+@media (max-width: 890px) {
+  .footer {
+    height: 10rem;
+    flex-direction: column;
+    padding: 2rem 1rem;
+    gap: 1rem;
+  }
+}