ConciseIT
/
ConciseITRawWebApp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ConciseIT Consulting | Modern IT Solutions & Support</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="/fav_icon.png" type="image/png" />
</head>
<body>

<!-- PAGE SHELL: gives rounded "paper" effect -->
<div class="page-shell">
    <!-- ===== NAVBAR ===== -->
    <header class="navbar">
        <div class="container">
            <h1 class="logo">Concise<span>IT</span></h1>
            <nav class="navbar-nav">
                <div class="nav-left">
                    <ul>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#why">Why Us</a></li>
                        <li><a href="#ContactMenu" id="ContactMenu">Contact</a></li>
                        <li><a href="http://invoice.concise-it.com/client/login/IKu53iTBp6w5myUDHQBhKBH7giyRyoUs">Client Invoice Portal</a></li>
                        <li><a href="#" id="ContactMenu">Client Ticket Portal</a></li>
                    </ul>
                </div>
                <div class="nav-right">
                    <a href="mailto:info@concise-it.com" class="email-icon" title="Email us">
                        📧
                    </a>
                </div>
            </nav>

        </div>
    </header>


    <!-- ===== HERO ===== -->
    <section class="hero">
        <canvas id="hero-particles" aria-hidden="true"></canvas>
        <div class="container hero-content">
            <h2>Future-Proof IT, Delivered Today.</h2>
            <p>
                Tailored IT solutions for small to medium businesses — from cloud migrations to 24/7 support,
                we keep your business fast, reliable, and protected so you can focus on growth.
            </p>
        </div>
    </section>


    <!-- ===== SERVICES ===== -->
    <section id="services" class="services">
        <div class="container">
            <h3 class="section-title">Our Core Services</h3>
            <div class="service-grid">
                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Cloud & Gear -->
                        <svg viewBox="0 0 24 24"><path d="M4 15a4 4 0 0 1 2-3.464A5 5 0 0 1 9 6a5 5 0 0 1 4.9 4.02A4 4 0 1 1 15 18H7a4 4 0 0 1-3-3Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="17" cy="7" r="2" fill="currentColor"/></svg>
                    </div>
                    <h4>Cloud & DevOps</h4>
                    <p>Design, deploy, and automate scalable clouds, or on-prem hybrid architectures.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Shield Check -->
                        <svg viewBox="0 0 24 24"><path d="M12 3 4 7v5c0 5 3.5 9 8 9s8-4 8-9V7l-8-4Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h4>Cybersecurity</h4>
                    <p>24/7 monitoring, SIEM integration, and compliance audits to keep threats at bay.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Database Stack -->
                        <svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="7" ry="3" fill="none" stroke="currentColor" stroke-width="2"/><path d="M5 9c0 1.7 3.1 3 7 3s7-1.3 7-3M5 13c0 1.7 3.1 3 7 3s7-1.3 7-3M5 17c0 1.7 3.1 3 7 3s7-1.3 7-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <h4>Data Engineering</h4>
                    <p>ETL pipelines, real-time analytics, and optimized SQL tuning for actionable insights.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Headset -->
                        <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0 1 16 0v5a2 2 0 0 1-2 2h-3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><rect x="2" y="11" width="4" height="6" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><rect x="18" y="11" width="4" height="6" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M10 19h2" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <h4>Managed IT Support</h4>
                    <p>Proactive maintenance, patch management, and friendly help-desk whenever you need it.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Compass / Strategy -->
                        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/><polygon points="16 8 14 14 8 16 10 10 16 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>
                    </div>
                    <h4>IT Strategy & Consulting</h4>
                    <p>Align your technology roadmap with your business goals for measurable ROI and efficiency.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Refresh / Disaster Recovery -->
                        <svg viewBox="0 0 24 24"><polyline points="23 4 23 10 17 10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><polyline points="1 20 1 14 7 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.51 9a9 9 0 0 1 14.13-3.36L23 10M1 14l5.36 4.36A9 9 0 0 0 20.49 15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h4>Disaster Recovery & Continuity</h4>
                    <p>Prepare, protect, and recover quickly from unexpected outages or disasters with confidence.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Monitor / Code -->
                        <svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M8 21h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M12 17v4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                    </div>
                    <h4>Website Development</h4>
                    <p>Design and deploy attractive, mobile‑friendly websites that showcase your brand and convert visitors to customers.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Network -->
                        <svg viewBox="0 0 24 24"><path d="M12 20v-6m0 0H6m6 0h6m-6-4V4m0 6h6m-6 0H6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h4>Network & Domain Administration</h4>
                    <p>Manage your networks, domains, and infrastructure for maximum uptime, security, and performance.</p>
                </article>

                <article>
                    <div class="service-icon" aria-hidden="true">
                        <!-- Bar chart -->
                        <svg viewBox="0 0 24 24"><path d="M4 20V10m4 10V4m4 16v-6m4 6V8m4 12V14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </div>
                    <h4>Custom Database & Report Development</h4>
                    <p>Build tailored reports and dashboards — including Acumatica custom reports — to give you actionable insights.</p>
                </article>
            </div>


        </div>
    </section>

    <!-- ===== WHY US ===== -->
    <section id="why" class="why-us">
        <div class="container">
            <h3 class="section-title">Why Clients Choose ConciseIT</h3>
            <ul class="why-list">
                <li><strong>Proven Expertise </strong>— 20+ years combined experience across DevOps, security & data.</li>
                <li><strong>No Geek-Speak </strong>— Actionable, executive-level reporting & KPIs.</li>
                <li><strong>Transparent Pricing </strong>— Flat monthly rates. No “scope drift” surprises.</li>
                <li><strong>Rapid Response </strong>— 15-minute SLA for critical tickets—day or night.</li>
                <li><strong>Future-Ready Solutions </strong>— We build scalable, forward-thinking systems that grow with your business.</li>
                <li><strong>Trusted Partnerships </strong>— Long-term relationships with vendors and clients ensure reliable support & resources.</li>
            </ul>

        </div>
    </section>


    <!-- ===== TESTIMONIALS =====
    <section id="testimonials" class="testimonials">
      <div class="container">
        <h3 class="section-title">Success Stories</h3>
        <blockquote>
          “ConciseIT cut our cloud spend by 37 % while doubling deployment velocity.
          The ROI was immediate.”<cite>— J. Roberts, CTO, FinTech Co.</cite>
        </blockquote>
        <blockquote>
          “Their security team caught a breach attempt we didn’t even know existed.
          Top-notch professionals.”<cite>— M. Delgado, COO, Healthcare Group</cite>
        </blockquote>
      </div>
    </section>
-->

    <!-- Dummy anchor for smooth-scroll target -->
    <span id="contact-section"></span>

    <!-- ===== FOOTER ===== -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 ConciseIT Consulting · All rights reserved.</p>
        </div>
    </footer>
</div><!--/.page-shell-->

<!-- ===== FLOATING CONTACT FORM (kept outside page so it sits in margin) ===== -->
<aside id="contact-flyout">
    <form id="contactForm" class="contact-form" action="contact.php" method="POST">
        <h4>Let’s Talk Tech</h4>

        <label>Name <input type="text" name="name" required></label>
        <label>Email <input type="email" name="email" required></label>
        <label>Phone <input type="tel" name="phone" required></label>
        <label>
            Preferred Contact Method
            <select name="preferred_contact" required>
                <option value="" disabled selected>Choose one</option>
                <option value="email">Email</option>
                <option value="phone">Phone</option>
            </select>
        </label>
        <label>Message <textarea name="message" rows="4" required></textarea></label>

        <button type="submit" class="submit-btn">
            <span class="btn-text">Send ➜</span>
            <span class="btn-spinner" style="display:none;"></span>
        </button>

        <button type="button" id="closeFlyout">✕</button>

        <label class="honeypot">
            If you’re human, Make sure to fill this out:
            <input type="text" name="website" autocomplete="off">
        </label>

    </form>
</aside>

<div id="formModal" class="form-modal hidden">
    <div class="form-modal-content">
        <p id="formModalMessage"></p>
    </div>
</div>

<script src="scripts.js" defer></script>


</body>
</html>