// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`disable nft on landing page does not render nft information and card 1`] = `
.c6 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
}

.c41 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
}

.c7 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c10 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c12 {
  color: #0D111C;
}

.c93 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FB118E;
  stroke: #FB118E;
  font-weight: 500;
}

.c93:hover {
  opacity: 0.6;
}

.c93:active {
  opacity: 0.4;
}

.c91 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FB118E;
  stroke: #FB118E;
  font-weight: 500;
}

.c91:hover {
  opacity: 0.6;
}

.c91:active {
  opacity: 0.4;
}

.c84 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c85 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c86 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c78 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  gap: 48px;
  max-width: 1440px;
}

.c79 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.c80 {
  display: none;
}

.c95 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c81 {
  width: 72px;
  height: 72px;
  display: none;
}

.c82 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0 0 0;
}

.c83 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c88 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.c89 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  width: 200px;
  margin: 20px 0 0 0;
}

.c90 {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.c94 {
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
}

.c92 {
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
}

.c87 {
  font-size: 16px;
  line-height: 20px;
  margin: 1rem 0 0 0;
  color: #98A1C0;
}

.c61 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: white url(swapCard.png);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0D111C;
  padding: 24px;
  height: 212px;
  border-radius: 24px;
  border: 1px solid transparent;
  box-shadow: 0px 10px 24px 0px rgba(51,53,72,0.04);
  -webkit-transition: 250ms ease border;
  transition: 250ms ease border;
}

.c61:hover {
  border: 1px solid #98A1C0;
}

.c67 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #F5F6FC url(undefined);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0D111C;
  padding: 24px;
  height: 212px;
  border-radius: 24px;
  border: 1px solid #D2D9EE;
  box-shadow: 0px 10px 24px 0px rgba(51,53,72,0.04);
  -webkit-transition: 250ms ease border;
  transition: 250ms ease border;
}

.c67:hover {
  border: 1px solid #98A1C0;
}

.c62 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c63 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.c64 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;
  line-height: 20px;
  color: #0D111C;
  padding: 0 40px 0 0;
  max-width: 480px;
}

.c68 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
  padding: 0 40px 0 0;
  max-width: 480px;
}

.c65 {
  color: #FB118E;
  font-weight: 500;
  margin: 24px 0 0;
  cursor: pointer;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c65:hover {
  opacity: 0.6;
}

.c69 {
  min-width: 20px;
  min-height: 20px;
  max-height: 48px;
  max-width: 48px;
}

.c44 {
  background-color: transparent;
  bottom: 0;
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: 150ms ease background-color;
  transition: 150ms ease background-color;
  width: 100%;
}

.c24 {
  padding: 16px;
  width: 100%;
  font-weight: 500;
  text-align: center;
  border-radius: 20px;
  outline: none;
  border: 1px solid transparent;
  color: #0D111C;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c24:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c24 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c24 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c75 {
  padding: 16px;
  width: 200px;
  font-weight: 500;
  text-align: center;
  border-radius: 20px;
  outline: none;
  border: 1px solid transparent;
  color: #0D111C;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c75:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c75 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c75 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c42 {
  background-color: #FB118E1f;
  color: #FB118E;
  font-size: 20px;
  font-weight: 600;
}

.c42:focus {
  box-shadow: 0 0 0 1pt #FB118E1f;
  background-color: #FB118E1f;
}

.c42:hover {
  background-color: #FB118E1f;
}

.c42:active {
  box-shadow: 0 0 0 1pt #FB118E1f;
  background-color: #FB118E1f;
}

.c42:hover .c43 {
  background-color: #98A1C014;
}

.c42:active .c43 {
  background-color: #B8C0DC3d;
}

.c42:disabled {
  opacity: 0.4;
}

.c42:disabled:hover {
  cursor: auto;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

.c25 {
  background-color: #F5F6FC;
  color: #7780A0;
  font-size: 16px;
  font-weight: 500;
}

.c25:hover {
  background-color: #d2daf7;
}

.c25:active {
  background-color: #bdc8f3;
}

.c76 {
  background-color: transparent;
  color: #FB118E;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c76:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.c76:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c76:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c76:disabled {
  opacity: 50%;
  cursor: auto;
}

.c70 {
  height: 340px;
  width: 100%;
  border-radius: 32px;
  max-width: 1440px;
  margin: 80px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 32px 48px;
  box-shadow: 0px 10px 24px rgba(51,53,72,0.04);
  background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
}

.c71 {
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.c72 {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}

.c73 {
  margin: 10px 10px 0 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.c74 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c74:hover {
  opacity: 0.6;
}

.c77 {
  color: white;
  border: 1px solid white;
}

.c37 {
  display: grid;
  grid-auto-rows: auto;
  grid-row-gap: 4px;
}

.c34 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.c29 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
  box-shadow: 0 0 1px white;
}

.c28 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c21 {
  color: #0D111C;
  width: 0;
  position: relative;
  font-weight: 400;
  outline: none;
  border: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: transparent;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px;
  -webkit-appearance: textfield;
  text-align: right;
}

.c21::-webkit-search-decoration {
  -webkit-appearance: none;
}

.c21 [type='number'] {
  -moz-appearance: textfield;
}

.c21::-webkit-outer-spin-button,
.c21::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.c21::-webkit-input-placeholder {
  color: #98A1C0;
}

.c21::-moz-placeholder {
  color: #98A1C0;
}

.c21:-ms-input-placeholder {
  color: #98A1C0;
}

.c21::placeholder {
  color: #98A1C0;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  position: relative;
  border-radius: 20px;
  z-index: 1;
  width: initial;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
  will-change: height;
}

.c19 {
  min-height: 44px;
  border-radius: 20px;
  width: initial;
}

.c26 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #E8ECFB;
  opacity: 1;
  box-shadow: none;
  color: #0D111C;
  cursor: pointer;
  height: unset;
  border-radius: 16px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  font-size: 24px;
  font-weight: 400;
  width: initial;
  padding: 4px 8px 4px 4px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  visibility: visible;
}

.c26:hover,
.c26:active {
  background-color: #E8ECFB;
}

.c26:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c26:hover:before {
  background-color: #98A1C014;
}

.c26:active:before {
  background-color: #B8C0DC3d;
}

.c39 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FB118E;
  opacity: 1;
  box-shadow: 0px 6px 10px rgba(0,0,0,0.075);
  color: #FFFFFF;
  cursor: pointer;
  height: unset;
  border-radius: 16px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  font-size: 24px;
  font-weight: 400;
  width: initial;
  padding: 6px 6px 6px 8px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  visibility: visible;
}

.c39:hover,
.c39:active {
  background-color: #FB118E;
}

.c39:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c39:hover:before {
  background-color: #98A1C014;
}

.c39:active:before {
  background-color: #B8C0DC3d;
}

.c20 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c32 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #7780A0;
  font-size: 0.75rem;
  line-height: 1rem;
}

.c32 span:hover {
  cursor: pointer;
  color: #495068;
}

.c33 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 20px;
  padding: 8px 0px 0px 0px;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.c31 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c31 path {
  stroke: #0D111C;
  stroke-width: 2px;
}

.c40 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c40 path {
  stroke: #FFFFFF;
  stroke-width: 2px;
}

.c30 {
  margin: 0 0.25rem 0 0.25rem;
  font-size: 20px;
  font-weight: 600;
}

.c22 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  text-align: left;
  font-size: 36px;
  line-height: 44px;
  font-variant: small-caps;
}

.c3 {
  padding: 68px 8px 0px;
  max-width: 480px;
  width: 100%;
}

.c4 {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #D2D9EE;
  padding: 8px;
  padding-top: 12px;
  z-index: 1;
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition: transform 250ms ease;
  transition: transform 250ms ease;
}

.c4:hover {
  border: 1px solid #D2D9EE;
}

.c35 {
  border-radius: 12px;
  height: 40px;
  width: 40px;
  position: relative;
  margin-top: -18px;
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E8ECFB;
  border: 4px solid;
  border-color: #FFFFFF;
  z-index: 2;
}

.c35:hover {
  cursor: pointer;
  opacity: 0.8;
}

.c16 {
  height: 20px;
  width: 20px;
}

.c16 > * {
  stroke: #7780A0;
}

.c14 {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.c14:not([disabled]):hover {
  opacity: 0.7;
}

.c15 {
  padding: 6px 12px;
  border-radius: 16px;
}

.c13 {
  position: relative;
}

.c9 {
  margin-bottom: 10px;
  color: #7780A0;
}

.c11 {
  padding: 0 12px;
  gap: 16px;
}

.c36 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.c17 {
  position: relative;
  background-color: #F5F6FC;
  border-radius: 12px;
  padding: 16px;
  color: #7780A0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.c17:before {
  box-sizing: border-box;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: '';
  border: 1px solid #F5F6FC;
}

.c17:hover:before {
  border-color: #98A1C014;
}

.c17:focus-within:before {
  border-color: #B8C0DC3d;
}

.c38 {
  border-bottom: 1px solid #FFFFFF;
}

.c0 {
  position: absolute;
  top: 0;
  padding: 72px 0px 0px 0px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-scroll-behavior: smooth;
  -moz-scroll-behavior: smooth;
  -ms-scroll-behavior: smooth;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.c45 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  width: 100%;
  min-height: 550px;
  background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%);
  z-index: 990;
  pointer-events: none;
  height: calc(100vh - 52px);
}

.c46 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-y: hidden;
  height: calc(100vh - 52px);
}

.c47 {
  position: absolute;
  top: 68px;
  bottom: 0;
  background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%);
  -webkit-filter: blur(72px);
  filter: blur(72px);
  border-radius: 24px;
  max-width: 480px;
  width: 100%;
  height: 100%;
}

.c48 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  padding: 0 0 40px;
  max-width: min(720px,90%);
  min-height: 500px;
  z-index: 990;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
  height: calc(100vh - 124px);
  pointer-events: none;
}

.c48 * {
  pointer-events: auto;
}

.c49 {
  color: transparent;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
  background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.c51 {
  color: #7780A0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  max-width: 600px;
  margin: 0 0 32px;
}

.c50 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c53 {
  padding: 16px 0px;
  border-radius: 24px;
}

.c54 {
  background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
  border: none;
  color: #FFFFFF;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.c54:hover {
  box-shadow: 0px 0px 16px 0px #ff00c7;
}

.c55 {
  margin: 0px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c52 {
  max-width: 300px;
  width: 100%;
  pointer-events: auto;
}

.c56 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #98A1C0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  pointer-events: auto;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c56:hover {
  opacity: 0.6;
}

.c57 {
  margin-left: 14px;
  size: 20px;
}

.c59 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 24px 5rem;
  width: 100%;
  background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
}

.c60 {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 24px 0 0;
  max-width: 1440px;
  -webkit-scroll-margin: 72px 0 0;
  -moz-scroll-margin: 72px 0 0;
  -ms-scroll-margin: 72px 0 0;
  scroll-margin: 72px 0 0;
  grid-template-columns: 1fr;
}

.c66 {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 24px 0 0;
  max-width: 1440px;
  -webkit-scroll-margin: 72px 0 0;
  -moz-scroll-margin: 72px 0 0;
  -ms-scroll-margin: 72px 0 0;
  scroll-margin: 72px 0 0;
  grid-template-columns: 1fr;
}

.c1 {
  height: calc(100vh - 52px);
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
}

.c5 * {
  pointer-events: none;
}

.c5:hover {
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition: transform 250ms ease;
  transition: transform 250ms ease;
}

.c5:hover {
  border: 1px solid #FB118E;
}

.c2 {
  -webkit-text-decoration: none;
  text-decoration: none;
  max-width: 480px;
  width: 100%;
}

.c58 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  color: #7780A0;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
}

.c58:hover {
  color: #98A1C0;
}

@media screen and (min-width:1024px) {
  .c78 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media screen and (min-width:1024px) {
  .c80 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (min-width:1024px) {
  .c95 {
    display: none;
  }
}

@media screen and (min-width:1024px) {
  .c81 {
    display: block;
  }
}

@media screen and (min-width:1280px) {
  .c88 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
  }
}

@media screen and (min-width:1280px) {
  .c89 {
    margin: 0;
  }
}

@media screen and (min-width:640px) {
  .c61 {
    height: 360px;
  }
}

@media screen and (min-width:1280px) {
  .c61 {
    padding: 32px;
  }
}

@media screen and (min-width:640px) {
  .c67 {
    height: 260px;
  }
}

@media screen and (min-width:1280px) {
  .c67 {
    padding: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c63 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media screen and (min-width:1280px) {
  .c64 {
    font-size: 20px;
    line-height: 28px;
    max-width: 480px;
  }
}

@media screen and (min-width:1280px) {
  .c68 {
    font-size: 20px;
    line-height: 28px;
    max-width: 480px;
  }
}

@media screen and (min-width:1024px) {
  .c70 {
    height: 140px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media screen and (min-width:1280px) {
  .c72 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media screen and (min-width:1280px) {
  .c73 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (min-width:1024px) {
  .c74 {
    width: auto;
  }
}

@media only screen and (max-width:768px) {
  .c3 {
    padding-top: 48px;
  }
}

@media only screen and (max-width:640px) {
  .c3 {
    padding-top: 20px;
  }
}

@media screen and (min-width:768px) {
  .c45 {
    height: 100vh;
  }
}

@media screen and (min-width:768px) {
  .c46 {
    height: 100vh;
  }
}

@media screen and (min-width:640px) {
  .c49 {
    font-size: 48px;
    line-height: 56px;
  }
}

@media screen and (min-width:768px) {
  .c49 {
    font-size: 64px;
    line-height: 72px;
  }
}

@media screen and (min-width:768px) {
  .c51 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (min-width:640px) {
  .c55 {
    font-size: 20px;
  }
}

@media screen and (min-width:640px) {
  .c56 {
    visibility: visible;
  }
}

@media screen and (min-width:768px) {
  .c59 {
    padding: 0 96px 5rem;
  }
}

@media screen and (min-width:640px) {
  .c60 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c60 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:640px) {
  .c66 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c66 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}

<div>
  <div
    class="c0"
    data-testid="landing-page"
  >
    <div
      class="c1"
    >
      <a
        class="c2"
        href="#/swap"
      >
        <div
          class="c3"
        >
          <main
            class="c4 c5"
            id="swap-page"
          >
            <div
              class="c6 c7 c8 c9"
            >
              <div
                class="c6 c7 c10 c11"
              >
                <div
                  class="c12 css-rjqmed"
                >
                  Swap
                </div>
              </div>
              <div
                class="c6 c7 c10"
              >
                <div
                  class="c13"
                >
                  <button
                    aria-label="Transaction Settings"
                    class="c14"
                    data-testid="open-settings-dialog-button"
                    id="open-settings-dialog-button"
                  >
                    <div
                      class="c6 c7 c15"
                    >
                      <svg
                        class="c16"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          r="3"
                        />
                        <path
                          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                        />
                      </svg>
                    </div>
                  </button>
                </div>
              </div>
            </div>
            <div
              style="display: relative;"
            >
              <div
                class="c17"
              >
                <div
                  class="c18"
                  id="swap-currency-input"
                  label="[object Object]"
                >
                  <div
                    class="c19"
                  >
                    <div
                      class="c20"
                    >
                      <input
                        autocomplete="off"
                        autocorrect="off"
                        class="c21 c22 token-amount-input"
                        inputmode="decimal"
                        maxlength="79"
                        minlength="1"
                        pattern="^[0-9]*[.,]?[0-9]*$"
                        placeholder="0"
                        spellcheck="false"
                        type="text"
                        value=""
                      />
                      <button
                        class="c23 c24 c25 c26 open-currency-select-button"
                      >
                        <span
                          class="c27"
                        >
                          <div
                            class="c6 c7 c10"
                          >
                            <div
                              class="c28"
                              style="margin-right: 2px;"
                            >
                              <img
                                alt="ETH logo"
                                class="c29"
                                src="ethereum-logo.png"
                              />
                            </div>
                            <span
                              class="c30 token-symbol-container"
                            >
                              ETH
                            </span>
                          </div>
                          <svg
                            class="c31"
                          >
                            dropdown.svg
                          </svg>
                        </span>
                      </button>
                    </div>
                    <div
                      class="c32 c33"
                    >
                      <div
                        class="c6 c7 c8"
                      >
                        <div
                          class="c34"
                        />
                        <span />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c35"
              >
                <div
                  class="c36"
                  color="#0D111C"
                  data-testid="swap-currency-button"
                >
                  <svg
                    fill="none"
                    height="16"
                    stroke="#98A1C0"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="16"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="12"
                      x2="12"
                      y1="5"
                      y2="19"
                    />
                    <polyline
                      points="19 12 12 19 5 12"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="c37"
            >
              <div>
                <div
                  class="c17 c38"
                >
                  <div
                    class="c18"
                    id="swap-currency-output"
                    label="[object Object]"
                  >
                    <div
                      class="c19"
                    >
                      <div
                        class="c20"
                      >
                        <input
                          autocomplete="off"
                          autocorrect="off"
                          class="c21 c22 token-amount-input"
                          inputmode="decimal"
                          maxlength="79"
                          minlength="1"
                          pattern="^[0-9]*[.,]?[0-9]*$"
                          placeholder="0"
                          spellcheck="false"
                          type="text"
                          value=""
                        />
                        <button
                          class="c23 c24 c25 c39 open-currency-select-button"
                        >
                          <span
                            class="c27"
                          >
                            <div
                              class="c6 c7 c10"
                            >
                              <span
                                class="c30 token-symbol-container"
                              >
                                Select token
                              </span>
                            </div>
                            <svg
                              class="c40"
                            >
                              dropdown.svg
                            </svg>
                          </span>
                        </button>
                      </div>
                      <div
                        class="c32 c33"
                      >
                        <div
                          class="c6 c7 c8"
                        >
                          <div
                            class="c34"
                          />
                          <span />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <button
                  class="c41 c24 c42"
                  font-weight="600"
                >
                  <div
                    class="c43 c44"
                  />
                  Connect Wallet
                </button>
              </div>
            </div>
          </main>
        </div>
      </a>
    </div>
    <div
      class="c45"
    />
    <div
      class="c46"
    >
      <div
        class="c47"
      />
    </div>
    <div
      class="c48"
    >
      <h1
        class="c49"
      >
        Trade crypto with confidence
      </h1>
      <div
        class="c50"
      >
        <div
          class="c51"
        >
          Buy, sell, and explore tokens
        </div>
      </div>
      <span
        class="1 c52"
      >
        <a
          class="c2 c24 c53 c54"
          href="#/swap"
        >
          <p
            class="0 c55"
          >
            Get started
          </p>
        </a>
      </span>
      <div
        class="2 c56"
      >
        Learn more
        <svg
          class="3 c57"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="12"
            cy="12"
            r="10"
          />
          <polyline
            points="8 12 12 16 16 12"
          />
          <line
            x1="12"
            x2="12"
            y1="8"
            y2="16"
          />
        </svg>
      </div>
      <a
        class="9 c58"
        href="https://wallet.uniswap.org/"
      >
        <svg
          height="20"
          viewBox="0 0 814 1000"
          width="20"
        >
          <path
            d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
            fill="currentColor"
          />
        </svg>
        Download the Uniswap Wallet for iOS
      </a>
    </div>
    <div
      class="4 c59"
    >
      <div
        class="5 c60"
        cols="1"
      >
        <a
          class="c61"
          href="#/swap"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Swap tokens
            </div>
          </div>
          <div
            class="c64"
            type="Primary"
          >
            Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
            <div
              class="c64 c65"
              type="Primary"
            >
              Trade Tokens
            </div>
          </div>
        </a>
      </div>
      <div
        class="5 c66"
        cols="3"
      >
        <a
          class="c67"
          href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
          rel="noopenener noreferrer"
          target="_blank"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Buy crypto
            </div>
            <svg
              fill="none"
              height="48"
              stroke="#98A1C0"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="48"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="12"
                x2="12"
                y1="1"
                y2="23"
              />
              <path
                d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
              />
            </svg>
          </div>
          <div
            class="c68"
            type="Secondary"
          >
            Buy crypto with your credit card or bank account at the best rates.
            <div
              class="c68 c65"
              type="Secondary"
            >
              Buy now
            </div>
          </div>
        </a>
        <a
          class="c67"
          href="#/pools"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Earn
            </div>
            <img
              alt="Analytics"
              class="c69"
              src="aboutArrowLight.png"
            />
          </div>
          <div
            class="c68"
            type="Secondary"
          >
            Provide liquidity to pools on Uniswap and earn fees on swaps.
            <div
              class="c68 c65"
              type="Secondary"
            >
              Provide liquidity
            </div>
          </div>
        </a>
        <a
          class="c67"
          href="https://docs.uniswap.org"
          rel="noopenener noreferrer"
          target="_blank"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Build dApps
            </div>
            <svg
              fill="none"
              height="48"
              stroke="#98A1C0"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="48"
              xmlns="http://www.w3.org/2000/svg"
            >
              <polyline
                points="4 17 10 11 4 5"
              />
              <line
                x1="12"
                x2="20"
                y1="19"
                y2="19"
              />
            </svg>
          </div>
          <div
            class="c68"
            type="Secondary"
          >
            Build apps and tools on the largest DeFi protocol on Ethereum.
            <div
              class="c68 c65"
              type="Secondary"
            >
              Developer docs
            </div>
          </div>
        </a>
      </div>
      <div
        class="c70"
      >
        <div
          class="c71"
        >
          <div
            class="c72"
          >
            Powered by the Uniswap Protocol
          </div>
          <div
            class="c73"
          >
            The leading decentralized crypto trading protocol, governed by a global community.
          </div>
        </div>
        <div
          class="c74"
        >
          <a
            class="c75 c76 c77"
            href="https://uniswap.org"
            rel="noopener noreferrer"
            target="_blank"
            width="200px"
          >
            Learn more
          </a>
        </div>
      </div>
      <div
        class="c78"
      >
        <div
          class="c79 c80"
        >
          <img
            alt="Uniswap Logo"
            class="c81"
            src="unicornEmbossLight.png"
          />
          <div
            class="c82"
          >
            <a
              class="c83"
              href="https://discord.gg/FCfyBSbCU5"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c84"
                size="32"
              >
                discord.svg
              </svg>
            </a>
            <a
              class="c83"
              href="https://twitter.com/uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c85"
                size="32"
              >
                twitter-safe.svg
              </svg>
            </a>
            <a
              class="c83"
              href="https://github.com/Uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c86"
                size="32"
              >
                github.svg
              </svg>
            </a>
          </div>
          <span
            class="2 c87"
          >
            © 
            2023
             Uniswap Labs
          </span>
        </div>
        <div
          class="c88"
        >
          <div
            class="c89"
          >
            <span
              class="c90"
            >
              App
            </span>
            <a
              class="1 c91 c92"
              href="#/swap"
            >
              Swap
            </a>
            <a
              class="1 c91 c92"
              href="#/tokens"
            >
              Tokens
            </a>
            <a
              class="1 c91 c92"
              href="#/pools"
            >
              Pools
            </a>
          </div>
          <div
            class="c89"
          >
            <span
              class="c90"
            >
              Protocol
            </span>
            <a
              class="c93 0 c94"
              href="https://uniswap.org/community"
              rel="noopener noreferrer"
              target="_blank"
            >
              Community
            </a>
            <a
              class="c93 0 c94"
              href="https://uniswap.org/governance"
              rel="noopener noreferrer"
              target="_blank"
            >
              Governance
            </a>
            <a
              class="c93 0 c94"
              href="https://uniswap.org/developers"
              rel="noopener noreferrer"
              target="_blank"
            >
              Developers
            </a>
          </div>
          <div
            class="c89"
          >
            <span
              class="c90"
            >
              Company
            </span>
            <a
              class="c93 0 c94"
              href="https://boards.greenhouse.io/uniswaplabs"
              rel="noopener noreferrer"
              target="_blank"
            >
              Careers
            </a>
            <a
              class="c93 0 c94"
              href="https://uniswap.org/blog"
              rel="noopener noreferrer"
              target="_blank"
            >
              Blog
            </a>
          </div>
          <div
            class="c89"
          >
            <span
              class="c90"
            >
              Get Help
            </span>
            <a
              class="c93 0 c94"
              href="https://support.uniswap.org/hc/en-us/requests/new"
              rel="noopener noreferrer"
              target="_blank"
            >
              Contact Us
            </a>
            <a
              class="c93 0 c94"
              href="https://support.uniswap.org/hc/en-us"
              rel="noopener noreferrer"
              target="_blank"
            >
              Help Center
            </a>
          </div>
        </div>
        <div
          class="c79 c95"
        >
          <img
            alt="Uniswap Logo"
            class="c81"
            src="unicornEmbossLight.png"
          />
          <div
            class="c82"
          >
            <a
              class="c83"
              href="https://discord.gg/FCfyBSbCU5"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c84"
                size="32"
              >
                discord.svg
              </svg>
            </a>
            <a
              class="c83"
              href="https://twitter.com/uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c85"
                size="32"
              >
                twitter-safe.svg
              </svg>
            </a>
            <a
              class="c83"
              href="https://github.com/Uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c86"
                size="32"
              >
                github.svg
              </svg>
            </a>
          </div>
          <span
            class="2 c87"
          >
            © 
            2023
             Uniswap Labs
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`disable nft on landing page renders nft information and card 1`] = `
.c6 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
}

.c23 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
}

.c41 {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  text-align: center;
  line-height: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: inherit;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
  background-color: primary;
  border: 0;
  border-radius: 4px;
  font-weight: 600;
}

.c7 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c8 {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c10 {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c12 {
  color: #0D111C;
}

.c94 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FB118E;
  stroke: #FB118E;
  font-weight: 500;
}

.c94:hover {
  opacity: 0.6;
}

.c94:active {
  opacity: 0.4;
}

.c92 {
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition-duration: 125ms;
  transition-duration: 125ms;
  color: #FB118E;
  stroke: #FB118E;
  font-weight: 500;
}

.c92:hover {
  opacity: 0.6;
}

.c92:active {
  opacity: 0.4;
}

.c85 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c86 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c87 {
  height: 32px;
  width: 32px;
  fill: #98A1C0;
  opacity: 1;
}

.c79 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  gap: 48px;
  max-width: 1440px;
}

.c80 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.c81 {
  display: none;
}

.c96 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c82 {
  width: 72px;
  height: 72px;
  display: none;
}

.c83 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin: 20px 0 0 0;
}

.c84 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c89 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.c90 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 12px;
  width: 200px;
  margin: 20px 0 0 0;
}

.c91 {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.c95 {
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
}

.c93 {
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
}

.c88 {
  font-size: 16px;
  line-height: 20px;
  margin: 1rem 0 0 0;
  color: #98A1C0;
}

.c61 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: white url(swapCard.png);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0D111C;
  padding: 24px;
  height: 212px;
  border-radius: 24px;
  border: 1px solid transparent;
  box-shadow: 0px 10px 24px 0px rgba(51,53,72,0.04);
  -webkit-transition: 250ms ease border;
  transition: 250ms ease border;
}

.c61:hover {
  border: 1px solid #98A1C0;
}

.c66 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: white url(nftCard.png);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0D111C;
  padding: 24px;
  height: 212px;
  border-radius: 24px;
  border: 1px solid transparent;
  box-shadow: 0px 10px 24px 0px rgba(51,53,72,0.04);
  -webkit-transition: 250ms ease border;
  transition: 250ms ease border;
}

.c66:hover {
  border: 1px solid #98A1C0;
}

.c68 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background: #F5F6FC url(undefined);
  background-size: auto 100%;
  background-position: right;
  background-repeat: no-repeat;
  background-origin: border-box;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: #0D111C;
  padding: 24px;
  height: 212px;
  border-radius: 24px;
  border: 1px solid #D2D9EE;
  box-shadow: 0px 10px 24px 0px rgba(51,53,72,0.04);
  -webkit-transition: 250ms ease border;
  transition: 250ms ease border;
}

.c68:hover {
  border: 1px solid #98A1C0;
}

.c62 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c63 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.c64 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;
  line-height: 20px;
  color: #0D111C;
  padding: 0 40px 0 0;
  max-width: 480px;
}

.c69 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  font-size: 16px;
  line-height: 20px;
  color: #7780A0;
  padding: 0 40px 0 0;
  max-width: 480px;
}

.c65 {
  color: #FB118E;
  font-weight: 500;
  margin: 24px 0 0;
  cursor: pointer;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c65:hover {
  opacity: 0.6;
}

.c70 {
  min-width: 20px;
  min-height: 20px;
  max-height: 48px;
  max-width: 48px;
}

.c44 {
  background-color: transparent;
  bottom: 0;
  border-radius: inherit;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: 150ms ease background-color;
  transition: 150ms ease background-color;
  width: 100%;
}

.c24 {
  padding: 16px;
  width: 100%;
  font-weight: 500;
  text-align: center;
  border-radius: 20px;
  outline: none;
  border: 1px solid transparent;
  color: #0D111C;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c24:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c24 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c24 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c76 {
  padding: 16px;
  width: 200px;
  font-weight: 500;
  text-align: center;
  border-radius: 20px;
  outline: none;
  border: 1px solid transparent;
  color: #0D111C;
  -webkit-text-decoration: none;
  text-decoration: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
  will-change: transform;
  -webkit-transition: -webkit-transform 450ms ease;
  -webkit-transition: transform 450ms ease;
  transition: transform 450ms ease;
  -webkit-transform: perspective(1px) translateZ(0);
  -ms-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
}

.c76:disabled {
  opacity: 50%;
  cursor: auto;
  pointer-events: none;
}

.c76 > * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.c76 > a {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c42 {
  background-color: #FB118E1f;
  color: #FB118E;
  font-size: 20px;
  font-weight: 600;
}

.c42:focus {
  box-shadow: 0 0 0 1pt #FB118E1f;
  background-color: #FB118E1f;
}

.c42:hover {
  background-color: #FB118E1f;
}

.c42:active {
  box-shadow: 0 0 0 1pt #FB118E1f;
  background-color: #FB118E1f;
}

.c42:hover .c43 {
  background-color: #98A1C014;
}

.c42:active .c43 {
  background-color: #B8C0DC3d;
}

.c42:disabled {
  opacity: 0.4;
}

.c42:disabled:hover {
  cursor: auto;
  background-color: transparent;
  box-shadow: none;
  border: 1px solid transparent;
  outline: none;
}

.c25 {
  background-color: #F5F6FC;
  color: #7780A0;
  font-size: 16px;
  font-weight: 500;
}

.c25:hover {
  background-color: #d2daf7;
}

.c25:active {
  background-color: #bdc8f3;
}

.c77 {
  background-color: transparent;
  color: #FB118E;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c77:focus {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.c77:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c77:active {
  -webkit-text-decoration: none;
  text-decoration: none;
}

.c77:disabled {
  opacity: 50%;
  cursor: auto;
}

.c71 {
  height: 340px;
  width: 100%;
  border-radius: 32px;
  max-width: 1440px;
  margin: 80px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 32px 48px;
  box-shadow: 0px 10px 24px rgba(51,53,72,0.04);
  background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
}

.c72 {
  color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.c73 {
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}

.c74 {
  margin: 10px 10px 0 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

.c75 {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c75:hover {
  opacity: 0.6;
}

.c78 {
  color: white;
  border: 1px solid white;
}

.c37 {
  display: grid;
  grid-auto-rows: auto;
  grid-row-gap: 4px;
}

.c34 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.c29 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(white 60%,#ffffff00 calc(70% + 1px));
  box-shadow: 0 0 1px white;
}

.c28 {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.c21 {
  color: #0D111C;
  width: 0;
  position: relative;
  font-weight: 400;
  outline: none;
  border: none;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  background-color: transparent;
  font-size: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0px;
  -webkit-appearance: textfield;
  text-align: right;
}

.c21::-webkit-search-decoration {
  -webkit-appearance: none;
}

.c21 [type='number'] {
  -moz-appearance: textfield;
}

.c21::-webkit-outer-spin-button,
.c21::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.c21::-webkit-input-placeholder {
  color: #98A1C0;
}

.c21::-moz-placeholder {
  color: #98A1C0;
}

.c21:-ms-input-placeholder {
  color: #98A1C0;
}

.c21::placeholder {
  color: #98A1C0;
}

.c18 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  position: relative;
  border-radius: 20px;
  z-index: 1;
  width: initial;
  -webkit-transition: height 1s ease;
  transition: height 1s ease;
  will-change: height;
}

.c19 {
  min-height: 44px;
  border-radius: 20px;
  width: initial;
}

.c26 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #E8ECFB;
  opacity: 1;
  box-shadow: none;
  color: #0D111C;
  cursor: pointer;
  height: unset;
  border-radius: 16px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  font-size: 24px;
  font-weight: 400;
  width: initial;
  padding: 4px 8px 4px 4px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  visibility: visible;
}

.c26:hover,
.c26:active {
  background-color: #E8ECFB;
}

.c26:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c26:hover:before {
  background-color: #98A1C014;
}

.c26:active:before {
  background-color: #B8C0DC3d;
}

.c39 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #FB118E;
  opacity: 1;
  box-shadow: 0px 6px 10px rgba(0,0,0,0.075);
  color: #FFFFFF;
  cursor: pointer;
  height: unset;
  border-radius: 16px;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
  font-size: 24px;
  font-weight: 400;
  width: initial;
  padding: 6px 6px 6px 8px;
  gap: 8px;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-left: 12px;
  visibility: visible;
}

.c39:hover,
.c39:active {
  background-color: #FB118E;
}

.c39:before {
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
}

.c39:hover:before {
  background-color: #98A1C014;
}

.c39:active:before {
  background-color: #B8C0DC3d;
}

.c20 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c32 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #7780A0;
  font-size: 0.75rem;
  line-height: 1rem;
}

.c32 span:hover {
  cursor: pointer;
  color: #495068;
}

.c33 {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 20px;
  padding: 8px 0px 0px 0px;
}

.c27 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.c31 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c31 path {
  stroke: #0D111C;
  stroke-width: 2px;
}

.c40 {
  margin: 0 0.25rem 0 0.35rem;
  height: 35%;
  margin-left: 8px;
}

.c40 path {
  stroke: #FFFFFF;
  stroke-width: 2px;
}

.c30 {
  margin: 0 0.25rem 0 0.25rem;
  font-size: 20px;
  font-weight: 600;
}

.c22 {
  -webkit-filter: none;
  filter: none;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
  text-align: left;
  font-size: 36px;
  line-height: 44px;
  font-variant: small-caps;
}

.c3 {
  padding: 68px 8px 0px;
  max-width: 480px;
  width: 100%;
}

.c4 {
  position: relative;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #D2D9EE;
  padding: 8px;
  padding-top: 12px;
  z-index: 1;
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition: transform 250ms ease;
  transition: transform 250ms ease;
}

.c4:hover {
  border: 1px solid #D2D9EE;
}

.c35 {
  border-radius: 12px;
  height: 40px;
  width: 40px;
  position: relative;
  margin-top: -18px;
  margin-bottom: -18px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E8ECFB;
  border: 4px solid;
  border-color: #FFFFFF;
  z-index: 2;
}

.c35:hover {
  cursor: pointer;
  opacity: 0.8;
}

.c16 {
  height: 20px;
  width: 20px;
}

.c16 > * {
  stroke: #7780A0;
}

.c14 {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

.c14:not([disabled]):hover {
  opacity: 0.7;
}

.c15 {
  padding: 6px 12px;
  border-radius: 16px;
}

.c13 {
  position: relative;
}

.c9 {
  margin-bottom: 10px;
  color: #7780A0;
}

.c11 {
  padding: 0 12px;
  gap: 16px;
}

.c36 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.c17 {
  position: relative;
  background-color: #F5F6FC;
  border-radius: 12px;
  padding: 16px;
  color: #7780A0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.c17:before {
  box-sizing: border-box;
  background-size: 100%;
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: '';
  border: 1px solid #F5F6FC;
}

.c17:hover:before {
  border-color: #98A1C014;
}

.c17:focus-within:before {
  border-color: #B8C0DC3d;
}

.c38 {
  border-bottom: 1px solid #FFFFFF;
}

.c0 {
  position: absolute;
  top: 0;
  padding: 72px 0px 0px 0px;
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-scroll-behavior: smooth;
  -moz-scroll-behavior: smooth;
  -ms-scroll-behavior: smooth;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.c45 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  width: 100%;
  min-height: 550px;
  background: linear-gradient(rgba(255,255,255,0) 0%,rgb(255 255 255 /100%) 45%);
  z-index: 990;
  pointer-events: none;
  height: calc(100vh - 52px);
}

.c46 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-y: hidden;
  height: calc(100vh - 52px);
}

.c47 {
  position: absolute;
  top: 68px;
  bottom: 0;
  background: radial-gradient(72.04% 72.04% at 50% 3.99%,#ff37eb 0%,rgba(166,151,255,0) 100%);
  -webkit-filter: blur(72px);
  filter: blur(72px);
  border-radius: 24px;
  max-width: 480px;
  width: 100%;
  height: 100%;
}

.c48 {
  position: absolute;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  width: 100%;
  padding: 0 0 40px;
  max-width: min(720px,90%);
  min-height: 500px;
  z-index: 990;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
  height: calc(100vh - 124px);
  pointer-events: none;
}

.c48 * {
  pointer-events: auto;
}

.c49 {
  color: transparent;
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px;
  background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.c51 {
  color: #7780A0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  max-width: 600px;
  margin: 0 0 32px;
}

.c50 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.c53 {
  padding: 16px 0px;
  border-radius: 24px;
}

.c54 {
  background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
  border: none;
  color: #FFFFFF;
  -webkit-transition: all 250ms ease;
  transition: all 250ms ease;
}

.c54:hover {
  box-shadow: 0px 0px 16px 0px #ff00c7;
}

.c55 {
  margin: 0px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.c52 {
  max-width: 300px;
  width: 100%;
  pointer-events: auto;
}

.c56 {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #98A1C0;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  margin: 36px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: hidden;
  pointer-events: auto;
  -webkit-transition: 250ms ease opacity;
  transition: 250ms ease opacity;
}

.c56:hover {
  opacity: 0.6;
}

.c57 {
  margin-left: 14px;
  size: 20px;
}

.c59 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 24px 5rem;
  width: 100%;
  background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
}

.c60 {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 24px 0 0;
  max-width: 1440px;
  -webkit-scroll-margin: 72px 0 0;
  -moz-scroll-margin: 72px 0 0;
  -ms-scroll-margin: 72px 0 0;
  scroll-margin: 72px 0 0;
  grid-template-columns: 1fr;
}

.c67 {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 24px 0 0;
  max-width: 1440px;
  -webkit-scroll-margin: 72px 0 0;
  -moz-scroll-margin: 72px 0 0;
  -ms-scroll-margin: 72px 0 0;
  scroll-margin: 72px 0 0;
  grid-template-columns: 1fr;
}

.c1 {
  height: calc(100vh - 52px);
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1;
}

.c5 * {
  pointer-events: none;
}

.c5:hover {
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition: -webkit-transform 250ms ease;
  -webkit-transition: transform 250ms ease;
  transition: transform 250ms ease;
}

.c5:hover {
  border: 1px solid #FB118E;
}

.c2 {
  -webkit-text-decoration: none;
  text-decoration: none;
  max-width: 480px;
  width: 100%;
}

.c58 {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  color: #7780A0;
  -webkit-text-decoration: none;
  text-decoration: none;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
}

.c58:hover {
  color: #98A1C0;
}

@media screen and (min-width:1024px) {
  .c79 {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media screen and (min-width:1024px) {
  .c81 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (min-width:1024px) {
  .c96 {
    display: none;
  }
}

@media screen and (min-width:1024px) {
  .c82 {
    display: block;
  }
}

@media screen and (min-width:1280px) {
  .c89 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 24px;
  }
}

@media screen and (min-width:1280px) {
  .c90 {
    margin: 0;
  }
}

@media screen and (min-width:640px) {
  .c61 {
    height: 360px;
  }
}

@media screen and (min-width:1280px) {
  .c61 {
    padding: 32px;
  }
}

@media screen and (min-width:640px) {
  .c66 {
    height: 360px;
  }
}

@media screen and (min-width:1280px) {
  .c66 {
    padding: 32px;
  }
}

@media screen and (min-width:640px) {
  .c68 {
    height: 260px;
  }
}

@media screen and (min-width:1280px) {
  .c68 {
    padding: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c63 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media screen and (min-width:1280px) {
  .c64 {
    font-size: 20px;
    line-height: 28px;
    max-width: 480px;
  }
}

@media screen and (min-width:1280px) {
  .c69 {
    font-size: 20px;
    line-height: 28px;
    max-width: 480px;
  }
}

@media screen and (min-width:1024px) {
  .c71 {
    height: 140px;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

@media screen and (min-width:1280px) {
  .c73 {
    font-size: 28px;
    line-height: 36px;
  }
}

@media screen and (min-width:1280px) {
  .c74 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (min-width:1024px) {
  .c75 {
    width: auto;
  }
}

@media only screen and (max-width:768px) {
  .c3 {
    padding-top: 48px;
  }
}

@media only screen and (max-width:640px) {
  .c3 {
    padding-top: 20px;
  }
}

@media screen and (min-width:768px) {
  .c45 {
    height: 100vh;
  }
}

@media screen and (min-width:768px) {
  .c46 {
    height: 100vh;
  }
}

@media screen and (min-width:640px) {
  .c49 {
    font-size: 48px;
    line-height: 56px;
  }
}

@media screen and (min-width:768px) {
  .c49 {
    font-size: 64px;
    line-height: 72px;
  }
}

@media screen and (min-width:768px) {
  .c51 {
    font-size: 20px;
    line-height: 28px;
  }
}

@media screen and (min-width:640px) {
  .c55 {
    font-size: 20px;
  }
}

@media screen and (min-width:640px) {
  .c56 {
    visibility: visible;
  }
}

@media screen and (min-width:768px) {
  .c59 {
    padding: 0 96px 5rem;
  }
}

@media screen and (min-width:640px) {
  .c60 {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c60 {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:640px) {
  .c67 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media screen and (min-width:1024px) {
  .c67 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }
}

<div>
  <div
    class="c0"
    data-testid="landing-page"
  >
    <div
      class="c1"
    >
      <a
        class="c2"
        href="#/swap"
      >
        <div
          class="c3"
        >
          <main
            class="c4 c5"
            id="swap-page"
          >
            <div
              class="c6 c7 c8 c9"
            >
              <div
                class="c6 c7 c10 c11"
              >
                <div
                  class="c12 css-rjqmed"
                >
                  Swap
                </div>
              </div>
              <div
                class="c6 c7 c10"
              >
                <div
                  class="c13"
                >
                  <button
                    aria-label="Transaction Settings"
                    class="c14"
                    data-testid="open-settings-dialog-button"
                    id="open-settings-dialog-button"
                  >
                    <div
                      class="c6 c7 c15"
                    >
                      <svg
                        class="c16"
                        fill="none"
                        height="24"
                        stroke="currentColor"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        viewBox="0 0 24 24"
                        width="24"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <circle
                          cx="12"
                          cy="12"
                          r="3"
                        />
                        <path
                          d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
                        />
                      </svg>
                    </div>
                  </button>
                </div>
              </div>
            </div>
            <div
              style="display: relative;"
            >
              <div
                class="c17"
              >
                <div
                  class="c18"
                  id="swap-currency-input"
                  label="[object Object]"
                >
                  <div
                    class="c19"
                  >
                    <div
                      class="c20"
                    >
                      <input
                        autocomplete="off"
                        autocorrect="off"
                        class="c21 c22 token-amount-input"
                        inputmode="decimal"
                        maxlength="79"
                        minlength="1"
                        pattern="^[0-9]*[.,]?[0-9]*$"
                        placeholder="0"
                        spellcheck="false"
                        type="text"
                        value=""
                      />
                      <button
                        class="c23 c24 c25 c26 open-currency-select-button"
                      >
                        <span
                          class="c27"
                        >
                          <div
                            class="c6 c7 c10"
                          >
                            <div
                              class="c28"
                              style="margin-right: 2px;"
                            >
                              <img
                                alt="ETH logo"
                                class="c29"
                                src="ethereum-logo.png"
                              />
                            </div>
                            <span
                              class="c30 token-symbol-container"
                            >
                              ETH
                            </span>
                          </div>
                          <svg
                            class="c31"
                          >
                            dropdown.svg
                          </svg>
                        </span>
                      </button>
                    </div>
                    <div
                      class="c32 c33"
                    >
                      <div
                        class="c6 c7 c8"
                      >
                        <div
                          class="c34"
                        />
                        <span />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="c35"
              >
                <div
                  class="c36"
                  color="#0D111C"
                  data-testid="swap-currency-button"
                >
                  <svg
                    fill="none"
                    height="16"
                    stroke="#98A1C0"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    viewBox="0 0 24 24"
                    width="16"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <line
                      x1="12"
                      x2="12"
                      y1="5"
                      y2="19"
                    />
                    <polyline
                      points="19 12 12 19 5 12"
                    />
                  </svg>
                </div>
              </div>
            </div>
            <div
              class="c37"
            >
              <div>
                <div
                  class="c17 c38"
                >
                  <div
                    class="c18"
                    id="swap-currency-output"
                    label="[object Object]"
                  >
                    <div
                      class="c19"
                    >
                      <div
                        class="c20"
                      >
                        <input
                          autocomplete="off"
                          autocorrect="off"
                          class="c21 c22 token-amount-input"
                          inputmode="decimal"
                          maxlength="79"
                          minlength="1"
                          pattern="^[0-9]*[.,]?[0-9]*$"
                          placeholder="0"
                          spellcheck="false"
                          type="text"
                          value=""
                        />
                        <button
                          class="c23 c24 c25 c39 open-currency-select-button"
                        >
                          <span
                            class="c27"
                          >
                            <div
                              class="c6 c7 c10"
                            >
                              <span
                                class="c30 token-symbol-container"
                              >
                                Select token
                              </span>
                            </div>
                            <svg
                              class="c40"
                            >
                              dropdown.svg
                            </svg>
                          </span>
                        </button>
                      </div>
                      <div
                        class="c32 c33"
                      >
                        <div
                          class="c6 c7 c8"
                        >
                          <div
                            class="c34"
                          />
                          <span />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <button
                  class="c41 c24 c42"
                  font-weight="600"
                >
                  <div
                    class="c43 c44"
                  />
                  Connect Wallet
                </button>
              </div>
            </div>
          </main>
        </div>
      </a>
    </div>
    <div
      class="c45"
    />
    <div
      class="c46"
    >
      <div
        class="c47"
      />
    </div>
    <div
      class="c48"
    >
      <h1
        class="c49"
      >
        Trade crypto and NFTs with confidence
      </h1>
      <div
        class="c50"
      >
        <div
          class="c51"
        >
          Buy, sell, and explore tokens and NFTs
        </div>
      </div>
      <span
        class="1 c52"
      >
        <a
          class="c2 c24 c53 c54"
          href="#/swap"
        >
          <p
            class="0 c55"
          >
            Get started
          </p>
        </a>
      </span>
      <div
        class="2 c56"
      >
        Learn more
        <svg
          class="3 c57"
          fill="none"
          height="24"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          viewBox="0 0 24 24"
          width="24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="12"
            cy="12"
            r="10"
          />
          <polyline
            points="8 12 12 16 16 12"
          />
          <line
            x1="12"
            x2="12"
            y1="8"
            y2="16"
          />
        </svg>
      </div>
      <a
        class="9 c58"
        href="https://wallet.uniswap.org/"
      >
        <svg
          height="20"
          viewBox="0 0 814 1000"
          width="20"
        >
          <path
            d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
            fill="currentColor"
          />
        </svg>
        Download the Uniswap Wallet for iOS
      </a>
    </div>
    <div
      class="4 c59"
    >
      <div
        class="5 c60"
        cols="2"
      >
        <a
          class="c61"
          href="#/swap"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Swap tokens
            </div>
          </div>
          <div
            class="c64"
            type="Primary"
          >
            Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
            <div
              class="c64 c65"
              type="Primary"
            >
              Trade Tokens
            </div>
          </div>
        </a>
        <a
          class="c66"
          href="#/nfts"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Trade NFTs
            </div>
          </div>
          <div
            class="c64"
            type="Primary"
          >
            Buy and sell NFTs across marketplaces to find more listings at better prices.
            <div
              class="c64 c65"
              type="Primary"
            >
              Explore NFTs
            </div>
          </div>
        </a>
      </div>
      <div
        class="5 c67"
        cols="3"
      >
        <a
          class="c68"
          href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
          rel="noopenener noreferrer"
          target="_blank"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Buy crypto
            </div>
            <svg
              fill="none"
              height="48"
              stroke="#98A1C0"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="48"
              xmlns="http://www.w3.org/2000/svg"
            >
              <line
                x1="12"
                x2="12"
                y1="1"
                y2="23"
              />
              <path
                d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
              />
            </svg>
          </div>
          <div
            class="c69"
            type="Secondary"
          >
            Buy crypto with your credit card or bank account at the best rates.
            <div
              class="c69 c65"
              type="Secondary"
            >
              Buy now
            </div>
          </div>
        </a>
        <a
          class="c68"
          href="#/pools"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Earn
            </div>
            <img
              alt="Analytics"
              class="c70"
              src="aboutArrowLight.png"
            />
          </div>
          <div
            class="c69"
            type="Secondary"
          >
            Provide liquidity to pools on Uniswap and earn fees on swaps.
            <div
              class="c69 c65"
              type="Secondary"
            >
              Provide liquidity
            </div>
          </div>
        </a>
        <a
          class="c68"
          href="https://docs.uniswap.org"
          rel="noopenener noreferrer"
          target="_blank"
        >
          <div
            class="c62"
          >
            <div
              class="c63"
            >
              Build dApps
            </div>
            <svg
              fill="none"
              height="48"
              stroke="#98A1C0"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="48"
              xmlns="http://www.w3.org/2000/svg"
            >
              <polyline
                points="4 17 10 11 4 5"
              />
              <line
                x1="12"
                x2="20"
                y1="19"
                y2="19"
              />
            </svg>
          </div>
          <div
            class="c69"
            type="Secondary"
          >
            Build apps and tools on the largest DeFi protocol on Ethereum.
            <div
              class="c69 c65"
              type="Secondary"
            >
              Developer docs
            </div>
          </div>
        </a>
      </div>
      <div
        class="c71"
      >
        <div
          class="c72"
        >
          <div
            class="c73"
          >
            Powered by the Uniswap Protocol
          </div>
          <div
            class="c74"
          >
            The leading decentralized crypto trading protocol, governed by a global community.
          </div>
        </div>
        <div
          class="c75"
        >
          <a
            class="c76 c77 c78"
            href="https://uniswap.org"
            rel="noopener noreferrer"
            target="_blank"
            width="200px"
          >
            Learn more
          </a>
        </div>
      </div>
      <div
        class="c79"
      >
        <div
          class="c80 c81"
        >
          <img
            alt="Uniswap Logo"
            class="c82"
            src="unicornEmbossLight.png"
          />
          <div
            class="c83"
          >
            <a
              class="c84"
              href="https://discord.gg/FCfyBSbCU5"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c85"
                size="32"
              >
                discord.svg
              </svg>
            </a>
            <a
              class="c84"
              href="https://twitter.com/uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c86"
                size="32"
              >
                twitter-safe.svg
              </svg>
            </a>
            <a
              class="c84"
              href="https://github.com/Uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c87"
                size="32"
              >
                github.svg
              </svg>
            </a>
          </div>
          <span
            class="2 c88"
          >
            © 
            2023
             Uniswap Labs
          </span>
        </div>
        <div
          class="c89"
        >
          <div
            class="c90"
          >
            <span
              class="c91"
            >
              App
            </span>
            <a
              class="1 c92 c93"
              href="#/swap"
            >
              Swap
            </a>
            <a
              class="1 c92 c93"
              href="#/tokens"
            >
              Tokens
            </a>
            <a
              class="1 c92 c93"
              href="#/nfts"
            >
              NFTs
            </a>
            <a
              class="1 c92 c93"
              href="#/pools"
            >
              Pools
            </a>
          </div>
          <div
            class="c90"
          >
            <span
              class="c91"
            >
              Protocol
            </span>
            <a
              class="c94 0 c95"
              href="https://uniswap.org/community"
              rel="noopener noreferrer"
              target="_blank"
            >
              Community
            </a>
            <a
              class="c94 0 c95"
              href="https://uniswap.org/governance"
              rel="noopener noreferrer"
              target="_blank"
            >
              Governance
            </a>
            <a
              class="c94 0 c95"
              href="https://uniswap.org/developers"
              rel="noopener noreferrer"
              target="_blank"
            >
              Developers
            </a>
          </div>
          <div
            class="c90"
          >
            <span
              class="c91"
            >
              Company
            </span>
            <a
              class="c94 0 c95"
              href="https://boards.greenhouse.io/uniswaplabs"
              rel="noopener noreferrer"
              target="_blank"
            >
              Careers
            </a>
            <a
              class="c94 0 c95"
              href="https://uniswap.org/blog"
              rel="noopener noreferrer"
              target="_blank"
            >
              Blog
            </a>
          </div>
          <div
            class="c90"
          >
            <span
              class="c91"
            >
              Get Help
            </span>
            <a
              class="c94 0 c95"
              href="https://support.uniswap.org/hc/en-us/requests/new"
              rel="noopener noreferrer"
              target="_blank"
            >
              Contact Us
            </a>
            <a
              class="c94 0 c95"
              href="https://support.uniswap.org/hc/en-us"
              rel="noopener noreferrer"
              target="_blank"
            >
              Help Center
            </a>
          </div>
        </div>
        <div
          class="c80 c96"
        >
          <img
            alt="Uniswap Logo"
            class="c82"
            src="unicornEmbossLight.png"
          />
          <div
            class="c83"
          >
            <a
              class="c84"
              href="https://discord.gg/FCfyBSbCU5"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c85"
                size="32"
              >
                discord.svg
              </svg>
            </a>
            <a
              class="c84"
              href="https://twitter.com/uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c86"
                size="32"
              >
                twitter-safe.svg
              </svg>
            </a>
            <a
              class="c84"
              href="https://github.com/Uniswap"
              rel="noopener noreferrer"
              target="_blank"
            >
              <svg
                class="c87"
                size="32"
              >
                github.svg
              </svg>
            </a>
          </div>
          <span
            class="2 c88"
          >
            © 
            2023
             Uniswap Labs
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;
