Merge pull request #14 from bitmark-inc/update-ui-catalog

update UI catalog

apps/catalog/primer/index.html

@@ -17,40 +17,31 @@
 	<div class="page">
 		<div class="mobile-view">
 			<div class="intro-head">
-				<div class="inner">
-					<a href="#">
-						<img alt="" src="images/ff-symbol.svg">
-					</a>
-				</div>
 			</div>
 			<div class="intro-slider">
 				<div class="owl-carousel owl-slider">
 					<div class="item">
 						<div class="intro-head">
-							<div class="inner">
-								<a href="#">
-									<img alt="" src="images/ff-text.svg">
-								</a>
-							</div>
 						</div>
 						<div class="item-inner-first-screen">
 							<div class="content">
-								<h2>Web3 Glossary</h2>
-								<br>
-								<p>Enabling the creation and exchange of value without reliance on a central authority, blockchain technology has engendered the formation of new digital communities and inspired artists and others to experiment with the technology in novel ways. Concurrent with the proliferation of this still nascent innovation, new terms have emerged that are related to or dependent on the blockchain, including Web3.</p>
-								<br>
-								<p>Our aspiration in this Web3 primer is to begin to demystify some of the jargon behind these foundational concepts so that it can serve as an entry point into further exploration and inquiry.
-								</p>
-								<br>
-								<p>Rather than an endpoint, we hope this is the beginning of the journey for many as we collectively try and shape the use of the underlying technology in positive ways.
-								</p>
+								<h2>Web3</h2>
+								<h2>Blockchain</h2>
+								<h2>Cryptography</h2>
+								<h2>Metaverse</h2>
+								<h2>Token</h2>
+								<h2>NFT</h2>
+								<h2>Smart Contract</h2>
+								<h2>Web3 Wallet</h2>
+								<h2>Generative Art</h2>
+								<h2>On–chain Art</h2>
 							</div>
-		
+
 						</div>
 					</div>
 					<div class="item">
 						<div class="item-inner">
-							<div class="content">
+							<div class="content white-text">
 								<h2>Web3</h2>
 								<h2>&nbsp;</h2>
 								<p>A concept referring to the next iteration of the World Wide Web, the fundamental infrastructure of which relies on blockchain technology. The ethos of Web3 is to create a more equitable and decentralized system that empowers users with ownership over their online interactions and their data. A loosely defined and evolving term, Web3 encompasses NFTs, the metaverse, and DeFi, among other domains.</p>
@@ -80,8 +71,7 @@ <h2>&nbsp;</h2>
 							<div class="content">
 								<h2>Metaverse</h2>
 								<h2>&nbsp;</h2>
-								<p>Online, multidimensional universe that can synchronously accommodate individual users and groups as well as their identities, holdings, and transactional systems within a larger and expanding ecosystem whose reliability, in part, is supported by the blockchain.
-								</p>
+								<p>Online, multidimensional universe that can synchronously accommodate individual users and groups as well as their identities, holdings, and transactional systems within a larger and expanding ecosystem whose reliability, in part, is supported by the blockchain.</p>
 							</div>
 						</div>
 					</div>
@@ -115,23 +105,31 @@ <h2>&nbsp;</h2>
 					<div class="item">
 						<div class="item-inner">
 							<div class="content">
-								<h2>Web3 or</h2>
-								<h2>Crypto Wallet</h2>
-								<p>A device or software program for transacting with blockchains. Wallets enable one to create, buy, trade and securely access digital assets. Web3 wallets act as an entry point into DeFi (Decentralized Finance) and NFT applications, among other uses.
-								</p>
+								<h2>Web3 Wallet</h2>
+								<h2>&nbsp;</h2>
+								<p>A device or software program for transacting with blockchains. Wallets enable one to create, buy, trade and securely access digital assets. Web3 wallets act as an entry point into DeFi (Decentralized Finance) and NFT applications, among other uses.</p>
 							</div>
 						</div>
 					</div>
 					<div class="item">
 						<div class="item-inner">
 							<div class="content">
-								<h2>Digital Art</h2>
+								<h2>Generative Art</h2>
 								<h2>&nbsp;</h2>
-								<p>Artworks that utilize digital technology in some form. While artists have been working with computer technology since the 1950’s, Digital art was popularized as a term in the 1980’s with the rise of personal computing.</p>
+								<p>Art that is created in part or in whole with the use of an autonomous system or computer code and often relies on elements of randomness or chance.</p>
 							</div>
 						</div>
 					</div>
-
+					<div class="item">
+						<div class="item-inner">
+							<div class="content white-text">
+								<h2>On–chain Art</h2>
+								<h2>&nbsp;</h2>
+								<p>A term referring to NFTs that “live” on the blockchain; in other words, both the smart contract tied to the NFT and the media content of the NFT (“the art”) are written into the blockchain. Most NFTs are still stored off-chain.</p>
+							</div>
+						</div>
+					</div>
+
 				</div>
 			</div>
 		</div>

apps/catalog/primer/js/block.backward.js

@@ -1,9 +1,12 @@
 const pages = 10;
 let owl = $('.owl-carousel');
 let currentIndex = 0;
+const backgroundColorCode = ['#000000', '#EA0028', '#FF595A', '#FFB4AB', '#FE9014', '#FFCD01', '#CCDB00', '#00AE41', '#87E2D1', '#00ACD9', '#0056B8'];
 // Listen to owl events:
 owl.on('changed.owl.carousel', function(event) {
     nextIndex = event.page?.index;
+    //Update background color base on index of slide
+    $('.page').css('background-color', backgroundColorCode[nextIndex]);
     // Ignore first load
     if (nextIndex === -1) {
         return;