🥉🦡 ↝ [SGV2-22]: I have a phobia that someone's always there

Author: Gizmotronn

components/_Core/Section/Header.tsx

@@ -3,29 +3,29 @@ import React from "react";
 export default function Header() {
     return (
         <div className="navbar bg-base-100 h-full w-full bg-red-100 rounded-md bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-10">
-        <div className="navbar-start">
-            <div className="dropdown">
-            <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
+            <div className="navbar-start">
+                <div className="dropdown">
+                <div tabIndex={0} role="button" className="btn btn-ghost btn-circle">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
+                </div>
+                <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+                    <li><a>Homepage</a></li>
+                    <li><a>Portfolio</a></li>
+                    <li><a>About</a></li>
+                </ul>
+                </div>
             </div>
-            <ul tabIndex={0} className="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
-                <li><a>Homepage</a></li>
-                <li><a>Portfolio</a></li>
-                <li><a>About</a></li>
-            </ul>
+            <div className="navbar-center">
+                <a className="btn btn-ghost text-xl">[Planet Name]</a>
             </div>
-        </div>
-        <div className="navbar-center">
-            <a className="btn btn-ghost text-xl">[Planet Name]</a>
-        </div>
-        <div className="navbar-end">
-            <button className="btn btn-ghost btn-circle">
-            <div className="indicator">
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
-                <span className="badge badge-xs badge-primary indicator-item"></span>
+            <div className="navbar-end">
+                <button className="btn btn-ghost btn-circle">
+                <div className="indicator">
+                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
+                    <span className="badge badge-xs badge-primary indicator-item"></span>
+                </div>
+                </button>
             </div>
-            </button>
-        </div>
         </div>
     );
 };

components/_Core/Section/Planet.tsx

@@ -35,13 +35,13 @@ const Planet: React.FC<PlanetProps> = ({
           src={backgroundImage}
           className="object-cover absolute inset-0 size-full"
         />
-        <Header
+        {/* <Header
           logoImage={logoImage}
           planetName={planetName}
           leftArrowImage={leftArrowImage}
           rightArrowImage={rightArrowImage}
           compassImage={compassImage}
-        />
+        /> */}
         <RoverSection
           structureImage={structureImage}
           activeRoverImage={activeRoverImage}
@@ -68,45 +68,42 @@ const Header: React.FC<HeaderProps> = ({
   rightArrowImage,
   compassImage,
 }) => {
-  return (
-    <div className="flex relative flex-col justify-center w-full backdrop-blur-[5px] bg-white bg-opacity-0 max-md:max-w-full">
-      <div className="flex gap-2.5 justify-between items-center px-12 py-5 w-full max-md:flex-wrap max-md:px-5 max-md:max-w-full">
-        <img
-          loading="lazy"
-          src={logoImage}
-          className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px]"
-        />
-        <div className="flex flex-col justify-center self-stretch max-md:max-w-full">
-          <div className="flex flex-col justify-center items-center py-1.5 max-md:max-w-full">
-            <div className="justify-center px-4 py-1 text-xl font-medium text-center text-white whitespace-nowrap rounded-xl shadow-sm bg-indigo-600 bg-opacity-40">
-              Main
-            </div>
-            <div className="flex gap-5 justify-center items-center self-stretch px-3 mt-2 text-3xl font-semibold text-center text-white uppercase tracking-[5.12px] max-md:flex-wrap">
+    return (
+        <div className="flex relative flex-col justify-center w-full backdrop-blur-[5px] bg-white bg-opacity-0 max-md:max-w-full">
+          <div className="flex flex-col justify-center items-center px-12 py-5 w-full max-md:px-5 max-md:max-w-full md:flex-row md:justify-between">
+            <div className="flex flex-col justify-center items-center md:flex-row md:items-center">
               <img
                 loading="lazy"
-                src={leftArrowImage}
-                className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
+                src={logoImage}
+                className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px] md:w-auto"
               />
-              <div className="self-stretch">{planetName}</div>
-              <img
-                loading="lazy"
-                src={rightArrowImage}
-                className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
-              />
-            </div>
-            <div className="flex justify-center items-center p-1.5 mt-2 w-[47px]">
-              <img loading="lazy" src={compassImage} className="w-full aspect-square" />
+              <div className="flex flex-col justify-center self-stretch">
+                <div className="flex gap-5 justify-center items-center self-stretch mt-2 text-3xl font-semibold text-center text-white uppercase tracking-[5.12px] md:mt-0">
+                  <img
+                    loading="lazy"
+                    src={leftArrowImage}
+                    className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
+                  />
+                  <div className="self-stretch">{planetName}</div>
+                  <img
+                    loading="lazy"
+                    src={rightArrowImage}
+                    className="shrink-0 self-stretch my-auto border-white border-solid aspect-square border-[3px] stroke-[3px] stroke-white w-[33px]"
+                  />
+                </div>
+                <div className="flex justify-center items-center p-1.5 mt-2 w-[47px] md:mt-0">
+                  <img loading="lazy" src={compassImage} className="w-full aspect-square" />
+                </div>
+              </div>
             </div>
+            <img
+              loading="lazy"
+              src={logoImage}
+              className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px] md:w-auto"
+            />
           </div>
         </div>
-        <img
-          loading="lazy"
-          src={logoImage}
-          className="shrink-0 self-stretch my-auto max-w-full aspect-square w-[100px]"
-        />
-      </div>
-    </div>
-  );
+      );
 };
 
 interface RoverSectionProps {

pages/index.tsx

@@ -6,6 +6,7 @@ import { useMediaQuery } from 'react-responsive';
 import { Metadata } from "next";
 import PublicLanding from "../components/_Core/LandingContent";
 import Layout from "../components/_Core/Section/Layout";
+import Planet from "../components/_Core/Section/Planet";
 
 export const metadata: Metadata = {
   title: "Star Sailors",
@@ -19,9 +20,9 @@ export default function Home() {
   if (session) {
     return (
       <Layout>
-        <p>Run into the shadows</p>
+        <Planet backgroundImage="https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE1MTI2Mzk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=OuEtnaPodT1W4BsZZep27dJD5Sk3jzwsrSj1Dktkh2GoojVG~Ttn0WFhDvEBx~m6bX0~~8tEIcqk-NuornLcTtfG0TIE0H18LOPj-BWhTS9dg72-Zkg3ris1MwpAkSuQ~9GUlKPt3N4VgYz5b6h7TmDa06u7PPATCEuIwcjXBs23sNZbW4bAOS9EQTzv9bjPY6rc1IPFq~9ua8xx8~3q8qMlcZ1NoB1pYhCJEM7ROBPBu0fWtp2IlUYNAX21zBJFTgvnqjsIazuual3wLR1ennoO3mRuMS8uzTq6eoHBiIwKkY4rQUFsUpuORWcOpevh7Wz6eGBn7d4X5xDhuBV6oA__&format=jpeg" logoImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" leftArrowImage="https://www.svgrepo.com/show/27797/left-arrow.svg" rightArrowImage="https://www.svgrepo.com/show/27797/right-arrow.svg" structureImage="https://github.com/Signal-K/client/blob/initialClassification/public/assets/Inventory/Structures/TelescopeReceiver.png?raw=true" compassImage="https://www.svgrepo.com/show/532904/compass-drafting.svg" planetName="HelloWorld" activeRoverImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" idleRoverImage="https://www.svgrepo.com/show/440444/space-rover-2.svg" galleryImages={['https://www.svgrepo.com/show/440444/space-rover-2.svg']} centerButtonImage="https://www.svgrepo.com/show/440396/black-hole.svg" />
       </Layout>
-      // <Planet backgroundImage="https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE1MTI2Mzk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=OuEtnaPodT1W4BsZZep27dJD5Sk3jzwsrSj1Dktkh2GoojVG~Ttn0WFhDvEBx~m6bX0~~8tEIcqk-NuornLcTtfG0TIE0H18LOPj-BWhTS9dg72-Zkg3ris1MwpAkSuQ~9GUlKPt3N4VgYz5b6h7TmDa06u7PPATCEuIwcjXBs23sNZbW4bAOS9EQTzv9bjPY6rc1IPFq~9ua8xx8~3q8qMlcZ1NoB1pYhCJEM7ROBPBu0fWtp2IlUYNAX21zBJFTgvnqjsIazuual3wLR1ennoO3mRuMS8uzTq6eoHBiIwKkY4rQUFsUpuORWcOpevh7Wz6eGBn7d4X5xDhuBV6oA__&format=jpeg" logoImage="https://avatars.githubusercontent.com/u/78838067?s=200&v=4" leftArrowImage="https://www.svgrepo.com/show/27797/left-arrow.svg" rightArrowImage="https://www.svgrepo.com/show/27797/right-arrow.svg" structureImage="https://github.com/Signal-K/client/blob/initialClassification/public/assets/Inventory/Structures/TelescopeReceiver.png?raw=true" compassImage="https://www.svgrepo.com/show/532904/compass-drafting.svg" planetName="HelloWorld" activeRoverImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" idleRoverImage="https://www.svgrepo.com/show/440444/space-rover-2.svg" galleryImages={['https://www.svgrepo.com/show/440444/space-rover-2.svg']} centerButtonImage="https://www.svgrepo.com/show/440396/black-hole.svg" />
+      // <Planet backgroundImage="https://cdn.cloud.scenario.com/assets/asset_J8Mo3eYBJWMjdC8wSQQ15edx?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9KOE1vM2VZQkpXTWpkQzh3U1FRMTVlZHg~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE1MTI2Mzk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=OuEtnaPodT1W4BsZZep27dJD5Sk3jzwsrSj1Dktkh2GoojVG~Ttn0WFhDvEBx~m6bX0~~8tEIcqk-NuornLcTtfG0TIE0H18LOPj-BWhTS9dg72-Zkg3ris1MwpAkSuQ~9GUlKPt3N4VgYz5b6h7TmDa06u7PPATCEuIwcjXBs23sNZbW4bAOS9EQTzv9bjPY6rc1IPFq~9ua8xx8~3q8qMlcZ1NoB1pYhCJEM7ROBPBu0fWtp2IlUYNAX21zBJFTgvnqjsIazuual3wLR1ennoO3mRuMS8uzTq6eoHBiIwKkY4rQUFsUpuORWcOpevh7Wz6eGBn7d4X5xDhuBV6oA__&format=jpeg" logoImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" leftArrowImage="https://www.svgrepo.com/show/27797/left-arrow.svg" rightArrowImage="https://www.svgrepo.com/show/27797/right-arrow.svg" structureImage="https://github.com/Signal-K/client/blob/initialClassification/public/assets/Inventory/Structures/TelescopeReceiver.png?raw=true" compassImage="https://www.svgrepo.com/show/532904/compass-drafting.svg" planetName="HelloWorld" activeRoverImage="https://cdn-icons-png.flaticon.com/512/7717/7717354.png" idleRoverImage="https://www.svgrepo.com/show/440444/space-rover-2.svg" galleryImages={['https://www.svgrepo.com/show/440444/space-rover-2.svg']} centerButtonImage="https://www.svgrepo.com/show/440396/black-hole.svg" />
     );
   };