import Nav from "../components/Nav";
import "../hobbies/styles.css"; /* EKSTERNAL CSS: .layout-container di styles.css atur tata letak wrapper ini */

export default function About() {
  return (
    <div id="about-page" className="layout-container">
      {/* INTERNAL CSS: #about-page + .about-card dll. di about/head.tsx */}
      {/* EKSTERNAL CSS: .layout-container dari styles.css mengatur wrapper layout halaman ini */}
      <header className="about-header">
        <Nav />
        <h1 className="about-h1">Tentang Saya</h1>
      </header>

      <main className="about-main">
        <section className="about-card">
          <p className="about-p">Nama: Hulio</p>
          <p className="about-p">Semester: 3</p>
          <p className="about-p">Kuliah: Informatika</p>
        </section>
      </main>

      <footer className="about-footer">&copy; 2026 Hulio</footer>
    </div>
  );
}