first commit
This commit is contained in:
189
src/sections/Technology.tsx
Normal file
189
src/sections/Technology.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user