// ─── 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, 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: 'Geochem, microseismic, frac hits, RTA, completions — all live in different silos. Your team builds one-off dashboards instead of working models.', }, { 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

Subscriptions, not solutions. Fragmented data.
Models that don't evolve.

{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 WhatWeBuildSection() { const r1 = useFadeUp(), r2 = useFadeUp(), r3 = useFadeUp(); const valueProps = [ { title: 'AI-native, not bolted-on', body: 'Built around your data, your basin, your workflows.' }, { title: 'No lock-in, no black box', body: 'You keep the code, the models, the weights, the data.' }, { title: 'Subsurface + AI under one roof', body: 'Reservoir engineers and ML engineers on the same team.' }, ]; const appLinks = [ { icon: '⬡', name: 'Prod Alloc + Drainage', desc: 'AI allocation & pseudo-sim drainage', href: '#ex-01' }, { icon: '⬡', name: 'AutoML for Completions', desc: 'Pad, cube & completion optimization', href: '#ex-02' }, { icon: '⬡', name: 'Custom RTA', desc: 'Workflow designed with your engineers', href: '#ex-03' }, { icon: '⬡', name: 'Infill & Inventory', desc: 'Above/below candidates, acreage grading', href: '#ex-04' }, ]; 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.

); } // ─── EXAMPLES ───────────────────────────────────────────────────────────────── function ExamplesSection() { const examples = [ { id: 'ex-01', num: '01', cat: 'Production Allocation & Drainage', headline: 'Allocation and drainage solved from your own data.', body: 'A custom app that allocates production per well without paying per sample, and stands up a pseudo-simulation drainage model — recovery and well-to-well interference — without the cost of full-physics simulation. Trained on your production, completion, and subsurface data. Glass-box, auditable, refreshed on your cadence. You own the pipeline.', benefits: ['On-demand allocation', 'Auditable drainage & interference', '100% model & data ownership'], placeholder: '[ product screenshot: production allocation dashboard\nwell-level allocation chart + drainage map overlay ]', }, { id: 'ex-02', num: '02', cat: 'AutoML for Completions', headline: 'Every well, a model of its own.', body: 'A custom AutoML engine that ingests public and private wells, generates a model per zone per bench per landing target, and ranks cube-design and completion-design scenarios with glass-box feature importance. Retrains as new wells come online.', benefits: ['Custom models for your acreage', 'Glass-box feature importance', 'Retrained as your asset evolves'], placeholder: '[ product screenshot: AutoML completions optimizer\nzone/bench model grid + feature importance chart ]', }, { id: 'ex-03', num: '03', cat: 'Custom RTA', headline: 'An RTA application built around your workflow.', body: 'Production analysis software — DCA, analytical, numerical methods — designed with your engineers, running inside your cloud. Microseismic, geochem, frac-hit flags, and lookbacks wired into the same session. One build, full handover.', benefits: ['Designed with your team', 'Runs inside your cloud', 'Integrated diagnostics', 'Own it end-to-end'], placeholder: '[ product screenshot: custom RTA app\nDCA curves + microseismic overlay + frac-hit flags ]', }, { id: 'ex-04', num: '04', cat: 'Infill & Inventory Expansion', headline: 'Find the wells you already own — above, below, and next door.', body: 'Screens existing pads for un-drilled above/below candidates, grades new acreage on data rather than analogs, and rolls the output into your AFE and reserves workflow. A live inventory, not a once-a-year PDF.', benefits: ['Above/below infill screening', 'AI-graded new-acreage type curves', 'Refreshes as offsets come online'], placeholder: '[ product screenshot: infill inventory map\nacreage grading heatmap + candidate well table ]', }, ]; return (
Examples

Four applications we've built for operators.

{examples.map((ex, i) => { const r = useFadeUp(); const isEven = i % 2 === 0; return (
{/* Text side */}
{ex.num} {ex.cat}

{ex.headline}

{ex.body}

{ex.benefits.map(b => (
{b}
))}
{/* Screenshot side */}
); })}
); } // ─── HOW WE ENGAGE ──────────────────────────────────────────────────────────── function HowWeWorkSection() { const r1 = useFadeUp(); const steps = [ { num: '01', title: 'Scope', desc: '2-week paid discovery on one real dataset. We come back with a written deliverable.' }, { num: '02', title: 'Build', desc: 'Side-by-side with your engineers, in your stack. Weekly demos. No surprises.' }, { num: '03', title: 'Deploy', desc: 'Inside your cloud. Your data, your models. We don\'t touch production unless invited.' }, { num: '04', title: 'Own', desc: 'Full handover. Code, weights, pipeline — yours. 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}

); })}
); } // ─── WHY TESSERA ────────────────────────────────────────────────────────────── function WhyTesseraSection() { const r1 = useFadeUp(), r2 = useFadeUp(); const cols = [ ['AI-native, subsurface-fluent', 'No lock-in. No black box.', 'You own every line of code'], ['Glass-box models, auditable outputs', 'Your cloud, your data, your auth', 'Reservoir + ML under one roof'], ['Paid scoping, written deliverable', 'Ship working systems, not slides', 'No annual seats. No re-ups.'], ]; const stats = [ { val: '35+', label: 'Years combined subsurface experience' }, { val: 'Multi-basin', label: 'Unconventional expertise' }, { val: 'Stanford & Silicon Valley', label: 'AI research pedigree' }, ]; return (
Why Tessera

Built different, by design.

{cols.map((col, ci) => (
{col.map((item, ii) => (
{item}
))}
))}
{/* Stat bar */}
{stats.map((s, i) => (
{s.val}
{s.label}
))}
); } // ─── FAQ ────────────────────────────────────────────────────────────────────── function FAQSection() { const [open, setOpen] = useState(null); const r1 = useFadeUp(); const faqs = [ { q: 'Do you sell software or services?', a: 'Neither. We build custom applications with you, and hand them over. You get the code, the models, the pipeline — we don\'t retain any access or ongoing dependency.' }, { q: 'Where does our data live?', a: 'Inside your cloud. It never leaves your environment. We work inside your VPC or tenant from day one.' }, { q: 'What happens if we stop working with you?', a: 'You keep running everything we built. Code, models, weights, pipeline — yours. Nothing stops working. Nothing phones home.' }, { q: 'How long does a typical engagement take?', a: 'Scoping is 2 weeks. Build-to-deploy is typically 8–16 weeks depending on the app and data readiness.' }, { q: 'Do you work with small operators?', a: 'Yes. If there\'s a real subsurface or production problem and the will to solve it properly, we\'ll talk.' }, { 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, or GCP, we work there.' }, { q: 'Do you do pilots?', a: 'We do paid scoping engagements with a written deliverable. Not free pilots that die in PowerPoint.' }, ]; 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/xdayybep', { 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)'} />