Add src/components/whatsapp/WhatsAppButton.tsx

Update src/app/page.tsx
Update src/app/layout.tsx
2026-03-06 14:41:38 +00:00 · 2026-03-06 14:41:38 +00:00 · 2026-03-06 14:41:37 +00:00 · 2026-03-06 14:27:53 +00:00 · 2026-03-06 14:27:49 +00:00 · 2026-03-06 14:26:40 +00:00
4 changed files with 75 additions and 84 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,76 +1,18 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Public_Sans } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const publicSans = Public_Sans({
-  variable: "--font-public-sans",
-  subsets: ["latin"],
-});

 export const metadata: Metadata = {
-  title: "Cerramientos Walter | Ventanas y Cerramientos Premium en CABA",
-  description: "Especialistas en ventanas de aluminio, cerramientos, rejas, mosquiteros y estructuras metálicas a medida. Servicio profesional en Buenos Aires. ⭐ 4.8/5 en Google.",
-  keywords: "cerramientos, ventanas de aluminio, rejas, mosquiteros, puertas, estructuras metálicas, trabajos a medida, CABA, Buenos Aires",
-  metadataBase: new URL("https://cerramientoswalter.com"),
-  alternates: {
-    canonical: "https://cerramientoswalter.com",
-  },
-  openGraph: {
-    title: "Cerramientos Walter | Soluciones Premium en Ventanas y Cerramientos",
-    description: "Instalaciones profesionales de ventanas de aluminio, cerramientos, rejas y más. Presupuesto sin compromiso.",
-    url: "https://cerramientoswalter.com",
-    siteName: "Cerramientos Walter",
-    type: "website",
-    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152149.jpg",
-        alt: "Ventanas de aluminio premium",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Cerramientos Walter | Ventanas de Aluminio Premium",
-    description: "Especialistas en cerramientos, ventanas, rejas y estructuras metálicas. Trabajo profesional en CABA.",
-    images: [
-      "http://img.b2bpic.net/free-photo/stylish-scandinavian-living-room-with-design-mint-sofa-furnitures-mock-up-poster-map-plants-eleg_1258-152149.jpg",
-    ],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-};
+  title: "Cerramientos Walter",  description: "Especialistas en ventanas de aluminio, cerramientos, rejas y soluciones a medida"};

 export default function RootLayout({
  children,
-}: Readonly<{
+}: {
  children: React.ReactNode;
-}>) {
+}) {
  return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${publicSans.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="es">
+      <body>
+        {children}
+      
        <script
          dangerouslySetInnerHTML={{
            __html: `
@@ -1438,7 +1380,6 @@ export default function RootLayout({
          }}
        />
      </body>
-      </ServiceWrapper>
    </html>
  );
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,14 +11,16 @@ import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCar
 import ProductCardOne from "@/components/sections/product/ProductCardOne";
 import ContactSplit from "@/components/sections/contact/ContactSplit";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import WhatsAppButton from "@/components/whatsapp/WhatsAppButton";
+import { Sparkles, CheckCircle, Shield, Wind, Wrench, Hammer } from "lucide-react";

 export default function HomePage() {
  const navItems = [
    { name: "Inicio", id: "/" },
-    { name: "Servicios", id: "/servicios" },
-    { name: "Trabajos", id: "projects" },
-    { name: "Nosotros", id: "about" },
-    { name: "Contacto", id: "contact" },
+    { name: "Servicios", id: "#services" },
+    { name: "Trabajos", id: "#projects" },
+    { name: "Nosotros", id: "#why-us" },
+    { name: "Contacto", id: "#contact" },
  ];

  return (
@@ -39,7 +41,7 @@ export default function HomePage() {
        <NavbarStyleCentered
          navItems={navItems}
          button={{
-            text: "Solicitar presupuesto",            href: "contact"}}
+            text: "Solicitar presupuesto",            href: "#contact"}}
          brandName="Cerramientos Walter"
        />
      </div>
@@ -85,6 +87,7 @@ export default function HomePage() {
          title="Servicios Principales"
          description="Soluciones completas en cerramientos y estructuras metálicas para tu hogar, local o proyecto"
          tag="Especialidad"
+          tagIcon={Sparkles}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
@@ -115,6 +118,7 @@ export default function HomePage() {
      <div id="why-us" data-section="why-us">
        <TextAbout
          tag="Ventajas"
+          tagIcon={CheckCircle}
          title="Por qué elegirnos: Atención rápida, trabajos prolijos, materiales de calidad, presupuestos claros, instalación profesional y soluciones a medida"
          useInvertedBackground={false}
        />
@@ -124,7 +128,7 @@ export default function HomePage() {
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTen
          title="Testimonios de Clientes"
-          description="Historias reales de clientes satisfechos"
+          description="Historias reales de clientes satisfechos con nuestro trabajo"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
@@ -144,13 +148,13 @@ export default function HomePage() {
        />
      </div>

-      {/* Projects Section */}
+      {/* Projects Gallery Section */}
      <div id="projects" data-section="projects">
        <ProductCardOne
          title="Proyectos Realizados"
-          description="Galería de trabajos instalados con acabado profesional"
+          description="Galería de trabajos instalados con acabado profesional. Descubre nuestras soluciones en acción."
          textboxLayout="default"
-          animationType="slide-up"
+          animationType="scale-rotate"
          useInvertedBackground={false}
          gridVariant="bento-grid"
          products={[
@@ -174,6 +178,7 @@ export default function HomePage() {
      <div id="final-cta" data-section="final-cta">
        <TextAbout
          tag="Próximo paso"
+          tagIcon={Hammer}
          title="¿Listo para tu proyecto? Solicita tu presupuesto sin compromiso hoy mismo"
          buttons={[
            { text: "Solicitar presupuesto", href: "#contact" },
@@ -209,17 +214,17 @@ export default function HomePage() {
            {
              title: "Navegación",              items: [
                { label: "Inicio", href: "/" },
-                { label: "Servicios", href: "/servicios" },
-                { label: "Trabajos", href: "/trabajos" },
-                { label: "Nosotros", href: "/nosotros" },
+                { label: "Servicios", href: "#services" },
+                { label: "Trabajos", href: "#projects" },
+                { label: "Nosotros", href: "#why-us" },
              ],
            },
            {
              title: "Servicios",              items: [
-                { label: "Cerramientos", href: "/servicios#cerramientos" },
-                { label: "Ventanas", href: "/servicios#ventanas" },
-                { label: "Rejas", href: "/servicios#rejas" },
-                { label: "Mosquiteros", href: "/servicios#mosquiteros" },
+                { label: "Cerramientos", href: "#services" },
+                { label: "Ventanas", href: "#services" },
+                { label: "Rejas", href: "#services" },
+                { label: "Mosquiteros", href: "#services" },
              ],
            },
            {
@@ -241,6 +246,12 @@ export default function HomePage() {
          copyrightText="© 2025 Cerramientos Walter. Todos los derechos reservados. Buenos Aires, Argentina."
        />
      </div>
+
+      {/* WhatsApp Floating Button */}
+      <WhatsAppButton
+        phoneNumber="5491139493469"
+        message="Hola, quiero consultar por un presupuesto."
+      />
    </ThemeProvider>
  );
 }
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }
--- a/src/components/whatsapp/WhatsAppButton.tsx
+++ b/src/components/whatsapp/WhatsAppButton.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { MessageCircle } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface WhatsAppButtonProps {
+  phoneNumber: string;
+  message: string;
+}
+
+export default function WhatsAppButton({
+  phoneNumber,
+  message,
+}: WhatsAppButtonProps) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  const handleClick = () => {
+    const encodedMessage = encodeURIComponent(message);
+    const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
+    window.open(whatsappUrl, "_blank");
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <button
+      onClick={handleClick}
+      aria-label="Contact us on WhatsApp"
+      className="fixed bottom-8 right-8 z-50 flex items-center justify-center w-14 h-14 rounded-full bg-green-500 hover:bg-green-600 shadow-lg transition-all duration-300 hover:scale-110 active:scale-95"
+      title="Chat on WhatsApp"
+    >
+      <MessageCircle className="w-6 h-6 text-white" strokeWidth={2} />
+    </button>
+  );
+}
Author	SHA1	Message	Date
bender	000e164313	Add src/components/whatsapp/WhatsAppButton.tsx	2026-03-06 14:41:38 +00:00
bender	e7c9e30c90	Update src/app/page.tsx	2026-03-06 14:41:38 +00:00
bender	5863aa6965	Update src/app/layout.tsx	2026-03-06 14:41:37 +00:00
bender	1238c9c4ce	Merge version_2 into main Merge version_2 into main	2026-03-06 14:27:53 +00:00
bender	4d284a5479	Update src/app/page.tsx	2026-03-06 14:27:49 +00:00
bender	23c9592c89	Merge version_2 into main Merge version_2 into main	2026-03-06 14:26:40 +00:00
bender	f66e0aa5e5	Update src/app/styles/base.css	2026-03-06 14:26:35 +00:00
bender	79fe82c0e2	Update src/app/page.tsx	2026-03-06 14:26:35 +00:00
bender	7658eb47e9	Update src/app/layout.tsx	2026-03-06 14:26:34 +00:00
bender	e214306007	Merge version_1 into main Merge version_1 into main	2026-03-06 14:24:35 +00:00
bender	dceffb90f0	Merge version_1 into main Merge version_1 into main	2026-03-06 14:23:44 +00:00
bender	9355efb315	Merge version_1 into main Merge version_1 into main	2026-03-06 14:21:57 +00:00
bender	3ede49b490	Merge version_1 into main Merge version_1 into main	2026-03-06 14:21:07 +00:00