prology-landingpage/index.html

1193 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<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 new & used enterprise IT, server and network hardware supplier. Source Cisco, HP and other hard-to-find networking equipment across Australia and the United States. 15+ years experience, 100k+ units in stock."
/>
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://prology.net/" />
<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/" />
<meta
property="og:title"
content="Prology New & Used Enterprise IT, Server and Network Hardware Supplier"
/>
<meta
property="og:description"
content="Source Cisco, HP and hard-to-find enterprise network hardware across Australia and the United States. 15+ years experience, 100k+ units in stock."
/>
<meta property="og:image" content="./assets/favicon.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="Source Cisco, HP and hard-to-find enterprise network hardware across Australia and the United States."
/>
<meta name="twitter:image" content="./assets/favicon.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 rel="alternate" hreflang="x-default" href="https://prology.net/" />
<link rel="alternate" hreflang="en-us" href="https://prology.net/us/" />
<link rel="alternate" hreflang="en-au" href="https://prology.net/au/" />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<!-- JSON-LD: Organization -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Prology",
"legalName": "Prology Pty Ltd",
"url": "https://prology.net/",
"logo": "https://prology.net/assets/Prology_logo.png",
"description": "Enterprise network infrastructure brokerage sourcing Cisco, HP and other hard-to-find networking hardware across Australia and the United States.",
"sameAs": [
"https://www.facebook.com/prology.net/",
"https://www.ebay.com.au/str/prologyptyltd",
"https://www.youtube.com/@PrologyPtyLtd"
],
"address": [
{
"@type": "PostalAddress",
"streetAddress": "Unit 8/4A Bachell Ave",
"addressLocality": "Lidcombe",
"addressRegion": "NSW",
"postalCode": "2141",
"addressCountry": "AU"
},
{
"@type": "PostalAddress",
"streetAddress": "17150 Newhope St Ste 308",
"addressLocality": "Fountain Valley",
"addressRegion": "CA",
"postalCode": "92708",
"addressCountry": "US"
}
],
"contactPoint": [
{
"@type": "ContactPoint",
"telephone": "+61-2-8061-6886",
"contactType": "sales",
"areaServed": "AU",
"availableLanguage": "English",
"email": "sales@prology.net"
},
{
"@type": "ContactPoint",
"telephone": "+1-4689-3350",
"contactType": "sales",
"areaServed": "US",
"availableLanguage": "English",
"email": "sales@prology.net"
}
]
}
</script>
</head>
<body>
<!-- ============ NAVIGATION ============ -->
<div class="scroll-indicator">
<div class="mouse"></div>
<p>Scroll / Space</p>
</div>
<!-- ============ NAVIGATION ============ -->
<nav class="navbar">
<div class="nav-content">
<a href="#" class="nav-brand">
<img src="assets/Prology_logo.png" alt="Prology.net" />
</a>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Categories</a></li>
<li><a href="#quality">Why Choose Us</a></li>
<li><a href="#who-we-serve">Who We Serve</a></li>
<li><a href="#institutional">Gov & Corp</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="about-us.html">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>
<!-- ============ HERO & DASHBOARD ============ -->
<section class="section hero" id="home">
<div class="container">
<h1 class="sr-only">
Enterprise Network Hardware Brokerage — Cisco, HP & Hard-to-Find IT
Equipment
</h1>
<div class="hero-animation-wrapper">
<div class="switch-panel-scene">
<div class="server-only-focus">
<!-- UCS 5108 BLADE CHASSIS -->
<div class="blade-chassis" id="server-unit">
<!-- Left Rack Ear -->
<div class="bc-ear left">
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
</div>
<!-- Main Chassis Body -->
<div class="bc-body">
<!-- Top: Blade Slots Area -->
<div class="bc-blades-section">
<!-- Management Panel (left strip) -->
<div class="bc-mgmt-panel">
<div class="bc-logo">PROLOGY</div>
<div class="bc-model">BLADE</div>
<div class="bc-sys-leds">
<div class="bc-led-btn">
<div class="bc-led power"></div>
</div>
<div class="bc-led-btn">
<div class="bc-led health"></div>
</div>
<div class="bc-led-btn square">
<div class="bc-led uid"></div>
</div>
</div>
</div>
<!-- 8 Blade Slots -->
<div class="bc-blade-row">
<div class="bc-blade d-slot-1">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">1</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-2">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">2</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-3">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">3</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-4">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">4</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-5">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">5</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-6">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">6</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-7">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">7</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
<div class="bc-blade d-slot-8">
<div class="blade-faceplate">
<div class="blade-handle"></div>
<div class="blade-vents"></div>
<div class="blade-label">8</div>
</div>
<div class="blade-led-strip">
<div class="c-drive-led g"></div>
<div class="c-drive-led b"></div>
</div>
</div>
</div>
</div>
<!-- Bottom: Power Supply Bays -->
<div class="bc-psu-section">
<div class="bc-psu">
<div class="psu-handle"></div>
<div class="psu-label">PSU 1</div>
<div class="psu-led"></div>
</div>
<div class="bc-psu">
<div class="psu-handle"></div>
<div class="psu-label">PSU 2</div>
<div class="psu-led"></div>
</div>
<div class="bc-psu">
<div class="psu-handle"></div>
<div class="psu-label">PSU 3</div>
<div class="psu-led"></div>
</div>
<div class="bc-psu">
<div class="psu-handle"></div>
<div class="psu-label">PSU 4</div>
<div class="psu-led"></div>
</div>
</div>
</div>
<!-- Right Rack Ear -->
<div class="bc-ear right">
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
<div class="bc-screw"></div>
</div>
</div>
</div>
</div>
<!-- Title overlay for JS-driven Typewriter Sequence -->
<div class="hero-text-overlay">
<div class="hero-animation-sequence">
<p class="hero-text-animated" id="typewriter-title"></p>
</div>
</div>
</div>
<!-- eBay banner: shown after typewriter, full container width -->
<div id="hero-ebay-integrated" class="ebay-banner-float">
<a href="https://www.ebay.com.au/str/prologyit" target="_blank">
<img
src="assets/Banner_Ebay_Final_news-min.png"
alt="Prology Store"
/>
</a>
</div>
<div class="hero-search-container reveal">
<!-- Tabs for switching modes -->
<div class="search-tabs">
<button class="search-tab active" onclick="switchTab('buy')">
<span>Buy Network Hardwares</span>
</button>
<button class="search-tab" onclick="switchTab('sell')">
<span>Sell To Us</span>
</button>
</div>
<!-- SOURCE FORM -->
<div id="buy-section">
<form
class="hero-search-form"
action="/catalogsearch/result/"
method="GET"
>
<div class="search-icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
<input
type="text"
id="hero-input"
name="q"
placeholder="Search part numbers (e.g. WS-C3850-48P-S)..."
required
/>
<button type="submit"><span>Search</span></button>
</form>
</div>
<!-- SELL FORM (Capsule -> Modal Workflow) -->
<div id="sell-section" style="display: none">
<div class="hero-search-form sell-capsule-static">
<div class="search-icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<input
type="email"
id="sell-email-init"
placeholder="Input your email address to start..."
/>
<button type="button" onclick="goToSellStep2()">
<span>Next</span>
</button>
</div>
</div>
</div>
<!-- SELL MODAL WINDOW (Valuation) -->
<div class="dash-grid reveal">
<div class="dash-item">
<span class="val">15+</span>
<span class="lab">Years of Experience</span>
</div>
<div class="dash-item">
<span class="val">45+</span>
<span class="lab">Countries Served</span>
</div>
<div class="dash-item">
<span class="val">100k+</span>
<span class="lab">Units Stocked</span>
</div>
<div class="dash-item">
<span class="val">USA & AUS</span>
<span class="lab">Warehouses</span>
</div>
</div>
</div>
</section>
<!-- ============ PRODUCT CATEGORIES (HORIZONTAL LAYOUT) ============ -->
<section class="section" id="services">
<div class="container">
<div
class="section-header reveal"
style="text-align: center; margin-bottom: 40px"
>
<span class="l-badge">Inventory Spectrum</span>
<h2
style="
font-size: clamp(2.5rem, 5vw, 3.5rem);
letter-spacing: -0.04em;
margin-bottom: 20px;
"
>
Product Categories
</h2>
<p style="max-width: 800px; margin: 0 auto">
Explore our comprehensive spectrum of enterprise networking
infrastructure from the world's leading manufacturers.
</p>
</div>
<div class="services-mini-grid reveal">
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12.55a11 11 0 0 1 14.08 0" />
<path d="M1.42 9a16 16 0 0 1 21.16 0" />
<path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
<circle cx="12" cy="20" r="1" /></svg
></span>
<h4>Routers</h4>
<p>
Edge, Core, and Distribution backbone hardware for seamless
connectivity.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M18 3v4" />
<path d="M6 3v4" />
<rect x="2" y="7" width="20" height="14" rx="2" />
<path d="M8 12h8" />
<path d="M8 16h4" /></svg
></span>
<h4>Switches</h4>
<p>
Managed Layer 2/3 switches with VLAN and high-speed fiber
capacity.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M5 12.55a11 11 0 0 1 14.08 0" />
<path d="M1.42 9a16 16 0 0 1 21.16 0" />
<path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
<circle cx="12" cy="20" r="1" /></svg
></span>
<h4>Wireless Access</h4>
<p>
High-density Wi-Fi Access Points (WAPs) with centralized
management.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg
></span>
<h4>Security Appliances</h4>
<p>
Next-gen firewalls, VPN gateways, and intrusion prevention
systems.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="12" y1="3" x2="12" y2="21" />
<path d="M17 7H7" />
<path d="M6 13l-3 5h6l-3-5z" />
<path d="M18 13l-3 5h6l-3-5z" /></svg
></span>
<h4>Load Balancers</h4>
<p>
Traffic distribution solutions to maximize performance and
reliability.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="2" y1="12" x2="22" y2="12" />
<path
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
/></svg
></span>
<h4>WAN Access</h4>
<p>
Modems and WAN devices for stable fiber and ethernet ISP
connectivity.
</p>
</div>
<div class="mini-card">
<span class="icon"
><svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
/></svg
></span>
<h4>Network Mgmt</h4>
<p>
Centralized controllers for configuring and monitoring
infrastructure.
</p>
</div>
<!-- SHOP CTA CARD -->
<div class="mini-card cta-card">
<h4>Ready to Procure?</h4>
<p>Access our real-time inventory and competitive trade pricing.</p>
<span class="btn-shop-mini" onclick="openStoreModal()"
>View Shop</span
>
</div>
</div>
</div>
</section>
<!-- ============ SECTION: WHY CHOOSE US ============ -->
<section class="section" id="quality">
<div class="container">
<div
class="section-header reveal"
style="text-align: center; margin-bottom: 40px"
>
<span class="l-badge">Our Competitive Edge</span>
<h2>Why Choose Prology?</h2>
<p>
Reliable sourcing, fast logistics, and competitive pricing — for
enterprises across Australia and the United States.
</p>
</div>
<div class="why-choose-grid reveal">
<!-- 1 -->
<div class="why-card">
<div class="q-icon-large">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="7" width="20" height="14" rx="2" />
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
<line x1="12" y1="12" x2="12.01" y2="12" />
</svg>
</div>
<h3>Dual Warehouse: AU & US</h3>
<p>Stock available in both Australia and California.</p>
</div>
<!-- 2 -->
<div class="why-card">
<div class="q-icon-large">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
</div>
<h3>Strong Sourcing Network</h3>
<p>We can source hard-to-find and discontinued items.</p>
</div>
<!-- 3 -->
<div class="why-card">
<div class="q-icon-large">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<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>Faster, Smarter Logistics</h3>
<p>Optimised shipping between AU & US to reduce lead time.</p>
</div>
<!-- 6 -->
<div class="why-card">
<div class="q-icon-large">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
<polyline points="16 7 22 7 22 13" />
</svg>
</div>
<h3>Flexible for Business Orders</h3>
<p>Bulk pricing, custom sourcing, ongoing supply support.</p>
</div>
</div>
</div>
</section>
<!-- ============ SECTION: WHO WE SERVE ============ -->
<section class="section" id="who-we-serve">
<div class="container">
<div
class="section-header reveal"
style="text-align: center; margin-bottom: 40px"
>
<h2 style="color: white">Built for Every Scale</h2>
<p style="color: #94a3b8">
From simple setups to large-scale supply — flexible to match your
needs.
</p>
</div>
<div class="serve-grid reveal">
<div class="serve-item">
<div class="serve-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"
/>
<path
d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"
/>
<path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
<path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
</svg>
</div>
<h4>Getting Started</h4>
<p>Reliable hardware, fast delivery, straightforward purchasing.</p>
</div>
<div class="serve-item">
<div class="serve-icon">
<svg
width="28"
height="28"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="3" />
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
/>
</svg>
</div>
<h4>Running Projects</h4>
<p>
Fast sourcing and access to wider inventory when local stock is
limited.
</p>
</div>
<div class="serve-item">
<div class="serve-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
<polyline points="16 7 22 7 22 13" />
</svg>
</div>
<h4>Growing Operations</h4>
<p>
Ongoing supply support for upgrades, expansions, and maintenance.
</p>
</div>
<div class="serve-item">
<div class="serve-icon">
<svg
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.8"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="2" y="7" width="20" height="14" rx="2" />
<path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" />
<line x1="12" y1="12" x2="12.01" y2="12" />
</svg>
</div>
<h4>Large-Scale Procurement</h4>
<p>
Support for bulk orders, complex requirements, and consistent
supply.
</p>
</div>
</div>
<div
class="cta-actions reveal"
style="
margin-top: 50px;
display: flex;
justify-content: center;
gap: 20px;
"
>
<button class="btn-primary" onclick="openQuoteModal()">
<span>Request a Quote</span>
</button>
<button class="btn-secondary" onclick="openStoreModal()">
<span>Shop Now</span>
</button>
</div>
</div>
</section>
<!-- ============ SECTION: INSTITUTIONAL SUPPORT ============ -->
<section
class="section"
id="institutional"
style="position: relative; overflow: hidden; background: white !important"
>
<div class="container" style="position: relative; z-index: 2">
<div
class="po-banner reveal"
style="
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 60px 40px;
"
>
<div class="po-content-large">
<div class="institutional-central-header">
<div class="po-titles-central">
<h2>Government & Corporate Orders</h2>
<p style="max-width: 800px; margin: 0 auto">
Supporting purchase orders and specialized procurement
workflows for public and private organizations.
</p>
</div>
</div>
<div class="po-badges-central">
<div class="badge-item-large">Purchase Orders Accepted</div>
<div class="badge-item-large">Procurement Support</div>
<div class="badge-item-large">Flexible Payment Options</div>
</div>
<div style="margin-top: 48px">
<button class="btn-primary" onclick="openEnquireModal()">
<span>Enquire Now</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- ============ FINAL CTA ============ -->
<section
class="section"
id="contact"
style="
background: #0b1120;
color: white;
min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
"
>
<div
class="container"
style="display: flex; align-items: center; justify-content: center"
>
<div class="cta-grid reveal">
<div class="cta-box">
<h2 style="color: white">Source IT Hardware</h2>
<p
style="
color: #94a3b8;
font-size: 1.1rem;
max-width: 400px;
margin: 0 auto 30px auto;
"
>
Procure authentic Cisco, HP &amp; Toshiba equipment. Delivery
worldwide.
</p>
<button class="btn-primary" onclick="openStoreModal()">
<span>View Products</span>
</button>
</div>
<div class="cta-box sell">
<h2 style="color: white">Sell Us Your Assets</h2>
<p
style="
color: #94a3b8;
font-size: 1.1rem;
max-width: 400px;
margin: 0 auto 30px auto;
"
>
Get competitive buy-back offers for your decommissioned network
gear.
</p>
<button class="btn-success" onclick="openValuationModal()">
<span>Get Valuation</span>
</button>
</div>
</div>
</div>
</section>
<script src="assets/js/config.js" defer></script>
<script src="assets/js/hero.js" defer></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>
<script src="assets/js/modals.js" defer></script>
<!-- ============ 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">
<!-- AU Store -->
<a data-store="au" class="store-option store-option--active">
<span class="store-flag">
<!-- Australian 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" />
<!-- Union Jack diagonals white -->
<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"
/>
<!-- Union Jack diagonals red -->
<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"
/>
<!-- Union Jack cross white -->
<rect x="12" y="0" width="6" height="15" fill="#fff" />
<rect x="0" y="6" width="30" height="6" fill="#fff" />
<!-- Union Jack cross red -->
<rect x="13.5" y="0" width="3" height="15" fill="#CC2529" />
<rect x="0" y="7.5" width="30" height="3" fill="#CC2529" />
<!-- Commonwealth Star -->
<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"
/>
<!-- Southern Cross: Alpha Crucis -->
<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"
/>
<!-- Beta Crucis -->
<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"
/>
<!-- Gamma Crucis -->
<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"
/>
<!-- Delta Crucis -->
<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"
/>
<!-- Epsilon Crucis (small) -->
<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>
<!-- US Store -->
<a data-store="us" class="store-option store-option--active">
<span class="store-flag">
<!-- US Flag -->
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60 30"
width="52"
height="28"
>
<!-- Red base -->
<rect width="60" height="30" fill="#B22234" />
<!-- White stripes -->
<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" />
<!-- Blue canton -->
<rect width="24" height="16.15" fill="#3C3B6E" />
<!-- Stars as white circles (5 rows alternating 6/5) -->
<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>
<!-- Sentinel: snap point for Magento footer -->
<div
id="snap-footer-sentinel"
style="
scroll-snap-align: start;
scroll-snap-stop: normal;
height: 0;
width: 100%;
"
></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>