update home hero banner for investor audience

tradingstrategy-ai · Sep 18, 2024 · b10a282 · b10a282
1 parent 9eab436
commit b10a282
Showing 1 changed file with 59 additions and 19 deletions.
diff --git a/src/routes/HomeHeroBanner.svelte b/src/routes/HomeHeroBanner.svelte
@@ -18,21 +18,22 @@ Home page hero banner.
 
 		<div class="content">
 			<!-- ensure line breaks at correct place -->
-			<h1>
-				<span>Everyone can be</span>
-				<span>a quant trader</span>
-			</h1>
+			<h1>Harness the power of algorithmic crypto trading</h1>
 
 			<hr />
 
-			<p>
-				Beat the markets with automated AI-driven trading strategies. Become a quant legend and deploy your strategy for
-				millions of DeFi users.
-			</p>
+			<ol>
+				<li>Select a professional-grade strategy aligned with your goals.</li>
+				<li>Connect your crypto wallet and deposit funds to a blockchain vault.</li>
+				<li>Track your returns as the strategy trades automatically.</li>
+				<li>Adjust your portfolio or withdraw anytime.</li>
+			</ol>
 
 			<div class="buttons">
-				<Button href="/strategies">Trade with strategies</Button>
-				<Button secondary href="https://tradingstrategy.ai/docs" rel="external">Develop your strategy</Button>
+				<Button href="/strategies">Start trading</Button>
+				<Button ghost href="https://github.com/tradingstrategy-ai/getting-started" target="_blank" rel="noreferrer">
+					For developers
+				</Button>
 			</div>
 		</div>
 	</div>
@@ -67,22 +68,61 @@ Home page hero banner.
 			font: var(--f-heading-lg-medium);
 			letter-spacing: var(--f-heading-lg-spacing, normal);
 		}
-
-		span {
-			white-space: nowrap;
-		}
 	}
 
-	p {
+	ol {
+		list-style: none;
+		counter-reset: item;
+		display: grid;
+		gap: 0.5em;
+		padding: 0;
 		font: var(--f-ui-xl-roman);
 		letter-spacing: var(--f-ui-xl-spacing, normal);
+
+		@media (--viewport-xl-down) {
+			font: var(--f-ui-lg-roman);
+			letter-spacing: var(--f-ui-lg-spacing, normal);
+		}
+
+		@media (--viewport-sm-down) {
+			font: var(--f-ui-md-roman);
+			letter-spacing: var(--f-ui-md-spacing, normal);
+		}
 	}
 
-	.buttons {
+	li {
+		counter-increment: item;
 		display: grid;
-		gap: var(--space-ls);
-		grid-template-columns: repeat(auto-fit, minmax(12rem, auto));
-		margin-top: var(--space-xl);
+		grid-template-columns: auto 1fr;
+		gap: 0.5em;
+	}
+
+	li:before {
+		content: counter(item);
+		height: 1.625em;
+		aspect-ratio: 1;
+		display: grid;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		background: color-mix(in srgb, transparent, var(--c-success) 35%);
+		color: color-mix(in srgb, var(--c-text), var(--c-success) 70%);
+		font-size: 0.9em;
+		font-weight: bold;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 1.25rem;
+		margin-top: 2.5rem;
+
+		:global([data-css-props]:first-child) {
+			--button-padding: 0.75rem 2.5rem;
+		}
+
+		@media (--viewport-xs) {
+			flex-direction: column;
+		}
 	}
 
 	hr {