import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import {
Sun,
Leaf,
ShieldCheck,
Zap,
Phone,
Mail,
MapPin,
CheckCircle,
ArrowRight,
Calculator as CalculatorIcon,
} from "lucide-react";
import {
ResponsiveContainer,
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
} from "recharts";
// Single-file React component for a Solar Panel Sales Website
// Tailwind CSS required. Uses framer-motion, lucide-react icons, and recharts for a simple chart.
// Replace the brand, phone, and WhatsApp number to launch.
const BRAND = {
name: "SolViva Energia",
phone: "+55 11 99999-0000",
whatsapp: "5511999990000", // digits only
email: "contato@solviva.com.br",
address: "Av. Energia 123, São Paulo - SP",
ctaHeadline: "Economize até 95% na sua conta de luz",
ctaSub: "Projetos fotovoltaicos completos para residências e empresas",
};
const navItems = [
{ label: "Início", href: "#inicio" },
{ label: "Vantagens", href: "#vantagens" },
{ label: "Kits", href: "#kits" },
{ label: "Simulador", href: "#simulador" },
{ label: "Depoimentos", href: "#depoimentos" },
{ label: "Contato", href: "#contato" },
];
const kits = [
{
name: "Kit Residencial 3 kWp",
power: 3,
panels: 6,
panelW: 550,
area: "~14 m²",
price: 14990,
bestFor: "Casas com conta até R$ 400/mês",
},
{
name: "Kit Residencial 5 kWp",
power: 5,
panels: 10,
panelW: 550,
area: "~24 m²",
price: 23990,
bestFor: "Casas com conta até R$ 700/mês",
},
{
name: "Kit Comercial 10 kWp",
power: 10,
panels: 19,
panelW: 550,
area: "~48 m²",
price: 44990,
bestFor: "Comércios com conta até R$ 1.500/mês",
},
];
function currency(v: number) {
return v.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
}
function Section({ id, children, className = "" }: React.PropsWithChildren<{ id?: string; className?: string }>) {
return (
{children}
);
}
function NavBar() {
const [open, setOpen] = useState(false);
return (
{open && (
{navItems.map((n) => (
setOpen(false)}>
{n.label}
))}
setOpen(false)}
>
WhatsApp
)}
);
}
function Hero() {
return (
);
}
function Benefits() {
const items = [
{ icon:
);
}
function Kits() {
return (
);
}
function useSimulator({ bill, tariff, irradiance, perfRatio, panelW }: { bill: number; tariff: number; irradiance: number; perfRatio: number; panelW: number; }) {
return useMemo(() => {
if (!bill || !tariff) return null;
const kwhMonth = bill / tariff; // consumo estimado
const kwhMonthPerkWp = (irradiance * 30 * perfRatio); // ~kWh/mês por kWp instalado
const kWpNeeded = Math.max(0, kwhMonth / kwhMonthPerkWp);
const panels = Math.ceil((kWpNeeded * 1000) / panelW);
const pricePerkWp = 4800; // estimativa simplificada
const systemCost = kWpNeeded * pricePerkWp;
const monthlySavings = Math.min(bill, kwhMonthPerkWp * kWpNeeded * tariff);
const annualSavings = monthlySavings * 12;
const paybackYears = systemCost && annualSavings ? systemCost / annualSavings : 0;
// 10 anos de fluxo de caixa (simples, sem reajustes)
const chart = Array.from({ length: 11 }).map((_, i) => ({
year: i,
cumulative: i === 0 ? 0 : annualSavings * i - systemCost,
}));
return { kwhMonth, kWpNeeded, panels, systemCost, monthlySavings, annualSavings, paybackYears, chart };
}, [bill, tariff, irradiance, perfRatio, panelW]);
}
function Simulator() {
const [bill, setBill] = useState(600);
const [tariff, setTariff] = useState(1.25);
const [irradiance, setIrradiance] = useState(5.0);
const [perfRatio, setPerfRatio] = useState(0.8);
const [panelW, setPanelW] = useState(550);
const res = useSimulator({ bill, tariff, irradiance, perfRatio, panelW });
return (
{res && (
)}
(v === 0 ? "0" : `Ano ${v}`)} />
v.toLocaleString("pt-BR", { style: "currency", currency: "BRL", maximumFractionDigits: 0 })} />
currency(v)} labelFormatter={(l) => (l === 0 ? "Início" : `Ano ${l}`)} />
) : (
);
}
function Testimonials() {
const items = [
{ name: "Mariana S.", text: "Conta caiu de R$ 620 para R$ 35. Atendimento excelente e instalação rápida!" },
{ name: "Ricardo A.", text: "Em 6 meses o investimento já mostrou resultado. Recomendo a todos." },
{ name: "Dona Cida", text: "Equipe muito cuidadosa. Projeto ficou discreto e eficiente." },
];
return (
);
}
function Contact() {
return (
);
}
function Footer() {
return (
);
}
export default function SolarSite() {
return (
{BRAND.ctaHeadline}
{BRAND.ctaSub}. Projeto, homologação e instalação com equipe própria.
Por que escolher energia solar?
{items.map((it) => (
))}
{it.icon}
{it.title}
{it.text}
Kits prontos para você
Instalação, projeto e homologação inclusos. Parcelamos em até 12x.
{kits.map((k) => (
{k.name}
{k.power} kWp{k.panels} placas de {k.panelW} W Área ocupada: {k.area} {k.bestFor}
{currency(k.price)}
Quero este kit Simule a sua economia
Ajuste os valores conforme sua realidade. Esta é uma estimativa inicial.
Tamanho do sistema (estimado)
{res.kWpNeeded.toFixed(2)} kWp
{res.panels} placas de {panelW} W
Investimento (estimado)
{currency(res.systemCost)}
Payback ~ {res.paybackYears.toFixed(1)} anos
Economia mensal
{currency(res.monthlySavings)}
Economia anual
{currency(res.annualSavings)}
Fluxo de caixa (10 anos)
Cumulativo simples sem reajustes/taxas.
{res ? (Preencha os campos para ver o gráfico.
)}
O que nossos clientes dizem
{items.map((t, idx) => (
))}
{t.name.charAt(0)}
{t.name}
“{t.text}”
Fale com a gente
Envie seus dados que retornamos com um orçamento personalizado.