Create a shared layout

[MathyouMB]

As a developer, I want the logo, navigation buttons, and title content to be part of a shared layout so that all pages in the project repository have a consistent header and avoid duplication.

---

🧠 Context

Right now, the logo and top navigation buttons (About, Contribute) are implemented directly in the Header component:

<img src="/ccss-logo-2022.png" alt="Logo" className={styles.logo} />
<Button label="About" icon={<Info size={18} />} type="ghost" />
<Button label="Contribute" icon={<Plus size={16} />} type="outline" />

This code is not shared across pages, which means other pages (e.g. a project detail view or future guide pages) would need to duplicate it manually. To improve maintainability and enforce a consistent layout, this header logic should be moved to a shared layout wrapper.

---

🛠️ Implementation Plan

1. Create a shared layout component

   • File: src/layouts/DefaultLayout.tsx
   • Wrap the logo, buttons, and any shared elements
   • Include a <main>{children}</main> block so other content can render inside it

2. Move the header content

   • Move the existing Header code into the new layout component
   • Preserve all styling and logic from Header.tsx

3. Update pages to use the layout

   • For all routes or pages (e.g. app/page.tsx), wrap the content with <DefaultLayout>...</DefaultLayout>

4. Delete or refactor the old Header component if no longer needed

---

✅ Acceptance Criteria

• A shared layout component exists at src/layouts/DefaultLayout.tsx
• The layout contains the logo, "About" and "Contribute" buttons, and title/subtitle
• The UI matches the current design with no regressions in spacing or responsiveness