Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| eb86f96ed3 | |||
| 1826f6916b | |||
| 8daccc9ab8 | |||
| 23f6250aad | |||
| e5a5ecc563 | |||
| f1d0a4daef |
@@ -1,51 +1,22 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Public_Sans } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
import "./styles/variables.css";
|
||||||
import Tag from "@/tag/Tag";
|
import "./styles/base.css";
|
||||||
|
|
||||||
const publicSans = Public_Sans({
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
variable: "--font-public-sans", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Grupo Canales Reformas & Multiservicios | Barcelona", description: "Reformas integrales, fontanería y electricidad en Barcelona. 15+ años de experiencia. Presupuestos sin compromiso. Tel: 632788733", keywords: "reformas barcelona, fontanería, electricidad, construcción, multiservicios, L'Hospitalet", metadataBase: new URL("https://grupocanalesreformas.es"),
|
title: "Grupo Canales | Reformas & Multiservicios Barcelona", description: "Reformas integrales, fontanería, electricidad y mantenimiento en Barcelona. Más de 15 años de experiencia."};
|
||||||
alternates: {
|
|
||||||
canonical: "https://grupocanalesreformas.es"},
|
|
||||||
openGraph: {
|
|
||||||
title: "Grupo Canales Reformas & Multiservicios", description: "Expertos en reformas integrales y servicios técnicos en Barcelona", url: "https://grupocanalesreformas.es", siteName: "Grupo Canales", type: "website", images: [
|
|
||||||
{
|
|
||||||
url: "http://img.b2bpic.net/free-photo/result-back-view-three-men-protective-helmets-holding-hands-his-waist-standing-construction-site-looking-buildings-construction-day_259150-57624.jpg", alt: "Grupo Canales - Reformas Profesionales"},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
twitter: {
|
|
||||||
card: "summary_large_image", title: "Grupo Canales Reformas & Multiservicios", description: "Reformas, fontanería y electricidad en Barcelona", images: ["http://img.b2bpic.net/free-photo/result-back-view-three-men-protective-helmets-holding-hands-his-waist-standing-construction-site-looking-buildings-construction-day_259150-57624.jpg"],
|
|
||||||
},
|
|
||||||
robots: {
|
|
||||||
index: true,
|
|
||||||
follow: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="es">
|
||||||
<ServiceWrapper>
|
<body className={inter.className}>{children}
|
||||||
<body
|
|
||||||
className={`${publicSans.variable} ${inter.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1413,7 +1384,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,12 @@ import TestimonialCardSixteen from "@/components/sections/testimonial/Testimonia
|
|||||||
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||||
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
||||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||||
import { Hammer, Building2, CheckCircle, Wrench, Clock, Shield, Briefcase, Users, Star, HelpCircle, Phone } from "lucide-react";
|
import { Hammer, Building2, CheckCircle, Wrench, Clock, Shield, Briefcase, Users, Star, HelpCircle, Phone, MapPin } from "lucide-react";
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
|
||||||
|
const GoogleMapsSection = dynamic(() => import("@/components/sections/maps/GoogleMapsSection"), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -247,6 +252,19 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="maps" data-section="maps">
|
||||||
|
<GoogleMapsSection
|
||||||
|
title="Nuestra Ubicación"
|
||||||
|
description="Visítanos en nuestras oficinas ubicadas en el corazón de L'Hospitalet de Llobregat"
|
||||||
|
tag="Ubicación"
|
||||||
|
tagIcon={MapPin}
|
||||||
|
address="Avinguda Miraflores, 52, 08905 L'Hospitalet de Llobregat, Barcelona, España"
|
||||||
|
latitude={41.3517}
|
||||||
|
longitude={2.1004}
|
||||||
|
useInvertedBackground={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterMedia
|
<FooterMedia
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
|
||||||
@@ -273,9 +291,9 @@ export default function LandingPage() {
|
|||||||
{
|
{
|
||||||
title: "Contacto", items: [
|
title: "Contacto", items: [
|
||||||
{ label: "Tel: 632788733", href: "tel:632788733" },
|
{ label: "Tel: 632788733", href: "tel:632788733" },
|
||||||
{ label: "Avinguda Miraflores, 52", href: "#" },
|
{ label: "Avinguda Miraflores, 52", href: "#maps" },
|
||||||
{ label: "L'Hospitalet de Llobregat", href: "#" },
|
{ label: "L'Hospitalet de Llobregat", href: "#maps" },
|
||||||
{ label: "Barcelona, España", href: "#" }
|
{ label: "Barcelona, España", href: "#maps" }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
|
|||||||
153
src/components/sections/maps/GoogleMapsSection.tsx
Normal file
153
src/components/sections/maps/GoogleMapsSection.tsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { LucideIcon } from "lucide-react";
|
||||||
|
|
||||||
|
interface GoogleMapsSectionProps {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
tag?: string;
|
||||||
|
tagIcon?: LucideIcon;
|
||||||
|
address: string;
|
||||||
|
latitude: number;
|
||||||
|
longitude: number;
|
||||||
|
useInvertedBackground?: boolean;
|
||||||
|
className?: string;
|
||||||
|
containerClassName?: string;
|
||||||
|
titleClassName?: string;
|
||||||
|
descriptionClassName?: string;
|
||||||
|
mapContainerClassName?: string;
|
||||||
|
tagClassName?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GoogleMapsSection: React.FC<GoogleMapsSectionProps> = ({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
tag,
|
||||||
|
tagIcon: TagIcon,
|
||||||
|
address,
|
||||||
|
latitude,
|
||||||
|
longitude,
|
||||||
|
useInvertedBackground = false,
|
||||||
|
className,
|
||||||
|
containerClassName,
|
||||||
|
titleClassName,
|
||||||
|
descriptionClassName,
|
||||||
|
mapContainerClassName,
|
||||||
|
tagClassName,
|
||||||
|
}) => {
|
||||||
|
const [isLoaded, setIsLoaded] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsLoaded(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const mapsUrl = `https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.3484739394996!2d${longitude}!3d${latitude}!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a1c1c1c1c1c1%3A0x0!2sAvinguda%20Miraflores%2C%2052%2C%2008905%20L'Hospitalet%20de%20Llobregat%2C%20Barcelona!5e0!3m2!1ses!2ses!4v1234567890123`;
|
||||||
|
|
||||||
|
const bgClass = useInvertedBackground
|
||||||
|
? "bg-background-accent/10"
|
||||||
|
: "bg-card/50";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
id="maps"
|
||||||
|
data-section="maps"
|
||||||
|
className={`py-16 md:py-24 lg:py-32 ${bgClass} transition-colors duration-300 ${className}`}
|
||||||
|
>
|
||||||
|
<div className={`max-w-7xl mx-auto px-4 md:px-6 lg:px-8 ${containerClassName}`}>
|
||||||
|
{/* Header Section */}
|
||||||
|
<div className="mb-12 md:mb-16 lg:mb-20">
|
||||||
|
{tag && (
|
||||||
|
<div className={`flex items-center gap-2 mb-4 ${tagClassName}`}>
|
||||||
|
{TagIcon && <TagIcon className="w-4 h-4 md:w-5 md:h-5" />}
|
||||||
|
<span className="text-xs md:text-sm font-medium uppercase tracking-wider text-primary-cta opacity-80">
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h2
|
||||||
|
className={`text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-foreground ${titleClassName}`}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
className={`text-base md:text-lg lg:text-xl text-foreground/70 max-w-2xl ${descriptionClassName}`}
|
||||||
|
>
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Maps Container */}
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
|
||||||
|
{/* Map Embed */}
|
||||||
|
<div className={`lg:col-span-2 rounded-lg overflow-hidden shadow-lg ${mapContainerClassName}`}>
|
||||||
|
{isLoaded && (
|
||||||
|
<iframe
|
||||||
|
src={mapsUrl}
|
||||||
|
width="100%"
|
||||||
|
height="500"
|
||||||
|
style={{ border: 0, minHeight: "400px" }}
|
||||||
|
allowFullScreen={true}
|
||||||
|
loading="lazy"
|
||||||
|
referrerPolicy="no-referrer-when-downgrade"
|
||||||
|
className="w-full h-full"
|
||||||
|
title="Ubicación de Grupo Canales"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Address Card */}
|
||||||
|
<div className="flex flex-col justify-start lg:justify-center">
|
||||||
|
<div className="rounded-lg border border-accent/30 bg-card p-6 md:p-8 shadow-md hover:shadow-lg transition-shadow duration-300">
|
||||||
|
<h3 className="text-xl md:text-2xl font-bold text-foreground mb-6">
|
||||||
|
Dirección
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-foreground/60 uppercase tracking-wide mb-2">
|
||||||
|
Ubicación
|
||||||
|
</p>
|
||||||
|
<p className="text-base md:text-lg text-foreground leading-relaxed">
|
||||||
|
{address}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-foreground/60 uppercase tracking-wide mb-2">
|
||||||
|
Teléfono
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="tel:632788733"
|
||||||
|
className="text-base md:text-lg text-primary-cta hover:text-primary-cta/80 transition-colors duration-200 font-semibold"
|
||||||
|
>
|
||||||
|
632 788 733
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-foreground/60 uppercase tracking-wide mb-2">
|
||||||
|
Horario
|
||||||
|
</p>
|
||||||
|
<p className="text-base md:text-lg text-foreground">
|
||||||
|
Lunes - Sábado: 8:30 - 20:30
|
||||||
|
</p>
|
||||||
|
<p className="text-base md:text-lg text-foreground">
|
||||||
|
Domingo: Cerrado
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={`https://www.google.com/maps/search/Avinguda+Miraflores,+52,+L'Hospitalet+de+Llobregat`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-block mt-4 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:bg-primary-cta/90 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
Abrir en Google Maps
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GoogleMapsSection;
|
||||||
Reference in New Issue
Block a user