184 lines
7.9 KiB
TypeScript
184 lines
7.9 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Map as MapIcon, BarChart3, Database } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
const integrationFeatures = [
|
|
{
|
|
icon: MapIcon,
|
|
title: 'Visualização do Trajeto',
|
|
description: 'O trajeto completo é exibido no aplicativo do smartphone com mapa interativo e detalhes de elevação.',
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: 'Acompanhamento do Percurso',
|
|
description: 'Após finalizar a corrida, você pode acompanhar o percurso completo com análise detalhada de cada trecho.',
|
|
},
|
|
{
|
|
icon: Database,
|
|
title: 'Dados Registrados',
|
|
description: 'Todos os dados ficam registrados no aplicativo para análise de desempenho e acompanhamento de evolução.',
|
|
},
|
|
];
|
|
|
|
export function Integration() {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const elements = entry.target.querySelectorAll('.reveal-integration');
|
|
elements.forEach((el, index) => {
|
|
setTimeout(() => {
|
|
el.classList.add('animate-fade-in-up');
|
|
}, index * 150);
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.15 }
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<section ref={sectionRef} className="py-24 lg:py-32 bg-[#0f172a] overflow-hidden">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Section Header */}
|
|
<div className="text-center mb-16 reveal-integration opacity-0">
|
|
<Badge className="mb-4 bg-slate-800 text-cyan-400 border-cyan-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
|
|
Conectividade
|
|
</Badge>
|
|
<h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
|
|
Integração com Smartphone
|
|
</h2>
|
|
<div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full mb-6" />
|
|
</div>
|
|
|
|
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
|
|
{/* App Mockup - Left Side */}
|
|
<div className="reveal-integration opacity-0 relative order-2 lg:order-1">
|
|
<div className="relative max-w-sm mx-auto">
|
|
{/* Phone Frame */}
|
|
<div className="relative bg-slate-800 rounded-[2.5rem] p-3 shadow-2xl shadow-slate-900/50 border border-slate-700">
|
|
{/* Screen */}
|
|
<div className="bg-slate-900 rounded-[2rem] overflow-hidden aspect-[9/19]">
|
|
{/* App Header */}
|
|
<div className="bg-slate-800 px-4 py-3 flex items-center justify-between">
|
|
<span className="text-white font-semibold text-sm">9:41</span>
|
|
<div className="flex gap-1">
|
|
<div className="w-4 h-4 rounded-full bg-slate-600" />
|
|
<div className="w-4 h-4 rounded-full bg-slate-600" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* App Content */}
|
|
<div className="p-4">
|
|
{/* Run Title */}
|
|
<div className="mb-4">
|
|
<h4 className="text-white font-semibold text-lg">Corrida Matinal</h4>
|
|
<p className="text-slate-400 text-xs">11 de Fevereiro, 2026</p>
|
|
</div>
|
|
|
|
{/* Map Placeholder */}
|
|
<div className="bg-slate-800 rounded-xl aspect-square mb-4 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-700 to-slate-800">
|
|
{/* Map Grid */}
|
|
<div
|
|
className="absolute inset-0 opacity-20"
|
|
style={{
|
|
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
|
backgroundSize: '20px 20px',
|
|
}}
|
|
/>
|
|
{/* Route Line */}
|
|
<svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<path
|
|
d="M20,80 Q30,60 40,65 T60,50 T80,30"
|
|
fill="none"
|
|
stroke="#f97316"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
{/* Start Point */}
|
|
<circle cx="20" cy="80" r="3" fill="#0d9488" />
|
|
{/* End Point */}
|
|
<circle cx="80" cy="30" r="3" fill="#f97316" />
|
|
</svg>
|
|
{/* Location Pin */}
|
|
<div className="absolute top-1/3 right-1/4">
|
|
<div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center shadow-lg">
|
|
<MapIcon className="w-3 h-3 text-white" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="text-center">
|
|
<p className="text-orange-400 font-bold text-xl">5.2</p>
|
|
<p className="text-slate-400 text-xs">km</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-orange-400 font-bold text-xl">28:14</p>
|
|
<p className="text-slate-400 text-xs">tempo</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-orange-400 font-bold text-xl">5:25</p>
|
|
<p className="text-slate-400 text-xs">pace</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notch */}
|
|
<div className="absolute top-6 left-1/2 -translate-x-1/2 w-24 h-6 bg-slate-800 rounded-full" />
|
|
</div>
|
|
|
|
{/* Floating Badge */}
|
|
<div className="absolute -top-4 -right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg">
|
|
APP
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Features List - Right Side */}
|
|
<div className="order-1 lg:order-2 space-y-6">
|
|
{integrationFeatures.map((feature, index) => {
|
|
const Icon = feature.icon;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="reveal-integration opacity-0 group flex gap-4 p-4 rounded-xl hover:bg-slate-800/50 transition-colors duration-300"
|
|
>
|
|
<div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center flex-shrink-0 group-hover:bg-slate-700 transition-colors">
|
|
<Icon className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h3 className="font-display font-semibold text-lg text-white mb-1">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|