Merge pull request #74 from TryCli-Studio/dev

feat(ui): update landing page icons and fix docs layout

Author: karthikeyjoshi

client/src/components/limit.rs

@@ -5,7 +5,6 @@ pub fn LimitReached() -> impl IntoView {
     view! {
         <div class="limit-container" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100%; padding: 20px; text-align: center; background: var(--bg-dark);">
             <div style="max-width: 600px; padding: 40px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);">
-                <div style="font-size: 4rem; margin-bottom: 20px;">"🛑"</div>
                 <h1 style="font-size: 2rem; font-weight: 800; margin-bottom: 1rem; color: var(--text-main);">
                     "Compute Limit Reached"
                 </h1>

client/src/pages/docs.rs

@@ -236,10 +236,6 @@ curl -fsSL https://my-tool.com/install.sh | sh"</code></pre>
                             <li><strong>"Ephemeral:"</strong>" All viewer sessions are temporary. As soon as the user closes the tab or the session times out, the container is destroyed and all data is wiped."</li>
                         </ul>
                     </section>
-
-                    <div class="docs-footer">
-                        <p>"Need help? "<a href="https://github.com/TryCli-Studio/trycli/issues" target="_blank" rel="noopener noreferrer">"Open an issue on GitHub"</a>" or join our community."</p>
-                    </div>
                 </main>
             </div>
         </div>

client/src/pages/home.rs

@@ -135,17 +135,23 @@ pub fn LandingPage() -> impl IntoView {
                         <h2 class="section-title"><span class="text-gradient">"Key Features"</span></h2>
                         <div class="features-grid">
                             <article class="feature-card">
-                                <div class="icon-box">"🚀"</div>
+                                <div class="icon-box">
+                                    <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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                                </div>
                                 <h3>"Instant Sandboxes"</h3>
                                 <p>"Every session launches a fresh, isolated Ubuntu container. No shared state, no conflicts, and automatic teardown."</p>
                             </article>
                             <article class="feature-card">
-                                <div class="icon-box">"📸"</div>
+                                <div class="icon-box">
+                                    <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"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
+                                </div>
                                 <h3>"Embed Everywhere"</h3>
                                 <p>"Snapshot your environment and embed it in docs, blogs, or wikis. Each embed launches a new isolated session per viewer."</p>
                             </article>
                             <article class="feature-card">
-                                <div class="icon-box">"📘"</div>
+                                <div class="icon-box">
+                                    <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 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>
+                                </div>
                                 <h3>"Interactive Guides"</h3>
                                 <p>"Split-pane interface pairs a real-time terminal with a GitHub-flavored Markdown editor for step-by-step walkthroughs."</p>
                             </article>
@@ -208,7 +214,7 @@ pub fn LandingPage() -> impl IntoView {
                             </div>
                         </div>
                         <div class="footer-bottom">
-                            <span class="copyright">"© 2025 TryCLI Studio. All rights reserved."</span><br/>
+                            <span class="copyright">"© 2026 TryCLI Studio. All rights reserved."</span><br/>
                             <span class="copyright">"Built with ❤️"</span>
                         </div>
                     </div>

client/styles/05-terminal.css

@@ -20,9 +20,9 @@
     transition: opacity 0.2s;
 }
 
-.dot.red { background: #ef4444; }
-.dot.yellow { background: #eab308; }
-.dot.green { background: #22c55e; }
+.dot.red { background: #ef4444; margin: 4px;}
+.dot.yellow { background: #eab308;}
+.dot.green { background: #22c55e; margin: 4px;}
 
 .terminal-header:hover .dot {
     opacity: 1;

client/styles/07-landing.css

@@ -13,6 +13,7 @@
     position: relative;
 }
 
+/* Subtle background grid */
 .landing-container::before {
     content: "";
     position: absolute;
@@ -21,12 +22,12 @@
     width: 100%;
     height: 100%;
     background-image:
-        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-    background-size: 40px 40px;
+        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
+    background-size: 50px 50px;
     z-index: -1;
-    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
-    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
+    mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
+    -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
 }
 
 .landing-nav {
@@ -79,9 +80,10 @@
 }
 
 .text-gradient {
-    background: linear-gradient(to right, #ffffff, #888888);
+    background: linear-gradient(to right, #ffffff, #9ca3af);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
 
 .hero-subtitle {
@@ -103,17 +105,17 @@
 
 /* Section Styles */
 .section-features,
-.section-tech,
 .section-usage {
-    padding: 80px 0;
+    padding: 100px 0;
     border-bottom: 1px solid var(--border);
     position: relative;
+    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.2));
 }
 
 .section-title {
     font-size: 2.5rem;
     font-weight: 800;
-    margin-bottom: 3rem;
+    margin-bottom: 1rem;
     text-align: center;
     color: var(--text-main);
     letter-spacing: -0.03em;
@@ -132,32 +134,48 @@
 /* Features Grid */
 .features-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 24px;
 }
 
 .feature-card {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--bg-panel);
     border: 1px solid var(--border);
     padding: 2rem;
     border-radius: 12px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    position: relative;
+    overflow: hidden;
 }
 
+/* Refined Hover Effect */
 .feature-card:hover {
     transform: translateY(-5px);
-    border-color: var(--accent);
-    background: rgba(255, 255, 255, 0.04);
-    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
+    border-color: #52525b; /* Zinc-600 */
+    background: #27272a;   /* Zinc-800 */
+    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
 }
 
+/* Icon Box for SVGs */
 .icon-box {
-    font-size: 2rem;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
     margin-bottom: 1.25rem;
-    line-height: 1;
+    color: var(--text-main);
+}
+
+.feature-card:hover .icon-box {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
 }
 
 .feature-card h3 {
@@ -174,6 +192,23 @@
     margin: 0;
 }
 
+/* Usage Cases Specifics */
+.case-card {
+    background: transparent;
+}
+
+.case-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.case-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+}
+
 /* Final CTA */
 .final-cta {
     display: flex;
@@ -210,8 +245,4 @@
         width: 100%;
         justify-content: center;
     }
-
-    .section-title {
-        font-size: 2rem;
-    }
-}
+}

client/styles/08-footer-docs.css

@@ -91,99 +91,6 @@
     }
 }
 
-/* ====================================
-   FOOTER
-   ==================================== */
-
-.landing-footer {
-    background: #020202;
-    padding: 3rem 0;
-    margin-top: auto;
-    border-top: 1px solid #1f1f22;
-    width: 100%;
-}
-
-.footer-container {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-}
-
-.footer-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    width: 100%;
-    flex-wrap: wrap;
-    gap: 20px;
-}
-
-.footer-brand {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.brand-name {
-    font-weight: 800;
-    font-size: 1.2rem;
-    color: white;
-}
-
-.footer-brand p {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: 0.9rem;
-}
-
-.footer-links {
-    display: flex;
-    gap: 24px;
-}
-
-.footer-links a {
-    color: var(--text-muted);
-    text-decoration: none;
-    font-size: 0.95rem;
-    transition: color 0.2s;
-}
-
-.footer-links a:hover {
-    color: var(--text-main);
-}
-
-.footer-bottom {
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    padding-top: 1.5rem;
-    text-align: center;
-}
-
-.copyright {
-    color: #52525b;
-    font-size: 0.85rem;
-}
-
-.brand-link {
-    color: inherit;
-    text-decoration: none;
-}
-
-/* Mobile Responsive */
-@media (max-width: 768px) {
-    .footer-top {
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-    }
-
-    .footer-brand {
-        align-items: center;
-    }
-}
-
 /* ====================================
    DOCUMENTATION PAGE
    ==================================== */
@@ -206,8 +113,8 @@
 .docs-layout {
     display: flex;
     flex: 1;
-    max-width: 1400px;
-    margin: 0 auto;
+    /* max-width: 1400px;
+    margin: 0 auto; */
     width: 100%;
 }
 
@@ -275,9 +182,10 @@
 /* Documentation Content */
 .docs-content {
     flex: 1;
-    max-width: 900px;
+    max-width: 950px;
     padding: 60px 40px;
     line-height: 1.7;
+    margin: 0 auto;
 }
 
 .docs-content h1 {