Christophertorres/phs final tours spotlights styling (#62)

* .

* refinements

* .

* style: make navbar sticky

* style: rename pages

* feat: hours and location web layout

* style: make image carousel fit to parent container

* style: update mobile and web designs

* style: fix virtual tours button radius

* style: tour end page fills screen height

* style: back to tours button height adjustment

* style: adjust button-text spacing

* style: update space between title and subtitle for spotlight buttons

* style

* style: fix button radius under more in this spotlight

* style: add back button click effect

* style: tour button with text click effect

* style: add last and next stop button click effects

* style: add spotlight display button click effect

* style: text on click effect

* style: add line clamp 2 to related spotlights

* style: specifically define each font feature

* feat: add links table to supabase

* style: related links component uses new links table

* style: fix eslint and prettier errors

* style: rename navBar.tsx to NavBar.tsx

* style: update page path names

* feat: add exhibits to navigation bar

* style: fix eslint and prettier issues

* style: fix text overflow in spotlight page

package.json

@@ -37,7 +37,8 @@
     "react-icons": "^4.12.0",
     "react-leaflet": "^4.2.1",
     "react-responsive-carousel": "^3.2.23",
-    "slick-carousel": "^1.8.1"
+    "slick-carousel": "^1.8.1",
+    "supabase": "^1.167.4"
   },
   "devDependencies": {
     "@calblueprint/eslint-config-react": "^0.0.3",

public/icons.tsx

@@ -209,6 +209,28 @@ export function Congratulations() {
   );
 }
 
+/**
+ * @returns Left chevron for Carousel.
+ */
+export function LeftChevron() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1rem"
+      height="1.9rem"
+      viewBox="0 0 21 34"
+      fill="none"
+    >
+      <path
+        d="M19 2L3 17.2L19 32.4"
+        stroke="#FFFDF7"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
 /**
  * @returns Right chevron for Carousel.
  */

src/app/exhibitsPage/page.tsx → src/app/exhibits/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
-import NavBar from '../../components/userComponents/navBar/navBar';
+import NavBar from '../../components/userComponents/NavBar/NavBar';
 import { CategoryRow } from '../../types/types';
 import { fetchAllCategories } from '../../supabase/category/queries';
 import Exhibit from '../../components/userComponents/Exhibit/Exhibit';
@@ -65,7 +65,7 @@ function App() {
                 the QR codes on display for more information.
               </p>
             </div>
-            <Link href="/siteMapPage">
+            <Link href="/site-maps">
               <div className="px-4 py-2 mb-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
                 <p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
                   Go to Map
@@ -113,7 +113,7 @@ function App() {
                 the QR codes on display for more information.
               </p>
             </div>
-            <Link href="/siteMapPage">
+            <Link href="/site-maps">
               <div className="px-4 py-2 mt-6 rounded-md border active:border-hunterGreen border-asparagus justify-start items-start inline-flex">
                 <p className="active:text-hunterGreen text-center text-asparagus font-bold font-['Lato'] leading-tight">
                   Go to Map