From e1afe45ca862e7d438f0c589e7b996fe1717beb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s?= <t.gabor80312@gmail.com>
Date: Fri, 18 Aug 2023 13:54:22 +0200
Subject: [PATCH] added 2nd  CTA at the bottom of the staking section

---
 src/pages/what-is-tia.js             | 61 +++++++++++++++++++---------
 src/scss/pages/page-what-is-tia.scss | 59 +++++++++++++++------------
 2 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/src/pages/what-is-tia.js b/src/pages/what-is-tia.js
index f48ce079d..6357329b4 100644
--- a/src/pages/what-is-tia.js
+++ b/src/pages/what-is-tia.js
@@ -113,25 +113,48 @@ const WhatIsTIA = () => {
 											Users that don’t reach the top 75 or don’t want to run a validator can delegate their TIA to an existing
 											validator that will stake it on their behalf. TIA delegations can always be retrieved from validators
 											after undergoing a 3-week unbonding period.
-											<div className='link-wrapper'>
-												<a className='link' href='https://docs.celestia.org/'>
-													View Documentation
-													<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
-														<path
-															stroke='#7B2BF9'
-															stroke-linecap='square'
-															stroke-width='1.5'
-															d='M3.61218 12.0721L11.0761 4.60823'
-														/>
-														<path
-															stroke='#7B2BF9'
-															stroke-linecap='square'
-															stroke-linejoin='bevel'
-															stroke-width='1.5'
-															d='M11.5254 11.0752V4.00413H4.45432'
-														/>
-													</svg>
-												</a>
+											
+											<div className="link-list">
+												<div className='link-wrapper me-4'>
+													<a className='link' href='https://docs.celestia.org/'>
+														View Documentation
+														<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-width='1.5'
+																d='M3.61218 12.0721L11.0761 4.60823'
+															/>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-linejoin='bevel'
+																stroke-width='1.5'
+																d='M11.5254 11.0752V4.00413H4.45432'
+															/>
+														</svg>
+													</a>
+												</div>
+												<div className='link-wrapper'>
+													<a className='link' href='https://docs.celestia.org/'>
+														View Documentation
+														<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-width='1.5'
+																d='M3.61218 12.0721L11.0761 4.60823'
+															/>
+															<path
+																stroke='#7B2BF9'
+																stroke-linecap='square'
+																stroke-linejoin='bevel'
+																stroke-width='1.5'
+																d='M11.5254 11.0752V4.00413H4.45432'
+															/>
+														</svg>
+													</a>
+												</div>
 											</div>
 										</p>
 									</div>
diff --git a/src/scss/pages/page-what-is-tia.scss b/src/scss/pages/page-what-is-tia.scss
index 948ce6bef..c1699e1a5 100644
--- a/src/scss/pages/page-what-is-tia.scss
+++ b/src/scss/pages/page-what-is-tia.scss
@@ -247,7 +247,7 @@
 				}
 			}
 		}
-		o .image-box--node {
+		.image-box--node {
 			margin-left: auto;
 			margin-right: auto;
 			@include media-breakpoint-down(lg) {
@@ -290,32 +290,39 @@
 				a {
 					box-shadow: inset 0 -2px 0 0 #414141;
 				}
-
-				.link-wrapper {
-					margin-top: 20px;
-					.link {
-						font-family: $ruberoid;
-						font-style: normal;
-						font-weight: 700;
-						font-size: 14px;
-						line-height: 1em;
-						padding: 8px 0;
-						margin: -8px 0;
-						color: #000000;
-						transition: all 0.2s ease-in-out;
-						box-shadow: none;
-						&:hover {
-							color: #393939;
-							& svg {
-								margin-left: 16px;
+				.link-list {
+					display: flex;
+					flex-wrap: wrap;
+					margin-top: 10px;
+					.link-wrapper {
+						flex-basis: auto;
+						min-width: 180px;
+						margin-top: 10px;
+						
+						.link {
+							font-family: $ruberoid;
+							font-style: normal;
+							font-weight: 700;
+							font-size: 14px;
+							line-height: 1em;
+							padding: 8px 0;
+							margin: -8px 0;
+							color: #000000;
+							transition: all 0.2s ease-in-out;
+							box-shadow: none;
+							&:hover {
+								color: #393939;
+								& svg {
+									margin-left: 16px;
+								}
 							}
 						}
-					}
-					svg {
-						margin-left: 8px;
-						transition: all 0.2s ease-in-out;
-						will-change: margin;
-						margin-bottom: 2px;
+						svg {
+							margin-left: 8px;
+							transition: all 0.2s ease-in-out;
+							will-change: margin;
+							margin-bottom: 2px;
+						}
 					}
 				}
 			}
@@ -554,4 +561,4 @@
 			}
 		}
 	}
-}
+}
\ No newline at end of file