import type { Route } from "./+types/home";
import Header from "~/components/header";


export function meta({}: Route.MetaArgs) {
  return [
    { title: "J.M. Technical Services - Home" },
    
  ];
}

export default function Home() {
  return (
    <div id="app">
      <Header />
      <div id="content">
        <img id="hero" alt="Hero Image"/>
        <hr />
        <div id="sales_plate">
          <h3>High performance web application architecture and custom CMS solutions. Over 10 years of experience delivering speed, security, and scale.</h3>
          <p>
            Lorem Ipsum Dolor sit amet blah blah
          </p>
        </div>
        <div id="info shelf">
          <h3>Why my services?</h3>
          <div id="exec_summary">
            <h3>Business</h3>
            <p>My clients don't just get a website, they get a significant and measurable business asset. 
              Regardless of if I am 
              building a light, custom-themed WordPress setup or a fully custom and bespoke enterprise web 
              application, the goals remain the same:</p>
              <ul>
                <li><b>Performance: </b>Guaranteed decreases in load times.</li>
                <li><b>Higher conversion rates: </b>I deliver an average increase in conversion rates of approximately 13.5%.</li>
                <li><b>Reliable support: </b>Post-delivery support is included in every contract, alongside cost-effective retainer options.</li>
              </ul>
          </div>
          <div id="engineering_dive">
            <h3>Technical</h3>
            <p>
              I have expertise in a number of technologies, languages, and frameworks including:
            </p>
            <ul>
              <li><b>Languages: </b>JavaScript, TypeScript, Python, Java, C#, Rust, PHP, SQL</li>
              <li><b>Frontend & Frameworks: </b>React, React-Router, Tailwind CSS, Node.js, Vue</li>
              <li><b>CMS & Ecosystem: </b>WordPress, Gutenberg block development, Squarespace, Wix, etc</li>
              <li><b>Infrastructure & Operations: </b>Linux administration, DNS setup, Hosting, Web server management, VPS management and administration</li>
            </ul>
            <p>This site itself is a custom React application served via Node.js, built with Vite and Tailwind CSS.</p>
          </div>

        </div>
        <hr />
        <div id="service_plate">
          <h3>Services</h3>
          <div id="web_cms_plate">
          {/* plates for bespoke services and CMS services. side by side*/}
            <div id="bespoke_service_plate">
              <img alt="Bespoke Web Applications" />
              <h4>Bespoke Web Applications</h4>
              <p>End-to-end fully custom application development for when off-the-shelf solutions don't cut it. <br />Engineered for scale, security, and complex business logic to ensure a perfect fit.</p>
            </div>
            <div id="CMS_service plate">
              <img alt="Advanced CMS services" />
              <h4>Comprehensive CMS solutions</h4>
              <p>High performance sites built on platforms of your choice. 
                <br />Optimized for core vitals, SEO, and effortless management by your team after launch.</p>
            </div>
          </div>
          <div id="alt_service_plate">
          {/* plates for secondary services like consultation, design, refactors, etc. */}
          </div>
        </div>
      </div>
    </div>
  )
}