️🛗🚜 ↝ [SGV2-10]: Running into some issues with bento box & background…

…, attempting to fix
Signal-K · Apr 18, 2024 · 0681a6c · 0681a6c
1 parent 5f81448
commit 0681a6c
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 20 deletions.
diff --git a/components/Content/Visuals/Bento.tsx b/components/Content/Visuals/Bento.tsx
@@ -30,6 +30,24 @@ export function BentoGridThirdDemo() {
     </BentoGrid>
   );
 }
+
+export function BentoGridMobileDemo() {
+    return (
+        <BentoGrid className="max-w-4xl mx-auto md:auto-rows-[20rem]">
+          {mobileItems.map((item, i) => (
+            <BentoGridItem
+              key={i}
+              title={item.title}
+              description={item.description}
+              header={item.header}
+              className={cn("[&>p:text-lg]", item.className)}
+              icon={item.icon}
+            />
+          ))}
+        </BentoGrid>
+    );
+}
+
 const Skeleton = () => (
   <div className="flex flex-1 w-full h-full min-h-[6rem] rounded-xl   dark:bg-dot-white/[0.2] bg-dot-black/[0.2] [mask-image:radial-gradient(ellipse_at_center,white,transparent)]  border border-transparent dark:border-white/[0.2] bg-neutral-100 dark:bg-black"></div>
 );
@@ -287,6 +305,39 @@ const items = [
   },
 ];
 
+const mobileItems = [
+    {
+      title: "AI Content Generation",
+      description: (
+        <span className="text-sm">
+          Experience the power of AI in generating unique content.
+        </span>
+      ),
+      header: <SkeletonOne />,
+      className: "md:col-span-1",
+      icon: <IconClipboardCopy className="h-4 w-4 text-neutral-500" />,
+    },
+    {
+      title: "",
+      description: (
+          null
+      ),
+      header: <SkeletonFour />,
+      className: "md:col-span-2",
+      icon: <IconTableColumn className="h-4 w-4 text-neutral-500" />,
+    },
+
+    {
+      title: "",
+      description: (
+        null
+      ),
+      header: <SkeletonFive />,
+      className: "md:col-span-1",
+      // icon: <IconBoxAlignRightFilled className="h-4 w-4 text-neutral-500" />,
+    },
+  ];
+
 
 /*
 <div className="flex-col justify-center mt-10">

diff --git a/components/_Core/Section/Layout.tsx b/components/_Core/Section/Layout.tsx
@@ -55,16 +55,7 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
   }
 
   return (
-    <div className="flex relative items-start h-screen overflow-hidden">
-      {/* <div className="absolute top-4 right-4 px-20 py-20">
-      <img
-        className="rounded-full w-32 h-32 z-50"
-        src="https://cdn.cloud.scenario.com/assets-transform/KO7W80GhRPab0kOWPFsFIw?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vS083VzgwR2hSUGFiMGtPV1BGc0ZJdz9wPTEwMCoiLCJDb25kaXRpb24iOnsiRGF0ZUxlc3NUaGFuIjp7IkFXUzpFcG9jaFRpbWUiOjE3MTQ1MjE1OTl9fX1dfQ__&Key-Pair-Id=K36FIAB9LE2OLR&Signature=fUmRKK~sb9XaklxuXfXmzRd4YUzATcKtCcXSpu7glOyLJkhX1p9HIVts7hys4DJiDaj1YYK42r5S0mWVRCvUuT29hoDESp0NTHf6pYBAqXwXSt-bHk1nwsqlGObpB5H-EbSwhKAIDwyR1a4WgA9PpHky-h2lcH9pdu6Ec3twrpQKebDwHUgTwtlltUrRSaH1O6lRdm312oEvQmTWE7815HgKgknfZwGny5OiBnVhr7od~rOhwDbbdAhZnwD5GRjNgZUjeDQQQ5IIsRuqm2Lmoq2LjCkfQIQAi8skSrwq67PQsDnuxwbfmvbtiK0wFVyFrWIxIJOgYXB1SJonxNPcNA__"
-        alt="image description"
-        height='20px'
-        width='20px' // https://cdn.cloud.scenario.com/assets-transform/asset_PYYjX5wik9uUqRFBRdYGYLsE?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy10cmFuc2Zvcm0vYXNzZXRfUFlZalg1d2lrOXVVcVJGQlJkWUdZTHNFP3A9MTAwKiIsIkNvbmRpdGlvbiI6eyJEYXRlTGVzc1RoYW4iOnsiQVdTOkVwb2NoVGltZSI6MTcxNDUyMTU5OX19fV19&Key-Pair-Id=K36FIAB9LE2OLR&Signature=DboZe1XxGjahVU3yAzryD1Q9u9K8ED-SVG0uhVexkb9XwsAOpxE6yUJ4oJVzbe4L4AhZcpWpYCgU5E3K7IS3jpA~fqATCYOdw0zZMpGI2-dGhbrBBuszSEaBgv0llyAnYDTpSDIyfs8vTKfFsT-j5Kvg-TA0JbJtT74WPs9VSHKkH148XEqniSKNUM7Gj4yOHZ9zTwIP1l0y5SSUuPPIGt9hThis0BOMZbDMr~rKLW~XdU9RiUD25eEJwk9D-FEiXrEg8Vexiy~iKJSU6Bwv51bvdJJRWYoClv3iqYnuncIdbtGrA1KtpLaGyudZAvob-8ul3JaEJ3i-SsRzjAnwMA__ // Waterdrop.jpg
-      />
-    </div> */}
+    <div className="flex relative items-start h-screen y-full">
       {isTabletOrMobile && (
         <style jsx global>
           {`
@@ -88,6 +79,7 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
           {`
             body {
               background: url('https://cdn.cloud.scenario.com/assets/asset_qKG9F9VyYL2Lrm4NypYEH8Pd?p=100&Policy=eyJTdGF0ZW1lbnQiOlt7IlJlc291cmNlIjoiaHR0cHM6Ly9jZG4uY2xvdWQuc2NlbmFyaW8uY29tL2Fzc2V0cy9hc3NldF9xS0c5RjlWeVlMMkxybTROeXBZRUg4UGQ~cD0xMDAqIiwiQ29uZGl0aW9uIjp7IkRhdGVMZXNzVGhhbiI6eyJBV1M6RXBvY2hUaW1lIjoxNzE0NTIxNTk5fX19XX0_&Key-Pair-Id=K36FIAB9LE2OLR&Signature=aS2TO5Cc8KU13TNhVDqsu4si2lUH8IUAQAtuplL1X5Fr78mWwr22xnYy0nzoSsSdwW2TYbqFuoRoqpdX8CVV-kHmmlM27Tm7xjkBjvB-Otjbjlnhbvu~Ut72YtI-Y2edrNE3XKTNf5XhcJ9-y5SlF02zC0DeFAVgDbPsQLGSJIcQ1QrN0ayX~HyA2I5K39RYlc-N3WGgRPxLMBgzrWAZurK6SqN5xCmu1~nWL1t5IadvkDyDBG~ctN-jSX-bsDmx80cCKVLi7C-IfFzCtTe4nZ0qdKbKd~AgQekbhSsl40FZhbaQYJmiS5pQ2wlDGkd0yBhOKuVgkFT8UY3y1pE1XQ__&format=jpeg') center/cover;
+              background-attachment: fixed;
             }
 
             @media only screen and (max-width: 767px) {
@@ -105,20 +97,13 @@ export const LayoutNoNav: React.FC<DashboardLayoutProps> = ({ children }) => {
     <div className="p-5">
         {children}
     </div>
-    <div className="mt-10 relative z-0">
+    <div className="mt-10">
         <div className="fixed bottom-10 left-0 w-full">
             {showGalaxy && (
                 <div className="z-40">
                     <Garden onClose={() => setShowGalaxy(false)} />
                 </div>
             )}
-
-            {/* FeedOverlay section */}
-            {/* {showFeedOverlay && (
-                <div className="fixed bottom-0 left-0 w-full z-50 mt-20">
-                    <FeedOverlay onClose={() => handleCloseFeedOverlay()} />
-                </div>
-            )} */}
         </div>
     </div>
 </main>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -22,7 +22,7 @@ import Navigation, {
 import { MinimalAccordion, OnboardingWindows } from "../components/Gameplay/onboarding";
 import PlanetCharacter, { RoverCharacter } from "../components/Content/Assets/PlanetCharacter";
 import Link from "next/link";
-import { BentoGridThirdDemo } from "../components/Content/Visuals/Bento";
+import { BentoGridMobileDemo, BentoGridThirdDemo } from "../components/Content/Visuals/Bento";
 
 export const metadata: Metadata = {
   title: "Star Sailors",
@@ -123,7 +123,8 @@ export function PublicLanding() {
         <LayoutNoNav>
           {isDesktopOrLaptop && ( <Navigation /> )}
           <div className="pt-10">
-            <BentoGridThirdDemo />
+            {isDesktopOrLaptop && ( <BentoGridThirdDemo /> )};
+            {isTabletOrMobile && ( <BentoGridMobileDemo /> )};
           </div>
         </LayoutNoNav>
       );