diff --git a/public/stylesheets/formulario/index.css b/public/stylesheets/formulario/index.css index 31e9fe0..9c2d205 100644 --- a/public/stylesheets/formulario/index.css +++ b/public/stylesheets/formulario/index.css @@ -1,104 +1,187 @@ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); -.title1 { - text-align: center; - margin-bottom: 1.5rem; - margin-top: 15rem; - font-family: "Poppins", sans-serif; +.form-page { + max-width: 100%; + display: flex; + flex-direction: column; + padding-top: 180px; + align-items: center; + margin-bottom: 50px; } - -.form-container { - background-color: #3D1887; - padding: 2rem; - border-radius: 10px; - max-width: 80%; - margin: 0rem auto; - color: #FAF8FB; - position: relative; +.form-page h1 { + font-size: 4rem; font-family: "Poppins", sans-serif; + color: #3D1887; } -.form-container h1 { - text-align: center; - margin-bottom: 1.5rem; + +.card { + width: 85%; + height: 100vh; + display: flex; + flex-direction: row; + background-color: #5e329d; + border-radius: 24px 20px 20px 20px; } -.form-container form { +.card .side-form { + width: 50%; display: flex; flex-direction: column; - gap: 1.5rem; + align-items: center; + border-right: 1px solid white; } -.form-container form .input-group { +.card .side-form .preencha { + width: 100%; display: flex; + align-items: center; + justify-content: center; + background-color: white; + height: 80px; + border-radius: 20px 0 0 0; + border: 1px solid black; +} +.card .side-form .preencha h3 { + font-size: 2.4rem; + color: #3D1887; + font-family: "Poppins", sans-serif; +} +.card .side-form form { + display: flex; + width: 85%; flex-direction: column; + gap: 10px; } -.form-container form .input-group label { - margin-bottom: 0.5rem; +.card .side-form form label { + font-family: "Roboto", sans-serif; + font-size: 1.5rem; color: #FAF8FB; + padding: 5px; } -.form-container form .input-group input { - width: 100%; - max-width: 100%; - padding: 0.75rem; - align-items: center; - border-radius: 5px; +.card .side-form form input { + height: 50px; + border-radius: 20px; border: none; - background-color: #D9D9D9; - color: #393939; + background-color: rgba(217, 217, 217, 0.6); + font-size: 1.3rem; } -.form-container form .cep-group { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - justify-items: center; +.card .side-form form .address { + padding-top: 20px; } -.form-container form .cep-group .input-group { +.card .side-form form .address input { + width: 24%; + font-size: 1.3rem; +} +.card .side-form form .formas-pagamento h3 { + font-size: 2rem; + color: #FAF8FB; + font-family: "Poppins", sans-serif; + padding: 15px; +} +.card .side-form form .formas-pagamento .buttons { + text-align: center; + background-color: transparent; + border: none; display: flex; - flex-direction: column; - align-items: flex-start; + justify-content: center; + gap: 80px; +} +.card .side-form form .formas-pagamento .buttons button { + border: none; + background-color: transparent; + cursor: pointer; +} +.card .side-form form .formas-pagamento .buttons button:focus { + transform: scale(1.2); + filter: grayscale(100%); +} +.card .side-form form .formas-pagamento .buttons button img { + object-fit: cover; } -.form-container form .cep-group .input-group label { - margin-bottom: 0.5rem; +.card .side-form form .formas-pagamento .buttons button p { + color: #FAF8FB; + font-size: 1.3rem; +} +.card .package-side { + width: 50%; } -.form-container form .cep-group .input-group input { +.card .package-side .pacote-escolhido { width: 100%; - max-width: 200px; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + height: 80px; + border-radius: 0 20px 0 0; + border: 1px solid black; +} +.card .package-side .pacote-escolhido h3 { + font-size: 2.4rem; + color: #3D1887; + font-family: "Poppins", sans-serif; } -.form-container form .pacote-info { - background-color: #FFEA73; - padding: 1rem; - border-radius: 10px; +.card .package-side .pacote-premium { display: flex; - justify-content: space-between; + height: 710px; + margin: 10px auto; + border-radius: 20px; + flex-direction: column; + align-items: center; + background-color: #FAF8FB; + width: 85%; +} +.card .package-side .pacote-premium img { + width: 40%; + padding-bottom: 10px; +} +.card .package-side .pacote-premium h2 { + font-family: "Poppins", sans-serif; + font-size: 2.5rem; + color: #3D1887; +} +.card .package-side .pacote-premium ul { + display: flex; + flex-direction: column; + gap: 20px; +} +.card .package-side .pacote-premium ul li { + font-size: 2rem; font-family: "Roboto", sans-serif; - color: #393939; } -.form-container form .pagamento { - text-align: center; +.card .package-side .pacote-premium a { + display: flex; } -.form-container form .pagamento span { - display: block; - margin-bottom: 0.5rem; +.card .package-side .pacote-premium a button { + height: 55px; + width: 30%; + margin: 0 auto; + font-family: "Poppins", sans-serif; + font-size: 1.5rem; + padding: 0 20px 0 20px; + border-radius: 15px; + border: none; + font-weight: bold; + background: #3D1887; color: #FAF8FB; + margin-top: 20px; } -.form-container form .pagamento .pagamento-opcoes { +.card .package-side .pagamento-final { display: flex; + width: 100%; + align-items: center; justify-content: center; - gap: 1rem; + text-decoration: none; + padding-top: 20px; } -.form-container form .pagamento .pagamento-opcoes img { - width: 50px; -} -.form-container form .botao-pagamento { - padding: 1rem; - background-color: #FFEA73; - color: #393939; +.card .package-side .pagamento-final button { + width: 50% !important; + height: 60px !important; + font-family: "Poppins", sans-serif; + font-weight: bold; + font-size: 1.3rem; + color: black !important; + background-color: #ffea73 !important; border: none; - border-radius: 5px; + border-radius: 20px; cursor: pointer; - text-transform: uppercase; - font-weight: bold; -} -.form-container form .botao-pagamento:hover { - background-color: rgb(255, 226.35, 64); } /*# sourceMappingURL=index.css.map */ diff --git a/public/stylesheets/formulario/index.css.map b/public/stylesheets/formulario/index.css.map index 8721a57..0a18319 100644 --- a/public/stylesheets/formulario/index.css.map +++ b/public/stylesheets/formulario/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/stylesheets/variables.scss","../../../src/stylesheets/formulario/index.scss"],"names":[],"mappings":"AAAQ;AAEA;ACAR;EACE;EACE;EACF;EACA;;;AAEF;EACE,kBDKY;ECJZ;EACA;EACA;EACA;EAEA,ODHW;ECIX;EACA,aDXoB;;ACYtB;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA,ODrBK;;ACuBP;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBD7BI;EC8BJ,ODhCK;;ACmCT;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAMN;EACE,kBDtDQ;ECuDR;EACA;EACA;EACA;EACA,aDnEe;ECoEf,ODhEO;;ACkET;EACE;;AACA;EACE;EACA;EACA,ODtEK;;ACyEP;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA,kBDnFQ;ECoFR,ODxFO;ECyFP;EACA;EACA;EACA;EACA;;AAEA;EACE","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../../src/stylesheets/variables.scss","../../../src/stylesheets/formulario/index.scss"],"names":[],"mappings":"AAAQ;AAEA;AC+BR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,aDrCkB;ECsClB,OD9BU;;;ACkCd;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,OD5DM;EC6DN,aDrEc;;ACyElB;EACE;EACA;EACA;EACA;;AAEA;EACE,aD/Ea;ECgFb;EACA,OD5EK;EC6EL;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EACE;EACA;;AAKF;EACE;EACA,ODpGG;ECqGH,aD3GY;EC4GZ;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EAEA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE,ODlID;ECmIC;;AAQZ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA,ODxJM;ECyJN,aDjKc;;ACqKlB;EACE;EACA;EACA;EACA;EACA;EACA;EAEA,kBDvKO;ECwKP;;AAGA;EACE;EACA;;AAGF;EACE,aDvLc;ECwLd;EACA,ODjLM;;ACoLR;EACE;EACA;EACA;;AAGF;EACE;EACA,aDnMa;;ACuMf;EACE;;AAEA;EACE;EACA;EACA;EACA,aD/MY;ECgNZ;EACA;EAEA;EACA;EACA;EACA,YD9MI;EC+MJ,ODjNG;ECkNH;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA,aDxOc;ECyOd;EACA;EACA;EACA;EACA;EACA;EACA","file":"index.css"} \ No newline at end of file diff --git a/public/stylesheets/formulario/media.css b/public/stylesheets/formulario/media.css index 6b68103..9e343c8 100644 --- a/public/stylesheets/formulario/media.css +++ b/public/stylesheets/formulario/media.css @@ -1,37 +1,3 @@ -/* Responsivo para monitores grandes */ -@media (min-width: 1200px) { - .form-container { - max-width: 75%; - } -} -/* Responsivo para tablet e Celuar */ -@media (max-width: 768px) { - .form-container { - max-width: 90%; - padding: 1.5rem; - } - .cep-group { - grid-template-columns: 1fr 1fr; - } - .botao-pagamento { - padding: 0.75rem; - } -} -@media (max-width: 480px) { - .form-container { - max-width: 95%; - padding: 1rem; - margin-top: 5rem; - } - .cep-group { - grid-template-columns: 1fr; - } - input { - max-width: 100%; - } - .botao-pagamento { - padding: 0.75rem; - } -} + /*# sourceMappingURL=media.css.map */ diff --git a/public/stylesheets/formulario/media.css.map b/public/stylesheets/formulario/media.css.map index bc81b9d..ad4de17 100644 --- a/public/stylesheets/formulario/media.css.map +++ b/public/stylesheets/formulario/media.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../../src/stylesheets/formulario/media.scss"],"names":[],"mappings":"AAAA;AACA;EACE;IACE;;;AAKJ;AACA;EACE;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAEF;IACE","file":"media.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"media.css"} \ No newline at end of file diff --git a/src/Components/Adquira/Adquira.jsx b/src/Components/Adquira/Adquira.jsx index cd23bac..bb736e6 100644 --- a/src/Components/Adquira/Adquira.jsx +++ b/src/Components/Adquira/Adquira.jsx @@ -171,7 +171,7 @@ export default function Adquira() {
  • Segurança reforçada em apps financeiros
    • - + @@ -193,10 +193,7 @@ export default function Adquira() {
  • Suporte para backup
    • - + diff --git a/src/Components/Fomulario/Form.jsx b/src/Components/Fomulario/Form.jsx index 2f6ca35..2154691 100644 --- a/src/Components/Fomulario/Form.jsx +++ b/src/Components/Fomulario/Form.jsx @@ -1,69 +1,151 @@ -import React, { useState } from 'react'; -import NavBar from '../NavBar/NavBar.jsx'; +import { useState } from "react"; +import NavBar from "../NavBar/NavBar.jsx"; import "../../stylesheets/formulario/index.scss"; import "../../stylesheets/formulario/media.scss"; -import pix from '../../assets/formulario/pix.png' -import visa from '../../assets/formulario/visa.png' +import pix from "../../assets/formulario/pix.png"; +import visa from "../../assets/formulario/visa.png"; +import { Link } from "react-router-dom"; +import logo from "../../assets/Adquira/logo.png"; +import "../../stylesheets/Adquira/Adquira.scss"; +import "../../stylesheets/formulario/index.scss"; const Formulario = () => { - return ( - <> - + const [selectedPayment, setSelectedPayment] = useState(null); -

    Preencha os dados

    -
    + const handlePaymentSelection = (paymentMethod) => { + setSelectedPayment(paymentMethod); + }; -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - - - - -
    - -
    - - -
    - -
    - Pacote Comprado: Pacote Premium - Valor: R$229,99 + const handlePayment = (event) => { + event.preventDefault(); + const form = document.getElementById("purchase-form"); + const inputs = form.querySelectorAll("input[required]"); + let allFilled = true; + + inputs.forEach((input) => { + if (!input.value) { + allFilled = false; + input.classList.add("error"); + } else { + input.classList.remove("error"); + } + }); + + if (!selectedPayment) { + alert("Por favor, selecione uma forma de pagamento."); + return; + } + + if (!allFilled) { + alert("Por favor, preencha todos os campos obrigatórios."); + return; + } + + if (selectedPayment === "visa") { + window.location.href = "https://buy.stripe.com/00g5kq0nT83sdQk145"; + } else if (selectedPayment === "pix") { + window.location.href = ""; + } + }; + + return ( + <> + + +
    +

    Formulário de Compra

    + +
    +
    +
    +

    Preencha os Dados

    +
    + + + + + + + + + + + + + +
    + + + + + + + + +
    + + + + +
    +

    Formas de pagamento

    +
    + + + +
    +
    +
    - -
    - Formas de pagamento: -
    - Cartão de Crédito - Pix + +
    +
    +

    Pacote Escolhido

    +
    + +
    +

    Pacote Premium

    + + +
      +
    • Sistema para cinco aparelhos
      • +
    • Valor promocional
      • +
    • Acesso antecipado a atualizações
      • +
    • Segurança para phishing e golpes
      • +
    • Identificador de chamadas suspeitas
      • +
    • Segurança reforçada em apps financeiros
      • +
    • Pacote personalizado
      • +
    • Suporte para backup
      • + + + + +
    + + + +
    - - - +
    - - ); - }; - - export default Formulario; \ No newline at end of file + + ); +}; + +export default Formulario; diff --git a/src/Components/NavBar/NavBar.jsx b/src/Components/NavBar/NavBar.jsx index eb81b02..f61fbf7 100644 --- a/src/Components/NavBar/NavBar.jsx +++ b/src/Components/NavBar/NavBar.jsx @@ -169,7 +169,7 @@ export default function NavBar() {