refactor: restructure navigation and add resources page

Author: eric15342335

src/app/contact-us/page.tsx src/app/our-work/page.tsxsrc/app/contact-us/page.tsx renamed to src/app/our-work/page.tsx

@@ -2,8 +2,9 @@ import { Metadata } from "next";
 import { ComingSoon } from "@/components/sections/coming-soon";
 import { siteConfig } from "@/lib/config";
 
-const title = "Contact Us";
-const description = "Get in touch with the ALPHA Chapter at the University of Hong Kong.";
+const title = "Our Work";
+const description =
+  "Discover the projects and initiatives by the ALPHA Chapter at the University of Hong Kong.";
 
 export const metadata: Metadata = {
   title,
@@ -28,7 +29,7 @@ export const metadata: Metadata = {
   },
 };
 
-export default function ContactUs() {
+export default function OurWork() {
   return (
     <>
       <ComingSoon />

src/app/resources/page.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from "next";
+import { ComingSoon } from "@/components/sections/coming-soon";
+import { siteConfig } from "@/lib/config";
+
+const title = "Resources";
+const description =
+  "Find useful resources and materials from the ALPHA Chapter at the University of Hong Kong.";
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    images: [
+      {
+        url: siteConfig.seoImage,
+        width: 882,
+        height: 802,
+        alt: title,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title,
+    description,
+    images: [siteConfig.seoImage],
+  },
+};
+
+export default function Resources() {
+  return (
+    <>
+      <ComingSoon />
+    </>
+  );
+}

src/app/sitemap.ts

@@ -1,7 +1,7 @@
 import { MetadataRoute } from "next";
 
 export default function sitemap(): MetadataRoute.Sitemap {
-  const staticRoutes = ["", "/about-us", "/blog", "/event", "/join-us"];
+  const staticRoutes = ["", "/about-us", "/blog", "/upcoming-event", "/join-us", "/our-work", "/resources"];
 
   const siteUrl = process.env.SITE_URL;
 

src/app/event/page.tsx src/app/upcoming-event/page.tsxsrc/app/event/page.tsx renamed to src/app/upcoming-event/page.tsx

@@ -8,7 +8,7 @@ import {
   NavigationMenuList,
 } from "@/components/ui/navigation-menu";
 import { ModeToggle } from "@/components/features/theme/mode-toggle";
-import { Menu } from "lucide-react";
+import { Menu, Mail } from "lucide-react";
 import { FaLinkedin } from "react-icons/fa";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
 import Link from "next/link";
@@ -21,8 +21,10 @@ import { useState } from "react";
 const navLinks = [
   { href: "/", label: "Home" },
   { href: "/about-us", label: "About Us" },
-  { href: "/event", label: "Event" },
+  { href: "/upcoming-event", label: "Upcoming Event" },
   { href: "/blog", label: "Blog" },
+  { href: "/our-work", label: "Our Work" },
+  { href: "/resources", label: "Resources" },
 ];
 
 export function Header() {
@@ -35,7 +37,7 @@ export function Header() {
     >
       <div className="sticky top-0 z-[var(--z-header)]">
         <header className="w-full border-b border-border/40 bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-          <div className="container flex h-16 max-w-full items-center justify-between px-4 md:px-6">
+          <div className="container flex h-16 max-w-full items-center justify-between px-4 lg:px-6">
             <div className="flex items-center gap-6">
               <Link
                 href="/"
@@ -50,7 +52,7 @@ export function Header() {
                 />
                 <span className="font-semibold">ALPHA HKU</span>
               </Link>
-              <nav className="hidden md:flex items-center gap-6 text-sm">
+              <nav className="hidden lg:flex items-center gap-6 text-sm">
                 <NavigationMenu>
                   <NavigationMenuList>
                     {navLinks.map((link) => (
@@ -78,13 +80,7 @@ export function Header() {
               >
                 Join Us
               </a>
-              <a
-                href={`mailto:${siteConfig.email}`}
-                className="hidden sm:block"
-              >
-                Contact Us
-              </a>
-              <div className="hidden md:flex items-center gap-4">
+              <div className="hidden lg:flex items-center gap-4">
                 <a
                   href={siteConfig.github}
                   target="_blank"
@@ -109,13 +105,19 @@ export function Header() {
                 >
                   <FaLinkedin size={18} />
                 </a>
+                <a
+                  href={`mailto:${siteConfig.email}`}
+                  aria-label="Email"
+                >
+                  <Mail size={18} />
+                </a>
               </div>
               <ModeToggle />
               <CollapsibleTrigger asChild>
                 <Button
                   variant="ghost"
                   size="icon"
-                  className="md:hidden"
+                  className="lg:hidden"
                 >
                   <Menu className="h-5 w-5" />
                   <span className="sr-only">Toggle menu</span>
@@ -138,7 +140,7 @@ export function Header() {
                 className="overflow-hidden"
               >
                 <div className="border-b border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
-                  <div className="container px-4 md:px-6 py-4">
+                  <div className="container px-4 lg:px-6 py-4">
                     <nav className="grid gap-4 text-sm">
                       {navLinks.map((link) => (
                         <Link
@@ -161,12 +163,6 @@ export function Header() {
                       >
                         Join Us
                       </Link>
-                      <a
-                        href={`mailto:${siteConfig.email}`}
-                        className="hover:text-foreground/80"
-                      >
-                        Contact Us
-                      </a>
                     </nav>
                   </div>
                 </div>