Auto commit: 2025-10-24T15:58:32.691Z

index.php

@@ -242,6 +242,59 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
       transform: scale(1.05);
       box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
     }
+    .features-section {
+      padding: 4rem 0;
+      margin-top: -5rem; /* Pull section up to overlap with main gradient */
+      position: relative;
+      z-index: 2;
+    }
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 2rem;
+    }
+    .feature-card {
+      background: rgba(16, 16, 32, 0.6);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 15px;
+      padding: 2rem;
+      text-align: center;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
+    }
+    .feature-card:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 0 20px -5px var(--primary-glow), 0 0 30px -10px var(--secondary-glow);
+      border-color: rgba(0, 242, 234, 0.5);
+    }
+    .feature-icon {
+      width: 60px;
+      height: 60px;
+      margin: 0 auto 1.5rem;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--primary-glow), var(--secondary-glow));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 15px -5px var(--primary-glow);
+      color: #fff;
+    }
+    .feature-icon svg {
+      width: 28px;
+      height: 28px;
+    }
+    .feature-card h3 {
+      font-size: 1.25rem;
+      margin-bottom: 0.5rem;
+      font-weight: 600;
+      text-shadow: 0 0 3px var(--primary-glow);
+    }
+    .feature-card p {
+      font-size: 0.9rem;
+      line-height: 1.5;
+      opacity: 0.8;
+    }
     footer {
       text-align: center;
       padding: 2rem 0;
@@ -262,6 +315,10 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
         width: 200px;
         height: 200px;
       }
+      .features-section {
+        margin-top: -2rem;
+        padding: 2rem 0;
+      }
     }
   </style>
 </head>
@@ -292,6 +349,32 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
     </section>
   </main>
 
+  <section class="features-section container">
+    <div class="features-grid">
+      <div class="feature-card">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+        </div>
+        <h3>AI-Powered Scripting</h3>
+        <p>Generate compelling narratives and dialogue from a simple prompt.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><path d="M10 8v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/></svg>
+        </div>
+        <h3>Visual Generation</h3>
+        <p>Transform your script into stunning visual scenes and character designs.</p>
+      </div>
+      <div class="feature-card">
+        <div class="feature-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12a8 8 0 0 1 8-8 8 8 0 0 1 8 8"/><path d="M12 22c4.42 0 8-3.58 8-8"/><path d="M4 12a8 8 0 0 0 8 8"/></svg>
+        </div>
+        <h3>Instant Sharing</h3>
+        <p>Export and share your cinematic creations with the world in one click.</p>
+      </div>
+    </div>
+  </section>
+
   <footer class="container">
     <p>&copy; <?= date('Y') ?> AuraStudio. All Rights Reserved.</p>
   </footer>