feat: added VisProgUI to a page

ref: N25B-114

src/App.tsx

@@ -1,14 +1,15 @@
 import { Routes, Route } from 'react-router'
 import './App.css'
-import TemplatePage from './pages/TemplatePage/Template.tsx'
+import VisProg from './pages/VisProgPage/VisProg.tsx'
 import Home from './pages/Home/Home.tsx'
 
+
 function App(){
   
   return (
     <Routes>
       <Route path="/" element={<Home />} />
-      <Route path="/Template" element={<TemplatePage />} />
+      <Route path="/visprog" element={<VisProg />} />
     </Routes>
   )
 }

src/pages/Home/Home.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { Link } from 'react-router'
 import reactLogo from '../../assets/react.svg'
 import viteLogo from '../../assets/vite.svg'
@@ -29,7 +28,7 @@ function Home() {
       <h1>Vite + React</h1>
       
         <Counter />
-        <Link to = '/Template'>
+        <Link to = '/visprog'>
             <button className='movePage right' onClick={() : void => {}}>
             Page Cool --{'>'}
             </button>

src/pages/TemplatePage/Template.tsx

@@ -1,7 +1,6 @@
-import { useState } from 'react'
+
 import { Link } from 'react-router'
 import Counter from '../../components/components.tsx'
-import style from './Template.module.css'
 
 //this is your css file where you can style your buttons and such
 //you can still use css parts from App.css, but also overwrite them

src/pages/VisProgPage/VisProg.module.css

@@ -0,0 +1,4 @@
+button.reset:hover {
+  background-color: yellow;
+}
+

src/pages/VisProgPage/VisProg.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router'
+import VisProgUI from "../../visualProgrammingUI/VisProgUI.tsx";
+
+
+//this is your css file where you can style your buttons and such
+//you can still use css parts from App.css, but also overwrite them
+
+function VisProgPage() {
+  
+
+  return (
+    <>
+      <VisProgUI />
+      <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
+        <button className= 'movePage left' onClick={() :void => {}}>
+          Page {'<'}-- Go Home
+        </button>
+      </Link>
+    </>
+  )
+}
+
+export default VisProgPage