Add: basic info screen

app/pages/info.vue

@@ -0,0 +1,98 @@
+
+<script setup>
+    const movie_data = ref({
+        "Title": "A Maple Valley Christmas",
+        "Year": "2022",
+        "Rated": "TV-G",
+        "Released": "05 Nov 2022",
+        "Runtime": "85 min",
+        "Genre": "Comedy, Drama, Romance",
+        "Director": "Paul Ziller",
+        "Writer": "Joie Botkin, Jerry Todt",
+        "Actors": "Peyton List, Andrew W. Walker, Frances Flanagan",
+        "Plot": "Erica is a rancher who has spent her whole life working the family farm with her mother and sister. When Aaron arrives and disrupts her plans, she starts to question what it is she actually wants.",
+        "Language": "English, Italian",
+        "Country": "Canada, United States",
+        "Awards": "1 nomination total",
+        "Poster": "https://m.media-amazon.com/images/M/MV5BZjliMTRlMGItOGQzZC00NTI2LWJkODctZWZmMDIzOGRmYTQ3XkEyXkFqcGc@._V1_SX300.jpg",
+        "Ratings": [
+            {
+                "Source": "Internet Movie Database",
+                "Value": "6.3/10"
+            }
+        ],
+        "Metascore": "N/A",
+        "imdbRating": "6.3",
+        "imdbVotes": "1,577",
+        "imdbID": "tt21841642",
+        "Type": "movie",
+        "DVD": "N/A",
+        "BoxOffice": "N/A",
+        "Production": "N/A",
+        "Website": "N/A",
+        "Response": "True"
+})
+</script>
+<template>
+    <div class="info-container">
+        <h1>{{ movie_data.Title }}</h1>
+        <div class="poster-content">
+            <img class="poster" :src="movie_data.Poster" alt="">
+            <p>{{ movie_data.Plot }}</p>
+            <NuxtLink class="btn btn-primary" to="/">Aloita</NuxtLink>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+* {
+    font-family: DynaPuff, sans-serif;
+}
+
+.info-container {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    width: 100%;
+    min-height: 100vh;
+    padding: 1rem;
+    justify-content: center;
+    justify-items: center;
+    align-items: center;
+    place-items: center;
+
+    > * {
+        text-align: center;
+    }
+
+    h1 {
+        text-align: center;
+        text-shadow: 3px 3px 0.5rem hsl(0, 74%, 20%);
+        margin-bottom: 1rem;
+    }
+    .poster-content {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        padding: 2rem;
+        border: 1px solid hsl(0 74% 10% / 50%);
+        border-bottom-color: hsl(0 74% 80% / 10%);
+        border-radius: 2rem;
+        background-image: linear-gradient(to bottom, hsl(0 74% 80%), hsl(0 74% 70%));
+        box-shadow: inset 3px 3px 0.5rem hsl(0 74% 20%);
+        height: 100%;
+        
+        img {
+            max-width: 80%;
+            border-radius: 1rem;
+            box-shadow: 3px 3px 0.5rem hsl(0 74% 20%);
+            margin: auto auto 1rem auto;
+        }
+        p {
+            line-height: 1.5;
+            font-size: 0.9rem;
+            padding: 1rem;
+            color: hsl(0, 74%, 20%);
+        }    
+    }
+}
+</style>