CSS Modules और Global CSS

/* app/globals.css  (from the EduSite project) */
:root {
  --brand: #4f46e5;
  --brand-dark: #3730a3;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --bg: #f8fafc;
  --radius: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.65; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; height: auto; }

.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.grid { display: grid; gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.btn  { display: inline-block; background: var(--brand); color: #fff;
        padding: 12px 22px; border-radius: 999px; font-weight: 700; }
.btn:hover { background: var(--brand-dark); }
.badge { background: #eef2ff; color: var(--brand-dark); font-size: .78rem;
         padding: 3px 10px; border-radius: 999px; }

// app/layout.jsx
import './globals.css'      // once, at the top – applies to the whole site

/* components/CourseCard.module.css */
.card  { background: #fff; border: 1px solid var(--line);
         border-radius: var(--radius); overflow: hidden; transition: transform .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.body  { padding: 16px 18px; }
.title { margin: 8px 0 4px; font-size: 1.15rem; }
.fee   { font-weight: 800; color: var(--brand); }

// components/CourseCard.jsx
import Link from 'next/link'
import styles from './CourseCard.module.css'

export default function CourseCard({ course }) {
  return (
    <Link href={`/courses/${course.slug}`} className={styles.card}>
      <div className={styles.body}>
        <span className="badge">{course.level}</span>   {/* global class */}
        <h3 className={styles.title}>{course.title}</h3> {/* module class */}
        <p className={styles.fee}>₹{course.fee}</p>
      </div>
    </Link>
  )
}

/* components/Header.module.css  (EduSite) */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
          backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar    { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav    { display: flex; gap: 6px; }
.nav a  { color: var(--ink); font-weight: 600; padding: 8px 14px; border-radius: 999px; }
.nav a.active { background: var(--brand); color: #fff; }
.toggle { display: none; }               /* hamburger hidden on desktop */

@media (max-width: 760px) {
  .toggle { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0;
         flex-direction: column; background: #fff; padding: 12px 16px; }
  .nav.open { display: flex; }           /* shown when state open = true */
}

// components/Header.jsx (part)
const [open, setOpen] = useState(false)
...
<button className={styles.toggle} aria-expanded={open} onClick={() => setOpen(!open)}>
  {open ? '✕' : '☰'}
</button>
<nav className={`${styles.nav} ${open ? styles.open : ''}`}>
  ...links
</nav>

// 1) template string
<p className={`${styles.fee} ${course.fee === 0 ? styles.free : ''}`}>

// 2) array join (cleaner with many classes)
<p className={[styles.fee, isFree && styles.free].filter(Boolean).join(' ')}>

// 3) inline style for one-off dynamic values
<div style={{ width: `${progress}%`, background: 'var(--brand)', height: 6 }} />