Refactor backdrop and header to separate components

src/components/Backdrop.tsx

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+
+const Backdrop = () => {
+    useEffect(() => {
+        // Initialize the UI components after first render
+        import('../scripts/autoBackdrops');
+    }, []);
+
+    return (
+        <>
+            <div className='backdropContainer' />
+            <div className='backgroundContainer' />
+        </>
+    );
+};
+
+export default Backdrop;