make space for the control buttons

app/pages/PageEnigma/PageEnigma.tsx

@@ -10,12 +10,16 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 
 
-import { Button } from '~/components/Button';
-import { ButtonLink } from '~/components/ButtonLink';
+import {
+  Button,
+  ButtonLink,
+} from '~/components';
 import { ButtonDialogue } from '~/modules/ButtonDialogue';
 import { TopBarHelmet } from '~/modules/TopBarHelmet/TopBarHelmet';
 import { SidePanel } from '~/modules/SidePanel';
-import { LowerPanel } from '~/modules/LowerPanel';
+import { Controls3D } from './comps/Controls3D';
+import { ControlsVideo } from './comps/ControlsVideo';
+import { Timeline } from './comps/Timeline';
 
 import Editor from './js/editor';
 
@@ -96,6 +100,8 @@ export const PageEnigma = () => {
             <p>Ask Miles about ThreeJS</p>
             <p>Ask Wil about React</p>
           </ButtonDialogue>
+          <Controls3D/>
+          <ControlsVideo/>
         </div>
       </div>
       <SidePanel>
@@ -103,10 +109,7 @@ export const PageEnigma = () => {
         <Button onClick={handleButtonRender}>Render</Button>
         <Button onClick={handleButtonPlay}>Play</Button>
       </SidePanel>
-      <LowerPanel>
-        <div className='h-10 w-full border-b border-ui-panel-border'></div>
-        <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
-      </LowerPanel>
+      <Timeline />
     </div>
   );
 }

app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -0,0 +1,10 @@
+export const Controls3D = ()=>{
+  return(
+    <div 
+      className="fixed left-1/2 -translate-x-1/2 bg-ui-panel border-b border-x border-ui-panel-border rounded-b-md p-2 text-white"
+      style={{top: "72px"}}
+    >
+      Controls for the 3D scene
+      </div>
+  );
+}

app/pages/PageEnigma/comps/Controls3D/index.tsx

@@ -0,0 +1 @@
+export { Controls3D } from './Controls3D';

app/pages/PageEnigma/comps/ControlsVideo/ControlsVideo.tsx

@@ -0,0 +1,6 @@
+
+export const ControlsVideo = ()=>{
+  return(
+    <div className="fixed top-3/4 left-1/2 -translate-x-1/2 -mt-10 bg-ui-panel border-t border-x border-ui-panel-border rounded-t-md p-2 text-white">Video Controls</div>
+  );
+};

app/pages/PageEnigma/comps/ControlsVideo/index.tsx

@@ -0,0 +1 @@
+export { ControlsVideo } from './ControlsVideo';

app/pages/PageEnigma/comps/Timeline/Timeline.tsx

@@ -0,0 +1,10 @@
+import { LowerPanel } from "~/modules/LowerPanel";
+
+export const Timeline = ()=>{
+  return(
+    <LowerPanel>
+      <div className='h-10 w-full border-b border-ui-panel-border'></div>
+      <input style={{ display: 'none' }} type="file" id="load-upload" name="load-upload"></input>
+    </LowerPanel>
+  )
+}

app/pages/PageEnigma/comps/Timeline/index.tsx

@@ -0,0 +1 @@
+export { Timeline } from './Timeline';