Home.jsx

Go to the documentation of this file.

import { Link } from 'react-router-dom';
import PublicLayout from '../components/Layout/PublicLayout';
import './Home.css';
 
function Home() {
  return (
    <PublicLayout>
      {/* Hero Section */}
      <section className="hero">
        <div className="hero-container">
          <div className="hero-content">
            <h1 className="hero-title">
              Complete MSP Platform for Modern IT Teams
            </h1>
            <p className="hero-subtitle">
              Monitor, manage, and support your clients with our all-in-one remote monitoring and PSA solution.
              Multi-tenant architecture built for MSPs who need scale and reliability.
            </p>
            <div className="hero-actions">
              <Link to="/login" className="btn-hero-primary">
                Get Started
              </Link>
              <a href="#features" className="btn-hero-secondary">
                Learn More
              </a>
            </div>
            {/* Documentation Link */}
            <div style={{marginTop:16}}>
              <Link to="/docs" className="btn-hero-secondary">View Documentation</Link>
            </div>
          </div>
          <div className="hero-image">
            <div className="dashboard-preview">
              <img 
                src="/dashboard-preview.png" 
                alt="RMM+PSA Dashboard Preview - Ticket Management Interface" 
                className="preview-screenshot"
              />
            </div>
          </div>
        </div>
      </section>
 
      {/* Features Section */}
      <section id="features" className="features">
        <div className="section-container">
          <h2 className="section-title">Everything You Need to Scale Your MSP</h2>
          <p className="section-subtitle">
            Comprehensive tools designed for managed service providers
          </p>
          
          <div className="features-grid">
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">computer</span>
              </div>
              <h3>Remote Monitoring</h3>
              <p>Real-time monitoring of all client devices with instant alerts and automated responses.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">confirmation_number</span>
              </div>
              <h3>Ticket Management</h3>
              <p>Streamlined ticketing system with priority handling, SLA tracking, and customer portals.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">analytics</span>
              </div>
              <h3>Analytics & Reporting</h3>
              <p>Comprehensive dashboards and custom reports to track performance and growth.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">payments</span>
              </div>
              <h3>Billing & Invoicing</h3>
              <p>Automated invoicing, contract management, and revenue tracking in one place.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">inventory_2</span>
              </div>
              <h3>Inventory Management</h3>
              <p>Track hardware, software licenses, and products with automated purchase orders.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">lock</span>
              </div>
              <h3>Enterprise Security</h3>
              <p>Row-level security, encrypted data, and compliance-ready infrastructure.</p>
            </div>
 
            <div className="feature-card">
              <div className="feature-icon">
                <span className="material-symbols-outlined">bolt</span>
              </div>
              <h3>Automation</h3>
              <p>Automate routine tasks, patch management, and workflows to save time.</p>
            </div>
          </div>
        </div>
      </section>
 
      {/* Services Section */}
      <section className="services">
        <div className="section-container">
          <h2 className="section-title">Our MSP Services</h2>
          <p className="section-subtitle">
            Tailored solutions for every stage of your MSP journey
          </p>
 
          <div className="services-list">
            <div className="service-item">
              <div className="service-header">
                <h3>🚀 Starter Plan</h3>
                <p className="service-price">$19 AUD / month</p>
                <div className="service-note">Includes 1 user</div>
              </div>
              <ul className="service-features">
                <li>1 user included</li>
                <li>Core RMM features</li>
                <li>Ticket management</li>
                <li>Email support</li>
                <li>Community access</li>
                <li>$2.50 AUD / endpoint / month</li>
              </ul>
              <Link to="/login" className="btn-service">Get Started</Link>
            </div>
 
            <div className="service-item featured">
              <div className="featured-badge">Most Popular</div>
              <div className="service-header">
                <h3>💼 Professional Plan</h3>
                <p className="service-price">$79 AUD / month</p>
                <div className="service-note">Includes up to 5 users</div>
              </div>
              <ul className="service-features">
                <li>Up to 5 users included</li>
                <li>Advanced automation</li>
                <li>White-label options</li>
                <li>Priority support</li>
                <li>Custom integrations</li>
                <li>Advanced reporting</li>
                <li>$2.50 AUD / endpoint / month</li>
              </ul>
              <Link to="/login" className="btn-service">Get Started</Link>
            </div>
 
            <div className="service-item">
              <div className="service-header">
                <h3>🏢 Enterprise Plan</h3>
                <p className="service-price">Included with IBG Membership</p>
                <div className="service-note">Unlimited users</div>
              </div>
              <ul className="service-features">
                <li>Unlimited users</li>
                <li>Dedicated support</li>
                <li>Custom development</li>
                <li>SLA guarantees</li>
                <li>On-premise options</li>
                <li>Training & onboarding</li>
                <li>$2.50 AUD / endpoint / month</li>
              </ul>
              <a href="#contact" className="btn-service">Contact Us</a>
            </div>
          </div>
        </div>
      </section>
 
      {/* CTA Section */}
      <section className="cta">
        <div className="cta-container">
          <h2>Ready to Transform Your MSP?</h2>
          <p>Join hundreds of MSPs already using our platform to scale their business</p>
          <div className="cta-actions">
            <Link to="/login" className="btn-cta-primary">Start Free Trial</Link>
            <Link to="/docs" className="btn-cta-secondary">View Documentation</Link>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
}
 
export default Home;