Styling of circle page

client/src/assets/styles/_fonts.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'BuenosAires';
   font-style: normal;
-   src: url("@/assets/styles/fonts/BuenosAires-Regular.woff2") format("woff2"),
+   src: url("/static/fonts/BuenosAires-Regular.woff2") format("woff2"),
-    url("@/assets/styles/fonts/BuenosAires-Regular.woff") format("woff");
+    url("/static/fonts/BuenosAires-Regular.woff") format("woff");
     font-weight: 400;
     font-style: normal;
     font-display: swap;

client/src/views/CircleAnalyseExampleView.vue

@@ -23,19 +23,52 @@ export default {
 
 <template>
   <div class="circle">
-    <h1 class="text-6xl">
+    <div class="flex">
-      Hello world!
+      <div class="flex-initial w-128 p-8">
+        <h1 class="text-blue-dark text-7xl">
+          {{ circleData.title }}
         </h1>
 
+        <div class="circle-image mt-8"></div>
+
+        <div class="outcome border border-slate-300 mt-8 p-6">
+          <h3 class="text-blue-dark">Das lernst du in diesem Circle.</h3>
+          <div class="prose mt-4">
+            {{ circleData.description }}
+          </div>
+
+          <button class="px-4 py-3 bg-blue-dark text-white text-xl mt-4">Erfahre mehr dazu</button>
+        </div>
+
+        <div class="expert border border-slate-300 mt-8 p-6">
+          <h3 class="text-blue-dark">Hast du Fragen?</h3>
+          <div class="prose mt-4">Tausche dich mit der Fachexpertin aus für den Circle Analyse aus.</div>
+          <button class="px-4 py-3 border-2 border-blue-dark bg-white text-blue-dark text-xl mt-4">
+            Fachexpertin kontaktieren
+          </button>
+        </div>
+      </div>
+
+      <div class="flex-auto bg-blue-100 p-8 pl-24">
         <div v-for="learningSequence in circleData.learning_sequences">
-      <h2>{{learningSequence.title}}</h2>
+          <h2>{{ learningSequence.title }}</h2>
           <div v-for="learningPackage in learningSequence.learning_packages">
-        <h3>{{learningPackage.id}}</h3>
+            <h3>{{ learningPackage.id }}</h3>
           </div>
         </div>
+
+      </div>
+    </div>
+
   </div>
 </template>
 
 <style scoped>
-
+.circle-image {
+  width: 440px;
+  height: 440px;
+  background: url('@/assets/circle-analyse.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+}
 </style>

client/src/views/HomeView.vue

@@ -3,6 +3,9 @@
 
 <template>
   <main>
-    <p>Hello from Home View</p>
+    <p class="title">Hello from Home View</p>
   </main>
 </template>
+
+<style scoped>
+</style>

client/tailwind.config.js

@@ -1,18 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-module.exports = {
-  content: [
-    './index.html',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-  ],
-  theme: {
-    colors: {
-      'white': '#FFFFFF',
-      'blue-dark': '#00224D'
-    },
-    fontFamily: {
-      sans: ['BuenosAires', 'sans-serif'],
-    },
-    extend: {},
-  },
-  plugins: [],
-}

package.json

@@ -10,6 +10,8 @@
     "tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.2",
     "cypress": "^9.4.1",
     "tailwindcss": "^3.0.24"
   }

tailwind.config.js

@@ -1,18 +1,36 @@
+const colors = require('tailwindcss/colors')
+
 module.exports = {
   content: [
     './client/index.html',
     './client/src/**/*.{vue,js,ts,jsx,tsx}',
     './server/vbv_lernwelt/**/*.{html,js}',
-],
+  ],
   theme: {
-    colors: {
-      'white': '#FFFFFF',
-      'blue-dark': '#00224D'
-    },
     fontFamily: {
       sans: ['BuenosAires', 'sans-serif'],
     },
-    extend: {},
+    extend: {
+      spacing: {
+        '128': '32rem',
+      }
     },
-  plugins: [],
+    colors: {
+      transparent: 'transparent',
+      current: 'currentColor',
+      black: colors.black,
+      white: colors.white,
+      blue: colors.blue,
+      gray: colors.gray,
+      emerald: colors.emerald,
+      indigo: colors.indigo,
+      yellow: colors.yellow,
+      slate: colors.slate,
+      'blue-dark': '#00224D',
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'),
+  ],
 }

tailwind/input.css

@@ -2,16 +2,27 @@
 @tailwind components;
 @tailwind utilities;
 
+* {
+  @apply text-blue-dark;
+}
+
 @layer base {
   h1 {
-    @apply text-4xl font-bold
+    @apply text-6xl font-bold
   }
 
   h2 {
-    @apply text-2xl font-semibold
+    @apply text-4xl font-semibold
   }
 
   h3 {
-    @apply text-lg font-medium italic
+    @apply text-2xl font-medium
   }
 }
+
+@layer components {
+  .circle-title {
+    @apply text-9xl font-bold
+  }
+}
+