190 lines
7.5 KiB
TypeScript
190 lines
7.5 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Cpu, Box, MapPin, Battery } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
const techCards = [
|
|
{
|
|
icon: Cpu,
|
|
title: 'Microcontrolador ESP32',
|
|
description: 'Processador dual-core de 240MHz com conectividade Wi-Fi e Bluetooth integrada para máxima performance.',
|
|
tags: [
|
|
{ label: 'Dual-core Xtensa', color: 'slate' },
|
|
{ label: '520KB SRAM', color: 'slate' },
|
|
{ label: 'Wi-Fi 802.11 b/g/n', color: 'slate' },
|
|
{ label: 'Bluetooth 4.2', color: 'slate' },
|
|
],
|
|
color: 'blue',
|
|
},
|
|
{
|
|
icon: Box,
|
|
title: 'Impressão 3D Avançada',
|
|
description: 'Estrutura fabricada com tecnologia de impressão 3D de alta precisão, garantindo design ergonômico e peso reduzido.',
|
|
tags: [
|
|
{ label: 'Material PLA+', color: 'orange' },
|
|
{ label: 'Resistente a UV', color: 'orange' },
|
|
{ label: 'Ultra-leve', color: 'orange' },
|
|
{ label: 'Design customizável', color: 'orange' },
|
|
],
|
|
color: 'orange',
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: 'Módulo GPS',
|
|
description: 'GPS de alta precisão para rastreamento exato de localização, velocidade e distância em tempo real.',
|
|
tags: [
|
|
{ label: 'Precisão <3m', color: 'slate' },
|
|
{ label: 'Atualização 10Hz', color: 'slate' },
|
|
{ label: 'Multi-GNSS', color: 'slate' },
|
|
{ label: 'Cold start <30s', color: 'slate' },
|
|
],
|
|
color: 'teal',
|
|
},
|
|
{
|
|
icon: Battery,
|
|
title: 'Bateria Inteligente',
|
|
description: 'Sistema de energia otimizado com bateria de lítio recarregável via USB-C para até 8 horas de uso contínuo.',
|
|
tags: [
|
|
{ label: 'Li-Po 500mAh', color: 'orange' },
|
|
{ label: 'USB-C Fast Charge', color: 'orange' },
|
|
{ label: '8h autonomia', color: 'orange' },
|
|
{ label: 'Carregamento 2h', color: 'orange' },
|
|
],
|
|
color: 'green',
|
|
},
|
|
];
|
|
|
|
export function Technology() {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const elements = entry.target.querySelectorAll('.reveal-tech');
|
|
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 id="tecnologia" 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-tech 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">
|
|
Tecnologia Avançada
|
|
</Badge>
|
|
<h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
|
|
Tecnologia de Ponta
|
|
</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">
|
|
Hardware e software de última geração combinados para criar uma experiência única em óculos de corrida inteligentes.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Tech Cards Grid */}
|
|
<div className="grid md:grid-cols-2 gap-6 lg:gap-8">
|
|
{techCards.map((card, index) => {
|
|
const Icon = card.icon;
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className="reveal-tech opacity-0 group relative bg-gradient-to-br from-slate-800/80 to-slate-800/40 border border-slate-700 rounded-2xl p-6 lg:p-8 hover:border-slate-500 transition-all duration-300 hover:-translate-y-1"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-start gap-4 mb-4">
|
|
<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-xl text-white mb-1">
|
|
{card.title}
|
|
</h3>
|
|
<div className="w-12 h-0.5 bg-orange-500 rounded-full" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<p className="text-slate-400 mb-6 leading-relaxed">
|
|
{card.description}
|
|
</p>
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{card.tags.map((tag, tagIndex) => (
|
|
<Badge
|
|
key={tagIndex}
|
|
variant="secondary"
|
|
className={`${
|
|
tag.color === 'orange'
|
|
? 'bg-orange-500/10 text-orange-400 border-orange-500/20'
|
|
: 'bg-slate-700 text-slate-300 border-slate-600'
|
|
} border text-xs font-medium px-3 py-1`}
|
|
>
|
|
{tag.label}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Connectivity Banner */}
|
|
<div className="mt-12 reveal-tech opacity-0">
|
|
<div className="bg-gradient-to-r from-slate-800/60 to-slate-800/30 border border-slate-700 rounded-2xl p-6 lg:p-8">
|
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center">
|
|
<svg className="w-6 h-6 text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-display font-semibold text-lg text-white">
|
|
Conectividade Sem Limites
|
|
</h4>
|
|
<p className="text-slate-400 text-sm">
|
|
O ESP32 oferece conectividade Bluetooth 4.2 e Wi-Fi integrada
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{['Bluetooth LE', 'Wi-Fi Direct', 'OTA Updates', 'Low Power Mode'].map((item, i) => (
|
|
<Badge
|
|
key={i}
|
|
className={`${
|
|
i % 2 === 0
|
|
? 'bg-slate-700 text-slate-300 border-slate-600'
|
|
: 'bg-teal-500/10 text-teal-400 border-teal-500/30'
|
|
} border text-xs font-medium px-3 py-1`}
|
|
>
|
|
{item}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|