Built with AI Studio

The fastest path from prompt to production with Gemini.

Start building

My Google AI Studio App

} /> } /> } /> } /> } /> } /> } />

= ({ product }) => { const { addToCart } = useCart(); return (

{product.stock <= 0 && (

Esgotado

)}

{product.name}

R$ {product.price.toFixed(2)}

{product.description}

); }; ‎src/components/ProjectCalculator.tsx‎ + 154 Linhas alteradas: 154 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,154 @@ import React, { useState, useEffect } from 'react'; import { collection, getDocs, query, orderBy } from 'firebase/firestore'; import { db } from '../firebase'; import { ProjectPrice } from '../types'; import { Calculator, ArrowRight, MessageCircle, Sparkles } from 'lucide-react'; import { motion, AnimatePresence } from 'motion/react'; export const ProjectCalculator: React.FC = () => { const [prices, setPrices] = useState([]); const [selectedProject, setSelectedProject] = useState(null); const [quantity, setQuantity] = useState(1); const [loading, setLoading] = useState(true); useEffect(() => { const fetchPrices = async () => { try { const q = query(collection(db, 'project_prices'), orderBy('createdAt', 'desc')); const snapshot = await getDocs(q); const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as ProjectPrice)); setPrices(data); if (data.length > 0) setSelectedProject(data[0]); } catch (error) { console.error('Error fetching project prices:', error); } finally { setLoading(false); } }; fetchPrices(); }, []); const total = selectedProject ? selectedProject.basePrice * quantity : 0; const handleWhatsApp = () => { if (!selectedProject) return; const message = `Olá! Gostaria de um orçamento para: Projeto: ${selectedProject.name} Quantidade: ${quantity} ${selectedProject.unitName} Valor Estimado: R$ ${total.toFixed(2)}`; window.open(`https://wa.me/5511971878021?text=${encodeURIComponent(message)}`, '_blank'); }; if (loading) return null; if (prices.length === 0) return null; return (

Orçamento Instantâneo

Calcule seu Projeto Elétrico

Selecione o tipo de projeto e informe a metragem ou quantidade de pontos para receber uma estimativa automática de valores.

Transparência Total

Valores baseados em nossa tabela atualizada.

Suporte via WhatsApp

Tire suas dúvidas técnicas em tempo real.

Tipo de Projeto

{prices.map((p) => ( ))}

{selectedProject && (

Quantidade ({selectedProject.unitName}) setQuantity(Math.max(1, parseInt(e.target.value) || 0))} className="w-full px-6 py-4 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none font-bold text-xl" />

Total Estimado

R$ {total.toFixed(2)}

)}

); }; ‎src/components/WhatsAppWidget.tsx‎ + 70 Linhas alteradas: 70 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,70 @@ import React, { useState } from 'react'; import { MessageCircle, Send, X } from 'lucide-react'; import { motion, AnimatePresence } from 'motion/react'; export const WhatsAppWidget: React.FC = () => { const [isOpen, setIsOpen] = useState(false); const [message, setMessage] = useState(''); const phoneNumber = '5511971878021'; const handleSendMessage = (e: React.FormEvent) => { e.preventDefault(); const encodedMessage = encodeURIComponent(message || 'Olá! Gostaria de saber mais sobre os produtos da AMEW.'); window.open(`https://wa.me/${phoneNumber}?text=${encodedMessage}`, '_blank'); setIsOpen(false); setMessage(''); }; return (

{isOpen && (

Atendimento AMEW

Online agora

Olá! Como podemos ajudar você hoje?

setMessage(e.target.value)}
                placeholder="Digite sua mensagem..."
                className="w-full px-4 py-3 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none h-24 resize-none text-sm"
              />
              <button
                type="submit"
                className="w-full flex items-center justify-center gap-2 bg-emerald-500 text-white py-3 rounded-xl font-bold hover:bg-emerald-600 transition-all"
              >
                Iniciar Conversa <Send className="w-4 h-4" />
              </button>
            </form>
          </motion.div>
        )}
      </AnimatePresence>
      <motion.button
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={() => setIsOpen(!isOpen)}
        className="w-16 h-16 bg-emerald-500 text-white rounded-full flex items-center justify-center shadow-xl hover:bg-emerald-600 transition-all relative"
      >
        <MessageCircle className="w-8 h-8" />
        <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full border-2 border-white animate-pulse"></span>
      </motion.button>
    </div>
  );
};
‎src/context/CartContext.tsx‎
+ 66
Linhas alteradas: 66 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,66 @@
import React, { createContext, useContext, useState, useEffect } from 'react';
import { CartItem, Product } from '../types';
interface CartContextType {
  cart: CartItem[];
  addToCart: (product: Product) => void;
  removeFromCart: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  total: number;
}
const CartContext = createContext<CartContextType | undefined>(undefined);
export const CartProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [cart, setCart] = useState<CartItem[]>(() => {
    const saved = localStorage.getItem('cart');
    return saved ? JSON.parse(saved) : [];
  });
  useEffect(() => {
    localStorage.setItem('cart', JSON.stringify(cart));
  }, [cart]);
  const addToCart = (product: Product) => {
    setCart(prev => {
      const existing = prev.find(item => item.id === product.id);
      if (existing) {
        return prev.map(item =>
          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };
  const removeFromCart = (productId: string) => {
    setCart(prev => prev.filter(item => item.id !== productId));
  };
  const updateQuantity = (productId: string, quantity: number) => {
    if (quantity <= 0) {
      removeFromCart(productId);
      return;
    }
    setCart(prev =>
      prev.map(item => (item.id === productId ? { ...item, quantity } : item))
    );
  };
  const clearCart = () => setCart([]);
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  return (
    <CartContext.Provider value={{ cart, addToCart, removeFromCart, updateQuantity, clearCart, total }}>
      {children}
    </CartContext.Provider>
  );
};
export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) throw new Error('useCart must be used within a CartProvider');
  return context;
};
‎src/firebase.ts‎
+ 8
Linhas alteradas: 8 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,8 @@
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import firebaseConfig from '../firebase-applet-config.json';
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app, firebaseConfig.firestoreDatabaseId);
export const auth = getAuth(app);
‎src/index.css‎
+ 7
Linhas alteradas: 7 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,7 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import "tailwindcss";
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
}
‎src/main.tsx‎
+ 10
Linhas alteradas: 10 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,10 @@
import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.tsx';
import './index.css';
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);
‎src/pages/Admin.tsx‎
+ 826
Linhas alteradas: 826 adições e 0 exclusões
Grandes diferenças não são exibidas por padrão.
‎src/pages/Cart.tsx‎
+ 105
Linhas alteradas: 105 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,105 @@
import React from 'react';
import { useCart } from '../context/CartContext';
import { Link } from 'react-router-dom';
import { Trash2, Plus, Minus, ArrowRight, ShoppingBag } from 'lucide-react';
import { motion } from 'motion/react';
export const Cart: React.FC = () => {
  const { cart, removeFromCart, updateQuantity, total } = useCart();
  if (cart.length === 0) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-20 text-center">
        <div className="w-20 h-20 bg-zinc-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <ShoppingBag className="w-10 h-10 text-zinc-400" />
        </div>
        <h2 className="text-2xl font-bold mb-4">Seu carrinho está vazio</h2>
        <p className="text-zinc-500 mb-8">Parece que você ainda não adicionou nenhuma caixa mágica.</p>
        <Link to="/produtos" className="inline-flex items-center gap-2 bg-zinc-900 text-white px-8 py-4 rounded-full font-bold hover:bg-zinc-800 transition-colors">
          Começar a comprar <ArrowRight className="w-5 h-5" />
        </Link>
      </div>
    );
  }
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <h1 className="text-4xl font-bold tracking-tight mb-12">Meu Carrinho</h1>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
        <div className="lg:col-span-2 space-y-6">
          {cart.map((item) => (
            <motion.div
              layout
              key={item.id}
              className="flex items-center gap-6 p-6 bg-white rounded-3xl border border-black/5"
            >
              <img
                src={item.imageUrl}
                alt={item.name}
                className="w-24 h-24 object-cover rounded-2xl"
                referrerPolicy="no-referrer"
              />
              <div className="flex-1">
                <h3 className="font-bold text-lg">{item.name}</h3>
                <p className="text-zinc-500 text-sm mb-2">R$ {item.price.toFixed(2)}</p>
                <div className="flex items-center gap-4">
                  <div className="flex items-center border border-zinc-200 rounded-lg overflow-hidden">
                    <button
                      onClick={() => updateQuantity(item.id, item.quantity - 1)}
                      className="p-2 hover:bg-zinc-50 transition-colors"
                    >
                      <Minus className="w-4 h-4" />
                    </button>
                    <span className="w-10 text-center font-medium">{item.quantity}</span>
                    <button
                      onClick={() => updateQuantity(item.id, item.quantity + 1)}
                      className="p-2 hover:bg-zinc-50 transition-colors"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                  <button
                    onClick={() => removeFromCart(item.id)}
                    className="text-red-500 hover:text-red-600 p-2 transition-colors"
                  >
                    <Trash2 className="w-5 h-5" />
                  </button>
                </div>
              </div>
              <div className="text-right">
                <p className="font-bold text-lg">R$ {(item.price * item.quantity).toFixed(2)}</p>
              </div>
            </motion.div>
          ))}
        </div>
        <div className="lg:col-span-1">
          <div className="bg-zinc-50 p-8 rounded-3xl border border-black/5 sticky top-24">
            <h2 className="text-xl font-bold mb-6">Resumo do Pedido</h2>
            <div className="space-y-4 mb-8">
              <div className="flex justify-between text-zinc-600">
                <span>Subtotal</span>
                <span>R$ {total.toFixed(2)}</span>
              </div>
              <div className="flex justify-between text-zinc-600">
                <span>Frete</span>
                <span className="text-emerald-600 font-medium">Grátis</span>
              </div>
              <div className="pt-4 border-t border-zinc-200 flex justify-between items-center">
                <span className="text-lg font-bold">Total</span>
                <span className="text-2xl font-bold text-emerald-600">R$ {total.toFixed(2)}</span>
              </div>
            </div>
            <Link
              to="/checkout"
              className="w-full flex items-center justify-center gap-2 bg-emerald-600 text-white py-4 rounded-2xl font-bold hover:bg-emerald-700 transition-colors"
            >
              Finalizar Compra <ArrowRight className="w-5 h-5" />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};
‎src/pages/Checkout.tsx‎
+ 284
Linhas alteradas: 284 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,284 @@
import React, { useState } from 'react';
import { useCart } from '../context/CartContext';
import { auth, db } from '../firebase';
import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
import { useNavigate } from 'react-router-dom';
import { motion } from 'motion/react';
import { CreditCard, QrCode, CheckCircle2, ArrowLeft, MessageCircle } from 'lucide-react';
import toast from 'react-hot-toast';
export const Checkout: React.FC = () => {
  const { cart, total, clearCart } = useCart();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [step, setStep] = useState<'info' | 'payment' | 'success'>('info');
  const [formData, setFormData] = useState({
    name: '',
    email: auth.currentUser?.email || '',
    phone: '',
    address: '',
    city: '',
    zip: ''
  });
  const handleInfoSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setStep('payment');
  };
  const handlePayment = async (method: string) => {
    if (!auth.currentUser) {
      toast.error('Você precisa estar logado para finalizar a compra.');
      return;
    }
    setLoading(true);
    try {
      const orderData = {
        userId: auth.currentUser.uid,
        items: cart,
        total,
        status: method === 'WhatsApp' ? 'pending' : 'paid',
        paymentMethod: method,
        customerInfo: formData,
        createdAt: serverTimestamp()
      };
      const docRef = await addDoc(collection(db, 'orders'), orderData);
      
      if (method === 'WhatsApp') {
        const orderId = docRef.id.slice(-6).toUpperCase();
        const itemsList = cart.map(item => `- ${item.quantity}x ${item.name}`).join('%0A');
        const message = `*NOVO PEDIDO AMEWLUZ - #${orderId}*%0A%0A` +
          `*Cliente:* ${formData.name}%0A` +
          `*Telefone:* ${formData.phone}%0A` +
          `*Endereço:* ${formData.address}, ${formData.city}%0A%0A` +
          `*Itens:*%0A${itemsList}%0A%0A` +
          `*Total:* R$ ${total.toFixed(2)}%0A%0A` +
          `Olá! Acabei de realizar um pedido no site e gostaria de combinar o pagamento.`;
        
        window.open(`https://wa.me/5511971878021?text=${message}`, '_blank');
      }
      clearCart();
      setStep('success');
      toast.success('Pedido realizado com sucesso!');
    } catch (error) {
      console.error('Checkout error:', error);
      toast.error('Erro ao processar pedido.');
    } finally {
      setLoading(false);
    }
  };
  if (step === 'success') {
    return (
      <div className="max-w-2xl mx-auto px-4 py-20 text-center">
        <motion.div
          initial={{ scale: 0.5, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          className="w-24 h-24 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-8"
        >
          <CheckCircle2 className="w-12 h-12" />
        </motion.div>
        <h1 className="text-4xl font-bold mb-4">Pedido Confirmado!</h1>
        <p className="text-zinc-500 text-lg mb-10">
          Obrigado pela sua compra. Você receberá um e-mail com os detalhes do pedido em breve.
        </p>
        <button
          onClick={() => navigate('/')}
          className="bg-zinc-900 text-white px-10 py-4 rounded-full font-bold hover:bg-zinc-800 transition-colors"
        >
          Voltar para a Loja
        </button>
      </div>
    );
  }
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
        <div>
          {step === 'info' ? (
            <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
              <h2 className="text-3xl font-bold mb-8">Informações de Entrega</h2>
              <form onSubmit={handleInfoSubmit} className="space-y-6">
                <div className="grid grid-cols-1 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-zinc-700 mb-2">Nome Completo</label>
                    <input
                      required
                      type="text"
                      className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                      value={formData.name}
                      onChange={e => setFormData({ ...formData, name: e.target.value })}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-zinc-700 mb-2">E-mail</label>
                    <input
                      required
                      type="email"
                      className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                      value={formData.email}
                      onChange={e => setFormData({ ...formData, email: e.target.value })}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-zinc-700 mb-2">Telefone / WhatsApp</label>
                    <input
                      required
                      type="tel"
                      placeholder="(11) 99999-9999"
                      className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                      value={formData.phone}
                      onChange={e => setFormData({ ...formData, phone: e.target.value })}
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-zinc-700 mb-2">Endereço</label>
                    <input
                      required
                      type="text"
                      className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                      value={formData.address}
                      onChange={e => setFormData({ ...formData, address: e.target.value })}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-6">
                    <div>
                      <label className="block text-sm font-medium text-zinc-700 mb-2">Cidade</label>
                      <input
                        required
                        type="text"
                        className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                        value={formData.city}
                        onChange={e => setFormData({ ...formData, city: e.target.value })}
                      />
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-zinc-700 mb-2">CEP</label>
                      <input
                        required
                        type="text"
                        className="w-full px-4 py-3 rounded-xl border border-zinc-200 focus:ring-2 focus:ring-emerald-500 outline-none"
                        value={formData.zip}
                        onChange={e => setFormData({ ...formData, zip: e.target.value })}
                      />
                    </div>
                  </div>
                </div>
                <button
                  type="submit"
                  className="w-full bg-zinc-900 text-white py-4 rounded-2xl font-bold hover:bg-zinc-800 transition-all"
                >
                  Continuar para Pagamento
                </button>
              </form>
            </motion.div>
          ) : (
            <motion.div initial={{ opacity: 0, x: -20 }} animate={{ opacity: 1, x: 0 }}>
              <button onClick={() => setStep('info')} className="flex items-center gap-2 text-zinc-500 mb-6 hover:text-zinc-900">
                <ArrowLeft className="w-4 h-4" /> Voltar para entrega
              </button>
              <h2 className="text-3xl font-bold mb-8">Forma de Pagamento</h2>
              <div className="grid grid-cols-1 gap-4">
                <button
                  onClick={() => handlePayment('PIX')}
                  disabled={loading}
                  className="flex items-center justify-between p-6 border-2 border-zinc-100 rounded-2xl hover:border-emerald-500 transition-all group"
                >
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center">
                      <QrCode className="w-6 h-6" />
                    </div>
                    <div className="text-left">
                      <p className="font-bold">PIX</p>
                      <p className="text-sm text-zinc-500">Aprovação instantânea</p>
                    </div>
                  </div>
                  <div className="w-6 h-6 border-2 border-zinc-200 rounded-full group-hover:border-emerald-500" />
                </button>
                
                <button
                  onClick={() => handlePayment('Cartão')}
                  disabled={loading}
                  className="flex items-center justify-between p-6 border-2 border-zinc-100 rounded-2xl hover:border-emerald-500 transition-all group"
                >
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center">
                      <CreditCard className="w-6 h-6" />
                    </div>
                    <div className="text-left">
                      <p className="font-bold">Cartão de Crédito</p>
                      <p className="text-sm text-zinc-500">Até 12x sem juros</p>
                    </div>
                  </div>
                  <div className="w-6 h-6 border-2 border-zinc-200 rounded-full group-hover:border-emerald-500" />
                </button>
                <button
                  onClick={() => handlePayment('WhatsApp')}
                  disabled={loading}
                  className="flex items-center justify-between p-6 border-2 border-emerald-100 rounded-2xl hover:border-emerald-500 transition-all group bg-emerald-50/50"
                >
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-emerald-500 text-white rounded-xl flex items-center justify-center">
                      <MessageCircle className="w-6 h-6" />
                    </div>
                    <div className="text-left">
                      <p className="font-bold">Finalizar via WhatsApp</p>
                      <p className="text-sm text-zinc-500">Combine a entrega e receba o link de pagamento</p>
                    </div>
                  </div>
                  <div className="w-6 h-6 border-2 border-zinc-200 rounded-full group-hover:border-emerald-500" />
                </button>
                <div className="relative py-4">
                  <div className="absolute inset-0 flex items-center">
                    <span className="w-full border-t border-zinc-200"></span>
                  </div>
                  <div className="relative flex justify-center text-xs uppercase">
                    <span className="bg-white px-2 text-zinc-400 font-bold">Pagamento Online Direto</span>
                  </div>
                </div>
                <button
                  onClick={() => {
                    toast.loading('Redirecionando para o Mercado Pago...');
                    setTimeout(() => {
                      handlePayment('Mercado Pago');
                    }, 2000);
                  }}
                  disabled={loading}
                  className="flex items-center justify-center gap-3 p-6 bg-[#009EE3] text-white rounded-2xl hover:bg-[#0089C7] transition-all font-bold text-lg"
                >
                  Pagar com Mercado Pago
                </button>
              </div>
            </motion.div>
          )}
        </div>
        <div className="bg-zinc-50 p-10 rounded-3xl border border-black/5 h-fit">
          <h3 className="text-xl font-bold mb-6">Resumo do Pedido</h3>
          <div className="space-y-4 mb-8">
            {cart.map(item => (
              <div key={item.id} className="flex justify-between items-center">
                <div className="flex items-center gap-3">
                  <span className="text-sm font-bold bg-zinc-200 w-6 h-6 rounded-full flex items-center justify-center">{item.quantity}</span>
                  <span className="text-zinc-600">{item.name}</span>
                </div>
                <span className="font-medium">R$ {(item.price * item.quantity).toFixed(2)}</span>
              </div>
            ))}
          </div>
          <div className="pt-6 border-t border-zinc-200 flex justify-between items-center">
            <span className="text-lg font-bold">Total</span>
            <span className="text-2xl font-bold text-emerald-600">R$ {total.toFixed(2)}</span>
          </div>
        </div>
      </div>
    </div>
  );
};
‎src/pages/Contact.tsx‎
+ 104
Linhas alteradas: 104 adições e 0 exclusões
Número da linha do arquivo original	Número da linha diferente	Mudança de linha diferencial
@@ -0,0 +1,104 @@
import React, { useState } from 'react';
import { Mail, Phone, MapPin, Send } from 'lucide-react';
import { motion } from 'motion/react';
import toast from 'react-hot-toast';
export const Contact: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => {
      toast.success('Mensagem enviada com sucesso!');
      setLoading(false);
      (e.target as HTMLFormElement).reset();
    }, 1500);
  };
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
        <div>
          <h1 className="text-5xl font-bold tracking-tighter mb-6 leading-none">
            Vamos criar algo <span className="text-emerald-600 italic">mágico</span> juntos?
          </h1>
          <p className="text-xl text-zinc-500 mb-12 leading-relaxed">
            Tem alguma dúvida sobre nossas caixas ou quer um pedido personalizado? Nossa equipe está pronta para te ajudar.
          </p>
          <div className="space-y-8">
            <div className="flex items-center gap-6">
              <div className="w-14 h-14 bg-zinc-100 rounded-2xl flex items-center justify-center text-zinc-600">
                <Mail className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm text-zinc-500 font-medium uppercase tracking-wider">E-mail</p>
                <p className="text-lg font-bold">amewengenhariaeletrica@gmail.com</p>
              </div>
            </div>
            
            <div className="flex items-center gap-6">
              <div className="w-14 h-14 bg-zinc-100 rounded-2xl flex items-center justify-center text-zinc-600">
                <Phone className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm text-zinc-500 font-medium uppercase tracking-wider">Telefones</p>
                <p className="text-lg font-bold">(11) 4558-6016</p>
                <p className="text-lg font-bold">(11) 97187-8021 (WhatsApp)</p>
              </div>
            </div>
            <div className="flex items-center gap-6">
              <div className="w-14 h-14 bg-zinc-100 rounded-2xl flex items-center justify-center text-zinc-600">
                <MapPin className="w-6 h-6" />
              </div>
              <div>
                <p className="text-sm text-zinc-500 font-medium uppercase tracking-wider">Localização</p>
                <p className="text-lg font-bold">Av. Santo Antonio, 1968</p>
                <p className="text-md text-zinc-600">Bela Vista - Osasco, SP</p>
              </div>
            </div>
          </div>
        </div>
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white p-10 rounded-[40px] border border-black/5 shadow-2xl"
        >
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-bold mb-2">Nome</label>
                <input required type="text" className="w-full px-6 py-4 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="Seu nome" />
              </div>
              <div>
                <label className="block text-sm font-bold mb-2">E-mail</label>
                <input required type="email" className="w-full px-6 py-4 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="seu@email.com" />
              </div>
            </div>
            <div>
              <label className="block text-sm font-bold mb-2">Assunto</label>
              <input required type="text" className="w-full px-6 py-4 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none" placeholder="Como podemos ajudar?" />
            </div>
            <div>
              <label className="block text-sm font-bold mb-2">Mensagem</label>
              <textarea required className="w-full px-6 py-4 rounded-2xl bg-zinc-50 border-none focus:ring-2 focus:ring-emerald-500 outline-none h-40 resize-none" placeholder="Escreva sua mensagem aqui...">

); }; ‎src/pages/Home.tsx‎ + 296 Linhas alteradas: 296 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,296 @@ import React, { useEffect, useState } from 'react'; import { collection, query, limit, getDocs } from 'firebase/firestore'; import { db } from '../firebase'; import { Product, FeaturedItem } from '../types'; import { ProductCard } from '../components/ProductCard'; import { ProjectCalculator } from '../components/ProjectCalculator'; import { motion, AnimatePresence } from 'motion/react'; import { ArrowRight, Package, ShieldCheck, Truck, ChevronLeft, ChevronRight, Calculator, Sparkles } from 'lucide-react'; import { Link } from 'react-router-dom'; export const Home: React.FC = () => { const [featuredProducts, setFeaturedProducts] = useState([]); const [featuredItems, setFeaturedItems] = useState([]); const [loading, setLoading] = useState(true); const [currentSlide, setCurrentSlide] = useState(0); useEffect(() => { const fetchData = async () => { try { // Fetch Featured Products const qProducts = query(collection(db, 'products'), limit(8)); const pSnapshot = await getDocs(qProducts); let products = pSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Product)); if (products.length === 0) { products = [ { id: 'enel-8', name: 'Caixa de Luz 8 Medidores', description: 'Visor lateral completa, policarbonato resistente. Entregamos ligado!', price: 2850.00, stock: 5, imageUrl: 'https://images.unsplash.com/photo-1558444479-c84829091c22?auto=format&fit=crop&q=80&w=800', createdAt: new Date() }, { id: 'sabesp-std', name: 'Caixa Sabesp Padrão', description: 'Economia e segurança para sua conta de água. Padrão homologado.', price: 195.00, stock: 25, imageUrl: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&q=80&w=800', createdAt: new Date() } ]; } setFeaturedProducts(products); // Fetch Featured Items (Highlights) const qFeatured = query(collection(db, 'featured'), limit(10)); const fSnapshot = await getDocs(qFeatured); const items = fSnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as FeaturedItem)); setFeaturedItems(items); } catch (error) { console.error('Error fetching data:', error); } finally { setLoading(false); } }; fetchData(); }, []); const nextSlide = () => { setCurrentSlide((prev) => (prev + 1) % featuredItems.length); }; const prevSlide = () => { setCurrentSlide((prev) => (prev - 1 + featuredItems.length) % featuredItems.length); }; const scrollToCalculator = () => { const element = document.getElementById('orcamento'); element?.scrollIntoView({ behavior: 'smooth' }); }; return (

{/* Hero Section */}

AMEWLUZ

Especialistas em Caixas de Luz e Hidrômetros. Qualidade, segurança e conformidade técnica para sua instalação.

Ver Coleção

{/* Features */}

{[ { icon: Truck, title: "Entrega Rápida", desc: "Enviamos nossos produtos para toda SP com agilidade e segurança." }, { icon: ShieldCheck, title: "Padrão Homologado", desc: "Produtos que atendem 100% às normas técnicas exigidas pelas concessionárias." }, { icon: Package, title: "Pronta Entrega", desc: "Amplo estoque de caixas de luz e hidrômetros para sua obra." } ].map((f, i) => (

{f.title}

{f.desc}

))}

{/* Quick Access to Projects */}

{/* Project Calculator Section */} {/* Consultancy Section */}

Serviço Especializado

Consultoria de Notas Técnicas

Nossa equipe técnica analisa seu projeto e garante que sua instalação esteja em total conformidade com as normas da Enel e Sabesp, evitando reprovações.

Falar com Consultor

{[ { label: "Análise de Projetos", icon: ShieldCheck }, { label: "Normas Enel/Sabesp", icon: Package }, { label: "Evite Reprovações", icon: ShieldCheck }, { label: "Suporte Especializado", icon: Truck } ].map((item, idx) => (

{item.label}

))}

{/* Featured Items Showcase */} {featuredItems.length > 0 && (

{featuredItems[currentSlide].title || 'Destaques AMEW'}

Ver Produtos

{featuredItems.length > 1 && ( <>

{featuredItems.map((_, i) => (

)}

)} {/* Featured Products */}

Destaques da Semana

As caixas mais desejadas pelos nossos clientes.

Ver todos

{loading ? (

{[1, 2, 3, 4].map(i => (

))}

) : (

{featuredProducts.map(product => ( ))}

)}

); }; ‎src/pages/Login.tsx‎ + 47 Linhas alteradas: 47 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,47 @@ import React from 'react'; import { auth } from '../firebase'; import { GoogleAuthProvider, signInWithPopup } from 'firebase/auth'; import { useNavigate } from 'react-router-dom'; import { motion } from 'motion/react'; import { LogIn } from 'lucide-react'; import toast from 'react-hot-toast'; export const Login: React.FC = () => { const navigate = useNavigate(); const handleGoogleLogin = async () => { const provider = new GoogleAuthProvider(); try { await signInWithPopup(auth, provider); toast.success('Login realizado com sucesso!'); navigate('/'); } catch (error) { console.error('Login error:', error); toast.error('Erro ao realizar login.'); } }; return (

Bem-vindo de volta

Acesse sua conta para gerenciar seus pedidos e preferências.

); }; ‎src/pages/Products.tsx‎ + 90 Linhas alteradas: 90 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,90 @@ import React, { useEffect, useState } from 'react'; import { collection, getDocs, query, orderBy } from 'firebase/firestore'; import { db } from '../firebase'; import { Product } from '../types'; import { ProductCard } from '../components/ProductCard'; import { Search, SlidersHorizontal, X } from 'lucide-react'; export const Products: React.FC = () => { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [searchTerm, setSearchTerm] = useState(''); useEffect(() => { const fetchProducts = async () => { try { const q = query(collection(db, 'products'), orderBy('createdAt', 'desc')); const snapshot = await getDocs(q); const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as Product)); setProducts(data); } catch (error) { console.error('Error fetching products:', error); } finally { setLoading(false); } }; fetchProducts(); }, []); const filteredProducts = products.filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()) || p.description.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

Nossas Caixas

{searchTerm ? `${filteredProducts.length} ${filteredProducts.length === 1 ? 'produto encontrado' : 'produtos encontrados'}` : 'Explore nossa coleção completa de embalagens e presentes.'}

setSearchTerm(e.target.value)} className="w-full pl-10 pr-10 py-3 bg-white border border-black/5 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500 transition-all" /> {searchTerm && ( )}

{loading ? (

{[1, 2, 3, 4, 5, 6, 7, 8].map(i => (

))}

) : filteredProducts.length > 0 ? (

{filteredProducts.map(product => ( ))}

) : (

Nenhum produto encontrado para sua busca.

)}

); }; ‎src/types.ts‎ + 55 Linhas alteradas: 55 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,55 @@ export interface Product { id: string; name: string; description: string; price: number; stock: number; imageUrl: string; createdAt: any; } export interface CartItem extends Product { quantity: number; } export interface Order { id?: string; userId: string; items: CartItem[]; total: number; status: 'pending' | 'paid' | 'shipped' | 'cancelled'; paymentMethod: string; customerInfo: { name: string; email: string; phone: string; address: string; city: string; zip: string; }; createdAt: any; } export interface UserProfile { uid: string; email: string; role: 'admin' | 'customer'; createdAt: any; } export interface FeaturedItem { id: string; title?: string; imageUrl: string; category: 'enel' | 'sabesp'; createdAt: any; } export interface ProjectPrice { id: string; name: string; basePrice: number; unitName: string; description: string; createdAt: any; } ‎src/utils/imageOptimizer.ts‎ + 64 Linhas alteradas: 64 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -0,0 +1,64 @@ /** * Optimizes an image by resizing it and compressing it using the Canvas API. * @param source - The image source (File, Blob, or Base64 string/URL) * @param maxWidth - The maximum width for the optimized image (default: 1200) * @param quality - The compression quality (0.0 to 1.0, default: 0.7) * @returns A promise that resolves to the optimized Base64 string */ export const optimizeImage = async ( source: File | Blob | string, maxWidth: number = 1200, quality: number = 0.7 ): Promise => { return new Promise((resolve, reject) => { const img = new Image(); // Handle cross-origin for URLs if (typeof source === 'string' && source.startsWith('http')) { img.crossOrigin = 'anonymous'; } img.onload = () => { const canvas = document.createElement('canvas'); let width = img.width; let height = img.height; // Calculate new dimensions while maintaining aspect ratio if (width > maxWidth) { height = Math.round((height * maxWidth) / width); width = maxWidth; } canvas.width = width; canvas.height = height; const ctx = canvas.getContext('2d'); if (!ctx) { reject(new Error('Could not get canvas context')); return; } // Draw and compress ctx.drawImage(img, 0, 0, width, height); // Convert to WebP if supported, otherwise JPEG const optimizedBase64 = canvas.toDataURL('image/jpeg', quality); resolve(optimizedBase64); }; img.onerror = () => { reject(new Error('Failed to load image for optimization')); }; if (source instanceof File || source instanceof Blob) { const reader = new FileReader(); reader.onload = (e) => { img.src = e.target?.result as string; }; reader.onerror = () => reject(new Error('Failed to read file')); reader.readAsDataURL(source); } else { img.src = source; } }); }; ‎tsconfig.json‎ + 26 Linhas alteradas: 26 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -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 } } ‎vite.config.ts‎ + 24 Linhas alteradas: 24 adições e 0 exclusões Número da linha do arquivo original Número da linha diferente Mudança de linha diferencial @@ -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', }, }; });

Built with AI Studio

{product.name}

Calcule seu Projeto Elétrico

Atendimento AMEW

AMEWLUZ

{f.title}

Precisa de um Projeto Elétrico?

Consultoria de Notas Técnicas

{featuredItems[currentSlide].title || 'Destaques AMEW'}

Destaques da Semana

Bem-vindo de volta

Nossas Caixas