diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..4d765f2
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}
diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml
new file mode 100644
index 0000000..c15d423
--- /dev/null
+++ b/.github/workflows/nextjs.yml
@@ -0,0 +1,110 @@
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        job: ["prettier", "build"]
+
+    env:
+      NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
+      NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN }}
+      NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/pnpm-lock.yaml" ]; then
+              echo "manager=pnpm" >> $GITHUB_OUTPUT
+              echo "command=install" >> $GITHUB_OUTPUT
+              echo "runner=pnpm" >> $GITHUB_OUTPUT
+              exit 0
+          elif [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Check formatting
+        run: npx prettier --check .
+        if: matrix.job == 'prettier'
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        if: matrix.job == 'build'
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+        if: matrix.job == 'build'
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
new file mode 100644
index 0000000..2ef178b
--- /dev/null
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,34 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, playwright]
+  pull_request:
+    branches: [main]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Build the app
+        env:
+          CONTENTFUL_CMA_TOKEN: ${{ secrets.CONTENTFUL_CMA_TOKEN }}
+          NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN }}
+          NEXT_PUBLIC_CONTENTFUL_SPACE_ID: ${{ secrets.NEXT_PUBLIC_CONTENTFUL_SPACE_ID }}
+          NEXT_PUBLIC_GOOGLE_ANALYTICS_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID }}
+        run: pnpm build
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8555bac
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# vs code
+.vscode/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..eeeb7be
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+pnpm-lock.yaml
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..33a3ebc
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "printWidth": 80
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1d02d8c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,47 @@
+# Samvera Static Site Template (featuring Hyku)
+
+This repo is a [Next.js](https://nextjs.org/) static site project providing information about the Hyku application and ecosystem. It will be a static site that will be deployed on Github Pages.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Deployment
+
+This site will be deployed on to Github Pages as a static site. To do a local build of the site, run:
+
+```bash
+pnpm build
+```
+
+## Testing
+
+This site will be tested using [Playwright](https://playwright.dev/docs). Tests are located in the `tests` directory. To run tests, run:
+
+```bash
+# Run tests in headless mode
+pnpm test
+
+# Run tests in interactive UI mode
+pnpm test:ui
+```
+
+## Code Quality
+
+To ensure code quality, this site will use ESLint and Prettier. To format project code locally, run:
+
+```bash
+pnpm format
+```
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..bb47cde
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,17 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH,
+  eslint: {
+    dirs: ["src"],
+  },
+  experimental: {
+    esmExternals: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+  output: "export",
+};
+
+export default nextConfig;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..524cff3
--- /dev/null
+++ b/package.json
@@ -0,0 +1,55 @@
+{
+  "name": "avalon-next",
+  "version": "0.1.0",
+  "private": true,
+  "author": [
+    "Adam J. Arling <aarling@gmail.com>",
+    "jrgriffiniii <jrgriffiniii.k0idl@simplelogin.co>"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "next build",
+    "deploy": "gh-pages -d out",
+    "dev": "next dev",
+    "export": "next export",
+    "format": "prettier --write .",
+    "lint": "next lint",
+    "start": "next start",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "dependencies": {
+    "@contentful/rich-text-react-renderer": "^15.22.1",
+    "@headlessui/react": "^2.1.1",
+    "@heroicons/react": "^2.1.4",
+    "@next/third-parties": "^14.2.4",
+    "@tailwindcss/forms": "^0.5.7",
+    "@tanstack/react-query": "^5.49.2",
+    "contentful": "^10.12.6",
+    "contentful-management": "^11.27.5",
+    "install": "^0.13.0",
+    "next": "14.2.4",
+    "next-themes": "^0.3.0",
+    "pnpm": "^9.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-feather": "^2.0.10",
+    "react-loading-skeleton": "^3.4.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.45.1",
+    "@tanstack/eslint-plugin-query": "^5.50.0",
+    "@types/node": "^20.14.9",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "contentful-cli": "^3.3.3",
+    "eslint": "^9.6.0",
+    "eslint-config-next": "14.2.4",
+    "eslint-config-prettier": "^9.1.0",
+    "gh-pages": "^6.1.1",
+    "postcss": "^8.4.39",
+    "prettier": "^3.3.2",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3"
+  }
+}
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..1c00d74
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,80 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+const isCI = !!process.env.CI;
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:3000",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: "Mobile Chrome",
+    //   use: { ...devices["Pixel 5"] },
+    // },
+    // {
+    //   name: "Mobile Safari",
+    //   use: { ...devices["iPhone 12"] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: isCI ? "npx serve@latest out" : "pnpm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/public/app-screenshot.png b/public/app-screenshot.png
new file mode 100644
index 0000000..a59c30d
Binary files /dev/null and b/public/app-screenshot.png differ
diff --git a/public/logo-hyku.png b/public/logo-hyku.png
new file mode 100644
index 0000000..1c25d15
Binary files /dev/null and b/public/logo-hyku.png differ
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..aad5f2e
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,78 @@
+import BgLayer from "@/components/layout/bg-layer";
+import ContactCard from "@/components/contact/card";
+import Container from "@/components/layout/container";
+import Header from "@/components/layout/header";
+import MainWrapper from "@/components/layout/main-wrapper";
+import { Metadata } from "next";
+
+const contactCards = [
+  {
+    description:
+      "An open and welcoming forum to find out what is in development for Hyku and to connect with users with similar needs.",
+    label: "Call Information",
+    title: "Hyku Interest Group",
+    url: "https://samvera.atlassian.net/wiki/spaces/samvera/pages/419533203/Samvera+Hyku+Interest+Group",
+  },
+  {
+    description: "Have a PR to contribute?",
+    title: "Developers",
+    url: "https://github.com/samvera/hyku",
+  },
+  {
+    description:
+      "Request to join Samvera's slack workspace and join the #hyku channel. Introduce yourself and ask questions!",
+    email: "",
+    label: "Slack Information",
+    title: "Samvera Slack",
+    url: "https://samvera.atlassian.net/wiki/spaces/samvera/pages/405211682/Getting+Started+in+the+Samvera+Community#Join-the-Samvera-Slack-workspace",
+  },
+  {
+    description:
+      "Email Us with questions, requests for demos, and other communications.",
+    email: "info@samvera.org",
+    title: "Email",
+  },
+];
+
+export const metadata: Metadata = {
+  title: "Contact",
+  description: "Contact the Hyku team",
+};
+
+export default function ContactPage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <BgLayer>
+          <Container>
+            <div className=" py-24 sm:py-32">
+              <div className="mx-auto max-w-7xl px-6 lg:px-8">
+                <div className="mx-auto max-w-2xl space-y-16 divide-y divide-gray-100 dark:divide-gray-900 lg:mx-0 lg:max-w-none">
+                  <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-3">
+                    <div>
+                      <h2 className="text-3xl font-bold tracking-tight">
+                        Get in touch
+                      </h2>
+                      <p className="mt-4 leading-7 text-foreground-muted">
+                        As part of the Samvera Community, Hyku is driven by the
+                        participation of users and developers. There are many
+                        ways to contribute, collaborate, or just get some
+                        questions answered as you get started with Hyku.
+                      </p>
+                    </div>
+                    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:col-span-2 lg:gap-8">
+                      {contactCards.map((card, index) => (
+                        <ContactCard key={index} {...card} />
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Container>
+        </BgLayer>
+      </MainWrapper>
+    </div>
+  );
+}
diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx
new file mode 100644
index 0000000..8410fd2
--- /dev/null
+++ b/src/app/features/page.tsx
@@ -0,0 +1,83 @@
+import BgLayer from "@/components/layout/bg-layer";
+import Container from "@/components/layout/container";
+import FeatureList from "@/components/features/list";
+import Header from "@/components/layout/header";
+import Implementations from "@/components/features/implementations";
+import MainWrapper from "@/components/layout/main-wrapper";
+import { Metadata } from "next";
+import PageHeader from "@/components/page-header";
+
+export const metadata: Metadata = {
+  title: "Features and Implementations",
+};
+
+export default async function FeaturesPage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <BgLayer>
+          <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>
+            <FeatureList />
+            <section className="space-y-6">
+              <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>
+              <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 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 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>
+              <p>
+                Visit the Hyku YouTube Channel for feature demos and the latest
+                updates.
+              </p>
+            </section>
+
+            <section className="pt-20">
+              <h2 className="mb-10">Implementations</h2>
+              <Implementations />
+            </section>
+          </Container>
+        </BgLayer>
+      </MainWrapper>
+    </div>
+  );
+}
diff --git a/src/app/getting-started/page.tsx b/src/app/getting-started/page.tsx
new file mode 100644
index 0000000..baa25d1
--- /dev/null
+++ b/src/app/getting-started/page.tsx
@@ -0,0 +1,39 @@
+import BgLayer from "@/components/layout/bg-layer";
+import Container from "@/components/layout/container";
+import FaqList from "@/components/faq";
+import GettingStartedList from "@/components/getting-started/list";
+import Header from "@/components/layout/header";
+import HostedSolutions from "@/components/hosted-solutions";
+import MainWrapper from "@/components/layout/main-wrapper";
+import { Metadata } from "next";
+import PageHeader from "@/components/page-header";
+
+export const metadata: Metadata = {
+  title: "Getting Started",
+};
+
+export default function GettingStartedPage() {
+  return (
+    <div className="">
+      <Header />
+      <BgLayer>
+        <MainWrapper>
+          <PageHeader
+            title="Getting Started"
+            description="There are many resource for newcomers to Hyku and contributors to the community."
+          />
+          <Container>
+            <div className="space-y-16">
+              <GettingStartedList />
+              <HostedSolutions />
+              <section className="mt-16 sm:mt-20 lg:mt-24">
+                <h2>F.A.Q. Frequently Asked Questions</h2>
+                <FaqList />
+              </section>
+            </div>
+          </Container>
+        </MainWrapper>
+      </BgLayer>
+    </div>
+  );
+}
diff --git a/src/app/icon.png b/src/app/icon.png
new file mode 100644
index 0000000..73ac55b
Binary files /dev/null and b/src/app/icon.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..fdb3b2d
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,42 @@
+import "@/styles/globals.css";
+import "react-loading-skeleton/dist/skeleton.css";
+
+import FetchDataWrapper from "@/components/fetch-data-wrapper";
+import Footer from "@/components/layout/footer";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import Header from "@/components/layout/header";
+import type { Metadata } from "next";
+import { Open_Sans } from "next/font/google";
+import { ThemeProvider } from "next-themes";
+
+const openSans = Open_Sans({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: {
+    template: "%s | Hyku",
+    default: "Hyku",
+  },
+  description:
+    "The Next Generation Repository Solution - A Samvera Application",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID!} />
+      <body className={`${openSans.className} antialiased`}>
+        <ThemeProvider attribute="class">
+          <FetchDataWrapper>
+            <Header />
+            {children}
+            <Footer />
+          </FetchDataWrapper>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
new file mode 100644
index 0000000..c60ab65
--- /dev/null
+++ b/src/app/news/page.tsx
@@ -0,0 +1,31 @@
+import BgLayer from "@/components/layout/bg-layer";
+import Container from "@/components/layout/container";
+import Header from "@/components/layout/header";
+import MainWrapper from "@/components/layout/main-wrapper";
+import { Metadata } from "next";
+import NewsList from "@/components/news/list";
+import PageHeader from "@/components/page-header";
+
+export const metadata: Metadata = {
+  title: "News and Events",
+  description: "Keep up with the latest news and events in the Hyku ecosystem",
+};
+
+export default function Homepage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <BgLayer>
+          <PageHeader
+            title="News and Events"
+            description="Keep up with the latest news and events in the Hyku ecosystem"
+          />
+          <Container>
+            <NewsList />
+          </Container>
+        </BgLayer>
+      </MainWrapper>
+    </div>
+  );
+}
diff --git a/src/app/opengraph-image.png b/src/app/opengraph-image.png
new file mode 100644
index 0000000..4bc9caf
Binary files /dev/null and b/src/app/opengraph-image.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..f0bd753
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,55 @@
+import BgLayer from "@/components/layout/bg-layer";
+import HostedSolutions from "@/components/hosted-solutions";
+import Image from "next/image";
+import Link from "next/link";
+import MainWrapper from "@/components/layout/main-wrapper";
+import appScreenshot from "../../public/app-screenshot.png";
+
+export default function Homepage() {
+  return (
+    <div className="">
+      <MainWrapper>
+        <BgLayer>
+          <div className="py-24 sm:py-32 lg:pb-40 animate-fade-in">
+            <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">
+                  <Link href="/getting-started" className="button-primary">
+                    Get started
+                  </Link>
+                  <a
+                    href="https://github.com/samvera/hyku"
+                    className="text-sm font-semibold leading-6 text-foreground no-underline"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Documentation <span aria-hidden="true">→</span>
+                  </a>
+                </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>
+              </div>
+            </div>
+          </div>
+        </BgLayer>
+      </MainWrapper>
+    </div>
+  );
+}
diff --git a/src/app/presentations/page.tsx b/src/app/presentations/page.tsx
new file mode 100644
index 0000000..f0a92d9
--- /dev/null
+++ b/src/app/presentations/page.tsx
@@ -0,0 +1,50 @@
+import BgLayer from "@/components/layout/bg-layer";
+import Container from "@/components/layout/container";
+import Header from "@/components/layout/header";
+import MainWrapper from "@/components/layout/main-wrapper";
+import { Metadata } from "next";
+import PageHeader from "@/components/page-header";
+import PresentationsList from "@/components/presentations/list";
+
+export const metadata: Metadata = {
+  title: "Presentations and Demos",
+  description: "View presentations and demos about Hyku and its ecosystem.",
+};
+
+export default function PresentationsPage() {
+  return (
+    <div className="">
+      <Header />
+      <MainWrapper>
+        <BgLayer>
+          <PageHeader
+            title="Presentations and Demos"
+            description="In addition to the archived presentation below, useful Hyku feature demos can be found on YouTube."
+          >
+            <div className="mt-8 flex-row space-x-4">
+              <a
+                href="https://www.youtube.com/channel/UC_m1Ovaaasa2ksyGaqz5i0Q/"
+                target="_blank"
+                rel="noreferrer noopener"
+                className="button-primary"
+              >
+                Hyku YouTube Channel
+              </a>
+              <a
+                href="https://www.youtube.com/channel/UC1eopKtm-k_f93RTfzHSvMQ"
+                target="_blank"
+                rel="noreferrer noopener"
+                className="button"
+              >
+                Hydra-in-a-Box (early demos)
+              </a>
+            </div>
+          </PageHeader>
+          <Container>
+            <PresentationsList />
+          </Container>
+        </BgLayer>
+      </MainWrapper>
+    </div>
+  );
+}
diff --git a/src/app/twitter-image.png b/src/app/twitter-image.png
new file mode 100644
index 0000000..4bc9caf
Binary files /dev/null and b/src/app/twitter-image.png differ
diff --git a/src/components/card.tsx b/src/components/card.tsx
new file mode 100644
index 0000000..aa75be2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/contact/card.tsx b/src/components/contact/card.tsx
new file mode 100644
index 0000000..d9d27f2
--- /dev/null
+++ b/src/components/contact/card.tsx
@@ -0,0 +1,45 @@
+interface ContactCardProps {
+  description?: string;
+  email?: string;
+  label?: string;
+  title: string;
+  url?: string;
+}
+
+export default function ContactCard({
+  description,
+  email,
+  label,
+  title,
+  url,
+}: ContactCardProps) {
+  return (
+    <div className="rounded-2xl bg-gray-50 dark:bg-gray-950 p-10">
+      <h3 className="text-base font-semibold leading-">{title}</h3>
+      <dl className="mt-3 space-y-1 text-sm leading-6 text-foreground-muted">
+        <div>
+          <dt className="sr-only">Email</dt>
+          <dd>
+            {email && (
+              <a
+                className="font-semibold text-primary"
+                href={`mailto:${email}`}
+              >
+                {email}
+              </a>
+            )}
+            {url && (
+              <a
+                className="font-semibold text-primary break-words no-underline"
+                href={url}
+              >
+                {label || url}
+              </a>
+            )}
+            {description && <p>{description}</p>}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
diff --git a/src/components/faq.tsx b/src/components/faq.tsx
new file mode 100644
index 0000000..0bfd196
--- /dev/null
+++ b/src/components/faq.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from "@headlessui/react";
+import { MinusIcon, PlusIcon } from "@heroicons/react/24/outline";
+
+import RichTextContent from "./rich-text-content";
+import { getData } from "@/lib/get-contentful-data";
+import { useQuery } from "@tanstack/react-query";
+
+export default function FaqList() {
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ["faqs"],
+    queryFn: () => getData("faq"),
+  });
+
+  return (
+    <div>
+      <div className="mx-auto max-w-4xl divide-y divide-foreground/10">
+        <dl className="mt-10 space-y-6 divide-y divide-foreground/10">
+          {data &&
+            data.map(({ fields, sys }: { fields: any; sys: any }) => (
+              <Disclosure as="div" key={sys.id} className="pt-6">
+                {({ open }) => (
+                  <>
+                    <dt>
+                      <DisclosureButton className="flex w-full items-start justify-between text-left text-foreground">
+                        <span className="text-base font-semibold leading-7">
+                          {fields.question}
+                        </span>
+                        <span className="ml-6 flex h-7 items-center">
+                          {open ? (
+                            <MinusIcon className="h-6 w-6" aria-hidden="true" />
+                          ) : (
+                            <PlusIcon className="h-6 w-6" aria-hidden="true" />
+                          )}
+                        </span>
+                      </DisclosureButton>
+                    </dt>
+                    <DisclosurePanel as="dd" className="mt-2 pr-12">
+                      <div className="text-base leading-7 text-gray-700 dark:text-gray-300">
+                        <RichTextContent content={fields.answer} />
+                      </div>
+                    </DisclosurePanel>
+                  </>
+                )}
+              </Disclosure>
+            ))}
+        </dl>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/features/implementations.tsx b/src/components/features/implementations.tsx
new file mode 100644
index 0000000..d233ec9
--- /dev/null
+++ b/src/components/features/implementations.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import Card from "@/components/card";
+import RichTextContent from "../rich-text-content";
+import Skeleton from "react-loading-skeleton";
+import useGetContentfulData from "@/hooks/use-get-contentful-data";
+
+export default function Implementations() {
+  const data = useGetContentfulData("integration");
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+      {!data
+        ? [...Array(4)].map((_, i) => <Skeleton key={i} height={240} />)
+        : data.map((item: any) => {
+            const {
+              fields: {
+                briefDescription,
+                informationalUrl,
+                institutionAndPartners,
+                mainFeatures,
+                productname,
+                projectUrl,
+              },
+            } = item;
+
+            return (
+              <Card key={item.sys.id}>
+                <div className="space-y-3">
+                  <h3>{productname}</h3>
+                  <a
+                    href={projectUrl}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    className="inline-block"
+                  >
+                    {projectUrl}
+                  </a>
+                  <dl className="pt-4">
+                    {informationalUrl && (
+                      <>
+                        <dt>More Information</dt>
+                        <dd>
+                          <a
+                            href={informationalUrl}
+                            target="_blank"
+                            rel="noreferrer noopener"
+                          >
+                            {informationalUrl}
+                          </a>
+                        </dd>
+                      </>
+                    )}
+
+                    <dt>Institutional Partners</dt>
+                    <dd>
+                      <RichTextContent content={institutionAndPartners} />
+                    </dd>
+                    <dt>Brief Description</dt>
+                    <dd>
+                      <RichTextContent content={briefDescription} />
+                    </dd>
+                    <dt>Main Features</dt>
+                    <dd>
+                      <RichTextContent content={mainFeatures} />
+                    </dd>
+                  </dl>
+                </div>
+              </Card>
+            );
+          })}
+    </div>
+  );
+}
diff --git a/src/components/features/list.tsx b/src/components/features/list.tsx
new file mode 100644
index 0000000..40b64c0
--- /dev/null
+++ b/src/components/features/list.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import Skeleton from "react-loading-skeleton";
+import { getData } from "@/lib/get-contentful-data";
+import { useQuery } from "@tanstack/react-query";
+
+export default function FeatureList() {
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ["features"],
+    queryFn: () => getData("feature"),
+  });
+
+  return (
+    <ul data-testid="feature-list">
+      {(isFetching || isPending) && <Skeleton count={5} />}
+
+      {data &&
+        data.map(({ fields, sys }: { fields: any; sys: any }) => (
+          <li key={sys.id}>{fields.featureDescription}</li>
+        ))}
+    </ul>
+  );
+}
diff --git a/src/components/fetch-data-wrapper.tsx b/src/components/fetch-data-wrapper.tsx
new file mode 100644
index 0000000..d9e887e
--- /dev/null
+++ b/src/components/fetch-data-wrapper.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export default function FetchDataWrapper({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 1000 * 60 * 5,
+        refetchOnWindowFocus: false,
+      },
+    },
+  });
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
diff --git a/src/components/getting-started/list.tsx b/src/components/getting-started/list.tsx
new file mode 100644
index 0000000..0dd2192
--- /dev/null
+++ b/src/components/getting-started/list.tsx
@@ -0,0 +1,87 @@
+import {
+  ChatBubbleBottomCenterIcon,
+  CodeBracketSquareIcon,
+  DocumentTextIcon,
+  HomeModernIcon,
+  QuestionMarkCircleIcon,
+  RocketLaunchIcon,
+} from "@heroicons/react/24/outline";
+
+const features = [
+  {
+    name: "Hyku User Documentation",
+    description:
+      "The Hyku user documentation explains more about Hyku and its features, including an in-depth user orientation.",
+    href: "https://samvera.atlassian.net/wiki/spaces/hyku/overview?homepageId=715789904",
+    icon: DocumentTextIcon,
+  },
+  {
+    name: "Hyku Developers",
+    description:
+      "As an open source software solution, Hyku's code is freely available on Github. The ReadMe includes information on setting up your environment, deploying the application, and running the stack.",
+    href: "https://github.com/samvera/hyku?tab=readme-ov-file#readme",
+    icon: CodeBracketSquareIcon,
+  },
+  {
+    name: "Current Releases and Features",
+    description:
+      "The Hyku release notes are kept up to date with new and pending release details, including new features, bug fixes, and component updates.",
+    href: "https://github.com/samvera/hyku/releases",
+    icon: RocketLaunchIcon,
+  },
+  {
+    name: "Hyku vs. Hyrax",
+    description:
+      "Hyrax is a Samvera Community Rails engine that creates a repository application. Hyku is the polished, turn-key repository solution built on Hyrax. Hyku offers the functionality of Hyrax in a ready-to-use application, while Hyrax can often be a better choice for repositories that require significant customization. Read more about the differences between Hyrax and Hyku in the Hyku Documentation.",
+    href: "https://samvera.atlassian.net/wiki/spaces/hyku/pages/718084040/Hyku+and+Hyrax+How+are+they+related+and+how+are+they+different",
+    icon: QuestionMarkCircleIcon,
+  },
+  {
+    name: "Glossary",
+    description: "Visit glossary documentation",
+    href: "https://samvera.atlassian.net/wiki/spaces/hyku/pages/2243952642/Glossary",
+    icon: ChatBubbleBottomCenterIcon,
+  },
+  {
+    name: "Samvera",
+    description:
+      "Hyku is a solution of the Samvera Community. Learn more about Samvera at samvera.org.",
+    href: "https://samvera.org",
+    icon: HomeModernIcon,
+  },
+];
+
+export default function GettingStartedList() {
+  return (
+    <div className="mx-auto max-w-2xl  lg:max-w-none">
+      <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+        {features.map((feature) => (
+          <div key={feature.name} className="flex flex-col">
+            <dt className="text-base font-semibold leading-7 text-foreground">
+              <div className="mb-6 flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
+                <feature.icon
+                  className="h-6 w-6 text-white"
+                  aria-hidden="true"
+                />
+              </div>
+              {feature.name}
+            </dt>
+            <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-foreground-muted">
+              <p className="flex-auto">{feature.description}</p>
+              <p className="mt-6">
+                <a
+                  href={feature.href}
+                  className="text-sm font-semibold leading-6 text-primary no-underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Learn more <span aria-hidden="true">→</span>
+                </a>
+              </p>
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
diff --git a/src/components/hosted-solutions.tsx b/src/components/hosted-solutions.tsx
new file mode 100644
index 0000000..f8b8c9f
--- /dev/null
+++ b/src/components/hosted-solutions.tsx
@@ -0,0 +1,54 @@
+import Container from "@/components/layout/container";
+
+const hostedSolutions = [
+  {
+    name: "HykuUP",
+    description: "by SoftServ by Scientist.com",
+    url: "https://hykuup.com/",
+  },
+  {
+    name: "Ubiquity Repositories",
+    description: "by Ubiquity Press",
+    url: "https://ubiquity.pub/repositories/",
+  },
+  {
+    name: "Service Providers page",
+    description:
+      "For hosted solutions, Requests for Proposals, or contracted work",
+    url: "https://samvera.org/the-community/service-providers",
+  },
+];
+
+export default function HostedSolutions() {
+  return (
+    <div className="py-24 sm:py-32">
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h2>Hosted Solutions</h2>
+          <p className="mt-6 text-lg leading-8 text-foreground-muted">
+            Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam
+            voluptatum cupiditate veritatis in accusamus quisquam.
+          </p>
+        </div>
+        <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {hostedSolutions.map((hs) => (
+            <div key={hs.name}>
+              <dt className="font-semibold text-foreground">{hs.name}</dt>
+              <dd className="mt-1 text-foreground-muted flex flex-col space-y-4">
+                <span>{hs.description}</span>
+                <a
+                  href={hs.url}
+                  target="_blank"
+                  rel=""
+                  className="text-sm text-primary no-underline"
+                >
+                  {hs.url}
+                </a>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/components/layout/bg-layer.tsx b/src/components/layout/bg-layer.tsx
new file mode 100644
index 0000000..50db0b3
--- /dev/null
+++ b/src/components/layout/bg-layer.tsx
@@ -0,0 +1,31 @@
+export default function BgLayer({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="relative isolate">
+      <div
+        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>
+      {children}
+      <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%)",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/container.tsx b/src/components/layout/container.tsx
new file mode 100644
index 0000000..f397cca
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
new file mode 100644
index 0000000..e4f156c
--- /dev/null
+++ b/src/components/layout/footer.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { GitHub, Twitter, Youtube } from "react-feather";
+
+import Link from "next/link";
+import ThemeSwitch from "@/components/theme-switch";
+import { navigation } from "@/components/layout/header";
+
+const navigationExtended = [
+  ...navigation,
+  {
+    name: "Learn More",
+    href: "https://github.com/samvera/hyku",
+    isExternal: true,
+  },
+];
+
+const socials = [
+  {
+    name: "X",
+    href: "http://twitter.com/HykuRepo",
+    icon: Twitter,
+  },
+  {
+    name: "GitHub",
+    href: "https://github.com/samvera/hyku",
+    icon: GitHub,
+  },
+  {
+    name: "YouTube",
+    href: "https://www.youtube.com/channel/UC_m1Ovaaasa2ksyGaqz5i0Q",
+    icon: Youtube,
+  },
+];
+
+export default function Footer() {
+  return (
+    <footer className="relative z-10" data-testid="layout-footer">
+      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+        <nav
+          className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
+          aria-label="Footer"
+        >
+          {navigationExtended.map((item) => (
+            <div key={item.name} className="pb-6">
+              <Link
+                href={item.href}
+                className="text-sm leading-6 text-foreground/90 hover:text-foreground"
+                {...(item.isExternal && {
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                })}
+              >
+                {item.name}
+              </Link>
+            </div>
+          ))}
+        </nav>
+        <div className="mt-10 flex justify-center items-center space-x-10">
+          <ThemeSwitch />
+          {socials.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              className="text-foreground-muted/90 hover:text-foreground-muted"
+              data-testid={`social-${item.name}`}
+            >
+              <span className="sr-only">{item.name}</span>
+              <item.icon className="h-5 w-5" aria-hidden="true" />
+            </Link>
+          ))}
+        </div>
+        <p className="mt-10 text-center text-xs leading-5 text-foreground-muted">
+          &copy; {new Date().getFullYear()} Hyku. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
new file mode 100644
index 0000000..fe74a3d
--- /dev/null
+++ b/src/components/layout/header.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+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";
+
+export type NavItem = {
+  href: string;
+  isExternal?: boolean;
+  name: string;
+};
+
+export const navigation: NavItem[] = [
+  {
+    name: "Features and Implementations",
+    href: "/features",
+  },
+  {
+    name: "Getting Started",
+    href: "/getting-started",
+  },
+  {
+    name: "Presentations and Demos",
+    href: "/presentations",
+  },
+  {
+    name: "News",
+    href: "/news",
+  },
+  {
+    name: "Contact",
+    href: "/contact",
+  },
+];
+
+const Header = () => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="absolute inset-x-0 top-0 z-50">
+      <nav
+        className="flex items-center justify-between p-6 lg:px-8"
+        aria-label="Global"
+      >
+        <div className="flex lg:flex-1">
+          <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" />
+          </Link>
+        </div>
+
+        {/* Mobile nav bar */}
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-foreground-muted"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* Desktop navigation */}
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <Link
+              key={item.name}
+              href={item.href}
+              className="text-sm font-medium leading-6 text-foreground hover:text-foreground/90"
+            >
+              {item.name}
+            </Link>
+          ))}
+        </div>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          <a
+            href="https://github.com/samvera/hyku"
+            className="text-sm font-semibold leading-6 text-foreground hover:text-foreground/90"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn more <span aria-hidden="true">&rarr;</span>
+          </a>
+        </div>
+      </nav>
+      <Dialog
+        as="div"
+        className="lg:hidden"
+        open={mobileMenuOpen}
+        onClose={setMobileMenuOpen}
+      >
+        <div className="fixed inset-0 z-50" />
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-background px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="flex items-center justify-between">
+            <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <Image src={hykuLogo} alt="Hyku logo" className="h-8 w-auto" />
+            </a>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-foreground-muted"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+              <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-foreground-muted/10">
+              <div className="space-y-2 py-6">
+                {navigation.map((item) => (
+                  <Link
+                    key={item.name}
+                    href={item.href}
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-foreground hover:bg-foreground/5"
+                  >
+                    {item.name}
+                  </Link>
+                ))}
+              </div>
+              <div className="py-6">
+                <a
+                  href="https://github.com/samvera/hyku"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-foreground hover:bg-foreground/5"
+                >
+                  Learn more
+                </a>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/layout/main-wrapper.tsx b/src/components/layout/main-wrapper.tsx
new file mode 100644
index 0000000..f8318c2
--- /dev/null
+++ b/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;
diff --git a/src/components/layout/nav.tsx b/src/components/layout/nav.tsx
new file mode 100644
index 0000000..3435a1c
--- /dev/null
+++ b/src/components/layout/nav.tsx
@@ -0,0 +1,234 @@
+"use client";
+
+import {
+  ArrowPathIcon,
+  Bars3Icon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  SquaresPlusIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
+import {
+  ChevronDownIcon,
+  PhoneIcon,
+  PlayCircleIcon,
+} from "@heroicons/react/20/solid";
+import { Dialog, Popover, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+
+import Image from "next/image";
+import hykuLogo from "../../../public/logo-hyku.png";
+
+const callsToAction = [
+  { name: "Watch demo", href: "#", icon: PlayCircleIcon },
+  { name: "Contact sales", href: "#", icon: PhoneIcon },
+];
+const company = [
+  {
+    name: "About us",
+    href: "#",
+    description:
+      "Learn more about our company values and mission to empower others",
+  },
+  {
+    name: "Careers",
+    href: "#",
+    description:
+      "Looking for you next career opportunity? See all of our open positions",
+  },
+  {
+    name: "Support",
+    href: "#",
+    description:
+      "Get in touch with our dedicated support team or reach out on our community forums",
+  },
+  {
+    name: "Blog",
+    href: "#",
+    description:
+      "Read our latest announcements and get perspectives from our team",
+  },
+];
+
+const nav = [
+  {
+    name: "Features and Implementations",
+    href: "/features",
+  },
+  {
+    name: "Getting Started",
+    href: "/getting-started",
+  },
+  {
+    name: "News",
+    href: "/news",
+  },
+  {
+    name: "Contact",
+    href: "/contact",
+  },
+];
+
+export default function Nav() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="bg-white">
+      <nav
+        className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        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>
+            <Image src={hykuLogo} alt="Hyku logo" className="h-8 w-auto" />
+          </a>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </button>
+        </div>
+        <Popover.Group className="hidden lg:flex lg:gap-x-12">
+          {nav.map((item) => (
+            <a
+              key={item.href}
+              href="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              {item.name}
+            </a>
+          ))}
+
+          <Popover className="relative">
+            {/* <Popover.Button className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+              News
+              <ChevronDownIcon
+                className="h-5 w-5 flex-none text-gray-400"
+                aria-hidden="true"
+              />
+            </Popover.Button> */}
+
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel className="absolute -left-8 top-full z-10 mt-3 w-96 rounded-3xl bg-white p-4 shadow-lg ring-1 ring-gray-900/5">
+                {company.map((item) => (
+                  <div
+                    key={item.name}
+                    className="relative rounded-lg p-4 hover:bg-gray-50"
+                  >
+                    <a
+                      href={item.href}
+                      className="block text-sm font-semibold leading-6 text-gray-900"
+                    >
+                      {item.name}
+                      <span className="absolute inset-0" />
+                    </a>
+                    <p className="mt-1 text-sm leading-6 text-gray-600">
+                      {item.description}
+                    </p>
+                  </div>
+                ))}
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+        </Popover.Group>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          <a href="#" className="text-sm font-semibold leading-6 text-gray-900">
+            Learn more <span aria-hidden="true">&rarr;</span>
+          </a>
+        </div>
+      </nav>
+      <Dialog
+        as="div"
+        className="lg:hidden"
+        open={mobileMenuOpen}
+        onClose={setMobileMenuOpen}
+      >
+        <div className="fixed inset-0 z-10" />
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 flex w-full flex-col justify-between overflow-y-auto bg-white sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+          <div className="p-6">
+            <div className="flex items-center justify-between">
+              <a href="#" className="-m-1.5 p-1.5">
+                <span className="sr-only">Your Company</span>
+                <img
+                  className="h-8 w-auto"
+                  src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+                  alt=""
+                />
+              </a>
+              <button
+                type="button"
+                className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <span className="sr-only">Close menu</span>
+                <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-gray-500/10">
+                <div className="space-y-2 py-6">
+                  <a
+                    href="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Features
+                  </a>
+                  <a
+                    href="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Marketplace
+                  </a>
+
+                  {company.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                    >
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+                <div className="py-6">
+                  <a
+                    href="#"
+                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Learn more
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="sticky bottom-0 grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50 text-center">
+            {callsToAction.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                className="p-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-100"
+              >
+                {item.name}
+              </a>
+            ))}
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </header>
+  );
+}
diff --git a/src/components/news/list.tsx b/src/components/news/list.tsx
new file mode 100644
index 0000000..bd94004
--- /dev/null
+++ b/src/components/news/list.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { formatDate, sortDates } from "@/lib/format-date";
+
+import RichTextContent from "../rich-text-content";
+import Skeleton from "react-loading-skeleton";
+import { UserGroupIcon } from "@heroicons/react/20/solid";
+import { getData } from "@/lib/get-contentful-data";
+import { useQuery } from "@tanstack/react-query";
+
+export default function NewsList() {
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ["news"],
+    queryFn: () => getData("newsItem"),
+  });
+
+  const sorted = data ? data.sort(sortDates("desc", "publishDate")) : [];
+
+  if (isPending || isFetching) {
+    return (
+      <div className="mx-auto max-w-2xl">
+        <Skeleton count={5} height={50} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl">
+          <div className="space-y-16 border-t border-gray-200 pt-10 sm:pt-16">
+            {sorted &&
+              sorted.map(({ fields, sys }: { fields: any; sys: any }) => (
+                <article
+                  key={sys.id}
+                  className="flex max-w-xl flex-col items-start justify-between animate-fade-in"
+                >
+                  <div className="flex items-center gap-x-4 text-xs">
+                    <time
+                      dateTime={fields.publishDate}
+                      className="text-foreground-muted"
+                    >
+                      {formatDate(fields.publishDate)}
+                    </time>
+                    <span className="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100">
+                      {fields.title}
+                    </span>
+                  </div>
+                  <div className="group relative">
+                    <h3 className="mt-3 text-lg font-semibold leading-6 text-foreground group-hover:text-gray-600">
+                      {/* <span className="absolute inset-0" /> */}
+                      {fields.title}
+                    </h3>
+                    <RichTextContent content={fields.content} />
+                  </div>
+                  <div className="relative mt-8 flex items-center gap-x-4">
+                    <UserGroupIcon className="h-10 w-auto rounded-full bg-gray-50 text-gray-400" />
+                    <div className="text-sm leading-6">
+                      <p className="font-semibold ">
+                        <span>
+                          <span className="absolute inset-0" />
+                          {fields.author}
+                        </span>
+                      </p>
+                      <p className="text-foreground-muted !mt-0">
+                        Hyku Administrator
+                      </p>
+                    </div>
+                  </div>
+                </article>
+              ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/page-header.tsx b/src/components/page-header.tsx
new file mode 100644
index 0000000..48cea95
--- /dev/null
+++ b/src/components/page-header.tsx
@@ -0,0 +1,27 @@
+import Container from "@/components/layout/container";
+
+interface PageHeaderProps {
+  title: string;
+  description: string;
+  children?: React.ReactNode;
+}
+
+export default function PageHeader({
+  title,
+  description,
+  children,
+}: PageHeaderProps) {
+  return (
+    <div className="py-24 sm:py-32 animate-fade-in">
+      <Container>
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <h1 className="">{title}</h1>
+          <p className="mt-6 text-lg leading-8 text-foreground/70">
+            {description}
+          </p>
+          {children}
+        </div>
+      </Container>
+    </div>
+  );
+}
diff --git a/src/components/presentations/list.tsx b/src/components/presentations/list.tsx
new file mode 100644
index 0000000..9e291c2
--- /dev/null
+++ b/src/components/presentations/list.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { formatDate, sortDates } from "@/lib/format-date";
+
+import Skeleton from "react-loading-skeleton";
+import { getData } from "@/lib/get-contentful-data";
+import { useQuery } from "@tanstack/react-query";
+
+export default function PresentationsList() {
+  const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ["presentation"],
+    queryFn: () => getData("presentation"),
+  });
+
+  const sorted = data ? data.sort(sortDates("desc", "publishedDate")) : [];
+
+  return (
+    <ul role="list" className="list-none ml-0 divide-y divide-gray-100 ">
+      {(isFetching || isPending) && <Skeleton count={5} height={50} />}
+      {sorted.length > 0 &&
+        sorted.map(({ fields, sys }: { fields: any; sys: any }) => (
+          <li
+            key={sys.id}
+            className="flex flex-col space-y-2 md:space-y-0 md:flex-row justify-between items-start w-full py-6 animate-fade-in"
+          >
+            <div className="space-y-2">
+              <a href={fields.url || "#"} className="font-semibold text-xl">
+                {fields.title}
+              </a>
+              <div className="flex space-x-3 items-center">
+                <span>{formatDate(fields.date)}</span>
+                <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
+                  <circle cx={1} cy={1} r={1} />
+                </svg>
+                <span>{fields.speakers.join(", ")}</span>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <div>{fields.conference}</div>
+              {fields.online && (
+                <div className="mt-1 flex items-center justify-start md:justify-end gap-x-1.5">
+                  <div className="flex-none rounded-full bg-emerald-500/20 p-1">
+                    <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                  </div>
+                  <div className="text-xs leading-5 text-foreground-muted">
+                    Online
+                  </div>
+                </div>
+              )}
+            </div>
+          </li>
+        ))}
+    </ul>
+  );
+}
diff --git a/src/components/rich-text-content.tsx b/src/components/rich-text-content.tsx
new file mode 100644
index 0000000..43f352d
--- /dev/null
+++ b/src/components/rich-text-content.tsx
@@ -0,0 +1,18 @@
+import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
+
+const RichTextContent = ({ content }: { content: any }) => {
+  if (!content) return null;
+
+  const options = {
+    // Helper function to handle line breaks in rich text
+    renderText: (text: string) => {
+      return text.split("\n").reduce((children: any, textSegment, index) => {
+        return [...children, index > 0 && <br key={index} />, textSegment];
+      }, []);
+    },
+  };
+
+  return <>{documentToReactComponents(content, options)}</>;
+};
+
+export default RichTextContent;
diff --git a/src/components/theme-switch.tsx b/src/components/theme-switch.tsx
new file mode 100644
index 0000000..4e2619e
--- /dev/null
+++ b/src/components/theme-switch.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useTheme } from "next-themes";
+
+const ThemeSwitch = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <div>
+      <label htmlFor="theme-switch" className="sr-only">
+        Color mode
+      </label>
+      <select
+        id="theme-switch"
+        name="theme-switch"
+        className="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 sm:text-sm sm:leading-6 dark:text-gray-800"
+        value={theme}
+        onChange={(e) => setTheme(e.target.value)}
+      >
+        <option value="system">System</option>
+        <option value="dark">Dark</option>
+        <option value="light">Light</option>
+      </select>
+    </div>
+  );
+};
+
+export default ThemeSwitch;
diff --git a/src/hooks/use-get-contentful-data.tsx b/src/hooks/use-get-contentful-data.tsx
new file mode 100644
index 0000000..88c5ccb
--- /dev/null
+++ b/src/hooks/use-get-contentful-data.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import getContentful from "@/lib/get-contentful";
+
+export default function useGetContentfulData(contentType: string) {
+  const [data, setData] = useState<any>(null);
+  const client = getContentful();
+
+  useEffect(() => {
+    if (!client || !contentType) return;
+
+    client
+      .getEntries({
+        content_type: contentType,
+      })
+      .then((response) => {
+        setData(response.items);
+      })
+      .catch((error) => {
+        console.error("Error fetching data from Contentful", error);
+      });
+  }, [client, contentType]);
+
+  return data;
+}
diff --git a/src/lib/content-management-batch-api-helpers.ts b/src/lib/content-management-batch-api-helpers.ts
new file mode 100644
index 0000000..f54b734
--- /dev/null
+++ b/src/lib/content-management-batch-api-helpers.ts
@@ -0,0 +1,24 @@
+import { getContentfulManagement } from "@/lib/get-contentful";
+
+async function batchHelper() {
+  // Connect to the Contentful Management API
+  const client = getContentfulManagement();
+
+  // Get entries from the Contentful space
+  const entries = await client.entry.getMany({
+    query: {
+      content_type: "",
+    },
+  });
+  console.log("entries", entries);
+
+  // To batch delete, you must first "unpublish" the entries
+  // Then "delete" the entries
+  await Promise.all(
+    entries.items.map((entry) =>
+      client.entry.unpublish({
+        entryId: entry.sys.id,
+      }),
+    ),
+  );
+}
diff --git a/src/lib/format-date.ts b/src/lib/format-date.ts
new file mode 100644
index 0000000..f5c3ab1
--- /dev/null
+++ b/src/lib/format-date.ts
@@ -0,0 +1,25 @@
+export function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ *
+ * @param data Contentful CMS data
+ * @param order
+ * @returns
+ */
+export function sortDates(order: string = "desc", field: string) {
+  return (a: any, b: any) => {
+    const dateA = new Date(a.fields[field]);
+    const dateB = new Date(b.fields[field]);
+    return dateA && dateB
+      ? order === "asc"
+        ? Number(dateA) - Number(dateB)
+        : Number(dateB) - Number(dateA)
+      : 0;
+  };
+}
diff --git a/src/lib/get-contentful-data.ts b/src/lib/get-contentful-data.ts
new file mode 100644
index 0000000..07d7ecc
--- /dev/null
+++ b/src/lib/get-contentful-data.ts
@@ -0,0 +1,14 @@
+import getContentful from "@/lib/get-contentful";
+
+const client = getContentful();
+
+export async function getData(contentType: string) {
+  try {
+    const data = await client.getEntries({
+      content_type: contentType,
+    });
+    return data.items;
+  } catch (error) {
+    console.error(`Error fetching ${contentType} data from Contentful`, error);
+  }
+}
diff --git a/src/lib/get-contentful.ts b/src/lib/get-contentful.ts
new file mode 100644
index 0000000..ee6458d
--- /dev/null
+++ b/src/lib/get-contentful.ts
@@ -0,0 +1,44 @@
+import { createClient, type ContentfulClientApi } from "contentful";
+import {
+  createClient as createManagementClient,
+  type PlainClientAPI,
+} from "contentful-management";
+
+let client: ContentfulClientApi<undefined>;
+let managementClient: PlainClientAPI;
+
+function getContentful() {
+  if (!client) {
+    client = createClient({
+      accessToken: process.env.NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN as string,
+      environment: "hyku" as string,
+      space: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID as string,
+    });
+  }
+
+  return client;
+}
+
+function getContentfulManagement() {
+  if (!managementClient) {
+    managementClient = createManagementClient(
+      {
+        accessToken: process.env.CONTENTFUL_CMA_TOKEN as string,
+      },
+
+      {
+        type: "plain",
+        defaults: {
+          spaceId: process.env.NEXT_PUBLIC_CONTENTFUL_SPACE_ID as string,
+          // We are only managing the "hyku" environment with this client
+          environmentId: "hyku",
+        },
+      },
+    );
+  }
+
+  return managementClient;
+}
+
+export default getContentful;
+export { getContentfulManagement };
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..52907e6
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,86 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --color-foreground: 221 39% 11%; /* gray-900 */
+    --color-foreground-muted: 215 14% 34%; /* gray-600 */
+    --color-background: 0 0% 100%; /* white */
+    --color-primary: 101 61% 43%; /* Hyku logo green */
+  }
+  .dark {
+    --color-foreground: 220 14% 96%; /* gray-100 */
+    --color-foreground-muted: 218 11% 65%; /* gray-400 */
+    --color-background: 224 71% 4%; /* gray-900 */
+  }
+
+  h1 {
+    /* @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl; */
+    @apply text-4xl font-bold tracking-tight  sm:text-6xl;
+  }
+
+  h2 {
+    @apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0;
+  }
+
+  h3 {
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+  }
+
+  h4 {
+    @apply scroll-m-20 text-xl font-semibold tracking-tight;
+  }
+
+  p {
+    @apply leading-7 [&:not(:first-child)]:mt-6;
+  }
+
+  blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+
+  ul {
+    @apply my-6 ml-6 list-disc [&>li]:mt-2;
+  }
+
+  dl p,
+  dl ul {
+    @apply [&:not(:first-child)]:mt-4 leading-7 !important;
+  }
+
+  dt {
+    @apply font-semibold pb-1 [&:not(:first-child)]:mt-6;
+  }
+
+  dd {
+    @apply pl-2;
+  }
+
+  code {
+    @apply relative rounded bg-gray-200 dark:bg-gray-800 px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+  }
+
+  main a {
+    @apply font-semibold underline hover:no-underline;
+  }
+
+  .lead {
+    @apply text-xl text-gray-600 dark:text-gray-400;
+  }
+
+  .button {
+    @apply no-underline rounded-md bg-gray-200 dark:bg-gray-800 px-3.5 py-2.5 text-sm font-semibold text-foreground shadow-sm hover:bg-gray-200/90 dark:hover:bg-gray-800/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary;
+  }
+
+  .button-primary {
+    /** Apply .button styles and then add some more */
+    @apply button bg-primary hover:bg-primary/90 text-white;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..eb40cf9
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  darkMode: "selector",
+  important: true,
+  theme: {
+    extend: {
+      animation: {
+        "fade-in": "fadeIn 0.5s ease-in-out",
+      },
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      colors: {
+        background: "hsl(var(--color-background) / <alpha-value>)",
+        foreground: "hsl(var(--color-foreground) / <alpha-value>)",
+        "foreground-muted":
+          "hsl(var(--color-foreground-muted) / <alpha-value>)",
+        primary: "hsl(var(--color-primary) / <alpha-value>)",
+      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
+export default config;
diff --git a/tests/features.spec.ts b/tests/features.spec.ts
new file mode 100644
index 0000000..601746e
--- /dev/null
+++ b/tests/features.spec.ts
@@ -0,0 +1,43 @@
+import { expect, test } from "@playwright/test";
+
+import mockFeaturesResponse from "./fixtures/features-response.json";
+
+test("Features and Implementations page returns Features", async ({ page }) => {
+  // Mock the API response before navigating
+  await page.route("*/**/entries?content_type=feature", async (route) => {
+    await route.fulfill({ json: mockFeaturesResponse });
+  });
+
+  await page.goto("/features");
+  await expect(page.locator("h1")).toContainText(
+    "Features and Implementations",
+  );
+  await expect(page.getByRole("main")).toContainText(
+    "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.",
+  );
+
+  await expect(
+    page.getByRole("heading", { name: "Features", exact: true }),
+  ).toBeVisible();
+
+  // Test mocked features data:
+  const featureList = page.getByTestId("feature-list");
+  await expect(featureList).toBeVisible();
+  await expect(featureList.locator("li")).toContainText(
+    "I am a test featured description for the test feature",
+  );
+
+  await expect(page.getByRole("main")).toContainText(
+    "Building on Hyrax, Hyku has a long list of features and distinctions, including:",
+  );
+  await expect(page.getByRole("main")).toContainText("Hyku 5.0");
+  await expect(
+    page.getByRole("heading", { name: "Implementations", exact: true }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "University of Louisville" }),
+  ).toBeVisible();
+  await expect(
+    page.getByRole("heading", { name: "Shared Research Repository" }),
+  ).toBeVisible();
+});
diff --git a/tests/fixtures/features-response.json b/tests/fixtures/features-response.json
new file mode 100644
index 0000000..ed624e6
--- /dev/null
+++ b/tests/fixtures/features-response.json
@@ -0,0 +1,47 @@
+{
+  "sys": {
+    "type": "Array"
+  },
+  "total": 1,
+  "skip": 0,
+  "limit": 100,
+  "items": [
+    {
+      "metadata": {
+        "tags": []
+      },
+      "sys": {
+        "space": {
+          "sys": {
+            "type": "Link",
+            "linkType": "Space",
+            "id": "gmxjheo1ix1o"
+          }
+        },
+        "id": "3nhZQIjU4QAnOoDdrGn3eC",
+        "type": "Entry",
+        "createdAt": "2024-05-30T16:04:30.810Z",
+        "updatedAt": "2024-05-30T16:04:30.810Z",
+        "environment": {
+          "sys": {
+            "id": "hyku",
+            "type": "Link",
+            "linkType": "Environment"
+          }
+        },
+        "revision": 1,
+        "contentType": {
+          "sys": {
+            "type": "Link",
+            "linkType": "ContentType",
+            "id": "feature"
+          }
+        },
+        "locale": "en-US"
+      },
+      "fields": {
+        "featureDescription": "I am a test featured description for the test feature"
+      }
+    }
+  ]
+}
diff --git a/tests/home.spec.ts b/tests/home.spec.ts
new file mode 100644
index 0000000..8ea5e04
--- /dev/null
+++ b/tests/home.spec.ts
@@ -0,0 +1,22 @@
+import { expect, test } from "@playwright/test";
+
+test("homepage elements", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.getByRole("heading")).toContainText(
+    "The Next Generation Repository Solution",
+  );
+  await expect(page.getByRole("main")).toContainText(
+    "Hyku is a digital repository that provides a robust and flexible platform for institutions to manage, preserve, and provide access to digital content.",
+  );
+
+  await page.getByRole("link", { name: "Get started" }).click();
+  await page.waitForURL("**/getting-started");
+
+  await expect(page.locator("h1")).toContainText("Getting Started");
+
+  await page.goto("/");
+  await page.waitForURL("**/");
+
+  await expect(page.getByRole("main")).toContainText("Documentation →");
+  await expect(page.getByRole("img", { name: "App screenshot" })).toBeVisible();
+});
diff --git a/tests/layout.spec.ts b/tests/layout.spec.ts
new file mode 100644
index 0000000..50f567d
--- /dev/null
+++ b/tests/layout.spec.ts
@@ -0,0 +1,99 @@
+import { expect, test } from "@playwright/test";
+
+const links = [
+  "Features and Implementations",
+  "Getting Started",
+  "Presentations and Demos",
+  "News",
+  "Contact",
+];
+
+test("has main heading and top level navigation", async ({ page }) => {
+  await page.goto("/");
+
+  const header = page.getByLabel("Global");
+  await expect(header).toBeVisible();
+
+  await expect(header.getByAltText("Hyku logo")).toBeVisible();
+
+  await page
+    .getByRole("link", { name: "Features and Implementations" })
+    .nth(1)
+    .click();
+  await expect(
+    page.getByRole("heading", { name: "Features and Implementations" }),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "Getting Started" }).nth(1).click();
+  await expect(
+    page.getByRole("heading", { name: "Getting Started" }),
+  ).toBeVisible();
+
+  await page
+    .getByRole("link", { name: "Presentations and Demos" })
+    .nth(1)
+    .click();
+  await expect(
+    page.getByRole("heading", { name: "Presentations and Demos" }),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "News" }).nth(1).click();
+  await expect(
+    page.getByRole("heading", { name: "News and Events" }),
+  ).toBeVisible();
+
+  await page.getByRole("link", { name: "Contact" }).nth(1).click();
+  await expect(
+    page.getByRole("heading", { name: "Get in touch" }),
+  ).toBeVisible();
+
+  await expect(
+    page.getByRole("link", { name: "Learn more" }).nth(1),
+  ).toHaveAttribute("href", "https://github.com/samvera/hyku");
+});
+
+test("has footer with links to social media", async ({ page }) => {
+  await page.goto("/");
+
+  const footerNav = page.getByLabel("Footer");
+  await expect(footerNav).toBeVisible();
+
+  // Check for main nav links within the footer
+  await Promise.all(
+    links.map((link) =>
+      expect(footerNav.getByRole("link", { name: link })).toBeVisible(),
+    ),
+  );
+
+  // Check for social media links within the footer
+  const footerLayout = page.getByTestId("layout-footer");
+
+  await expect(footerLayout.getByRole("link", { name: "X" })).toHaveAttribute(
+    "href",
+    "http://twitter.com/HykuRepo",
+  );
+  await expect(
+    footerLayout.getByRole("link", { name: "GitHub" }),
+  ).toHaveAttribute("href", "https://github.com/samvera/hyku");
+  await expect(
+    footerLayout.getByRole("link", { name: "YouTube" }),
+  ).toHaveAttribute(
+    "href",
+    "https://www.youtube.com/channel/UC_m1Ovaaasa2ksyGaqz5i0Q",
+  );
+  await expect(
+    footerLayout.getByText("© 2024 Hyku. All rights"),
+  ).toBeVisible();
+});
+
+test.skip("color theme switcher", async ({ page }) => {
+  await page.goto("/");
+  const htmlElement = page.locator("html");
+
+  // Check for theme switcher
+  await page.getByLabel("Color mode").selectOption("dark");
+  expect(htmlElement).toHaveClass("dark");
+
+  await page.getByLabel("Color mode").selectOption("light");
+  expect(htmlElement).toHaveClass("light");
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e8f92ca
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}