first commit

views/page/404.ejs

@@ -0,0 +1,83 @@
+<div class="error-page">
+  <div class="error-container">
+    <h1 class="error-title">404</h1>
+    <h2 class="error-subtitle">Oops! Page Not Found</h2>
+    <p class="error-text">Sorry, the page you are looking for does not exist or has been moved.</p>
+    <div class="error-actions">
+      <a href="/" class="btn btn-primary">Back to Home</a>
+      <a href="/contact" class="btn btn-outline-primary">Contact Support</a>
+    </div>
+  </div>
+</div>
+
+<style>
+.error-page {
+  min-height: calc(100vh - 200px); /* Trừ đi header và footer */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.error-container {
+  text-align: center;
+  max-width: 600px;
+  padding: 40px 20px;
+}
+
+.error-title {
+  font-size: 120px;
+  color: linear-gradient(90deg, #067f3f, #056633, #044e27);
+        background: -webkit-linear-gradient(90deg, #067f3f, #056633, #044e27);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+  margin: 0;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.error-subtitle {
+  font-size: 28px;
+  color: #333;
+  margin: 20px 0;
+}
+
+.error-text {
+  font-size: 18px;
+  color: #666;
+  margin-bottom: 30px;
+}
+
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.btn-outline-primary:hover {
+  border-color: white;
+}
+
+@media (max-width: 768px) {
+  .error-title {
+    font-size: 80px;
+  }
+  
+  .error-subtitle {
+    font-size: 24px;
+  }
+  
+  .error-text {
+    font-size: 16px;
+  }
+  
+  .error-actions {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .error-actions .btn {
+    width: 100%;
+  }
+}
+</style>