Update design: Google Sites style with header, hero, cards and file list

src/App.jsx

@@ -1,11 +1,25 @@
-import ModulePage from './components/ModulePage';
-
 function App() {
   const moduleCode = '4A-S7-ET';
 
   return (
     <div className="app">
-      <ModulePage moduleCode={moduleCode} />
+      <header className="site-header">
+        <div className="site-logo">
+          <div className="logo-icon">E</div>
+          <h1>Énergétique - Thermique</h1>
+        </div>
+        <nav className="site-nav">
+          <a href="#accueil">Accueil</a>
+          <a href="#documents">Documents</a>
+          <a href="#ressources">Ressources</a>
+        </nav>
+      </header>
+      <main>
+        <ModulePage moduleCode={moduleCode} />
+      </main>
+      <footer className="site-footer">
+        <p>ENISE - École Nationale d'Ingénieurs de Saint-Étienne</p>
+      </footer>
     </div>
   );
 }

src/components/ModulePage.jsx

@@ -46,11 +46,11 @@ export default function ModulePage({ moduleCode }) {
 
   return (
     <div className="module-page">
-      <header className="module-header">
+      <section className="hero-section">
         <h1>{module.title}</h1>
-        <p className="module-meta">{module.year}A - {module.semester}</p>
-        <p className="module-description">{module.description}</p>
-      </header>
+        <p className="hero-meta">{module.year}A - {module.semester}</p>
+        <p className="hero-description">{module.description}</p>
+      </section>
       <SectionList module={module} sections={sections} />
     </div>
   );

src/components/ResourceList.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { databases, Query, CONFIG } from '../appwrite';
 
-export default function ResourceList({ moduleId, sectionId, sectionTitle }) {
+export default function ResourceList({ moduleId, sectionId }) {
   const [resources, setResources] = useState([]);
   const [loading, setLoading] = useState(true);
 
@@ -31,41 +31,50 @@ export default function ResourceList({ moduleId, sectionId, sectionTitle }) {
 
   if (loading) return <div className="loading">Chargement des ressources...</div>;
 
+  const getFileIcon = (type) => {
+    switch (type) {
+      case 'pdf': return '📄';
+      case 'video': return '🎬';
+      case 'link': return '🔗';
+      case 'image': return '🖼️';
+      case 'ppt':
+      case 'pptx': return '📊';
+      case 'doc':
+      case 'docx': return '📝';
+      case 'xls':
+      case 'xlsx': return '📈';
+      default: return '📎';
+    }
+  };
+
+  const getFileSize = (url) => {
+    return '';
+  };
+
   return (
-    <div className="resources-container">
-      <h2>{sectionTitle}</h2>
+    <div className="file-list">
       {resources.length === 0 ? (
-        <p className="no-resources">Aucune ressource pour cette section.</p>
+        <p className="no-resources">Aucun document disponible pour cette section.</p>
       ) : (
-        <ul className="resources-list">
-          {resources.map((r) => (
-            <li key={r.$id} className="resource-item">
-              <a
-                href={r.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="resource-link"
-              >
-                <span className="resource-icon">{getIcon(r.type)}</span>
-                <span className="resource-title">{r.title}</span>
-              </a>
+        resources.map((r) => (
+          <a
+            key={r.$id}
+            href={r.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="file-item"
+          >
+            <div className="file-icon">{getFileIcon(r.type)}</div>
+            <div className="file-info">
+              <div className="file-name">{r.title}</div>
               {r.description && (
-                <p className="resource-description">{r.description}</p>
+                <div className="file-meta">{r.description}</div>
               )}
-            </li>
-          ))}
-        </ul>
+            </div>
+            <div className="file-download">↓</div>
+          </a>
+        ))
       )}
     </div>
   );
-}
-
-function getIcon(type) {
-  switch (type) {
-    case 'pdf': return '📄';
-    case 'video': return '🎬';
-    case 'link': return '🔗';
-    case 'image': return '🖼️';
-    default: return '📎';
-  }
 }

src/components/SectionList.jsx

@@ -1,6 +1,16 @@
 import { useState } from 'react';
 import ResourceList from './ResourceList';
 
+const getIcon = (title) => {
+  const t = title.toLowerCase();
+  if (t.includes('cours')) return '📚';
+  if (t.includes('td')) return '✏️';
+  if (t.includes('tp')) return '🔧';
+  if (t.includes('projet')) return '🛠️';
+  if (t.includes('examen')) return '📝';
+  return '📁';
+};
+
 export default function SectionList({ module, sections }) {
   const [activeSectionId, setActiveSectionId] = useState(
     sections[0]?.$id || null
@@ -9,31 +19,56 @@ export default function SectionList({ module, sections }) {
   const activeSection = sections.find(s => s.$id === activeSectionId);
 
   return (
-    <div className="section-layout">
-      <nav className="section-nav">
-        <h3>Contents</h3>
-        <ul className="nav-list">
-          {sections.map((sec) => (
-            <li key={sec.$id}>
-              <button
-                className={`nav-button ${sec.$id === activeSectionId ? 'active' : ''}`}
-                onClick={() => setActiveSectionId(sec.$id)}
-              >
-                {sec.title}
-              </button>
-            </li>
-          ))}
-        </ul>
-      </nav>
-      <main className="section-content">
-        {activeSectionId && activeSection && (
-          <ResourceList
-            moduleId={module.$id}
-            sectionId={activeSectionId}
-            sectionTitle={activeSection.title}
-          />
-        )}
-      </main>
+    <div>
+      {sections.length > 0 ? (
+        <>
+          <section className="content-section">
+            <div className="section-container">
+              <h2 className="section-title">Contenu du cours</h2>
+              <div className="content-grid">
+                {sections.map((sec) => (
+                  <div
+                    key={sec.$id}
+                    className="content-card"
+                    onClick={() => setActiveSectionId(sec.$id)}
+                  >
+                    <div className="card-header">
+                      <div className="card-icon">{getIcon(sec.title)}</div>
+                      <h3 className="card-title">{sec.title}</h3>
+                    </div>
+                    <p className="card-description">
+                      Cliquez pour voir les documents et ressources
+                    </p>
+                    <span className="card-link">
+                      Accéder →
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          <section className="files-section" id="documents">
+            <div className="section-container">
+              <h2 className="section-title">
+                {activeSection ? activeSection.title : 'Documents'}
+              </h2>
+              {activeSectionId && (
+                <ResourceList
+                  moduleId={module.$id}
+                  sectionId={activeSectionId}
+                />
+              )}
+            </div>
+          </section>
+        </>
+      ) : (
+        <section className="content-section">
+          <div className="section-container">
+            <div className="error">Aucune section disponible.</div>
+          </div>
+        </section>
+      )}
     </div>
   );
 }

src/index.css

@@ -5,158 +5,262 @@
 }
 
 body {
-  font-family: 'Google Sans', Roboto, Arial, sans-serif;
-  background-color: #f8f9fa;
-  color: #202124;
-  line-height: 1.6;
+  font-family: 'Google Sans', 'Roboto', 'Segoe UI', Arial, sans-serif;
+  background-color: #fff;
+  color: #1a1a1a;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
 }
 
 .app {
   min-height: 100vh;
 }
 
+.site-header {
+  background: #fff;
+  border-bottom: 1px solid #dadce0;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.site-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.site-logo .logo-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #4285f4, #34a853);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.site-logo h1 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #202124;
+}
+
+.site-nav {
+  display: flex;
+  gap: 8px;
+}
+
+.site-nav a {
+  text-decoration: none;
+  color: #5f6368;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  transition: background 0.2s;
+}
+
+.site-nav a:hover {
+  background: #f1f3f4;
+  color: #202124;
+}
+
 .module-page {
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
-  padding: 40px 24px;
+  padding: 0;
 }
 
-.module-header {
-  margin-bottom: 40px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid #e0e0e0;
+.hero-section {
+  background: #f8f9fa;
+  padding: 48px 24px;
+  text-align: center;
+  border-bottom: 1px solid #dadce0;
 }
 
-.module-header h1 {
-  font-size: 2.5rem;
+.hero-section h1 {
+  font-size: 2.75rem;
   font-weight: 400;
   color: #202124;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
 }
 
-.module-meta {
+.hero-meta {
   font-size: 1rem;
   color: #5f6368;
   margin-bottom: 16px;
 }
 
-.module-description {
+.hero-description {
   font-size: 1.1rem;
   color: #3c4043;
-  max-width: 800px;
+  max-width: 700px;
+  margin: 0 auto;
 }
 
-.section-layout {
-  display: flex;
-  gap: 32px;
+.content-section {
+  padding: 48px 24px;
 }
 
-.section-nav {
-  width: 240px;
-  flex-shrink: 0;
+.section-container {
+  max-width: 1100px;
+  margin: 0 auto;
 }
 
-.section-nav h3 {
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #5f6368;
-  margin-bottom: 12px;
-  padding-left: 12px;
+.section-title {
+  font-size: 1.75rem;
+  font-weight: 400;
+  color: #202124;
+  margin-bottom: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #dadce0;
 }
 
-.nav-list {
-  list-style: none;
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
 }
 
-.nav-button {
-  width: 100%;
-  text-align: left;
-  padding: 10px 12px;
-  border: none;
-  background: transparent;
-  font-size: 0.95rem;
-  color: #3c4043;
+.content-card {
+  background: #fff;
+  border: 1px solid #dadce0;
+  border-radius: 8px;
+  padding: 24px;
+  transition: box-shadow 0.2s, transform 0.2s;
   cursor: pointer;
-  border-radius: 0 24px 24px 0;
-  transition: background-color 0.2s ease;
 }
 
-.nav-button:hover {
-  background-color: #f1f3f4;
+.content-card:hover {
+  box-shadow: 0 4px 12px rgba(60, 64, 67, 0.15);
+  transform: translateY(-2px);
 }
 
-.nav-button.active {
-  background-color: #e8f0fe;
-  color: #1a73e8;
-  font-weight: 500;
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
 }
 
-.section-content {
-  flex: 1;
-  min-width: 0;
+.card-icon {
+  width: 48px;
+  height: 48px;
+  background: #e8f0fe;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
 }
 
-.resources-container h2 {
-  font-size: 1.5rem;
-  font-weight: 400;
+.card-title {
+  font-size: 1.1rem;
+  font-weight: 500;
   color: #202124;
-  margin-bottom: 24px;
 }
 
-.no-resources {
+.card-description {
+  font-size: 0.9rem;
   color: #5f6368;
-  font-style: italic;
+  margin-bottom: 16px;
 }
 
-.resources-list {
-  list-style: none;
+.card-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: #1a73e8;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
 }
 
-.resource-item {
-  margin-bottom: 16px;
+.card-link:hover {
+  text-decoration: underline;
+}
+
+.files-section {
+  background: #f8f9fa;
+  padding: 48px 24px;
+}
+
+.file-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
   padding: 16px;
-  background: white;
+  background: #fff;
+  border: 1px solid #dadce0;
   border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.1);
-  transition: box-shadow 0.2s ease;
+  text-decoration: none;
+  transition: box-shadow 0.2s;
 }
 
-.resource-item:hover {
-  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.15);
+.file-item:hover {
+  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.1);
 }
 
-.resource-link {
-  display: inline-flex;
+.file-icon {
+  width: 40px;
+  height: 40px;
+  background: #fef7e0;
+  border-radius: 4px;
+  display: flex;
   align-items: center;
-  gap: 12px;
-  text-decoration: none;
-  color: #1a73e8;
+  justify-content: center;
+  font-size: 1.25rem;
+}
+
+.file-info {
+  flex: 1;
+}
+
+.file-name {
+  font-size: 0.95rem;
   font-weight: 500;
-  font-size: 1rem;
+  color: #202124;
+  margin-bottom: 4px;
 }
 
-.resource-link:hover {
-  text-decoration: underline;
+.file-meta {
+  font-size: 0.8rem;
+  color: #5f6368;
 }
 
-.resource-icon {
+.file-download {
+  color: #5f6368;
   font-size: 1.25rem;
 }
 
-.resource-description {
-  margin-top: 8px;
-  margin-left: 36px;
-  font-size: 0.9rem;
+.site-footer {
+  background: #f8f9fa;
+  border-top: 1px solid #dadce0;
+  padding: 24px;
+  text-align: center;
   color: #5f6368;
+  font-size: 0.85rem;
 }
 
 .loading {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 200px;
+  min-height: 300px;
   color: #5f6368;
   font-size: 1rem;
 }
@@ -168,20 +272,16 @@ body {
 }
 
 @media (max-width: 768px) {
-  .section-layout {
+  .site-header {
     flex-direction: column;
+    gap: 16px;
   }
 
-  .section-nav {
-    width: 100%;
-  }
-
-  .nav-button {
-    border-radius: 4px;
-    margin-bottom: 4px;
+  .hero-section h1 {
+    font-size: 2rem;
   }
 
-  .module-header h1 {
-    font-size: 1.75rem;
+  .content-grid {
+    grid-template-columns: 1fr;
   }
 }