From d23090f9f85bff38f9cb0e0d8672c3688c4ff23b Mon Sep 17 00:00:00 2001
From: delivan <wjdgurdl272@gmail.com>
Date: Sun, 18 Dec 2022 22:14:10 +0900
Subject: [PATCH] Update style of home page

---
 pages/index.tsx                  | 41 ++++++++++++++++++++++++++++----
 public/images/svg/main-title.svg | 25 ++++++++++---------
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 45bce1a..e30a230 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -78,11 +78,24 @@ export default function Home() {
             </MainTitleImageContainer>
           </MainTitleImageBackground>
 
-          <ConnectButtonContainer>
-            <PrimaryButton onClick={onClickConnectWalletButton}>
-              Connect Wallet
-            </PrimaryButton>
-          </ConnectButtonContainer>
+          <CTAContainer>
+            <ConnectButtonContainer>
+              <PrimaryButton onClick={onClickConnectWalletButton}>
+                Connect Wallet
+              </PrimaryButton>
+            </ConnectButtonContainer>
+            <ICNSDescription>
+              ICNS allows you to use easy-to-remember names instead of
+              addresses.
+              <br />
+              <LearnMoreLink
+                href="https://medium.com/@icns/announcing-icns-the-interchain-name-service-e61e0c3e2abb"
+                target="_blank"
+              >
+                Learn More
+              </LearnMoreLink>
+            </ICNSDescription>
+          </CTAContainer>
           <SubContainer>
             <CheckContainer>
               <CheckIconContainer>
@@ -203,11 +216,29 @@ const MainLogoContainer = styled.div`
   height: 25rem;
 `;
 
+const CTAContainer = styled.div`
+  display: flex;
+`;
+
 const ConnectButtonContainer = styled.div`
   width: 19.9rem;
   height: 5rem;
 
   margin-left: 5rem;
+  margin-right: 26px;
+`;
+
+const ICNSDescription = styled.p`
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 150%;
+  color: #6c6c6c;
+`;
+
+const LearnMoreLink = styled.a`
+  &:visited {
+    color: #6c6c6c;
+  }
 `;
 
 const SubContainer = styled.div`
diff --git a/public/images/svg/main-title.svg b/public/images/svg/main-title.svg
index ae15ef3..250c395 100644
--- a/public/images/svg/main-title.svg
+++ b/public/images/svg/main-title.svg
@@ -1,28 +1,28 @@
 <svg width="920" height="202" viewBox="0 0 920 202" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M149.971 78.9997V64.5897H112.021V49.1897H147.001V34.7797H112.021V19.3797H149.311V4.96969H110.151C99.9215 4.96969 95.9615 10.3597 95.9615 18.8297V65.2497C95.9615 73.7197 99.9215 78.9997 110.151 78.9997H149.971Z" fill="#DAECD5"/>
-<path d="M218.14 4.96969H158.52V19.8197H180.3V78.9997H196.36V19.8197H218.14V4.96969Z" fill="#DAECD5"/>
-<path d="M272.027 46.5497C274.007 51.1697 276.977 54.3597 280.277 56.3397V78.9997H296.337V56.2297C299.637 54.2497 302.497 51.0597 304.367 46.5497L322.408 4.96969H305.027L289.958 42.1497C289.298 43.4697 288.967 44.3497 288.307 44.3497C287.647 44.3497 287.318 43.5797 286.658 42.1497L271.477 4.96969H254.207L272.027 46.5497Z" fill="#DAECD5"/>
-<path d="M450.854 80.2097C472.854 80.2097 483.084 67.4497 483.084 46.1097V4.96969H467.024V45.7797C467.024 58.6497 461.744 64.9197 450.854 64.9197C439.964 64.9197 434.684 58.6497 434.684 45.7797V4.96969H418.624V46.1097C418.624 67.4497 428.744 80.2097 450.854 80.2097Z" fill="#DAECD5"/>
-<path d="M518.076 78.9997L518.186 55.3497H524.456C532.816 55.3497 536.006 58.9797 539.416 65.7997L546.016 78.9997H563.396L556.246 64.3697C552.396 56.6697 549.646 51.6097 544.916 48.9697C554.376 46.4397 560.316 38.6297 560.316 28.5097C560.316 12.7797 547.446 4.96969 530.726 4.96969H502.236V78.9997H518.076ZM530.946 19.8197C538.206 19.8197 543.816 22.8997 543.816 30.1597C543.816 37.0897 538.316 41.0497 530.726 41.0497H518.186L518.296 19.8197H530.946Z" fill="#DAECD5"/>
+<path d="M149.971 78.9997V64.5897H112.021V49.1897H147.001V34.7797H112.021V19.3797H149.311V4.96969H110.151C99.9213 4.96969 95.9613 10.3597 95.9613 18.8297V65.2497C95.9613 73.7197 99.9213 78.9997 110.151 78.9997H149.971Z" fill="#DAECD5"/>
+<path d="M218.139 4.96969H158.519V19.8197H180.299V78.9997H196.359V19.8197H218.139V4.96969Z" fill="#DAECD5"/>
+<path d="M272.027 46.5497C274.007 51.1697 276.977 54.3597 280.277 56.3397V78.9997H296.337V56.2297C299.637 54.2497 302.497 51.0597 304.367 46.5497L322.407 4.96969H305.027L289.957 42.1497C289.297 43.4697 288.967 44.3497 288.307 44.3497C287.647 44.3497 287.317 43.5797 286.657 42.1497L271.477 4.96969H254.207L272.027 46.5497Z" fill="#DAECD5"/>
+<path d="M450.853 80.2097C472.853 80.2097 483.083 67.4497 483.083 46.1097V4.96969H467.023V45.7797C467.023 58.6497 461.743 64.9197 450.853 64.9197C439.963 64.9197 434.683 58.6497 434.683 45.7797V4.96969H418.623V46.1097C418.623 67.4497 428.743 80.2097 450.853 80.2097Z" fill="#DAECD5"/>
+<path d="M518.075 78.9997L518.185 55.3497H524.455C532.815 55.3497 536.005 58.9797 539.415 65.7997L546.015 78.9997H563.395L556.245 64.3697C552.395 56.6697 549.645 51.6097 544.915 48.9697C554.375 46.4397 560.315 38.6297 560.315 28.5097C560.315 12.7797 547.445 4.96969 530.725 4.96969H502.235V78.9997H518.075ZM530.945 19.8197C538.205 19.8197 543.815 22.8997 543.815 30.1597C543.815 37.0897 538.315 41.0497 530.725 41.0497H518.185L518.295 19.8197H530.945Z" fill="#DAECD5"/>
 <path d="M626.206 78.9997V24.2197L655.466 74.7097C657.886 78.7797 661.956 80.4297 666.686 80.4297C672.516 80.4297 677.906 76.2497 677.906 68.8797V4.96969H662.726V59.4197L633.466 9.25969C631.046 5.18969 627.196 3.42969 622.356 3.42969C616.306 3.42969 610.916 7.71969 610.916 15.0897V78.9997H626.206Z" fill="#DAECD5"/>
 <path d="M689.501 78.9997H705.891L710.181 63.9297L740.211 63.8197L744.501 78.9997H760.891L741.311 15.4197C738.781 7.38969 732.181 3.53969 725.141 3.53969C718.211 3.53969 711.611 7.38969 709.081 15.4197L689.501 78.9997ZM722.831 20.1497C723.271 18.6097 724.041 17.9497 725.251 17.9497C726.571 17.9497 727.231 18.6097 727.671 20.1497L736.031 49.5197H714.361L722.831 20.1497Z" fill="#DAECD5"/>
 <path d="M919.812 78.9997V64.5897H881.862V49.1897H916.842V34.7797H881.862V19.3797H919.152V4.96969H879.992C869.762 4.96969 865.802 10.3597 865.802 18.8297V65.2497C865.802 73.7197 869.762 78.9997 879.992 78.9997H919.812Z" fill="#DAECD5"/>
-<path d="M69.361 200V145.22L98.621 195.71C101.041 199.78 105.111 201.43 109.841 201.43C115.671 201.43 121.061 197.25 121.061 189.88V125.97H105.881V180.42L76.621 130.26C74.201 126.19 70.351 124.43 65.511 124.43C59.461 124.43 54.071 128.72 54.071 136.09V200H69.361Z" fill="#DAECD5"/>
+<path d="M69.3608 200V145.22L98.6208 195.71C101.041 199.78 105.111 201.43 109.841 201.43C115.671 201.43 121.061 197.25 121.061 189.88V125.97H105.881V180.42L76.6208 130.26C74.2008 126.19 70.3508 124.43 65.5108 124.43C59.4608 124.43 54.0708 128.72 54.0708 136.09V200H69.3608Z" fill="#DAECD5"/>
 <path d="M179.247 189.55C180.897 197.36 186.177 201.54 192.997 201.54C199.377 201.54 204.877 197.36 206.527 190.21L217.747 141.26L229.077 189.88C230.837 197.36 236.117 201.54 242.717 201.54C249.867 201.54 254.707 197.03 256.357 189.22L269.557 125.97H253.497L242.277 184.6C242.167 184.93 242.167 185.15 242.057 185.15C241.837 185.15 241.837 185.04 241.727 184.6L230.837 137.63C228.747 128.72 224.347 124.87 217.747 124.87C211.147 124.87 206.637 128.72 204.657 137.74L193.987 184.6C193.877 185.04 193.767 185.15 193.657 185.15C193.547 185.15 193.437 185.04 193.327 184.6L181.667 125.97H165.607L179.247 189.55Z" fill="#DAECD5"/>
 <path d="M381.671 125.97H365.611V186.25C365.611 194.72 369.571 200 379.801 200H416.211V185.15H381.671V125.97Z" fill="#DAECD5"/>
-<path d="M444.4 125.97H428.34V186.25C428.34 194.72 432.299 200 442.53 200H478.94V185.15H444.4V125.97Z" fill="#DAECD5"/>
+<path d="M444.399 125.97H428.339V186.25C428.339 194.72 432.299 200 442.529 200H478.939V185.15H444.399V125.97Z" fill="#DAECD5"/>
 <path d="M543.978 200V185.59H506.028V170.19H541.008V155.78H506.028V140.38H543.318V125.97H504.158C493.928 125.97 489.968 131.36 489.968 139.83V186.25C489.968 194.72 493.928 200 504.158 200H543.978Z" fill="#DAECD5"/>
 <path d="M612.146 125.97H552.526V140.82H574.306V200H590.366V140.82H612.146V125.97Z" fill="#DAECD5"/>
 <rect y="120" width="39.4428" height="40.0003" rx="19.7214" fill="#FB5232"/>
 <rect y="160" width="39.4428" height="40.0003" fill="#F4CC3E"/>
 <path d="M773 3C794.784 3 812.444 20.6595 812.444 42.4435V43.001H773V3Z" fill="#00B86E"/>
 <path d="M812.445 42.4435C812.445 20.6595 830.105 3 851.889 3V43.001H812.445V42.4435Z" fill="#FF77F3"/>
-<rect x="773" y="42.9961" width="39.4435" height="40.001" fill="#F4CC3E"/>
-<rect x="812.445" y="42.9961" width="39.4435" height="40.001" fill="#FB5232"/>
+<rect x="773" y="42.9971" width="39.4435" height="40.001" fill="#F4CC3E"/>
+<rect x="812.445" y="42.9971" width="39.4435" height="40.001" fill="#FB5232"/>
 <path d="M314.448 121C336.233 121 353.893 138.91 353.893 161.002H334.17C323.278 161.002 314.448 152.048 314.448 141.001V121Z" fill="#FF77F3"/>
-<path d="M314.448 180.997C314.448 169.951 323.278 160.996 334.17 160.996H353.893V200.999H314.448V180.997Z" fill="#00B86E"/>
+<path d="M314.448 180.999C314.448 169.953 323.278 160.998 334.17 160.998H353.893V201.001H314.448V180.999Z" fill="#00B86E"/>
 <path d="M275 161.002C275 138.91 292.66 121 314.445 121V141.001C314.445 152.048 305.615 161.002 294.722 161.002H275Z" fill="#F4CC3E"/>
-<path d="M275 160.996H294.722C305.615 160.996 314.445 169.951 314.445 180.997V200.999H275V160.996Z" fill="#5A4CFA"/>
+<path d="M275 160.998H294.722C305.615 160.998 314.445 169.953 314.445 180.999V201.001H275V160.998Z" fill="#5A4CFA"/>
 <path d="M408 42C408 18.804 389.196 0 366 0V20.25C366 32.2622 375.738 42 387.75 42H408Z" fill="#5A4CFA"/>
 <path d="M408 42C408 65.196 389.196 84 366 84V63.75C366 51.7378 375.738 42 387.75 42H408Z" fill="#F4CC3E"/>
 <path d="M324 42C324 18.804 342.804 0 366 0V20.25C366 32.2622 356.262 42 344.25 42H324Z" fill="#FF77F3"/>
@@ -31,4 +31,7 @@
 <path d="M0 43H40V83H0V43Z" fill="#5A4CFA"/>
 <rect x="40" y="3" width="40" height="40" fill="#FF77F3"/>
 <path d="M40 43H60C71.0457 43 80 51.9543 80 63C80 74.0457 71.0457 83 60 83H40V43Z" fill="#F4CC3E"/>
+<path d="M627.496 199L623.391 184.455H626.224L628.845 195.143H628.98L631.778 184.455H634.357L637.162 195.151H637.29L639.911 184.455H642.744L638.639 199H636.04L633.128 188.794H633.014L630.095 199H627.496ZM648.606 184.455V199H645.971V184.455H648.606ZM652.22 186.663V184.455H663.826V186.663H659.33V199H656.716V186.663H652.22ZM667.463 199V184.455H670.098V190.612H676.838V184.455H679.48V199H676.838V192.821H670.098V199H667.463ZM689.112 184.455H692.088L695.646 190.889H695.788L699.347 184.455H702.322L697.031 193.574V199H694.403V193.574L689.112 184.455ZM717.765 191.727C717.765 193.295 717.472 194.637 716.885 195.754C716.302 196.867 715.507 197.719 714.498 198.311C713.495 198.903 712.356 199.199 711.082 199.199C709.809 199.199 708.667 198.903 707.659 198.311C706.655 197.714 705.86 196.86 705.273 195.747C704.69 194.63 704.399 193.29 704.399 191.727C704.399 190.16 704.69 188.82 705.273 187.707C705.86 186.59 706.655 185.735 707.659 185.143C708.667 184.552 709.809 184.256 711.082 184.256C712.356 184.256 713.495 184.552 714.498 185.143C715.507 185.735 716.302 186.59 716.885 187.707C717.472 188.82 717.765 190.16 717.765 191.727ZM715.116 191.727C715.116 190.624 714.943 189.694 714.598 188.936C714.257 188.174 713.783 187.598 713.177 187.21C712.571 186.817 711.873 186.621 711.082 186.621C710.291 186.621 709.593 186.817 708.987 187.21C708.381 187.598 707.905 188.174 707.559 188.936C707.219 189.694 707.048 190.624 707.048 191.727C707.048 192.83 707.219 193.763 707.559 194.526C707.905 195.283 708.381 195.858 708.987 196.251C709.593 196.64 710.291 196.834 711.082 196.834C711.873 196.834 712.571 196.64 713.177 196.251C713.783 195.858 714.257 195.283 714.598 194.526C714.943 193.763 715.116 192.83 715.116 191.727ZM730.826 184.455H733.461V193.957C733.461 194.999 733.214 195.915 732.722 196.706C732.234 197.497 731.548 198.115 730.662 198.56C729.777 199 728.742 199.22 727.559 199.22C726.37 199.22 725.333 199 724.448 198.56C723.562 198.115 722.876 197.497 722.388 196.706C721.9 195.915 721.657 194.999 721.657 193.957V184.455H724.291V193.737C724.291 194.343 724.424 194.883 724.689 195.357C724.959 195.83 725.338 196.202 725.826 196.472C726.313 196.737 726.891 196.869 727.559 196.869C728.226 196.869 728.804 196.737 729.291 196.472C729.784 196.202 730.163 195.83 730.428 195.357C730.693 194.883 730.826 194.343 730.826 193.737V184.455ZM737.724 199V184.455H743.179C744.296 184.455 745.234 184.649 745.992 185.037C746.754 185.425 747.329 185.97 747.717 186.67C748.11 187.366 748.307 188.179 748.307 189.107C748.307 190.039 748.108 190.849 747.71 191.536C747.317 192.217 746.737 192.745 745.97 193.119C745.203 193.489 744.261 193.673 743.144 193.673H739.259V191.486H742.788C743.442 191.486 743.977 191.396 744.394 191.216C744.81 191.031 745.118 190.764 745.317 190.413C745.52 190.058 745.622 189.623 745.622 189.107C745.622 188.59 745.52 188.15 745.317 187.786C745.113 187.416 744.803 187.137 744.386 186.947C743.97 186.753 743.432 186.656 742.774 186.656H740.359V199H737.724ZM745.239 192.409L748.84 199H745.899L742.362 192.409H745.239Z" fill="#5B5B5B"/>
+<path d="M757.854 186.663V184.455H769.459V186.663H764.963V199H762.35V186.663H757.854ZM776.157 199L772.052 184.455H774.886L777.507 195.143H777.642L780.44 184.455H783.018L785.824 195.151H785.951L788.572 184.455H791.406L787.301 199H784.701L781.79 188.794H781.676L778.757 199H776.157ZM797.268 184.455V199H794.633V184.455H797.268ZM800.882 186.663V184.455H812.487V186.663H807.992V199H805.378V186.663H800.882ZM815.485 186.663V184.455H827.09V186.663H822.595V199H819.981V186.663H815.485ZM830.728 199V184.455H840.188V186.663H833.363V190.612H839.698V192.821H833.363V196.791H840.245V199H830.728ZM844.276 199V184.455H849.731C850.848 184.455 851.786 184.649 852.543 185.037C853.305 185.425 853.881 185.97 854.269 186.67C854.662 187.366 854.858 188.179 854.858 189.107C854.858 190.039 854.66 190.849 854.262 191.536C853.869 192.217 853.289 192.745 852.522 193.119C851.755 193.489 850.813 193.673 849.695 193.673H845.81V191.486H849.34C849.993 191.486 850.528 191.396 850.945 191.216C851.362 191.031 851.67 190.764 851.868 190.413C852.072 190.058 852.174 189.623 852.174 189.107C852.174 188.59 852.072 188.15 851.868 187.786C851.665 187.416 851.355 187.137 850.938 186.947C850.521 186.753 849.984 186.656 849.326 186.656H846.911V199H844.276ZM851.79 192.409L855.391 199H852.451L848.914 192.409H851.79ZM867.68 184.455V199H865.045V184.455H867.68ZM876.862 199H871.933V184.455H876.962C878.406 184.455 879.646 184.746 880.683 185.328C881.725 185.906 882.525 186.737 883.084 187.821C883.642 188.905 883.922 190.203 883.922 191.713C883.922 193.228 883.64 194.53 883.077 195.619C882.518 196.708 881.711 197.544 880.655 198.126C879.604 198.709 878.339 199 876.862 199ZM874.568 196.72H876.734C877.747 196.72 878.593 196.536 879.27 196.166C879.947 195.792 880.456 195.236 880.797 194.497C881.138 193.754 881.308 192.826 881.308 191.713C881.308 190.6 881.138 189.677 880.797 188.943C880.456 188.205 879.952 187.653 879.284 187.288C878.621 186.919 877.797 186.734 876.812 186.734H874.568V196.72Z" fill="#03A9F4"/>
+<path d="M919 184.247C918.118 184.631 917.169 184.887 916.169 185.008C917.186 184.414 917.969 183.468 918.336 182.349C917.384 182.898 916.33 183.301 915.208 183.513C914.312 182.579 913.034 182 911.618 182C908.898 182 906.694 184.148 906.694 186.796C906.694 187.171 906.738 187.536 906.822 187.89C902.731 187.688 899.102 185.776 896.674 182.875C896.247 183.584 896.007 184.414 896.007 185.29C896.007 186.955 896.875 188.421 898.197 189.284C897.39 189.26 896.63 189.039 895.965 188.685C895.965 188.7 895.965 188.721 895.965 188.742C895.965 191.068 897.662 193.006 899.913 193.447C899.502 193.557 899.067 193.619 898.619 193.619C898.301 193.619 897.991 193.583 897.691 193.53C898.318 195.432 900.136 196.821 902.289 196.863C900.604 198.147 898.482 198.916 896.174 198.916C895.775 198.916 895.385 198.894 895 198.848C897.18 200.205 899.77 201 902.549 201C911.605 201 916.559 193.691 916.559 187.35C916.559 187.142 916.552 186.935 916.542 186.731C917.509 186.06 918.342 185.214 919 184.247Z" fill="#03A9F4"/>
 </svg>