Merge pull request #32 from camino-school/landing_page

Landing page

assets/css/app.css

@@ -40,4 +40,82 @@
   background-image:
     radial-gradient(circle at 40% 105%, #FEF9C3 200px, transparent 360px),
     radial-gradient(circle at 20% 110%, #ECFCCB 360px, transparent 480px)
+}
+
+/* landing page */
+
+#cover-spot-1 {
+  animation: 8s ease-in-out 2s infinite alternate landing-cover-spot-1;
+}
+
+#cover-spot-2 {
+  animation: 6s ease-in-out 1s infinite alternate landing-cover-spot-2;
+}
+
+#cover-spot-3 {
+  animation: 4s ease-in-out 0s infinite alternate landing-cover-spot-3;
+}
+
+@keyframes landing-cover-spot-1 {
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate(100vw, 100%);
+  }
+}
+
+@keyframes landing-cover-spot-2 {
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate(-100vw, 50%);
+  }
+}
+
+@keyframes landing-cover-spot-3 {
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate(-60vw, -100%);
+  }
+}
+
+#active-learning {
+  background-size: cover;
+  background-position: center;
+  background-image:
+    linear-gradient(0deg, rgba(236, 254, 255, 0.8), rgba(236, 254, 255, 0.8)),
+    url('/images/active-learning-bg.jpg');
+}
+
+#curriculum-spot-1 {
+  animation: 8s linear 0s infinite normal spin;
+}
+
+#curriculum-spot-2 {
+  animation: 10s linear 2s infinite reverse spin;
+}
+
+#curriculum-spot-3 {
+  animation: 8s linear 1s infinite normal spin;
+}
+
+#curriculum-spot-4 {
+  animation: 10s linear 3s infinite reverse spin;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

assets/js/app.js

@@ -23,11 +23,13 @@ import { LiveSocket } from "phoenix_live_view";
 import topbar from "../vendor/topbar";
 import autocompleteHook from "./autocomplete-hook";
 import menuButtonrHook from "./menu-button-hook";
+import navScrollspyHook from "./nav-scrollspy-hook";
 import sliderHook from "./slider-hook";
 
 let Hooks = {};
 Hooks.Autocomplete = autocompleteHook;
 Hooks.MenuButton = menuButtonrHook;
+Hooks.NavScrollspy = navScrollspyHook;
 Hooks.Slider = sliderHook;
 
 let csrfToken = document

assets/js/nav-scrollspy-hook.js

@@ -0,0 +1,38 @@
+const handleIntersect = (navLinks) => (entries, observer) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      for (const navLink of navLinks) {
+        if (navLink.getAttribute('href') === `#${entry.target.id}`) {
+          navLink.setAttribute('aria-current', 'true')
+        } else {
+          navLink.setAttribute('aria-current', 'false')
+        }
+      }
+    }
+  });
+}
+
+const navScrollspyHook = {
+  mounted() {
+    // this hook is expected to be used in a <nav> component.
+    // it will use all of it's children links href as the intersection observer targets
+    const navEl = this.el
+    const navLinks = document.querySelectorAll(`${navEl.id} a`)
+
+    const options = {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver(handleIntersect(navLinks), options);
+
+    for (const navLink of navLinks) {
+      const elementId = navLink.getAttribute('href').replace('#', '')
+      const target = document.getElementById(elementId)
+      observer.observe(target)
+    }
+  },
+};
+
+export default navScrollspyHook;

assets/tailwind.config.js

@@ -34,6 +34,9 @@ module.exports = {
         mono: ['"Source Code Pro"', ...defaultTheme.fontFamily.mono],
         sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans],
       },
+      aria: {
+        current: 'current="true"'
+      },
     },
   },
   plugins: [

lib/lanttern_web/components/core_components.ex

@@ -743,7 +743,7 @@ defmodule LantternWeb.CoreComponents do
   """
   attr :profile_name, :string, required: true
   attr :size, :string, default: "normal", doc: "xs | sm | normal"
-  attr :theme, :string, default: "cyan", doc: "cyan | subtle"
+  attr :theme, :string, default: "cyan", doc: "cyan | rose | subtle"
   attr :class, :any, default: nil
   attr :rest, :global
 
@@ -769,6 +769,7 @@ defmodule LantternWeb.CoreComponents do
   defp profile_icon_size_style(_normal), do: "w-10 h-10 text-sm"
 
   defp profile_icon_theme_style("subtle"), do: "text-ltrn-subtle bg-ltrn-lighter"
+  defp profile_icon_theme_style("rose"), do: "text-ltrn-dark bg-ltrn-mesh-rose"
   defp profile_icon_theme_style(_cyan), do: "text-ltrn-dark bg-ltrn-mesh-primary"
 
   defp profile_icon_initials(full_name) do
@@ -807,6 +808,7 @@ defmodule LantternWeb.CoreComponents do
   attr :profile_name, :string, required: true
   attr :class, :any, default: nil
   attr :id, :string, default: nil
+  attr :theme, :string, default: "cyan"
   attr :rest, :global
   slot :inner_block, required: true
 
@@ -816,7 +818,7 @@ defmodule LantternWeb.CoreComponents do
   def user_icon_block(assigns) do
     ~H"""
     <div id={@id} class={["flex gap-4", @class]} {@rest}>
-      <.profile_icon profile_name={@profile_name} class="shrink-0" />
+      <.profile_icon profile_name={@profile_name} class="shrink-0" theme={@theme} />
       <div class="flex-1">
         <%= render_slot(@inner_block) %>
       </div>

lib/lanttern_web/components/layouts/root.html.heex

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="csrf-token" content={get_csrf_token()} />
-    <.live_title suffix=" · Phoenix Framework">
+    <.live_title>
       <%= assigns[:page_title] || "Lanttern" %>
     </.live_title>
     <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />

lib/lanttern_web/controllers/page_controller.ex

@@ -4,6 +4,6 @@ defmodule LantternWeb.PageController do
   def home(conn, _params) do
     # The home page is often custom made,
     # so skip the default app layout.
-    render(conn, :home, layout: false)
+    render(conn, :home, layout: false, page_title: "Lanttern: visualizing learning patterns")
   end
 end