From 5af81f90489b5c5f4e33dc29b0a7e733702b63d1 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 29 Dec 2022 07:49:55 +0300
Subject: [PATCH] Move the home and 404 pages to default layout

---
 .../VContentSwitcher/VSearchTypePopover.vue   |  21 +-
 src/components/VFourOhFour.vue                |  25 +-
 .../VSearchBar/VStandaloneSearchBar.vue       |  29 +-
 .../VSearchBar/VStandaloneSearchBarOld.vue    |  97 +++++++
 src/components/VHomeGallery/VHomeGallery.vue  |   3 +
 src/components/VHomepageContent.vue           |  66 +++++
 src/components/VImageCarousel.vue             |  96 +++++++
 src/components/VOldHomepageContent.vue        | 120 ++++++++
 src/components/VSourcesTable.vue              |   2 +-
 src/composables/use-match-routes.ts           |   7 +
 src/layouts/default.vue                       |  86 +++---
 src/layouts/error.vue                         |   6 +-
 src/pages/index.vue                           | 265 ++++--------------
 src/pages/search-help.vue                     |   2 +-
 src/pages/sources.vue                         |   9 +-
 tailwind.config.js                            |   1 +
 16 files changed, 557 insertions(+), 278 deletions(-)
 create mode 100644 src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue
 create mode 100644 src/components/VHomepageContent.vue
 create mode 100644 src/components/VImageCarousel.vue
 create mode 100644 src/components/VOldHomepageContent.vue

diff --git a/src/components/VContentSwitcher/VSearchTypePopover.vue b/src/components/VContentSwitcher/VSearchTypePopover.vue
index 8b68f6675d..10f00cd915 100644
--- a/src/components/VContentSwitcher/VSearchTypePopover.vue
+++ b/src/components/VContentSwitcher/VSearchTypePopover.vue
@@ -16,14 +16,16 @@
       id="content-switcher-popover"
       class="min-w-[262px] pt-2"
       size="small"
-      :use-links="true"
-      @select="closePopover"
+      :use-links="placement !== 'searchbar'"
+      @select="handleSelect"
     />
   </VPopover>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
+
+import type { SearchType } from "~/constants/media"
 
 import VPopover from "~/components/VPopover/VPopover.vue"
 import VSearchTypeButton from "~/components/VContentSwitcher/VSearchTypeButton.vue"
@@ -38,16 +40,23 @@ export default defineComponent({
     VSearchTypeButton,
     VSearchTypes,
   },
-  setup() {
+  props: {
+    placement: {
+      type: String as PropType<"searchbar" | "header">,
+      default: "header",
+    },
+  },
+  setup(_, { emit }) {
     const contentMenuPopover = ref<InstanceType<typeof VPopover> | null>(null)
 
-    const closePopover = () => {
+    const handleSelect = (item: SearchType) => {
+      emit("select", item)
       contentMenuPopover.value?.close()
     }
 
     return {
       checkIcon,
-      closePopover,
+      handleSelect,
       contentMenuPopover,
     }
   },
diff --git a/src/components/VFourOhFour.vue b/src/components/VFourOhFour.vue
index 000b52823b..20a5159da2 100644
--- a/src/components/VFourOhFour.vue
+++ b/src/components/VFourOhFour.vue
@@ -1,6 +1,9 @@
 <template>
   <div
-    class="error relative flex min-h-screen flex-col overflow-x-hidden bg-yellow"
+    class="error relative flex flex-col overflow-x-hidden"
+    :class="
+      isNewHeaderEnabled ? 'flex-grow px-6 sm:px-0' : 'min-h-screen bg-yellow'
+    "
   >
     <svg
       class="z-0 pointer-events-none absolute top-20 -mt-[10%] -ml-[20%] w-[140%] fill-dark-charcoal px-6 opacity-5 lg:mx-auto lg:ml-0 lg:w-full lg:px-16"
@@ -11,7 +14,7 @@
     >
       <use :href="`${Oops}#oops`" />
     </svg>
-    <div>
+    <div v-if="!isNewHeaderEnabled">
       <VLink href="/" class="relative z-10 text-dark-charcoal">
         <VBrand class="m-6 text-[18px] lg:mx-10 lg:my-8" />
       </VLink>
@@ -37,11 +40,14 @@
             </template>
           </i18n>
         </p>
-        <VStandaloneSearchBar route="404" @submit="handleSearch" />
+        <VStandaloneSearchBar
+          v-if="isNewHeaderEnabled"
+          route="404"
+          @submit="handleSearch"
+        />
+        <VStandaloneSearchBarOld v-else route="404" @submit="handleSearch" />
       </div>
     </main>
-
-    <VFooter v-if="isNewHeaderEnabled" mode="internal" />
   </div>
 </template>
 
@@ -53,10 +59,9 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 
 import { ALL_MEDIA } from "~/constants/media"
 
-import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
+import VStandaloneSearchBarOld from "~/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue"
 import VLink from "~/components/VLink.vue"
 import VBrand from "~/components/VBrand/VBrand.vue"
-import VFooter from "~/components/VFooter/VFooter.vue"
 
 import Oops from "~/assets/oops.svg"
 
@@ -64,9 +69,11 @@ export default defineComponent({
   name: "VFourOhFour",
   components: {
     VLink,
-    VStandaloneSearchBar,
+    VStandaloneSearchBarOld,
+    VStandaloneSearchBar: () =>
+      import("~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"),
+
     VBrand,
-    VFooter,
   },
   props: ["error"],
   setup() {
diff --git a/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue b/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
index 1b0618026e..3f249f4c4a 100644
--- a/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
+++ b/src/components/VHeader/VSearchBar/VStandaloneSearchBar.vue
@@ -1,6 +1,6 @@
 <template>
   <form
-    class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]"
+    class="search-bar group flex h-14 flex-row items-center rounded-sm border-tx bg-white sm:h-16"
     @submit.prevent="handleSearch"
   >
     <div
@@ -29,7 +29,19 @@
       <!-- @slot Extra information goes here -->
       <slot />
     </div>
-    <VSearchButton type="submit" size="standalone" :route="route" />
+    <VButton
+      type="submit"
+      :aria-label="$t('search.search')"
+      size="disabled"
+      :variant="isHomeRoute ? 'primary' : 'plain'"
+      class="h-full w-14 flex-shrink-0 transition-none rounded-s-none sm:w-16"
+      :class="{
+        'search-button border-black p-0.5px ps-1.5px hover:bg-pink hover:text-white focus:border-tx focus-visible:bg-pink focus-visible:text-white group-focus-within:border-pink group-focus-within:border-tx group-focus-within:bg-pink group-focus-within:text-white group-focus-within:hover:bg-dark-pink group-hover:border-pink group-hover:border-tx group-hover:bg-pink group-hover:text-white group-focus:border-tx':
+          !isHomeRoute,
+      }"
+    >
+      <VIcon :icon-path="searchIcon" />
+    </VButton>
   </form>
 </template>
 
@@ -43,7 +55,10 @@ import {
 
 import { defineEvent } from "~/types/emits"
 
-import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
+import VButton from "~/components/VButton.vue"
+import VIcon from "~/components/VIcon/VIcon.vue"
+
+import searchIcon from "~/assets/icons/search.svg"
 
 /**
  * Displays a search input for a search query and is attached to an action button
@@ -54,7 +69,7 @@ import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
  */
 export default defineComponent({
   name: "VStandaloneSearchBar",
-  components: { VSearchButton },
+  components: { VButton, VIcon },
   props: {
     route: {
       type: String as PropType<"home" | "404">,
@@ -81,6 +96,8 @@ export default defineComponent({
       inputRef,
       handleSearch,
       isHomeRoute,
+
+      searchIcon,
     }
   },
 })
@@ -89,4 +106,8 @@ export default defineComponent({
 .input-field {
   border-inline-end-width: 0;
 }
+
+.search-button {
+  border-inline-start-width: 0;
+}
 </style>
diff --git a/src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue b/src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue
new file mode 100644
index 0000000000..97a17b44b2
--- /dev/null
+++ b/src/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue
@@ -0,0 +1,97 @@
+<template>
+  <form
+    class="search-bar group flex h-[57px] flex-row items-center rounded-sm border-tx bg-white md:h-[69px]"
+    @submit.prevent="handleSearch"
+  >
+    <div
+      class="input-field search-field group flex h-full flex-grow items-center overflow-hidden rounded-sm border p-0.5px pe-1.5px rounded-e-none border-e-0 focus-within:border-1.5 focus-within:border-pink focus-within:bg-dark-charcoal-06 focus-within:p-0 focus-within:pe-1.5px group-hover:bg-dark-charcoal-06"
+      :class="[isHomeRoute ? 'border-tx' : 'border-black']"
+    >
+      <input
+        id="search-bar"
+        ref="inputRef"
+        type="search"
+        name="q"
+        :placeholder="
+          $t(
+            isHomeRoute ? 'hero.search.placeholder' : '404.search-placeholder'
+          ).toString()
+        "
+        class="h-full w-full appearance-none rounded-none bg-tx text-base leading-none text-dark-charcoal placeholder-dark-charcoal-70 ms-4 focus:outline-none md:text-2xl"
+        :aria-label="
+          isHomeRoute
+            ? $t('search.search-bar-label', {
+                openverse: 'Openverse',
+              }).toString()
+            : $t('404.search-placeholder').toString()
+        "
+      />
+      <!-- @slot Extra information goes here -->
+      <slot />
+    </div>
+    <VSearchButton
+      class="flex-shrink-0"
+      type="submit"
+      size="standalone"
+      :route="route"
+    />
+  </form>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  PropType,
+  ref,
+} from "@nuxtjs/composition-api"
+
+import { defineEvent } from "~/types/emits"
+
+import VSearchButton from "~/components/VHeader/VSearchBar/VSearchButton.vue"
+
+/**
+ * Displays a search input for a search query and is attached to an action button
+ * that fires a search request. Can contain other elements like the search type
+ * popover. Is uncontrolled: Vue code does not try to set a default value when
+ * hydrating the server-rendered code, so the value entered before full hydration
+ * is not removed.
+ */
+export default defineComponent({
+  name: "VStandaloneSearchBarOld",
+  components: { VSearchButton },
+  props: {
+    route: {
+      type: String as PropType<"home" | "404">,
+      default: "home",
+    },
+  },
+  emits: {
+    submit: defineEvent<[string]>(),
+  },
+  setup(props, { emit }) {
+    const inputRef = ref<HTMLInputElement | null>(null)
+
+    // Only emit `submit` if the input value is not blank
+    const handleSearch = () => {
+      const searchTerm = inputRef.value?.value.trim()
+      if (searchTerm) {
+        emit("submit", searchTerm)
+      }
+    }
+
+    const isHomeRoute = computed(() => props.route === "home")
+
+    return {
+      inputRef,
+      handleSearch,
+      isHomeRoute,
+    }
+  },
+})
+</script>
+<style scoped>
+.input-field {
+  border-inline-end-width: 0;
+}
+</style>
diff --git a/src/components/VHomeGallery/VHomeGallery.vue b/src/components/VHomeGallery/VHomeGallery.vue
index 6a2da00cf9..46383b8b61 100644
--- a/src/components/VHomeGallery/VHomeGallery.vue
+++ b/src/components/VHomeGallery/VHomeGallery.vue
@@ -57,6 +57,8 @@ import {
 import { useReducedMotion } from "~/composables/use-media-query"
 import useResizeObserver from "~/composables/use-resize-observer"
 
+import VLink from "~/components/VLink.vue"
+
 import imageInfo from "~/assets/homepage_images/image_info.json"
 
 export const GALLERY_SETS = [
@@ -74,6 +76,7 @@ export type GallerySet = typeof GALLERY_SETS[number]
  */
 export default defineComponent({
   name: "VHomeGallery",
+  components: { VLink },
   props: {
     /**
      * the set of images to use for the gallery grid
diff --git a/src/components/VHomepageContent.vue b/src/components/VHomepageContent.vue
new file mode 100644
index 0000000000..9afed6c67a
--- /dev/null
+++ b/src/components/VHomepageContent.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <h2
+      class="mt-auto mb-2 text-[40px] font-light leading-tight lg:text-[63px]"
+    >
+      {{ $t("hero.subtitle") }}
+    </h2>
+
+    <p class="text-base leading-relaxed">
+      {{ $t("hero.description") }}
+    </p>
+
+    <VStandaloneSearchBar class="mt-4 md:mt-6" @submit="handleSearch">
+      <VSearchTypePopover
+        class="mx-3 group-focus-within:bg-white group-hover:bg-white"
+        :active-item="searchType"
+        placement="searchbar"
+        @select="setSearchType"
+      />
+    </VStandaloneSearchBar>
+
+    <!-- Disclaimer for large screens -->
+    <i18n path="hero.disclaimer.content" tag="p" class="mt-4 text-sr">
+      <template #openverse>Openverse</template>
+      <template #license>
+        <VLink
+          href="https://creativecommons.org/licenses/"
+          class="text-dark-charcoal underline hover:text-dark-charcoal"
+          >{{ $t("hero.disclaimer.license") }}</VLink
+        >
+      </template>
+    </i18n>
+  </div>
+</template>
+<script lang="ts">
+import type { SearchType } from "~/constants/media"
+
+import VLink from "~/components/VLink.vue"
+import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
+import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
+
+import type { PropType } from "@nuxtjs/composition-api"
+
+export default {
+  name: "VHomepageContent",
+  components: { VSearchTypePopover, VStandaloneSearchBar, VLink },
+  props: {
+    handleSearch: {
+      type: Function as PropType<(query: string) => void>,
+      required: true,
+    },
+    searchType: {
+      type: String as PropType<SearchType>,
+      required: true,
+    },
+    setSearchType: {
+      type: Function as PropType<(searchType: SearchType) => void>,
+      required: true,
+    },
+  },
+}
+</script>
+<style>
+@screen lg {
+}
+</style>
diff --git a/src/components/VImageCarousel.vue b/src/components/VImageCarousel.vue
new file mode 100644
index 0000000000..50ab1d7ee9
--- /dev/null
+++ b/src/components/VImageCarousel.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="w-full flex-grow overflow-hidden px-6 lg:h-full lg:w-auto"
+    data-testid="image-carousel"
+  >
+    <!-- Height is 114.286vh i.e. 100vh * 8/7 (so that 0.75, 1, 1, 0.75 circles are visible) -->
+    <!-- Width is 57.143vh i.e. half of height (because grid dimensions are 4 ⨯ 2) -->
+    <div
+      class="homepage-images flex min-h-[120px] flex-row items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
+      aria-hidden
+    >
+      <ClientOnly>
+        <Transition
+          v-for="(image, index) in featuredSearch.images"
+          :key="image.identifier"
+          name="fade"
+          mode="out-in"
+          appear
+        >
+          <VLink
+            :href="image.url"
+            class="homepage-image block aspect-square h-30 w-30 rounded-full lg:m-[2vh] lg:h-auto lg:w-auto"
+            :style="{ '--transition-index': `${index * 0.05}s` }"
+          >
+            <img
+              class="aspect-square h-full w-full rounded-full object-cover"
+              :src="image.src"
+              :alt="image.title"
+              width="120"
+              height="120"
+              :title="image.title"
+            />
+          </VLink>
+        </Transition>
+      </ClientOnly>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { useContext, useRouter } from "@nuxtjs/composition-api"
+
+import VLink from "~/components/VLink.vue"
+
+import imageInfo from "~/assets/homepage_images/image_info.json"
+
+export default {
+  name: "VImageCarousel",
+  components: {
+    VLink,
+  },
+  props: {
+    isNewHeaderEnabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const router = useRouter()
+    const { app } = useContext()
+
+    const featuredSearches = imageInfo.sets.map((setItem) => ({
+      ...setItem,
+      images: setItem.images
+        .map((imageItem) => ({
+          ...imageItem,
+          src: require(`~/assets/homepage_images/${setItem.key}/${imageItem.index}.png`),
+          url: router.resolve(
+            app.localePath({
+              name: "image-id",
+              params: { id: imageItem.identifier },
+            })
+          ).href,
+        }))
+        .slice(0, 7),
+    }))
+
+    const featuredSearchIdx = Math.floor(Math.random() * 3)
+    const featuredSearch = featuredSearches[featuredSearchIdx]
+
+    return {
+      featuredSearch,
+    }
+  },
+}
+</script>
+<style>
+@screen lg {
+  .homepage-image:nth-child(even) {
+    transform: translateY(50%);
+  }
+}
+
+.homepage-image {
+  transition-delay: var(--transition-index) !important;
+}
+</style>
diff --git a/src/components/VOldHomepageContent.vue b/src/components/VOldHomepageContent.vue
new file mode 100644
index 0000000000..c794a3cd28
--- /dev/null
+++ b/src/components/VOldHomepageContent.vue
@@ -0,0 +1,120 @@
+<template>
+  <header
+    class="flex w-full flex-grow flex-col justify-between lg:w-auto lg:min-w-[32rem] lg:justify-center xl:min-w-[64rem]"
+  >
+    <VLogoButtonOld
+      class="ms-3 lg:hidden"
+      :auto-resize-logo="false"
+      :is-search-route="false"
+    />
+
+    <div class="z-10 mx-auto w-full px-6 lg:w-auto lg:pe-0 lg:ps-24">
+      <VLink href="/" class="hidden text-dark-charcoal lg:block">
+        <!-- eslint-disable vuejs-accessibility/heading-has-content -->
+        <h1>
+          <VBrand class="text-[46px]" />
+        </h1>
+        <!-- eslint-enable vuejs-accessibility/heading-has-content -->
+      </VLink>
+      <h2
+        class="mt-auto mb-2 max-w-[80%] text-[27px] font-normal leading-[35px] md:mt-16 md:mb-4 md:text-[46px] md:leading-[60px]"
+      >
+        {{ $t("hero.subtitle") }}
+      </h2>
+
+      <p class="text-base md:text-3xl">
+        {{ $t("hero.description") }}
+      </p>
+
+      <div class="mt-8 flex justify-start gap-4 md:hidden">
+        <VSearchTypeRadio
+          v-for="type in supportedSearchTypes"
+          :key="type"
+          :search-type="type"
+          :selected="type === searchType"
+          @select="setSearchType"
+        />
+      </div>
+      <VStandaloneSearchBarOld
+        class="mt-4 max-w-[40rem] md:mt-6"
+        @submit="handleSearch"
+      >
+        <VSearchTypePopoverOld
+          v-show="isDesktopLayout"
+          ref="contentSwitcher"
+          class="mx-3 group-focus-within:bg-white group-hover:bg-white"
+          :active-item="searchType"
+          placement="searchbar"
+          @select="setSearchType"
+        />
+      </VStandaloneSearchBarOld>
+
+      <!-- Disclaimer for large screens -->
+      <i18n
+        path="hero.disclaimer.content"
+        tag="p"
+        class="mt-4 hidden text-sr lg:block"
+      >
+        <template #openverse>Openverse</template>
+        <template #license>
+          <VLink
+            href="https://creativecommons.org/licenses/"
+            class="text-dark-charcoal underline hover:text-dark-charcoal"
+            >{{ $t("hero.disclaimer.license") }}</VLink
+          >
+        </template>
+      </i18n>
+    </div>
+  </header>
+</template>
+<script lang="ts">
+import { PropType } from "@nuxtjs/composition-api"
+
+import { SearchType, supportedSearchTypes } from "~/constants/media"
+
+import VBrand from "~/components/VBrand/VBrand.vue"
+import VLink from "~/components/VLink.vue"
+import VLogoButtonOld from "~/components/VHeaderOld/VLogoButtonOld.vue"
+import VSearchTypePopoverOld from "~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue"
+import VSearchTypeRadio from "~/components/VContentSwitcher/VSearchTypeRadio.vue"
+import VStandaloneSearchBarOld from "~/components/VHeaderOld/VSearchBar/VStandaloneSearchBarOld.vue"
+
+export default {
+  name: "VOldHomepageContent",
+  components: {
+    VBrand,
+    VLink,
+    VLogoButtonOld,
+    VSearchTypePopoverOld,
+    VSearchTypeRadio,
+    VStandaloneSearchBarOld,
+  },
+  props: {
+    handleSearch: {
+      type: Function as PropType<(query: string) => void>,
+      required: true,
+    },
+    isDesktopLayout: {
+      type: Boolean,
+      required: true,
+    },
+    searchType: {
+      type: String as PropType<SearchType>,
+      required: true,
+    },
+    setSearchType: {
+      type: Function as PropType<(type: SearchType) => void>,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      supportedSearchTypes,
+    }
+  },
+}
+</script>
+<style>
+@screen lg {
+}
+</style>
diff --git a/src/components/VSourcesTable.vue b/src/components/VSourcesTable.vue
index a4af9eaa93..c9b89f8e7d 100644
--- a/src/components/VSourcesTable.vue
+++ b/src/components/VSourcesTable.vue
@@ -2,7 +2,7 @@
   <table
     :aria-label="$t('sources.aria.table').toString()"
     role="region"
-    class="not-prose mt-4 mb-10 table w-full table-fixed text-base"
+    class="not-prose table w-full table-fixed text-base"
   >
     <thead>
       <tr>
diff --git a/src/composables/use-match-routes.ts b/src/composables/use-match-routes.ts
index cbcccaf007..1405bb9bf0 100644
--- a/src/composables/use-match-routes.ts
+++ b/src/composables/use-match-routes.ts
@@ -7,6 +7,7 @@ import {
 } from "@nuxtjs/composition-api"
 
 import { ALL_MEDIA, searchTypes, supportedSearchTypes } from "~/constants/media"
+import usePages from "~/composables/use-pages"
 
 /**
  * Reactive property that returns true only on the matching routes.
@@ -63,4 +64,10 @@ export const useMatchSingleResultRoutes = () => {
   return useMatchRoute(routes)
 }
 
+export const useMatchContentPageRoutes = () => {
+  const routes = usePages()
+    .all.filter((page) => page.link.startsWith("/"))
+    .map((page) => page.id)
+  return useMatchRoute(routes)
+}
 export const useMatchHomeRoute = () => useMatchRoute(["index"])
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index a105a755b2..21a219b247 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,45 +1,58 @@
 <template>
   <div
     class="app flex min-h-screen flex-col"
-    :class="[isDesktopLayout ? 'desktop' : 'mobile', breakpoint]"
+    :class="[
+      isDesktopLayout ? 'desktop' : 'mobile',
+      isWhite ? 'bg-white' : 'bg-yellow',
+      breakpoint,
+    ]"
   >
     <div class="sticky top-0 z-40 block">
       <VTeleportTarget name="skip-to-content" :force-destroy="true" />
       <VBanners />
       <template v-if="isNewHeaderEnabled">
         <template v-if="isSearchHeader">
-          <VHeaderDesktop v-if="isDesktopLayout" />
-          <VHeaderMobile v-else />
+          <VHeaderDesktop
+            v-if="isDesktopLayout"
+            :class="isWhite ? 'bg-white' : 'bg-yellow'"
+          />
+          <VHeaderMobile v-else :class="isWhite ? 'bg-white' : 'bg-yellow'" />
         </template>
         <VHeaderInternal
           v-else
-          class="bg-white"
-          :class="{ 'border-b-dark-charcoal-20': isHeaderScrolled }"
+          :class="[
+            { 'border-b-dark-charcoal-20': isHeaderScrolled && isWhite },
+            isWhite ? 'bg-white' : 'bg-yellow',
+          ]"
         />
       </template>
-      <VHeaderOld v-else />
+      <VHeaderOld v-else :class="isWhite ? 'bg-white' : 'bg-yellow'" />
     </div>
 
     <main
-      class="main embedded w-full flex-shrink-0 flex-grow md:w-full"
+      class="main grid flex-grow"
       :class="[
         { 'has-sidebar': isSidebarVisible },
-        isNewHeaderEnabled ? 'new-layout' : 'old-layout',
+        isSidebarVisible
+          ? 'grid-cols-[1fr_var(--filter-sidebar-width)]'
+          : 'grid-cols-1',
       ]"
     >
-      <div v-if="isNewHeaderEnabled" class="main-page min-w-0">
+      <div
+        v-if="isNewHeaderEnabled"
+        class="main-page flex h-full w-full min-w-0 flex-col justify-between"
+      >
         <Nuxt />
         <VFooter
           :mode="isSearchHeader ? 'content' : 'search'"
-          class="border-t border-dark-charcoal-20"
+          :class="{ 'border-t border-dark-charcoal-20': isWhite }"
         />
       </div>
-      <Nuxt v-else class="main-page min-w-0" />
+      <Nuxt v-else class="main-page flex h-full w-full min-w-0 flex-col" />
 
       <aside
         v-if="isSidebarVisible"
-        class="sidebar fixed z-10 overflow-y-auto bg-dark-charcoal-06 end-0"
-        :class="{ 'border-dark-charcoal-20 border-s': isSidebarVisible }"
+        class="sidebar fixed z-10 overflow-y-auto border-dark-charcoal-20 bg-dark-charcoal-06 end-0 border-s"
       >
         <VSearchGridFilter class="px-10 pt-8 pb-10" @close="closeSidebar" />
       </aside>
@@ -63,6 +76,7 @@ import { useWindowScroll } from "~/composables/use-window-scroll"
 import {
   useMatchSearchRoutes,
   useMatchSingleResultRoutes,
+  useMatchContentPageRoutes,
 } from "~/composables/use-match-routes"
 import { useLayout } from "~/composables/use-layout"
 
@@ -118,11 +132,21 @@ const embeddedPage = {
 
     const { matches: isSearchRoute } = useMatchSearchRoutes()
     const { matches: isSingleResultRoute } = useMatchSingleResultRoutes()
+    const { matches: isContentPageRoute } = useMatchContentPageRoutes()
+
+    const isWhite = computed(
+      () =>
+        isSearchRoute.value ||
+        isSingleResultRoute.value ||
+        isContentPageRoute.value
+    )
+
     const isSearchHeader = computed(
       () => isSearchRoute.value || isSingleResultRoute.value
     )
 
     const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
+    const breakpoint = computed(() => uiStore.breakpoint)
 
     /**
      * Filters sidebar is visible only on desktop layouts
@@ -167,7 +191,8 @@ const embeddedPage = {
       isSearchHeader,
       headerHasTwoRows,
       isNewHeaderEnabled,
-      breakpoint: computed(() => uiStore.breakpoint),
+      isWhite,
+      breakpoint,
 
       closeSidebar,
     }
@@ -184,37 +209,4 @@ export default embeddedPage
 .has-sidebar .sidebar {
   width: var(--filter-sidebar-width);
 }
-
-/* TODO: remove these styles when new header is enabled */
-@screen md {
-  /** Display the search filter sidebar and results as independently-scrolling. **/
-  .main.old-layout {
-    @apply grid h-full grid-cols-[1fr_var(--filter-sidebar-width)];
-  }
-  /** Make the main content area span both grid columns when the sidebar is closed... **/
-  .main.old-layout > *:first-child {
-    grid-column: span 2;
-  }
-  /** ...and only one column when it is visible. **/
-  .main.old-layout.has-sidebar > *:first-child {
-    grid-column: 1;
-  }
-}
-/* TODO: remove the new-layout class when new header is enabled */
-@screen lg {
-  /** Display the search filter sidebar and results as independently-scrolling. **/
-  .main.new-layout {
-    @apply grid h-full grid-cols-[1fr_var(--filter-sidebar-width)];
-  }
-  /** Make the main content area span both grid columns when the sidebar is closed... **/
-  .main.new-layout > *:first-child {
-    grid-column: span 2;
-    /** Make sure the bottom element (footer) is all the way at the bottom of the page **/
-    @apply flex flex-col justify-between;
-  }
-  /** ...and only one column when it is visible. **/
-  .main.new-layout.has-sidebar > *:first-child {
-    grid-column: 1;
-  }
-}
 </style>
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
index 6d9f9b75d5..baccacabd0 100644
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -5,12 +5,16 @@
 <script>
 import { defineComponent } from "@nuxtjs/composition-api"
 
+import { useFeatureFlagStore } from "~/stores/feature-flag"
+
 import VFourOhFour from "~/components/VFourOhFour.vue"
 
 export default defineComponent({
   name: "ErrorPage",
   components: { VFourOhFour },
-  layout: "blank",
+  layout: () => {
+    return useFeatureFlagStore().isOn("new_header") ? "default" : "blank"
+  },
   props: ["error"],
 })
 </script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index e5eef78d1e..41bd011726 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,171 +1,52 @@
 <template>
-  <div class="index flex min-h-screen flex-col bg-yellow">
-    <!-- See layout `default.vue` for reference implementation. -->
-    <div v-if="isNewHeaderEnabled" class="sticky top-0 z-40 block">
-      <VHeaderInternal />
-    </div>
-
-    <main
-      class="flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
-      :class="{ 'h-screen overflow-hidden': !isNewHeaderEnabled }"
+  <main
+    class="index flex w-full flex-shrink-0 flex-grow flex-col justify-center gap-6 lg:flex-row lg:items-center lg:gap-0"
+    :class="
+      isNewHeaderEnabled
+        ? 'flex-grow px-6 sm:px-0'
+        : 'h-screen min-h-screen overflow-hidden bg-yellow'
+    "
+  >
+    <VHomepageContent
+      v-if="isNewHeaderEnabled"
+      class="sm:px-14 md:px-20 lg:px-26 xl:w-[53.375rem] xl:pe-0"
+      :handle-search="handleSearch"
+      :search-type="searchType"
+      :set-search-type="setSearchType"
+    />
+
+    <!-- TODO: Refine min-width for different breakpoints, remove magic numbers -->
+    <VOldHomepageContent
+      v-else
+      :handle-search="handleSearch"
+      :is-desktop-layout="isDesktopLayout"
+      :search-type="searchType"
+      :set-search-type="setSearchType"
+    />
+
+    <!-- Image carousel -->
+    <VHomeGallery
+      v-if="isNewHeaderEnabled"
+      class="hidden h-full flex-grow xl:flex"
+    />
+    <VImageCarousel v-else />
+    <!-- Disclaimer as footer for small screens -->
+    <i18n
+      v-if="!isNewHeaderEnabled"
+      path="hero.disclaimer.content"
+      tag="p"
+      class="mt-auto p-6 text-sr lg:hidden"
     >
-      <!-- TODO: Refine min-width for different breakpoints, remove magic numbers -->
-      <header
-        class="box-border flex w-full flex-col justify-between lg:justify-center"
-        :class="
-          isNewHeaderEnabled
-            ? 'sm:px-8 md:px-14 lg:px-20 xl:w-[53.375rem] xl:pe-0'
-            : 'flex-grow lg:w-auto lg:min-w-[32rem] xl:min-w-[64rem]'
-        "
-      >
-        <VLogoButtonOld
-          v-if="!isNewHeaderEnabled"
-          class="ms-3 lg:hidden"
-          :auto-resize-logo="false"
-          :is-search-route="false"
-        />
-
-        <div
-          class="z-10 mx-auto w-full px-6"
-          :class="isNewHeaderEnabled ? 'xl:pe-0' : 'lg:w-auto lg:pe-0 lg:ps-24'"
-        >
-          <VLink
-            v-if="!isNewHeaderEnabled"
-            href="/"
-            class="hidden text-dark-charcoal lg:block"
-          >
-            <!-- eslint-disable vuejs-accessibility/heading-has-content -->
-            <h1><VBrand class="text-[46px]" /></h1>
-            <!-- eslint-enable vuejs-accessibility/heading-has-content -->
-          </VLink>
-
-          <h2
-            class="mt-auto mb-2"
-            :class="
-              isNewHeaderEnabled
-                ? 'text-[40px] font-light leading-tight lg:text-[63px]'
-                : 'max-w-[80%] text-[27px] font-normal leading-[35px] md:mt-16 md:mb-4 md:text-[46px] md:leading-[60px]'
-            "
-          >
-            {{ $t("hero.subtitle") }}
-          </h2>
-
-          <p
-            class="text-base"
-            :class="isNewHeaderEnabled ? 'leading-relaxed' : 'md:text-3xl'"
-          >
-            {{ $t("hero.description") }}
-          </p>
-
-          <div
-            class="mt-8 flex justify-start gap-4"
-            :class="isNewHeaderEnabled ? 'lg:hidden' : 'md:hidden'"
-          >
-            <VSearchTypeRadio
-              v-for="type in supportedSearchTypes"
-              :key="type"
-              :search-type="type"
-              :selected="type === searchType"
-              @select="setSearchType"
-            />
-          </div>
-          <VStandaloneSearchBar
-            class="mt-4 md:mt-6"
-            :class="{ 'max-w-[40rem]': !isNewHeaderEnabled }"
-            @submit="handleSearch"
-          >
-            <VSearchTypePopoverOld
-              v-show="isDesktopLayout"
-              ref="contentSwitcher"
-              class="mx-3 group-focus-within:bg-white group-hover:bg-white"
-              :active-item="searchType"
-              placement="searchbar"
-              @select="setSearchType"
-            />
-          </VStandaloneSearchBar>
-
-          <!-- Disclaimer for large screens -->
-          <i18n
-            path="hero.disclaimer.content"
-            tag="p"
-            class="mt-4 text-sr"
-            :class="{ 'hidden lg:block': !isNewHeaderEnabled }"
-          >
-            <template #openverse>Openverse</template>
-            <template #license>
-              <VLink
-                href="https://creativecommons.org/licenses/"
-                class="text-dark-charcoal underline hover:text-dark-charcoal"
-                >{{ $t("hero.disclaimer.license") }}</VLink
-              >
-            </template>
-          </i18n>
-        </div>
-      </header>
-
-      <!-- Image carousel -->
-      <VHomeGallery
-        v-if="isNewHeaderEnabled"
-        class="hidden h-full flex-grow xl:flex"
-      />
-      <div
-        v-else
-        class="w-full flex-grow overflow-hidden px-6 lg:h-full lg:w-auto"
-        data-testid="image-carousel"
-      >
-        <!-- Height is 114.286vh i.e. 100vh * 8/7 (so that 0.75, 1, 1, 0.75 circles are visible) -->
-        <!-- Width is 57.143vh i.e. half of height (because grid dimensions are 4 ⨯ 2) -->
-        <div
-          class="homepage-images flex min-h-[120px] flex-row items-center gap-4 lg:grid lg:h-[114.286vh] lg:w-[57.143vh] lg:grid-cols-2 lg:grid-rows-4 lg:gap-0"
-          aria-hidden
+      <template #openverse>Openverse</template>
+      <template #license>
+        <VLink
+          href="https://creativecommons.org/licenses/"
+          class="text-dark-charcoal underline hover:text-dark-charcoal"
+          >{{ $t("hero.disclaimer.license") }}</VLink
         >
-          <ClientOnly>
-            <Transition
-              v-for="(image, index) in featuredSearch.images"
-              :key="image.identifier"
-              name="fade"
-              mode="out-in"
-              appear
-            >
-              <VLink
-                :href="image.url"
-                class="homepage-image block aspect-square h-30 w-30 rounded-full lg:m-[2vh] lg:h-auto lg:w-auto"
-                :style="{ '--transition-index': `${index * 0.05}s` }"
-              >
-                <img
-                  class="aspect-square h-full w-full rounded-full object-cover"
-                  :src="image.src"
-                  :alt="image.title"
-                  width="120"
-                  height="120"
-                  :title="image.title"
-                />
-              </VLink>
-            </Transition>
-          </ClientOnly>
-        </div>
-      </div>
-
-      <!-- Disclaimer as footer for small screens -->
-      <i18n
-        v-if="!isNewHeaderEnabled"
-        path="hero.disclaimer.content"
-        tag="p"
-        class="mt-auto p-6 text-sr lg:hidden"
-      >
-        <template #openverse>Openverse</template>
-        <template #license>
-          <VLink
-            href="https://creativecommons.org/licenses/"
-            class="text-dark-charcoal underline hover:text-dark-charcoal"
-            >{{ $t("hero.disclaimer.license") }}</VLink
-          >
-        </template>
-      </i18n>
-    </main>
-
-    <VFooter v-if="isNewHeaderEnabled" mode="internal" />
-  </div>
+      </template>
+    </i18n>
+  </main>
 </template>
 
 <script lang="ts">
@@ -174,7 +55,6 @@ import {
   defineComponent,
   onMounted,
   ref,
-  useContext,
   useMeta,
   useRouter,
 } from "@nuxtjs/composition-api"
@@ -192,33 +72,23 @@ import { useSearchStore } from "~/stores/search"
 import { useUiStore } from "~/stores/ui"
 
 import VLink from "~/components/VLink.vue"
-import VLogoButtonOld from "~/components/VHeaderOld/VLogoButtonOld.vue"
-import VStandaloneSearchBar from "~/components/VHeader/VSearchBar/VStandaloneSearchBar.vue"
-import VSearchTypeRadio from "~/components/VContentSwitcher/VSearchTypeRadio.vue"
 import VSearchTypePopoverOld from "~/components/VContentSwitcherOld/VSearchTypePopoverOld.vue"
-import VBrand from "~/components/VBrand/VBrand.vue"
-import VHomeGallery from "~/components/VHomeGallery/VHomeGallery.vue"
-import VFooter from "~/components/VFooter/VFooter.vue"
-import VHeaderInternal from "~/components/VHeader/VHeaderInternal.vue"
-
-import imageInfo from "~/assets/homepage_images/image_info.json"
+import VImageCarousel from "~/components/VImageCarousel.vue"
+import VOldHomepageContent from "~/components/VOldHomepageContent.vue"
 
 export default defineComponent({
   name: "HomePage",
   components: {
-    VBrand,
-    VHeaderInternal,
-    VFooter,
-    VHomeGallery,
-    VSearchTypePopoverOld,
-    VSearchTypeRadio,
-    VStandaloneSearchBar,
+    VOldHomepageContent,
+    VHomeGallery: () => import("~/components/VHomeGallery/VHomeGallery.vue"),
+    VHomepageContent: () => import("~/components/VHomepageContent.vue"),
+    VImageCarousel,
     VLink,
-    VLogoButtonOld,
   },
-  layout: "blank",
+  layout: () => {
+    return useFeatureFlagStore().isOn("new_header") ? "default" : "blank"
+  },
   setup() {
-    const { app } = useContext()
     const router = useRouter()
 
     const mediaStore = useMediaStore()
@@ -250,25 +120,6 @@ export default defineComponent({
       updateBreakpoint()
     })
 
-    const featuredSearches = imageInfo.sets.map((setItem) => ({
-      ...setItem,
-      images: setItem.images
-        .map((imageItem) => ({
-          ...imageItem,
-          src: require(`~/assets/homepage_images/${setItem.key}/${imageItem.index}.png`),
-          url: router.resolve(
-            app.localePath({
-              name: "image-id",
-              params: { id: imageItem.identifier },
-            })
-          ).href,
-        }))
-        .slice(0, 7),
-    }))
-
-    const featuredSearchIdx = Math.floor(Math.random() * 3)
-    const featuredSearch = featuredSearches[featuredSearchIdx]
-
     const isDesktopLayout = computed(() => uiStore.isDesktopLayout)
 
     const contentSwitcher = ref<InstanceType<
@@ -278,7 +129,9 @@ export default defineComponent({
 
     const setSearchType = (type: SupportedSearchType) => {
       searchType.value = type
-      contentSwitcher.value?.closeMenu()
+      if (!isNewHeaderEnabled) {
+        contentSwitcher.value?.closeMenu()
+      }
     }
 
     const handleSearch = (searchTerm: string) => {
@@ -293,8 +146,6 @@ export default defineComponent({
     }
 
     return {
-      featuredSearch,
-
       isDesktopLayout,
       isNewHeaderEnabled,
 
diff --git a/src/pages/search-help.vue b/src/pages/search-help.vue
index d407813a85..cff399baf4 100644
--- a/src/pages/search-help.vue
+++ b/src/pages/search-help.vue
@@ -205,7 +205,7 @@
       </template>
     </i18n>
 
-    <i18n path="search-guide.example.fuzziness.content" tag="p" class="mb-4">
+    <i18n path="search-guide.example.fuzziness.content" tag="p">
       <template #link>
         <VLink
           :aria-label="$t('search-guide.example.fuzziness.aria-label')"
diff --git a/src/pages/sources.vue b/src/pages/sources.vue
index 3f7a3c7217..11a98036c2 100644
--- a/src/pages/sources.vue
+++ b/src/pages/sources.vue
@@ -74,9 +74,14 @@
         </strong>
       </template>
     </i18n>
-    <template v-for="mediaType in supportedMediaTypes">
+    <template v-for="(mediaType, i) in supportedMediaTypes">
       <h3 :key="`h3-${mediaType}`">{{ $t(`sources.heading.${mediaType}`) }}</h3>
-      <VSourcesTable :key="`table-${mediaType}`" :media="mediaType" />
+      <VSourcesTable
+        :key="`table-${mediaType}`"
+        :media="mediaType"
+        class="mt-4"
+        :class="i < supportedMediaTypes.length - 1 ? 'mb-10' : ''"
+      />
     </template>
   </VContentPage>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index ffe3a34122..9dad076d6e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -88,6 +88,7 @@ module.exports = {
       16: "4.00rem",
       20: "5.00rem",
       24: "6.00rem",
+      26: "6.50rem",
       30: "7.50rem",
       40: "10.00rem",
       50: "12.50rem",