rodrigo/budget-view-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Landing page image display

Browse Source 
The images in the "How it works" section of the landing page were not displaying. This commit addresses the issue.
This commit is contained in:
gpt-engineer-app[bot] 2025-06-23 19:07:56 +00:00
parent fb94c571d3
commit dd8881da28
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/pages/Landing.tsx
View File

@ -61,19 +61,19 @@ const Landing = () => {
icon: <MessageCircle className="h-6 w-6" />, icon: <MessageCircle className="h-6 w-6" />,
title: "Texto", title: "Texto",
description: "Digite: 'Comprei pão R$ 5,50'", description: "Digite: 'Comprei pão R$ 5,50'",
image: "/whatsapp-text-message.png" image: "./whatsapp-text-message.png"
}, },
{ {
icon: <Mic className="h-6 w-6" />, icon: <Mic className="h-6 w-6" />,
title: "Áudio", title: "Áudio",
description: "Grave um áudio contando o gasto", description: "Grave um áudio contando o gasto",
image: "/whatsapp-audio-message.png" image: "./whatsapp-audio-message.png"
}, },
{ {
icon: <Receipt className="h-6 w-6" />, icon: <Receipt className="h-6 w-6" />,
title: "Comprovante", title: "Comprovante",
description: "Tire foto do recibo ou nota fiscal", description: "Tire foto do recibo ou nota fiscal",
image: "/whatsapp-receipt-message.png" image: "./whatsapp-receipt-message.png"
} }
] ]
}, },
@ -82,14 +82,14 @@ const Landing = () => {
title: "Visualize no Dashboard", title: "Visualize no Dashboard",
description: "Acompanhe seus gastos em tempo real com gráficos e relatórios automáticos", description: "Acompanhe seus gastos em tempo real com gráficos e relatórios automáticos",
icon: <BarChart3 className="h-8 w-8" />, icon: <BarChart3 className="h-8 w-8" />,
image: "/dashboard-screenshot.png" image: "./dashboard-screenshot.png"
}, },
{ {
step: "3", step: "3",
title: "Organize no Calendário", title: "Organize no Calendário",
description: "Veja todas suas transações organizadas por data e periodo", description: "Veja todas suas transações organizadas por data e periodo",
icon: <Calendar className="h-8 w-8" />, icon: <Calendar className="h-8 w-8" />,
image: "/calendar-screenshot.png" image: "./calendar-screenshot.png"
} }
]; ];
@ -188,11 +188,15 @@ const Landing = () => {
</div> </div>
<h4 className="text-xl font-semibold text-white mb-2">{method.title}</h4> <h4 className="text-xl font-semibold text-white mb-2">{method.title}</h4>
<p className="text-slate-300 mb-4">{method.description}</p> <p className="text-slate-300 mb-4">{method.description}</p>
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center"> <div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center overflow-hidden">
<img <img
src={method.image} src={method.image}
alt={`Exemplo ${method.title}`} alt={`Exemplo ${method.title}`}
className="max-w-full max-h-full object-contain rounded-lg" className="max-w-full max-h-full object-contain rounded-lg"
onError={(e) => {
console.error(`Failed to load image: ${method.image}`);
e.currentTarget.style.display = 'none';
}}
/> />
</div> </div>
</div> </div>
@ -210,11 +214,15 @@ const Landing = () => {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600"> <div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600">
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center"> <div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center overflow-hidden">
<img <img
src={howItWorksSteps[1].image} src={howItWorksSteps[1].image}
alt="Dashboard do sistema" alt="Dashboard do sistema"
className="max-w-full max-h-full object-contain rounded-lg" className="max-w-full max-h-full object-contain rounded-lg"
onError={(e) => {
console.error(`Failed to load image: ${howItWorksSteps[1].image}`);
e.currentTarget.style.display = 'none';
}}
/> />
</div> </div>
</div> </div>
@ -231,11 +239,15 @@ const Landing = () => {
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
<div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600"> <div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600">
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center"> <div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center overflow-hidden">
<img <img
src={howItWorksSteps[2].image} src={howItWorksSteps[2].image}
alt="Calendário do sistema" alt="Calendário do sistema"
className="max-w-full max-h-full object-contain rounded-lg" className="max-w-full max-h-full object-contain rounded-lg"
onError={(e) => {
console.error(`Failed to load image: ${howItWorksSteps[2].image}`);
e.currentTarget.style.display = 'none';
}}
/> />
</div> </div>
</div> </div>