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" src="https://placehold.co/1200x400/blue/gray?text=Hero+image+placeholder"/>
        <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>
        <div id="service_plate">
          <h3>Services</h3>
          <div id="service_carousel">
            <div id="bespoke_service_plate">
              <img alt="Bespoke Web Applications" src="https://placehold.co/600x600"/>
              <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>
              <h5 className="pricing">Starting at $45/h</h5>
              <p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
            </div>
            <div id="CMS_service_plate">
              <img alt="Advanced CMS services" src="https://placehold.co/600x600"/>
              <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>
              <h5 className="pricing">Starting at $25/h</h5>
              <p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>
            </div>
            <div id="consulting_service_plate">
              <img alt="consulting services" src="https://placehold.co/600x600"/>
              <h4>Consulting Services</h4>
              <p>Consulting services across various information technology topics including general I.T., software development, web development, tutoring, and beyond.</p>
              <h5 className="pricing">Starting at $20/h</h5>
              <p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>              
            </div>
            <div id="general_infotech_service_plate">
              <img alt="General information technology services" src="https://placehold.co/600x600"/>
              <h4>Generalist Services</h4>
              <p>General information technology related services including but not limited to DNS configuration, VPS setup and hardening, security services, etc.</p>
              <h5 className="pricing">Starting at $25/h</h5>
              <p className="npo_info"><i>Discounted services are available for 501(c)(3) non-profit organizations.</i></p>              
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}