Finished temp landing page

src/components/LandingBackground/landingBackground.js

@@ -1,15 +1,17 @@
-import React, { useEffect, useState } from 'react';
-import { Canvas } from '@react-three/fiber';
+import React, { useEffect, useState, useRef } from 'react';
+import { Canvas, extend} from '@react-three/fiber';
+import { WebGLRenderer } from 'three';
 import Scene from './scene';
 
 const LandingBackground = () => {
     const [contextLost, setContextLost] = useState(false);
     const [webGLSupported, setWebGLSupported] = useState(true);
+    const canvasRef = useRef();
 
     useEffect(() => {
         const canvasElem = document.createElement('canvas');
         const gl = canvasElem.getContext('webgl') || canvasElem.getContext('experimental-webgl');
-        
+
         if (!gl) {
             setWebGLSupported(false);
             console.log('WebGL is not supported by your browser or device.');
@@ -23,20 +25,25 @@ const LandingBackground = () => {
         const handleContextLost = (event) => {
             event.preventDefault();
             setContextLost(true);
-            console.log("WebGL context lost. Please refresh the page or try with a different browser/device.");
+            console.log("WebGL context lost. Attempting to restore...");
         };
 
         const handleContextRestored = () => {
             setContextLost(false);
-            console.log("WebGL context restored. Reinitializing component...");
+            console.log("WebGL context restored. Reinitializing renderer...");
+            // Reinitialize the renderer here
+            if (canvasRef.current) {
+                const renderer = new WebGLRenderer({ canvas: canvasRef.current });
+                extend({ renderer });
+            }
         };
 
-        document.addEventListener('webglcontextlost', handleContextLost);
-        document.addEventListener('webglcontextrestored', handleContextRestored);
+        canvasElem.addEventListener('webglcontextlost', handleContextLost);
+        canvasElem.addEventListener('webglcontextrestored', handleContextRestored);
 
         return () => {
-            document.removeEventListener('webglcontextlost', handleContextLost);
-            document.removeEventListener('webglcontextrestored', handleContextRestored);
+            canvasElem.removeEventListener('webglcontextlost', handleContextLost);
+            canvasElem.removeEventListener('webglcontextrestored', handleContextRestored);
         };
     }, []);
 
@@ -46,8 +53,8 @@ const LandingBackground = () => {
 
     return (
         contextLost ?
-            <div>WebGL context lost. Please refresh the page or try with a different browser/device.</div> :
-            <Canvas style={{ position: 'absolute', top: 0, left: 0, height: '100vh', zIndex: -1 }}>
+            <div>WebGL context lost. Attempting to restore...</div> :
+            <Canvas ref={canvasRef} style={{ position: 'absolute', top: 0, left: 0, height: '100vh', zIndex: -1 }}>
                 <ambientLight intensity={0.5} />
                 <pointLight position={[10, 10, 10]} />
                 <Scene />

src/components/LandingDownloadLink/landingDownloadLink.js

@@ -1,10 +1,11 @@
 import React from 'react';
+import LandingDownloadLinkStyles from './landingDownloadLink.module.css'
 
 const LandingDownloadLink = ({ fileName, label }) => {
   const fileUrl = `${process.env.PUBLIC_URL}/useCases/${fileName}`;
 
   return (
-    <a href={fileUrl} download>
+    <a href={fileUrl} className={LandingDownloadLinkStyles.linkElement} download>
       {label}
     </a>
   );

src/components/LandingDownloadLink/landingDownloadLink.module.css

@@ -0,0 +1,31 @@
+.linkElement {
+    cursor: pointer;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
+    background-color: #3d3d3d;
+    color: #ffffff;
+    padding: 12px 24px;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    text-decoration: none;
+}
+
+.linkElement:hover, .linkElement:focus {
+    background-color: #333333;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+    transform: translateY(-2px);
+}
+
+.linkElement:active {
+    background-color: #0d0d0d;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
+    transform: translateY(1px);
+}

src/components/LandingImage/landingImage.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import LandingImageStyles from "./landingImage.module.css";
 
-const LandingImage = ({ imageSrc, width, height, maintainAspectRatio = false }) => {
+const LandingImage = ({ imageSrc, width, height, maintainAspectRatio = false, addDarkBorder = false }) => {
     const [animationOffset, setAnimationOffset] = useState(1);
     const imageRef = useRef(null);
 
@@ -29,8 +29,13 @@ const LandingImage = ({ imageSrc, width, height, maintainAspectRatio = false })
         ? { maxWidth: '100%', maxHeight: '100%' }
         : { width: width, height: height };
 
+    let imageContainerClass = LandingImageStyles.image;
+    if (addDarkBorder) {
+        imageContainerClass += ` ${LandingImageStyles.darkShadow}`;
+    }
+
     return (
-        <div className={LandingImageStyles.image} style={{ opacity: animationOffset }}>
+        <div className={imageContainerClass} style={{ opacity: animationOffset }}>
             <img ref={imageRef} src={imageSrc} alt="Sample" style={imageStyle} />
         </div>
     );

src/components/LandingImage/landingImage.module.css

@@ -1,4 +1,5 @@
 .image {
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -9,4 +10,16 @@
 .image img {
     max-width: 100%;
     max-height: 100%;
+    display: block;
+}
+
+.darkShadow::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 0 2px #000000;
+    pointer-events: none;
 }

src/components/LandingSlide/landingSlide.module.css

@@ -3,8 +3,10 @@
     width: 100%;
     max-width: 800px;
     margin: auto;
-    border: 2px solid #ddd;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border: 2px solid #ddd; /* Consider adding a gradient or a more appealing solid color */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* More refined shadow */
+    overflow: hidden; /* To ensure rounded corners are applied to child elements */
 }
 
 .imageContainer {
@@ -18,9 +20,12 @@
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
+    width: 100%;
+    /* Adjusted to ensure full width */
+    height: 100%;
+    /* Adjusted to ensure full height */
+    object-fit: cover;
+    /* Changed from 'contain' to 'cover' */
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }
@@ -29,36 +34,25 @@
     opacity: 1;
 }
 
-
 .slideTextContainer {
     margin-top: 20px;
     text-align: center;
     padding: 15px 20px;
     color: #333;
     background-color: #ffffff;
-    /* Lighter background for better readability */
     border: 1px solid #ccc;
-    /* Softer border color */
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    /* Slightly larger shadow for depth */
     border-radius: 8px;
-    /* Increased border-radius for a modern look */
     max-width: 90%;
-    /* Limiting the maximum width for better text display */
     margin-left: auto;
-    /* Center align the container */
     margin-right: auto;
 }
 
 .slideText {
     font-size: 18px;
-    /* Increased font size */
     line-height: 1.6;
-    /* Improved line height for readability */
     color: #555;
-    /* Slightly darker color for contrast */
     font-weight: 400;
-    /* Normal font-weight for better readability */
 }
 
 .controls {

src/components/Navbar/navbar.js

@@ -23,7 +23,7 @@ export default function Navbar() {
                         <CustomLink to="/" onClick={toggleMenu}>Home</CustomLink>
                     </li>
                     <li className={NavbarStyles.listItem}>
-                        <CustomLink to="/queries" onClick={toggleMenu}>Queries</CustomLink>
+                        <CustomLink to="/intuition" onClick={toggleMenu}>Queries</CustomLink>
                     </li>
                     <li className={NavbarStyles.listItem}>
                         <CustomLink to="/about" onClick={toggleMenu}>About</CustomLink>

src/components/ResultTray/resultTray.js

@@ -131,7 +131,7 @@ function ResultTray({ activeGraphId, graphs, allNodes, edgeData, insideData, bin
             shownOptionals = [];
         }
         else {
-            buttonPropertyLabel = `Set '${selectedNode.type}' properties`;
+            buttonPropertyLabel = `Set '${selectedNode.type}' object properties`;
             buttonOptionalLabel = `Set '${selectedNode.type}' optional properties`;
             buttonInsideLabel = `Set '${selectedNode.type}' data properties`;
 

src/components/SearchResults/searchResults.module.css

@@ -37,8 +37,8 @@
 .resultCount {
     display: none;
     position: absolute;
-    bottom: 0px;
-    right: 0px;
+    bottom: 0;
+    right: 0;
     background-color: lightGray;
     padding: 2px;
     border-radius: 2px;
@@ -47,7 +47,7 @@
 }
 
 .resultCount.shown {
-    display: inline;
+    display:inline-block; 
 }
 
 .openButton {
@@ -84,9 +84,10 @@
 .input::-webkit-search-cancel-button {
     display: none;
 }
-
+/*
 @-moz-document url-prefix() {
     .resultCount {
         bottom: calc(-980%);
     }
-}
+}
+*/

src/index.js

@@ -25,7 +25,7 @@ root.render(
           element={<Main />}
         ></Route>
         <Route
-          path="/queries"
+          path="/intuition"
           element={<Queries />}
         ></Route>
         <Route