Template page updates

components/template/Youtube.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="template-youtube-wrapper">
+        <div class="template-youtube">
+            <div class="template-youtube-title">
+                <template v-for="(data, index) in title" :key="index">
+                    <h2>{{ data }}</h2>
+                </template>
+            </div>
+            <div class="template-youtube-description">{{ description }}</div>
+            <div class="template-youtube-screen" @click="youtubeVideoVisible = true">
+                <div class="template-youtube-screen-blur">
+                    <div class="template-youtube-screen-play">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
+                            <g filter="url(#filter0_d_918_49700)">
+                                <rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
+                                <rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
+                                <path
+                                    d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
+                                    fill="var(--primary-400)"
+                                />
+                            </g>
+                            <defs>
+                                <filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                                    <feOffset dy="4" />
+                                    <feGaussianBlur stdDeviation="25" />
+                                    <feComposite in2="hardAlpha" operator="out" />
+                                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+                                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
+                                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
+                                </filter>
+                            </defs>
+                        </svg>
+                    </div>
+                </div>
+                <img :src="imgSrc" alt="Template Youtube Screen" />
+            </div>
+            <Dialog v-model:visible="youtubeVideoVisible" header="Video Content" :style="{ width: '70vw' }">
+                <div class="template-youtube-video">
+                    <iframe :src="youtubeLink" title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
+                </div>
+            </Dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        imgSrc: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            title: ['Integration with', 'Existing Vite Applications'],
+            description: "Only the folders that are related to the layout needs to move in to your project. We've already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.",
+            youtubeLink: 'https://www.youtube.com/embed/Y07edRJd5QM',
+            youtubeVideoVisible: false
+        };
+    },
+    methods: {}
+};
+</script>