Add Features page

src/app/features/page.tsx

@@ -0,0 +1,91 @@
+import Card from "@/components/card";
+import Container from "@/components/layout/container";
+import Header from "@/components/layout/header";
+import MainWrapper from "@/components/layout/main-wrapper";
+import PageHeader from "@/components/layout/page-header";
+
+export default function Homepage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <PageHeader
+          title="Features and Implementations"
+          description="Hyku began as the Hydra-in-a-Box project. Based on Hyrax, it offers an easy-to-install, easy-to-configure, feature-rich solution supporting next-generation web technologies. Hyku reduces barriers to effective asset management and preservation for collections and content types of many kinds, and is supported by a vibrant and ever-growing open source community."
+        />
+        <Container>
+          <h2>Features</h2>
+
+          <p>
+            Building on Hyrax, Hyku has a long list of features and
+            distinctions, including:
+          </p>
+          <ul>
+            <li>
+              Multi-tenancy, or the ability to host multiple repository “slices”
+              within the same application, each with its own users, objects, and
+              look & feel
+            </li>
+            <li>Support for the IIIF Image and Presentation APIs</li>
+            <li>
+              Support for harvesting metadata and content via ResourceSync
+            </li>
+            <li>Rich object viewing using the Universal Viewer</li>
+            <li>
+              Two bundled work types: Image Work and Generic Work and more!
+            </li>
+          </ul>
+          <section className="space-y-6">
+            <div>
+              <h3>Hyku Beta 2.0.0</h3>
+              <p>
+                Hyku Beta 2.0.0 was released in October 2018 and Hyku was
+                promoted out of Samvera Labs in February 2019. Information about
+                the initial Beta Test can be found below and user documentation
+                is being added to this site regularly.
+              </p>
+            </div>
+            <div>
+              <h3>Hyku 3.0</h3>
+              <p>
+                Hyku 3.0 was released in early 2021, bringing Hyku up to speed
+                with Hyrax, and introducing new theming and other
+                configurations.
+              </p>
+            </div>
+            <div>
+              <h3>Hyku 4.0</h3>
+              <p>
+                Hyku 4.0 was released in May 2022, offering several major new
+                features including cross-tenant search, three new UI theming
+                templates that can be implemented from the Admin appearance
+                dashboard, the ability to make tenants private, to feature
+                collections, and to support multiple domains per tenant.
+              </p>
+            </div>
+            <div>
+              <h3>Hyku 5.0</h3>
+              <p>
+                Hyku 5.0 was released in February 2023, offering the ability to
+                use Solr graph queries to skip having to do nested indexing.
+                Features include Groups with Roles and the ability to implement
+                Google or Motomo analytics.
+              </p>
+            </div>
+            <p>
+              Visit the Hyku YouTube Channel for feature demos and the latest
+              updates.
+            </p>
+          </section>
+
+          <section className="pt-20">
+            <h2>Implementations</h2>
+            <p>
+              https://samvera.atlassian.net/wiki/spaces/hyku/pages/819724378/Hyku+Implementations
+            </p>
+          </section>
+        </Container>
+      </MainWrapper>
+    </div>
+  );
+}

src/app/getting-started/page.tsx

@@ -0,0 +1,17 @@
+import Card from "@/components/card";
+import Container from "@/components/layout/container";
+import Header from "@/components/layout/header";
+import MainWrapper from "@/components/layout/main-wrapper";
+import PageHeader from "@/components/layout/page-header";
+
+export default function Homepage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <PageHeader title="Getting Started" description="Something here" />
+        <Container>asdf</Container>
+      </MainWrapper>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import "./globals.css";
+import "@/styles/globals.css";
 
 import Footer from "@/components/layout/footer";
 import { Inter } from "next/font/google";

src/app/page.tsx

@@ -1,77 +1,80 @@
 import Header from "@/components/layout/header";
 import Image from "next/image";
+import MainWrapper from "@/components/layout/main-wrapper";
 import appScreenshot from "../../public/app-screenshot.png";
 
-export default function Example() {
+export default function Homepage() {
   return (
     <div className="">
       <Header />
 
-      <div className="relative isolate pt-14">
-        <div
-          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-          aria-hidden="true"
-        >
+      <MainWrapper>
+        <div className="relative isolate">
           <div
-            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#bef264] to-[#ecfccb] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-            }}
-          />
-        </div>
-        <div className="py-24 sm:py-32 lg:pb-40">
-          <div className="mx-auto max-w-7xl px-6 lg:px-8">
-            <div className="mx-auto max-w-2xl text-center">
-              <h1 className="text-4xl font-bold tracking-tight text-foreground  sm:text-6xl">
-                The Next Generation Repository Solution
-              </h1>
-              <p className="mt-6 text-lg leading-8 text-foreground-muted">
-                Hyku is a digital repository that provides a robust and flexible
-                platform for institutions to manage, preserve, and provide
-                access to digital content.
-              </p>
-              <div className="mt-10 flex items-center justify-center gap-x-6">
-                <a
-                  href="#"
-                  className="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
-                >
-                  Get started
-                </a>
-                <a
-                  href="#"
-                  className="text-sm font-semibold leading-6 text-foreground"
-                >
-                  Documentation <span aria-hidden="true">→</span>
-                </a>
+            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true"
+          >
+            <div
+              className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#bef264] to-[#ecfccb] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+              style={{
+                clipPath:
+                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+              }}
+            />
+          </div>
+          <div className="py-24 sm:py-32 lg:pb-40">
+            <div className="mx-auto max-w-7xl px-6 lg:px-8">
+              <div className="mx-auto max-w-2xl text-center">
+                <h1 className="text-4xl font-bold tracking-tight text-foreground  sm:text-6xl">
+                  The Next Generation Repository Solution
+                </h1>
+                <p className="mt-6 text-lg leading-8 text-foreground-muted">
+                  Hyku is a digital repository that provides a robust and
+                  flexible platform for institutions to manage, preserve, and
+                  provide access to digital content.
+                </p>
+                <div className="mt-10 flex items-center justify-center gap-x-6">
+                  <a
+                    href="#"
+                    className="rounded-md bg-primary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+                  >
+                    Get started
+                  </a>
+                  <a
+                    href="#"
+                    className="text-sm font-semibold leading-6 text-foreground"
+                  >
+                    Documentation <span aria-hidden="true">→</span>
+                  </a>
+                </div>
               </div>
-            </div>
-            <div className="mt-16 flow-root sm:mt-24">
-              <div className="-m-2 rounded-xl bg-foreground/5 p-2 ring-1 ring-inset ring-foreground/10 lg:-m-4 lg:rounded-2xl lg:p-4">
-                <Image
-                  src={appScreenshot}
-                  alt="App screenshot"
-                  width={2432}
-                  height={1442}
-                  className="rounded-md shadow-2xl ring-1 ring-foreground/10"
-                />
+              <div className="mt-16 flow-root sm:mt-24">
+                <div className="-m-2 rounded-xl bg-foreground/5 p-2 ring-1 ring-inset ring-foreground/10 lg:-m-4 lg:rounded-2xl lg:p-4">
+                  <Image
+                    src={appScreenshot}
+                    alt="App screenshot"
+                    width={2432}
+                    height={1442}
+                    className="rounded-md shadow-2xl ring-1 ring-foreground/10"
+                  />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div
-          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
-          aria-hidden="true"
-        >
           <div
-            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#bef264] to-[#ecfccb] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
-            style={{
-              clipPath:
-                "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
-            }}
-          />
+            className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+            aria-hidden="true"
+          >
+            <div
+              className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#bef264] to-[#ecfccb] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+              style={{
+                clipPath:
+                  "polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
+              }}
+            />
+          </div>
         </div>
-      </div>
+      </MainWrapper>
     </div>
   );
 }

src/components/card.tsx

@@ -0,0 +1,7 @@
+export default function Card({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="overflow-hidden rounded-lg  shadow">
+      <div className="px-4 py-5 sm:p-6">{children}</div>
+    </div>
+  );
+}

src/components/layout/container.tsx

@@ -0,0 +1,5 @@
+export default function Container({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">{children}</div>
+  );
+}

src/components/layout/header.tsx

@@ -4,6 +4,7 @@ import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 
 import { Dialog } from "@headlessui/react";
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 import hykuLogo from "../../../public/logo-hyku.png";
 import { useState } from "react";
@@ -37,10 +38,10 @@ const Header = () => {
         aria-label="Global"
       >
         <div className="flex lg:flex-1">
-          <a href="#" className="-m-1.5 p-1.5">
-            <span className="sr-only">Your Company</span>
+          <Link href="/" className="-m-1.5 p-1.5">
+            <span className="sr-only">Hyku</span>
             <Image src={hykuLogo} alt="Hyku logo" className="h-8 w-auto" />
-          </a>
+          </Link>
         </div>
 
         {/* Mobile nav bar */}

src/components/layout/main-wrapper.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const MainWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <main className="pt-14">{children}</main>;
+};
+
+export default MainWrapper;

src/components/layout/page-header.tsx

@@ -0,0 +1,19 @@
+import Container from "@/components/layout/container";
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+}
+
+export default function PageHeader({ title, description }: PageHeaderProps) {
+  return (
+    <div className=" py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h1 className="">{title}</h1>
+          <p className="mt-6 text-lg leading-8 text-gray-600">{description}</p>
+        </div>
+      </Container>
+    </div>
+  );
+}