Basic design created

app/Views/Components/Icon.vue

@@ -0,0 +1,17 @@
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import * as SolidIcons from '@fortawesome/free-solid-svg-icons'
+
+const props = defineProps({
+    name: { type: String, required: true },
+})
+
+if (SolidIcons[`fa${props.name.charAt(0).toUpperCase()}${props.name.slice(1)}`]) {
+    library.add(SolidIcons[`fa${props.name.charAt(0).toUpperCase()}${props.name.slice(1)}`])
+}
+</script>
+
+<template>
+    <font-awesome-icon :icon="name" />
+</template>

app/Views/Components/ShadowedBox.vue

@@ -0,0 +1,23 @@
+<script setup>
+    const props = defineProps({
+        style: { type: String},
+        class: { type: String},
+    })
+
+    console.log(props.style)
+</script>
+
+<template>
+    <div class="shadowed-box" :style=props.style :class=props.class>
+        <slot></slot>
+    </div>
+</template>
+
+<style>
+    .shadowed-box {
+        box-shadow: 2px 2px 5px #c0c0c0;
+        border-radius: 10px;
+        padding: 10px;
+        background-color: #ffffff;
+    }
+</style>