feat: start landing page

Closes ScuffleCloud#35
mmattbtw · Feb 20, 2023 · f4f201e · f4f201e
1 parent 606624d
commit f4f201e
Show file tree

Hide file tree

Showing 9 changed files with 290 additions and 11 deletions.
diff --git a/frontend/website/package.json b/frontend/website/package.json
@@ -24,22 +24,29 @@
 		"@types/fs-extra": "^11.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
+		"autoprefixer": "^10.4.13",
 		"concurrently": "^7.6.0",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"fast-glob": "^3.2.12",
 		"fs-extra": "^11.1.0",
+		"postcss": "^8.4.21",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-adapter-deno": "^0.9.0",
 		"svelte-check": "^3.0.1",
+		"tailwindcss": "^3.2.7",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.1.1",
 		"vitest": "^0.25.3",
 		"wasm-pack": "^0.10.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fontsource/be-vietnam-pro": "^4.5.8",
+		"@fontsource/comfortaa": "^4.5.11"
+	}
 }
diff --git a/frontend/website/postcss.config.cjs b/frontend/website/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/frontend/website/src/app.css b/frontend/website/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/frontend/website/src/routes/+layout.svelte b/frontend/website/src/routes/+layout.svelte
@@ -0,0 +1,7 @@
+<script>
+    import "@fontsource/be-vietnam-pro";
+    import "@fontsource/comfortaa";
+    import "../app.css";
+</script>
+
+<slot />
diff --git a/frontend/website/src/routes/+page.svelte b/frontend/website/src/routes/+page.svelte
@@ -8,5 +8,14 @@
 	});
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<body class="h-screen bg-gradient-to-b from-black to-neutral-800 text-white bg-no-repeat">
+	<div class="flex flex-col items-center">
+		<div class="mt-64 flex flex-col justify-center">
+			<div class="flex flex-col items-center">
+				<h1 class="font-primary font-bold text-7xl text-transparent bg-clip-text bg-gradient-to-b from-[#FF7357] to-[#FF4C6D]">Scuffle.tv</h1>
+				<p class="text-neutral-400">We’re building a streaming platform.</p>
+				<p class="text-neutral-400">A <span class="text-white">community driven streaming platform</span>, that is.</p>
+			</div>
+		</div>
+	</div>
+</body>
diff --git a/frontend/website/svelte.config.js b/frontend/website/svelte.config.js
@@ -1,5 +1,5 @@
-import adapter from "svelte-adapter-deno";
 import { vitePreprocess } from "@sveltejs/kit/vite";
+import adapter from "svelte-adapter-deno";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {

diff --git a/frontend/website/tailwind.config.cjs b/frontend/website/tailwind.config.cjs
@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	theme: {
+		extend: {
+			colors: {
+				// todo: name these better
+				primary: "#FF7357",
+				darkbg: "#16282C",
+				lighterbg: "#223134",
+			},
+			fontFamily: {
+				primary: ["Comfortaa", "sans-serif"],
+				sans: ["Be Vietnam Pro", "sans-serif"],
+			},
+		},
+	},
+	plugins: [],
+};
diff --git a/frontend/website/tests/test.ts b/frontend/website/tests/test.ts
@@ -2,5 +2,5 @@ import { expect, test } from "@playwright/test";
 
 test("index page has expected h1", async ({ page }) => {
 	await page.goto("/");
-	await expect(page.getByRole("heading", { name: "Welcome to SvelteKit" })).toBeVisible();
+	await expect(page.getByRole("heading", { name: "Scuffle.tv" })).toBeVisible();
 });