View Code - 20260722

# Improved `index.php` – Mister Manager Landing Page

```php
<?php
/* =============================================
   File: /index.php
   Purpose: Public Landing Page (No Auth Required)
   ============================================= */
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mister Manager | Smart ERP & Business Management System</title>
  <meta name="description" content="Mister Manager is a modern ERP and business management platform for production, inventory, salary, machine tracking, attendance, reporting, and business automation.">

*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

body{
      font-family:Inter,Arial,sans-serif;
      background:#f4f8f5;
      color:var(--text);
      line-height:1.6;
    }

a{
      text-decoration:none;
    }

.wrapper{
      width:100%;
      max-width:1200px;
      margin:auto;
      padding:0 20px;
    }

/* =========================
       HEADER
    ========================= */

.topbar{
      background:var(--white);
      border-bottom:1px solid var(--border);
      position:sticky;
      top:0;
      z-index:999;
      backdrop-filter:blur(10px);
    }

.navbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 0;
      gap:20px;
    }

.brand{
      display:flex;
      align-items:center;
      gap:12px;
    }

.brand-logo{
      width:48px;
      height:48px;
      border-radius:14px;
      background:linear-gradient(135deg,var(--primary),#43a047);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:22px;
      font-weight:800;
      box-shadow:var(--shadow);
    }

.brand-text h1{
      font-size:22px;
      color:var(--secondary);
      margin:0;
      line-height:1.2;
    }

.brand-text p{
      margin:0;
      font-size:13px;
      color:var(--muted);
    }

.nav-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
    }

.btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:12px 22px;
      border-radius:12px;
      font-weight:700;
      transition:.25s ease;
      border:none;
      cursor:pointer;
      font-size:15px;
    }

.btn-primary{
      background:var(--primary);
      color:#fff;
      box-shadow:var(--shadow);
    }

.btn-primary:hover{
      background:var(--primary-dark);
      transform:translateY(-2px);
    }

.btn-outline{
      border:1px solid var(--border);
      background:#fff;
      color:var(--secondary);
    }

.btn-outline:hover{
      background:#f1f5f9;
    }

/* =========================
       HERO SECTION
    ========================= */

.hero{
      padding:80px 0 60px;
    }

.hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:40px;
      align-items:center;
    }

.hero-badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 16px;
      background:#e8f5e9;
      border:1px solid #c8e6c9;
      color:var(--primary-dark);
      border-radius:999px;
      font-size:14px;
      font-weight:700;
      margin-bottom:20px;
    }

.hero h2{
      font-size:54px;
      line-height:1.1;
      color:var(--secondary);
      margin-bottom:22px;
    }

.hero h2 span{
      color:var(--primary);
    }

.hero p{
      font-size:18px;
      color:var(--muted);
      margin-bottom:30px;
      max-width:620px;
    }

.hero-actions{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      margin-bottom:34px;
    }

.stats{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }

.stat-box{
      background:#fff;
      border:1px solid var(--border);
      border-radius:16px;
      padding:18px 22px;
      min-width:150px;
      box-shadow:var(--shadow);
    }

.stat-box h3{
      font-size:26px;
      color:var(--primary);
      margin-bottom:4px;
    }

.stat-box p{
      margin:0;
      font-size:14px;
      color:var(--muted);
    }

/* =========================
       HERO CARD
    ========================= */

.dashboard-card{
      background:#fff;
      border-radius:24px;
      border:1px solid var(--border);
      padding:26px;
      box-shadow:0 25px 60px rgba(0,0,0,.10);
    }

.dashboard-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:24px;
    }

.dashboard-title h3{
      margin-bottom:4px;
      color:var(--secondary);
    }

.dashboard-title p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

.status-chip{
      background:#dcfce7;
      color:#166534;
      padding:8px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:700;
    }

.feature-list{
      display:grid;
      gap:14px;
    }

.feature-item{
      display:flex;
      align-items:center;
      gap:14px;
      padding:16px;
      border-radius:16px;
      background:#f8fafc;
      border:1px solid #edf2f7;
    }

.feature-icon{
      width:52px;
      height:52px;
      border-radius:14px;
      background:#e8f5e9;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:22px;
    }

.feature-item h4{
      margin-bottom:4px;
      color:var(--secondary);
    }

.feature-item p{
      margin:0;
      color:var(--muted);
      font-size:14px;
    }

/* =========================
       FEATURES SECTION
    ========================= */

.section{
      padding:70px 0;
    }

.section-head{
      text-align:center;
      margin-bottom:50px;
    }

.section-head h2{
      font-size:40px;
      color:var(--secondary);
      margin-bottom:14px;
    }

.section-head p{
      max-width:760px;
      margin:auto;
      color:var(--muted);
      font-size:17px;
    }

.grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:24px;
    }

.card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:20px;
      padding:28px;
      transition:.25s ease;
      box-shadow:var(--shadow);
    }

.card:hover{
      transform:translateY(-5px);
    }

.card-icon{
      width:60px;
      height:60px;
      border-radius:16px;
      background:#e8f5e9;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:28px;
      margin-bottom:18px;
    }

.card h3{
      margin-bottom:10px;
      color:var(--secondary);
    }

.card p{
      color:var(--muted);
      font-size:15px;
    }

/* =========================
       STORY SECTION
    ========================= */

.story-box{
      background:linear-gradient(135deg,#0f172a,#1e293b);
      color:#fff;
      border-radius:28px;
      padding:50px;
      box-shadow:0 25px 50px rgba(0,0,0,.18);
    }

.story-box h2{
      font-size:42px;
      margin-bottom:20px;
    }

.story-box p{
      color:#cbd5e1;
      font-size:17px;
      max-width:900px;
      margin-bottom:18px;
    }

/* =========================
       CTA SECTION
    ========================= */

.cta{
      text-align:center;
      background:#fff;
      border:1px solid var(--border);
      border-radius:28px;
      padding:60px 30px;
      box-shadow:var(--shadow);
    }

.cta h2{
      font-size:42px;
      margin-bottom:18px;
      color:var(--secondary);
    }

.cta p{
      color:var(--muted);
      max-width:720px;
      margin:0 auto 28px;
      font-size:17px;
    }

/* =========================
       FOOTER
    ========================= */

footer{
      margin-top:70px;
      background:#0f172a;
      color:#cbd5e1;
    }

.footer-inner{
      padding:50px 0 30px;
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:30px;
    }

.footer-brand h3{
      color:#fff;
      margin-bottom:14px;
      font-size:26px;
    }

.footer-brand p{
      color:#94a3b8;
      max-width:500px;
    }

.footer-links h4{
      color:#fff;
      margin-bottom:14px;
    }

.footer-links a{
      display:block;
      color:#94a3b8;
      margin-bottom:10px;
      transition:.2s ease;
    }

.footer-links a:hover{
      color:#fff;
    }

.footer-bottom{
      border-top:1px solid rgba(255,255,255,.08);
      padding:18px 0;
      text-align:center;
      font-size:14px;
      color:#94a3b8;
    }

/* =========================
       RESPONSIVE
    ========================= */

@media(max-width:960px){
      .hero-grid,
      .footer-inner{
        grid-template-columns:1fr;
      }

.hero{
        padding-top:50px;
      }

.hero h2{
        font-size:40px;
      }

.section-head h2,
      .story-box h2,
      .cta h2{
        font-size:32px;
      }

.story-box{
        padding:34px 24px;
      }
    }

@media(max-width:600px){
      .navbar{
        flex-direction:column;
        align-items:flex-start;
      }

.hero h2{
        font-size:34px;
      }

.hero-actions,
      .stats{
        flex-direction:column;
      }

.btn{
        width:100%;
      }

.stat-box{
        width:100%;
      }
    }
  </style>
</head>
<body>

<div class="brand-text">
          <h1>Mister Manager</h1>
          <p>Smart ERP & Business Automation Platform</p>
        </div>
      </div>

<div class="nav-actions">
        <a href="#features" class="btn btn-outline">Features</a>
        <a href="#about" class="btn btn-outline">About</a>
        <a href="/erp/index.php" class="btn btn-primary">Login to ERP</a>
      </div>

</div>
  </header>

<div>
        <div class="hero-badge">
          🚀 Modern ERP for Growing Businesses
        </div>

<h2>
          Manage Your Business With <span>Mister Manager</span>
        </h2>

<p>
          Mister Manager is a powerful ERP and business management platform designed for production tracking, machine management, inventory, salary automation, attendance systems, reporting, and workflow optimization.
        </p>

<div class="hero-actions">
          <a href="/erp/index.php" class="btn btn-primary">
            Open ERP Dashboard
          </a>

<a href="#features" class="btn btn-outline">
            Explore Features
          </a>
        </div>

<div class="stat-box">
            <h3>ERP</h3>
            <p>Business Management</p>
          </div>

<div class="stat-box">
            <h3>AI</h3>
            <p>Smart Development</p>
          </div>

<div class="stat-box">
            <h3>24×7</h3>
            <p>Operational Control</p>
          </div>

</div>
      </div>

<div class="dashboard-top">
          <div class="dashboard-title">
            <h3>Mister Manager ERP</h3>
            <p>Business Control Center</p>
          </div>

<div class="status-chip">
            ● Active System
          </div>
        </div>

<div class="feature-item">
            <div class="feature-icon">🏭</div>
            <div>
              <h4>Production Management</h4>
              <p>Track production flow, machines, beams, output, and workflow operations.</p>
            </div>
          </div>

<div class="feature-item">
            <div class="feature-icon">📊</div>
            <div>
              <h4>Reports & Analytics</h4>
              <p>Generate detailed reports for management, salary, attendance, and operations.</p>
            </div>
          </div>

<div class="feature-item">
            <div class="feature-icon">💰</div>
            <div>
              <h4>Salary & Payroll</h4>
              <p>Automate salary calculations, shift tracking, and workforce management.</p>
            </div>
          </div>

<div class="feature-item">
            <div class="feature-icon">⚡</div>
            <div>
              <h4>Fast & Smart Workflow</h4>
              <p>Reduce manual work with intelligent process automation and streamlined operations.</p>
            </div>
          </div>

</div>
      </div>

</div>
  </section>

<div class="section-head">
        <h2>Everything Your Business Needs</h2>
        <p>
          Mister Manager helps businesses streamline operations, improve productivity, and maintain complete control over daily activities.
        </p>
      </div>

<div class="card">
          <div class="card-icon">🏭</div>
          <h3>Production Tracking</h3>
          <p>
            Monitor production flow, machine activity, beam status, and operational performance in real time.
          </p>
        </div>

<div class="card">
          <div class="card-icon">📦</div>
          <h3>Inventory Management</h3>
          <p>
            Track stock movement, material usage, inventory balance, and business resources efficiently.
          </p>
        </div>

<div class="card">
          <div class="card-icon">👨‍💼</div>
          <h3>Employee Management</h3>
          <p>
            Handle attendance, workforce tracking, salary calculations, and shift management.
          </p>
        </div>

<div class="card">
          <div class="card-icon">📈</div>
          <h3>Smart Reporting</h3>
          <p>
            Generate professional reports and gain operational insights for better decision-making.
          </p>
        </div>

<div class="card">
          <div class="card-icon">🔐</div>
          <h3>Secure Access</h3>
          <p>
            Role-based access control with secure authentication and protected workflows.
          </p>
        </div>

<div class="card">
          <div class="card-icon">⚙️</div>
          <h3>Custom ERP Solutions</h3>
          <p>
            Flexible ERP architecture designed for manufacturing, textile, trading, and business operations.
          </p>
        </div>

</div>

</div>
  </section>

<h2>Built for Real Business Operations</h2>

<p>
          Mister Manager is not just another software dashboard. It is designed around real operational workflows, production systems, machine management, attendance handling, reporting, and business automation.
        </p>

<p>
          The platform focuses on practical usability, speed, and operational efficiency so businesses can reduce manual work, improve tracking, and make better management decisions.
        </p>

<p>
          Whether you manage a factory, workshop, production unit, or business operation, Mister Manager helps bring your workflow into a centralized and organized ERP system.
        </p>

</div>

</div>
  </section>

<h2>Start Managing Smarter Today</h2>

<p>
          Access your ERP dashboard and manage production, inventory, workforce, reports, and business operations from one powerful platform.
        </p>

<a href="/erp/index.php" class="btn btn-primary">
          Login to Mister Manager ERP
        </a>

</div>

</div>
  </section>

<div class="footer-brand">
        <h3>Mister Manager</h3>

<p>
          Smart ERP and business management software built for modern operational workflows, production systems, reporting, inventory control, and automation.
        </p>
      </div>

<div class="footer-links">
        <h4>Quick Links</h4>

<a href="#features">Features</a>
        <a href="#about">About</a>
        <a href="/erp/index.php">ERP Login</a>
      </div>

<div class="footer-links">
        <h4>Platform</h4>

<a href="#">ERP System</a>
        <a href="#">Business Automation</a>
        <a href="#">Production Management</a>
      </div>

</div>

</footer>

</body>
</html>
```