// ─── All Page Sections ──────────────────────────────────────────────────────── // ─── Mosaic Tile Background ──────────────────────────────────────────────────── function MosaicTiles() { const cols = 18, rows = 14; const tileSize = 52, gap = 3; const colors = ['#10B981', '#0891B2', '#1D4ED8', '#3B82F6', '#059669', '#0369A1']; const tiles = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { // Distance from top-left corner of the mosaic field const distFromLeft = c / cols; const distFromCenter = Math.sqrt(Math.pow((c - cols * 0.3) / cols, 2) + Math.pow((r - rows * 0.5) / rows, 2)); // Fade: strong on the right, fade to nothing on the left third const baseOpacity = Math.max(0, (distFromLeft - 0.15) * 1.4) * (1 - distFromCenter * 0.8); if (baseOpacity < 0.02) continue; const color = colors[Math.floor((r * cols + c + r * 3 + c * 7) % colors.length)]; const opacity = Math.min(0.55, baseOpacity * (0.2 + Math.random() * 0.35)); const x = c * (tileSize + gap); const y = r * (tileSize + gap); const isSmall = (r + c) % 5 === 0; const sz = isSmall ? tileSize * 0.55 : tileSize; const offset = isSmall ? (tileSize - sz) / 2 : 0; tiles.push({ x: x + offset, y: y + offset, sz, color, opacity, key: `${r}-${c}` }); } } const svgW = cols * (tileSize + gap); const svgH = rows * (tileSize + gap); return (
{tiles.map(t => ( ))}
); } // ─── HERO ───────────────────────────────────────────────────────────────────── function HeroSection() { return (
{/* Radial glows */}
{/* Tessellated mosaic tiles */}
AI & Data Analytics for Oil & Gas

Tessera Reservoir Intelligence,
custom-built for{' '} operators.

AI-native production optimization, reservoir characterization, and decision-ready tools, built with your team and owned by your team.

Book a scoping call See what we build
{/* Trust pills */}
{['AI-native', 'No lock-in', 'Your cloud, your data', 'Subsurface + AI in one team'].map(pill => ( {pill} ))}
); } // ─── PROBLEM ────────────────────────────────────────────────────────────────── function ProblemSection() { const ref1 = useFadeUp(), ref2 = useFadeUp(), ref3 = useFadeUp(), ref4 = useFadeUp(); const cards = [ { icon: , title: 'Paying for answers you don\'t own', body: 'Annual subscriptions to rent interpretations. Seats scale with your team, not your upside. You re-up every cycle and nothing compounds.', }, { icon: , title: 'Data that never becomes a system', body: 'Wells, Production, D&C, G&G, Diagnostics, and Operations data, all live in different silos. One-off dashboards instead of working systems.', }, { icon: , title: 'Models that don\'t move with the basin', body: 'Drainage assumed, not solved. Infill above/below left on the table. Completion design frozen two years ago. The basin moved; your models didn\'t.', }, ]; return (

Where operators lose money and barrels

Fragmented data. One-off models.
Insights that never become action.

{cards.map((c, i) => { const refs = [ref2, ref3, ref4]; return (
{ e.currentTarget.style.boxShadow = '0 8px 32px rgba(8,145,178,0.1)'; e.currentTarget.style.borderColor = 'rgba(8,145,178,0.3)'; }} onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = '#E2E8F0'; }} >
{c.icon}

{c.title}

{c.body}

); })}
{/* Callout strip */}

"The result: you pay a premium for answers you don't own, on data that hasn't been made to work together."

); } // ─── WHAT WE BUILD ──────────────────────────────────────────────────────────── function DataFlowAnimation() { const wrapRef = React.useRef(null); React.useEffect(() => { const wrap = wrapRef.current; if (!wrap) return; const svg = wrap.querySelector('.df-conn-svg'); const routeMap = [ [0, 3], [1, 4], [0, 2], [2, 3], [1, 4], ]; let current = 0; let intervalId = null; function getRight(el) { const w = wrap.getBoundingClientRect(), r = el.getBoundingClientRect(); return { x: r.right - w.left, y: r.top - w.top + r.height / 2 }; } function getLeft(el) { const w = wrap.getBoundingClientRect(), r = el.getBoundingClientRect(); return { x: r.left - w.left, y: r.top - w.top + r.height / 2 }; } function engineEdges() { const eng = wrap.querySelector('.df-engine-box'); const w = wrap.getBoundingClientRect(), r = eng.getBoundingClientRect(); const cy = r.top - w.top + r.height / 2; return { left: { x: r.left - w.left, y: cy }, right: { x: r.right - w.left, y: cy } }; } function curvePath(p1, p2) { const dx = (p2.x - p1.x) * 0.45; return `M${p1.x},${p1.y} C${p1.x+dx},${p1.y} ${p2.x-dx},${p2.y} ${p2.x},${p2.y}`; } function buildLines() { svg.innerHTML = ''; svg.setAttribute('width', wrap.offsetWidth); svg.setAttribute('height', wrap.offsetHeight); const eng = engineEdges(); for (let i = 0; i < 5; i++) { const inEl = wrap.querySelector('#df-in-' + i); const d = curvePath(getRight(inEl), eng.left); const bg = document.createElementNS('http://www.w3.org/2000/svg', 'path'); bg.setAttribute('d', d); bg.setAttribute('class', 'df-conn-line'); svg.appendChild(bg); const an = document.createElementNS('http://www.w3.org/2000/svg', 'path'); an.setAttribute('d', d); an.setAttribute('class', 'df-conn-animated'); an.id = 'df-anim-in-' + i; svg.appendChild(an); } for (let j = 0; j < 5; j++) { const outEl = wrap.querySelector('#df-out-' + j); const d = curvePath(eng.right, getLeft(outEl)); const bg = document.createElementNS('http://www.w3.org/2000/svg', 'path'); bg.setAttribute('d', d); bg.setAttribute('class', 'df-conn-line'); svg.appendChild(bg); const an = document.createElementNS('http://www.w3.org/2000/svg', 'path'); an.setAttribute('d', d); an.setAttribute('class', 'df-conn-animated df-out'); an.id = 'df-anim-out-' + j; svg.appendChild(an); } } function resetAll() { for (let i = 0; i < 5; i++) { wrap.querySelector('#df-in-' + i).classList.remove('df-active'); wrap.querySelector('#df-out-' + i).classList.remove('df-lit'); ['df-anim-in-'+i, 'df-anim-out-'+i].forEach(id => { const el = wrap.querySelector('#' + id); if (el) { el.classList.remove('df-running'); void el.offsetWidth; } }); } } function runCycle(idx) { resetAll(); wrap.querySelector('#df-in-' + idx).classList.add('df-active'); const inLine = wrap.querySelector('#df-anim-in-' + idx); if (inLine) { void inLine.offsetWidth; inLine.classList.add('df-running'); } setTimeout(() => { routeMap[idx].forEach((outIdx, i) => { setTimeout(() => { const ol = wrap.querySelector('#df-anim-out-' + outIdx); if (ol) { void ol.offsetWidth; ol.classList.add('df-running'); } setTimeout(() => { wrap.querySelector('#df-out-' + outIdx).classList.add('df-lit'); }, 1100); }, i * 170); }); }, 1050); } function tick() { runCycle(current); current = (current + 1) % 5; } const t = setTimeout(() => { buildLines(); tick(); intervalId = setInterval(tick, 3400); }, 100); const onResize = () => buildLines(); window.addEventListener('resize', onResize); return () => { clearTimeout(t); clearInterval(intervalId); window.removeEventListener('resize', onResize); }; }, []); return (
{/* Inputs */}
{[['🛢️','Wells'],['📈','Production'],['⚙️','D&C'],['🗺️','G&G'],['🔬','Diagnostics']].map(([icon, label], i) => (
{icon} {label}
))}
{/* Engine */}
⬡
Tessera
AI Engine
{/* Outputs */}
{[['🧩','Pad Optimization'],['⚡','RTAi / Production Intelligence'],['💧','Drainage Modeling'],['📋','Inventory / Recovery Optimization'],['🎛️','Base Optimization']].map(([icon, label], j) => (
{icon} {label}
))}
); } function WhatWeBuildSection() { const r1 = useFadeUp(), r2 = useFadeUp(), r3 = useFadeUp(); const valueProps = [ { title: 'AI-native, not bolted-on', body: 'Built around your data, your basin, and your workflows.' }, { title: 'Transparent by design', body: 'No black box. No unnecessary lock-in. Built so your team can understand, trust, and use the solution.' }, { title: 'Subsurface + AI under one roof', body: 'Subsurface expertise and AI/ML builders on the same team.' }, ]; return (
{/* Left */}

The Tessera Difference

{valueProps.map((v, i) => (

{v.title}

{v.body}

))}
{/* Right */}
{/* Bottom tagline */}

You describe the problem.{' '} We build the system.{' '} Your team owns it.

); } // ─── HOW WE ENGAGE ──────────────────────────────────────────────────────────── function HowWeWorkSection() { const r1 = useFadeUp(); const steps = [ { num: '01', title: 'Scope', desc: '1-2 week focused discovery on one real use case and dataset. We come back with a written deliverable.' }, { num: '02', title: 'Build', desc: 'Side-by-side with your engineers, in your stack. Frequent demos. No surprises.' }, { num: '03', title: 'Deploy', desc: 'Inside your cloud. Your data, your models. We deploy into an approved environment that fits your security.' }, { num: '04', title: 'Own', desc: 'Full handover: Solution, config, output, and operating workflows. Extensions only if you want them.' }, ]; return (

How We Work

Four steps from scope to ownership.

{/* Connector line */}
{steps.map((s, i) => { const r = useFadeUp(); return (
{/* Gradient number dot */}
{s.num}

{s.title}

{s.desc}

); })}
); } // ─── FAQ ────────────────────────────────────────────────────────────────────── function FAQSection() { const [open, setOpen] = useState(null); const r1 = useFadeUp(); const faqs = [ { q: 'Do you sell software or services?', a: 'We build AI-native solutions around your data, workflows, and business problems. We are not a traditional SaaS platform, and we are not a slide-deck consulting firm. We deliver working systems that your team can use, operate, and trust.' }, { q: 'Where does our data live?', a: 'In your environment or in a secure environment approved by your team. We design around your IT, security, and data governance requirements.' }, { q: 'What happens if we stop working with you?', a: 'Your team keeps using the deployed solution. Your data, configurations, outputs, and operating workflows remain yours. No hidden black box. No unnecessary lock-in.' }, { q: 'How long does a typical engagement take?', a: 'Most projects start with 1–2 weeks of focused scoping, followed by build-to-deploy cycle depending on the use case, data readiness, and integration needs.' }, { q: 'Can you integrate with our existing stack?', a: 'Yes. We build around your data warehouse, your cloud, your auth, not around ours. If you\'re on Azure, AWS, Databricks, or GCP, we work there.' }, ]; return (

FAQ

Common questions.

{faqs.map((f, i) => { const isOpen = open === i; return (

{f.a}

); })}
); } // ─── CONTACT / CTA ──────────────────────────────────────────────────────────── function ContactSection() { const [form, setForm] = useState({ name: '', company: '', email: '', phone: '', problem: '' }); const [submitted, setSubmitted] = useState(false); const [errors, setErrors] = useState({}); const r1 = useFadeUp(), r2 = useFadeUp(); const validate = () => { const e = {}; if (!form.name.trim()) e.name = 'Required'; if (!form.company.trim()) e.company = 'Required'; if (!form.email.trim() || !form.email.includes('@')) e.email = 'Valid email required'; if (!form.problem.trim()) e.problem = 'Required'; return e; }; const handleSubmit = async (e) => { e.preventDefault(); const errs = validate(); if (Object.keys(errs).length) { setErrors(errs); return; } try { const res = await fetch('https://formspree.io/f/xojrqrod', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ name: form.name, company: form.company, email: form.email, phone: form.phone || '(not provided)', problem: form.problem, }), }); if (res.ok) { setSubmitted(true); } else { const data = await res.json(); setErrors({ submit: data?.error || 'Submission failed. Please email us directly.' }); } } catch { setErrors({ submit: 'Network error. Please email us at hello@tessera-analytics.ai' }); } }; const inputStyle = (field) => ({ width: '100%', padding: '12px 16px', background: 'rgba(255,255,255,0.06)', border: `1px solid ${errors[field] ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.15)'}`, borderRadius: 8, color: '#fff', fontFamily: 'var(--font)', fontSize: 14, outline: 'none', transition: 'border-color 0.2s', }); const labelStyle = { display: 'block', fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.5)', marginBottom: 8, textTransform: 'uppercase', }; return (
{/* Gradient border top */}

Let's build.

A 2-week scoping on a problem that's costing you real money. We come back with a written scope: what we'd build, what it costs, what we expect it to return. Then you decide.

{submitted ? (

Request received.

We'll be in touch within one business day.

) : (
{ setForm({...form, name: e.target.value}); setErrors({...errors, name: null}); }} style={inputStyle('name')} onFocus={e => e.target.style.borderColor = 'rgba(16,185,129,0.5)'} onBlur={e => e.target.style.borderColor = errors.name ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.15)'} /> {errors.name &&

{errors.name}

}
{ setForm({...form, company: e.target.value}); setErrors({...errors, company: null}); }} style={inputStyle('company')} onFocus={e => e.target.style.borderColor = 'rgba(16,185,129,0.5)'} onBlur={e => e.target.style.borderColor = errors.company ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.15)'} /> {errors.company &&

{errors.company}

}
{ setForm({...form, email: e.target.value}); setErrors({...errors, email: null}); }} style={inputStyle('email')} onFocus={e => e.target.style.borderColor = 'rgba(16,185,129,0.5)'} onBlur={e => e.target.style.borderColor = errors.email ? 'rgba(239,68,68,0.6)' : 'rgba(255,255,255,0.15)'} /> {errors.email &&

{errors.email}

}
setForm({...form, phone: e.target.value})} style={inputStyle('phone')} onFocus={e => e.target.style.borderColor = 'rgba(16,185,129,0.5)'} onBlur={e => e.target.style.borderColor = 'rgba(255,255,255,0.15)'} />