U iconsistency

README.md

@@ -32,17 +32,17 @@ MMSWE is an open-source platform where Myanmar software engineers can showcase t
 
 ## Tech Stack
 
-| Layer | Technology |
-|-------|-----------|
-| **Framework** | Next.js 16 (App Router, Static Export) |
-| **Language** | TypeScript, React 19 |
-| **Styling** | Tailwind CSS 3 + DaisyUI + Sass |
-| **Content** | Contentlayer2 with MDX |
-| **Animation** | Framer Motion, Three.js, React Three Fiber |
-| **i18n** | next-intl (Myanmar & English) |
-| **Fonts** | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) |
-| **Package Manager** | Bun |
-| **Deployment** | GitHub Pages via GitHub Actions |
+| Layer               | Technology                                                                   |
+| ------------------- | ---------------------------------------------------------------------------- |
+| **Framework**       | Next.js 16 (App Router, Static Export)                                       |
+| **Language**        | TypeScript, React 19                                                         |
+| **Styling**         | Tailwind CSS 3 + DaisyUI + Sass                                              |
+| **Content**         | Contentlayer2 with MDX                                                       |
+| **Animation**       | Framer Motion, Three.js, React Three Fiber                                   |
+| **i18n**            | next-intl (Myanmar & English)                                                |
+| **Fonts**           | Bricolage Grotesque, Plus Jakarta Sans, JetBrains Mono, KhitHaungg (Myanmar) |
+| **Package Manager** | Bun                                                                          |
+| **Deployment**      | GitHub Pages via GitHub Actions                                              |
 
 ## Quick Start
 
@@ -119,12 +119,93 @@ Hello! I'm a software engineer from Myanmar...
 
 ### Frontmatter Fields
 
-| Field | Required | Description |
-|-------|----------|-------------|
-| `name` | Yes | Your display name |
-| `description` | No | Short bio (shown on profile card) |
-| `image` | No | Avatar URL (GitHub avatar recommended) |
-| `tags` | No | Technology/skill tags |
+| Field         | Required | Description                            |
+| ------------- | -------- | -------------------------------------- |
+| `name`        | Yes      | Your display name                      |
+| `description` | No       | Short bio (shown on profile card)      |
+| `image`       | No       | Avatar URL (GitHub avatar recommended) |
+| `tags`        | No       | Technology/skill tags                  |
+
+## Add Your Book
+
+1. **Fork** this repository
+2. Create a new file in `content/books/`:
+
+```
+content/books/your-book-title.mdx
+```
+
+3. Add frontmatter and content:
+
+```mdx
+---
+title: book title
+authorName:  the name of book author
+link: https://example.com/book-link
+image: https://example.com/book-cover.jpg
+authorEmail: author@example.com
+authorLink: https://example.com
+---
+
+Short note about why this book is recommended.
+```
+
+4. **Submit a Pull Request** to the `main` branch
+
+### Frontmatter Fields
+
+| Field         | Required | Description                    |
+| ------------- | -------- | ------------------------------ |
+| `title`       | Yes      | Book title                     |
+| `authorName`  | Yes      | Author name                    |
+| `link`        | Yes      | Official/primary resource link |
+| `image`       | No       | Book cover image URL           |
+| `authorEmail` | No       | Author contact email           |
+| `authorLink`  | No       | Author website/profile URL     |
+
+## Add Your Class
+
+1. **Fork** this repository
+2. Create a new file in `content/classes/`:
+
+```
+content/classes/your-class-title.mdx
+```
+
+3. Add frontmatter and content:
+
+```mdx
+---
+title: your class title
+description: short description of your class 
+instructorName: class mentor name
+classLink: https://example.com/classes/react-bootcamp
+tags: tags for tech-stack that involve in this class
+classType: online or in-person
+status: upcoming/completed/incoming
+proofOfAssociation: Proof that submitter is affiliated with the class.
+image: https://example.com/class-cover.jpg
+---
+
+Add trust context, schedule notes, and useful details for learners.
+This is important because PR without trust context for class will be denied.
+```
+
+4. **Submit a Pull Request** to the `main` branch
+
+### Frontmatter Fields
+
+| Field                | Required | Description                               |
+| -------------------- | -------- | ----------------------------------------- |
+| `title`              | Yes      | Class title                               |
+| `description`        | Yes      | Summary of class content                  |
+| `instructorName`     | Yes      | Instructor or organization                |
+| `classLink`          | Yes      | Official class link                       |
+| `tags`               | Yes      | Topic tags (e.g. React, Python)           |
+| `classType`          | Yes      | One of: `online`, `In-Person`             |
+| `status`             | Yes      | One of: `active`, `completed`, `incoming` |
+| `proofOfAssociation` | Yes      | Credibility/proof note for maintainers    |
+| `image`              | No       | Class cover image URL                     |
 
 ## Project Structure
 
@@ -161,14 +242,14 @@ messages/
 
 MMSWE uses the **Obsidian Prism** theme — a dark interface with prismatic accent colors:
 
-| Token | Color | Usage |
-|-------|-------|-------|
-| `obsidian` | `#09090b` | Base background |
-| `surface` | `#1a1a22` | Card backgrounds |
-| `prism-cyan` | `#22d3ee` | Primary accent |
+| Token          | Color     | Usage            |
+| -------------- | --------- | ---------------- |
+| `obsidian`     | `#09090b` | Base background  |
+| `surface`      | `#1a1a22` | Card backgrounds |
+| `prism-cyan`   | `#22d3ee` | Primary accent   |
 | `prism-violet` | `#a78bfa` | Secondary accent |
-| `prism-rose` | `#fb7185` | Tertiary accent |
-| `accent-gold` | `#fbbf24` | Highlight accent |
+| `prism-rose`   | `#fb7185` | Tertiary accent  |
+| `accent-gold`  | `#fbbf24` | Highlight accent |
 
 Typography uses **Bricolage Grotesque** for display, **Plus Jakarta Sans** for body, **JetBrains Mono** for code, and **KhitHaungg** for Myanmar script.
 

content/books/sample-book.mdx

@@ -1,10 +1,10 @@
 ---
 title: "Clean Code"
 authorName: "Robert C. Martin"
-link: "https://www.oreilly.com/library/view/clean-code-a/9780136083238/"
-image: "https://m.media-amazon.com/images/I/41xShlnTZTL._SX374_BO1,204,203,200_.jpg"
-authorEmail: "unclebob@example.com"
-authorLink: "https://blog.cleancoder.com/"
+link: https://www.oreilly.com/library/view/clean-code-a/9780136083238/
+image: https://m.media-amazon.com/images/I/41xShlnTZTL._SX374_BO1,204,203,200_.jpg
+authorEmail: unclebob@example.com
+authorLink: https://blog.cleancoder.com/
 ---
 
 Recommended software craftsmanship reading.

messages/en.json

@@ -358,6 +358,16 @@
     "title": "Profiles",
     "subtitle": "Discover {count}+ software engineers from Myanmar. Browse by technology, search by name, and connect with the community."
   },
+  "booksHero": {
+    "label": "Tech Books & Resources",
+    "title": "Books",
+    "subtitle": "Recommended tech books and learning resources shared by Myanmar software engineers."
+  },
+  "classesHero": {
+    "label": "Tech Classes & Workshops",
+    "title": "Classes",
+    "subtitle": "A trust-first, community-curated directory of tech classes in Myanmar. Listings are reviewed before publication."
+  },
   "footer": {
     "tagline": {
       "prefix": "Empowering Myanmar's Software Engineers to ",

messages/mm.json

@@ -358,6 +358,16 @@
     "title": "ပရိုဖိုင်များ",
     "subtitle": "မြန်မာမှ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာ {count}+ ဦးကို ရှာဖွေပါ။ နည်းပညာအလိုက် ရှာဖွေပါ၊ အမည်ဖြင့် ရှာပါ၊ အသိုင်းအဝိုင်းနှင့် ချိတ်ဆက်ပါ။"
   },
+  "booksHero": {
+    "label": "နည်းပညာ စာအုပ်များနှင့် အရင်းအမြစ်များ",
+    "title": "စာအုပ်များ",
+    "subtitle": "မြန်မာ software engineer များ မျှဝေထားသော နည်းပညာစာအုပ်များနှင့် လေ့လာရေးအရင်းအမြစ်များကို ရှာဖွေပါ။"
+  },
+  "classesHero": {
+    "label": "နည်းပညာ သင်တန်းများနှင့် အလုပ်ရုံဆွေးနွေးပွဲများ",
+    "title": "သင်တန်းများ",
+    "subtitle": "ယုံကြည်စိတ်ချရမှုကို အခြေခံထားသော မြန်မာနည်းပညာသင်တန်းများ စာရင်းဖြစ်ပြီး၊ စာရင်းတင်သွင်းမှုများကို မထုတ်ပြန်မီ စစ်ဆေးအတည်ပြုပါသည်။"
+  },
   "footer": {
     "tagline": {
       "prefix": "မြန်မာ့ ဆော့ဖ်ဝဲ အင်ဂျင်နီယာများကို ",

src/app/books/BooksPageClient.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import Container from "@/components/Common/Container/Container";
+import SectionHero from "@/components/Common/SectionHero/SectionHero";
+import SpacingDivider from "@/components/Common/SpacingDivider/SpacingDivider";
+import { BookOpen, Bookmark, LibraryBig, NotebookPen } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type BookItem = {
+  _id: string;
+  title: string;
+  authorName: string;
+  authorEmail?: string;
+  authorLink?: string;
+  image?: string;
+  link: string;
+};
+
+type BooksPageClientProps = {
+  books: BookItem[];
+};
+
+const BooksPageClient = ({ books }: BooksPageClientProps) => {
+  const t = useTranslations("booksHero");
+
+  return (
+    <Container>
+      <section className="py-16">
+        <SectionHero
+          label={t("label")}
+          title={t("title")}
+          subtitle={t("subtitle")}
+          labelIcon={NotebookPen}
+          labelIconClassName="text-prism-violet"
+          labelChipBackground="linear-gradient(135deg, #a78bfa12, #22d3ee08)"
+          labelChipBorder="1px solid rgba(167,139,250,0.15)"
+          shimmerBackground="linear-gradient(90deg, transparent 0%, rgba(167,139,250,0.1) 50%, transparent 100%)"
+          myanmarTitleColorClass="text-prism-violet"
+          floatingIcons={[
+            {
+              Icon: BookOpen,
+              className: "text-prism-violet/40",
+              style: { top: "8%", right: "6%" },
+              delay: 0.25,
+              sizeClass: "h-4 w-4",
+            },
+            {
+              Icon: LibraryBig,
+              className: "text-prism-cyan/40",
+              style: { top: "65%", right: "14%" },
+              delay: 0.35,
+              sizeClass: "h-3.5 w-3.5",
+            },
+            {
+              Icon: Bookmark,
+              className: "text-prism-rose/35",
+              style: { top: "80%", left: "3%" },
+              delay: 0.45,
+              sizeClass: "h-3.5 w-3.5",
+            },
+          ]}
+        />
+
+        {books.length === 0 ? (
+          <div className="mt-12 rounded-3xl border border-white/10 bg-surface/50 p-8 text-zinc-300">
+            <h2 className="font-display text-2xl font-semibold text-zinc-100">
+              No books yet
+            </h2>
+            <p className="mt-3 max-w-2xl text-sm leading-6 text-zinc-400">
+              Community recommendations will appear here once contributors add
+              book entries to the repository.
+            </p>
+          </div>
+        ) : (
+          <div className="mt-12 grid gap-4">
+            {books.map((book) => (
+              <article
+                key={book._id}
+                className="rounded-3xl border border-white/10 bg-surface/50 p-6 transition-colors hover:border-white/20"
+              >
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+                  <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+                    {book.image && (
+                      <img
+                        src={book.image}
+                        alt={`${book.title} cover`}
+                        className="h-32 w-24 rounded-xl border border-white/10 object-cover"
+                      />
+                    )}
+
+                    <div>
+                      <h2 className="font-display text-2xl font-semibold text-zinc-100">
+                        {book.title}
+                      </h2>
+                      <p className="mt-2 text-sm text-zinc-400">
+                        by {book.authorName}
+                      </p>
+                      {(book.authorEmail || book.authorLink) && (
+                        <div className="mt-3 flex flex-col gap-2 text-sm">
+                          {book.authorEmail && (
+                            <a
+                              href={`mailto:${book.authorEmail}`}
+                              className="text-zinc-400 transition-colors hover:text-prism-cyan"
+                            >
+                              {book.authorEmail}
+                            </a>
+                          )}
+                          {book.authorLink && (
+                            <a
+                              href={book.authorLink}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-zinc-400 transition-colors hover:text-prism-cyan"
+                            >
+                              {book.authorLink}
+                            </a>
+                          )}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <a
+                    href={book.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center justify-center rounded-full border border-prism-cyan/40 px-4 py-2 text-sm font-medium text-prism-cyan transition-colors hover:border-prism-cyan hover:bg-prism-cyan/10"
+                  >
+                    Open Resource
+                  </a>
+                </div>
+              </article>
+            ))}
+          </div>
+        )}
+      </section>
+
+      <SpacingDivider size="lg" />
+    </Container>
+  );
+};
+
+export default BooksPageClient;