Update src/app/contacto/page.tsx
This commit is contained in:
@@ -2,52 +2,44 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import TextAbout from "@/components/sections/about/TextAbout";
|
||||
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
||||
import ContactText from "@/components/sections/contact/ContactText";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
import { Phone, Mail, MapPin, Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ContactoPage() {
|
||||
const navItems = [
|
||||
{ name: "Inicio", id: "/" },
|
||||
{ name: "Tratamientos", id: "/tratamientos" },
|
||||
{ name: "Sobre Nosotros", id: "/about" },
|
||||
{ name: "Sobre Nosotros", id: "/equipo" },
|
||||
{ name: "Contacto", id: "/contacto" },
|
||||
];
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Clínica",
|
||||
items: [
|
||||
{ label: "Sobre Nosotros", href: "/about" },
|
||||
title: "Clínica", items: [
|
||||
{ label: "Sobre Nosotros", href: "/equipo" },
|
||||
{ label: "Nuestro Equipo", href: "/equipo" },
|
||||
{ label: "Instalaciones", href: "/facilities" },
|
||||
{ label: "Tecnología", href: "/technology" },
|
||||
{ label: "Instalaciones", href: "/equipo" },
|
||||
{ label: "Tecnología", href: "/equipo" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Servicios",
|
||||
items: [
|
||||
{ label: "Implantes", href: "/treatments" },
|
||||
{ label: "Ortodoncia", href: "/treatments" },
|
||||
{ label: "Estética Dental", href: "/treatments" },
|
||||
{ label: "Odontología General", href: "/treatments" },
|
||||
title: "Servicios", items: [
|
||||
{ label: "Implantes", href: "/tratamientos" },
|
||||
{ label: "Ortodoncia", href: "/tratamientos" },
|
||||
{ label: "Estética Dental", href: "/tratamientos" },
|
||||
{ label: "Odontología General", href: "/tratamientos" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Información",
|
||||
items: [
|
||||
{ label: "Casos Reales", href: "/cases" },
|
||||
{ label: "Opiniones", href: "/reviews" },
|
||||
title: "Información", items: [
|
||||
{ label: "Casos Reales", href: "/casos-reales" },
|
||||
{ label: "Opiniones", href: "/opiniones" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "FAQ", href: "/blog#faq" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto",
|
||||
items: [
|
||||
title: "Contacto", items: [
|
||||
{ label: "Teléfono", href: "tel:953225409" },
|
||||
{ label: "WhatsApp", href: "https://wa.me/34953225409" },
|
||||
{ label: "Email", href: "mailto:info@clinicagarciamara.es" },
|
||||
@@ -56,11 +48,6 @@ export default function ContactoPage() {
|
||||
},
|
||||
];
|
||||
|
||||
const navItemsConverted = navItems.map((item) => ({
|
||||
name: item.name,
|
||||
id: item.id.startsWith("/") ? item.id : "/" + item.id,
|
||||
}));
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="bounce-effect"
|
||||
@@ -68,166 +55,38 @@ export default function ContactoPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav" className="relative z-50 py-4">
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="Clínica Dental García Cámara"
|
||||
navItems={navItemsConverted}
|
||||
button={{ text: "Pedir Cita", href: "/contacto" }}
|
||||
navItems={navItems}
|
||||
button={{
|
||||
text: "Pedir Cita", href: "/contacto"}}
|
||||
animateOnLoad={true}
|
||||
navItemClassName="text-foreground font-medium hover:text-accent transition-colors"
|
||||
buttonClassName="bg-primary-cta hover:bg-primary-cta/90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Introduction Section */}
|
||||
<div id="contact-intro" data-section="contact-intro" className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<TextAbout
|
||||
tag="Ponte en Contacto"
|
||||
title="¿Listo para tu primera consulta? Contáctanos hoy mismo"
|
||||
useInvertedBackground={false}
|
||||
buttons={[{ text: "Volver al Inicio", href: "/" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Information Section */}
|
||||
<div id="contact-info" data-section="contact-info" className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<MetricCardThree
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
icon: Phone,
|
||||
title: "Teléfono",
|
||||
value: "953 22 54 09",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
icon: Mail,
|
||||
title: "Email",
|
||||
value: "info@clinic.es",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
icon: MapPin,
|
||||
title: "Ubicación",
|
||||
value: "Jaén",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
icon: Clock,
|
||||
title: "Horario",
|
||||
value: "L-V 10:00-20:00",
|
||||
},
|
||||
]}
|
||||
title="Información de Contacto"
|
||||
description="Diferentes formas de comunicarte con nosotros"
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Contact Form Section */}
|
||||
<div id="contact-form" data-section="contact-form" className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="rounded-lg border border-accent/20 bg-card p-8 md:p-12">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-2">Formulario de Contacto</h2>
|
||||
<p className="text-foreground/70 mb-8">Rellena el formulario y nos pondremos en contacto contigo lo antes posible.</p>
|
||||
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Tu nombre"
|
||||
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Teléfono</label>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Tu teléfono"
|
||||
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="tu@email.com"
|
||||
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Servicio Interesado</label>
|
||||
<select className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-accent">
|
||||
<option>Selecciona un servicio</option>
|
||||
<option>Implantes Dentales</option>
|
||||
<option>Ortodoncia</option>
|
||||
<option>Estética Dental</option>
|
||||
<option>Odontología General</option>
|
||||
<option>Consulta General</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="block text-sm font-medium text-foreground">Mensaje</label>
|
||||
<textarea
|
||||
placeholder="Cuéntanos sobre tu consulta..."
|
||||
rows={5}
|
||||
className="w-full px-4 py-2 border border-accent/20 rounded-lg bg-background text-foreground placeholder-foreground/50 focus:outline-none focus:ring-2 focus:ring-accent resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-primary-cta hover:bg-primary-cta/90 text-primary-cta-text font-medium py-3 rounded-lg transition-colors"
|
||||
>
|
||||
Enviar Mensaje
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-foreground/60 text-sm mt-6">
|
||||
También puedes contactarnos directamente por{" "}
|
||||
<a href="tel:953225409" className="text-accent hover:underline font-medium">
|
||||
teléfono
|
||||
</a>
|
||||
{" "}o{" "}
|
||||
<a href="https://wa.me/34953225409" className="text-accent hover:underline font-medium">
|
||||
WhatsApp
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Final CTA Section */}
|
||||
<div id="contact-cta" data-section="contact-cta" className="mx-auto px-4 md:px-6 py-16 md:py-24">
|
||||
<div id="contact-cta" data-section="contact-cta">
|
||||
<ContactText
|
||||
text="¿Tienes prisa? Llámanos directamente. Nuestro equipo está disponible para responder todas tus preguntas."
|
||||
text="¿Tienes alguna pregunta? Contáctanos y nos pondremos en contacto contigo lo antes posible."
|
||||
animationType="entrance-slide"
|
||||
buttons={[
|
||||
{ text: "Enviar Mensaje", href: "#" },
|
||||
{ text: "Llamar Ahora", href: "tel:953225409" },
|
||||
{ text: "WhatsApp", href: "https://wa.me/34953225409" },
|
||||
]}
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer" className="mt-24">
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={footerColumns}
|
||||
bottomLeftText="© 2025 Clínica Dental García Cámara. Todos los derechos reservados."
|
||||
|
||||
Reference in New Issue
Block a user