Alisson Freitas

maio 16, 2026

import React from ‘react’;
import { motion } from ‘framer-motion’;
import { Phone, Mail, MapPin, Clock } from ‘lucide-react’;
import ProjectConfigurator from ‘../components/contact/ProjectConfigurator’;
const contactInfo = [
{ icon: Phone, label: ‘Telefone’, value: ‘(00) 0000-0000’ },
{ icon: Mail, label: ‘Email’, value: ‘[email protected]’ },
{ icon: MapPin, label: ‘Localização’, value: ‘Brasil’ },
{ icon: Clock, label: ‘Atendimento’, value: ‘Seg-Sex, 8h às 18h’ },
];
export default function Contact() {
return (
<div className=”pt-20″>
{/* Header */}
<section className=”py-20 border-b border-primary/10″>
<div className=”max-w-7xl mx-auto px-6 lg:px-8″>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
>
<span className=”font-mono text-xs text-primary tracking-widest uppercase”>
Configurador de Projeto
</span>
<h1 className=”font-heading font-bold text-5xl lg:text-7xl text-accent-foreground mt-3 tracking-tighter”>
Solicite seu<br />
<span className=”text-primary”>orçamento</span>
</h1>
</motion.div>
</div>
</section>
{/* Content */}
<section className=”py-20″>
<div className=”max-w-7xl mx-auto px-6 lg:px-8″>
<div className=”grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16″>
{/* Form */}
<div className=”lg:col-span-2″>
<div className=”border border-primary/10 rounded-lg p-8″>
{/* Form header */}
<div className=”flex items-center justify-between mb-8 pb-6 border-b border-primary/10″>
<div>
<span className=”font-mono text-[10px] text-primary/50 tracking-widest”>DOC.REQ-001</span>
<h2 className=”font-heading font-bold text-lg text-accent-foreground mt-1″>
Relatório de Comissionamento Técnico
</h2>
</div>
<div className=”px-3 py-1 border border-primary/20 rounded-md”>
<span className=”font-mono text-[10px] text-primary tracking-widest uppercase”>Novo</span>
</div>
</div>
<ProjectConfigurator />
</div>
</div>
{/* Sidebar */}
<div className=”space-y-6″>
<div className=”border border-primary/10 rounded-lg p-6″>
<h3 className=”font-heading font-bold text-lg text-accent-foreground mb-6″>
Informações de Contato
</h3>
<div className=”space-y-5″>
{contactInfo.map((info) => (
<div key={info.label} className=”flex items-start gap-3″>
<div className=”w-8 h-8 rounded-md bg-primary/10 border border-primary/20 flex items-center justify-center shrink-0″>
<info.icon className=”w-4 h-4 text-primary” />
</div>
<div>
<span className=”font-mono text-[10px] text-muted-foreground tracking-wide uppercase block”>
{info.label}
</span>
<span className=”font-heading text-sm text-accent-foreground”>
{info.value}
</span>
</div>
</div>
))}
</div>
</div>
{/* Compliance badge */}
<div className=”border border-primary/10 rounded-lg p-6 bg-primary/[0.02]”>
<span className=”font-mono text-[10px] text-primary tracking-widest uppercase block mb-3″>
Conformidade
</span>
<div className=”space-y-3″>
{[‘NR-10 Segurança’, ‘NBR 5410’, ‘NBR 13971 (PMOC)’, ‘Portaria 3.523/GM’].map((norm) => (
<div key={norm} className=”flex items-center gap-2″>
<div className=”w-1.5 h-1.5 rounded-full bg-primary” />
<span className=”font-mono text-xs text-muted-foreground”>{norm}</span>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}

Idealps

Deixe um comentário Cancelar resposta