client/src/components/Header.jsx

/**
 * Hero header with gradient title.
 */

import React from "react";
import styles from "./Header.module.css";

export default function Header() {
  return (
    <header className={styles.hero}>
      <h1 className={styles.title}>EduRecommender</h1>
      <p className={styles.subtitle}>
        Personalised educational content &middot; Embeddings + LLM Re-Ranking
      </p>
      <div className={styles.guide}>
        <span className={styles.guideIcon}>&#128214;</span>
        <span>
          Select a learner profile and get personalised course recommendations
          powered by AI.
        </span>
      </div>
    </header>
  );
}