import React, { useState, useEffect } from 'react';
import {
TrendingUp,
ShieldCheck,
BarChart3,
Wind,
Activity,
FileText,
Zap,
Globe,
Mail,
ArrowRight,
ChevronDown,
AlertTriangle,
Factory
} from 'lucide-react';
const App = () => {
const [activeTab, setActiveTab] = useState('market');
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
setIsVisible(true);
}, []);
const marketSegments = [
{
id: 1,
title: "Permitting & Emissions",
value: "$1.0–$1.3B",
growth: "Steady",
icon: <FileText className="w-6 h-6" />,
desc: "Title V renewals, PSD/NSR permitting, and AERMOD modeling for 12,726+ facilities.",
details: "Driven by 5-year renewal cycles (~2,550 annually) and ongoing NSR/PSD modifications."
},
{
id: 2,
title: "Stack Testing & CEMS",
value: "$1.1–$1.6B",
growth: "High Volume",
icon: <Activity className="w-6 h-6" />,
desc: "Mandatory performance tests (NSPS/NESHAP) and annual RATA audits for CEMS.",
details: "Predictive workflow: RATAs required every 4 quarters. Unit cost: $10k–$50k per stack."
},
{
id: 3,
title: "Ambient & Fenceline",
value: "$0.4–$0.6B",
growth: "Ramping",
icon: <Wind className="w-6 h-6" />,
desc: "Operation of boundary networks for benzene (refineries) and 218 chemical plants.",
details: "Significant new work stream created by April 2024 regulations expanding to chemical sectors."
},
{
id: 4,
title: "Compliance & QA",
value: "$0.6–$1.0B",
growth: "Recurring",
icon: <ShieldCheck className="w-6 h-6" />,
desc: "Semiannual monitoring, annual certifications, and agency liaison services.",
details: "The 'Compliance Engine': Non-discretionary recordkeeping required by federal mandate."
}
];
return (
<div className="min-h-screen bg-[#FDFCFB] text-[#2D3436] font-sans selection:bg-[#E2E8F0]">
{/* Navigation */}
<nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-[#E9E1D8] px-6 py-4 flex justify-between items-center">
<div className="flex items-center gap-2">
<div className="w-8 h-8 bg-[#4A5D4E] rounded-lg flex items-center justify-center">
<Wind className="text-white w-5 h-5" />
</div>
<span className="font-bold tracking-tight text-xl text-[#1A1D1E]">Gaya Capital <span className="text-[#4A5D4E]">ACM</span></span>
</div>
<div className="hidden md:flex gap-8 text-sm font-medium text-[#636E72]">
<a href="#market" className="hover:text-[#4A5D4E] transition-colors">Market Size</a>
<a href="#regulatory" className="hover:text-[#4A5D4E] transition-colors">Regulatory Timeline</a>
<a href="#outlook" className="hover:text-[#4A5D4E] transition-colors">Outlook</a>
</div>
<button className="bg-[#4A5D4E] text-white px-5 py-2 rounded-full text-sm font-semibold hover:bg-[#3A4A3E] transition-all shadow-sm">
Get Full Report
</button>
</nav>
{/* Hero Section */}
<header className="px-6 pt-20 pb-16 max-w-6xl mx-auto text-center">
<div className={`transition-all duration-1000 transform ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'}`}>
<span className="inline-block px-4 py-1.5 bg-[#F0F4F1] text-[#4A5D4E] text-xs font-bold uppercase tracking-widest rounded-full mb-6">
Executive Intelligence 2025/2026
</span>
<h1 className="text-4xl md:text-6xl font-extrabold text-[#1A1D1E] leading-[1.1] mb-8">
From Stack to Fenceline:<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#4A5D4E] to-[#8E9D90]">
The U.S. Air Compliance Market
</span>
</h1>
<p className="text-xl text-[#636E72] max-w-2xl mx-auto leading-relaxed mb-10">
The compliance engine of industry: transparent drivers, defendable math, and a market built for recurrence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex items-center gap-2 bg-white border border-[#E9E1D8] px-6 py-4 rounded-2xl shadow-sm">
<TrendingUp className="text-[#4A5D4E] w-6 h-6" />
<div className="text-left">
<div className="text-xs text-[#636E72] uppercase font-bold">Total Addressable Market</div>
<div className="text-2xl font-bold text-[#1A1D1E]">$3.9 Billion (Midpoint)</div>
</div>
</div>
<div className="flex items-center gap-2 bg-white border border-[#E9E1D8] px-6 py-4 rounded-2xl shadow-sm">
<Zap className="text-[#B2A478] w-6 h-6" />
<div className="text-left">
<div className="text-xs text-[#636E72] uppercase font-bold">2025 Estimated Range</div>
<div className="text-2xl font-bold text-[#1A1D1E]">$3.2B – $4.6B</div>
</div>
</div>
</div>
</div>
</header>
{/* Market Segments Grid */}
<section id="market" className="px-6 py-20 bg-[#F7F9F7]">
<div className="max-w-6xl mx-auto">
<div className="mb-12">
<h2 className="text-3xl font-bold mb-4">Bottom-Up Valuation</h2>
<p className="text-[#636E72]">A rigorous analysis of professional services excluding hardware and EPC.</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{marketSegments.map((segment) => (
<div key={segment.id} className="bg-white p-8 rounded-3xl border border-[#E9E1D8] hover:shadow-xl transition-all group">
<div className="w-12 h-12 bg-[#F0F4F1] rounded-2xl flex items-center justify-center text-[#4A5D4E] mb-6 group-hover:scale-110 transition-transform">
{segment.icon}
</div>
<h3 className="font-bold text-lg mb-2">{segment.title}</h3>
<div className="text-2xl font-black text-[#4A5D4E] mb-4">{segment.value}</div>
<p className="text-sm text-[#636E72] mb-6 leading-relaxed">
{segment.desc}
</p>
<div className="pt-6 border-t border-[#F1EEE9] text-xs text-[#95A5A6] font-medium italic italic">
{segment.details}
</div>
</div>
))}
</div>
</div>
</section>
{/* Regulatory Timeline & Risks */}
<section id="regulatory" className="px-6 py-24 max-w-6xl mx-auto">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div>
<h2 className="text-4xl font-bold mb-6 tracking-tight">The Regulatory Firewall</h2>
<p className="text-lg text-[#636E72] mb-8 leading-relaxed">
While federal rollbacks under "Trump 2.0" introduce uncertainty, the market's durability is anchored by state-level commitments and statutory Clean Air Act mandates.
</p>
<div className="space-y-6">
<div className="flex gap-4 p-5 bg-[#FDF0ED] border-l-4 border-[#E17055] rounded-r-xl">
<AlertTriangle className="text-[#E17055] shrink-0" />
<div>
<h4 className="font-bold text-[#D63031]">Headwinds</h4>
<p className="text-sm text-[#7F8C8D]">Freeze on GHG reporting, OBBBA funding rescissions, and delayed chemical sector monitoring requirements.</p>
</div>
</div>
<div className="flex gap-4 p-5 bg-[#EDF7F1] border-l-4 border-[#27AE60] rounded-r-xl">
<Globe className="text-[#27AE60] shrink-0" />
<div>
<h4 className="font-bold text-[#1E8449]">Structural Drivers</h4>
<p className="text-sm text-[#7F8C8D]">Blue-state "patchwork" laws, surging power demand from AI/Data Centers keeping legacy plants online.</p>
</div>
</div>
</div>
</div>
<div className="relative">
<div className="absolute inset-0 bg-gradient-to-tr from-[#4A5D4E]/10 to-transparent rounded-full blur-3xl" />
<div className="bg-white border border-[#E9E1D8] rounded-[2rem] p-8 shadow-2xl relative overflow-hidden">
<div className="flex items-center justify-between mb-8">
<h3 className="font-bold text-xl uppercase tracking-tighter">Compliance Cadence</h3>
<span className="text-xs font-bold text-[#B2A478]">TITLE V CYCLE</span>
</div>
<div className="space-y-10">
{[
{ phase: "Yearly", task: "Annual Compliance Certification", status: "Non-Discretionary" },
{ phase: "Semiannual", task: "Monitoring Reports & Deviation Logging", status: "Critical Path" },
{ phase: "Every 4 Quarters", task: "RATA / CEMS Quality Assurance", status: "Service Intensive" },
{ phase: "5-Year Cycle", task: "Major Permit Renewal Pipeline", status: "High Value" }
].map((item, i) => (
<div key={i} className="flex items-start gap-4">
<div className="w-8 h-8 rounded-full bg-[#4A5D4E] text-white flex items-center justify-center shrink-0 text-xs font-bold">
0{i+1}
</div>
<div>
<div className="text-xs font-bold text-[#95A5A6] uppercase">{item.phase}</div>
<div className="font-bold text-lg">{item.task}</div>
<div className="text-sm text-[#4A5D4E] font-medium">{item.status}</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* AI & Data Center Expansion Section */}
<section id="outlook" className="bg-[#1A1D1E] text-white py-24 overflow-hidden relative">
<div className="absolute top-0 right-0 w-1/2 h-full opacity-10">
<svg viewBox="0 0 100 100" className="w-full h-full stroke-white fill-none">
<path d="M0,50 Q25,20 50,50 T100,50" strokeWidth="0.1" />
<path d="M0,60 Q25,30 50,60 T100,60" strokeWidth="0.1" />
</svg>
</div>
<div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/80 text-xs font-bold mb-6">
<Zap className="w-3 h-3 text-yellow-400" /> NEW GROWTH VECTOR
</div>
<h2 className="text-4xl font-bold mb-6">AI Demand vs. Air Compliance</h2>
<p className="text-lg text-white/70 mb-8 leading-relaxed">
Data center power capacity is projected to triple by 2035 (277 GW). This surge ensures fossil-fuel generation remains online longer, maintaining the "Stack Testing" demand floor.
</p>
<div className="grid grid-cols-2 gap-6">
<div>
<div className="text-3xl font-black text-[#4A5D4E] mb-1">~12%</div>
<div className="text-xs uppercase font-bold text-white/50 tracking-widest">US Electricity Use (2028E)</div>
</div>
<div>
<div className="text-3xl font-black text-[#B2A478] mb-1">78 GW+</div>
<div className="text-xs uppercase font-bold text-white/50 tracking-widest">Total Load by 2035</div>
</div>
</div>
</div>
<div className="bg-white/5 backdrop-blur-sm border border-white/10 p-10 rounded-[3rem]">
<div className="flex items-center gap-4 mb-8">
<Factory className="text-white/40 w-10 h-10" />
<div className="h-px bg-white/20 grow" />
<Activity className="text-[#4A5D4E] w-10 h-10" />
</div>
<p className="italic text-white/80 text-xl leading-relaxed">
"Regardless of federal policy, the massive infrastructure expansion for AI workloads triggers unavoidable NSR/PSD and permitting requirements."
</p>
<div className="mt-8 flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-[#4A5D4E] flex items-center justify-center font-bold">GC</div>
<div>
<div className="font-bold">Gaya Capital Research</div>
<div className="text-sm text-white/40">Air Compliance Division</div>
</div>
</div>
</div>
</div>
</section>
{/* CTA / Form */}
<footer className="px-6 py-24 max-w-4xl mx-auto text-center">
<h2 className="text-4xl font-bold mb-4">Access the Full 2025 Analysis</h2>
<p className="text-[#636E72] mb-12">Detailed sub-segment economics, company impact analysis, and state-level regulatory risk maps.</p>
<form className="bg-white border border-[#E9E1D8] p-2 rounded-2xl shadow-lg flex flex-col sm:flex-row gap-2 max-w-xl mx-auto">
<input
type="email"
placeholder="Work Email Address"
className="flex-grow px-6 py-4 rounded-xl outline-none text-lg"
/>
<button className="bg-[#4A5D4E] text-white px-8 py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-[#3A4A3E] transition-all">
Get Full Access <ArrowRight className="w-5 h-5" />
</button>
</form>
<div className="mt-12 flex flex-col items-center gap-4">
<a href="mailto:gaya@gayacapital.com" className="flex items-center gap-2 text-[#4A5D4E] font-semibold hover:underline">
<Mail className="w-4 h-4" /> gaya@gayacapital.com
</a>
<div className="text-xs text-[#95A5A6] uppercase tracking-[0.2em]">
© 2025 GAYA CAPITAL MANAGEMENT. ALL RIGHTS RESERVED.
</div>
</div>
</footer>
</div>
);
};
export default App;
