up

public/home/index.html

@@ -55,66 +55,46 @@
 
 		<h1>Our Idea</h1>
 		<h4>The Smart Participation Game in Four Easy Steps</h4>
-		<div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
-			<div class="feature col">
-				<div class="feature-icon bg-primary bg-gradient">
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#collection"></use>
+		<div class="container px-4 py-5" id="icon-grid">
+
+			<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
+				<div class="col d-flex align-items-start">
+					<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
+						<use xlink:href="#bootstrap"></use>
 					</svg>
+					<div>
+						<h4 class="fw-bold mb-0">PLAN</h4>
+						<p>Public/private sector, Real Estate</p>
+					</div>
 				</div>
-				<h2>PLAN</h2>
-				<p>Public/private sector, Real Estate</p>
-				<a href="#" class="icon-link">
-					Call to action
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#chevron-right"></use>
-					</svg>
-				</a>
-			</div>
-			<div class="feature col">
-				<div class="feature-icon bg-primary bg-gradient">
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#people-circle"></use>
+				<div class="col d-flex align-items-start">
+					<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
+						<use xlink:href="#cpu-fill"></use>
 					</svg>
+					<div>
+						<h4 class="fw-bold mb-0">BUILD</h4>
+						<p>Developer Teams configue the application</p>
+					</div>
 				</div>
-				<h2>BUILD</h2>
-				<p>Game Developer</p>
-				<a href="#" class="icon-link">
-					Call to action
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#chevron-right"></use>
-					</svg>
-				</a>
-			</div>
-			<div class="feature col">
-				<div class="feature-icon bg-primary bg-gradient">
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#toggles2"></use>
+				<div class="col d-flex align-items-start">
+					<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
+						<use xlink:href="#calendar3"></use>
 					</svg>
+					<div>
+						<h4 class="fw-bold mb-0">PLAY</h4>
+						<p>Any Citizens – Young adults</p>
+					</div>
 				</div>
-				<h2>PLAY</h2>
-				<p>Any Citizens – Young adults</p>
-				<a href="#" class="icon-link">
-					Call to action
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#chevron-right"></use>
-					</svg>
-				</a>
-			</div>
-			<div class="feature col">
-				<div class="feature-icon bg-primary bg-gradient">
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#toggles2"></use>
+				<div class="col d-flex align-items-start">
+					<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em">
+						<use xlink:href="#home"></use>
 					</svg>
+					<div>
+						<h4 class="fw-bold mb-0">REWARD</h4>
+						<p>Decision makers gives awards to the best planning (can be real award or ingame
+							awards)</p>
+					</div>
 				</div>
-				<h2>REWARD</h2>
-				<p>Decision makers gives awards to the best planning (can be real award or ingame awards)</p>
-				<a href="#" class="icon-link">
-					Call to action
-					<svg class="bi" width="1em" height="1em">
-						<use xlink:href="#chevron-right"></use>
-					</svg>
-				</a>
 			</div>
 		</div>
 		<p>