feat: Initialize CAR Auto Center project with Vite and React

Sets up the foundational structure for the CAR Auto Center application using Vite and React. Includes project dependencies, basic HTML structure, TypeScript configuration, and initial README content. This commit establishes the project's build tool, core libraries, and essential configuration files.

components/Hero.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { ArrowRight, Settings } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Button, Container } from './Shared';
+import { useData } from '../contexts/DataContext';
+
+export const Hero: React.FC = () => {
+  const { data } = useData();
+  const { hero, texts } = data;
+
+  return (
+    <section id="home" className="relative min-h-screen flex items-center justify-center pt-20 overflow-hidden">
+      {/* Background Image with Overlay */}
+      <div className="absolute inset-0 z-0">
+        <img 
+          src={hero.bgImage} 
+          alt="Oficina Mecânica" 
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-r from-black via-black/80 to-transparent" />
+      </div>
+
+      <Container className="relative z-10 w-full">
+        <div className="max-w-2xl">
+          {/* Badge atualizado com border-primary sólido */}
+          <div className="inline-flex items-center gap-2 bg-primary/10 border border-primary rounded-full px-4 py-1 mb-6 backdrop-blur-sm">
+            <Settings size={16} className="text-primary" />
+            <span className="text-primary text-sm font-semibold uppercase tracking-wider">Centro Automotivo Premium</span>
+          </div>
+          
+          <h1 className="text-5xl md:text-7xl font-black text-white leading-tight mb-6">
+            <span dangerouslySetInnerHTML={{ __html: hero.title.replace(/\n/g, '<br/>') }} />
+          </h1>
+          
+          <p className="text-xl text-gray-300 mb-8 border-l-4 border-primary pl-4">
+            {hero.subtitle}
+          </p>
+
+          <div className="flex flex-col sm:flex-row gap-4">
+            <Button size="lg" className="shadow-[0_0_30px_-5px_rgba(var(--primary-color),0.4)]" onClick={() => window.open(`https://wa.me/${data.settings.whatsappNumber}`, '_blank')}>
+              {hero.buttonText} <ArrowRight size={20} />
+            </Button>
+            <Link to="/servicos">
+              <Button size="lg" variant="white" className="w-full sm:w-auto">
+                Ver Serviços
+              </Button>
+            </Link>
+          </div>
+
+          <div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-8 text-gray-400 text-sm font-medium">
+            <div className="flex items-center gap-2">
+              <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              {texts.hero.feature1}
+            </div>
+            <div className="hidden sm:block">|</div>
+            <div>{texts.hero.feature2}</div>
+            <div className="hidden sm:block">|</div>
+            <div>{texts.hero.feature3}</div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+};