Update index.html

index.html

@@ -63,7 +63,7 @@
     <section id="features" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">✨ Spectral Features</h2>
-            <p class="lead text-center mb-4">Discover the power of GhostPack’s cutting-edge video generation technology.</p>
+            <p class="lead lead-text mb-4">Discover the power of GhostPack’s cutting-edge video generation technology.</p>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card bg-ghost-card h-100" data-bs-toggle="tooltip" title="Matches Veo 3’s photorealism">
@@ -121,7 +121,7 @@
     <section id="optimizations" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🧙‍♂️ Ghostai1’s Math Sorcery</h2>
-            <p class="lead text-center mb-4">GhostPack’s SDK is a spectral masterpiece, optimized with ghostai1’s revolutionary math to dominate low-resource systems.</p>
+            <p class="lead lead-text mb-4">GhostPack’s SDK is a spectral masterpiece, optimized with ghostai1’s revolutionary math to dominate low-resource systems.</p>
             
             <!-- Tabs for Optimization Categories -->
             <ul class="nav nav-tabs justify-content-center mb-4" id="optTab" role="tablist">
@@ -144,7 +144,7 @@
                 <div class="tab-pane fade show active" id="speed" role="tabpanel" aria-labelledby="speed-tab">
                     <div class="row row-cols-1 row-cols-md-3 g-4 mb-4">
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#teacacheModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#teacacheModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🔮 Teacache</h3>
                                     <p class="card-text">Caches diffusion states, slashing ~40% off frame time.</p>
@@ -153,7 +153,7 @@
                             </div>
                         </div>
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#sageModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#sageModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🧙‍♂️ Sage-Attention</h3>
                                     <p class="card-text">Streamlines attention layers for ~5–10% speed-up.</p>
@@ -162,7 +162,7 @@
                             </div>
                         </div>
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#cudaModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cudaModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">⚡ CUDA Tweaks</h3>
                                     <p class="card-text">Optimized allocation for ~10–15% latency cut.</p>
@@ -171,7 +171,7 @@
                             </div>
                         </div>
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#dynamicModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#dynamicModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🚀 Dynamic Scheduling</h3>
                                     <p class="card-text">Adapts processing queues for ~15–20% faster task completion.</p>
@@ -186,7 +186,7 @@
                 <div class="tab-pane fade" id="memory" role="tabpanel" aria-labelledby="memory-tab">
                     <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#contextModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#contextModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">🧬 Context Packing</h3>
                                     <p class="card-text">Compresses contexts, saving ~50% VRAM.</p>
@@ -195,7 +195,7 @@
                             </div>
                         </div>
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#tcmallocModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#tcmallocModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">💾 tcmalloc</h3>
                                     <p class="card-text">Cuts memory overhead by ~5–20%.</p>
@@ -204,7 +204,7 @@
                             </div>
                         </div>
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#cacheModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#cacheModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">📦 Memory Cache</h3>
                                     <p class="card-text">Preloads data, reducing memory swaps by ~25%.</p>
@@ -219,7 +219,7 @@
                 <div class="tab-pane fade" id="compute" role="tabpanel" aria-labelledby="compute-tab">
                     <div class="row row-cols-1 row-cols-md-1 g-4 mb-4">
                         <div class="col">
-                            <div class="card bg-ghost-card text-white h-100" data-bs-toggle="modal" data-bs-target="#batchingModal">
+                            <div class="card bg-ghost-card h-100" data-bs-toggle="modal" data-bs-target="#batchingModal">
                                 <div class="card-body text-center">
                                     <h3 class="card-title">⚡ Dynamic Batching</h3>
                                     <p class="card-text">Adapts batches for ~30–50% throughput gain.</p>
@@ -325,7 +325,7 @@
     <section id="demo" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🎥 Demo Video Showcase</h2>
-            <p class="lead text-center mb-4">Witness GhostPack’s spectral video generation in action!</p>
+            <p class="lead lead-text mb-4">Witness GhostPack’s spectral video generation in action!</p>
             <div class="row">
                 <div class="col-md-8 mx-auto">
                     <div class="card bg-ghost-card">
@@ -346,13 +346,13 @@
     <section id="future" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌌 Future Spectral Phantoms</h2>
-            <p class="lead text-center mb-4">GhostPack is brewing epic upgrades to push the boundaries of AI video generation:</p>
+            <p class="lead light-lead-text mb-4">GhostPack is brewing epic upgrades to push the boundaries of AI video generation:</p>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🗣️ Voice Generation</h3>
-                            <p class="card-text">AI-driven voice synthesis with customizable tones, integrating into ghostgradio.py for narrated videos.</p>
+                            <p class="light-lead-text">AI-driven voice synthesis with customizable tones, integrating into ghostgradio.py for narrated videos.</p>
                         </div>
                     </div>
                 </div>
@@ -360,7 +360,7 @@
                     <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🖼️ AI Images</h3>
-                            <p class="card-text">Generate high-quality starting frames with AI-crafted visuals for enhanced video pipelines.</p>
+                            <p class="light-lead-text">Generate high-quality starting frames with AI-crafted visuals for enhanced video pipelines.</p>
                         </div>
                     </div>
                 </div>
@@ -368,7 +368,7 @@
                     <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🎮 VR Integration</h3>
-                            <p class="card-text">Future support for virtual reality video rendering, expanding into immersive experiences.</p>
+                            <p class="light-lead-text">Future support for virtual reality video rendering, expanding into immersive experiences.</p>
                         </div>
                     </div>
                 </div>
@@ -380,7 +380,7 @@
     <section id="installation" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🛠️ Unleash GhostPack</h2>
-            <p class="lead text-center mb-4">Summon from GitHub. Requires >30GB disk space and compatible hardware.</p>
+            <p class="lead lead-text mb-4">Summon from GitHub. Requires >30GB disk space and compatible hardware.</p>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
                     <div class="card bg-ghost-card h-100">
@@ -390,7 +390,7 @@
 cd GhostPack
 chmod +x install_ubuntu.sh
 ./install_ubuntu.sh</code></pre>
-                            <p>NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p>
+                            <p>Requires NVIDIA GPU, 8GB RAM, Python 3.10, CUDA 12.6.</p>
                         </div>
                     </div>
                 </div>
@@ -425,12 +425,13 @@ chmod +x install_macos.sh
     </section>
 
     <!-- Usage Section -->
-    <section id="usage" class="py-5 bg-light text-dark">
+    <section id="usage" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📹 Weave Ghostly Videos</h2>
+            <p class="lead lead-text mb-4">Step-by-step instructions to harness GhostPack’s video sorcery.</p>
             <ol>
                 <li><strong>Launch Phantom GUI</strong>:
-                    <div class="card bg-ghost-light">
+                    <div class="card bg-ghost-card">
                         <div class="card-body">
                             <pre><code class="code-block">source ~/ghostpack_venv/venv/bin/activate
 cd ~/ghostpack_venv
@@ -439,39 +440,55 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                     </div>
                 </li>
                 <li><strong>Craft Spells</strong>:
-                    <ul>
-                        <li>Upload an image or video frame.</li>
-                        <li>Prompt: “A spectral figure glides through a neon-lit city.”</li>
-                        <li>Enable teacache (⚡️ speed) and adjust batch size.</li>
-                        <li>Set 15fps, 5s video (~75 frames) or customize duration.</li>
-                    </ul>
+                    <div class="card bg-ghost-card">
+                        <div class="card-body lead-text">
+                            <ul>
+                                <li>Upload an image or video frame.</li>
+                                <li>Prompt: “A spectral figure glides through a neon-lit city.”</li>
+                                <li>Enable teacache (⚡️ speed) and adjust batch size.</li>
+                                <li>Set 15fps, 5s video (~75 frames) or customize duration.</li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+                <li><strong>Summon Spirits</strong>:
+                    <div class="card bg-ghost-card">
+                        <div class="card-body lead-text">
+                            <p>Monitor with <code>nvidia-smi</code> (~80–100% GPU usage).</p>
+                        </div>
+                    </div>
+                </li>
+                <li><strong>Export Results</strong>:
+                    <div class="card bg-ghost-card">
+                        <div class="card-body lead-text">
+                            <p>Save MP4 files with adjustable compression (CRF 0–100).</p>
+                        </div>
+                    </div>
                 </li>
-                <li><strong>Summon Spirits</strong>: Monitor with <code>nvidia-smi</code> (~80–100% GPU usage).</li>
-                <li><strong>Export Results</strong>: Save MP4 files with adjustable compression (CRF 0–100).</li>
             </ol>
         </div>
     </section>
 
     <!-- Community Hub Section -->
-    <section id="community" class="py-5 bg-dark text-white">
+    <section id="community" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🤝 Community Hub</h2>
-            <p class="lead text-center mb-4">Join the GhostPack community to share, learn, and collaborate!</p>
+            <p class="lead light-lead-text mb-4">Join the GhostPack community to share, learn, and collaborate!</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">💬 Discord Server</h3>
-                            <p class="card-text">Join our Discord for real-time discussions, support, and updates.</p>
+                            <p class="light-lead-text">Join our Discord for real-time discussions, support, and updates.</p>
                             <a href="https://discord.gg/ghostpack" class="btn btn-ghost" target="_blank">Join Now</a>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body">
                             <h3 class="card-title">🐦 X Thread</h3>
-                            <p class="card-text">Follow our X thread for news, tutorials, and community showcases.</p>
+                            <p class="light-lead-text">Follow our X thread for news, tutorials, and community showcases.</p>
                             <a href="https://x.com/search?q=ghostpack" class="btn btn-ghost" target="_blank">Visit X</a>
                         </div>
                     </div>
@@ -484,24 +501,24 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
     </section>
 
     <!-- Technical Deep Dive Section -->
-    <section id="technical" class="py-5 bg-light text-dark">
+    <section id="technical" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🔍 Technical Deep Dive</h2>
-            <p class="lead text-center mb-4">Explore the technical underpinnings of GhostPack’s video generation engine.</p>
+            <p class="lead lead-text mb-4">Explore the technical underpinnings of GhostPack’s video generation engine.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">🛠️ Architecture</h3>
-                            <p class="card-text">Built on HunyuanVideo and FramePackI2V_HY, leveraging LlamaModel and CLIPTextModel for advanced embeddings.</p>
+                            <p class="lead-text">Built on HunyuanVideo and FramePackI2V_HY, leveraging LlamaModel and CLIPTextModel for advanced embeddings.</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">📊 Pipeline</h3>
-                            <p class="card-text">Utilizes k-diffusion sampling with unipc for high-quality frame generation, optimized for real-time preview.</p>
+                            <p class="lead-text">Utilizes k-diffusion sampling with unipc for high-quality frame generation, optimized for real-time preview.</p>
                         </div>
                     </div>
                 </div>
@@ -513,7 +530,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
     </section>
 
     <!-- FAQ Section -->
-    <section id="faq" class="py-5 bg-dark text-white">
+    <section id="faq" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">❓ Frequently Asked Questions</h2>
             <div class="accordion" id="faqAccordion">
@@ -524,7 +541,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                         </button>
                     </h2>
                     <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
-                        <div class="accordion-body">
+                        <div class="accordion-body light-lead-text">
                             <p>Minimum: 6GB VRAM GPU (e.g., GTX 1650), 8GB RAM. Optimal: 12GB VRAM (e.g., RTX 3060) for full features.</p>
                         </div>
                     </div>
@@ -536,7 +553,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                         </button>
                     </h2>
                     <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
-                        <div class="accordion-body">
+                        <div class="accordion-body light-lead-text">
                             <p>Clone the repo and run the appropriate install script (e.g., <code>./install_ubuntu.sh</code>) as detailed in the Installation section.</p>
                         </div>
                     </div>
@@ -548,7 +565,7 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                         </button>
                     </h2>
                     <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
-                        <div class="accordion-body">
+                        <div class="accordion-body light-lead-text">
                             <p>Yes! Check the Contributing Guidelines section for details on how to get involved.</p>
                         </div>
                     </div>
@@ -558,29 +575,38 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
     </section>
 
     <!-- Tutorials Section -->
-    <section id="tutorials" class="py-5 bg-light text-dark">
+    <section id="tutorials" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📚 Tutorials</h2>
-            <p class="lead text-center mb-4">Step-by-step guides to master GhostPack’s video sorcery.</p>
+            <p class="lead lead-text mb-4">Step-by-step guides to master GhostPack’s video sorcery.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">🎬 Getting Started</h3>
-                            <p class="card-text">Learn to set up GhostPack and generate your first video.</p>
+                            <p class="lead-text">Learn to set up GhostPack and generate your first video with ease.</p>
                             <a href="https://github.com/ghostai1/GhostPack/wiki/Getting-Started" class="btn btn-ghost" target="_blank">View Tutorial</a>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body">
                             <h3 class="card-title">⚙️ Advanced Configuration</h3>
-                            <p class="card-text">Dive into customizing prompts, batch sizes, and settings.</p>
+                            <p class="lead-text">Dive into customizing prompts, batch sizes, and advanced settings for pro-level control.</p>
                             <a href="https://github.com/ghostai1/GhostPack/wiki/Advanced-Configuration" class="btn btn-ghost" target="_blank">View Tutorial</a>
                         </div>
                     </div>
                 </div>
+                <div class="col">
+                    <div class="card bg-ghost-card h-100">
+                        <div class="card-body">
+                            <h3 class="card-title">🎥 Video Export Tips</h3>
+                            <p class="lead-text">Master exporting MP4 files with optimal compression (CRF settings) for quality and size.</p>
+                            <a href="https://github.com/ghostai1/GhostPack/wiki/Video-Export-Tips" class="btn btn-ghost" target="_blank">View Tutorial</a>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="text-center mt-4">
                 <a href="https://github.com/ghostai1/GhostPack/wiki/Tutorials" class="btn btn-outline-ghost" target="_blank">More Tutorials 📖</a>
@@ -589,16 +615,16 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
     </section>
 
     <!-- Contributing Guidelines Section -->
-    <section id="contribute" class="py-5 bg-dark text-white">
+    <section id="contribute" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">🌱 Contributing Guidelines</h2>
-            <p class="lead text-center mb-4">Help shape GhostPack’s future with your skills and ideas!</p>
+            <p class="lead light-lead-text mb-4">Help shape GhostPack’s future with your skills and ideas!</p>
             <div class="row">
                 <div class="col-md-12">
-                    <div class="card bg-ghost-card">
+                    <div class="card bg-ghost-light">
                         <div class="card-body">
                             <h3 class="card-title">🎯 How to Contribute</h3>
-                            <ul class="text-white">
+                            <ul class="light-lead-text">
                                 <li>Fork the repository and create a new branch.</li>
                                 <li>Submit pull requests with detailed descriptions.</li>
                                 <li>Follow the coding standards in the wiki.</li>
@@ -613,21 +639,21 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
     </section>
 
     <!-- Screenshots Section -->
-    <section id="screenshots" class="py-5 bg-light text-dark">
+    <section id="screenshots" class="py-5 bg-dark text-white">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📸 Screenshots</h2>
-            <p class="lead text-center mb-4">Check out GhostPack’s spectral magic in action!</p>
+            <p class="lead lead-text mb-4">Check out GhostPack’s spectral magic in action!</p>
             <div class="row row-cols-1 row-cols-md-3 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body text-center">
-                            <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/7R4MeWxnB3D2-Lw0vxxUL.png" alt="Main" class="img-fluid rounded" style="max-height: 300px;">
+                            <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/7R4MeWxnB3D2-Lw0vxxUL.png" alt="Main Interface" class="img-fluid rounded" style="max-height: 300px;">
                             <p class="mt-2">Main Interface</p>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body text-center">
                             <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/9qNVRX2eM2iCY8xQKcOwW.png" alt="Advanced Settings" class="img-fluid rounded" style="max-height: 300px;">
                             <p class="mt-2">Advanced Settings</p>
@@ -635,38 +661,38 @@ python ghostgradio.py --port 5666 --server 0.0.0.0</code></pre>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-light h-100">
+                    <div class="card bg-ghost-card h-100">
                         <div class="card-body text-center">
-                            <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/--fIS9ITg4-VqN22ySoa2.png" alt="Logs" class="img-fluid rounded" style="max-height: 300px;">
+                            <img src="https://cdn-uploads.huggingface.co/production/uploads/6421b1c68adc8881b974a89d/--fIS9ITg4-VqN22ySoa2.png" alt="Logs Display" class="img-fluid rounded" style="max-height: 300px;">
                             <p class="mt-2">Logs Display</p>
                         </div>
                     </div>
                 </div>
             </div>
-            <p class="text-center mt-4 text-dark">Add more screenshots to showcase your work!</p>
+            <p class="text-center mt-4 lead-text">Add more screenshots to showcase your work!</p>
         </div>
     </section>
 
     <!-- Last Files Section -->
-    <section id="files" class="py-5 bg-dark text-white">
+    <section id="files" class="py-5 bg-light text-dark">
         <div class="container">
             <h2 class="text-center mb-5 animate__animated animate__fadeIn">📂 Latest Conjurations</h2>
-            <p class="lead text-center mb-4">Explore the latest files and logs from the GhostPack repo.</p>
+            <p class="lead light-lead-text mb-4">Explore the latest files and logs from the GhostPack repo.</p>
             <div class="row row-cols-1 row-cols-md-2 g-4">
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body text-center">
                             <h3 class="card-title">📜 Latest File</h3>
-                            <p class="card-text">Check out <code>ghostgradio.py</code>, the heart of GhostPack’s GUI.</p>
+                            <p class="light-lead-text">Check out <code>ghostgradio.py</code>, the heart of GhostPack’s GUI.</p>
                             <a href="https://github.com/ghostai1/GhostPack/blob/main/ghostgradio.py" class="btn btn-ghost" target="_blank">View File</a>
                         </div>
                     </div>
                 </div>
                 <div class="col">
-                    <div class="card bg-ghost-card h-100">
+                    <div class="card bg-ghost-light h-100">
                         <div class="card-body text-center">
                             <h3 class="card-title">📋 Logs</h3>
-                            <p class="card-text">Dive into render logs for debugging and insights.</p>
+                            <p class="light-lead-text">Dive into render logs for debugging and insights.</p>
                             <a href="https://github.com/ghostai1/GhostPack/tree/main/outputs" class="btn btn-ghost" target="_blank">View Logs</a>
                         </div>
                     </div>