fix: update frontend deploy pipeline
This commit is contained in:
Tiago Yamamoto
parent
6bf6a96036
commit
335c3a49c8
1 changed files with 111 additions and 98 deletions
|
|
@ -2,10 +2,11 @@
|
||||||
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import {
|
import { useAuth } from "@/context/AuthContext";
|
||||||
ShieldCheckIcon,
|
import {
|
||||||
TruckIcon,
|
ShieldCheckIcon,
|
||||||
ChartBarIcon,
|
TruckIcon,
|
||||||
|
ChartBarIcon,
|
||||||
UserGroupIcon,
|
UserGroupIcon,
|
||||||
CheckCircleIcon,
|
CheckCircleIcon,
|
||||||
ArrowRightIcon,
|
ArrowRightIcon,
|
||||||
|
|
@ -18,6 +19,7 @@ import {
|
||||||
* Apresenta informações sobre o projeto e opções de login/cadastro
|
* Apresenta informações sobre o projeto e opções de login/cadastro
|
||||||
*/
|
*/
|
||||||
const HomePage = () => {
|
const HomePage = () => {
|
||||||
|
const { user, loading } = useAuth();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
|
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50">
|
||||||
|
|
@ -45,18 +47,29 @@ const HomePage = () => {
|
||||||
>
|
>
|
||||||
FAQ
|
FAQ
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
{!loading && user ? (
|
||||||
href="/login"
|
<Link
|
||||||
className="bg-white text-blue-600 px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-gray-50 transition-colors"
|
href="/dashboard"
|
||||||
>
|
className="bg-blue-600 text-white px-4 sm:px-6 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-blue-700 transition-colors"
|
||||||
Entrar
|
>
|
||||||
</Link>
|
Dashboard
|
||||||
<Link
|
</Link>
|
||||||
href="/login?tab=cadastro"
|
) : (
|
||||||
className="bg-blue-600 text-white px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-blue-700 transition-colors"
|
<>
|
||||||
>
|
<Link
|
||||||
Cadastrar-se
|
href="/login"
|
||||||
</Link>
|
className="bg-white text-blue-600 px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Entrar
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/login?tab=cadastro"
|
||||||
|
className="bg-blue-600 text-white px-2 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-medium hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
Cadastrar-se
|
||||||
|
</Link>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -68,33 +81,33 @@ const HomePage = () => {
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-blue-50/30"></div>
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-blue-50/30"></div>
|
||||||
<div className="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
|
<div className="absolute top-0 right-0 w-96 h-96 bg-blue-100/20 rounded-full blur-3xl transform translate-x-1/2 -translate-y-1/2"></div>
|
||||||
<div className="absolute bottom-0 left-0 w-80 h-80 bg-emerald-100/20 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
|
<div className="absolute bottom-0 left-0 w-80 h-80 bg-emerald-100/20 rounded-full blur-3xl transform -translate-x-1/2 translate-y-1/2"></div>
|
||||||
|
|
||||||
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
|
|
||||||
{/* Main Headline */}
|
{/* Main Headline */}
|
||||||
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">
|
<h1 className="text-5xl sm:text-6xl lg:text-7xl font-extrabold text-gray-900 mb-8 leading-tight">
|
||||||
<span className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
|
<span className="bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
|
||||||
Marketplace para
|
Marketplace para
|
||||||
</span>
|
</span>
|
||||||
<span className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-600 bg-clip-text text-transparent block mt-2">
|
<span className="bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-600 bg-clip-text text-transparent block mt-2">
|
||||||
Farmácias
|
Farmácias
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
{/* Subtitle */}
|
{/* Subtitle */}
|
||||||
<p className="text-xl lg:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed font-light">
|
<p className="text-xl lg:text-2xl text-gray-600 mb-12 max-w-4xl mx-auto leading-relaxed font-light">
|
||||||
A plataforma inteligente que conecta farmácias,
|
A plataforma inteligente que conecta farmácias,
|
||||||
<span className="font-medium text-gray-800"> otimizando compras, vendas e gestão de medicamentos</span> com segurança e eficiência.
|
<span className="font-medium text-gray-800"> otimizando compras, vendas e gestão de medicamentos</span> com segurança e eficiência.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* CTA Buttons */}
|
{/* CTA Buttons */}
|
||||||
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
|
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
|
||||||
<Link
|
<Link
|
||||||
href="/login?tab=cadastro"
|
href={!loading && user ? "/dashboard" : "/login?tab=cadastro"}
|
||||||
className="group bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-10 py-4 rounded-xl text-lg font-semibold transition-all duration-500 ease-out inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 min-w-[200px]"
|
className="group bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-10 py-4 rounded-xl text-lg font-semibold transition-all duration-500 ease-out inline-flex items-center justify-center shadow-lg hover:shadow-xl transform hover:-translate-y-1 hover:scale-105 min-w-[200px]"
|
||||||
>
|
>
|
||||||
Começar Agora
|
{!loading && user ? "Ir para Dashboard" : "Começar Agora"}
|
||||||
</Link>
|
</Link>
|
||||||
<button
|
<button
|
||||||
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
|
onClick={() => document.getElementById('features')?.scrollIntoView({ behavior: 'smooth' })}
|
||||||
|
|
@ -103,7 +116,7 @@ const HomePage = () => {
|
||||||
Saiba Mais
|
Saiba Mais
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Social Proof */}
|
{/* Social Proof */}
|
||||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-8 text-sm text-gray-500">
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-8 text-sm text-gray-500">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -131,7 +144,7 @@ const HomePage = () => {
|
||||||
Por que escolher o SaveInMed?
|
Por que escolher o SaveInMed?
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||||
Nossa plataforma oferece soluções completas para modernizar e otimizar
|
Nossa plataforma oferece soluções completas para modernizar e otimizar
|
||||||
sua operação no setor de saúde.
|
sua operação no setor de saúde.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -193,10 +206,10 @@ const HomePage = () => {
|
||||||
Transforme sua operação com tecnologia
|
Transforme sua operação com tecnologia
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-gray-600 mb-8">
|
<p className="text-lg text-gray-600 mb-8">
|
||||||
O SaveInMed oferece uma solução completa para farmácias e hospitais
|
O SaveInMed oferece uma solução completa para farmácias e hospitais
|
||||||
modernizarem suas operações e aumentarem sua eficiência.
|
modernizarem suas operações e aumentarem sua eficiência.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
||||||
|
|
@ -205,7 +218,7 @@ const HomePage = () => {
|
||||||
<p className="text-gray-600">Controle automático de estoque com alertas de reposição.</p>
|
<p className="text-gray-600">Controle automático de estoque com alertas de reposição.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -213,7 +226,7 @@ const HomePage = () => {
|
||||||
<p className="text-gray-600">Compare preços e encontre os melhores fornecedores.</p>
|
<p className="text-gray-600">Compare preços e encontre os melhores fornecedores.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-start">
|
<div className="flex items-start">
|
||||||
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
<CheckCircleIcon className="h-6 w-6 text-green-500 mt-1 mr-3 flex-shrink-0" />
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -226,82 +239,82 @@ const HomePage = () => {
|
||||||
|
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 relative overflow-hidden">
|
<div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 relative overflow-hidden">
|
||||||
{/* Subtle background pattern */}
|
{/* Subtle background pattern */}
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-50 opacity-60 pointer-events-none"></div>
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-gray-50 opacity-60 pointer-events-none"></div>
|
||||||
|
|
||||||
<div className="relative z-10">
|
<div className="relative z-10">
|
||||||
<div className="text-center mb-6">
|
<div className="text-center mb-6">
|
||||||
<h3 className="text-xl font-semibold text-gray-900 mb-1">Resultados Comprovados</h3>
|
<h3 className="text-xl font-semibold text-gray-900 mb-1">Resultados Comprovados</h3>
|
||||||
<p className="text-sm text-gray-500">Métricas reais que mostram o impacto do SaveInMed</p>
|
<p className="text-sm text-gray-500">Métricas reais que mostram o impacto do SaveInMed</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
||||||
<div
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
aria-label="500+ farmácias conectadas"
|
|
||||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
|
||||||
className="text-center p-4 rounded-xl bg-red-50 border border-red-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-200"
|
|
||||||
title="500+ farmácias conectadas"
|
|
||||||
>
|
|
||||||
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
|
||||||
<HeartIcon className="h-6 w-6 text-red-600" />
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">500+</div>
|
|
||||||
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Farmácias Conectadas</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
role="button"
|
<div
|
||||||
tabIndex={0}
|
role="button"
|
||||||
aria-label="R$ 10M+ em transações"
|
tabIndex={0}
|
||||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
aria-label="500+ farmácias conectadas"
|
||||||
className="text-center p-4 rounded-xl bg-emerald-50 border border-emerald-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-200"
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
||||||
title="R$ 10M+ em transações"
|
className="text-center p-4 rounded-xl bg-red-50 border border-red-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-red-200"
|
||||||
>
|
title="500+ farmácias conectadas"
|
||||||
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
>
|
||||||
<CurrencyDollarIcon className="h-6 w-6 text-emerald-600" />
|
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
||||||
</div>
|
<HeartIcon className="h-6 w-6 text-red-600" />
|
||||||
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">R$ 10M+</div>
|
</div>
|
||||||
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Em Transações</div>
|
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">500+</div>
|
||||||
</div>
|
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Farmácias Conectadas</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
aria-label="1000+ entregas realizadas"
|
aria-label="R$ 10M+ em transações"
|
||||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
||||||
className="text-center p-4 rounded-xl bg-indigo-50 border border-indigo-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-200"
|
className="text-center p-4 rounded-xl bg-emerald-50 border border-emerald-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-emerald-200"
|
||||||
title="1000+ entregas realizadas"
|
title="R$ 10M+ em transações"
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
||||||
<TruckIcon className="h-6 w-6 text-indigo-600" />
|
<CurrencyDollarIcon className="h-6 w-6 text-emerald-600" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">1000+</div>
|
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">R$ 10M+</div>
|
||||||
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Entregas Realizadas</div>
|
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Em Transações</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
aria-label="Suporte 24/7"
|
aria-label="1000+ entregas realizadas"
|
||||||
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
||||||
className="text-center p-4 rounded-xl bg-blue-50 border border-blue-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200"
|
className="text-center p-4 rounded-xl bg-indigo-50 border border-indigo-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-200"
|
||||||
title="Suporte 24/7"
|
title="1000+ entregas realizadas"
|
||||||
>
|
>
|
||||||
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
||||||
<CheckCircleIcon className="h-6 w-6 text-blue-600" />
|
<TruckIcon className="h-6 w-6 text-indigo-600" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">1000+</div>
|
||||||
|
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Entregas Realizadas</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label="Suporte 24/7"
|
||||||
|
onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") (e.currentTarget as HTMLElement).click(); }}
|
||||||
|
className="text-center p-4 rounded-xl bg-blue-50 border border-blue-200 hover:shadow-md transition-all cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-200"
|
||||||
|
title="Suporte 24/7"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 flex items-center justify-center mx-auto mb-3">
|
||||||
|
<CheckCircleIcon className="h-6 w-6 text-blue-600" />
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">24/7</div>
|
||||||
|
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Suporte DisponÃvel</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1">24/7</div>
|
|
||||||
<div className="text-xs font-medium text-gray-600 uppercase tracking-wide">Suporte DisponÃvel</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="bg-gray-900 text-white py-12">
|
<footer className="bg-gray-900 text-white py-12">
|
||||||
|
|
@ -319,11 +332,11 @@ const HomePage = () => {
|
||||||
<span className="ml-3 text-xl font-bold">SaveInMed</span>
|
<span className="ml-3 text-xl font-bold">SaveInMed</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-400 mb-4">
|
<p className="text-gray-400 mb-4">
|
||||||
Marketplace B2B para farmácias e hospitais. Conectando o setor de saúde
|
Marketplace B2B para farmácias e hospitais. Conectando o setor de saúde
|
||||||
através de tecnologia inovadora.
|
através de tecnologia inovadora.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-lg font-semibold mb-4">Suporte</h3>
|
<h3 className="text-lg font-semibold mb-4">Suporte</h3>
|
||||||
<ul className="space-y-2 text-gray-400">
|
<ul className="space-y-2 text-gray-400">
|
||||||
|
|
@ -332,7 +345,7 @@ const HomePage = () => {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||||||
<p>© {new Date().getFullYear()} SaveInMed. Todos os direitos reservados.</p>
|
<p>© {new Date().getFullYear()} SaveInMed. Todos os direitos reservados.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue