added try online

Author: gcclinux

docs-site/src/pages/Docs.css

@@ -159,6 +159,68 @@ kbd {
   transition: color 0.3s ease;
 }
 
+.try-it-section {
+  margin-top: 4rem;
+  padding: 3rem;
+  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+  border-radius: 12px;
+  text-align: center;
+  color: white;
+}
+
+.try-it-section h2 {
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.try-it-section p {
+  margin-bottom: 2rem;
+  font-size: 1.1rem;
+  opacity: 0.95;
+}
+
+.cta-links {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.cta-button {
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  display: inline-block;
+}
+
+.cta-button:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  text-decoration: none;
+}
+
+.cta-button.primary {
+  background-color: white;
+  color: var(--primary-color);
+}
+
+.cta-button.primary:hover {
+  background-color: #f0f0f0;
+}
+
+.cta-button.secondary {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: 2px solid white;
+}
+
+.cta-button.secondary:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 @media (max-width: 768px) {
   .docs-grid {
     grid-template-columns: 1fr;
@@ -175,4 +237,21 @@ kbd {
   .getting-started {
     padding: 2rem 1.5rem;
   }
+
+  .try-it-section {
+    padding: 2rem 1.5rem;
+  }
+
+  .try-it-section h2 {
+    font-size: 1.5rem;
+  }
+
+  .cta-links {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .cta-button {
+    width: 100%;
+  }
 }

docs-site/src/pages/Docs.tsx

@@ -117,6 +117,16 @@ export default function Docs() {
               </a>
             </div>
           </div>
+
+          <div className="try-it-section">
+            <h2>Try EasyEdit Online</h2>
+            <p>Experience EasyEdit directly in your browser without downloading anything!</p>
+            <div className="cta-links">
+              <Link to="/EasyEdit/docs" className="cta-button secondary">📚 Docs</Link>
+              <a href="https://easyedit-web.web.app/" target="_blank" rel="noopener noreferrer" className="cta-button primary">🚀 Try It</a>
+              <Link to="/EasyEdit/download" className="cta-button secondary">⬇️ Download</Link>
+            </div>
+          </div>
         </div>
       </section>
     </div>

docs-site/src/pages/Home.tsx

@@ -17,11 +17,14 @@ export default function Home() {
               Built for Linux with advanced features for developers and writers.
             </p>
             <div className="hero-buttons">
-              <Link to="/download" className="btn btn-primary">
-                Download Now
-              </Link>
               <Link to="/docs" className="btn btn-secondary">
-                View Documentation
+                📚 Documentation
+              </Link>
+              <a href="https://easyedit-web.web.app/" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
+                🚀 Try It Online
+              </a>
+              <Link to="/download" className="btn btn-secondary">
+                ⬇️ Download
               </Link>
             </div>
           </div>