Skip to content

Instantly share code, notes, and snippets.

@davekennewell

davekennewell/hydrata-landing-v5-modern-saas.html

Created February 21, 2026 06:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davekennewell/ab87e1212892984b6008ac03e06982ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davekennewell/ab87e1212892984b6008ac03e06982ee to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hydrata-landing-v5-modern-saas.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hydrata - Flood Modeling Without the Complexity</title>
<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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--white: #ffffff;
--bg: #ffffff;
--bg-subtle: #f9fafb;
--bg-muted: #f3f4f6;
--border: #e5e7eb;
--border-light: #f0f0f0;
--text-primary: #111827;
--text-secondary: #4b5563;
--text-tertiary: #6b7280;
--text-muted: #9ca3af;
--primary: #3b82f6;
--primary-hover: #2563eb;
--primary-light: #eff6ff;
--primary-lighter: #dbeafe;
--gradient-start: #3b82f6;
--gradient-end: #06b6d4;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--radius: 12px;
--radius-lg: 16px;
--radius-full: 9999px;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--text-primary);
background: var(--bg);
line-height: 1.6;
overflow-x: hidden;
}
/* ─── NAV ─── */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-light);
}
.nav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-logo {
font-size: 20px;
font-weight: 800;
color: var(--text-primary);
text-decoration: none;
letter-spacing: -0.5px;
}
.nav-logo span {
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
}
.nav-links a {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
text-decoration: none;
transition: color 0.15s;
}
.nav-links a:hover {
color: var(--text-primary);
}
.nav-cta {
font-size: 14px;
font-weight: 600;
color: var(--white) !important;
background: var(--text-primary);
padding: 8px 20px;
border-radius: var(--radius-full);
transition: background 0.15s, transform 0.15s;
}
.nav-cta:hover {
background: #1f2937 !important;
transform: translateY(-1px);
}
.nav-mobile-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 8px;
}
.nav-mobile-toggle svg {
display: block;
}
/* ─── HERO ─── */
.hero {
padding: 100px 24px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px 6px 8px;
background: var(--primary-light);
border: 1px solid var(--primary-lighter);
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 500;
color: var(--primary);
margin-bottom: 32px;
}
.hero-badge-dot {
width: 8px;
height: 8px;
background: var(--primary);
border-radius: 50%;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.hero h1 {
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -2px;
max-width: 800px;
margin: 0 auto 24px;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: clamp(17px, 2vw, 20px);
color: var(--text-secondary);
max-width: 560px;
margin: 0 auto 40px;
line-height: 1.6;
}
.hero-ctas {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
font-size: 16px;
font-weight: 600;
padding: 14px 28px;
border-radius: var(--radius-full);
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.btn-primary {
background: var(--primary);
color: var(--white);
box-shadow: 0 1px 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(59, 130, 246, 0.15);
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3), 0 8px 24px rgba(59, 130, 246, 0.2);
}
.btn-secondary {
background: var(--white);
color: var(--text-primary);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
background: var(--bg-subtle);
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.btn-arrow {
transition: transform 0.2s;
}
.btn:hover .btn-arrow {
transform: translateX(2px);
}
/* ─── SOCIAL PROOF ─── */
.social-proof {
padding: 40px 24px;
border-top: 1px solid var(--border-light);
border-bottom: 1px solid var(--border-light);
background: var(--bg-subtle);
}
.social-proof-inner {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.social-proof p {
font-size: 14px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 24px;
}
.social-proof-items {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
}
.social-proof-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.social-proof-item .number {
font-size: 28px;
font-weight: 800;
color: var(--text-primary);
letter-spacing: -1px;
}
.social-proof-item .label {
font-size: 13px;
color: var(--text-tertiary);
font-weight: 500;
}
/* ─── FEATURES ─── */
.features {
padding: 100px 24px;
}
.section-header {
text-align: center;
max-width: 640px;
margin: 0 auto 64px;
}
.section-label {
font-size: 13px;
font-weight: 600;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 12px;
}
.section-header h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.15;
margin-bottom: 16px;
}
.section-header p {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.6;
}
.features-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.feature-card {
padding: 32px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--white);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-lighter);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
background: var(--primary-light);
}
.feature-icon svg {
width: 24px;
height: 24px;
stroke: var(--primary);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.feature-card h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.feature-card p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.6;
}
/* ─── HOW IT WORKS ─── */
.how-it-works {
padding: 100px 24px;
background: var(--bg-subtle);
}
.steps {
max-width: 900px;
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
}
.steps::before {
content: '';
position: absolute;
top: 32px;
left: calc(16.66% + 32px);
right: calc(16.66% + 32px);
height: 2px;
background: repeating-linear-gradient(
90deg,
var(--border) 0,
var(--border) 8px,
transparent 8px,
transparent 16px
);
}
.step {
flex: 1;
text-align: center;
position: relative;
z-index: 1;
padding: 0 16px;
}
.step-number {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--primary);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 24px;
font-weight: 800;
color: var(--primary);
box-shadow: var(--shadow);
}
.step h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.step p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ─── OPEN SOURCE ─── */
.open-source {
padding: 100px 24px;
}
.open-source-inner {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.open-source-content .section-label {
text-align: left;
}
.open-source-content h2 {
font-size: clamp(28px, 4vw, 40px);
font-weight: 800;
letter-spacing: -1px;
line-height: 1.15;
margin-bottom: 16px;
}
.open-source-content p {
font-size: 17px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 16px;
}
.open-source-points {
list-style: none;
margin-top: 24px;
display: flex;
flex-direction: column;
gap: 12px;
}
.open-source-points li {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 500;
color: var(--text-secondary);
}
.open-source-points li svg {
width: 20px;
height: 20px;
flex-shrink: 0;
stroke: #10b981;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.code-block {
background: #0f172a;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
}
.code-block-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
background: #1e293b;
border-bottom: 1px solid #334155;
}
.code-block-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.code-block-dot:nth-child(1) { background: #ef4444; }
.code-block-dot:nth-child(2) { background: #f59e0b; }
.code-block-dot:nth-child(3) { background: #22c55e; }
.code-block-title {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: #94a3b8;
margin-left: 8px;
}
.code-block-body {
padding: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
line-height: 1.8;
color: #e2e8f0;
overflow-x: auto;
}
.code-comment {
color: #64748b;
}
.code-keyword {
color: #c084fc;
}
.code-string {
color: #34d399;
}
.code-function {
color: #60a5fa;
}
.code-prompt {
color: #94a3b8;
user-select: none;
}
/* ─── FAQ ─── */
.faq {
padding: 100px 24px;
background: var(--bg-subtle);
}
.faq-list {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--white);
overflow: hidden;
transition: box-shadow 0.2s;
}
.faq-item:hover {
box-shadow: var(--shadow);
}
.faq-item details {
cursor: pointer;
}
.faq-item summary {
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
transition: transform 0.2s;
}
.faq-item details[open] summary::after {
transform: rotate(180deg);
}
.faq-item details[open] summary {
color: var(--primary);
}
.faq-answer {
padding: 0 24px 20px;
font-size: 15px;
color: var(--text-secondary);
line-height: 1.7;
}
/* ─── FINAL CTA ─── */
.final-cta {
padding: 100px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
bottom: -300px;
left: 50%;
transform: translateX(-50%);
width: 1000px;
height: 600px;
background: radial-gradient(ellipse, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.final-cta h2 {
font-size: clamp(32px, 5vw, 48px);
font-weight: 800;
letter-spacing: -1.5px;
line-height: 1.15;
margin-bottom: 16px;
}
.final-cta p {
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 40px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.cta-form {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.cta-input {
flex: 1;
min-width: 240px;
padding: 14px 20px;
border: 1px solid var(--border);
border-radius: var(--radius-full);
font-family: inherit;
font-size: 15px;
color: var(--text-primary);
background: var(--white);
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: var(--shadow-sm);
}
.cta-input::placeholder {
color: var(--text-muted);
}
.cta-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.cta-subtext {
margin-top: 16px;
font-size: 13px;
color: var(--text-muted);
}
/* ─── FOOTER ─── */
.footer {
padding: 48px 24px;
border-top: 1px solid var(--border-light);
background: var(--bg-subtle);
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-brand .nav-logo {
font-size: 18px;
}
.footer-brand p {
font-size: 13px;
color: var(--text-muted);
}
.footer-links {
display: flex;
gap: 32px;
list-style: none;
flex-wrap: wrap;
}
.footer-links a {
font-size: 14px;
color: var(--text-tertiary);
text-decoration: none;
transition: color 0.15s;
}
.footer-links a:hover {
color: var(--text-primary);
}
.footer-bottom {
max-width: 1200px;
margin: 32px auto 0;
padding-top: 24px;
border-top: 1px solid var(--border-light);
text-align: center;
font-size: 13px;
color: var(--text-muted);
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.open-source-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.steps {
flex-direction: column;
align-items: center;
gap: 40px;
}
.steps::before {
top: 32px;
bottom: 32px;
left: 50%;
right: auto;
width: 2px;
height: calc(100% - 64px);
background: repeating-linear-gradient(
180deg,
var(--border) 0,
var(--border) 8px,
transparent 8px,
transparent 16px
);
}
.step {
max-width: 320px;
}
}
@media (max-width: 640px) {
.nav-links {
display: none;
}
.nav-mobile-toggle {
display: block;
}
.nav.mobile-open .nav-links {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: var(--white);
border-bottom: 1px solid var(--border);
padding: 16px 24px 24px;
gap: 16px;
box-shadow: var(--shadow-lg);
}
.hero {
padding: 64px 24px 48px;
}
.hero h1 {
letter-spacing: -1px;
}
.features-grid {
grid-template-columns: 1fr;
}
.social-proof-items {
gap: 32px;
}
.cta-form {
flex-direction: column;
}
.cta-input {
min-width: 100%;
}
.btn {
width: 100%;
justify-content: center;
}
.hero-ctas .btn {
width: auto;
}
.footer-inner {
flex-direction: column;
text-align: center;
}
.footer-links {
justify-content: center;
}
}
</style>
</head>
<body>
<!-- ─── NAV ─── -->
<nav class="nav" id="nav">
<div class="nav-inner">
<a href="/" class="nav-logo"><span>Hydrata</span></a>
<ul class="nav-links">
<li><a href="#features">Features</a></li>
<li><a href="#how-it-works">How It Works</a></li>
<li><a href="#open-source">Open Source</a></li>
<li><a href="/account/signup/" class="nav-cta">Sign Up Free</a></li>
</ul>
<button class="nav-mobile-toggle" onclick="document.getElementById('nav').classList.toggle('mobile-open')" aria-label="Toggle menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round">
<line x1="4" y1="6" x2="20" y2="6"/>
<line x1="4" y1="12" x2="20" y2="12"/>
<line x1="4" y1="18" x2="20" y2="18"/>
</svg>
</button>
</div>
</nav>
<!-- ─── HERO ─── -->
<section class="hero">
<div class="hero-badge">
<span class="hero-badge-dot"></span>
Open source and always free
</div>
<h1>Flood Modeling Without the Complexity</h1>
<p>Run ANUGA simulations in your browser. No installation, no license fees, no limits.</p>
<div class="hero-ctas">
<a href="/account/signup/" class="btn btn-primary">
Start Free
<svg class="btn-arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
<a href="/catalogue/#/?f=map" class="btn btn-secondary">View Demo Maps</a>
</div>
</section>
<!-- ─── SOCIAL PROOF ─── -->
<section class="social-proof">
<div class="social-proof-inner">
<p>Powering water resource management across 3 countries</p>
<div class="social-proof-items">
<div class="social-proof-item">
<span class="number">4</span>
<span class="label">Production Platforms</span>
</div>
<div class="social-proof-item">
<span class="number">29K+</span>
<span class="label">Geospatial Layers</span>
</div>
<div class="social-proof-item">
<span class="number">3</span>
<span class="label">Countries Served</span>
</div>
<div class="social-proof-item">
<span class="number">100%</span>
<span class="label">Open Source</span>
</div>
</div>
</div>
</section>
<!-- ─── FEATURES ─── -->
<section class="features" id="features">
<div class="section-header">
<div class="section-label">Features</div>
<h2>Everything you need for surface water modeling</h2>
<p>Professional-grade hydraulic simulation with the simplicity of a web app. No desktop GIS required.</p>
</div>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<h3>Browser-Based</h3>
<p>No software to install, no dependencies to manage. Open your browser and start modeling in seconds.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
</div>
<h3>ANUGA Engine</h3>
<p>Powered by the peer-reviewed ANUGA finite volume solver. Trusted physics for shallow water equations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><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>Real-Time Collaboration</h3>
<p>Share projects with your team, stakeholders, and the public. Everyone works from the same source of truth.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><path d="M12 1v4"/><path d="M12 19v4"/><path d="M4.93 4.93l2.83 2.83"/><path d="M16.24 16.24l2.83 2.83"/><path d="M1 12h4"/><path d="M19 12h4"/><path d="M4.93 19.07l2.83-2.83"/><path d="M16.24 7.76l2.83-2.83"/></svg>
</div>
<h3>Open Source</h3>
<p>Fully transparent codebase. Inspect the math, contribute improvements, and extend the platform freely.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
</div>
<h3>Publication Ready</h3>
<p>Export simulation results as maps, reports, and data files. Ready for technical review and decision-making.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><circle cx="12" cy="16" r="1"/></svg>
</div>
<h3>Secure</h3>
<p>Role-based access control ensures the right people see the right data. Private projects stay private.</p>
</div>
</div>
</section>
<!-- ─── HOW IT WORKS ─── -->
<section class="how-it-works" id="how-it-works">
<div class="section-header">
<div class="section-label">How It Works</div>
<h2>From terrain data to flood map in three steps</h2>
<p>Hydrata handles the infrastructure so you can focus on the modeling.</p>
</div>
<div class="steps">
<div class="step">
<div class="step-number">1</div>
<h3>Upload Your Data</h3>
<p>Drop in your DEM, boundary conditions, and friction files. Hydrata handles the meshing.</p>
</div>
<div class="step">
<div class="step-number">2</div>
<h3>Configure and Run</h3>
<p>Set your parameters and launch an ANUGA simulation. Cloud compute means no waiting on your machine.</p>
</div>
<div class="step">
<div class="step-number">3</div>
<h3>Visualize and Share</h3>
<p>Explore depth, velocity, and hazard maps interactively. Share results with a link.</p>
</div>
</div>
</section>
<!-- ─── OPEN SOURCE ─── -->
<section class="open-source" id="open-source">
<div class="open-source-inner">
<div class="open-source-content">
<div class="section-label">Open Source</div>
<h2>Open Source, Always Free</h2>
<p>Hydrata is built on ANUGA, the Australian National University's open source hydraulic solver. We believe water modeling should be accessible to everyone, not locked behind expensive licenses.</p>
<p>The code is public, the science is transparent, and the platform is free to use.</p>
<ul class="open-source-points">
<li>
<svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
No license fees, ever
</li>
<li>
<svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
Peer-reviewed, published physics engine
</li>
<li>
<svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
Contribute on GitHub
</li>
<li>
<svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>
Self-host if you need to
</li>
</ul>
</div>
<div class="code-block">
<div class="code-block-header">
<span class="code-block-dot"></span>
<span class="code-block-dot"></span>
<span class="code-block-dot"></span>
<span class="code-block-title">terminal</span>
</div>
<div class="code-block-body">
<div><span class="code-comment"># Install the ANUGA engine locally</span></div>
<div><span class="code-prompt">$ </span><span class="code-keyword">pip install</span> anuga</div>
<div>&nbsp;</div>
<div><span class="code-comment"># Or just use hydrata.com &mdash; no install needed</span></div>
<div><span class="code-prompt">$ </span><span class="code-function">open</span> <span class="code-string">https://hydrata.com</span></div>
<div>&nbsp;</div>
<div><span class="code-comment"># Clone the platform source</span></div>
<div><span class="code-prompt">$ </span><span class="code-keyword">git clone</span> <span class="code-string">github.com/Hydrata/hydrata</span></div>
</div>
</div>
</div>
</section>
<!-- ─── FAQ ─── -->
<section class="faq" id="faq">
<div class="section-header">
<div class="section-label">FAQ</div>
<h2>Frequently asked questions</h2>
<p>Everything you need to know to get started.</p>
</div>
<div class="faq-list">
<div class="faq-item">
<details>
<summary>Is it really free?</summary>
<div class="faq-answer">
Yes. Hydrata is open source and free to use. There are no license fees, no usage limits, and no premium tier hiding essential features. The ANUGA solver at the core is published academic software maintained by the Australian National University, and Hydrata makes it accessible through a web interface at no cost.
</div>
</details>
</div>
<div class="faq-item">
<details>
<summary>What is ANUGA?</summary>
<div class="faq-answer">
ANUGA is an open source finite volume hydrodynamic modeling tool developed by the Australian National University and Geoscience Australia. It solves the shallow water wave equation on an unstructured triangular mesh and is widely used for flood modeling, tsunami simulation, and storm surge analysis. It has been peer-reviewed and published in scientific journals.
</div>
</details>
</div>
<div class="faq-item">
<details>
<summary>Do I need GIS experience?</summary>
<div class="faq-answer">
Basic familiarity with geospatial data (like DEMs and shapefiles) is helpful, but you do not need to be a GIS expert. Hydrata's interface is designed to be more approachable than desktop GIS tools. You upload your data, configure your simulation parameters through forms, and view results on an interactive map. If you have used Google Maps, you can use Hydrata.
</div>
</details>
</div>
<div class="faq-item">
<details>
<summary>Can I run it on my own servers?</summary>
<div class="faq-answer">
Yes. The entire platform is open source and can be self-hosted. The stack is built on GeoNode (Django + GeoServer) with Celery workers for running ANUGA simulations. You will need a PostgreSQL database with PostGIS, a Celery-compatible message broker, and compute capacity for simulations. Full deployment instructions are available in the repository.
</div>
</details>
</div>
</div>
</section>
<!-- ─── FINAL CTA ─── -->
<section class="final-cta">
<h2>Ready to model?</h2>
<p>Join engineers and scientists who are already running flood simulations in the cloud.</p>
<form class="cta-form" action="/account/signup/" method="get">
<input type="email" class="cta-input" placeholder="you@example.com" aria-label="Email address" required>
<button type="submit" class="btn btn-primary">Get Started</button>
</form>
<p class="cta-subtext">Free forever. No credit card required.</p>
</section>
<!-- ─── FOOTER ─── -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-brand">
<a href="/" class="nav-logo"><span>Hydrata</span></a>
<p>Open source surface water modeling</p>
</div>
<ul class="footer-links">
<li><a href="/catalogue/#/?f=map">Catalogue</a></li>
<li><a href="#features">Features</a></li>
<li><a href="https://github.com/Hydrata">GitHub</a></li>
<li><a href="https://anuga.anu.edu.au/">ANUGA</a></li>
<li><a href="/account/signup/">Sign Up</a></li>
</ul>
</div>
<div class="footer-bottom">
&copy; 2026 Hydrata. Open source under MIT License.
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment