869 lines
28 KiB
HTML
869 lines
28 KiB
HTML
<!doctype html>
|
||
<html lang="en" class="no-snap">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>
|
||
Prology – New & Used Enterprise IT, Server and Network Hardware Supplier
|
||
</title>
|
||
<meta
|
||
name="description"
|
||
content="Prology is a Sydney-based enterprise specialising in high-quality new and refurbished Cisco networking equipment, alongside legacy hard-to-find parts."
|
||
/>
|
||
<meta name="robots" content="index,follow" />
|
||
<link rel="canonical" href="https://prology.net/about-us" />
|
||
<link rel="icon" type="image/png" href="assets/favicon.png" />
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:site_name" content="Prology" />
|
||
<meta property="og:url" content="https://prology.net/about-us" />
|
||
<meta
|
||
property="og:title"
|
||
content="Prology – New & Used Enterprise IT, Server and Network Hardware Supplier"
|
||
/>
|
||
<meta
|
||
property="og:description"
|
||
content="Sydney-based brokerage of high-quality new and refurbished Cisco networking equipment and legacy hard-to-find parts."
|
||
/>
|
||
<meta
|
||
property="og:image"
|
||
content="https://prology.net/assets/Prology_logo.png"
|
||
/>
|
||
<meta property="og:locale" content="en_AU" />
|
||
<meta property="og:locale:alternate" content="en_US" />
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta
|
||
name="twitter:title"
|
||
content="Prology – New & Used Enterprise IT, Server and Network Hardware Supplier"
|
||
/>
|
||
<meta
|
||
name="twitter:description"
|
||
content="Sydney-based brokerage of high-quality new and refurbished Cisco networking equipment and legacy hard-to-find parts."
|
||
/>
|
||
<meta
|
||
name="twitter:image"
|
||
content="https://prology.net/assets/Prology_logo.png"
|
||
/>
|
||
|
||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<!-- JSON-LD: AboutPage -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "AboutPage",
|
||
"name": "About Prology",
|
||
"url": "https://prology.net/about-us",
|
||
"mainEntity": {
|
||
"@type": "Organization",
|
||
"name": "Prology",
|
||
"legalName": "Prology Pty Ltd",
|
||
"url": "https://prology.net/",
|
||
"logo": "https://prology.net/assets/Prology_logo.png",
|
||
"description": "Sydney-based enterprise specialising in high-quality new and refurbished Cisco networking equipment, alongside legacy hard-to-find parts."
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* ============ ABOUT US PAGE ============ */
|
||
body {
|
||
background: #f6f7f9 !important;
|
||
}
|
||
|
||
.about-page {
|
||
margin-top: 80px;
|
||
padding: 32px 0 80px;
|
||
}
|
||
|
||
/* ---------- Breadcrumb ---------- */
|
||
.about-breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.95rem;
|
||
margin-bottom: 24px;
|
||
padding-left: 4px;
|
||
}
|
||
.about-breadcrumb a {
|
||
color: #6b7280;
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.about-breadcrumb a:hover {
|
||
color: #1a73e8;
|
||
}
|
||
.about-breadcrumb .sep {
|
||
color: #cbd2da;
|
||
}
|
||
.about-breadcrumb .current {
|
||
color: #1a1f2e;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ---------- Hero (dark navy card) ---------- */
|
||
.about-hero-card {
|
||
background: #1a2240;
|
||
border-radius: 20px;
|
||
padding: 90px 60px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
margin-bottom: 32px;
|
||
}
|
||
.about-hero-card .eyebrow {
|
||
display: inline-block;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.18em;
|
||
color: #cbd5e1;
|
||
margin-bottom: 22px;
|
||
text-transform: uppercase;
|
||
}
|
||
.about-hero-card h1 {
|
||
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
|
||
font-weight: 800;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.15;
|
||
margin: 0 0 22px 0;
|
||
color: #ffffff;
|
||
}
|
||
.about-hero-card p {
|
||
font-size: 1.05rem;
|
||
line-height: 1.7;
|
||
color: #cbd5e1;
|
||
max-width: 720px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* ---------- Mission Callout ---------- */
|
||
.mission-callout {
|
||
background: #eef0f4;
|
||
border-left: 4px solid #2563eb;
|
||
border-radius: 14px;
|
||
padding: 32px 36px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.mission-callout .callout-label {
|
||
display: block;
|
||
font-size: 0.82rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.18em;
|
||
color: #1a1f2e;
|
||
text-transform: uppercase;
|
||
margin-bottom: 18px;
|
||
}
|
||
.mission-callout p {
|
||
font-size: 1.05rem;
|
||
line-height: 1.7;
|
||
color: #1f2937;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---------- Who We Are ---------- */
|
||
.who-block {
|
||
padding: 0 4px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.who-block h2 {
|
||
font-size: 1.65rem;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
margin: 0 0 22px 0;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.who-block p {
|
||
font-size: 1rem;
|
||
line-height: 1.75;
|
||
color: #374151;
|
||
margin: 0 0 18px 0;
|
||
}
|
||
|
||
/* ---------- 3 Value Cards ---------- */
|
||
.value-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-bottom: 48px;
|
||
}
|
||
.value-card {
|
||
background: #ffffff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
padding: 32px 28px;
|
||
transition:
|
||
transform 0.25s ease,
|
||
box-shadow 0.25s ease;
|
||
}
|
||
.value-card:hover {
|
||
transform: translateY(-3px);
|
||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
|
||
}
|
||
.value-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
background: #e8f0fe;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 24px;
|
||
color: #2563eb;
|
||
}
|
||
.value-card h3 {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: #0f172a;
|
||
margin: 0 0 14px 0;
|
||
}
|
||
.value-card p {
|
||
font-size: 0.95rem;
|
||
line-height: 1.65;
|
||
color: #4b5563;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---------- Why Choose ---------- */
|
||
.why-block {
|
||
background: #ffffff;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 16px;
|
||
padding: 40px 44px;
|
||
margin-bottom: 40px;
|
||
}
|
||
.why-block h2 {
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
color: #0f172a;
|
||
margin: 0 0 32px 0;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.why-bullets {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px 56px;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.why-bullets li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 14px;
|
||
font-size: 1rem;
|
||
color: #1f2937;
|
||
line-height: 1.5;
|
||
}
|
||
.why-bullets .check {
|
||
flex-shrink: 0;
|
||
width: 22px;
|
||
height: 22px;
|
||
margin-top: 2px;
|
||
color: #16a34a;
|
||
}
|
||
|
||
/* ---------- Ready CTA (blue) ---------- */
|
||
.ready-cta {
|
||
background: #2563eb;
|
||
border-radius: 18px;
|
||
padding: 56px 40px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
.ready-cta h2 {
|
||
font-size: clamp(1.6rem, 3vw, 2rem);
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin: 0 0 16px 0;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.ready-cta p {
|
||
font-size: 1rem;
|
||
line-height: 1.6;
|
||
color: rgba(255, 255, 255, 0.92);
|
||
max-width: 640px;
|
||
margin: 0 auto 32px auto;
|
||
}
|
||
.ready-cta-actions {
|
||
display: flex;
|
||
gap: 14px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.ready-cta-actions .btn-solid,
|
||
.ready-cta-actions .btn-ghost {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 28px;
|
||
border-radius: 8px;
|
||
font-size: 0.98rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition:
|
||
transform 0.2s ease,
|
||
background 0.2s ease;
|
||
border: 1px solid transparent;
|
||
font-family: inherit;
|
||
}
|
||
.ready-cta-actions .btn-solid {
|
||
background: #ffffff;
|
||
color: #2563eb;
|
||
}
|
||
.ready-cta-actions .btn-solid:hover {
|
||
background: #f1f5ff;
|
||
transform: translateY(-1px);
|
||
}
|
||
.ready-cta-actions .btn-ghost {
|
||
background: transparent;
|
||
color: #ffffff;
|
||
border-color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
.ready-cta-actions .btn-ghost:hover {
|
||
background: rgba(255, 255, 255, 0.12);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ---------- Responsive ---------- */
|
||
@media (max-width: 1024px) {
|
||
.value-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.why-bullets {
|
||
grid-template-columns: 1fr;
|
||
gap: 18px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.about-hero-card {
|
||
padding: 60px 28px;
|
||
}
|
||
.mission-callout,
|
||
.why-block {
|
||
padding: 28px 24px;
|
||
}
|
||
.ready-cta {
|
||
padding: 44px 24px;
|
||
}
|
||
.ready-cta-actions {
|
||
flex-direction: column;
|
||
}
|
||
.ready-cta-actions .btn-solid,
|
||
.ready-cta-actions .btn-ghost {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- ============ NAVIGATION ============ -->
|
||
<nav class="navbar">
|
||
<div class="nav-content">
|
||
<a href="index.html" class="nav-brand">
|
||
<img src="assets/Prology_logo.png" alt="Prology.net" />
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li><a href="index.html#home">Home</a></li>
|
||
<li><a href="index.html#services">Categories</a></li>
|
||
<li><a href="index.html#quality">Why Choose Us</a></li>
|
||
<li><a href="index.html#institutional">Gov & Corp</a></li>
|
||
<li><a href="index.html#contact">Contact</a></li>
|
||
<li><a href="about-us.html" class="active">About Us</a></li>
|
||
</ul>
|
||
<div class="nav-cta">
|
||
<button class="btn-view-products" onclick="openStoreModal()">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
|
||
<line x1="3" y1="6" x2="21" y2="6" />
|
||
<path d="M16 10a4 4 0 0 1-8 0" />
|
||
</svg>
|
||
View Products
|
||
</button>
|
||
</div>
|
||
<button
|
||
class="hamburger-btn"
|
||
aria-label="Toggle navigation menu"
|
||
aria-expanded="false"
|
||
>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
<div class="nav-backdrop" id="nav-backdrop"></div>
|
||
|
||
<!-- ============ MAIN CONTENT ============ -->
|
||
<div class="about-page">
|
||
<div class="container">
|
||
<!-- Breadcrumb -->
|
||
<nav class="about-breadcrumb" aria-label="Breadcrumb">
|
||
<a href="index.html">Home</a>
|
||
<span class="sep">/</span>
|
||
<span class="current">About Us</span>
|
||
</nav>
|
||
|
||
<!-- Hero Card -->
|
||
<section class="about-hero-card">
|
||
<h1>Welcome to Prology</h1>
|
||
<p>
|
||
A Sydney-based company specialising in high-quality new and
|
||
refurbished Cisco networking equipment, as well as legacy
|
||
hard-to-find parts.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Mission Callout -->
|
||
<section class="mission-callout">
|
||
<span class="callout-label">Our Mission</span>
|
||
<p>
|
||
To reduce the involvement of middlemen in the supply chain — cutting
|
||
costs for end-users while ensuring they receive top-notch products.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Who We Are -->
|
||
<section class="who-block">
|
||
<h2>Who We Are</h2>
|
||
<p>
|
||
At Prology, we understand that businesses of all sizes require
|
||
reliable and efficient networking equipment to operate smoothly.
|
||
That's why we offer a wide range of products catering to the needs
|
||
of various industries — from small businesses to large enterprises.
|
||
</p>
|
||
<p>
|
||
Our inventory includes routers, switches, firewalls, and other
|
||
networking equipment from leading brands like Cisco. All refurbished
|
||
equipment goes through a meticulous refurbishment and certification
|
||
process, meeting the same standards as new equipment at a fraction
|
||
of the cost.
|
||
</p>
|
||
</section>
|
||
|
||
<!-- Value Cards -->
|
||
<section class="value-cards">
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polygon
|
||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<h3>Quality Assured</h3>
|
||
<p>
|
||
Meticulous refurbishment and certification — every item meets the
|
||
same standards as new equipment.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
</div>
|
||
<h3>Expert Support</h3>
|
||
<p>
|
||
Personalised advice from our team of networking specialists —
|
||
ready to help you choose the right equipment.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="value-card">
|
||
<div class="value-icon">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<rect x="1" y="3" width="15" height="13" />
|
||
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8" />
|
||
<circle cx="5.5" cy="18.5" r="2.5" />
|
||
<circle cx="18.5" cy="18.5" r="2.5" />
|
||
</svg>
|
||
</div>
|
||
<h3>Worldwide Shipping</h3>
|
||
<p>
|
||
Fast delivery via UPS, DHL, FedEx and other trusted couriers —
|
||
wherever you are located.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Why Choose -->
|
||
<section class="why-block">
|
||
<h2>Why Choose Prology?</h2>
|
||
<ul class="why-bullets">
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>High-quality new & refurbished Cisco equipment</span>
|
||
</li>
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>Legacy & hard-to-find parts specialist</span>
|
||
</li>
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span
|
||
>Fraction of the cost — without sacrificing performance</span
|
||
>
|
||
</li>
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>Rigorous testing & certification on all stock</span>
|
||
</li>
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>No middlemen — direct savings passed to customers</span>
|
||
</li>
|
||
<li>
|
||
<svg
|
||
class="check"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
<span>Serving small businesses to large enterprises</span>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Ready CTA -->
|
||
<section class="ready-cta">
|
||
<h2>Ready to upgrade your network?</h2>
|
||
<p>
|
||
Browse our full range of Cisco networking equipment or get in touch
|
||
with our team.
|
||
</p>
|
||
<div class="ready-cta-actions">
|
||
<button type="button" class="btn-solid" onclick="openStoreModal()">
|
||
Shop Now
|
||
</button>
|
||
<a class="btn-ghost" href="index.html#contact">Contact Us</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/config.js" defer></script>
|
||
<script src="assets/js/modals.js" defer></script>
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const hamburgerBtn = document.querySelector(".hamburger-btn");
|
||
const navMenu = document.querySelector(".nav-links");
|
||
const navBackdrop = document.getElementById("nav-backdrop");
|
||
if (!hamburgerBtn || !navMenu) return;
|
||
|
||
function closeNavMenu() {
|
||
navMenu.classList.remove("open");
|
||
hamburgerBtn.classList.remove("open");
|
||
hamburgerBtn.setAttribute("aria-expanded", "false");
|
||
if (navBackdrop) navBackdrop.classList.remove("open");
|
||
}
|
||
|
||
hamburgerBtn.addEventListener("click", () => {
|
||
const isOpen = navMenu.classList.toggle("open");
|
||
hamburgerBtn.classList.toggle("open", isOpen);
|
||
hamburgerBtn.setAttribute("aria-expanded", String(isOpen));
|
||
if (navBackdrop) navBackdrop.classList.toggle("open", isOpen);
|
||
});
|
||
navMenu.querySelectorAll("a").forEach((a) => {
|
||
a.addEventListener("click", closeNavMenu);
|
||
});
|
||
if (navBackdrop) navBackdrop.addEventListener("click", closeNavMenu);
|
||
});
|
||
</script>
|
||
|
||
<!-- ============ PROLOGY MODAL WEB COMPONENTS ============ -->
|
||
<prology-sell-modal id="wc-sell-modal"></prology-sell-modal>
|
||
<prology-source-modal id="wc-source-modal"></prology-source-modal>
|
||
<prology-quote-modal id="wc-quote-modal"></prology-quote-modal>
|
||
<prology-enquire-modal id="wc-enquire-modal"></prology-enquire-modal>
|
||
|
||
<!-- ============ STORE PICKER MODAL ============ -->
|
||
<div
|
||
class="store-modal-overlay"
|
||
id="store-modal-overlay"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="store-modal-title"
|
||
>
|
||
<div class="store-modal-box">
|
||
<button
|
||
class="store-modal-close"
|
||
onclick="closeStoreModal()"
|
||
aria-label="Close"
|
||
>
|
||
✕
|
||
</button>
|
||
<p class="store-modal-title" id="store-modal-title">
|
||
Choose Your Store
|
||
</p>
|
||
<p class="store-modal-subtitle">
|
||
Select a region to browse our products
|
||
</p>
|
||
<div class="store-options">
|
||
<a data-store="au" class="store-option store-option--active">
|
||
<span class="store-flag">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 60 30"
|
||
width="52"
|
||
height="28"
|
||
>
|
||
<rect width="60" height="30" fill="#00205B" />
|
||
<line
|
||
x1="0"
|
||
y1="0"
|
||
x2="30"
|
||
y2="15"
|
||
stroke="#fff"
|
||
stroke-width="5"
|
||
/>
|
||
<line
|
||
x1="30"
|
||
y1="0"
|
||
x2="0"
|
||
y2="15"
|
||
stroke="#fff"
|
||
stroke-width="5"
|
||
/>
|
||
<line
|
||
x1="0"
|
||
y1="0"
|
||
x2="30"
|
||
y2="15"
|
||
stroke="#CC2529"
|
||
stroke-width="3"
|
||
/>
|
||
<line
|
||
x1="30"
|
||
y1="0"
|
||
x2="0"
|
||
y2="15"
|
||
stroke="#CC2529"
|
||
stroke-width="3"
|
||
/>
|
||
<rect x="12" y="0" width="6" height="15" fill="#fff" />
|
||
<rect x="0" y="6" width="30" height="6" fill="#fff" />
|
||
<rect x="13.5" y="0" width="3" height="15" fill="#CC2529" />
|
||
<rect x="0" y="7.5" width="30" height="3" fill="#CC2529" />
|
||
<polygon
|
||
points="7.5,17 8.3,19.5 11,19.5 8.8,21.2 9.6,23.7 7.5,22 5.4,23.7 6.2,21.2 4,19.5 6.7,19.5"
|
||
fill="#fff"
|
||
/>
|
||
<polygon
|
||
points="44,3 44.8,5.5 47.5,5.5 45.3,7.2 46.1,9.7 44,8 41.9,9.7 42.7,7.2 40.5,5.5 43.2,5.5"
|
||
fill="#fff"
|
||
/>
|
||
<polygon
|
||
points="52,8 52.6,10 54.7,10 53,11.3 53.6,13.3 52,12 50.4,13.3 51,11.3 49.3,10 51.4,10"
|
||
fill="#fff"
|
||
/>
|
||
<polygon
|
||
points="44,15 44.6,17 46.7,17 45,18.3 45.6,20.3 44,19 42.4,20.3 43,18.3 41.3,17 43.4,17"
|
||
fill="#fff"
|
||
/>
|
||
<polygon
|
||
points="37,9 37.6,11 39.7,11 38,12.3 38.6,14.3 37,13 35.4,14.3 36,12.3 34.3,11 36.4,11"
|
||
fill="#fff"
|
||
/>
|
||
<polygon
|
||
points="50,18 50.4,19.2 51.6,19.2 50.6,20 51,21.2 50,20.4 49,21.2 49.4,20 48.4,19.2 49.6,19.2"
|
||
fill="#fff"
|
||
/>
|
||
</svg>
|
||
</span>
|
||
<div class="store-info">
|
||
<div class="store-info-name">
|
||
Australia Store
|
||
<span class="store-badge-active">Live</span>
|
||
</div>
|
||
<div class="store-info-desc">
|
||
Enterprise networking equipment · Ships Australia-wide
|
||
</div>
|
||
</div>
|
||
<span class="store-arrow">→</span>
|
||
</a>
|
||
<a data-store="us" class="store-option store-option--active">
|
||
<span class="store-flag">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 60 30"
|
||
width="52"
|
||
height="28"
|
||
>
|
||
<rect width="60" height="30" fill="#B22234" />
|
||
<rect y="2.31" width="60" height="2.31" fill="#fff" />
|
||
<rect y="6.92" width="60" height="2.31" fill="#fff" />
|
||
<rect y="11.54" width="60" height="2.31" fill="#fff" />
|
||
<rect y="16.15" width="60" height="2.31" fill="#fff" />
|
||
<rect y="20.77" width="60" height="2.31" fill="#fff" />
|
||
<rect y="25.38" width="60" height="2.31" fill="#fff" />
|
||
<rect width="24" height="16.15" fill="#3C3B6E" />
|
||
<g fill="#fff">
|
||
<circle cx="2.5" cy="1.6" r="1.1" />
|
||
<circle cx="6.5" cy="1.6" r="1.1" />
|
||
<circle cx="10.5" cy="1.6" r="1.1" />
|
||
<circle cx="14.5" cy="1.6" r="1.1" />
|
||
<circle cx="18.5" cy="1.6" r="1.1" />
|
||
<circle cx="22.5" cy="1.6" r="1.1" />
|
||
<circle cx="4.5" cy="4.6" r="1.1" />
|
||
<circle cx="8.5" cy="4.6" r="1.1" />
|
||
<circle cx="12.5" cy="4.6" r="1.1" />
|
||
<circle cx="16.5" cy="4.6" r="1.1" />
|
||
<circle cx="20.5" cy="4.6" r="1.1" />
|
||
<circle cx="2.5" cy="7.6" r="1.1" />
|
||
<circle cx="6.5" cy="7.6" r="1.1" />
|
||
<circle cx="10.5" cy="7.6" r="1.1" />
|
||
<circle cx="14.5" cy="7.6" r="1.1" />
|
||
<circle cx="18.5" cy="7.6" r="1.1" />
|
||
<circle cx="22.5" cy="7.6" r="1.1" />
|
||
<circle cx="4.5" cy="10.6" r="1.1" />
|
||
<circle cx="8.5" cy="10.6" r="1.1" />
|
||
<circle cx="12.5" cy="10.6" r="1.1" />
|
||
<circle cx="16.5" cy="10.6" r="1.1" />
|
||
<circle cx="20.5" cy="10.6" r="1.1" />
|
||
<circle cx="2.5" cy="13.6" r="1.1" />
|
||
<circle cx="6.5" cy="13.6" r="1.1" />
|
||
<circle cx="10.5" cy="13.6" r="1.1" />
|
||
<circle cx="14.5" cy="13.6" r="1.1" />
|
||
<circle cx="18.5" cy="13.6" r="1.1" />
|
||
<circle cx="22.5" cy="13.6" r="1.1" />
|
||
</g>
|
||
</svg>
|
||
</span>
|
||
<div class="store-info">
|
||
<div class="store-info-name">
|
||
U.S.A Store
|
||
<span class="store-badge-active">Live</span>
|
||
</div>
|
||
<div class="store-info-desc">
|
||
Enterprise networking equipment · North American distribution
|
||
hub
|
||
</div>
|
||
</div>
|
||
<span class="store-arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="page-footer" role="contentinfo"></footer>
|
||
<script src="assets/js/footer.js" defer></script>
|
||
<script src="assets/js/chat.js" defer></script>
|
||
</body>
|
||
</html>
|