worked a part on the boot screen

Author: ponmanivasahan

src/App.js

@@ -1,25 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import BootScreen from "./components/welcome/Bootscreen";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+function App(){
+  return(
+    <>
+   <BootScreen />
+    </>
+  )
 }
-
-export default App;
+export default App

src/components/welcome/Bootscreen.jsx

@@ -0,0 +1,14 @@
+import {useEffect} from 'react'
+import './welcome.css'
+export default function BootScreen({onDone}){
+    useEffect(()=>{
+        const id=setTimeout(onDone,2500);
+        return ()=>clearTimeout(id);
+    },[onDone])
+
+    return(
+        <div className="w-screen boot-screen">
+            <div className="boot-logo-name">Aurora OS</div>
+        </div>
+    )
+}

src/components/welcome/welcome.css

@@ -0,0 +1,55 @@
+@keyframes fadeIn{
+    from{opacity:0;}
+    to {opacity:1;}
+}
+
+@keyframes blink{
+    0%,49%{opacity:1;}
+    50%,100%{opacity:0;}
+}
+
+@keyframes shake{
+    0%,100%{transform:translateX(0);}
+    20%,60%{transform:translateX(-5px);}
+    40%,80% {transform:translateX(5px);}
+}
+
+@keyframes slideUp{
+    to{transform:translateY(-100vh);}
+}
+
+@keyframes fillBar{
+    from{width:0%;}
+    to{width:100%}
+}
+:root{
+    --bg:#d4d0c8;
+    --surface:#ece9d8;
+    --border:#808080;
+    --border-lt:#ffffff;
+    --border-dk:#404040;
+    --text:#000000;
+    --text-dim:#555555;
+    --accent:#000080;
+    --accent-fg:#ffffff;
+}
+
+.w-screen{
+    position:fixed;
+    inset:0;
+    font-family:'Segoe UI',Tahoma,sans-serif;
+    font-size:13px;
+    overflow:hidden;
+    user-select:none;
+    color:var(--text);
+}
+
+.boot-screen{
+    background:#000;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    gap:32px;
+    animation:fadeIn 0.3s ease;
+}