37 lines
2.0 KiB
TypeScript
37 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Cpu, Compass, Target } from 'lucide-react';
|
|
|
|
export const Audience: React.FC = () => {
|
|
return (
|
|
<section className="py-32 bg-background relative">
|
|
<div className="max-w-4xl mx-auto px-4 text-center">
|
|
<div className="flex justify-center mb-12">
|
|
<div className="p-4 rounded-2xl bg-white/5 border border-white/10">
|
|
<Cpu className="w-12 h-12 text-gray-400" strokeWidth={1} />
|
|
</div>
|
|
</div>
|
|
<h2 className="text-4xl md:text-7xl font-bold text-white mb-8 tracking-tighter leading-tight">
|
|
Built for <br/>
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-600">Systems Thinkers</span>.
|
|
</h2>
|
|
<p className="text-xl md:text-2xl text-gray-400 mb-16 max-w-2xl mx-auto leading-relaxed">
|
|
You treat your body like an engineering project. We handle the fuel calculations so you can just <span className="text-white font-semibold">fly the plane</span>.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-left max-w-3xl mx-auto">
|
|
{[
|
|
{ icon: Target, title: "Precision", desc: "No vague advice. Specific macronutrient targets based on exertion." },
|
|
{ icon: Compass, title: "Direction", desc: "Always know the next move. Remove decision fatigue from your diet." },
|
|
{ icon: Cpu, title: "Automation", desc: "Algorithms that adapt to your metabolism over time." }
|
|
].map((item, i) => (
|
|
<div key={i} className="p-8 rounded-3xl bg-surfaceHighlight border border-white/5 hover:border-white/20 transition-all duration-300 group">
|
|
<item.icon className="w-8 h-8 text-gray-500 group-hover:text-primary-400 transition-colors mb-6" strokeWidth={1.5} />
|
|
<h3 className="text-white text-lg font-bold mb-3">{item.title}</h3>
|
|
<p className="text-sm text-gray-400 leading-relaxed">{item.desc}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |