Start an about page v1.0.1

assets/css/main.css

@@ -100,3 +100,89 @@
     transform: translateX(-50%) translateY(-10px);
   }
 }
+
+
+/* About section */
+.about-section {
+  min-height: 100vh;
+  background-color: var(--bg-black);
+  padding: 4rem 2rem;
+}
+
+.about-screen {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.about-title {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.about-title h2 {
+  font-size: 2.5rem;
+  color: var(--white);
+  margin-bottom: 1rem;
+}
+
+.about-title p {
+  color: var(--maroon-pink);
+  font-size: 1.2rem;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.feature-card {
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  padding: 2rem;
+  text-align: center;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  color: var(--white);
+  margin-bottom: 1rem;
+  font-size: 1.3rem;
+}
+
+.feature-card p {
+  color: var(--silver);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .about-section {
+    padding: 3rem 1rem;
+  }
+  
+  .feature-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+  
+  .about-title {
+    margin-bottom: 3rem;
+  }
+  
+  .about-title h2 {
+    font-size: 2rem;
+  }
+}

index.html

@@ -38,6 +38,35 @@
       </div>
     </section>
 
+    <section class="about-section">
+      <div class="about-screen">
+        <div class="about-title">
+          <h2>About us</h2>
+          <p>Keep track of your most important tasks.</p>
+        </div>
+        <div class="about-content">
+          <div class="feature-grid">
+            <div class="feature-card">
+              <div class="feature-icon">📝</div>
+              <h3>Task Management</h3>
+              <p>Create, organize, and track your tasks with ease. Stay on top of your priorities.</p>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">🎯</div>
+              <h3>Goal Setting</h3>
+              <p>Set clear goals and break them down into manageable tasks to achieve success.</p>
+            </div>
+            <div class="feature-card">
+              <div class="feature-icon">📊</div>
+              <h3>Progress Tracking</h3>
+              <p>Monitor your progress and celebrate your achievements as you complete tasks.</p>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+    </section>
+
     <script src="/assets/js/index.js"></script>
   </body>
 </html>