Update home page audience focus

src/lib/momentum/TopTradesTable.svelte

@@ -3,6 +3,9 @@
 Display table of trading pairs, linking each row to the trading pair details page. Format
 of pair records is based on the records returned by `top-momentum` API.
 
+**Note:** The "Top trades" section was removed from the home page in 09/2024 (see #fb6486a3).
+This component should be removed if it is not repurposed and displayed on a different page.
+
 #### Usage:
 ```tsx
 	<TopTradesTable pairs={topMomentum.top_up_24h_min_liq_1m} />

src/routes/+page.svelte

@@ -3,16 +3,15 @@
 -->
 <script lang="ts">
 	import HomeHeroBanner from './HomeHeroBanner.svelte';
-	import { BlogRoll, Button, Grid, Section, SummaryBox, UspTile } from '$lib/components';
-	import TopTradesTable from '$lib/momentum/TopTradesTable.svelte';
+	import { BlogRoll, Button, Grid, Section, UspTile } from '$lib/components';
 	import NewsletterOptInBanner from '$lib/newsletter/OptInBanner.svelte';
 	import FeaturedStrategies from './FeaturedStrategies.svelte';
 	import { sitelinksSearchBox } from '$lib/helpers/google-meta';
 	import { formatAmount, formatDollar } from '$lib/helpers/formatters';
 
 	export let data;
 
-	const { impressiveNumbers, posts, strategies, topMomentum } = data;
+	const { impressiveNumbers, posts, strategies } = data;
 </script>
 
 <svelte:head>
@@ -52,36 +51,6 @@
 		</Section>
 	{/if}
 
-	{#if topMomentum}
-		<Section padding="md" gap="md">
-			<h2>Today's top trades</h2>
-
-			<Grid cols={2} gap="lg">
-				<SummaryBox title="Most profitable 24h">
-					<Button
-						slot="cta"
-						let:position
-						size={position === 'header' ? 'sm' : 'md'}
-						label="View all winning pairs"
-						href="/trading-view/top-list/daily-up"
-					/>
-					<TopTradesTable pairs={topMomentum.top_up_24h_min_liq_1m} />
-				</SummaryBox>
-
-				<SummaryBox title="Worst performance 24h">
-					<Button
-						slot="cta"
-						let:position
-						size={position === 'header' ? 'sm' : 'md'}
-						label="View all losing pairs"
-						href="/trading-view/top-list/daily-down"
-					/>
-					<TopTradesTable pairs={topMomentum.top_down_24h_min_liq_1m} />
-				</SummaryBox>
-			</Grid>
-		</Section>
-	{/if}
-
 	{#if posts}
 		<Section padding="md" gap="md">
 			<h2>Blog</h2>

src/routes/+page.ts

@@ -16,7 +16,6 @@ export async function load({ fetch, setHeaders, data }) {
 
 	return {
 		strategies: data.strategies,
-		topMomentum: await fetchPublicApi(fetch, 'top-momentum', { summary: 'true' }).catch(logError),
 		impressiveNumbers: await fetchPublicApi(fetch, 'impressive-numbers').catch(logError),
 		posts: await ghostClient.posts?.browse({ limit: 4 }).catch(logError)
 	};

src/routes/FeaturedStrategies.svelte

@@ -8,21 +8,11 @@
 
 	export let strategies: StrategyRuntimeState[];
 
-	function calculateOpenStrategiesLiveDuration() {
-		const launchAt = new Date(2024, 3, 15);
-		const daysText = formatDaysAgo(launchAt.getTime() / 1000);
-		return daysText;
-	}
-
-	const openLiveDays = calculateOpenStrategiesLiveDuration();
 	const chartDateRange = getStrategyChartDateRange(strategies);
 </script>
 
-<Section padding="lg">
+<Section padding="md">
 	<h2>Open strategies</h2>
-	<p class="live-ago">
-		Open strategies have been live for {openLiveDays}.
-	</p>
 	<div class="differentiators">
 		<StrategyDifferentiator
 			title="100% transparent"
@@ -53,16 +43,10 @@
 </Section>
 
 <style lang="postcss">
-	:is(h2, p, .cta) {
+	:is(h2, .cta) {
 		text-align: center;
 	}
 
-	p.live-ago {
-		font: var(--f-ui-md-medium);
-		letter-spacing: var(--f-ui-md-spacing);
-		color: var(--c-text-extra-light);
-	}
-
 	.differentiators {
 		margin-top: 0.75rem;
 		display: flex;

src/routes/HomeHeroBanner.svelte

@@ -17,22 +17,22 @@ Home page hero banner.
 		<enhanced:img src="$lib/assets/misc/mbp-15.webp" sizes="min(1144px, 100vw)" alt="Trading Data" />
 
 		<div class="content">
-			<!-- ensure line breaks at correct place -->
-			<h1>
-				<span>Everyone can be</span>
-				<span>a quant trader</span>
-			</h1>
+			<h1>Unleash the power of automated 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 wallet and deposit funds to the strategy’s 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>
@@ -41,16 +41,17 @@ Home page hero banner.
 <style lang="postcss">
 	.home-hero-banner {
 		background: var(--c-background-accent-1);
-		padding: var(--space-xl) 0;
+		padding: 2rem 0;
+
 		@media (--viewport-md-up) {
-			padding: var(--space-10xl) var(--space-3xl);
+			padding: 6rem 2rem;
 		}
 	}
 
 	.inner {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(24rem, calc(100vw - 2 * var(--space-xl))), auto));
-		gap: min(var(--space-8xl), 10vw);
+		grid-template-columns: repeat(auto-fit, minmax(min(24rem, calc(100vw - 2 * 2rem)), auto));
+		gap: min(5rem, 10vw);
 		place-items: center;
 	}
 
@@ -67,26 +68,65 @@ 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 {
 		border: 1px solid var(--c-text);
-		margin-block: var(--space-lg);
+		margin-block: 1.5rem;
 	}
 </style>

src/routes/strategies/StrategyTile.svelte

@@ -7,7 +7,6 @@
 	import { getChain } from '$lib/helpers/chain.js';
 	import { Button, DataBadge, Tooltip } from '$lib/components';
 	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
-	import StrategyBadges from './StrategyBadges.svelte';
 	import ChartThumbnail from './ChartThumbnail.svelte';
 	import StrategyDataSummary from './StrategyDataSummary.svelte';
 	import { getLogoUrl } from '$lib/helpers/assets';
@@ -20,6 +19,12 @@
 
 	const chain = getChain(strategy.on_chain_data?.chain_id);
 
+	const tags = strategy.tags?.filter((tag) => tag !== 'live') ?? [];
+	const isLive = strategy.tags?.includes('live');
+
+	const launchedAt = strategy.summary_statistics?.launched_at;
+	const isNew = launchedAt ? utcDay.count(launchedAt, new Date()) < 90 : false;
+
 	const href = `/strategies/${strategy.id}`;
 
 	const chartData = normalizeDataForInterval(
@@ -50,40 +55,52 @@
 				{/if}
 			</div>
 
-			{#if !simplified}
-				<div class="badges">
-					{#if shouldDisplayError(strategy, admin)}
-						<Tooltip>
-							<DataBadge slot="trigger" status="error">Error</DataBadge>
-							<svelte:fragment slot="popup">
-								{#if adminOnlyError(strategy)}
-									<p>
-										<Alert size="xs" status="info" title="Note">This error is only displayed to admin users.</Alert>
-									</p>
-								{/if}
-								<StrategyError {strategy} />
-							</svelte:fragment>
-						</Tooltip>
-					{/if}
-
-					<StrategyBadges tags={strategy.tags ?? []} includeLive={admin} />
-
-					{#if strategy.new_version_id}
-						<Tooltip>
-							<DataBadge slot="trigger" status="error">Outdated</DataBadge>
-							<svelte:fragment slot="popup">
-								This is an outdated strategy. An updated version is available
-								<a href="/strategies/{strategy.new_version_id}">here</a>.
-							</svelte:fragment>
-						</Tooltip>
-					{/if}
-				</div>
-			{/if}
+			<div class="badges">
+				{#if !simplified && shouldDisplayError(strategy, admin)}
+					<Tooltip>
+						<DataBadge slot="trigger" status="error">Error</DataBadge>
+						<svelte:fragment slot="popup">
+							{#if adminOnlyError(strategy)}
+								<p>
+									<Alert size="xs" status="info" title="Note">This error is only displayed to admin users.</Alert>
+								</p>
+							{/if}
+							<StrategyError {strategy} />
+						</svelte:fragment>
+					</Tooltip>
+				{/if}
+
+				{#if !simplified && admin && isLive}
+					<DataBadge status="success">live</DataBadge>
+				{/if}
+
+				{#if isNew && !strategy.new_version_id}
+					<DataBadge status="success">new</DataBadge>
+				{/if}
+
+				{#if !simplified}
+					{#each tags as tag}
+						<DataBadge status="warning">{tag}</DataBadge>
+					{/each}
+				{/if}
+
+				{#if !simplified && strategy.new_version_id}
+					<Tooltip>
+						<DataBadge slot="trigger" status="error">Outdated</DataBadge>
+						<svelte:fragment slot="popup">
+							This is an outdated strategy. An updated version is available
+							<a href="/strategies/{strategy.new_version_id}">here</a>.
+						</svelte:fragment>
+					</Tooltip>
+				{/if}
+			</div>
 		</div>
+
 		<div class="chart">
 			<ChartThumbnail data={chartData} dateRange={chartDateRange} />
 		</div>
 	</div>
+
 	<div class="content">
 		<header>
 			<div class="avatar">

src/routes/strategies/[strategy]/+layout.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import Breadcrumbs from '$lib/breadcrumb/Breadcrumbs.svelte';
-	import { AlertList, PageHeading } from '$lib/components';
+	import { AlertList, DataBadge, PageHeading } from '$lib/components';
 	import { StrategyIcon, StrategyError, shouldDisplayError, adminOnlyError } from 'trade-executor/components';
 	import { menuOptions, default as StrategyNav } from './StrategyNav.svelte';
-	import StrategyBadges from '../StrategyBadges.svelte';
 	import { WalletWidget } from '$lib/wallet';
 
 	export let data;
@@ -13,6 +12,8 @@
 
 	$: isOverviewPage = $page.url.pathname.endsWith(strategy.id);
 
+	$: tags = strategy.tags.filter((tag) => tag !== 'live');
+
 	$: hasStrategyError = shouldDisplayError(strategy, admin);
 
 	$: isOutdated = Boolean(strategy.new_version_id);
@@ -34,7 +35,10 @@
 			<StrategyIcon slot="icon" {strategy} />
 			<div class="title" slot="title">
 				{strategy.name}
-				<StrategyBadges class="badge" tags={strategy.tags} />
+
+				{#each tags as tag}
+					<DataBadge class="badge" status="warning">{tag}</DataBadge>
+				{/each}
 			</div>
 			<div class="wallet-widget" slot="cta">
 				<WalletWidget {strategy} />