refactor: reorganize component structure and update formatting scripts

Author: eric15342335

README.md

@@ -53,7 +53,7 @@ This guide is for developers maintaining or contributing to this project.
 - `pnpm build`: Creates a production-ready build.
 - `pnpm start`: Starts the production server (requires `pnpm build` first).
 - `pnpm lint`: Runs ESLint to find code quality issues.
-- `pnpm prettier --write .`: Formats all files. It's recommended to use the [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for format-on-save.
+- `pnpm format`: Formats all files. It's recommended to use the [Prettier VSCode extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for format-on-save.
 
 ## Project Structure
 
@@ -62,11 +62,11 @@ This guide is for developers maintaining or contributing to this project.
 ├── src/
 │   ├── app/             # Next.js App Router pages and layouts.
 │   ├── components/
-│   │   ├── features/    # Self-contained features (e.g., theme toggle).
-│   │   ├── layout/      # Global layout components (Header, Footer).
-│   │   ├── sections/    # Reusable page sections (e.g., Hero, WhoWeAre).
-│   │   └── ui/          # Base UI components from shadcn/ui.
-│   └── lib/             # Utilities (cn function) and site configuration.
+│   │   ├── sections/    # Reusable large components.
+│   │   ├── primitives/  # Reusable small components.
+│   │   └── ui/          # Unmodified shadcn/ui components.
+│   ├── lib/             # Utilities and site configuration.
+│   └── providers/       # App-wide context and state providers.
 ├── public/              # Static assets (images, icons).
 ```
 

src/app/join-us/page.tsx

@@ -3,8 +3,7 @@ import { buildPageMetadata } from "@/lib/config";
 import { AnimatedFillButton } from "@/components/primitives/animated-fill-button";
 import { siteConfig } from "@/lib/config";
 
-const description =
-  "Join The Team at ALPHA University Chapter at HKU, an initiative with great potential.";
+const description = "Join The Team at ALPHA University Chapter at HKU, an initiative with great potential.";
 export const metadata: Metadata = buildPageMetadata("/join-us", { description });
 
 export default function JoinUs() {
@@ -13,9 +12,7 @@ export default function JoinUs() {
       <h1 className="max-w-4xl text-2xl font-bold tracking-tight md:text-4xl">
         Join The Team at ALPHA University Chapter at HKU, an initiative with great potential.
       </h1>
-      <p className="text-base text-muted-foreground md:text-lg">
-        We provide opportunities for:
-      </p>
+      <p className="text-base text-muted-foreground md:text-lg">We provide opportunities for:</p>
       <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
         {[
           { label: "Full Membership", href: "" },

src/app/layout.tsx

@@ -2,9 +2,9 @@ import { siteConfig } from "@/lib/config";
 import type { Metadata } from "next";
 import { GeistSans } from "geist/font/sans";
 import "./globals.css";
-import { ThemeProvider } from "@/components/features/theme/theme-provider";
-import { Header } from "@/components/layout/header";
-import { Footer } from "@/components/layout/footer";
+import { ThemeProvider } from "@/providers/theme-provider";
+import { Header } from "@/components/sections/header";
+import { Footer } from "@/components/sections/footer";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 

src/components/primitives/animated-fill-button.tsx

@@ -14,7 +14,11 @@ export function AnimatedFillButton({ href, children }: AnimatedFillButtonProps)
       size="lg"
       className="rounded-full bg-gradient-to-r from-primary to-primary bg-no-repeat bg-[length:0%_100%] text-primary transition-[background-size,color] duration-300 hover:bg-[length:100%_100%] hover:text-primary-foreground"
     >
-      <a href={href} target="_blank" rel="noopener">
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener"
+      >
         {children}
       </a>
     </Button>

…omponents/features/theme/mode-toggle.tsx src/components/primitives/mode-toggle.tsxsrc/components/features/theme/mode-toggle.tsx renamed to src/components/primitives/mode-toggle.tsx src/components/features/theme/mode-toggle.tsx renamed to src/components/primitives/mode-toggle.tsx

@@ -8,7 +8,7 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
 } from "@/components/ui/navigation-menu";
-import { ModeToggle } from "@/components/features/theme/mode-toggle";
+import { ModeToggle } from "@/components/primitives/mode-toggle";
 import { Menu, Mail } from "lucide-react";
 import { FaLinkedin } from "react-icons/fa";
 import { SiGithub, SiInstagram } from "@icons-pack/react-simple-icons";
@@ -28,7 +28,7 @@ export function Header() {
       onOpenChange={setIsOpen}
     >
       <div className="sticky top-0 z-[var(--z-header)]">
-        <header className="w-full border-b border-border/40 bg-background/60 backdrop-blur supports-[backdrop-filter]:bg-background/40">
+        <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 lg:px-6">
             <div className="flex items-center gap-6">
               <Link