feat: Implement header, footer, and menu components; update homepage layout

danielmarv · danielmarv · commit d9ed443eeac2 · 2026-03-11T14:51:07.000+03:00
Signed-off-by: Daniel Ntege &lt;danientege785@gmail.com&gt;
diff --git a/nextjs/app/globals.css b/nextjs/app/globals.css
@@ -73,7 +73,7 @@ footer {
   @apply border-t border-charcoal border-solid;
 }
 
-a {
+main a:not([class]) {
   @apply text-red underline;
 }
 
diff --git a/nextjs/app/layout.tsx b/nextjs/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Space_Grotesk, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 
 const spaceGrotesk = Space_Grotesk({
   variable: "--font-space-grotesk",
@@ -23,6 +25,11 @@ export const metadata: Metadata = {
   },
   description:
     "Hiero is the first open-source distributed ledger technology (DLT) developed in a fully vendor-neutral way as a project of the Linux Foundation.",
+  icons: {
+    icon: "/images/Hiero-Icon.svg",
+    shortcut: "/images/Hiero-Icon.svg",
+    apple: "/images/Hiero-Icon.svg",
+  },
 };
 
 export default function RootLayout({
@@ -32,10 +39,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${spaceGrotesk.variable} ${ibmPlexMono.variable}`}
-      >
-        {children}
+      <body className={`${spaceGrotesk.className} ${spaceGrotesk.variable} ${ibmPlexMono.variable}`}>
+        <header className="relative h-[90px]">
+          <Header />
+        </header>
+        <main>{children}</main>
+        <footer>
+          <Footer />
+        </footer>
       </body>
     </html>
   );
diff --git a/nextjs/app/page.tsx b/nextjs/app/page.tsx
@@ -1,65 +1,28 @@
-import Image from "next/image";
-
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+    <section className="bg-linear-to-br from-red-dark via-red to-red text-white">
+      <div className="container py-24 sm:py-36 text-center">
+        <h1 className="text-4xl sm:text-3xl leading-none tracking-[-0.15rem] mb-4">Hiero Website Migration In Progress</h1>
+        <p className="text-xl max-w-3xl mx-auto text-white-dark">
+          This Next.js version is being rebuilt from the Hugo site. Homepage sections are coming next.
+        </p>
+        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
           <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            href="https://github.com/hiero-ledger/hiero-website"
             target="_blank"
             rel="noopener noreferrer"
+            className="bg-white text-charcoal no-underline px-6 py-3 rounded-full font-medium hover:bg-sand transition-colors"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
+            View Repository
           </a>
           <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
+            href="/blog"
+            className="border border-white text-black no-underline px-6 py-3 rounded-full font-medium hover:bg-white hover:text-charcoal transition-colors"
           >
-            Documentation
+            Blog (Next.js)
           </a>
         </div>
-      </main>
-    </div>
+      </div>
+    </section>
   );
 }
diff --git a/nextjs/components/Container.tsx b/nextjs/components/Container.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+type ContainerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export default function Container({ children, className = "" }: ContainerProps) {
+  return <div className={`container ${className}`.trim()}>{children}</div>;
+}
diff --git a/nextjs/components/Footer.tsx b/nextjs/components/Footer.tsx
@@ -0,0 +1,23 @@
+import Container from "@/components/Container";
+
+export default function Footer() {
+  return (
+    <div className="bg-black text-base text-white-dark text-center py-8">
+      <Container>
+        <p>
+          Copyright © Hiero a Series of LF Projects, LLC | For web site terms of use, trademark policy and other
+          project policies please see{" "}
+          <a
+            href="https://lfprojects.org"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="text-white underline hover:text-white"
+          >
+            https://lfprojects.org
+          </a>
+          .
+        </p>
+      </Container>
+    </div>
+  );
+}
diff --git a/nextjs/components/Header.tsx b/nextjs/components/Header.tsx
@@ -0,0 +1,19 @@
+import Image from "next/image";
+import Link from "next/link";
+import Container from "@/components/Container";
+import Menu from "@/components/Menu";
+
+export default function Header() {
+  return (
+    <div className="h-[90px] flex items-center fixed inset-x-0 top-0 z-50 bg-white">
+      <Container>
+        <div className="flex flex-row justify-between items-center">
+          <Link href="/" aria-label="Go to homepage">
+            <Image src="/images/Hiero-Icon-wLogo.svg" alt="Hiero logo" className="h-[40px] w-[128px]" width={128} height={40} priority />
+          </Link>
+          <Menu />
+        </div>
+      </Container>
+    </div>
+  );
+}
diff --git a/nextjs/components/Menu.tsx b/nextjs/components/Menu.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+type MenuItem = {
+  name: string;
+  href: string;
+  external?: boolean;
+};
+
+const menuItems: MenuItem[] = [
+  {
+    name: "Good First Issues",
+    href: "https://github.com/issues?q=is%3Aopen%20is%3Aissue%20org%3Ahiero-ledger%20archived%3Afalse%20no%3Aassignee%20(label%3A%22good%20first%20issue%22%20OR%20label%3A%22skill%3A%20good%20first%20issue%22)%20(repo%3Ahiero-ledger%2Fhiero-sdk-cpp%20OR%20repo%3Ahiero-ledger%2Fhiero-sdk-swift%20OR%20repo%3Ahiero-ledger%2Fhiero-sdk-python%20OR%20repo%3Ahiero-ledger%2Fhiero-sdk-js%20OR%20repo%3Ahiero-ledger%2Fhiero-website)",
+    external: true,
+  },
+  { name: "Connect", href: "/#connect" },
+  { name: "Blog", href: "/blog" },
+  {
+    name: "Calendar",
+    href: "https://zoom-lfx.platform.linuxfoundation.org/meetings/hiero?view=week",
+    external: true,
+  },
+];
+
+export default function Menu() {
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    document.body.style.overflow = isOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  const isActive = (href: string): boolean => {
+    if (href.startsWith("http")) return false;
+    if (href.startsWith("/#")) return pathname === "/";
+    if (href === "/blog") return pathname === "/blog" || pathname.startsWith("/blog/");
+    return pathname === href;
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        className="sm:hidden"
+        onClick={() => setIsOpen(true)}
+        aria-label="Open menu"
+        aria-expanded={isOpen}
+      >
+        <Image src="/images/Hiero-Icon-Nav-Menu.svg" alt="Open menu" className="w-5 h-5" width={20} height={20} />
+      </button>
+
+      <nav
+        id="navigation"
+        className={`${isOpen ? "active-navigation" : "hidden"} absolute items-center justify-center w-full h-screen bg-black top-0 left-0 text-white sm:relative sm:h-auto sm:top-auto sm:bg-transparent sm:left-auto sm:w-9/12 sm:max-w-xl sm:block`}
+        aria-hidden={!isOpen && pathname !== undefined}
+      >
+        <div className="absolute top-[27px] sm:hidden">
+          <Image src="/images/Hiero-Icon-wLogo-white-text.svg" alt="Hiero logo" className="h-[40px] w-[128px]" width={128} height={40} />
+        </div>
+
+        <button
+          type="button"
+          className="absolute text-white top-[35px] right-[25px] sm:hidden"
+          onClick={() => setIsOpen(false)}
+          aria-label="Close menu"
+        >
+          <Image src="/images/Hiero-Icon-ModalClose.svg" alt="Close menu" className="w-5 h-5" width={20} height={20} />
+        </button>
+
+        <ul id="menu" className="flex flex-col sm:flex-row justify-between">
+          {menuItems.map((item) => (
+            <li
+              key={item.name}
+              className={`text-center sm:text-left ${item.name === "Connect" ? "sm:hidden" : ""}`.trim()}
+            >
+              {item.external ? (
+                <a
+                  href={item.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => setIsOpen(false)}
+                >
+                  {item.name}
+                </a>
+              ) : (
+                <Link href={item.href} className={isActive(item.href) ? "active" : ""} onClick={() => setIsOpen(false)}>
+                  {item.name}
+                </Link>
+              )}
+            </li>
+          ))}
+
+          <li className="self-center">
+            <a href="https://github.com/hiero-ledger/" target="_blank" rel="noopener noreferrer" className="flex">
+              <Image src="/images/Hiero-Icon-Github.svg" alt="GitHub" className="h-[35px] w-[35px] sm:h-[17px] sm:w-[17px]" width={35} height={35} />
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -73,7 +73,7 @@ footer {`
`73`	`73`	`@apply border-t border-charcoal border-solid;`
`74`	`74`	`}`
`75`	`75`
`76`		`-a {`
	`76`	`+main a:not([class]) {`
`77`	`77`	`@apply text-red underline;`
`78`	`78`	`}`
`79`	`79`