Merge pull request #1247 from rainlanguage/add-homepage

Add homepage
rainlanguage · Feb 11, 2025 · 25aa101 · 25aa101
2 parents 04abaeb + f4b2a80
commit 25aa101
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 8 deletions.
diff --git a/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte b/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
@@ -13,7 +13,7 @@
 <Button
 	data-testid="wallet-connect"
 	on:click={handleClick}
-	class="flex w-full border border-gray-700 dark:border-gray-200"
+	class="flex w-full border border-gray-700 px-2 md:px-4 dark:border-gray-200 "
 	color={$connected ? 'alternative' : 'primary'}
 >
 	{#if $connected}

diff --git a/packages/webapp/src/app.html b/packages/webapp/src/app.html
@@ -9,6 +9,11 @@
 			href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
 			rel="stylesheet"
 		/>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Handjet:[email protected]&family=Instrument+Serif:ital@0;1&display=swap"
+			rel="stylesheet"
+		/>
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/packages/webapp/src/lib/components/Homepage.svelte b/packages/webapp/src/lib/components/Homepage.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { WalletConnect, logoDark, logoLight } from '@rainlanguage/ui-components';
+	import { Button } from 'flowbite-svelte';
+	import { appKitModal, connected } from '$lib/stores/wagmi';
+	import { goto } from '$app/navigation';
+
+	export let colorTheme;
+</script>
+
+<div class="mx-auto flex min-h-screen w-full flex-col">
+	<div class="flex h-16 w-full items-center bg-gray-100 dark:bg-gray-800">
+		<div class="flex w-full items-center justify-between px-4">
+			<div class="flex h-full flex-row items-center gap-x-4">
+				<img src={$colorTheme === 'light' ? logoLight : logoDark} alt="Rainlang logo" class="h-8" />
+			</div>
+			<div class="flex h-full flex-row items-center gap-x-2 dark:text-gray-100 md:gap-x-6">
+				<a href="https://docs.rainlang.xyz/raindex/overview">Docs</a>
+				<a href="/deploy">Dashboard</a>
+				<WalletConnect {appKitModal} {connected} />
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex w-full flex-row justify-center border-b-2 border-gray-300 bg-gray-200 px-4 dark:border-gray-600 dark:bg-gray-700"
+	>
+		<div class="my-24 flex w-full max-w-4xl flex-col">
+			<h1
+				class="light:text-gray-900 text-left font-instrument-serif text-7xl font-light leading-tight dark:text-white lg:text-8xl"
+			>
+				Trade onchain
+				<br />
+				without limits
+			</h1>
+			<div class="mt-8 flex justify-start gap-x-4">
+				<Button color="blue" size="lg" on:click={() => goto('/deploy')}>Deploy a strategy</Button>
+				<a href="https://docs.rainlang.xyz/raindex/overview">
+					<Button color="light" size="lg">Learn</Button>
+				</a>
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex w-full flex-grow justify-center bg-gray-100 px-4 dark:bg-gray-800 dark:text-white"
+	>
+		<div class="mx-auto mt-12 grid max-w-4xl grid-cols-1 gap-16 md:grid-cols-3">
+			<div class="flex flex-col gap-y-3">
+				<h2 class="text-xl font-semibold">Automated</h2>
+				<p>No more manual trades. Raindex brings automated trading strategies directly onchain.</p>
+			</div>
+
+			<div class="flex flex-col gap-y-3">
+				<h2 class="text-xl font-semibold">Trustless</h2>
+				<p>
+					Raindex is non-custodial – your assets remain in your control always. Strategies are
+					trustlessly executed by competing solvers.
+				</p>
+			</div>
+
+			<div class="flex flex-col gap-y-3">
+				<h2 class="text-xl font-semibold">Infinitely flexible</h2>
+				<p>
+					Deploy existing strategies in minutes or write your own using Rainlang. DCA, limit orders,
+					liquidity provision and more.
+				</p>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/packages/webapp/src/routes/+layout.svelte b/packages/webapp/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
 	import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 
 	import { page } from '$app/stores';
+	import Homepage from '$lib/components/Homepage.svelte';
 	const queryClient = new QueryClient({
 		defaultOptions: {
 			queries: {
@@ -35,10 +36,16 @@
 </script>
 
 <QueryClientProvider client={queryClient}>
-	<div class="flex min-h-screen w-full justify-start bg-white dark:bg-gray-900 dark:text-gray-400">
-		<Sidebar {colorTheme} page={$page} />
-		<main class="mx-auto h-full w-full grow overflow-x-auto px-4 pt-14 lg:ml-64 lg:p-8">
-			<slot />
-		</main>
-	</div>
+	{#if $page.url.pathname === '/'}
+		<Homepage {colorTheme} />
+	{:else}
+		<div
+			class="flex min-h-screen w-full justify-start bg-white dark:bg-gray-900 dark:text-gray-400"
+		>
+			<Sidebar {colorTheme} page={$page} />
+			<main class="mx-auto h-full w-full grow overflow-x-auto px-4 pt-14 lg:ml-64 lg:p-8">
+				<slot />
+			</main>
+		</div>
+	{/if}
 </QueryClientProvider>
diff --git a/packages/webapp/tailwind.config.ts b/packages/webapp/tailwind.config.ts
@@ -14,7 +14,8 @@ export default {
 	theme: {
 		extend: {
 			fontFamily: {
-				sans: ['DM Sans', 'sans-serif']
+				sans: ['DM Sans', 'sans-serif'],
+'instrument-serif': ['Instrument Serif', 'serif']
 			},
 			colors: {
 				primary: { ...indigo },