joaomiranda/runvision_pro_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
João Miranda
2026-03-06 10:32:28 +00:00
commit c969c1c968
90 changed files with 16823 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/sections/Integration.tsx Normal file
View File

@@ -0,0 +1,183 @@
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>
);
}