feat: Add instructions for local development and deployment
Updates README.md with clear steps for running the AI Studio app locally, including prerequisites and commands. Introduces a .env.example file to guide users on API key configuration. Adds a .gitignore file to prevent unnecessary files from being committed. Updates asset files (images) with new metadata.
This commit is contained in:
cauefaleiros
9
.env.example
Normal file
9
.env.example
Normal file
@@ -0,0 +1,9 @@
|
||||
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||
# AI Studio automatically injects this at runtime from user secrets.
|
||||
# Users configure this via the Secrets panel in the AI Studio UI.
|
||||
GEMINI_API_KEY="MY_GEMINI_API_KEY"
|
||||
|
||||
# APP_URL: The URL where this applet is hosted.
|
||||
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
|
||||
# Used for self-referential links, OAuth callbacks, and API endpoints.
|
||||
APP_URL="MY_APP_URL"
|
||||
8
.gitignore
vendored
Normal file
8
.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
coverage/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env*
|
||||
!.env.example
|
||||
25
README.md
25
README.md
@@ -1,11 +1,20 @@
|
||||
<div align="center">
|
||||
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
|
||||
<h1>Built with AI Studio</h2>
|
||||
|
||||
<p>The fastest path from prompt to production with Gemini.</p>
|
||||
|
||||
<a href="https://aistudio.google.com/apps">Start building</a>
|
||||
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/895b5e6f-2f53-4698-8c85-254822f236ac
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
|
||||
BIN
assets/banner-faleiros-tv-1.jpg
Normal file
BIN
assets/banner-faleiros-tv-1.jpg
Normal file
Binary file not shown.
BIN
assets/conserto-eletrodomesticos.png
Normal file
BIN
assets/conserto-eletrodomesticos.png
Normal file
Binary file not shown.
BIN
assets/conserto-microondas.png
Normal file
BIN
assets/conserto-microondas.png
Normal file
Binary file not shown.
BIN
assets/instalação-de-tv.jpg
Normal file
BIN
assets/instalação-de-tv.jpg
Normal file
Binary file not shown.
BIN
assets/logo-faleiros-tv-negativada.png
Normal file
BIN
assets/logo-faleiros-tv-negativada.png
Normal file
Binary file not shown.
BIN
assets/logo-faleiros-tv.png
Normal file
BIN
assets/logo-faleiros-tv.png
Normal file
Binary file not shown.
BIN
assets/tv-quebrada.png
Normal file
BIN
assets/tv-quebrada.png
Normal file
Binary file not shown.
314
index.html
Normal file
314
index.html
Normal file
@@ -0,0 +1,314 @@
|
||||
<!doctype html>
|
||||
<html lang="pt-BR" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Faleiros TV - Assistência Técnica Especializada</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<div class="font-sans text-[#2D3748] bg-white">
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100 py-4 px-6 md:px-12 flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<img src="/logo-faleiros-tv.png" alt="Faleiros TV" class="h-10 md:h-12" />
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-8">
|
||||
<a href="#inicio" class="text-[#2D3748] hover:text-[#00AEEF] font-medium transition-colors">Início</a>
|
||||
<a href="#servicos" class="text-[#2D3748] hover:text-[#00AEEF] font-medium transition-colors">Serviços</a>
|
||||
<a href="#como-funciona" class="text-[#2D3748] hover:text-[#00AEEF] font-medium transition-colors">Como Funciona</a>
|
||||
<a href="#avaliacoes" class="text-[#2D3748] hover:text-[#00AEEF] font-medium transition-colors">Avaliações</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="inicio" class="relative bg-gray-900 py-24 md:py-32 px-6 md:px-12 flex items-center justify-center min-h-[600px]">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<img
|
||||
src="/banner-faleiros-tv-1.jpg"
|
||||
alt="Assistência Técnica"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-[#0A2540]/80 to-[#0A2540]/50"></div>
|
||||
</div>
|
||||
<div class="relative z-10 max-w-3xl text-center">
|
||||
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
Assistência Técnica Especializada em TVs e Eletrodomésticos
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-gray-200 mb-10 leading-relaxed max-w-2xl mx-auto">
|
||||
Serviço rápido, transparente e com garantia. Devolva a vida aos seus aparelhos com a equipe mais qualificada da região.
|
||||
</p>
|
||||
<a href="https://wa.me/5516991285847" target="_blank" rel="noopener noreferrer" class="inline-block bg-[#00AEEF] hover:bg-[#007BB5] text-white font-semibold py-4 px-8 rounded-lg text-lg transition-colors shadow-lg cursor-pointer">
|
||||
Agendar Avaliação
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Trust Bar -->
|
||||
<section class="bg-[#F8FAFC] border-b border-gray-200 py-8 px-6 md:px-12">
|
||||
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 text-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF] mb-3"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||||
<h3 class="font-semibold text-[#2D3748] text-lg">Atendimento a Domicílio</h3>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF] mb-3"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2-1 4-2 7-2 2.82 0 5.3 1.02 7 2a1 1 0 0 1 1 1v7z"/><path d="m9 12 2 2 4-4"/></svg>
|
||||
<h3 class="font-semibold text-[#2D3748] text-lg">Garantia de Serviço</h3>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF] mb-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="16 11 18 13 22 9"/></svg>
|
||||
<h3 class="font-semibold text-[#2D3748] text-lg">Técnicos Qualificados</h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="servicos" class="py-20 px-6 md:px-12 bg-white">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-[#2D3748] mb-16">Nossos Serviços</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Service 1 -->
|
||||
<div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
|
||||
<div class="h-48 overflow-hidden">
|
||||
<img src="/instalação-de-tv.jpg" alt="Conserto de TVs" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="p-8 flex-grow flex flex-col">
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">Conserto de TVs</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed flex-grow">
|
||||
Especialistas em Smart TVs, LED, OLED e QLED. Resolvemos problemas de imagem, som, conectividade e placa principal com peças originais e diagnóstico preciso.
|
||||
</p>
|
||||
<a href="https://wa.me/5516991285847" target="_blank" rel="noopener noreferrer" class="text-[#00AEEF] underline font-semibold hover:text-[#007BB5] mt-6 inline-block">Agendar avaliação</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service 2 -->
|
||||
<div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
|
||||
<div class="h-48 overflow-hidden">
|
||||
<img src="/conserto-microondas.png" alt="Conserto de Micro-ondas" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="p-8 flex-grow flex flex-col">
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">Conserto de Micro-ondas</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed flex-grow">
|
||||
Reparo completo para micro-ondas que não esquentam, apresentam falhas no painel ou problemas no prato giratório. Segurança e eficiência em cada conserto.
|
||||
</p>
|
||||
<a href="https://wa.me/5516991285847" target="_blank" rel="noopener noreferrer" class="text-[#00AEEF] underline font-semibold hover:text-[#007BB5] mt-6 inline-block">Agendar avaliação</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Service 3 -->
|
||||
<div class="bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
|
||||
<div class="h-48 overflow-hidden">
|
||||
<img src="/conserto-eletrodomesticos.png" alt="Eletrodomésticos" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div class="p-8 flex-grow flex flex-col">
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">Eletrodomésticos</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed flex-grow">
|
||||
Manutenção preventiva e corretiva para diversos eletrodomésticos da sua casa. Aumente a vida útil dos seus aparelhos com nosso serviço especializado.
|
||||
</p>
|
||||
<a href="https://wa.me/5516991285847" target="_blank" rel="noopener noreferrer" class="text-[#00AEEF] underline font-semibold hover:text-[#007BB5] mt-6 inline-block">Agendar avaliação</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interruption Banner -->
|
||||
<section class="relative bg-[#0A2540] py-16 px-6 md:px-12 overflow-hidden">
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<!-- Imagem removida para teste -->
|
||||
</div>
|
||||
<div class="relative z-10 max-w-5xl mx-auto text-center px-4">
|
||||
<h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-white mb-8 whitespace-normal md:whitespace-nowrap">
|
||||
Sua TV quebrou e não compensa consertar? Nós compramos!
|
||||
</h2>
|
||||
<a href="https://wa.me/5516991285847" target="_blank" rel="noopener noreferrer" class="inline-block bg-transparent border-2 border-white text-white hover:bg-white hover:text-[#0A2540] font-semibold py-3 px-8 rounded-lg text-lg transition-colors cursor-pointer">
|
||||
Quero vender minha TV
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section id="como-funciona" class="py-20 px-6 md:px-12 bg-white">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-center text-[#2D3748] mb-16">Como Funciona</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-[#F8FAFC] rounded-full flex items-center justify-center mb-6 border border-gray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF]"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">1. Contato</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed">
|
||||
Fale conosco e descreva o problema do seu aparelho. Nossa equipe fará um pré-atendimento rápido para entender sua necessidade.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-[#F8FAFC] rounded-full flex items-center justify-center mb-6 border border-gray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF]"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">2. Avaliação</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed">
|
||||
Um técnico especializado fará uma avaliação detalhada do equipamento, identificando a causa raiz e apresentando um orçamento transparente.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="w-16 h-16 bg-[#F8FAFC] rounded-full flex items-center justify-center mb-6 border border-gray-100">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-[#00AEEF]"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-[#2D3748] mb-4">3. Conserto</h3>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed">
|
||||
Após sua aprovação, realizamos o reparo utilizando peças de qualidade e testamos o aparelho para garantir o funcionamento perfeito.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Social Proof (Google Reviews) -->
|
||||
<section id="avaliacoes" class="py-20 px-6 md:px-12 bg-[#F8FAFC]">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-[#2D3748] mb-4">O que dizem nossos clientes</h2>
|
||||
<p class="text-lg text-[#2D3748]/70">Excelência comprovada por nossos clientes</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Review 1 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="flex text-yellow-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed mb-6 italic flex-grow">
|
||||
"Excelente atendimento na Faleiros TV! Levei minha Airfryer que não ligava mais e o conserto foi super rápido e com preço justo. Voltarei com certeza."
|
||||
</p>
|
||||
<p class="font-bold text-[#2D3748] mt-auto">- João Pedro</p>
|
||||
</div>
|
||||
<!-- Review 2 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="flex text-yellow-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed mb-6 italic flex-grow">
|
||||
"Minha TV parou de dar imagem e eles resolveram o problema no mesmo dia. Profissionais honestos e muito capacitados. Recomendo a todos!"
|
||||
</p>
|
||||
<p class="font-bold text-[#2D3748] mt-auto">- Maria Fernanda</p>
|
||||
</div>
|
||||
<!-- Review 3 -->
|
||||
<div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex flex-col h-full">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="flex text-yellow-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 fill-current"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-[#2D3748]/80 leading-relaxed mb-6 italic flex-grow">
|
||||
"Consertaram meu micro-ondas que estava fazendo um barulho estranho. O técnico explicou exatamente qual era o defeito. Assistência de total confiança."
|
||||
</p>
|
||||
<p class="font-bold text-[#2D3748] mt-auto">- Ricardo Gomes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-[#1A202C] text-gray-300 py-16 px-6 md:px-12">
|
||||
<div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
|
||||
<div class="md:col-span-12 lg:col-span-5">
|
||||
<img src="/logo-faleiros-tv-negativada.png" alt="Faleiros TV" class="h-12 mb-6" />
|
||||
<p class="text-gray-400 leading-relaxed max-w-sm">
|
||||
Assistência técnica especializada em TVs e eletrodomésticos.<br />
|
||||
Qualidade, transparência e garantia em cada serviço prestado.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:col-span-6 lg:col-span-4">
|
||||
<h4 class="text-white font-bold text-lg mb-6">Contato</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-[#00AEEF] shrink-0 mt-0.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
<span>(16) 99128-5847</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-[#00AEEF] shrink-0 mt-0.5"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||
<span>R. Cap. Luís de Faria Batista, 106<br />Planalto Verde, Ribeirão Preto - SP<br />14056-284</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="md:col-span-6 lg:col-span-3">
|
||||
<h4 class="text-white font-bold text-lg mb-6">Horário</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 mr-3 text-[#00AEEF] shrink-0 mt-0.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
<div>
|
||||
<p>Segunda a Sexta</p>
|
||||
<p class="text-gray-400">08:00 às 18:00</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<div class="w-5 h-5 mr-3 shrink-0"></div>
|
||||
<div>
|
||||
<p>Sábado</p>
|
||||
<p class="text-gray-400">08:00 às 12:00</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-6xl mx-auto mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
|
||||
<p>© 2026 Agência Compor. Todos os direitos reservados.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Floating WhatsApp Button -->
|
||||
<a
|
||||
id="whatsapp-button"
|
||||
href="https://wa.me/5516991285847"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="fixed bottom-6 right-6 bg-[#25D366] hover:bg-[#1EBE5D] text-white rounded-full p-3 sm:py-3 sm:px-5 flex items-center shadow-xl hover:shadow-2xl transition-all duration-300 z-50 group translate-y-20 opacity-0 pointer-events-none sm:translate-y-0 sm:opacity-100 sm:pointer-events-auto"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 sm:mr-2"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
<span class="hidden sm:block font-semibold">Fale Conosco</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const whatsappBtn = document.getElementById('whatsapp-button');
|
||||
|
||||
if (whatsappBtn) {
|
||||
const handleScroll = () => {
|
||||
// Show button after scrolling down just a little bit (150px)
|
||||
if (window.scrollY > 150) {
|
||||
whatsappBtn.classList.remove('translate-y-20', 'opacity-0', 'pointer-events-none');
|
||||
whatsappBtn.classList.add('translate-y-0', 'opacity-100', 'pointer-events-auto');
|
||||
} else {
|
||||
whatsappBtn.classList.add('translate-y-20', 'opacity-0', 'pointer-events-none');
|
||||
whatsappBtn.classList.remove('translate-y-0', 'opacity-100', 'pointer-events-auto');
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
// Check initial scroll position
|
||||
handleScroll();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
metadata.json
Normal file
5
metadata.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "",
|
||||
"description": "",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
34
package.json
Normal file
34
package.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"name": "react-example",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@google/genai": "^1.29.0",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"lucide-react": "^0.546.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"vite": "^6.2.0",
|
||||
"express": "^4.21.2",
|
||||
"dotenv": "^17.2.3",
|
||||
"motion": "^12.23.24"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0",
|
||||
"@types/express": "^4.17.21"
|
||||
}
|
||||
}
|
||||
5
src/index.css
Normal file
5
src/index.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
1
src/main.tsx
Normal file
1
src/main.tsx
Normal file
@@ -0,0 +1 @@
|
||||
import './index.css';
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
24
vite.config.ts
Normal file
24
vite.config.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
import {defineConfig, loadEnv} from 'vite';
|
||||
|
||||
export default defineConfig(({mode}) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
plugins: [react(), tailwindcss()],
|
||||
define: {
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
// HMR is disabled in AI Studio via DISABLE_HMR env var.
|
||||
// Do not modifyâfile watching is disabled to prevent flickering during agent edits.
|
||||
hmr: process.env.DISABLE_HMR !== 'true',
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user