small updates and refined chat page

company_site/public/static/public/css/style.css

@@ -72,7 +72,8 @@ nav {
     letter-spacing: 0.5px;
 }
 
-.nav-links a:hover {
+.nav-links a:hover,
+.nav-links a.active {
     color: var(--primary-color);
 }
 
@@ -149,6 +150,19 @@ nav {
     border-radius: 2px;
 }
 
+/* Contact Page */
+.contact-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 4rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
 /* Cards */
 .card-grid {
     display: grid;
@@ -252,6 +266,15 @@ nav {
         font-size: 0.85rem;
         color: var(--text-muted);
     }
+
+    .contact-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .form-row {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* Forms */
@@ -357,4 +380,82 @@ nav {
     content: ' ▼';
     font-size: 0.7em;
     margin-left: 5px;
+}
+
+.text-cyber-cyan {
+    --tw-text-opacity: 1;
+    color: rgb(0 243 255 / var(--tw-text-opacity, 1));
+}
+
+/* Product Hero */
+.product-hero {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+    min-height: 80vh;
+    padding: 8rem 2rem 4rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.product-hero-content {
+    text-align: left;
+}
+
+.product-hero-title {
+    font-size: 4rem;
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, #fff, var(--text-muted));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.product-hero-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    margin-bottom: 2.5rem;
+    line-height: 1.6;
+}
+
+.hero-image-container {
+    position: relative;
+    perspective: 1000px;
+}
+
+.hero-image {
+    width: 100%;
+    border-radius: 12px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transform: rotateY(-5deg) rotateX(2deg);
+    transition: transform 0.5s ease;
+}
+
+.hero-image:hover {
+    transform: rotateY(0) rotateX(0);
+}
+
+@media (max-width: 968px) {
+    .product-hero {
+        grid-template-columns: 1fr;
+        text-align: center;
+        padding-top: 6rem;
+        gap: 3rem;
+    }
+
+    .product-hero-content {
+        text-align: center;
+    }
+
+    .product-hero-title {
+        font-size: 3rem;
+    }
+
+    .hero-image {
+        transform: none;
+    }
 }

company_site/public/templates/base.html

@@ -24,12 +24,17 @@
 
   <!-- Navigation Bar -->
   <nav>
-    <a href="{% url 'public_index' %}" class="brand-logo">AI ML Operations</a>
+    <a href="{% url 'public_index' %}" class="brand-logo">
+      AI ML<span class="text-cyber-cyan"> OPERATIONS</span>
+
+    </a>
     <button class="mobile-menu-btn" aria-label="Menu">☰</button>
     <ul class="nav-links">
-      <li><a href="{% url 'public_index' %}">Home</a></li>
+      <li><a href="{% url 'public_index' %}"
+          class="{% if request.resolver_match.url_name == 'public_index' %}active{% endif %}">Home</a></li>
       <li class="dropdown">
-        <a href="#">Services</a>
+        <a href="#"
+          class="{% if request.resolver_match.url_name in 'ai_education,ai_sensor,bot,chat,computers,file_hosting,ml_model,web_design' %}active{% endif %}">Services</a>
         <ul class="dropdown-content">
           <li><a href="{% url 'ai_education' %}">Education</a></li>
           <li><a href="{% url 'ai_sensor' %}">Sensors</a></li>
@@ -41,7 +46,8 @@
           <li><a href="{% url 'web_design' %}">Web Design</a></li>
         </ul>
       </li>
-      <li><a href="{% url 'contact' %}">Contact</a></li>
+      <li><a href="{% url 'contact' %}"
+          class="{% if request.resolver_match.url_name == 'contact' %}active{% endif %}">Contact</a></li>
     </ul>
   </nav>
 

company_site/public/templates/public/chat.html

@@ -3,43 +3,46 @@
 
 {% block content %}
 
-<!-- Hero Section -->
+<!-- Product Hero Section -->
-<div class="hero-section" style="height: 40vh; min-height: 300px;">
+<div class="product-hero">
-  <div class="hero-content">
+  <div class="product-hero-content">
-    <h1 class="hero-title">Chat</h1>
+    <h1 class="product-hero-title">Your Private, Secure AI Workspace</h1>
-    <p class="hero-subtitle">Your Private, Secure, and Powerful LLM Solution</p>
+    <p class="product-hero-subtitle">
-  </div>
+      Experience the power of a locally hosted Large Language Model.
-</div>
+      Keep your data safe, analyze files securely, and never worry about third-party access.
-
-<!-- Product Description Section -->
-<div class="section">
-  <div class="container">
-    <h2 class="section-title">What is Chat?</h2>
-    <p style="text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
-      Chat is a closed-source Large Language Model (LLM) designed specifically for small and medium businesses. Hosted
-      locally, Chat ensures that all your data remains private and secure. With Chat, your data is never sold or
-      accessed by third parties—ever. You retain full control over your accounts and data. Chat also includes advanced
-      file analysis capabilities, making it a versatile tool for your business needs.
     </p>
+    <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+      <a href="https://chat.aimloperations.com" class="btn">Launch Chat</a>
+      <a href="#features" class="btn"
+        style="background: transparent; border: 1px solid var(--text-muted); color: var(--text-color);">Learn More</a>
+    </div>
+  </div>
+  <div class="hero-image-container">
+    <img src="{% static 'public/img/chat_dashboard.png' %}" alt="Chat Dashboard Interface" class="hero-image">
   </div>
 </div>
 
 <!-- Features Section -->
-<div class="section" style="background: var(--surface-color);">
+<div id="features" class="section" style="background: var(--surface-color);">
   <div class="container">
-    <h2 class="section-title">Key Features</h2>
+    <h2 class="section-title">Why Choose Chat?</h2>
     <div class="card-grid">
-      <div class="card" style="text-align: center;">
+      <div class="card">
-        <h5 class="card-title">Local Hosting</h5>
+        <h5 class="card-title">🔒 Total Privacy</h5>
-        <p class="card-text">All data is stored and processed locally, ensuring maximum privacy and security.</p>
+        <p class="card-text">
+          Hosted locally on your infrastructure. Your data never leaves your control and is never sold to third parties.
+        </p>
       </div>
-      <div class="card" style="text-align: center;">
+      <div class="card">
-        <h5 class="card-title">No Third-Party Access</h5>
+        <h5 class="card-title">📄 Smart File Analysis</h5>
-        <p class="card-text">Your data is never sold or accessed by third parties for any reason.</p>
+        <p class="card-text">
+          Upload documents and get instant insights. Perfect for analyzing reports, codebases, and legal documents.
+        </p>
       </div>
-      <div class="card" style="text-align: center;">
+      <div class="card">
-        <h5 class="card-title">File Analysis</h5>
+        <h5 class="card-title">⚡ High Performance</h5>
-        <p class="card-text">Analyze files directly within the platform for seamless integration into your workflows.
+        <p class="card-text">
+          Optimized for speed and efficiency, giving you the power of modern LLMs without the latency of cloud APIs.
         </p>
       </div>
     </div>
@@ -49,21 +52,17 @@
 <!-- Pricing Section -->
 <div class="section">
   <div class="container">
-    <h2 class="section-title">Pricing</h2>
+    <div class="card"
-
+      style="max-width: 800px; margin: 0 auto; text-align: center; padding: 4rem 2rem; border: 1px solid var(--primary-color);">
-    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;">
+      <h2 style="font-size: 2.5rem; margin-bottom: 1rem; color: white;">Simple, Transparent Pricing</h2>
-      <div>
+      <div style="font-size: 4rem; font-weight: 800; color: var(--primary-color); margin-bottom: 1rem;">
-        <img src="{% static 'public/img/chat_screenshot.png' %}"
+        $10 <span style="font-size: 1.5rem; color: var(--text-muted); font-weight: 400;">/ user / month</span>
-          style="width: 100%; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
-      </div>
-      <div class="card" style="text-align: center; padding: 3rem;">
-        <h4 style="font-size: 3rem; color: var(--primary-color); margin-bottom: 0.5rem;">$10</h4>
-        <p style="color: var(--text-muted); margin-bottom: 2rem;">per user per month</p>
-        <p style="margin-bottom: 2rem;">Start with a free trial to experience the power of Chat.</p>
-        <a class="btn" href="https://chat.aimloperations.com">Inquire Now</a>
       </div>
+      <p style="color: var(--text-muted); margin-bottom: 2.5rem; font-size: 1.1rem;">
+        Get full access to all features, including unlimited chats and file analysis.
+      </p>
+      <a class="btn" href="https://chat.aimloperations.com">Start Your Free Trial</a>
     </div>
-
   </div>
 </div>
 

company_site/public/templates/public/contact.html

@@ -13,7 +13,7 @@
 <!-- Contact Content -->
 <div class="section">
   <div class="container">
-    <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 4rem;">
+    <div class="contact-grid">
 
       <!-- Form Column -->
       <div>
@@ -32,7 +32,7 @@
           <h4 class="card-title" style="margin-bottom: 2rem;">Send Us a Message</h4>
           <form action="{% url 'contact' %}" method="POST">
             {% csrf_token %}
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+            <div class="form-row">
               <div class="form-group">
                 <input type="text" class="form-control" name="name" placeholder="Your Name">
               </div>