first commit
This commit is contained in:
158
src/sections/FutureUpdates.tsx
Normal file
158
src/sections/FutureUpdates.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { Headphones, Moon, Activity, Volume2, Music, Bell } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
const upcomingFeatures = [
|
||||
{
|
||||
icon: Headphones,
|
||||
title: 'Áudio Integrado',
|
||||
subtitle: 'Tecnologia de condução óssea para máxima segurança',
|
||||
features: [
|
||||
{ icon: Volume2, title: 'Notificações por Voz', desc: 'Receba métricas importantes em áudio sem olhar para nada' },
|
||||
{ icon: Music, title: 'Reprodução de Música', desc: 'Ouça suas playlists favoritas durante a corrida' },
|
||||
{ icon: Bell, title: 'Alertas Inteligentes', desc: 'Notificações de frequência cardíaca e zona de treino' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const roadmapItems = [
|
||||
{
|
||||
icon: Moon,
|
||||
title: 'Display Noturno',
|
||||
description: 'Modo de visualização otimizado para corridas noturnas com ajuste automático de brilho e contraste adaptativo.',
|
||||
quarter: 'Q3 2026',
|
||||
color: 'pink',
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: 'Integração com Sensores',
|
||||
description: 'Conexão com monitores de frequência cardíaca, pods de corrida e outros dispositivos ANT+ para métricas completas.',
|
||||
quarter: 'Q4 2026',
|
||||
color: 'teal',
|
||||
},
|
||||
];
|
||||
|
||||
export function FutureUpdates() {
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const elements = entry.target.querySelectorAll('.reveal-future');
|
||||
elements.forEach((el, index) => {
|
||||
setTimeout(() => {
|
||||
el.classList.add('animate-fade-in-up');
|
||||
}, index * 100);
|
||||
});
|
||||
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-slate-900/50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16 reveal-future opacity-0">
|
||||
<Badge className="mb-4 bg-slate-800 text-pink-400 border-pink-500/30 hover:bg-slate-700 px-4 py-1.5 text-xs font-semibold tracking-wider uppercase">
|
||||
<svg className="w-3 h-3 mr-1 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
Em Breve
|
||||
</Badge>
|
||||
<h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
|
||||
Futuras Atualizações
|
||||
</h2>
|
||||
<div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full mb-6" />
|
||||
<p className="text-slate-400 text-lg max-w-2xl mx-auto">
|
||||
O VisionRun Pro está em constante evolução. Confira as próximas funcionalidades que estão sendo desenvolvidas.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Audio Feature Card */}
|
||||
<div className="mb-12 reveal-future opacity-0">
|
||||
<div className="bg-gradient-to-br from-slate-800/80 to-slate-800/40 border border-slate-700 rounded-2xl p-6 lg:p-8">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-slate-700/50 border border-slate-600 flex items-center justify-center">
|
||||
<Headphones className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-display font-semibold text-xl text-white">
|
||||
Áudio Integrado
|
||||
</h3>
|
||||
<p className="text-slate-400 text-sm">
|
||||
Tecnologia de condução óssea para máxima segurança
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{upcomingFeatures[0].features.map((feature, index) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-slate-800/50 border border-slate-700 rounded-xl p-4 hover:border-slate-500 transition-colors"
|
||||
>
|
||||
<Icon className="w-5 h-5 text-slate-400 mb-2" />
|
||||
<h4 className="font-semibold text-white text-sm mb-1">
|
||||
{feature.title}
|
||||
</h4>
|
||||
<p className="text-slate-400 text-xs leading-relaxed">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Roadmap Grid */}
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{roadmapItems.map((item, index) => {
|
||||
const Icon = item.icon;
|
||||
const colorClasses =
|
||||
item.color === 'pink'
|
||||
? 'bg-pink-500/10 text-pink-400 border-pink-500/30'
|
||||
: 'bg-teal-500/10 text-teal-400 border-teal-500/30';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="reveal-future opacity-0 bg-slate-800/50 border border-slate-700 rounded-2xl p-6 hover:border-slate-500 transition-all duration-300"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-slate-700/50 flex items-center justify-center">
|
||||
<Icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<Badge className={`${colorClasses} text-xs font-semibold`}>
|
||||
{item.quarter}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h3 className="font-display font-semibold text-lg text-white mb-2">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user