export default function LandingPage() { const [revealed, setRevealed] = React.useState(new Set()); const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false); const [formState, setFormState] = React.useState('idle'); const [email, setEmail] = React.useState(''); const [name, setName] = React.useState(''); const [company, setCompany] = React.useState(''); const [message, setMessage] = React.useState(''); const [footerEmail, setFooterEmail] = React.useState(''); const [footerFormState, setFooterFormState] = React.useState('idle'); const [countedStats, setCountedStats] = React.useState({}); React.useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setRevealed((prev) => new Set([...prev, entry.target.id])); observer.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' } ); document.querySelectorAll('[data-animate]').forEach((el) => { if (el.id) observer.observe(el); }); return () => observer.disconnect(); }, []); React.useEffect(() => { const statsToAnimate = [ { id: 'stat-1', target: 97, key: 'stat1' }, { id: 'stat-2', target: 84, key: 'stat2' }, { id: 'stat-3', target: 63, key: 'stat3' }, { id: 'stat-nps', target: 94, key: 'nps' }, { id: 'stat-bar-1', target: 92, key: 'bar1' }, { id: 'stat-bar-2', target: 78, key: 'bar2' }, { id: 'stat-bar-3', target: 85, key: 'bar3' }, { id: 'stat-bar-4', target: 96, key: 'bar4' }, ]; statsToAnimate.forEach(({ id, target, key }) => { if (revealed.has(id) && !countedStats[key]) { setCountedStats((prev) => ({ ...prev, [key]: true })); const duration = 2000; const start = performance.now(); const easeOutQuart = (t) => 1 - Math.pow(1 - t, 4); const animate = (now) => { const elapsed = now - start; const progress = Math.min(elapsed / duration, 1); const value = Math.round(easeOutQuart(progress) * target); setCountedStats((prev) => ({ ...prev, [`${key}Val`]: value })); if (progress < 1) requestAnimationFrame(animate); }; requestAnimationFrame(animate); } }); }, [revealed, countedStats]); const handleSubmit = async (e) => { e.preventDefault(); setFormState('submitting'); try { await fetch('/api/lead/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pageSlug: window.__HONTER_PAGE_SLUG__, fields: { email, name, company, message }, }), }); setFormState('success'); } catch { setFormState('idle'); } }; const handleFooterSubmit = async (e) => { e.preventDefault(); setFooterFormState('submitting'); try { await fetch('/api/lead/submit', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pageSlug: window.__HONTER_PAGE_SLUG__, fields: { email: footerEmail, source: 'footer-newsletter' }, }), }); setFooterFormState('success'); } catch { setFooterFormState('idle'); } }; const scrollTo = (id) => { document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); setMobileMenuOpen(false); }; const getVal = (key) => countedStats[`${key}Val`] || 0; return (

{/* NAVIGATION */}

scrollTo('hero')}> DataStack

{[ { label: 'Benefits', id: 'benefits' }, { label: 'Process', id: 'process' }, { label: 'Testimonials', id: 'testimonials' }, { label: 'Stats', id: 'stats' }, ].map((item) => ( ))}

{mobileMenuOpen && (

{['Benefits', 'Process', 'Testimonials', 'Stats'].map((item) => ( ))}

)}

{/* HERO */}

Your data, simplified. We're DataStack LA

Los Angeles startups move fast — but messy data slows everything down. DataStack gives your team a{' '} single source of truth so you can ship faster, raise smarter, and scale with confidence.

We've helped over 200 LA-based startups transform their data infrastructure. From seed stage to Series C, our platform grows with you — no bloated enterprise tools, no{' '} six-month implementations.

{/* LOGOS */}

{['TechCrunch', 'Forbes', 'ProductHunt', 'YCombinator', 'AngelList'].map((name) => ( {name}

))}

{['TechCrunch', 'Forbes', 'ProductHunt', 'YCombinator', 'AngelList'].map((name) => ( {name}

))}

{/* BENEFITS / FEATURES */}

{/* Section header */}

We're experts in data infrastructure, pipeline design, and analytics activation.

Our team brings decades of expertise from industry-leading organizations, partnering with and delivering measurable success to some of LA's fastest-growing startups.

{/* Stats row with image */}

{/* Lifestyle image */}

LA startup team working with data dashboards

{/* Stat 1 */}

{getVal('stat1')}%

Faster query performance after migration

Average improvement across all DataStack-managed Snowflake deployments in Q4 2024.

{/* Stat 2 */}

{getVal('stat2')}%

Reduction in data pipeline errors

Measured across 50+ dbt transformations managed by our engineering team.

{/* Stat 3 */}

{getVal('stat3')}%

Less time spent on manual data wrangling

Freeing engineering hours for product development instead of ETL maintenance.

{/* TESTIMONIALS */}

At DataStack, we're a data management partner for startups, reimagined. We do things differently—focusing on delivering measurable and transformative results, not just spinning up dashboards nobody uses. Our clients{' '} trust us as their strategic partner to deliver smarter, more scalable data solutions.

Earned a

{getVal('nps')} NPS score

{/* PROCESS */}

{[ { num: '01', title: 'Data Infrastructure Design & Pipeline Architecture', desc: 'At DataStack, we prioritize building foundations that scale. We audit your existing data stack, identify bottlenecks, and architect pipelines that grow with your startup—from seed to Series C and beyond.', }, { num: '02', title: 'Analytics Enablement & Dashboard Development', desc: 'From discovery to deployment, we craft analytics experiences that don\'t just visualize data—they drive decisions. Real-time dashboards your entire team actually uses, from engineering to the boardroom.', }, { num: '03', title: 'Data Governance & Compliance Strategy', desc: 'Data is at the heart of everything you do. We deliver actionable governance frameworks, privacy compliance protocols, and data quality metrics to keep your startup audit-ready and investor-confident.', }, ].map((item, i) => (

{i > 0 &&

}

{item.num}

{item.title}

{item.desc}

))}

{/* STATS */}

Continuously Improving to Stay Ahead

Our platform benchmarks reveal how DataStack clients consistently outperform industry averages across every critical data metric.

{/* Horizontal bar chart */}

{[ { label: 'Data Freshness', id: 'stat-bar-1', key: 'bar1', target: 92 }, { label: 'Pipeline Uptime', id: 'stat-bar-2', key: 'bar2', target: 78 }, { label: 'Query Performance', id: 'stat-bar-3', key: 'bar3', target: 85 }, { label: 'Cost Efficiency', id: 'stat-bar-4', key: 'bar4', target: 96 }, ].map((bar, i) => (

{bar.label} {getVal(bar.key)}%

))}

{/* Feature cards */}

{[ { icon: ( ), title: 'The DataStack Weekly Podcast', desc: 'A podcast where we discuss the latest trends and ideas in startup data management, featuring CTOs from LA\'s top companies.', }, { icon: ( ), title: 'Monthly Infrastructure Reports', desc: 'Regular updates that include performance benchmarks, cost analysis, and optimization recommendations for your data stack.', }, { icon: ( ), title: 'Informative Blog & Newsletter', desc: 'Articles and emails that provide useful content to help LA startups stay on top of data engineering trends and best practices.', }, ].map((card, i) => (

{card.icon}

{card.title}

{card.desc}

))}

{/* CTA */}

Ready to turn your data
into a competitive advantage?

Book a free consultation with our LA-based team. We'll audit your current data stack and show you exactly where the opportunities are.

{formState === 'success' ? (

Thank you!

We'll be in touch within 24 hours to schedule your free data audit.

) : (

setName(e.target.value)} required className="w-full bg-[#0F2A45] border border-white/10 rounded-[1.13rem] px-5 py-3.5 text-white text-[14px] placeholder-[#5A7A9A] focus:outline-none focus:border-[#E8634A]/50 transition-colors" /> setEmail(e.target.value)} required className="w-full bg-[#0F2A45] border border-white/10 rounded-[1.13rem] px-5 py-3.5 text-white text-[14px] placeholder-[#5A7A9A] focus:outline-none focus:border-[#E8634A]/50 transition-colors" />

setCompany(e.target.value)} className="w-full bg-[#0F2A45] border border-white/10 rounded-[1.13rem] px-5 py-3.5 text-white text-[14px] placeholder-[#5A7A9A] focus:outline-none focus:border-[#E8634A]/50 transition-colors mb-4" />

setMessage(e.target.value)}
                  rows={4}
                  className="w-full bg-[#0F2A45] border border-white/10 rounded-[1.13rem] px-5 py-3.5 text-white text-[14px] placeholder-[#5A7A9A] focus:outline-none focus:border-[#E8634A]/50 transition-colors mb-6 resize-none"
                />
                <div className="text-center">
                  <button
                    type="submit"
                    disabled={formState === 'submitting'}
                    className="bg-[#00BFFF] hover:bg-[#5A7A9A] disabled:opacity-70 text-white text-[14px] font-medium px-10 py-3.5 rounded-[62.5rem] transition-all duration-200 shadow-[0_4px_15px_rgba(0,191,255,0.35)]"
                  >
                    {formState === 'submitting' ? 'Sending...' : 'Book a Demo'}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </section>

{/* FOOTER */}
      <footer id="footer" data-section="footer" className="w-full bg-[#081422]">
        <div className="max-w-screen-2xl mx-auto px-6 lg:px-8 pt-12 pb-8">
          {/* Top row: logo + socials */}
          <div className="flex items-center justify-between mb-8">
            <div className="flex items-center gap-2">
              <svg width="24" height="24" viewBox="0 0 28 28" fill="none">
                <rect width="28" height="28" rx="6" fill="#E8634A" />
                <path d="M8 14L12 10L16 14L20 10" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M8 18L12 14L16 18L20 14" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span className="text-white font-medium text-base">DataStack</span>
            </div>
            <div className="flex items-center gap-3">
              {['twitter', 'linkedin', 'github', 'youtube'].map((social) => (
                <a
                  key={social}
                  href="#"
                  className="w-9 h-9 rounded-full border border-white/12 flex items-center justify-center hover:border-white/30 transition-colors"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="opacity-60">
                    {social === 'twitter' && <path d="M2 2L7 8.5L2 14H3.5L8 9.5L12 14H14L9 7.5L14 2H12.5L8.5 6.5L5 2H2Z" />}
                    {social === 'linkedin' && <><rect x="2" y="6" width="3" height="8" /><circle cx="3.5" cy="3.5" r="1.5" /><path d="M7 14V9C7 7 8 6 10 6C12 6 13 7 13 9V14" /></>}
                    {social === 'github' && <path d="M8 2C4.7 2 2 4.7 2 8C2 10.7 3.8 13 6.2 13.7V12C5.3 12.2 5 11.5 5 11.5C4.7 10.8 4.3 10.6 4.3 10.6C3.7 10.2 4.3 10.2 4.3 10.2C5 10.3 5.3 10.9 5.3 10.9C6 12 7 11.7 7.3 11.5C7.4 11 7.6 10.7 7.8 10.5C5.8 10.3 3.7 9.5 3.7 7C3.7 6.2 4 5.5 4.5 5C4.4 4.8 4 4 4.6 2.9C4.6 2.9 5.3 2.7 7 3.8C7.6 3.6 8.3 3.5 9 3.5C9.7 3.5 10.4 3.6 11 3.8C12.7 2.7 13.4 2.9 13.4 2.9C14 4 13.6 4.8 13.5 5C14 5.5 14.3 6.2 14.3 7C14.3 9.5 12.2 10.3 10.2 10.5C10.5 10.8 10.8 11.3 10.8 12V13.7C13.2 13 15 10.7 15 8C14 4.7 11.3 2 8 2Z" />}
                    {social === 'youtube' && <><rect x="2" y="4" width="12" height="8" rx="2" /><path d="M7 7L10 8L7 9V7Z" fill="white" stroke="none" /></>}
                  </svg>
                </a>
              ))}
            </div>
          </div>

{/* Footer columns */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-10">
            <div>
              <h4 className="text-white text-[13px] font-medium mb-4">Core Services</h4>
              {['Data Infrastructure', 'Pipeline Architecture', 'Analytics Enablement', 'Data Governance'].map((link) => (
                <a key={link} href="#" className="block text-[#5A7A9A] text-[13px] hover:text-white transition-colors mb-2.5">
                  {link}
                </a>
              ))}
            </div>
            <div>
              <h4 className="text-white text-[13px] font-medium mb-4">Platform</h4>
              {['Snowflake Setup', 'dbt Consulting', 'Fivetran Integration'].map((link) => (
                <a key={link} href="#" className="block text-[#5A7A9A] text-[13px] hover:text-white transition-colors mb-2.5">
                  {link}
                </a>
              ))}
            </div>
            <div>
              <h4 className="text-white text-[13px] font-medium mb-4">Company</h4>
              {['About Us', 'Partnerships', 'Privacy Policy'].map((link) => (
                <a key={link} href="#" className="block text-[#5A7A9A] text-[13px] hover:text-white transition-colors mb-2.5">
                  {link}
                </a>
              ))}
            </div>
            <div>
              <h4 className="text-white text-[13px] font-medium mb-4">Resources</h4>
              {['Blog', 'Podcast', 'Case Studies', 'Data Maturity Quiz', 'Partner Directory', 'FAQ'].map((link) => (
                <a key={link} href="#" className="block text-[#5A7A9A] text-[13px] hover:text-white transition-colors mb-2.5">
                  {link}
                </a>
              ))}
            </div>
          </div>

{/* Newsletter */}
          <div className="w-full h-[1px] bg-white/8 mb-6"></div>
          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-6">
            <p className="text-[#5A7A9A] text-[13px]">Stay updated with our weekly data engineering insights.</p>
            {footerFormState === 'success' ? (
              <div className="flex items-center gap-2 text-[#E8634A] text-[13px] font-medium">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                  <path d="M5 13L9 17L19 7" />
                </svg>
                Subscribed!
              </div>
            ) : (
              <form onSubmit={handleFooterSubmit} className="flex gap-2">
                <input
                  type="email"
                  required
                  placeholder="your@email.com"
                  value={footerEmail}
                  onChange={(e) => setFooterEmail(e.target.value)}
                  className="bg-[#0F2A45] border border-white/10 rounded-[62.5rem] px-4 py-2 text-white text-[13px] placeholder-[#5A7A9A] focus:outline-none focus:border-[#E8634A]/50 max-w-[1600px] w-full"
                />
                <button
                  type="submit"
                  disabled={footerFormState === 'submitting'}
                  className="bg-[#E8634A] hover:bg-[#D4553D] text-white text-[13px] font-medium px-5 py-2 rounded-[62.5rem] transition-colors disabled:opacity-70"
                >
                  {footerFormState === 'submitting' ? '...' : 'Subscribe'}
                </button>
              </form>
            )}
          </div>

<div className="w-full h-[1px] bg-white/8 mb-6"></div>
          <div className="flex flex-col md:flex-row items-center justify-between gap-2">
            <a href="#" className="text-[#5A7A9A] text-[12px] hover:text-white transition-colors">
              Privacy Policy
            </a>
            <p className="text-[#5A7A9A] text-[12px]">
              Copyright © 2025 DataStack LA. All rights reserved.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
}</article></body></html>