Add src/components/sections/maps/GoogleMapsSection.tsx

Update src/app/page.tsx
Update src/app/layout.tsx
2026-03-05 18:54:49 +00:00 · 2026-03-05 18:54:48 +00:00 · 2026-03-05 18:54:47 +00:00 · 2026-03-05 18:47:13 +00:00 · 2026-03-05 18:46:23 +00:00 · 2026-03-05 18:45:06 +00:00
3 changed files with 183 additions and 42 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,51 +1,22 @@
 import type { Metadata } from "next";
-import { Public_Sans } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+import "./styles/variables.css";
+import "./styles/base.css";

-const publicSans = Public_Sans({
-  variable: "--font-public-sans",  subsets: ["latin"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
+const inter = Inter({ subsets: ["latin"] });

 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"),
-  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,
-  },
-};
+  title: "Grupo Canales | Reformas & Multiservicios Barcelona",  description: "Reformas integrales, fontanería, electricidad y mantenimiento en Barcelona. Más de 15 años de experiencia."};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${publicSans.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="es">
+      <body className={inter.className}>{children}
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1413,7 +1384,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,7 +10,12 @@ import TestimonialCardSixteen from "@/components/sections/testimonial/Testimonia
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import ContactFaq from "@/components/sections/contact/ContactFaq";
 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() {
  return (
@@ -247,6 +252,19 @@ export default function LandingPage() {
        />
      </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">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/conversation-engineers_1098-15478.jpg"
@@ -273,9 +291,9 @@ export default function LandingPage() {
            {
              title: "Contacto",              items: [
                { label: "Tel: 632788733", href: "tel:632788733" },
-                { label: "Avinguda Miraflores, 52", href: "#" },
-                { label: "L'Hospitalet de Llobregat", href: "#" },
-                { label: "Barcelona, España", href: "#" }
+                { label: "Avinguda Miraflores, 52", href: "#maps" },
+                { label: "L'Hospitalet de Llobregat", href: "#maps" },
+                { label: "Barcelona, España", href: "#maps" }
              ]
            }
          ]}
--- a/src/components/sections/maps/GoogleMapsSection.tsx
+++ b/src/components/sections/maps/GoogleMapsSection.tsx
@@ -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;
Author	SHA1	Message	Date
bender	eb86f96ed3	Add src/components/sections/maps/GoogleMapsSection.tsx	2026-03-05 18:54:49 +00:00
bender	1826f6916b	Update src/app/page.tsx	2026-03-05 18:54:48 +00:00
bender	8daccc9ab8	Update src/app/layout.tsx	2026-03-05 18:54:47 +00:00
bender	23f6250aad	Merge version_1 into main Merge version_1 into main	2026-03-05 18:47:13 +00:00
bender	e5a5ecc563	Merge version_1 into main Merge version_1 into main	2026-03-05 18:46:23 +00:00
bender	f1d0a4daef	Merge version_1 into main Merge version_1 into main	2026-03-05 18:45:06 +00:00