first commit

src/sections/About.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef } from 'react';
+import { Brain, Wifi, Eye } from 'lucide-react';
+
+const features = [
+  {
+    icon: Brain,
+    title: 'Inteligente',
+    description: 'Tecnologia de ponta integrada em um design ergonômico e leve. Processamento avançado para análise em tempo real.',
+    color: 'orange',
+  },
+  {
+    icon: Wifi,
+    title: 'Conectado',
+    description: 'Sincronização perfeita com seu smartphone para análise completa dos seus treinos e progresso.',
+    color: 'teal',
+  },
+  {
+    icon: Eye,
+    title: 'Em Tempo Real',
+    description: 'Visualize suas métricas sem tirar os olhos do caminho. Display HUD de alta definição sempre visível.',
+    color: 'cyan',
+  },
+];
+
+export function About() {
+  const sectionRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const elements = entry.target.querySelectorAll('.reveal-card');
+            elements.forEach((el, index) => {
+              setTimeout(() => {
+                el.classList.add('animate-fade-in-up');
+              }, index * 100);
+            });
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.2 }
+    );
+
+    if (sectionRef.current) {
+      observer.observe(sectionRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  const getColorClasses = (color: string) => {
+    const colors: Record<string, { bg: string; text: string; border: string }> = {
+      orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/30' },
+      teal: { bg: 'bg-teal-500/10', text: 'text-teal-400', border: 'border-teal-500/30' },
+      cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/30' },
+    };
+    return colors[color] || colors.orange;
+  };
+
+  return (
+    <section id="sobre" ref={sectionRef} className="py-24 lg:py-32 bg-[#0f172a]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <h2 className="font-display font-bold text-3xl sm:text-4xl lg:text-5xl text-white mb-4">
+            Sobre o Produto
+          </h2>
+          <div className="w-16 h-1 bg-gradient-to-r from-orange-500 to-orange-400 mx-auto rounded-full" />
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
+          {features.map((feature, index) => {
+            const colors = getColorClasses(feature.color);
+            const Icon = feature.icon;
+
+            return (
+              <div
+                key={index}
+                className="reveal-card opacity-0 group relative bg-slate-800/50 border border-slate-700 rounded-2xl p-8 hover:border-slate-500 transition-all duration-300 hover:-translate-y-2 hover:shadow-xl hover:shadow-slate-900/50"
+              >
+                {/* Icon */}
+                <div
+                  className={`w-14 h-14 rounded-xl ${colors.bg} border ${colors.border} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}
+                >
+                  <Icon className={`w-7 h-7 ${colors.text}`} />
+                </div>
+
+                {/* Content */}
+                <h3 className="font-display font-semibold text-xl text-white mb-3">
+                  {feature.title}
+                </h3>
+                <p className="text-slate-400 leading-relaxed">
+                  {feature.description}
+                </p>
+
+                {/* Hover Glow */}
+                <div
+                  className={`absolute inset-0 rounded-2xl ${colors.bg} opacity-0 group-hover:opacity-100 transition-opacity duration-300 -z-10 blur-xl`}
+                />
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Description Box */}
+        <div className="mt-16 reveal-card opacity-0">
+          <div className="bg-gradient-to-r from-slate-800/80 to-slate-800/40 border border-slate-700 rounded-2xl p-8 lg:p-10">
+            <p className="text-slate-300 text-center text-lg leading-relaxed max-w-4xl mx-auto">
+              O <span className="text-orange-400 font-semibold">VisionRun Pro</span> é um óculos inteligente desenvolvido para auxiliar corredores durante seus treinos. Ele permite visualizar informações importantes em tempo real, sem a necessidade de olhar para o celular.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}