1099 lines
41 KiB
HTML
1099 lines
41 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Prology IT | Enterprise Network Infrastructure Brokerage</title>
|
|
<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"
|
|
/>
|
|
</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 IT" />
|
|
</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>
|
|
</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">
|
|
<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>
|
|
<a href="/shop" class="btn-shop-mini">View Shop</a>
|
|
</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">
|
|
<img
|
|
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Coat_of_arms_of_the_Commonwealth_of_Australia.svg/1280px-Coat_of_arms_of_the_Commonwealth_of_Australia.svg.png"
|
|
alt="Coat of arms of the Commonwealth of Australia"
|
|
class="official-seal-large"
|
|
/>
|
|
<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 & 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>
|