home page

src/assets/components/Footer.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+
+export default function Footer() {
+  return (
+    <motion.footer initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{delay:0.2}}>
+      <div className="footer-container">
+        <div className="left">
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/download">Download</Link>
+            </li>
+            <li>
+              <Link to="/features">Features</Link>
+            </li>
+            <li>
+              <Link to="/tutorials/All">Tutorials</Link>
+            </li>
+            <li>
+              <Link to="/documentation/home">Documentation</Link>
+            </li>
+          </ul>
+        </div>
+        <div className="vertical-line"></div>
+        <div className="right">
+          <ul>
+            <li>
+              <strong>Nathan Pankratz, PhD</strong>
+            </li>
+            <li>Associate Professor of Laboratory Medicine & Pathology</li>
+            <li>University of Minnesota</li>
+            <li>515 Delaware Street SE Minneapolis, MN 55455</li>
+          </ul>
+          <ul>
+            <li>612-624-2456</li>
+            <li>pankr018@umn.edu</li>
+            <li>
+              <Link>YouTube</Link>
+            </li>
+            <li>
+              <Link>LinkedIn</Link>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </motion.footer>
+  );
+}

src/assets/pages/download/index.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Changelog from "./Changelog";
+import Footer from "../../../assets/components/Footer"
 
 export default function index() {
   return (
@@ -15,6 +16,8 @@ export default function index() {
           </a>
         </div>
         <div className="version-notice">Must have Java 11 or newer installed</div>
+        <div className="gradient"></div>
+        <img src="/images/grid.png" alt="grid graphic" className="grid"/>
       </header>
       <div className="custom-shape-divider-bottom-1686808296">
         <svg
@@ -35,6 +38,7 @@ export default function index() {
           <Changelog />
         </div>
       </main>
+      <Footer />
     </>
   );
 }

src/assets/pages/features/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Section from "./Section";
 import { motion } from "framer-motion";
+import Footer from "../../../assets/components/Footer";
 
 export default function index() {
   const [HTML, setHTML] = useState([]);
@@ -16,16 +17,19 @@ export default function index() {
   }, []);
 
   return (
-    <main className="features">
-      <div className="body">
-        {HTML.map((e, i) => {
-          return (
-            <motion.section key={i} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-              <Section data={e} />
-            </motion.section>
-          );
-        })}
-      </div>
-    </main>
+    <>
+      <main className="features">
+        <div className="body">
+          {HTML.map((e, i) => {
+            return (
+              <motion.section key={i} initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                <Section data={e} />
+              </motion.section>
+            );
+          })}
+        </div>
+      </main>
+      <Footer />
+    </>
   );
 }

src/assets/pages/home/index.jsx

@@ -1,9 +1,133 @@
 import React from "react";
+import { Link } from "react-router-dom";
+import Footer from "../../../assets/components/Footer";
+import { motion } from "framer-motion";
 
 export default function index() {
   return (
-    <main>
-      <h1>Home</h1>
-    </main>
+    <>
+      <header className="home-header">
+        <div className="header">
+          <h1>
+            Automated best practices for processing and visualizing <br /> genomic data
+          </h1>
+          <div className="buttons">
+            <Link className="download" to="/download">
+              Download Genvisis
+            </Link>
+            <Link className="documentation" to="/documentation/home">
+              Documentation
+            </Link>
+          </div>
+          <img
+            src="src/assets/pages/home/images/Genvisis-Graphic1.png"
+            alt="background graphic"
+            className="header-background-graphic"
+          />
+          <img
+            src="src/assets/pages/home/images/computer-screen.png"
+            alt="computer screen"
+            className="computer-screen"
+          />
+          <img
+            src="src/assets/pages/home/images/home-page-image.png"
+            alt="Screenshot of the Genvisis Software"
+            className="computer-screen-image"
+          />
+          <motion.img
+            initial={{ opacity: 0, x: 50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{duration: 0.6, x:{duration: 1, ease: [0, 0.89, 0.08, 1]}}}
+            src="src/assets/pages/home/images/home-page-image1.png"
+            alt="Screenshot of the Genvisis Software"
+            className="floating-window-image"
+          />
+        </div>
+        <div className="home-custom-shape-divider home-dividers">
+          <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1200 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z"
+              fill="rgb(255, 255, 255)"
+            ></path>
+          </svg>
+        </div>
+      </header>
+      <main className="home">
+        <section className="section1">
+          <div className="section-image-container">
+            <div className="image-backdrop">
+              <img
+                src="src/assets/pages/home/images/home-page-image2.png"
+                alt="Screenshot of the Genvisis Software"
+              />
+            </div>
+          </div>
+          <div className="content">
+            <h2>Dynamic visualization</h2>
+            <p>
+              Genvisis is a robust software package that takes advantage of unique
+              compressed data structures to efficiently process, assess quality of,
+              analyze, and visualize the intensity data from GWAS arrays.
+            </p>
+            <p>
+              Specialized algorithms are used to call CNVs, and each algorithm uses its
+              own approach. Genvisis allows a CNV to be inspected by visualizing
+              boundaries overlaid with probe intensities.
+            </p>
+          </div>
+        </section>
+        <section className="section2">
+          <div className="content">
+            <h2>Powerful features for experts and novices</h2>
+            <p>
+              Genvisis is an open-source, end-to-end solution for processing raw array
+              data and deep resequencing data into variant calls, especially copy number
+              variant calls. It also introduces novel methodology to optimize accuracy by
+              directly addressing the effects of DNA quality, DNA quantity, and
+              batch/plate/flow cell in the data normalization.
+            </p>
+            <Link to="/features">View Features</Link>
+          </div>
+          <img
+            src="src/assets/pages/home/images/Features-Graphic.svg"
+            alt="Genvisis Graphic"
+          />
+        </section>
+        <div className="home-custom-shape-divider home-dividers">
+          <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1200 120"
+            preserveAspectRatio="none"
+          >
+            <path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z"></path>
+          </svg>
+        </div>
+        <section className="section3">
+          <div className="content">
+            <h2>Simplifying complex analyses</h2>
+            <p>
+              Developed in the Pankratz Lab at the University of Minnesota, Genvisis
+              introduces novel methodologies and streamlines genomic workflows.
+            </p>
+          </div>
+          <div className="graphic-container">
+            <img
+              src="src/assets/pages/home/images/Genvisis-Graphic.png"
+              alt="Genvisis Graphic"
+            />
+          </div>
+          <div className="download-link">
+            <Link to="/download">Download Genvisis</Link>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </>
   );
 }

src/assets/pages/tutorials/Video.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from "react";
 import { useLocation } from "react-router-dom";
 import { Link } from "react-router-dom";
 import { motion } from "framer-motion";
+import Footer from "../../../assets/components/Footer"
 
 export default function Video() {
   const location = useLocation();
@@ -24,56 +25,61 @@ export default function Video() {
   }, [location]);
 
   return (
-    <main className="tutorial-video">
-      <aside className="sidebar">
-        <Link to={"/tutorials/All"} className="back">
-          <svg
-            id="a"
-            xmlns="http://www.w3.org/2000/svg"
-            width="64"
-            height="64"
-            viewBox="0 0 64 64"
-            style={{ rotate: "180deg" }}
-          >
-            <path
-              d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
-              fill="#fff"
-              stroke="#000"
-              strokeLinecap="round"
-              strokeMiterlimit="10"
-              strokeWidth="9"
-            />
-          </svg>
-          Back
-        </Link>
-        <div className="dividing-line"></div>
-        <div className="video-list">
-          {videoList?.map((e, i) => {
-            return (
-              <Link
-                className={paths[1] === e.title ? "active" : ""}
-                key={i}
-                to={`/tutorials/${paths[0]}/${e.title}`}
-              >
-                {e.title}
-              </Link>
-            );
-          })}
-        </div>
-      </aside>
-      <motion.div
-        key={content.src}
-        initial={{ y: 200, opacity: 0 }}
-        animate={{ y: 0, opacity: 1 }}
-        transition={{ y: { ease: [0.01, 0.83, 0, 0.99] }, duration: 0.5 }}
-        className="content"
-      >
-        <h1>{content.title} <span className="category">{paths[0]}</span></h1>
-        <video controls ref={videoRef}>
-          <source src={`/Tutorials/videos/${content.src}`} type="video/mp4" />
-        </video>
-        <p>{content.summary}</p>
-      </motion.div>
-    </main>
+    <>
+      <main className="tutorial-video">
+        <aside className="sidebar">
+          <Link to={"/tutorials/All"} className="back">
+            <svg
+              id="a"
+              xmlns="http://www.w3.org/2000/svg"
+              width="64"
+              height="64"
+              viewBox="0 0 64 64"
+              style={{ rotate: "180deg" }}
+            >
+              <path
+                d="m19.53,53.08l23.7-20.07c.64-.54.64-1.48,0-2.02L19.53,10.92"
+                fill="#fff"
+                stroke="#000"
+                strokeLinecap="round"
+                strokeMiterlimit="10"
+                strokeWidth="9"
+              />
+            </svg>
+            Back
+          </Link>
+          <div className="dividing-line"></div>
+          <div className="video-list">
+            {videoList?.map((e, i) => {
+              return (
+                <Link
+                  className={paths[1] === e.title ? "active" : ""}
+                  key={i}
+                  to={`/tutorials/${paths[0]}/${e.title}`}
+                >
+                  {e.title}
+                </Link>
+              );
+            })}
+          </div>
+        </aside>
+        <motion.div
+          key={content.src}
+          initial={{ y: 200, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ y: { ease: [0.01, 0.83, 0, 0.99] }, duration: 0.5 }}
+          className="content"
+        >
+          <h1>
+            {content.title} <span className="category">{paths[0]}</span>
+          </h1>
+          <video controls ref={videoRef}>
+            <source src={`/Tutorials/videos/${content.src}`} type="video/mp4" />
+          </video>
+          <p>{content.summary}</p>
+        </motion.div>
+      </main>
+      <Footer />
+    </>
   );
 }

src/assets/pages/tutorials/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { AnimatePresence, motion } from "framer-motion";
+import Footer from "../../../assets/components/Footer"
 
 export default function index() {
   const [sidebar, setSidebar] = useState([]);
@@ -99,6 +100,7 @@ export default function index() {
           </AnimatePresence>
         </div>
       </main>
+      <Footer />
     </>
   );
 }