tailwind v4 update
This commit is contained in:
Kismet Hasanaj
+197
-237
@@ -3,255 +3,215 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Novarix Networks | Agile Connectivity, Managed Services, and Transit</title>
|
||||
<title>Novarix Networks | ISP, MSP and Transit Provider</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Novarix Networks delivers agile connectivity, managed infrastructure, and transit services for businesses, operators, and demanding environments."
|
||||
content="Novarix Networks provides agile business connectivity, managed network services and transit for organisations that need practical engineering and dependable infrastructure."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Novarix Networks, ISP, MSP, transit provider, managed networking, business connectivity, network infrastructure"
|
||||
content="Novarix Networks, ISP, MSP, transit provider, business internet, managed network services, IP transit"
|
||||
/>
|
||||
<meta name="theme-color" content="#04111f" />
|
||||
<meta name="theme-color" content="#071014" />
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon8.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/favicon/favicon9.png" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#top" aria-label="Novarix Networks home">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
</a>
|
||||
<button
|
||||
class="nav-toggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="primary-nav"
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<nav class="site-nav" id="primary-nav">
|
||||
<a href="#services">Services</a>
|
||||
<a href="#approach">Approach</a>
|
||||
<a href="#infrastructure">Infrastructure</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="hero">
|
||||
<div class="hero-copy reveal">
|
||||
<p class="eyebrow">Connectivity without the drag</p>
|
||||
<h1>Network infrastructure built to move as fast as the environment around it.</h1>
|
||||
<p class="hero-text">
|
||||
Novarix Networks is being shaped to serve as an agile ISP, MSP, and
|
||||
transit provider for organisations that need dependable connectivity,
|
||||
practical engineering, and infrastructure that can keep evolving.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="#contact">Start the conversation</a>
|
||||
<a class="button button-secondary" href="#services">Explore services</a>
|
||||
</div>
|
||||
<ul class="hero-points">
|
||||
<li>Business connectivity and routed access</li>
|
||||
<li>Managed network and edge services</li>
|
||||
<li>Transit, interconnect, and custom builds</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual reveal">
|
||||
<div class="hero-orbit">
|
||||
<div class="signal-grid"></div>
|
||||
<img
|
||||
class="animated-mark"
|
||||
src="/assets/logo/animated_logo_intro.svg"
|
||||
alt="Animated Novarix Networks logo"
|
||||
/>
|
||||
<div class="status-card status-card-left">
|
||||
<span class="status-kicker">Positioning</span>
|
||||
<strong>ISP / MSP / Transit</strong>
|
||||
<p>Built for flexible projects, modern routing, and growth-ready delivery.</p>
|
||||
</div>
|
||||
<div class="status-card status-card-right">
|
||||
<span class="status-kicker">Operating model</span>
|
||||
<strong>Lean, technical, responsive</strong>
|
||||
<p>A brand direction designed to feel more engineering-led than corporate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-strip reveal">
|
||||
<div>
|
||||
<span>For businesses</span>
|
||||
<p>Connectivity and managed networking designed around uptime, reach, and clarity.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For operators</span>
|
||||
<p>Transit and interconnect conversations grounded in routing, performance, and fit.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For projects</span>
|
||||
<p>Flexible enough for bespoke deployments, migrations, and edge-focused solutions.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="services">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Services</p>
|
||||
<h2>Three service pillars, one consistent operating mindset.</h2>
|
||||
<p>
|
||||
The first version of the site should make the offer easy to understand at a glance.
|
||||
This layout keeps the positioning clear while leaving room to deepen each service page later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">01</span>
|
||||
<h3>ISP</h3>
|
||||
<p>
|
||||
Business internet, routed connectivity, and infrastructure built for organisations
|
||||
that need more than a generic off-the-shelf link.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Dedicated access</li>
|
||||
<li>Static addressing</li>
|
||||
<li>Custom network design</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">02</span>
|
||||
<h3>MSP</h3>
|
||||
<p>
|
||||
Managed network services for teams that want stronger visibility, better change
|
||||
control, and a partner that can operate close to the infrastructure.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Managed edge and routing</li>
|
||||
<li>Operational support</li>
|
||||
<li>Network evolution planning</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">03</span>
|
||||
<h3>Transit</h3>
|
||||
<p>
|
||||
Transit and interconnect positioning for carriers, platforms, and demanding environments
|
||||
that care about path quality, flexibility, and engineering credibility.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IP transit</li>
|
||||
<li>Peering and interconnect</li>
|
||||
<li>Scalable routing posture</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-split" id="approach">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Approach</p>
|
||||
<h2>Designed to feel modern, direct, and technically credible.</h2>
|
||||
</div>
|
||||
<div class="split-panel reveal">
|
||||
<div class="approach-list">
|
||||
<article>
|
||||
<h3>Agile by default</h3>
|
||||
<p>
|
||||
The tone and structure lean into speed, clarity, and practical execution rather than
|
||||
generic telecom language.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Engineering-led presentation</h3>
|
||||
<p>
|
||||
Visual direction is based on the geometry and colour depth of your logo, helping the
|
||||
brand feel network-native without looking dated.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Launch small, scale cleanly</h3>
|
||||
<p>
|
||||
This base site is intentionally static and fast so you can get online quickly, then add
|
||||
service detail, portals, status pages, and forms as the company grows.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="approach-panel">
|
||||
<div class="approach-graphic">
|
||||
<span class="pulse pulse-one"></span>
|
||||
<span class="pulse pulse-two"></span>
|
||||
<span class="pulse pulse-three"></span>
|
||||
<div class="approach-core">
|
||||
<strong>Novarix</strong>
|
||||
<span>Networks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="infrastructure">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Deployment</p>
|
||||
<h2>Built to drop straight into your Proxmox and NPM workflow.</h2>
|
||||
</div>
|
||||
<div class="deployment-grid">
|
||||
<article class="deployment-card reveal">
|
||||
<h3>1. Host the site privately</h3>
|
||||
<p>
|
||||
Run Nginx on a private VM or container in Proxmox and serve this static site locally on your LAN.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>2. Publish through NPM</h3>
|
||||
<p>
|
||||
Add a proxy host in Nginx Proxy Manager pointing the public domain to the private web server.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>3. Add SSL and redirects</h3>
|
||||
<p>
|
||||
Let NPM issue the certificate, force HTTPS, and redirect every secondary domain to the canonical one.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>4. Expand later</h3>
|
||||
<p>
|
||||
Keep the website separate from future customer portals, looking glass tools, monitoring pages, or APIs.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-section reveal" id="contact">
|
||||
<div class="cta-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Next step</p>
|
||||
<h2>Launch the brand, then sharpen the details.</h2>
|
||||
<p>
|
||||
This base design is ready for real content, domain decisions, and production hosting.
|
||||
Once you choose your final contact route, we can wire in live enquiry handling, deeper service pages,
|
||||
and any customer-facing systems you want to expose later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-actions">
|
||||
<a class="button button-primary" href="mailto:contact@novarixnet.com">Use placeholder contact</a>
|
||||
<a class="button button-secondary" href="/assets/logo/novarix_networks-coloured.svg">View brand asset</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<header class="site-header">
|
||||
<a class="brand-link" href="#top" aria-label="Novarix Networks home">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
<p>Agile connectivity, managed services, and transit positioning for modern networks.</p>
|
||||
<small>Base website concept prepared for private hosting behind Nginx Proxy Manager.</small>
|
||||
</footer>
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
class="nav-toggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="primary-nav"
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<nav class="site-nav" id="primary-nav" aria-label="Primary navigation">
|
||||
<a href="#services">Services</a>
|
||||
<a href="#network">Network</a>
|
||||
<a href="#customers">Customers</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<!-- Edit the hero wording here. Keep the headline short and direct. -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<img src="/assets/logo/animated_logo_intro.svg" alt="" />
|
||||
</div>
|
||||
<div class="hero-content reveal">
|
||||
<p class="eyebrow">Independent network operator in buildout</p>
|
||||
<h1>Novarix Networks</h1>
|
||||
<p class="hero-lede">
|
||||
Agile ISP, MSP and transit services for businesses, operators and projects that need
|
||||
networking handled with pace, clarity and engineering discipline.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button-primary" href="#contact">Discuss connectivity</a>
|
||||
<a class="button-secondary" href="#services">View services</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-status reveal">
|
||||
<div>
|
||||
<span>Focus</span>
|
||||
<strong>ISP / MSP / Transit</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Built for</span>
|
||||
<strong>Fast-moving network requirements</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Primary domain</span>
|
||||
<strong>novarixnet.com</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="intro-band reveal" aria-label="Company introduction">
|
||||
<p>
|
||||
Novarix Networks is being built for organisations that want a networking partner with a
|
||||
direct technical conversation, a practical operating model and the flexibility to shape
|
||||
connectivity around the real environment.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Service cards: edit titles, descriptions and bullets as your offer becomes more specific. -->
|
||||
<section class="content-section" id="services">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Services</p>
|
||||
<h2>Connectivity, managed networking and transit under one engineering-led brand.</h2>
|
||||
</div>
|
||||
<div class="service-grid">
|
||||
<article class="service-card reveal">
|
||||
<span class="service-number">01</span>
|
||||
<h3>Business Connectivity</h3>
|
||||
<p>
|
||||
Internet access and routed connectivity for businesses that need static addressing,
|
||||
clear support routes and a provider able to work close to the network.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Business internet access</li>
|
||||
<li>Static IP addressing</li>
|
||||
<li>Custom routed handoff options</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="service-number">02</span>
|
||||
<h3>Managed Network Services</h3>
|
||||
<p>
|
||||
Managed edge, routing and operational support for teams that want reliable network
|
||||
ownership without carrying every change, incident and upgrade alone.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Managed edge infrastructure</li>
|
||||
<li>Change and migration support</li>
|
||||
<li>Network health and visibility</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="service-number">03</span>
|
||||
<h3>Transit and Interconnect</h3>
|
||||
<p>
|
||||
Transit-focused services for operators, platforms and technical environments that care
|
||||
about routing posture, interconnection options and scalable delivery.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IP transit planning</li>
|
||||
<li>Peering and interconnect readiness</li>
|
||||
<li>Carrier and operator engagement</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="network-section" id="network">
|
||||
<div class="network-copy reveal">
|
||||
<p class="eyebrow">Operating model</p>
|
||||
<h2>Built to stay sharp as networking conditions change.</h2>
|
||||
<p>
|
||||
The Novarix site should feel like the company it represents: direct, technically capable
|
||||
and quick to adapt. The layout keeps the offer visible while leaving room for future pages
|
||||
such as looking glass tools, network status, peering policy and customer portals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="network-panel reveal">
|
||||
<div class="network-row">
|
||||
<span>01</span>
|
||||
<div>
|
||||
<h3>Lean delivery</h3>
|
||||
<p>Shorter paths from requirement to answer, with practical engineering at the centre.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-row">
|
||||
<span>02</span>
|
||||
<div>
|
||||
<h3>Clear ownership</h3>
|
||||
<p>Service boundaries, routing decisions and support expectations explained plainly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="network-row">
|
||||
<span>03</span>
|
||||
<div>
|
||||
<h3>Room to grow</h3>
|
||||
<p>A static marketing site today, with clean paths for portals and network tools later.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section" id="customers">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Who it serves</p>
|
||||
<h2>A clearer first impression for the customers you want to attract.</h2>
|
||||
</div>
|
||||
<div class="customer-grid">
|
||||
<article class="customer-card reveal">
|
||||
<h3>Businesses</h3>
|
||||
<p>Connectivity that can be discussed with someone who understands the technical detail.</p>
|
||||
</article>
|
||||
<article class="customer-card reveal">
|
||||
<h3>IT teams</h3>
|
||||
<p>Managed network support for teams that need capacity without losing visibility.</p>
|
||||
</article>
|
||||
<article class="customer-card reveal">
|
||||
<h3>Operators</h3>
|
||||
<p>Transit and interconnect conversations that start from routing reality, not sales theatre.</p>
|
||||
</article>
|
||||
<article class="customer-card reveal">
|
||||
<h3>Projects</h3>
|
||||
<p>Bespoke networking support for migrations, edge deployments and unusual requirements.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact details: replace the email and wording when your public inbox is final. -->
|
||||
<section class="contact-section reveal" id="contact">
|
||||
<div>
|
||||
<p class="eyebrow">Start here</p>
|
||||
<h2>Bring us the network problem. We will help shape the route forward.</h2>
|
||||
<p>
|
||||
This contact point is ready to be replaced with your production inbox, quote form or CRM
|
||||
endpoint when you decide how you want enquiries handled.
|
||||
</p>
|
||||
</div>
|
||||
<div class="contact-actions">
|
||||
<a class="button-primary" href="mailto:contact@novarixnet.com">contact@novarixnet.com</a>
|
||||
<a class="button-secondary" href="https://novarixnet.com">novarixnet.com</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
<p>ISP, MSP and transit services for modern network environments.</p>
|
||||
</footer>
|
||||
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user