Jaks Systems

Christ Church · 246-257-3181 · Ticket ${escapeHtml(order.id)}

Customer intake

No parts will be ordered without contact person's permission.

${field("Contact person", order.contactPerson)} ${field("Phone / cell", order.phone)} ${field("Address", order.address)} ${field("E-mail", order.email)}

Computer information

${field("Serial number", order.serial)} ${field("OS version", order.osVersion)} ${field("Family number", order.familyNumber)} ${field("Processor / RAM / harddrive", order.specs)} ${field("Model", order.model)} ${field("Password", order.password)} ${field("Items sent with computer", order.itemsSent, true)} ${field("Type of problem", order.problemType, true)} ${field("Other notes", order.otherNotes, true)} ${field("Signature", order.signature)} ${field("Date", order.dateSigned)}

Repair center

${field("Date received", order.dateReceived)} ${field("Date completed and sent", order.dateCompleted)} ${field("Tech notes", order.techNotes, true)} ${field("Problems / solution", order.problemsSolution, true)} ${field("Parts ordered", order.partsOrdered)} ${field("Called contact person", order.calledContact)} ${field("PO #", order.poNumber)} ${field("Date / time", order.dateTime)} ${field("Costs", order.costs)}

Jaks Systems · 246-257-3181

${escapeHtml(order.id)}

${escapeHtml(order.contactPerson) || "Unnamed customer"}

${escapeHtml(order.phone) || "No phone on file"}

${device}

${escapeHtml(order.problemType) || "No problem noted"}

Dropped off ${dropped ? escapeHtml(new Date(dropped).toLocaleDateString()) : ""}

{statusLabel(status)}

{label} onChange(e.target.value)} placeholder={placeholder} className={`rounded-md px-3 py-2 text-sm font-normal normal-case ${mono ? "wo-mono" : ""}`} />

{label}

onChange(e.target.value)}
        rows={rows}
        className="rounded-md px-3 py-2 text-sm font-normal normal-case resize-none"
      />
    </label>
  );
}

function SectionHeading({ children }) {
  return (
    <h3 className="text-xs font-bold uppercase tracking-widest opacity-70 sm:col-span-2 mt-1">
      {children}
    </h3>
  );
}

export default function WorkOrderApp() {
  const [orders, setOrders] = useState([]);
  const [nextNumber, setNextNumber] = useState(1);
  const [loading, setLoading] = useState(true);
  const [loadError, setLoadError] = useState(false);
  const [view, setView] = useState("list");
  const [activeOrder, setActiveOrder] = useState(null);
  const [search, setSearch] = useState("");
  const [statusFilter, setStatusFilter] = useState("all");
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [saveNote, setSaveNote] = useState("");
  const [messageText, setMessageText] = useState("");
  const [emailSubject, setEmailSubject] = useState("");
  const [printNotice, setPrintNotice] = useState("");
  const [copyNote, setCopyNote] = useState("");

useEffect(() => {
    (async () => {
      try {
        const res = await window.storage.get(STORAGE_KEY, true);
        if (res && res.value) {
          const parsed = JSON.parse(res.value);
          setOrders(Array.isArray(parsed.orders) ? parsed.orders : []);
          setNextNumber(parsed.nextNumber || 1);
        }
      } catch (e) {
        // key not found yet is expected on first run; only flag real errors
      }
      setLoading(false);
    })();
  }, []);

async function persist(newOrders, newNextNumber) {
    try {
      const result = await window.storage.set(
        STORAGE_KEY,
        JSON.stringify({ orders: newOrders, nextNumber: newNextNumber }),
        true
      );
      if (!result) setLoadError(true);
    } catch (e) {
      setLoadError(true);
    }
  }

function openNewTicket() {
    const o = blankOrder(nextNumber);
    setActiveOrder(o);
    setMessageText(buildMessage(o, defaultTemplateKind(o)));
    setEmailSubject(`Jaks Systems – Ticket ${o.id}`);
    setConfirmDelete(false);
    setView("form");
  }

function updateField(key, value) {
    setActiveOrder((prev) => ({ ...prev, [key]: value }));
  }

function saveTicket() {
    const isNew = !orders.some((o) => o.id === activeOrder.id);
    const updated = isNew ? [...orders, activeOrder] : orders.map((o) => (o.id === activeOrder.id ? activeOrder : o));
    const newNext = isNew ? nextNumber + 1 : nextNumber;
    setOrders(updated);
    setNextNumber(newNext);
    persist(updated, newNext);
    setSaveNote("Saved");
    setTimeout(() => setSaveNote(""), 1600);
  }

function deleteTicket() {
    const updated = orders.filter((o) => o.id !== activeOrder.id);
    setOrders(updated);
    persist(updated, nextNumber);
    setView("list");
    setConfirmDelete(false);
  }

async function copyMessage() {
    try {
      await navigator.clipboard.writeText(messageText);
      setCopyNote("Copied");
    } catch (e) {
      setCopyNote("Couldn't copy — select and copy the text manually");
    }
    setTimeout(() => setCopyNote(""), 2500);
  }

const filtered = useMemo(() => {
    return orders
      .filter((o) => (statusFilter === "all" ? true : getStatus(o) === statusFilter))
      .filter((o) => {
        if (!search.trim()) return true;
        const q = search.toLowerCase();
        return (
          (o.contactPerson || "").toLowerCase().includes(q) ||
          (o.problemType || "").toLowerCase().includes(q) ||
          (o.id || "").toLowerCase().includes(q)
        );
      })
      .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
  }, [orders, search, statusFilter]);

if (loading) {
    return (
      <div className="wo-root flex items-center justify-center" style={{ minHeight: "60vh" }}>
        <style>{STYLES}</style>
        <Loader2 className="animate-spin" size={22} />
      </div>
    );
  }

return (
    <div className="wo-root">
      <style>{STYLES}</style>

<header className="wo-header px-4 sm:px-8 py-4">
        <div className="max-w-3xl mx-auto flex items-center justify-between gap-3">
          <div>
            <h1 className="text-lg sm:text-xl font-extrabold uppercase tracking-wide leading-tight">
              Jaks Systems
            </h1>
            <p className="text-xs opacity-70 tracking-wide">Christ Church · 246-257-3181</p>
          </div>
          {view === "list" && (
            <button
              onClick={openNewTicket}
              className="wo-btn-primary no-print flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold uppercase tracking-wide shrink-0"
            >
              <Plus size={15} strokeWidth={2.5} />
              New ticket
            </button>
          )}
        </div>
      </header>

<main className="max-w-3xl mx-auto px-4 sm:px-8 py-6">
        {loadError && (
          <div className="mb-4 flex items-center gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-800">
            <AlertCircle size={14} />
            Couldn't sync with storage just now. Changes are kept on screen — try saving again in a moment.
          </div>
        )}

{view === "list" && (
          <div className="wo-fade-in">
            <div className="flex flex-col sm:flex-row gap-3 mb-4">
              <div className="relative flex-1">
                <Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 opacity-50" />
                <input
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder="Search by name, ticket #, or problem"
                  className="w-full rounded-md border pl-9 pr-3 py-2 text-sm"
                  style={{ borderColor: "var(--paper-deep)", background: "var(--paper)" }}
                />
              </div>
              <div className="flex gap-1.5 overflow-x-auto">
                {[
                  ["all", "All"],
                  ["new", "New"],
                  ["progress", "In repair"],
                  ["done", "Completed"],
                ].map(([key, label]) => (
                  <button
                    key={key}
                    onClick={() => setStatusFilter(key)}
                    className="rounded-full px-3 py-1.5 text-xs font-semibold whitespace-nowrap"
                    style={
                      statusFilter === key
                        ? { background: "var(--ink)", color: "var(--cream)" }
                        : { background: "var(--paper)", color: "var(--ink-soft)", border: "1px solid var(--paper-deep)" }
                    }
                  >
                    {label}
                  </button>
                ))}
              </div>
            </div>

{filtered.length === 0 ? (
              <div className="wo-card rounded-md px-5 py-8 text-center">
                <p className="text-sm font-semibold mb-1">
                  {orders.length === 0 ? "No tickets yet" : "No tickets match that search"}
                </p>
                <p className="text-xs opacity-60 mb-4">
                  {orders.length === 0
                    ? "Create the first work order to get started."
                    : "Try a different name, ticket number, or filter."}
                </p>
                {orders.length === 0 && (
                  <button
                    onClick={openNewTicket}
                    className="wo-btn-primary inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold uppercase tracking-wide"
                  >
                    <Plus size={14} strokeWidth={2.5} />
                    New ticket
                  </button>
                )}
              </div>
            ) : (
              <ul className="flex flex-col gap-2.5">
                {filtered.map((o) => {
                  const status = getStatus(o);
                  return (
                    <li key={o.id}>
                      <button
                        onClick={() => openTicket(o)}
                        className="wo-card w-full text-left rounded-md px-4 py-3 flex items-center justify-between gap-3"
                      >
                        <div className="min-w-0">
                          <div className="flex items-center gap-2 mb-0.5">
                            <span className="wo-mono text-[11px] opacity-60">{o.id}</span>
                            <StatusBadge status={status} />
                          </div>
                          <p className="text-sm font-bold truncate">{o.contactPerson || "Unnamed customer"}</p>
                          <p className="text-xs opacity-60 truncate">{o.problemType || "No problem description yet"}</p>
                        </div>
                        <span className="text-[11px] opacity-50 shrink-0">
                          {new Date(o.createdAt).toLocaleDateString()}
                        </span>
                      </button>
                    </li>
                  );
                })}
              </ul>
            )}
          </div>
        )}

{view === "form" && activeOrder && (
          <div className="wo-fade-in">
            <div className="no-print flex items-center justify-between mb-4">
              <button
                onClick={() => setView("list")}
                className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide opacity-70 hover:opacity-100"
              >
                <ArrowLeft size={15} />
                Back to tickets
              </button>
              <div className="flex items-center gap-2">
                <span className="wo-mono text-xs opacity-60">{activeOrder.id}</span>
                <StatusBadge status={getStatus(activeOrder)} />
              </div>
            </div>

{/* Device label */}
            <div className="wo-label">
              <div className="wo-label-brand">Jaks Systems · 246-257-3181</div>
              <div className="wo-label-id">{activeOrder.id}</div>
              <div className="wo-label-row"><strong>{activeOrder.contactPerson || "Unnamed customer"}</strong></div>
              <div className="wo-label-row">{activeOrder.phone || "No phone on file"}</div>
              <div className="wo-label-row">{[activeOrder.model, activeOrder.serial ? `SN ${activeOrder.serial}` : ""].filter(Boolean).join(" · ") || "Device not specified"}</div>
              <div className="wo-label-row">{activeOrder.problemType || "No problem noted"}</div>
              <div className="wo-label-date">
                Dropped off {new Date(activeOrder.dateSigned || activeOrder.createdAt).toLocaleDateString()}
              </div>
            </div>

<div className="wo-printable-form">
              {/* Customer intake */}
              <div className="wo-panel-paper rounded-md p-4 sm:p-5">
                <h2 className="text-sm font-extrabold uppercase tracking-widest mb-1">Customer intake</h2>
                <p className="text-[11px] opacity-60 italic mb-4">No parts will be ordered without contact person's permission.</p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <Field label="Contact person" value={activeOrder.contactPerson} onChange={(v) => updateField("contactPerson", v)} />
                  <Field label="Phone / cell" value={activeOrder.phone} onChange={(v) => updateField("phone", v)} />
                  <Field label="Address" value={activeOrder.address} onChange={(v) => updateField("address", v)} full />
                  <Field label="E-mail" type="email" value={activeOrder.email} onChange={(v) => updateField("email", v)} full />

<SectionHeading>Computer information</SectionHeading>
                  <Field label="Serial number" mono value={activeOrder.serial} onChange={(v) => updateField("serial", v)} />
                  <Field label="OS version" value={activeOrder.osVersion} onChange={(v) => updateField("osVersion", v)} />
                  <Field label="Family number" mono value={activeOrder.familyNumber} onChange={(v) => updateField("familyNumber", v)} />
                  <Field label="Processor / RAM / harddrive" value={activeOrder.specs} onChange={(v) => updateField("specs", v)} />
                  <Field label="Model" value={activeOrder.model} onChange={(v) => updateField("model", v)} />
                  <Field label="Password" mono value={activeOrder.password} onChange={(v) => updateField("password", v)} />

<TextArea label="Items sent with computer" value={activeOrder.itemsSent} onChange={(v) => updateField("itemsSent", v)} rows={2} />
                  <TextArea label="Type of problem" value={activeOrder.problemType} onChange={(v) => updateField("problemType", v)} rows={2} />
                  <TextArea label="Other notes" value={activeOrder.otherNotes} onChange={(v) => updateField("otherNotes", v)} rows={2} />

<Field label="Signature" value={activeOrder.signature} onChange={(v) => updateField("signature", v)} placeholder="Typed name" />
                  <Field label="Date" type="date" value={activeOrder.dateSigned} onChange={(v) => updateField("dateSigned", v)} />
                </div>
              </div>

{/* Repair bench */}
              <div className="wo-panel-bench rounded-md p-4 sm:p-5">
                <h2 className="text-sm font-extrabold uppercase tracking-widest mb-1" style={{ color: "var(--amber)" }}>
                  Repair center
                </h2>
                <p className="text-[11px] opacity-60 mb-4">To be completed by repair center.</p>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                  <Field label="Date received" type="date" value={activeOrder.dateReceived} onChange={(v) => updateField("dateReceived", v)} />
                  <Field label="Date completed and sent" type="date" value={activeOrder.dateCompleted} onChange={(v) => updateField("dateCompleted", v)} />

<TextArea label="Tech notes" value={activeOrder.techNotes} onChange={(v) => updateField("techNotes", v)} rows={2} />
                  <TextArea label="Problems / solution" value={activeOrder.problemsSolution} onChange={(v) => updateField("problemsSolution", v)} rows={2} />

<Field label="Parts ordered" value={activeOrder.partsOrdered} onChange={(v) => updateField("partsOrdered", v)} />
                  <Field label="Called contact person" value={activeOrder.calledContact} onChange={(v) => updateField("calledContact", v)} placeholder="Date / initials" />

<Field label="PO #" mono value={activeOrder.poNumber} onChange={(v) => updateField("poNumber", v)} />
                  <Field label="Date / time" type="datetime-local" value={activeOrder.dateTime} onChange={(v) => updateField("dateTime", v)} />

<Field label="Costs" mono value={activeOrder.costs} onChange={(v) => updateField("costs", v)} placeholder="$0.00" />
                </div>
              </div>
            </div>

{/* Message customer */}
            <div className="wo-panel-paper no-print rounded-md p-4 sm:p-5 mt-5">
              <h2 className="text-sm font-extrabold uppercase tracking-widest mb-3">Message customer</h2>
              <div className="flex flex-wrap gap-1.5 mb-3">
                {[
                  ["received", "Ticket received"],
                  ["approval", "Awaiting approval"],
                  ["ready", "Ready for pickup"],
                ].map(([kind, label]) => (
                  <button
                    key={kind}
                    onClick={() => setMessageText(buildMessage(activeOrder, kind))}
                    className="rounded-full px-3 py-1.5 text-xs font-semibold"
                    style={{ background: "var(--cream)", border: "1px solid var(--paper-deep)", color: "var(--ink-soft)" }}
                  >
                    {label}
                  </button>
                ))}
              </div>
              <Field
                label="Email subject"
                value={emailSubject}
                onChange={setEmailSubject}
                full
              />
              <div className="mt-3">
                <TextArea label="Message" value={messageText} onChange={setMessageText} rows={4} />
              </div>
              <div className="flex flex-wrap gap-2 mt-3">
                <a
                  href={activeOrder.email ? `mailto:${activeOrder.email}?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(messageText)}` : undefined}
                  onClick={(e) => { if (!activeOrder.email) e.preventDefault(); }}
                  className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold uppercase tracking-wide"
                  style={
                    activeOrder.email
                      ? { background: "var(--ink)", color: "var(--cream)" }
                      : { background: "var(--paper-deep)", color: "var(--ink-soft)", cursor: "not-allowed" }
                  }
                >
                  <Mail size={14} />
                  {activeOrder.email ? "Email customer" : "Add an email to enable"}
                </a>
                <a
                  href={formatWhatsAppNumber(activeOrder.phone) ? `https://wa.me/${formatWhatsAppNumber(activeOrder.phone)}?text=${encodeURIComponent(messageText)}` : undefined}
                  target="_blank"
                  rel="noopener noreferrer"
                  onClick={(e) => { if (!formatWhatsAppNumber(activeOrder.phone)) e.preventDefault(); }}
                  className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold uppercase tracking-wide"
                  style={
                    formatWhatsAppNumber(activeOrder.phone)
                      ? { background: "#3DA854", color: "white" }
                      : { background: "var(--paper-deep)", color: "var(--ink-soft)", cursor: "not-allowed" }
                  }
                >
                  <MessageCircle size={14} />
                  {formatWhatsAppNumber(activeOrder.phone) ? "WhatsApp customer" : "Add a phone to enable"}
                </a>
                <button
                  onClick={copyMessage}
                  className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold uppercase tracking-wide"
                  style={{ background: "var(--cream)", border: "1px solid var(--paper-deep)", color: "var(--ink-soft)" }}
                >
                  <Copy size={14} />
                  Copy message
                </button>
                {copyNote && <span className="text-xs font-semibold self-center" style={{ color: "var(--ok)" }}>{copyNote}</span>}
              </div>
              <p className="text-[11px] opacity-50 mt-2">
                Email/WhatsApp opens your phone or computer's own app with the message pre-filled — nothing sends automatically. If a button doesn't open anything (some browsers block this), use "Copy message" and paste it in manually.
              </p>
            </div>

<div className="no-print flex items-center justify-between mt-5">
              <div className="flex items-center gap-2">
                {!confirmDelete ? (
                  <button
                    onClick={() => setConfirmDelete(true)}
                    className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-50"
                  >
                    <Trash2 size={14} />
                    Delete
                  </button>
                ) : (
                  <div className="flex items-center gap-2">
                    <span className="text-xs font-semibold text-red-700">Delete this ticket?</span>
                    <button onClick={deleteTicket} className="rounded-md bg-red-600 text-white text-xs font-bold px-2.5 py-1.5">
                      Yes, delete
                    </button>
                    <button onClick={() => setConfirmDelete(false)} className="text-xs font-semibold opacity-60 px-2">
                      Cancel
                    </button>
                  </div>
                )}
                <button
                  onClick={() => openPrintWindow(buildLabelPrintDoc(activeOrder))}
                  className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-semibold opacity-70 hover:opacity-100"
                >
                  <Tag size={14} />
                  Print label
                </button>
                <button
                  onClick={() => openPrintWindow(buildFullPrintDoc(activeOrder))}
                  className="flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-semibold opacity-70 hover:opacity-100"
                >
                  <Printer size={14} />
                  Print
                </button>
              </div>
              <div className="flex items-center gap-3">
                {saveNote && <span className="text-xs font-semibold" style={{ color: "var(--ok)" }}>{saveNote}</span>}
                <button onClick={saveTicket} className="wo-btn-primary rounded-md px-4 py-2 text-xs font-bold uppercase tracking-wide">
                  Save ticket
                </button>
              </div>
            </div>
            {printNotice && (
              <p className="no-print text-xs font-semibold text-red-700 mt-2">{printNotice}</p>
            )}
          </div>
        )}
      </main>
    </div>
  );
}<script>Static.COOKIE_BANNER_CAPABLE = true;</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-BLMNTZV368"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('set', 'developer_id.dZjQwMz', true);gtag('consent', 'default', { 'analytics_storage': 'denied', 'wait_for_update': 500 });window.googleAnalyticsRequiresConsentUpdates = true;(function(){let squarespaceCookies = {};if (window.getSquarespaceCookies) {  squarespaceCookies = window.getSquarespaceCookies();}const consentValue = squarespaceCookies.performance === 'accepted' ? 'granted' :  'denied';gtag('consent', 'update', { 'analytics_storage': consentValue })})();gtag('config', 'G-BLMNTZV368');</script>
    
    
  </head>

</svg>
    
<div class="sqs-announcement-bar-dropzone"></div>

<div class="header-announcement-bar-wrapper">
      
      <a
        href="#page"
        class="header-skip-link sqs-button-element--primary"
      >
        Skip to Content
      </a>

"
      ></div>
      <div
        class="header-dropshadow"
        data-header-style="gradient"
        data-header-dropshadow="true"
        data-test="header-dropshadow"
        style="
  box-shadow: 0px 0px 30px 0px;
"
      ></div>
      
        <div  class="header-blur-background" data-test="header-blur-background" >
          <div
            class="header-background-gradient"
            data-header-style="gradient"
            data-gradient-type="faded"
            data-test="header-background-gradient"
            
            
            style="opacity: calc(90 * .01)"
          ></div>
        </div>

<div class="header-title-nav-wrapper">

<div
                    class="
                      header-title
                      
                    "
                    data-animation-role="header-element"
                  >
                    
                      <div class="header-title-logo">
                        <a href="/" data-animation-role="header-element">
                        
<img elementtiming="nbf-header-logo-desktop" src="//images.squarespace-cdn.com/content/v1/62128ddf7618be0fc0192f2e/d43fea6f-9cfc-4a0e-b11b-4a56242ff497/3_transparent_big_resolution.png?format=1500w" alt="Jaks Parts &amp; Computer Services" style="display:block" fetchpriority="high" loading="eager" decoding="async" data-loader="raw">

</a>
                      </div>

</div>
                
              
                
                
                <div class="header-nav">
                  <div class="header-nav-wrapper">
                    <nav class="header-nav-list">

<div class="header-nav-item header-nav-item--folder">
      <button
        class="header-nav-folder-title"
        data-href="/services-1"
        data-animation-role="header-element"
        aria-expanded="false"
        aria-controls="services"
        
      >
      <span class="header-nav-folder-title-text">
        Services
      </span>
      </button>
      <div class="header-nav-folder-content" id="services">
        
          
            <div class="header-nav-folder-item">
              <a
                href="/jaks-services"
                
              >
                <span class="header-nav-folder-item-content">
                  Jaks Services
                </span>
              </a>
            </div>
          
          
        
          
            <div class="header-nav-folder-item">
              <a
                href="/jakscomputerrepairs"
                
              >
                <span class="header-nav-folder-item-content">
                  Jaks Computer Repairs
                </span>
              </a>
            </div>
          
          
        
      </div>
    </div>

<div class="header-nav-item header-nav-item--folder">
      <button
        class="header-nav-folder-title"
        data-href="/jaks-sales"
        data-animation-role="header-element"
        aria-expanded="false"
        aria-controls="jaks-sales"
        
      >
      <span class="header-nav-folder-title-text">
        Jaks Sales
      </span>
      </button>
      <div class="header-nav-folder-content" id="jaks-sales">
        
          
            <div class="header-nav-folder-item">
              <a
                href="/computer-sales"
                
              >
                <span class="header-nav-folder-item-content">
                  Computer Sales
                </span>
              </a>
            </div>
          
          
        
          
            <div class="header-nav-folder-item">
              <a
                href="/refurbished-equipment"
                
              >
                <span class="header-nav-folder-item-content">
                  Refurbished Equipment
                </span>
              </a>
            </div>
          
          
        
          
            <div class="header-nav-folder-item">
              <a
                href="/pc-builds"
                
              >
                <span class="header-nav-folder-item-content">
                  PC Builds
                </span>
              </a>
            </div>
          
          
        
      </div>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/gallery"
        data-animation-role="header-element"
        
      >
        Gallery
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/repairform"
        data-animation-role="header-element"
        
      >
        Repair Form
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/about-us"
        data-animation-role="header-element"
        
      >
        About Us
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/contact"
        data-animation-role="header-element"
        
      >
        Contact 
      </a>
    </div>

</nav>
                  </div>
                </div>
              
              
            </div>
          
            
            
            <div class="header-actions header-actions--right">
              
                
              
              
                
                  <div class="header-actions-action header-actions-action--social">
                    
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://www.instagram.com/jaksystems/" target="_blank" aria-label="Instagram">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#instagram-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://www.facebook.com/jaksystems" target="_blank" aria-label="Facebook">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#facebook-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://twitter.com/jaksystems" target="_blank" aria-label="Twitter">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#twitter-unauth-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                        <a class="icon icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="mailto:sales@jaskcompterparts.com" target="_blank" aria-label="sales@jaskcompterparts.com">
                          <svg viewBox="23 23 64 64">
                            <use xlink:href="#email-icon" width="110" height="110"></use>
                          </svg>
                        </a>
                      
                    
                  </div>

</div>

<div class="header-burger

menu-overlay-has-visible-non-navigation-items

" data-animation-role="header-element">
  <button class="header-burger-btn burger" data-test="header-burger">
    <span hidden class="js-header-burger-open-title visually-hidden">Open Menu</span>
    <span hidden class="js-header-burger-close-title visually-hidden">Close Menu</span>
    <div class="burger-box">
      <div class="burger-inner header-menu-icon-tripleLineHamburger">
        <div class="top-bun"></div>
        <div class="patty"></div>
        <div class="bottom-bun"></div>
      </div>
    </div>
  </button>
</div>

</div>
        <div class="header-display-mobile" data-content-field="site-title">
          
            
            
            
              
            
          
            
            
            <div class="header-title-nav-wrapper">

</a>
                      </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/gallery"
        data-animation-role="header-element"
        
      >
        Gallery
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/repairform"
        data-animation-role="header-element"
        
      >
        Repair Form
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/about-us"
        data-animation-role="header-element"
        
      >
        About Us
      </a>
    </div>

<div class="header-nav-item header-nav-item--collection">
      <a
        href="/contact"
        data-animation-role="header-element"
        
      >
        Contact 
      </a>
    </div>

</div>

<div class="header-burger

menu-overlay-has-visible-non-navigation-items

</div>
      </div>
    </div>
    
    <div class="header-menu header-menu--folder-list
      bright
      
      
      
      
      "
      data-section-theme="bright"
      data-current-styles="{
"layout": "navCenter",
"action": {
"href": "/booking",
"buttonText": "Run Club",
"newWindow": false
},
"showSocial": true,
"socialOptions": {
"socialBorderShape": "none",
"socialBorderStyle": "outline",
"socialBorderThickness": {
"unit": "px",
"value": 1.0
}
},
"sectionTheme": "",
"menuOverlayTheme": "bright",
"menuOverlayAnimation": "fade",
"cartStyle": "cart",
"cartText": "Cart",
"showEmptyCartState": true,
"cartOptions": {
"iconType": "stroke-1",
"cartBorderShape": "none",
"cartBorderStyle": "outline",
"cartBorderThickness": {
"unit": "px",
"value": 1.0
}
},
"showButton": false,
"showCart": false,
"showAccountLogin": false,
"headerStyle": "gradient",
"languagePicker": {
"enabled": false,
"iconEnabled": false,
"iconType": "globe",
"flagShape": "shiny",
"languageFlags": [ ]
},
"iconOptions": {
"desktopDropdownIconOptions": {
"size": {
"unit": "em",
"value": 1.0
},
"iconSpacing": {
"unit": "em",
"value": 0.35
},
"strokeWidth": {
"unit": "px",
"value": 1.0
},
"endcapType": "square",
"folderDropdownIcon": "none",
"languagePickerIcon": "openArrowHead"
},
"mobileDropdownIconOptions": {
"size": {
"unit": "em",
"value": 1.0
},
"iconSpacing": {
"unit": "em",
"value": 0.15
},
"strokeWidth": {
"unit": "px",
"value": 0.5
},
"endcapType": "square",
"folderDropdownIcon": "openArrowHead",
"languagePickerIcon": "openArrowHead"
}
},
"mobileOptions": {
"layout": "logoLeftNavRight",
"menuIconOptions": {
"style": "tripleLineHamburger",
"thickness": {
"unit": "px",
"value": 1.0
}
}
},
"solidOptions": {
"headerOpacity": {
"unit": "%",
"value": 100.0
},
"blurBackground": {
"enabled": false,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"backgroundColor": {
"type": "CUSTOM_COLOR",
"customColor": {
"hslaValue": {
"hue": 0.0,
"saturation": 0.0,
"lightness": 1.0,
"alpha": 1.0
},
"userFormat": "hex"
}
},
"navigationColor": {
"type": "CUSTOM_COLOR",
"customColor": {
"hslaValue": {
"hue": 0.0,
"saturation": 0.0,
"lightness": 0.0,
"alpha": 1.0
},
"userFormat": "hex"
}
}
},
"gradientOptions": {
"gradientType": "faded",
"headerOpacity": {
"unit": "%",
"value": 90.0
},
"blurBackground": {
"enabled": true,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"backgroundColor": {
"type": "SITE_PALETTE_COLOR",
"sitePaletteColor": {
"colorName": "white",
"alphaModifier": 1.0
}
},
"navigationColor": {
"type": "CUSTOM_COLOR",
"customColor": {
"hslaValue": {
"hue": 0.0,
"saturation": 0.0,
"lightness": 0.0,
"alpha": 1.0
},
"userFormat": "hex"
}
}
},
"dropShadowOptions": {
"enabled": true,
"blur": {
"unit": "px",
"value": 30.0
},
"spread": {
"unit": "px",
"value": 0.0
},
"distance": {
"unit": "px",
"value": 0.0
},
"color": {
"type": "CUSTOM_COLOR",
"customColor": {
"hslaValue": {
"hue": 0.0,
"saturation": 0.0,
"lightness": 0.0,
"alpha": 1.0
},
"userFormat": "hex"
}
}
},
"borderOptions": {
"enabled": false,
"position": "allSides",
"thickness": {
"unit": "px",
"value": 4.0
},
"color": {
"type": "CUSTOM_COLOR",
"customColor": {
"hslaValue": {
"hue": 0.0,
"saturation": 0.0,
"lightness": 0.0,
"alpha": 1.0
},
"userFormat": "hex"
}
}
},
"showPromotedElement": false,
"buttonVariant": "primary",
"blurBackground": {
"enabled": true,
"blurRadius": {
"unit": "px",
"value": 12.0
}
},
"headerOpacity": {
"unit": "%",
"value": 90.0
}
}"
      data-section-id="overlay-nav"
      data-show-account-login="false"
      data-test="header-menu">
      <div class="header-menu-bg theme-bg--primary"></div>
      <div class="header-menu-nav">
        <nav class="header-menu-nav-list">
          <div data-folder="root" class="header-menu-nav-folder">
            <div class="header-menu-nav-folder-content">
              
<div class="header-menu-nav-wrapper">
  
    
      
        
          <div class="container header-menu-nav-item">
            <a
              data-folder-id="/services-1"
              href="/services-1"
              
            >
              <div class="header-menu-nav-item-content header-menu-nav-item-content-folder">
                <span class="visually-hidden">Folder:</span>
                <span class="header-nav-folder-title-text">Services</span>
              </div>
            </a>
          </div>
          <div data-folder="/services-1" class="header-menu-nav-folder">
            <div class="header-menu-nav-folder-content">
              <div class="header-menu-controls container header-menu-nav-item">
                <a class="header-menu-controls-control header-menu-controls-control--active" data-action="back" href="/">
                  <span>Back</span>
                </a>
              </div>
              
                
                  <div class="container header-menu-nav-item">
                    <a
                      href="/jaks-services"
                      
                    >
                      <div class="header-menu-nav-item-content">
                        Jaks Services
                      </div>
                    </a>
                  </div>
                
                
              
                
                  <div class="container header-menu-nav-item">
                    <a
                      href="/jakscomputerrepairs"
                      
                    >
                      <div class="header-menu-nav-item-content">
                        Jaks Computer Repairs
                      </div>
                    </a>
                  </div>
                
                
              
            </div>
          </div>
        
      
    
      
        
          <div class="container header-menu-nav-item">
            <a
              data-folder-id="/jaks-sales"
              href="/jaks-sales"
              
            >
              <div class="header-menu-nav-item-content header-menu-nav-item-content-folder">
                <span class="visually-hidden">Folder:</span>
                <span class="header-nav-folder-title-text">Jaks Sales</span>
              </div>
            </a>
          </div>
          <div data-folder="/jaks-sales" class="header-menu-nav-folder">
            <div class="header-menu-nav-folder-content">
              <div class="header-menu-controls container header-menu-nav-item">
                <a class="header-menu-controls-control header-menu-controls-control--active" data-action="back" href="/">
                  <span>Back</span>
                </a>
              </div>
              
                
                  <div class="container header-menu-nav-item">
                    <a
                      href="/computer-sales"
                      
                    >
                      <div class="header-menu-nav-item-content">
                        Computer Sales
                      </div>
                    </a>
                  </div>
                
                
              
                
                  <div class="container header-menu-nav-item">
                    <a
                      href="/refurbished-equipment"
                      
                    >
                      <div class="header-menu-nav-item-content">
                        Refurbished Equipment
                      </div>
                    </a>
                  </div>
                
                
              
                
                  <div class="container header-menu-nav-item">
                    <a
                      href="/pc-builds"
                      
                    >
                      <div class="header-menu-nav-item-content">
                        PC Builds
                      </div>
                    </a>
                  </div>
                
                
              
            </div>
          </div>
        
      
    
      
        
          
            <div class="container header-menu-nav-item header-menu-nav-item--collection">
              <a
                href="/gallery"
                
              >
                <div class="header-menu-nav-item-content">
                  Gallery
                </div>
              </a>
            </div>
          
        
      
    
      
        
          
            <div class="container header-menu-nav-item header-menu-nav-item--collection">
              <a
                href="/repairform"
                
              >
                <div class="header-menu-nav-item-content">
                  Repair Form
                </div>
              </a>
            </div>
          
        
      
    
      
        
          
            <div class="container header-menu-nav-item header-menu-nav-item--collection">
              <a
                href="/about-us"
                
              >
                <div class="header-menu-nav-item-content">
                  About Us
                </div>
              </a>
            </div>
          
        
      
    
      
        
          
            <div class="container header-menu-nav-item header-menu-nav-item--collection">
              <a
                href="/contact"
                
              >
                <div class="header-menu-nav-item-content">
                  Contact 
                </div>
              </a>
            </div>
          
        
      
    
  
</div>

</div>
            
              <div class="header-menu-actions social-accounts">
                
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://www.instagram.com/jaksystems/" target="_blank" aria-label="Instagram">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#instagram-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://www.facebook.com/jaksystems" target="_blank" aria-label="Facebook">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#facebook-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="https://twitter.com/jaksystems" target="_blank" aria-label="Twitter">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#twitter-unauth-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                    <div class="header-menu-actions-action header-menu-actions-action--social mobile">
                      <a class="icon icon--lg icon--fill  header-icon header-icon-border-shape-none header-icon-border-style-outline"  href="mailto:sales@jaskcompterparts.com" target="_blank" aria-label="sales@jaskcompterparts.com">
                        <svg viewBox="23 23 64 64">
                          <use xlink:href="#email-icon" width="110" height="110"></use>
                        </svg>
                      </a>
                    </div>
                  
                
              </div>
            
            
            
          </div>
        </nav>
      </div>
    </div>
  </header>

</main>
      
        <footer class="sections" id="footer-sections" data-footer-sections>

<section
  data-test="page-section"
  
  data-section-theme="black-bold"
  class='page-section 
    
      full-bleed-section
      layout-engine-section
    
    background-width--full-bleed
    
      section-height--small
    
    
      content-width--wide
    
    horizontal-alignment--center
    vertical-alignment--middle
    
       has-background
    
    
    black-bold'
  
  data-section-id="693cb42e5416da8be91e7d4e"
  
  data-controller="SectionWrapperController"
  data-current-styles="{
"backgroundImage": {
"id": "6215385920d4727b397b58be",
"recordType": 2,
"addedOn": 1645557849160,
"updatedOn": 1645557852824,
"workflowState": 1,
"publishOn": 1645557849160,
"authorId": "6212784f9d185e53d5bdab7a",
"systemDataId": "1645557849230-VHL12QSNO3M18727PIYS",
"systemDataVariants": "2500x1770,100w,300w,500w,750w,1000w,1500w,2500w",
"systemDataSourceType": "JPG",
"filename": "unsplash-image-Im7lZjxeLhg.jpg",
"mediaFocalPoint": {
"x": 0.5,
"y": 0.5,
"source": 3
},
"colorData": {
"topLeftAverage": "000000",
"topRightAverage": "010200",
"bottomLeftAverage": "010200",
"bottomRightAverage": "020301",
"centerAverage": "000000",
"suggestedBgColor": "111112"
},
"urlId": "w78b3teljaf4uqcx3lub8jki540u74",
"title": "",
"body": null,
"likeCount": 0,
"commentCount": 0,
"publicCommentCount": 0,
"commentState": 2,
"unsaved": false,
"assetUrl": "https://images.squarespace-cdn.com/content/v1/62128ddf7618be0fc0192f2e/1645557849230-VHL12QSNO3M18727PIYS/unsplash-image-Im7lZjxeLhg.jpg",
"contentType": "image/jpeg",
"items": [ ],
"pushedServices": { },
"pendingPushedServices": { },
"originalSize": "2500x1770",
"recordTypeLabel": "image"
},
"imageOverlayOpacity": 0.15,
"backgroundWidth": "background-width--full-bleed",
"sectionHeight": "section-height--small",
"customSectionHeight": 45,
"horizontalAlignment": "horizontal-alignment--center",
"verticalAlignment": "vertical-alignment--middle",
"contentWidth": "content-width--wide",
"customContentWidth": 50,
"sectionTheme": "black-bold",
"sectionAnimation": "none",
"backgroundMode": "image"
}"
  data-current-context="{
"video": {
"playbackSpeed": 0.5,
"filter": 1,
"filterStrength": 0,
"zoom": 0,
"videoSourceProvider": "none"
},
"backgroundImageId": null,
"backgroundMediaEffect": null,
"divider": null,
"typeName": "page"
}"
  data-animation="none"
  data-fluid-engine-section

data-sqsp-section="fluid-engine"

>
  <div
    class="section-border"
    
  >
    <div class="section-background">

.fe-693cb42e02b53c7d865d7d9d {
  --grid-gutter: calc(var(--sqs-mobile-site-gutter, 6vw) - 11.0px);
  --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (8 - 1)) ) / 8 );

display: grid;
  position: relative;
  grid-area: 1/1/-1/-1;
  grid-template-rows: repeat(38,minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11.0px;
  column-gap: 11.0px;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .background-width--inset .fe-693cb42e02b53c7d865d7d9d {
    --inset-padding: calc(var(--sqs-site-gutter) * 2);
  }

.fe-693cb42e02b53c7d865d7d9d {
    --grid-gutter: calc(var(--sqs-site-gutter, 4vw) - 11.0px);
    --cell-max-width: calc( ( var(--sqs-site-max-width, 1500px) - (11.0px * (24 - 1)) ) / 24 );
    --inset-padding: 0vw;

--row-height-scaling-factor: 0.0215;
    --container-width: min(var(--sqs-site-max-width, 1500px), calc(100vw - var(--sqs-site-gutter, 4vw) * 2 - var(--inset-padding) ));

grid-template-rows: repeat(22,minmax(calc(var(--container-width) * var(--row-height-scaling-factor)), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.fe-block-693cb42e12d8ce46c160f3e2 {
    grid-area: 1/2/6/10;
    z-index: 0;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e12d8ce46c160f3e2 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-693cb42e12d8ce46c160f3e2 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e12d8ce46c160f3e2 {
      grid-area: 1/2/5/12;
      z-index: 1;

}

.fe-block-693cb42e12d8ce46c160f3e2 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-693cb42e12d8ce46c160f3e2 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-693cb42e961b6bd960c86c22 {
    grid-area: 6/2/20/10;
    z-index: 1;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e961b6bd960c86c22 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-693cb42e961b6bd960c86c22 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e961b6bd960c86c22 {
      grid-area: 1/16/16/26;
      z-index: 2;

}

.fe-block-693cb42e961b6bd960c86c22 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-693cb42e961b6bd960c86c22 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-693cb42e434e7c910bea2d75 {
    grid-area: 22/2/23/10;
    z-index: 2;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e434e7c910bea2d75 .sqs-block {
    justify-content: center;
  }

.fe-block-693cb42e434e7c910bea2d75 .sqs-block-alignment-wrapper {
    align-items: center;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e434e7c910bea2d75 {
      grid-area: 18/2/19/26;
      z-index: 3;

}

.fe-block-693cb42e434e7c910bea2d75 .sqs-block {
      justify-content: center;
    }

.fe-block-693cb42e434e7c910bea2d75 .sqs-block-alignment-wrapper {
      align-items: center;
    }
  }

.fe-block-693cb42e941ad19ae0273817 {
    grid-area: 23/2/27/10;
    z-index: 3;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e941ad19ae0273817 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-693cb42e941ad19ae0273817 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e941ad19ae0273817 {
      grid-area: 19/2/23/8;
      z-index: 4;

}

.fe-block-693cb42e941ad19ae0273817 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-693cb42e941ad19ae0273817 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-693cb42e6bd3736c8aca7dd6 {
    grid-area: 27/2/31/10;
    z-index: 4;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e6bd3736c8aca7dd6 .sqs-block {
    justify-content: flex-start;
  }

.fe-block-693cb42e6bd3736c8aca7dd6 .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e6bd3736c8aca7dd6 {
      grid-area: 19/8/23/18;
      z-index: 6;

}

.fe-block-693cb42e6bd3736c8aca7dd6 .sqs-block {
      justify-content: flex-start;
    }

.fe-block-693cb42e6bd3736c8aca7dd6 .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

.fe-block-yui_3_17_2_1_1765580314784_6813 {
    grid-area: 31/2/37/10;
    z-index: 6;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-yui_3_17_2_1_1765580314784_6813 .sqs-block {
    justify-content: center;
  }

.fe-block-yui_3_17_2_1_1765580314784_6813 .sqs-block-alignment-wrapper {
    align-items: center;
  }

@media (min-width: 768px) {
    .fe-block-yui_3_17_2_1_1765580314784_6813 {
      grid-area: 21/8/22/9;
      z-index: 5;

position: sticky;
    top: calc(0px + var(--header-fixed-top-offset, 0px));

}

.fe-block-yui_3_17_2_1_1765580314784_6813 .sqs-block {
      justify-content: center;
    }

.fe-block-yui_3_17_2_1_1765580314784_6813 .sqs-block-alignment-wrapper {
      align-items: center;
    }
  }

.fe-block-693cb42e0e8373371a58adfa {
    grid-area: 37/2/39/10;
    z-index: 5;

@media (max-width: 767px) {
      
        
      
      
    }
  }

.fe-block-693cb42e0e8373371a58adfa .sqs-block {
    justify-content: flex-start;
  }

.fe-block-693cb42e0e8373371a58adfa .sqs-block-alignment-wrapper {
    align-items: flex-start;
  }

@media (min-width: 768px) {
    .fe-block-693cb42e0e8373371a58adfa {
      grid-area: 19/18/21/26;
      z-index: 7;

}

.fe-block-693cb42e0e8373371a58adfa .sqs-block {
      justify-content: flex-start;
    }

.fe-block-693cb42e0e8373371a58adfa .sqs-block-alignment-wrapper {
      align-items: flex-start;
    }
  }

</style><div class="fluid-engine fe-693cb42e02b53c7d865d7d9d"><div class="fe-block fe-block-693cb42e12d8ce46c160f3e2"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="693cb42e12d8ce46c160f3e2" id="block-693cb42e12d8ce46c160f3e2"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h3 style="text-align:center;white-space:pre-wrap;">STAY UPDATED</h3><p style="text-align:center;white-space:pre-wrap;" class="sqsrte-small">Be the first to know when we add new PC repair specials, special services, facility upgrades, and other news from Jaks Parts & Computer Services. We respect your privacy and will never sell or share your information with third parties. Sign up today to receive priority alerts, exclusive offers, and helpful tips to keep your devices running smoothly.</p></div>

--tweak-text-block-background-color: initial;

}

#block-693cb42e12d8ce46c160f3e2 .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}

.fe-block-693cb42e12d8ce46c160f3e2 {
      mix-blend-mode: var(--tweak-text-block-blend
  );
      border-radius: var(--tweak-text-block-radius);
  }

.fe-block-693cb42e12d8ce46c160f3e2 {
      --tweak-text-block-radius: 0px 0px 0px 0px;
    }

.fe-block-693cb42e12d8ce46c160f3e2 {
      --tweak-text-block-blend
  : normal;
    }

.fe-block-693cb42e12d8ce46c160f3e2 {
    --blur-value: blur(15px);}

</style>

#block-693cb42e12d8ce46c160f3e2 {
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-693cb42e12d8ce46c160f3e2 .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>

</div>
</div></div></div><div class="fe-block fe-block-693cb42e961b6bd960c86c22"><div class="sqs-block newsletter-block sqs-block-newsletter" data-blend-mode="normal" data-block-type="51" data-border-radii="{"topLeft":{"unit":"px","value":0.0},"topRight":{"unit":"px","value":0.0},"bottomLeft":{"unit":"px","value":0.0},"bottomRight":{"unit":"px","value":0.0}}" id="block-693cb42e961b6bd960c86c22"><div class="sqs-block-content">

<div class="newsletter-form-wrapper
   newsletter-form-show-name
  newsletter-form-wrapper--layoutFloat
  newsletter-form-wrapper--alignCenter
  
  "
  >
  <form
     class="newsletter-form"
     data-form-id="66cfdb6a109ec5491c39a60f"
     
     autocomplete="on"
     method="POST"
     novalidate
     onsubmit="return (function (form) {
    Y.use('squarespace-form-submit', 'node', function usingFormSubmit(Y) {
      (new Y.Squarespace.FormSubmit(form)).submit({
        formId: '66cfdb6a109ec5491c39a60f',
        collectionId: '6a33180e40cb145ef79c3dd2',
        objectName: '693cb42e961b6bd960c86c22'
      });
    });
    return false;
  })(this);">
    <header class="newsletter-form-header">
      <h2 class="newsletter-form-header-title">Subscribe</h2>
      <div class="newsletter-form-header-description"><p>Sign up with your email address to receive news and updates.</p></div>
    </header>
    <div class="newsletter-form-body">
      <div class="newsletter-form-fields-wrapper form-fields" style="vertical-align: middle;">
        
          
            
          
            
              
              
              <fieldset id="name-yui_3_17_2_1_1724897280580_4175" class="newsletter-form-name-fieldset form-item fields name required" style="vertical-align: bottom;">
                
                  
                <div class="newsletter-form-field-wrapper field first-name">
                  <label class="newsletter-form-field-label title">First Name</label>
                  <input class="newsletter-form-field-element field-element field-control" name="fname" x-autocompletetype="given-name" type="text" spellcheck="false" placeholder="First Name" maxlength="30" data-title="First" />
                </div>
              
                  
                <div class="newsletter-form-field-wrapper field last-name">
                  <label class="newsletter-form-field-label title">Last Name</label>
                  <input class="newsletter-form-field-element field-element field-control" name="lname" x-autocompletetype="surname" type="text" spellcheck="false" placeholder="Last Name" maxlength="30" data-title="Last" />
                </div>
              
                
              </fieldset>
            
          
        
        
          
            <div id="email-yui_3_17_2_1_1724897280580_7173" class="newsletter-form-field-wrapper form-item field email required" style="vertical-align: bottom;">
              <label class="newsletter-form-field-label title" for="email-yui_3_17_2_1_1724897280580_7173-field">Email Address</label>
              <input id="email-yui_3_17_2_1_1724897280580_7173-field" class="newsletter-form-field-element field-element" name="email" x-autocompletetype="email" autocomplete="email" type="email" spellcheck="false" placeholder="Email Address" />
            </div>
          
        
          
        
      </div>
      <div data-animation-role="button" class="newsletter-form-button-wrapper submit-wrapper" style="vertical-align: middle;">
        <button
          class="
            newsletter-form-button
            sqs-system-button
            sqs-editable-button-layout
            sqs-editable-button-style
            sqs-editable-button-shape
            sqs-button-element--primary
          "
          type="submit"
          value="Sign Up"
        >
          <span class="newsletter-form-spinner sqs-spin light large"></span>
          <span class="newsletter-form-button-label">Sign Up</span>
          <span class="newsletter-form-button-icon"></span>
        </button>
      </div>
      
        
        <div class="captcha-container sqs-form-rendered
          
          align-center
          
          "
          data-theme="light"
        ></div>
        
      
    </div>
    <div class="newsletter-form-footnote"><p>We respect your privacy.</p></div>
    <div class="hidden form-submission-text">Thank you!</div>
    <div class="hidden form-submission-html" data-submission-html=""></div>
  </form>
</div>
</div></div></div><div class="fe-block fe-block-693cb42e434e7c910bea2d75"><div class="sqs-block horizontalrule-block sqs-block-horizontalrule" data-block-type="47" data-sqsp-block="line" id="block-693cb42e434e7c910bea2d75"><div class="sqs-block-content"><hr /></div></div></div><div class="fe-block fe-block-693cb42e941ad19ae0273817"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="693cb42e941ad19ae0273817" id="block-693cb42e941ad19ae0273817"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h3 style="white-space:pre-wrap;">SUPPORT</h3><p class="sqsrte-small" style="white-space:pre-wrap;"><a href="/privacy-policy">Private Policy</a> <br><a href="/faqs">FAQs</a></p></div>

--tweak-text-block-background-color: initial;

}

#block-693cb42e941ad19ae0273817 .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}

.fe-block-693cb42e941ad19ae0273817 {
      mix-blend-mode: var(--tweak-text-block-blend
  );
      border-radius: var(--tweak-text-block-radius);
  }

.fe-block-693cb42e941ad19ae0273817 {
      --tweak-text-block-radius: 0px 0px 0px 0px;
    }

.fe-block-693cb42e941ad19ae0273817 {
      --tweak-text-block-blend
  : normal;
    }

.fe-block-693cb42e941ad19ae0273817 {
    --blur-value: blur(15px);}

</style>

#block-693cb42e941ad19ae0273817 {
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-693cb42e941ad19ae0273817 .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>

</div>
</div></div></div><div class="fe-block fe-block-693cb42e6bd3736c8aca7dd6"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="693cb42e6bd3736c8aca7dd6" id="block-693cb42e6bd3736c8aca7dd6"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h3 style="white-space:pre-wrap;">CONTACT</h3><p class="sqsrte-small" style="white-space:pre-wrap;"><a href="mailto:tech@jakscomputerparts.com?" target="_blank">tech@jakscomputerparts.com</a><br>         <a href="https://web.whatsapp.com">1(2</a><a href="https://web.whatsapp.com" target="_blank">46)-257-3181</a></p></div>

--tweak-text-block-background-color: initial;

}

#block-693cb42e6bd3736c8aca7dd6 .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}

.fe-block-693cb42e6bd3736c8aca7dd6 {
      mix-blend-mode: var(--tweak-text-block-blend
  );
      border-radius: var(--tweak-text-block-radius);
  }

.fe-block-693cb42e6bd3736c8aca7dd6 {
      --tweak-text-block-radius: 0px 0px 0px 0px;
    }

.fe-block-693cb42e6bd3736c8aca7dd6 {
      --tweak-text-block-blend
  : normal;
    }

.fe-block-693cb42e6bd3736c8aca7dd6 {
    --blur-value: blur(15px);}

</style>

#block-693cb42e6bd3736c8aca7dd6 {
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-693cb42e6bd3736c8aca7dd6 .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>

</div>
</div></div></div><div class="fe-block fe-block-yui_3_17_2_1_1765580314784_6813"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-image image-block" data-aspect-ratio="100" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/website.components.imageFluid.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/748.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/8018.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/9882.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/image-effect-film-grain.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/image-effect-liquid.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/image-effect-parallax.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/image-effect-refracted-circles.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/image-effect-refracted-lines.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/website.components.imageFluid.shared.constants.js","https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.imageFluid/723ce4d5-5976-43ae-ae02-6a3d264fe369_663/website.components.imageFluid.visitor.js"]" data-block-type="1337" data-definition-name="website.components.imageFluid" data-sqsp-block="image" data-website-component-id="yui_3_17_2_1_1765580314784_6813" id="block-yui_3_17_2_1_1765580314784_6813"><div class="sqs-block-content">

</a>
    
  </div>
  
  
  
  <svg data-image-mask-id="yui_3_17_2_1_1765580314784_6813-system_desktop" width="0" height="0" style="position: absolute;">
    <defs>
      <clipPath id="yui_3_17_2_1_1765580314784_6813-system_desktop" clipPathUnits="objectBoundingBox">

</clipPath>
    </defs>
  </svg>

</div>
    </div>
    <style>
      
      
      
      #block-yui_3_17_2_1_1765580314784_6813 {
        --image-component-focal-point: 50% 50%;
        
  --image-component-object-fit: cover;
  --image-component-overlay-opacity: 0;
  --image-component-overlay-blend-mode: multiply;
  
  --image-component-native-aspect-ratio: 2500/1875;

}
      #block-yui_3_17_2_1_1765580314784_6813 .fluid-image-container.visitor-mode {
        
  
  overflow: hidden;clip-path: url(#yui_3_17_2_1_1765580314784_6813-system_desktop);-webkit-clip-path: url(#yui_3_17_2_1_1765580314784_6813-system_desktop);

}
      #block-yui_3_17_2_1_1765580314784_6813 .js-content-mode-element-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: none;
      }
      #block-yui_3_17_2_1_1765580314784_6813 .js-content-mode-element-system_desktop {
        display: block;
      }
    </style>
    <style class="transform-overrides-vars">
    
  </style>

</div>

</div></div></div><div class="fe-block fe-block-693cb42e0e8373371a58adfa"><div class="sqs-block website-component-block sqs-block-website-component sqs-block-html html-block" data-block-css="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.styles.css"]" data-block-scripts="["https://definitions.sqspcdn.com/website-component-definition/static-assets/website.components.html/3a21973b-cfc5-44e4-88fd-c0b202e0d14c_676/website.components.html.visitor.js"]" data-block-type="1337" data-definition-name="website.components.html" data-sqsp-block="text" data-website-component-id="693cb42e0e8373371a58adfa" id="block-693cb42e0e8373371a58adfa"><div class="sqs-block-content"><div class="sqs-text-block-container">
  
  <div class="sqs-html-content" data-sqsp-text-block-content><h3 style="text-align:right;white-space:pre-wrap;">JAKS SYSTEMS</h3></div>

--tweak-text-block-background-color: initial;

}

#block-693cb42e0e8373371a58adfa .sqs-html-content {
    
    --tweak-text-block-padding: 6% 6% 6% 6%;
  --tweak-text-block-padding: initial;
}

.fe-block-693cb42e0e8373371a58adfa {
      mix-blend-mode: var(--tweak-text-block-blend
  );
      border-radius: var(--tweak-text-block-radius);
  }

.fe-block-693cb42e0e8373371a58adfa {
      --tweak-text-block-radius: 0px 0px 0px 0px;
    }

.fe-block-693cb42e0e8373371a58adfa {
      --tweak-text-block-blend
  : normal;
    }

.fe-block-693cb42e0e8373371a58adfa {
    --blur-value: blur(15px);}

</style>

#block-693cb42e0e8373371a58adfa {
            
            }
        }
    
  
    @media screen and (max-width: 767px) {
          #block-693cb42e0e8373371a58adfa .sqs-html-content {
            
            }
        }
    
  @media screen and (max-width: 767px) {

}</style>

</div>
</div></div></div></div></div>
    </div>
  
  </div>
  
</section>

</footer>

</div>

</body>
</html>