App Template Topics: Add Demo Buttons & Video (#8771) (#8813)

Author: arman-boyakhchyan

concepts/40 Angular Components/30 Application Template/00 Application Template.md

@@ -1,4 +1,14 @@
-The DevExtreme Angular Application Template helps you create a simple Angular application with a navigation menu and several sample views in a responsive layout (see <a href="https://devexpress.github.io/devextreme-angular-template/#/home">live preview</a>).
+The DevExtreme Angular Application Template helps you create a simple Angular application with a navigation menu and several sample views in a responsive layout.
+
+#include btn-open-github with {
+    href: "https://github.com/DevExpress/devextreme-angular-template"
+}
+<a class="btn btn-accent btn-icon btn-docs" href="https://devexpress.github.io/devextreme-angular-template/#/home" target="_blank" title="View Live Demo">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 5.14001V19.14L19 12.14L8 5.14001Z" fill="white"/>
+    </svg>
+    <span>View Live Demo</span>
+</a>
 
 <img src="/images/dx-application-templates/angular-app-template.png" style="width: 800px;" alt="DevExtreme Angular Template" />
 

concepts/50 React Components/50 Application Template/00 Application Template.md

@@ -5,16 +5,17 @@ The DevExtreme React Application Template simplifies setting up a new React proj
 - Placeholder authentication functions (to implement a secure login system)
 
 #include btn-open-github with {
-    href: "https://devexpress.github.io/devextreme-react-template/#/home"
+    href: "https://github.com/DevExpress/devextreme-react-template"
 }
-
-<img src="/images/dx-application-templates/react-app-template.png" style="width: 800px;" alt="DevExtreme React Template" />
-
-<a class="btn btn-accent btn-icon btn-docs" href="https://www.youtube.com/embed/FLDuyQDWv_4?si=H-bl5cqScX-0EeN-" target="_blank" title="View Demo">
+<a class="btn btn-accent btn-icon btn-docs" href="https://devexpress.github.io/devextreme-react-template/#/home" target="_blank" title="View Live Demo">
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M8 5.14001V19.14L19 12.14L8 5.14001Z" fill="white"/>
     </svg>
-    <span>View Video</span>
+    <span>View Live Demo</span>
 </a>
 
+<img src="/images/dx-application-templates/react-app-template.png" style="width: 800px;" alt="DevExtreme React Template" />
+
+<iframe style="max-width: 800px; width: 100%" height="425" src="https://www.youtube-nocookie.com/embed/FLDuyQDWv_4?si=E72A7GeVwTeY8O7w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
 [tags] react

concepts/55 Vue Components/50 Application Template/00 Application Template.md

@@ -1,4 +1,14 @@
-The DevExtreme Vue Application Template helps you create a simple Vue application with a navigation menu and several sample views in a responsive layout (see <a href="https://devexpress.github.io/devextreme-vue-template/#/home">live preview</a>).
+The DevExtreme Vue Application Template helps you create a simple Vue application with a navigation menu and several sample views in a responsive layout.
+
+#include btn-open-github with {
+    href: "https://github.com/DevExpress/devextreme-vue-template"
+}
+<a class="btn btn-accent btn-icon btn-docs" href="https://devexpress.github.io/devextreme-vue-template/#/home" target="_blank" title="View Live Demo">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M8 5.14001V19.14L19 12.14L8 5.14001Z" fill="white"/>
+    </svg>
+    <span>View Live Demo</span>
+</a>
 
 <img src="/images/dx-application-templates/vue-app-template.png" style="width: 800px;" alt="DevExtreme Vue Template" />