Maquetación y estilos del flujo de pago

Payments.jsx

import React from 'react';
import '../styles/components/Payment.css';

const Payments = () => {
  return (
    <div className="Payment">
      <div className="Payment-content">
        <h3>Resumen del pedido:</h3>
        <div className="Payment-button">Boton de pago con Paypal</div>
      </div>
      <div></div>
    </div>
  );
};

export default Payments;

Success.jsx

import React from 'react';
import '../styles/components/Success.css';

const Success = () => {
  return (
    <div className="Succes">
      <div className="Success-content">
        <h2>Nombre, Gracias por tu compra</h2>
        <span>Tu pedido llegara en 3 dias a tu dirección:</span>
        <div className="Success-map">Google Maps</div>
      </div>
    </div>
  );
};

export default Success;

Estilos de Payment

.Payment {
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  grid-row-gap: 1.5em;
  display: grid;
}
.Payment-back {
  margin: 10px 0 0 0;
}
.Payment-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Payment-item .fas {
  margin: 0 0 0 10px;
  color: rgba(0,0,0,0.4);
  cursor: pointer;
}
.Payment-item button {
  background-color: transparent;
  border: none;
  outline: none;
}
.Payment-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.Payment-element h4 {
  margin: 0;
}```

Payment Semantico

export default function Payment() {
  return (
    <main className="Payment">
      <section className="Payment-content">
        <h3>Summary of the order</h3>
        <article className='Payment-button'>
          Boton de pago de paypal
        </article>
      </section>
      <aside className='Payment-sidebar'>

      </aside>
    </main>
  )
}

Success Semantico

export default function Success() {
  return (
    <main className="Succes">
      <section className="Success-content">
        <h2>Jei gracias por tu compraa</h2>
        <span>Tu pedido llegara en 4 dias</span>
        <article className='Success-map'> 
        Google maps

        </article>
      </section>
    </main>
  )
}

Success.css

.Success {
  margin: 0 0 4em 0;
}
.Success-map {
  margin: 10px 0 0 0;
}

Genial

n