HEFESTO v1.0 - Sistema de Controle Orçamentário para Facilities
- Backend NestJS com 12 módulos - Frontend React com dashboard e gestão - Manuais técnico e de negócios (MD + PDF) - Workflow de aprovação com alçadas - RBAC com 6 perfis de acesso
This commit is contained in:
253
frontend/src/pages/Landing.tsx
Normal file
253
frontend/src/pages/Landing.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
import { Link } from 'react-router-dom'
|
||||
import {
|
||||
Flame,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Zap,
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Building2,
|
||||
FileText,
|
||||
Wallet,
|
||||
Users
|
||||
} from 'lucide-react'
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <Wallet className="w-6 h-6" />,
|
||||
title: 'Controle Orçamentário',
|
||||
description: 'Gerencie seus orçamentos de facilities com precisão e visibilidade total.'
|
||||
},
|
||||
{
|
||||
icon: <FileText className="w-6 h-6" />,
|
||||
title: 'Gestão de Demandas',
|
||||
description: 'Acompanhe todas as solicitações desde a criação até a conclusão.'
|
||||
},
|
||||
{
|
||||
icon: <Building2 className="w-6 h-6" />,
|
||||
title: 'Fornecedores',
|
||||
description: 'Cadastro completo e avaliação de fornecedores parceiros.'
|
||||
},
|
||||
{
|
||||
icon: <BarChart3 className="w-6 h-6" />,
|
||||
title: 'Relatórios Inteligentes',
|
||||
description: 'Dashboards e relatórios para decisões estratégicas.'
|
||||
}
|
||||
]
|
||||
|
||||
const stats = [
|
||||
{ value: '98%', label: 'Satisfação' },
|
||||
{ value: '50+', label: 'Empresas' },
|
||||
{ value: '10k+', label: 'Demandas' },
|
||||
{ value: '24/7', label: 'Suporte' }
|
||||
]
|
||||
|
||||
const benefits = [
|
||||
'Redução de custos operacionais',
|
||||
'Maior controle e transparência',
|
||||
'Processos automatizados',
|
||||
'Relatórios em tempo real',
|
||||
'Integração com fornecedores',
|
||||
'Aprovações simplificadas'
|
||||
]
|
||||
|
||||
export default function Landing() {
|
||||
return (
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 left-0 right-0 bg-white/80 backdrop-blur-lg border-b border-border z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-primary to-accent flex items-center justify-center shadow-lg shadow-primary/20">
|
||||
<Flame className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-xl text-text">HEFESTO</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to="/login"
|
||||
className="hidden sm:inline-flex text-gray hover:text-primary font-medium transition-colors"
|
||||
>
|
||||
Entrar
|
||||
</Link>
|
||||
<Link
|
||||
to="/login"
|
||||
className="btn-primary !py-2 !px-5 text-sm"
|
||||
>
|
||||
Começar Agora
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
|
||||
{/* Background decorations */}
|
||||
<div className="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-br from-primary/10 to-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
|
||||
<div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-gradient-to-tr from-secondary/10 to-secondary/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/3"></div>
|
||||
|
||||
<div className="max-w-7xl mx-auto relative">
|
||||
<div className="text-center max-w-4xl mx-auto">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-8">
|
||||
<Zap className="w-4 h-4" />
|
||||
Sistema de Controle Orçamentário para Facilities
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-text mb-6 leading-tight">
|
||||
Forje o{' '}
|
||||
<span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
controle
|
||||
</span>
|
||||
{' '}dos seus custos
|
||||
</h1>
|
||||
|
||||
{/* Subheadline */}
|
||||
<p className="text-lg sm:text-xl text-gray max-w-2xl mx-auto mb-10">
|
||||
Gerencie orçamentos, demandas e fornecedores em uma única plataforma poderosa.
|
||||
Transforme a gestão de facilities da sua empresa.
|
||||
</p>
|
||||
|
||||
{/* CTAs */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
|
||||
<Link to="/login" className="btn-primary text-lg !py-4 !px-8 flex items-center gap-2 w-full sm:w-auto justify-center">
|
||||
Acessar Sistema
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
<a href="#features" className="btn-outline text-lg !py-4 !px-8 w-full sm:w-auto">
|
||||
Conhecer Recursos
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-8">
|
||||
{stats.map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray text-sm mt-1">{stat.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-card">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-text mb-4">
|
||||
Tudo que você precisa para{' '}
|
||||
<span className="text-primary">gestão de facilities</span>
|
||||
</h2>
|
||||
<p className="text-gray text-lg max-w-2xl mx-auto">
|
||||
Recursos completos para otimizar seus processos e reduzir custos operacionais.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="card-hover group"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/10 to-accent/10 flex items-center justify-center text-primary mb-4 group-hover:from-primary group-hover:to-accent group-hover:text-white transition-all duration-300">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-text mb-2">{feature.title}</h3>
|
||||
<p className="text-gray text-sm">{feature.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Benefits Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-text mb-6">
|
||||
Por que escolher o{' '}
|
||||
<span className="text-primary">HEFESTO</span>?
|
||||
</h2>
|
||||
<p className="text-gray text-lg mb-8">
|
||||
Nossa plataforma foi desenvolvida especificamente para atender às necessidades
|
||||
complexas da gestão de facilities, oferecendo controle total sobre orçamentos e processos.
|
||||
</p>
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{benefits.map((benefit, index) => (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-primary flex-shrink-0" />
|
||||
<span className="text-text">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div className="bg-gradient-to-br from-primary to-accent rounded-3xl p-8 text-white">
|
||||
<Shield className="w-12 h-12 mb-6 opacity-80" />
|
||||
<h3 className="text-2xl font-bold mb-4">Segurança Garantida</h3>
|
||||
<p className="text-white/80 mb-6">
|
||||
Seus dados estão protegidos com as mais avançadas tecnologias de segurança.
|
||||
Conformidade total com LGPD.
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex -space-x-2">
|
||||
{[...Array(4)].map((_, i) => (
|
||||
<div key={i} className="w-8 h-8 rounded-full bg-white/20 border-2 border-white flex items-center justify-center">
|
||||
<Users className="w-4 h-4" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<span className="text-white/80 text-sm">+50 empresas confiam</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -bottom-6 -right-6 w-32 h-32 bg-accent/20 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-secondary">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-white mb-6">
|
||||
Pronto para transformar sua gestão de facilities?
|
||||
</h2>
|
||||
<p className="text-white/70 text-lg mb-8 max-w-2xl mx-auto">
|
||||
Comece agora mesmo e descubra como o HEFESTO pode ajudar sua empresa
|
||||
a ter mais controle e eficiência.
|
||||
</p>
|
||||
<Link to="/login" className="btn-primary text-lg !py-4 !px-8 inline-flex items-center gap-2">
|
||||
Começar Gratuitamente
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-12 px-4 sm:px-6 lg:px-8 bg-card border-t border-border">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center">
|
||||
<Flame className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-text">HEFESTO</span>
|
||||
</div>
|
||||
<p className="text-gray text-sm">
|
||||
© 2026 HEFESTO. Todos os direitos reservados.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user