assets/styles/index.scss

@@ -77,30 +77,6 @@
   margin-top: 3rem;
 }
 
-.card {
-  margin: 1rem;
-  padding: 1.5rem;
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  border: 1px solid #eaeaea;
-  border-radius: 10px;
-  transition: color 0.15s ease, border-color 0.15s ease;
-  width: 45%;
-}
-
-.card:link,
-.card:visited {
-  color: #eaeaea
-}
-
-.card:hover,
-.card:focus,
-.card:active {
-  color: #0070f3 !important;
-  border-color: #0070f3;
-}
-
 .card h2 {
   margin: 0 0 1rem 0;
   font-size: 1.5rem;

components/LinkCard.vue

@@ -0,0 +1,37 @@
+<template>
+	<a class="card" :href="link">
+		<p>{{ title }}</p>
+		<p>{{ description }}</p>
+	</a>
+</template>
+
+<script>
+export default {
+	props: ['title', 'description', 'link'],
+};
+</script>
+
+<style lang="scss" scoped>
+.card {
+	margin: 1rem;
+	padding: 1.5rem;
+	text-align: left;
+	color: inherit;
+	text-decoration: none;
+	border: 2px solid #000;
+	border-radius: 10px;
+	transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.card:link,
+.card:visited {
+	color: #000;
+}
+
+.card:hover,
+.card:focus,
+.card:active {
+	color: #0070f3 !important;
+	border-color: #0070f3;
+}
+</style>

nuxt.config.ts

@@ -3,7 +3,6 @@ import { defineNuxtConfig } from 'nuxt';
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
 	css: [
-		'@/assets/styles/globals.scss',
-		'@/assets/styles/index.scss',
+		'@/assets/styles/globals.scss'
 	]
 });

pages/index.vue

@@ -1,5 +1,16 @@
+<script>
+import '@/assets/styles/index.scss';
+</script>
+
 <template>
 	<div class="container">
 		<h1>Vanner Basta</h1>
+		<p>
+			A Young Royals fan website with links to different discussion
+			spaces.
+		</p>
+		<div class="grid">
+			<LinkCard title="Watch" description="Watch the series on Netflix" link="https://www.netflix.com/title/81210762" />
+		</div>
 	</div>
 </template>