feat: add improved page setup

bjerkio · Jun 25, 2023 · b927621 · b927621
1 parent ba603a3
commit b927621
Show file tree

Hide file tree

Showing 11 changed files with 214 additions and 18 deletions.
diff --git a/src/assets/about-bjerk.jpg b/src/assets/about-bjerk.jpg
diff --git a/src/routes/(default)/about/employee.svelte → src/components/employee.svelte b/src/routes/(default)/about/employee.svelte → src/components/employee.svelte
diff --git a/src/routes/(default)/about/employees.svelte → src/components/employees.svelte b/src/routes/(default)/about/employees.svelte → src/components/employees.svelte
diff --git a/src/components/header.svelte b/src/components/header.svelte
@@ -26,8 +26,8 @@
 	<nav>
 		<ul>
 			<li><a href="/about">Om oss</a></li>
-			<li><a href="/principles">Prinsipper</a></li>
 			<li><a href="/projects">Prosjekter</a></li>
+      <li><a href="/contact">Kontakt</a></li>
 		</ul>
 	</nav>
 </header>

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,5 @@
+declare interface Window {
+	$chatwoot: {
+		toggle: (state?: 'open' | 'close') => void;
+	};
+}
diff --git a/src/routes/(default)/about/+page.svelte b/src/routes/(default)/about/+page.svelte
@@ -1,28 +1,47 @@
 <script>
 	import Metadata from '$components/metadata.svelte';
-	import Employees from './employees.svelte';
+	import AboutBjerk from '$assets/about-bjerk.jpg';
+	import Image from '$components/image.svelte';
 </script>
 
 <Metadata title="Om oss" />
 
 <div class="container">
 	<div class="section">
-		<h1>
-			Bjerk er skapt for å forbedre og forenkle måten mennesker lærer, tenker, jobber og
-			kommuniserer på.
-		</h1>
-		<p>For oss, er det viktigste vi gjør er å bidra til å gjøre verden til et bedre sted.</p>
-		<a href="/">Les mer om hvordan vi jobber</a>
+		<h1>Vi skaper digitale produkter</h1>
+		<p>Bjerk er et dialogdrevet byrå innen digital produktutvikling og programvareutvikling.</p>
+		<p>
+			De siste 12 årene har vi endret måten mennesker lærer, tenker, jobber, og kommuniserer innen
+			eiendom, regnskap og forvaltning.
+		</p>
 	</div>
-	<div class="section employees">
-		<Employees />
+	<div class="call-to-action">
+		<a href="/about/principles">Lær om hvordan vi jobber</a>
+	</div>
+</div>
+<div class="hero">
+	<Image src={AboutBjerk} class="hero-image" alt="Bjerk" />
+</div>
+<div class="container">
+	<div class="section">
+		<p>
+			Vi elsker å skape digitale løsninger som gjør en ekte påvirkning i menneskers liv. For å oppnå
+			det bruker vi iterative utviklingsprosesser, tverrfaglig samarbeid, designorientert
+			produkutvikling og brukerfokuserte designmetoder.
+		</p>
+		<p>
+			Gjennom årene har vært heldige å få lov å jobbe med mange spennende kunder, små og store,
+			nasjonale og internasjonale. Vi har også fått lov å jobbe med mange spennende prosjekter, som
+			vi er stolte av å vise frem.
+		</p>
+	</div>
+	<div class="call-to-action">
+		<a href="/projects">Sjekk ut tidligere jobber</a>
 	</div>
 </div>
 
-<style>
-	.container {
-		max-width: 60ch;
-	}
+<style lang="scss">
+	@use '$styles/mixins.scss';
 
 	.section,
 	.container {
@@ -32,8 +51,26 @@
 		gap: var(--size-base);
 	}
 
-	.employees {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	.container {
+		max-width: 60ch;
+		gap: var(--size-lg);
+	}
+
+	a {
+		@include mixins.button;
+	}
+
+	.hero {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.hero-image) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+
+		max-width: 1100px;
 	}
 </style>
diff --git a/src/routes/(default)/principles/+page.svelte → ...s/(default)/about/principles/+page.svelte b/src/routes/(default)/principles/+page.svelte → ...s/(default)/about/principles/+page.svelte
diff --git a/src/routes/(default)/contact/+page.svelte b/src/routes/(default)/contact/+page.svelte
@@ -0,0 +1,96 @@
+<script>
+	import Metadata from '$components/metadata.svelte';
+	import Employees from '$components/employees.svelte';
+</script>
+
+<Metadata title="Om oss" />
+
+<div class="container">
+	<div class="section elevator">
+		<h1>Vi gleder oss til å høre fra deg!</h1>
+		<p>Bjerk har kontorer i Oslo ved Akersgata 51, 0180 Oslo og Finland.</p>
+		<p>
+			Du får tak i oss via chatten, eller på e-post til
+			<a href="mailto:kontoret@bjerk.io"> kontoret@bjerk.io </a>.
+		</p>
+		<div class="call-to-action">
+			<button on:click={() => window.$chatwoot.toggle('open')}>Snakk med oss!</button>
+		</div>
+	</div>
+
+	<div class="section">
+		<dl>
+			<div>
+				<dt>Organisasjonsnummer</dt>
+				<dd>930 334 693</dd>
+			</div>
+			<div>
+				<dt>E-post</dt>
+				<dd>kontoret@bjerk.io</dd>
+			</div>
+		</dl>
+		<dl>
+			<div>
+				<dt>Adresse</dt>
+				<dd>
+					<a href="https://goo.gl/maps/FkcqThLgRtCauPmZA" target="_blank" rel="noopener noreferrer">
+						Akersgata 51, 0180 Oslo
+					</a>
+				</dd>
+			</div>
+		</dl>
+	</div>
+	<div class="section employees">
+		<Employees />
+	</div>
+</div>
+
+<style lang="scss">
+	@use '$styles/mixins.scss';
+
+	.section,
+	.container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: var(--size-base);
+	}
+
+	.container {
+		max-width: 60ch;
+
+		gap: var(--size-lg);
+	}
+
+	.elevator {
+		h1 {
+			font-size: var(--font-size-lg);
+		}
+
+		.call-to-action {
+			margin-top: var(--size-base);
+
+			button {
+				@include mixins.button;
+			}
+		}
+	}
+
+	.section dl {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+		gap: var(--size-sm);
+
+		dt {
+			font-weight: bold;
+		}
+		dd a {
+			color: var(--color-primary);
+		}
+	}
+
+	.employees {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+	}
+</style>
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
@@ -53,6 +53,7 @@ $green100: rgba(144, 244, 148, 1);
 :global(html, body) {
 	max-width: 100vw;
 	overflow-x: hidden;
+  font-size: 18px;
 
 	font-family: 'Sora Variable', system-ui, -apple-system, sans-serif;
 

diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -0,0 +1,56 @@
+@mixin button {
+	box-shadow: var(--border-radius-base);
+  border: 0px;
+
+	cursor: pointer;
+	display: inline-block;
+	outline: none;
+	text-align: center;
+	text-decoration: none;
+
+	padding: var(--size-base) var(--size-md);
+  background-color: transparent;
+	border: 0.15rem solid var(--foreground-color);
+	color: var(--text-color);
+  font-size: var(--font-size-base);
+  border-radius: 80px;
+
+  transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
+
+	&:hover {
+		text-decoration: none;
+
+    background-color: var(--green100);
+    transform: scale(1.15) rotate(-3deg);
+    border-color: transparent;
+	}
+
+	&:active {
+		border: 2px solid var(--dark40);
+	}
+}
+
+// /* CSS */
+// .button-33 {
+//   background-color: #c2fbd7;
+//   border-radius: 100px;
+//   box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
+//   color: green;
+//   cursor: pointer;
+//   display: inline-block;
+//   font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
+//   padding: 7px 20px;
+//   text-align: center;
+//   text-decoration: none;
+//   transition: all 250ms;
+//   border: 0;
+//   font-size: 16px;
+//   user-select: none;
+//   -webkit-user-select: none;
+//   touch-action: manipulation;
+// }
+
+// .button-33:hover {
+//   box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
+//   transform: scale(1.05) rotate(-1deg);
+// }
diff --git a/svelte.config.js b/svelte.config.js
@@ -17,7 +17,8 @@ const config = {
 
 		alias: {
 			$assets: './src/assets',
-			$components: './src/components'
+			$components: './src/components',
+      $styles: './src/styles',
 		}
 
 		// csp: {