From 1cc8bc4eb65189353db8c8f566f584bc4959addd Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:43 +0000
Subject: [PATCH 1/7] Update src/app/about/page.tsx

---
 src/app/about/page.tsx | 334 +++++++++++++++++++++--------------------
 1 file changed, 169 insertions(+), 165 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index e88a6db..7c3b4f3 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,203 +1,207 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import Link from "next/link";
-import { Zap, Heart } from "lucide-react";
-
-export default function AboutPage() {
-  const footerColumns = [
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Services",
-      items: [
-        { label: "Kitchen Renovation", href: "/services" },
-        { label: "Bathroom Renovation", href: "/services" },
-        { label: "Living Space Redesign", href: "/services" },
-        { label: "Commercial Renovation", href: "/services" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-        { label: "Disclaimer", href: "#" },
-      ],
-    },
-  ];
+import { ThemeProvider } from '@/components/theme';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import TeamCardFive from '@/components/sections/team/TeamCardFive';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TextBox from '@/components/Textbox';
 
+const page = () => {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="largeSmallSizeLargeTitles"
-      background="floatingGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLarge"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Wah Wai"
-          bottomLeftText="Singapore Based"
-          bottomRightText="hello@wahwai.sg"
-        />
-      </div>
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'About', id: '/about' },
+          { name: 'Services', id: 'services' },
+          { name: 'Blog', id: 'blog' },
+          { name: 'Contact', id: 'contact' },
+        ]}
+        button={{ text: 'Get Started', href: 'contact' }}
+      />
 
-      <div id="about" data-section="about">
-        <TextSplitAbout
-          title="Our Story"
-          description={[
-            "Wah Wai Renovation was founded with a simple mission: to deliver exceptional renovation services that transform homes and businesses into spaces our clients love.",
-            "Our journey began over 15 years ago with a small team of passionate craftsmen. Today, we've grown to a full-service renovation company with architects, designers, project managers, and skilled tradespeople working in perfect harmony.",
-            "Every project we undertake reflects our commitment to excellence, innovation, and client satisfaction. We believe that great renovations are built on trust, transparency, and meticulous attention to detail.",
+      <div id="about-hero" data-section="about-hero" className="py-20 md:py-32">
+        <InlineImageSplitTextAbout
+          heading={[
+            { type: 'text', content: 'Crafting Excellence Since' },
+            {
+              type: 'image',
+              src: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=100&q=80',
+              alt: 'Luxury brand mark',
+            },
+            { type: 'text', content: '1995' },
           ]}
+          useInvertedBackground={false}
           buttons={[
-            {
-              text: "Get a Quote",
-              href: "/contact",
-            },
+            { text: 'Our Story', href: '#company-info' },
+            { text: 'Contact Us', href: 'contact' },
           ]}
-          buttonAnimation="slide-up"
-          showBorder={true}
-          useInvertedBackground={true}
         />
       </div>
 
-      <div id="expertise" data-section="expertise">
-        <MetricCardEleven
-          title="Our Expertise"
-          description="We bring together years of experience and a proven track record of successful projects across Singapore."
-          tag="Why Choose Us"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          metrics={[
+      <div id="company-info" data-section="company-info" className="py-20 md:py-32">
+        <TextBox
+          title="About Our Company"
+          description="We are dedicated to delivering exceptional luxury experiences through meticulous craftsmanship and timeless design. Our commitment to excellence has made us a trusted name in premium goods for three decades."
+          textboxLayout="default"
+          center={true}
+        />
+      </div>
+
+      <div id="founder" data-section="founder" className="py-20 md:py-32">
+        <TeamCardFive
+          team={[
             {
-              id: "1",
-              value: "500+",
-              title: "Projects Completed",
-              description: "Successfully transformed homes and businesses since 2009.",
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233772.jpg?_wi=2",
-              imageAlt: "Renovation projects completed",
-            },
-            {
-              id: "2",
-              value: "98%",
-              title: "Client Satisfaction",
-              description: "Our clients consistently rate us highly for quality and service.",
-              imageSrc: "http://img.b2bpic.net/free-photo/group-professional-engineers_23-2147704204.jpg?_wi=2",
-              imageAlt: "Satisfied clients",
-            },
-            {
-              id: "3",
-              value: "15+",
-              title: "Years Experience",
-              description: "More than a decade of proven expertise in renovation industry.",
-              imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=3",
-              imageAlt: "Professional team experience",
+              id: '1',
+              name: 'Ken Richardson',
+              role: 'Founder & Creative Director',
+              imageSrc:
+                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
             },
           ]}
-          textboxLayout="default"
           animationType="slide-up"
+          title="Meet Our Founder"
+          description="Ken Richardson's vision and passion for luxury have shaped our brand into what it is today."
+          textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="values" data-section="values">
-        <TestimonialCardSixteen
-          title="Our Values"
-          description="These core principles guide everything we do at Wah Wai Renovation."
-          tag="Core Values"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          testimonials={[
+      <div id="team" data-section="team" className="py-20 md:py-32">
+        <TeamCardFive
+          team={[
             {
-              id: "1",
-              name: "Quality",
-              role: "Excellence in Execution",
-              company: "Every Detail Matters",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/business-man-smiling-portrait_23-2149280769.jpg?_wi=2",
-              imageAlt: "Quality commitment",
+              id: '1',
+              name: 'Sarah Chen',
+              role: 'Head of Design',
+              imageSrc:
+                'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&q=80',
             },
             {
-              id: "2",
-              name: "Transparency",
-              role: "Open Communication",
-              company: "No Hidden Costs",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2",
-              imageAlt: "Transparency principle",
+              id: '2',
+              name: 'Michael Torres',
+              role: 'Quality Assurance',
+              imageSrc:
+                'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80',
             },
             {
-              id: "3",
-              name: "Innovation",
-              role: "Modern Solutions",
-              company: "Latest Techniques",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-bu-office-building_1303-31732.jpg?_wi=2",
-              imageAlt: "Innovation focus",
+              id: '3',
+              name: 'Emma Laurent',
+              role: 'Brand Ambassador',
+              imageSrc:
+                'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80',
             },
             {
-              id: "4",
-              name: "Reliability",
-              role: "On-Time Delivery",
-              company: "Trusted Partner",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg?_wi=2",
-              imageAlt: "Reliability commitment",
+              id: '4',
+              name: 'James Mitchell',
+              role: 'Artisan Master',
+              imageSrc:
+                'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&q=80',
             },
           ]}
-          kpiItems={[
-            {
-              value: "15+",
-              label: "Years in Business",
-            },
-            {
-              value: "500+",
-              label: "Happy Clients",
-            },
-            {
-              value: "100%",
-              label: "Commitment",
-            },
-          ]}
-          textboxLayout="default"
           animationType="slide-up"
-          useInvertedBackground={true}
+          title="Our Talented Team"
+          description="Meet the exceptional people behind our luxury brand."
+          textboxLayout="default"
+          useInvertedBackground={false}
         />
       </div>
 
-      <div id="footer" data-section="footer">
-        <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
-        />
+      <div id="testimonials" data-section="testimonials" className="py-20 md:py-32">
+        <div className="mb-16">
+          <TextBox
+            title="Customer Reviews"
+            description="Hear from our satisfied clients who experience true luxury with every purchase."
+            textboxLayout="default"
+            center={true}
+          />
+        </div>
+
+        <div className="space-y-12">
+          <TestimonialCardFifteen
+            testimonial="The quality and craftsmanship are extraordinary. Every detail speaks to the dedication of your team. I am a loyal customer for life."
+            rating={5}
+            author="Margaret Ashford, Luxury Collector"
+            avatars={[
+              {
+                src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80',
+                alt: 'Margaret Ashford',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
+                alt: 'Client',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
+                alt: 'Client',
+              },
+            ]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+
+          <TestimonialCardFifteen
+            testimonial="An investment piece that will be treasured for generations. The elegance and sophistication are unmatched in today's market."
+            rating={5}
+            author="Richard Pemberton, Art Curator"
+            avatars={[
+              {
+                src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&q=80',
+                alt: 'Richard Pemberton',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
+                alt: 'Client',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
+                alt: 'Client',
+              },
+            ]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+
+          <TestimonialCardFifteen
+            testimonial="Exceptional service matched with exceptional products. This is what true luxury is all about. Highly recommended to anyone with refined taste."
+            rating={5}
+            author="Victoria Sterling, Executive"
+            avatars={[
+              {
+                src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80',
+                alt: 'Victoria Sterling',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80',
+                alt: 'Client',
+              },
+              {
+                src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80',
+                alt: 'Client',
+              },
+            ]}
+            ratingAnimation="slide-up"
+            avatarsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+};
+
+export default page;
-- 
2.49.1


From f7b49c6e7d08abe6a6eba6e32c3e37bfb13a0568 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:43 +0000
Subject: [PATCH 2/7] Update src/app/contact/page.tsx

---
 src/app/contact/page.tsx | 254 +++++++++++++++++++++------------------
 1 file changed, 140 insertions(+), 114 deletions(-)

diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 101d64d..7115dca 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,130 +1,156 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import Link from "next/link";
-import { Sparkles, Hammer, Award, Heart, Zap, HelpCircle } from "lucide-react";
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { ReactLenis } from '@/components/common/ReactLenis';
+import { Mail, Phone, MapPin } from 'lucide-react';
 
 export default function ContactPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Services",
-      items: [
-        { label: "Kitchen Renovation", href: "/services" },
-        { label: "Bathroom Renovation", href: "/services" },
-        { label: "Living Space Redesign", href: "/services" },
-        { label: "Commercial Renovation", href: "/services" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-        { label: "Disclaimer", href: "#" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="largeSmallSizeLargeTitles"
-      background="floatingGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+      <ReactLenis root>
+        <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
+            { name: 'Home', id: '/' },
+            { name: 'Services', id: '/#services' },
+            { name: 'About', id: '/#about' },
+            { name: 'Contact', id: '/contact' },
           ]}
-          brandName="Wah Wai"
-          bottomLeftText="Singapore Based"
-          bottomRightText="hello@wahwai.sg"
+          button={{ text: 'Get Started', href: '/contact' }}
         />
-      </div>
 
-      <div id="contact" data-section="contact">
-        <ContactSplitForm
-          title="Get in Touch"
-          description="Ready to transform your space? Contact us today for a free consultation and discover how we can bring your renovation dreams to life."
-          inputs={[
-            {
-              name: "name",
-              type: "text",
-              placeholder: "Your Name",
-              required: true,
-            },
-            {
-              name: "email",
-              type: "email",
-              placeholder: "Your Email",
-              required: true,
-            },
-            {
-              name: "phone",
-              type: "tel",
-              placeholder: "Your Phone Number",
-              required: true,
-            },
-            {
-              name: "projectType",
-              type: "text",
-              placeholder: "Type of Project (e.g., Kitchen, Bathroom, Office)",
-              required: true,
-            },
-          ]}
-          textarea={{
-            name: "message",
-            placeholder: "Tell us about your renovation project...",
-            rows: 5,
-            required: true,
-          }}
-          buttonText="Send Inquiry"
-          useInvertedBackground={true}
-          imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=5"
-          imageAlt="renovation planning discussion interior"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-        />
-      </div>
+        {/* Contact Form Section */}
+        <div id="contact-form" data-section="contact-form" className="py-24">
+          <ContactSplit
+            tag="Get in Touch"
+            title="Let's Start a Conversation"
+            description="Whether you have a project in mind or want to discuss how we can help elevate your brand, we're here to listen. Reach out today."
+            tagIcon={Mail}
+            background={{ variant: 'sparkles-gradient' }}
+            useInvertedBackground={false}
+            imageSrc="/placeholders/placeholder5.jpg"
+            mediaPosition="right"
+            buttonText="Send Message"
+            inputPlaceholder="your@email.com"
+            onSubmit={(email) => console.log('Email submitted:', email)}
+          />
+        </div>
+
+        {/* Contact Details Section */}
+        <div id="contact-details" data-section="contact-details" className="py-24 px-4">
+          <div className="max-w-6xl mx-auto">
+            <div className="mb-16 text-center">
+              <h2 className="text-4xl md:text-5xl font-bold mb-4">Contact Information</h2>
+              <p className="text-lg text-foreground/75 max-w-2xl mx-auto">
+                Prefer to reach out directly? Here's how you can get in touch with our team.
+              </p>
+            </div>
+
+            <div className="grid md:grid-cols-3 gap-8 mb-12">
+              {/* Email */}
+              <div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
+                <div className="flex justify-center mb-4">
+                  <Mail className="w-8 h-8 text-primary-cta" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Email</h3>
+                <p className="text-foreground/75">
+                  <a href="mailto:hello@webild.com" className="hover:text-primary-cta transition-colors">
+                    hello@webild.com
+                  </a>
+                </p>
+                <p className="text-sm text-foreground/60 mt-2">We respond within 24 hours</p>
+              </div>
+
+              {/* Phone */}
+              <div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
+                <div className="flex justify-center mb-4">
+                  <Phone className="w-8 h-8 text-primary-cta" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Phone</h3>
+                <p className="text-foreground/75">
+                  <a href="tel:+1234567890" className="hover:text-primary-cta transition-colors">
+                    +1 (234) 567-890
+                  </a>
+                </p>
+                <p className="text-sm text-foreground/60 mt-2">Mon-Fri, 9am-6pm EST</p>
+              </div>
+
+              {/* Location */}
+              <div className="p-8 rounded-xl bg-card border border-accent/20 text-center hover:border-accent/40 transition-colors">
+                <div className="flex justify-center mb-4">
+                  <MapPin className="w-8 h-8 text-primary-cta" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">Location</h3>
+                <p className="text-foreground/75">
+                  San Francisco, CA<br />
+                  United States
+                </p>
+                <p className="text-sm text-foreground/60 mt-2">Available for remote work globally</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* WhatsApp Floating Button */}
+        <div className="fixed bottom-8 right-8 z-50">
+          <a
+            href="https://wa.me/1234567890?text=Hello%20Webild%2C%20I%27d%20like%20to%20discuss%20a%20project%20with%20you."
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center w-14 h-14 bg-green-500 text-white rounded-full shadow-lg hover:bg-green-600 transition-all hover:scale-110 hover:shadow-xl group"
+            aria-label="Chat on WhatsApp"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421-7.403h-.004a6.963 6.963 0 00-6.957 6.96c0 1.928.533 3.81 1.545 5.458L2.705 20.94a.75.75 0 00.961.961l5.06-1.257a6.963 6.963 0 005.457 1.545c3.859 0 6.957-3.099 6.957-6.958 0-1.86-.716-3.61-2.016-4.911-1.3-1.3-3.051-2.016-4.911-2.016z" />
+            </svg>
+          </a>
+        </div>
 
-      <div id="footer" data-section="footer">
         <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
+          columns={[
+            {
+              title: 'Product',
+              items: [
+                { label: 'Features', href: '/#services' },
+                { label: 'Pricing', href: '#' },
+              ],
+            },
+            {
+              title: 'Company',
+              items: [
+                { label: 'About', href: '/#about' },
+                { label: 'Blog', href: '#' },
+              ],
+            },
+            {
+              title: 'Legal',
+              items: [
+                { label: 'Privacy', href: '#' },
+                { label: 'Terms', href: '#' },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 | Webild"
         />
-      </div>
+      </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From ac2dd74334c972ea5cc65660c011ccfcf4cdc5ca Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:43 +0000
Subject: [PATCH 3/7] Update src/app/layout.tsx

---
 src/app/layout.tsx | 1450 ++------------------------------------------
 1 file changed, 38 insertions(+), 1412 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b4e2bb4..a88944a 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,1431 +1,58 @@
-import type { Metadata } from "next";
-import { Libre_Baskerville, Inter } from "next/font/google";
-import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
+'use client';
 
-const libreBaskerville = Libre_Baskerville({
-  variable: "--font-libre-baskerville",
-  subsets: ["latin"],
-  weight: ["400", "700"],
-});
+import type { Metadata } from 'next';
+import { Lora } from 'next/font/google';
+import './globals.css';
+import { ServiceWrapper } from '@/components/common/ServiceWrapper';
+import { Tag } from '@/components/common/Tag';
 
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
+const lora = Lora({
+  variable: '--font-lora',
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
 });
 
 export const metadata: Metadata = {
-  title: "Wah Wai - Professional Renovation Contractor Singapore",
-  description: "Expert renovation contractor in Singapore specializing in residential and commercial projects. Transform your space with quality craftsmanship and professional service.",
-  keywords: "renovation contractor Singapore, home renovation, kitchen renovation, bathroom renovation, commercial renovation, HDB renovation",
-  metadataBase: new URL("https://wahwai.sg"),
-  alternates: {
-    canonical: "https://wahwai.sg",
-  },
-  openGraph: {
-    title: "Wah Wai - Professional Renovation Contractor Singapore",
-    description: "Expert renovation contractor in Singapore specializing in residential and commercial projects.",
-    url: "https://wahwai.sg",
-    siteName: "Wah Wai Renovation",
-    type: "website",
-    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-helmet_23-2149328066.jpg",
-        alt: "Wah Wai Renovation - Professional Renovation Services",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Wah Wai - Professional Renovation Contractor Singapore",
-    description: "Expert renovation contractor in Singapore specializing in residential and commercial projects.",
-    images: ["http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-helmet_23-2149328066.jpg"],
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
+  title: 'Contact Us',
+  description: 'Get in touch with us',
 };
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${libreBaskerville.variable} ${inter.variable} antialiased`}
-        >
+      <body className={`${lora.variable}`}>
+        <ServiceWrapper>
           <Tag />
           {children}
-        
+        </ServiceWrapper>
+        <script
+          async
+          src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js"
+        />
         <script
           dangerouslySetInnerHTML={{
             __html: `
-(function() {
-  if (window.self === window.top) return;
-
-  if (window.__webildEditorInitialized) return;
-  window.__webildEditorInitialized = true;
-
-  let isActive = false;
-  let hoveredElement = null;
-  let selectedElement = null;
-  let originalContent = null;
-  let isEditing = false;
-  let elementTypeLabel = null;
-  let hoverOverlay = null;
-  let scrollTimeout = null;
-  let isScrolling = false;
-
-  const invalidElements = ['html', 'body', 'script', 'style', 'meta', 'link', 'head', 'noscript', 'title'];
-  const hoverClass = 'webild-hover';
-  const selectedClass = 'webild-selected';
-
-  const style = document.createElement('style');
-  style.id = 'webild-inspector-styles';
-  style.textContent = '' +
-    '.webild-hover {' +
-    '  outline: 2px dashed #4d96ff80 !important;' +
-    '  border-radius: 0 !important;' +
-    '  outline-offset: 2px !important;' +
-    '  cursor: pointer !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    '.webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  outline-offset: 2px !important;' +
-    '  transition: outline 0.15s ease !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '  border-radius: 0 !important;' +
-    '}' +
-    '[contenteditable="true"].webild-selected {' +
-    '  outline: 2px solid #4d96ff !important;' +
-    '  background-color: #4d96ff05 !important;' +
-    '}' +
-    'img.webild-hover,' +
-    'img.webild-selected,' +
-    'video.webild-hover,' +
-    'video.webild-selected {' +
-    '  outline-offset: 2px !important;' +
-    '}' +
-    '.webild-element-type-label {' +
-    '  position: fixed !important;' +
-    '  z-index: 999999 !important;' +
-    '  background: #4d96ff !important;' +
-    '  color: white !important;' +
-    '  padding: 4px 8px !important;' +
-    '  font-size: 11px !important;' +
-    '  font-weight: 600 !important;' +
-    '  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;' +
-    '  pointer-events: none !important;' +
-    '  white-space: nowrap !important;' +
-    '  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;' +
-    '  letter-spacing: 0.3px !important;' +
-    '  border: 1px solid #4d96ff20 !important;' +
-    '}' +
-    '.webild-element-type-label.label-top {' +
-    '  border-radius: 6px 6px 0 0 !important;' +
-    '}' +
-    '.webild-element-type-label.label-bottom {' +
-    '  border-radius: 0 0 6px 6px !important;' +
-    '}' +
-    '.webild-hover-overlay {' +
-    '  position: fixed !important;' +
-    '  background-color: #4d96ff15 !important;' +
-    '  pointer-events: none !important;' +
-    '  z-index: 999998 !important;' +
-    '  transition: all 0.15s ease !important;' +
-    '}';
-  document.head.appendChild(style);
-  
-  const getUniqueSelector = (element, assignId = false) => {
-    if (element.dataset && element.dataset.webildSelector) {
-      return element.dataset.webildSelector;
-    }
-    
-    const existingId = element.getAttribute('data-webild-id');
-    if (existingId) {
-      return '[data-webild-id="' + existingId + '"]';
-    }
-    
-    if (assignId) {
-      const uniqueId = 'webild-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9);
-      element.setAttribute('data-webild-id', uniqueId);
-      return '[data-webild-id="' + uniqueId + '"]';
-    }
-    
-    return null;
-  };
-  
-  const getSectionId = (element) => {
-    let current = element;
-    while (current && current !== document.body) {
-      const sectionId = current.getAttribute('data-section');
-      if (sectionId) {
-        return sectionId;
-      }
-      current = current.parentElement;
-    }
-    return 'hero';
-  };
-  
-  const getElementType = (element) => {
-  const tagName = element.tagName.toLowerCase();
-  const computedStyle = window.getComputedStyle(element);
-
-  if (tagName === 'img') {
-    return 'Image';
-  }
-
-  if (tagName === 'video') {
-    return 'Video';
-  }
-
-  const backgroundImage = computedStyle.backgroundImage;
-  if (backgroundImage && backgroundImage !== 'none') {
-    const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-    if (urlMatch && urlMatch[1] && !urlMatch[1].includes('gradient')) {
-      const area = element.offsetWidth * element.offsetHeight;
-      const hasReasonableSize = area > 1000;
-      const hasFewChildren = element.children.length <= 2;
-      
-      if (hasReasonableSize && hasFewChildren) {
-        return 'Image';
-      }
-    }
-  }
-
-    if (tagName === 'button') return 'Button';
-    if (tagName === 'a' && element.getAttribute('href')) return 'Button';
-    if (element.getAttribute('role') === 'button') return 'Button';
-
-    const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
-    const hasButtonClass = buttonClasses.some(cls =>
-      element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
-    );
-
-    if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
-      return 'Button';
-    }
-
-    const textTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'li'];
-    if (textTags.includes(tagName)) {
-      return 'Text';
-    }
-
-    if (tagName === 'div') {
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-      
-      if (hasDirectText && !element.querySelector('div, section, article, main, header, footer')) {
-        return 'Text';
-      }
-      
-      return 'Div';
-    }
-
-    if (tagName === 'article') {
-      return 'Article';
-    }
-
-    if (tagName === 'a' && !element.getAttribute('href')) {
-      return 'Text';
-    }
-
-    return 'Section';
-  };
-
-  const extractOriginalUrl = (url) => {
-    if (!url) return url;
-
-    if (url.includes('/_next/')) {
-      try {
-        const urlObj = new URL(url);
-        const originalPath = urlObj.searchParams.get('url');
-        if (originalPath) {
-          return originalPath;
-        }
-      } catch (e) {
-        return url;
-      }
-    }
-    
-    if (url.includes('.webild.io/')) {
-      try {
-        const urlObj = new URL(url);
-        return urlObj.pathname;
-      } catch (e) {
-        return url;
-      }
-    }
-
-    return url;
-  };
-
-  const getMediaTypeFromUrl = (url) => {
-    const videoExts = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.mkv', '.m4v', '.wmv'];
-    const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.svg', '.bmp', '.ico', '.tiff', '.avif'];
-    try {
-      const pathname = new URL(url).pathname.toLowerCase();
-      if (videoExts.some(function(ext) { return pathname.endsWith(ext); })) return 'video';
-      if (imageExts.some(function(ext) { return pathname.endsWith(ext); })) return 'image';
-    } catch(e) {}
-    return 'unknown';
-  };
-
-  const swapMediaElement = (oldEl, newTag, newSrc) => {
-    const newEl = document.createElement(newTag);
-    Array.from(oldEl.attributes).forEach(function(attr) {
-      if (attr.name !== 'src' && attr.name !== 'alt' && attr.name !== 'srcset' && attr.name !== 'autoplay' && attr.name !== 'loop' && attr.name !== 'muted' && attr.name !== 'playsinline') {
-        try { newEl.setAttribute(attr.name, attr.value); } catch(e) {}
-      }
-    });
-    newEl.style.cssText = oldEl.style.cssText;
-    if (newTag === 'video') {
-      newEl.setAttribute('autoplay', '');
-      newEl.setAttribute('loop', '');
-      newEl.setAttribute('muted', '');
-      newEl.setAttribute('playsinline', '');
-    }
-    newEl.src = newSrc;
-    if (oldEl.parentNode) {
-      oldEl.parentNode.replaceChild(newEl, oldEl);
-    }
-    return newEl;
-  };
-
-  const getElementInfo = (element, assignId = false) => {
-    const rect = element.getBoundingClientRect();
-    const tagName = element.tagName.toLowerCase();
-    const selector = getUniqueSelector(element, assignId);
-    const sectionId = getSectionId(element);
-    
-    let className = undefined;
-    try {
-      if (element.className) {
-        if (typeof element.className === 'string') {
-          className = element.className;
-        } else if (element.className.baseVal !== undefined) {
-          className = element.className.baseVal;
-        }
-      }
-    } catch (e) {}
-    
-    const info = {
-      tagName: tagName,
-      id: element.id || undefined,
-      className: className,
-      selector: selector,
-      elementType: null,
-      sectionId: sectionId,
-      boundingBox: {
-        x: rect.left,
-        y: rect.top,
-        width: rect.width,
-        height: rect.height
-      }
-    };
-    
-    if (tagName === 'img') {
-      const originalSrc = extractOriginalUrl(element.src);
-      info.imageData = {
-        src: originalSrc,
-        alt: element.alt || undefined,
-        naturalWidth: element.naturalWidth,
-        naturalHeight: element.naturalHeight,
-        isBackground: false
-      };
-    }
-
-    if (tagName === 'video') {
-      const rawSrc = element.src || element.currentSrc || (element.querySelector('source') && element.querySelector('source').src) || '';
-      const resolvedSrc = extractOriginalUrl(rawSrc);
-      info.imageData = {
-        src: resolvedSrc,
-        alt: element.getAttribute('aria-label') || undefined,
-        isBackground: false,
-        isVideo: true
-      };
-    }
-
-    const computedStyle = window.getComputedStyle(element);
-    const backgroundImage = computedStyle.backgroundImage;
-    if (backgroundImage && backgroundImage !== 'none') {
-      const urlMatch = backgroundImage.match(/url(['"]?([^'")]+)['"]?)/);
-      if (urlMatch) {
-        const originalBgSrc = extractOriginalUrl(urlMatch[1]);
-        if (tagName !== 'img') {
-          info.imageData = {
-            src: originalBgSrc,
-            isBackground: true
-          };
-        } else {
-          if (!info.imageData) info.imageData = {};
-          info.imageData.backgroundImageSrc = originalBgSrc;
-        }
-      }
-    }
-    
-    const elementType = getElementType(element);
-    info.elementType = elementType;
-    
-    if (elementType === 'Button') {
-      const buttonText = element.textContent?.trim() || element.value || element.getAttribute('aria-label') || '';
-      const buttonHref = element.getAttribute('href') ||
-                        element.getAttribute('data-href') ||
-                        element.getAttribute('onclick') ||
-                        element.dataset?.link ||
-                        undefined;
-
-      info.buttonData = {
-        text: buttonText,
-        href: buttonHref
-      };
-    }
-
-    if (elementType === 'Text') {
-      info.textContent = element.textContent || '';
-    }
-    
-    return info;
-  };
-  
-  const isValidElement = (element) => {
-    if (!isActive) return false;
-    const tagName = element.tagName?.toLowerCase();
-    if (invalidElements.includes(tagName)) return false;
-    const isImage = tagName === 'img';
-    const isVideo = tagName === 'video';
-    if (isImage || isVideo) return true;
-    const hasInnerHTML = element.innerHTML && element.innerHTML.trim().length > 0;
-    const hasTextContent = element.textContent && element.textContent.trim().length > 0;
-    const hasChildren = element.children && element.children.length > 0;
-    if (!hasInnerHTML && !hasTextContent && !hasChildren) {
-      return false;
-    }
-    const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-    if (hasBackgroundImage && !hasChildren && !hasTextContent) {
-      return false;
-    }
-    
-    return true;
-  };
-
-  const getMostSpecificElement = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    const validElements = elements.filter(el =>
-      isValidElement(el) &&
-      !el.classList.contains('webild-hover-overlay') &&
-      !el.classList.contains('webild-element-type-label')
-    );
-
-    if (validElements.length === 0) return null;
-    const scoredElements = validElements.map(element => {
-      let score = 0;
-      const rect = element.getBoundingClientRect();
-      const tagName = element.tagName.toLowerCase();
-      const computedStyle = window.getComputedStyle(element);
-      let depth = 0;
-      let current = element;
-      while (current && current !== document.body) {
-        depth++;
-        current = current.parentElement;
-      }
-      score += depth * 2;
-      const hasDirectText = Array.from(element.childNodes).some(node => 
-        node.nodeType === Node.TEXT_NODE && node.textContent && node.textContent.trim().length > 0
-      );
-
-      const hasImages = element.tagName === 'IMG' || element.tagName === 'VIDEO' || computedStyle.backgroundImage !== 'none' || element.querySelector('img') || element.querySelector('video');
-      const isInteractive = ['BUTTON', 'A', 'INPUT', 'SELECT', 'TEXTAREA'].includes(element.tagName);
-      const hasFewChildren = element.children.length <= 3;
-      const area = rect.width * rect.height;
-      const viewportArea = window.innerWidth * window.innerHeight;
-      const isSmallElement = area < viewportArea * 0.1;
-      if (hasDirectText) score += 20;
-      if (hasImages) score += 15;
-      if (isInteractive) score += 25;
-      if (hasFewChildren) score += 10;
-      if (isSmallElement) score += 5;
-      if (area > viewportArea * 0.3) score -= 30;
-      if (element.hasAttribute('data-section')) score -= 15;
-      if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) score += 20;
-      if (['p', 'span', 'label'].includes(tagName)) score += 15;
-      if (tagName === 'div' && !hasDirectText && element.children.length > 2) score -= 10;
-
-      return { element, score };
-    });
-    scoredElements.sort((a, b) => b.score - a.score);
-    return scoredElements[0]?.element || validElements[0];
-  };
-
-  const isTextElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Text';
-  };
-
-  const isButtonElement = (element) => {
-    const elementType = getElementType(element);
-    return elementType === 'Button';
-  };
-
-  const updateButtonText = (element, newText) => {
-    const textNodes = [];
-    const walker = document.createTreeWalker(
-      element,
-      NodeFilter.SHOW_TEXT,
-      null
-    );
-
-    let node;
-    while (node = walker.nextNode()) {
-      if (node.textContent && node.textContent.trim()) {
-        textNodes.push(node);
-      }
-    }
-
-    if (textNodes.length > 0) {
-      textNodes[0].textContent = newText;
-      for (let i = 1; i < textNodes.length; i++) {
-        textNodes[i].textContent = '';
-      }
-    } else {
-      element.textContent = newText;
-    }
-  };
-
-  const makeEditable = (element, clickEvent) => {
-    if (!isTextElement(element)) return;
-    
-    originalContent = element.textContent;
-    element.contentEditable = 'true';
-    
-    if (!element.dataset.webildOriginalWhiteSpace) {
-      const computedStyle = window.getComputedStyle(element);
-      element.dataset.webildOriginalWhiteSpace = computedStyle.whiteSpace;
-      element.dataset.webildOriginalWordWrap = computedStyle.wordWrap;
-      element.dataset.webildOriginalOverflowWrap = computedStyle.overflowWrap;
-      element.dataset.webildOriginalOverflow = computedStyle.overflow;
-    }
-    
-    element.style.whiteSpace = 'pre-wrap';
-    element.style.wordWrap = 'break-word';
-    element.style.overflowWrap = 'break-word';
-    element.style.overflow = 'visible';
-    
-    element.focus();
-    isEditing = true;
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-started',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    const handleBeforeInput = (e) => {
-      // Prevent deletion if it would leave the element empty
-      const currentText = element.textContent || '';
-      const inputType = e.inputType;
-      
-      // Check if this is a delete operation that would leave the element empty
-      if ((inputType === 'deleteContentBackward' || inputType === 'deleteContentForward' || inputType === 'deleteByCut') && currentText.length <= 1) {
-        e.preventDefault();
-        element.textContent = ' ';
-        // Move cursor to the beginning
-        const range = document.createRange();
-        const sel = window.getSelection();
-        range.setStart(element.firstChild || element, 0);
-        range.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-    };
-    
-    const handleInput = () => {
-      const elementInfo = getElementInfo(element);
-      let currentText = element.textContent;
-      
-      // Ensure there's always at least a space to keep the element editable
-      if (currentText === '' || currentText === null || currentText.length === 0) {
-        element.textContent = ' ';
-        currentText = ' ';
-        // Move cursor to the beginning
-        try {
-          const range = document.createRange();
-          const sel = window.getSelection();
-          range.setStart(element.firstChild || element, 0);
-          range.collapse(true);
-          sel.removeAllRanges();
-          sel.addRange(range);
-        } catch (e) {
-          // Ignore cursor positioning errors
-        }
-      }
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: {
-          type: 'updateText',
-          selector: elementInfo.selector,
-          oldValue: originalContent,
-          newValue: currentText,
-          elementType: elementInfo.elementType,
-          sectionId: elementInfo.sectionId,
-          timestamp: Date.now()
-        }
-      }, '*');
-      
-      if (currentText !== originalContent) {
-        window.parent.postMessage({
-          type: 'webild-text-changed',
-          data: { 
-            selector: elementInfo.selector,
-            hasChanges: true
-          }
-        }, '*');
-      }
-    };
-    
-    element.addEventListener('beforeinput', handleBeforeInput);
-    element.addEventListener('input', handleInput);
-    element.dataset.inputHandler = 'true';
-    element.dataset.beforeInputHandler = 'true';
-    
-    if (clickEvent && element.childNodes.length > 0) {
-      try {
-        let range = null;
-        
-        if (document.caretRangeFromPoint) {
-          range = document.caretRangeFromPoint(clickEvent.clientX, clickEvent.clientY);
-        } else if (document.caretPositionFromPoint) {
-          const position = document.caretPositionFromPoint(clickEvent.clientX, clickEvent.clientY);
-          if (position) {
-            range = document.createRange();
-            range.setStart(position.offsetNode, position.offset);
-            range.collapse(true);
-          }
-        }
-        
-        if (range) {
-          const selection = window.getSelection();
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      } catch (e) {
-        console.warn('[Webild] Could not set caret position:', e);
-      }
-    }
-  };
-  
-  const makeUneditable = (element, save = false) => {
-    if (!element || element.contentEditable !== 'true') return;
-    
-    element.contentEditable = 'false';
-    isEditing = false;
-    
-    if (element.dataset.webildOriginalWhiteSpace) {
-      element.style.whiteSpace = element.dataset.webildOriginalWhiteSpace === 'normal' ? '' : element.dataset.webildOriginalWhiteSpace;
-      delete element.dataset.webildOriginalWhiteSpace;
-    }
-    if (element.dataset.webildOriginalWordWrap) {
-      element.style.wordWrap = element.dataset.webildOriginalWordWrap === 'normal' ? '' : element.dataset.webildOriginalWordWrap;
-      delete element.dataset.webildOriginalWordWrap;
-    }
-    if (element.dataset.webildOriginalOverflowWrap) {
-      element.style.overflowWrap = element.dataset.webildOriginalOverflowWrap === 'normal' ? '' : element.dataset.webildOriginalOverflowWrap;
-      delete element.dataset.webildOriginalOverflowWrap;
-    }
-    if (element.dataset.webildOriginalOverflow) {
-      element.style.overflow = element.dataset.webildOriginalOverflow === 'visible' ? '' : element.dataset.webildOriginalOverflow;
-      delete element.dataset.webildOriginalOverflow;
-    }
-    
-    if (element.dataset.beforeInputHandler === 'true') {
-      element.removeEventListener('beforeinput', () => {});
-      delete element.dataset.beforeInputHandler;
-    }
-    
-    if (element.dataset.inputHandler === 'true') {
-      element.removeEventListener('input', () => {});
-      delete element.dataset.inputHandler;
-    }
-    
-    window.parent.postMessage({
-      type: 'webild-text-editing-ended',
-      data: { selector: getElementInfo(element).selector }
-    }, '*');
-    
-    if (save && originalContent !== element.textContent) {
-      const elementInfo = getElementInfo(element);
-      let finalText = element.textContent;
-      
-      // Trim the final text and convert space-only to empty string for saving
-      if (finalText === ' ' || finalText.trim() === '') {
-        finalText = '';
-        // Update the actual element text to empty for display
-        element.textContent = '';
-      }
-      
-      const change = {
-        type: 'updateText',
-        selector: elementInfo.selector,
-        oldValue: originalContent,
-        newValue: finalText,
-        elementType: elementInfo.elementType,
-        sectionId: elementInfo.sectionId,
-        timestamp: Date.now()
-      };
-
-      saveChangeToStorage(change);
-
-      window.parent.postMessage({
-        type: 'webild-element-changed',
-        data: change
-      }, '*');
-    } else if (!save && originalContent !== null) {
-      element.textContent = originalContent;
-    }
-    
-    originalContent = null;
-  };
-  
-  const createHoverOverlay = (element) => {
-    const rect = element.getBoundingClientRect();
-    const overlay = document.createElement('div');
-    overlay.className = 'webild-hover-overlay';
-    overlay.style.cssText = \`
-      position: fixed !important;
-      top: \${rect.top - 2}px !important;
-      left: \${rect.left - 2}px !important;
-      width: \${rect.width + 4}px !important;
-      height: \${rect.height + 4}px !important;
-      background-color: rgba(90, 113, 230, 0.15) !important;
-      pointer-events: none !important;
-      z-index: 999998 !important;
-      transition: all 0.15s ease !important;
-    \`;
-    document.body.appendChild(overlay);
-    return overlay;
-  };
-  
-  const removeHoverOverlay = () => {
-    if (hoverOverlay) {
-      hoverOverlay.remove();
-      hoverOverlay = null;
-    }
-  };
-  
-  const showElementTypeLabel = (element, elementType) => {
-    if (!elementType) return;
-
-    removeElementTypeLabel();
-
-    const rect = element.getBoundingClientRect();
-    elementTypeLabel = document.createElement('div');
-    elementTypeLabel.className = 'webild-element-type-label';
-    const ariaLabel = element.getAttribute('aria-label');
-    let labelText;
-    
-    if (elementType === 'Div') {
-      labelText = 'Div';
-    } else if (elementType === 'Article') {
-      labelText = 'Article';
-    } else if (elementType === 'Section') {
-      labelText = ariaLabel || 'Section';
-    } else {
-      labelText = elementType;
-    }
-    
-    elementTypeLabel.textContent = labelText;
-    document.body.appendChild(elementTypeLabel);
-    const labelRect = elementTypeLabel.getBoundingClientRect();
-    let labelTop = rect.top - labelRect.height - 2;
-    let labelLeft = rect.left - 3;
-    let isLabelOnTop = true;
-    if (labelTop < 0) {
-      labelTop = rect.bottom + 1;
-      isLabelOnTop = false;
-    }
-    if (labelTop + labelRect.height > window.innerHeight) {
-      labelTop = rect.bottom - labelRect.height;
-      isLabelOnTop = false;
-      if (labelTop < 0) {
-        labelTop = rect.top;
-        isLabelOnTop = true;
-      }
-    }
-    if (labelLeft + labelRect.width > window.innerWidth) {
-      labelLeft = window.innerWidth - labelRect.width;
-    }
-    if (labelLeft < 0) {
-      labelLeft = 0;
-    }
-    if (isLabelOnTop) {
-      elementTypeLabel.classList.add('label-top');
-    } else {
-      elementTypeLabel.classList.add('label-bottom');
-    }
-
-    elementTypeLabel.style.cssText = \`
-      left: \${labelLeft}px !important;
-      top: \${labelTop}px !important;
-      transform: none !important;
-    \`;
-  };
-  
-  const removeElementTypeLabel = () => {
-    if (elementTypeLabel) {
-      elementTypeLabel.remove();
-      elementTypeLabel = null;
-    }
-  };
-  
-  const handleMouseOver = (e) => {
-    if (!isActive) return;
-
-    lastMouseX = e.clientX;
-    lastMouseY = e.clientY;
-
-    const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;
-
-    if (!isValidElement(target) || target === hoveredElement || target === selectedElement) {
-      return;
-    }
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    hoveredElement = target;
-    
-    const computedStyle = window.getComputedStyle(target);
-    const currentPosition = computedStyle.position;
-    
-    if (currentPosition === 'static' || currentPosition === '') {
-      hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-      hoveredElement.style.position = 'relative';
-    }
-    
-    hoveredElement.classList.add(hoverClass);
-    
-    if ((!selectedElement || selectedElement !== target) && !isScrolling) {
-      hoverOverlay = createHoverOverlay(target);
-    }
-    
-    const elementType = getElementType(target);
-    showElementTypeLabel(target, elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-hover',
-      data: getElementInfo(target, false)
-    }, '*');
-  };
-  
-  const handleMouseOut = (e) => {
-    if (!isActive) return;
-    
-    if (hoveredElement && hoveredElement !== selectedElement) {
-      hoveredElement.classList.remove(hoverClass);
-      
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      hoveredElement = null;
-      
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-  };
-  
-  const handleClick = (e) => {
-  if (!isActive) return;
-
-  if (isEditing) {
-    e.stopPropagation();
-    return;
-  }
-
-  e.preventDefault();
-  e.stopPropagation();
-
-  const target = getMostSpecificElement(e.clientX, e.clientY) || e.target;  
-  if (!isValidElement(target)) return;
-    
-    if (selectedElement && selectedElement !== target) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      selectedElement.classList.remove(hoverClass);
-      
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-    }
-    
-    if (selectedElement === target) {
-      if (target.dataset.webildOriginalPosition) {
-        target.style.position = target.dataset.webildOriginalPosition === 'none' ? '' : target.dataset.webildOriginalPosition;
-        delete target.dataset.webildOriginalPosition;
-      }
-      
-      removeHoverOverlay();
-      removeElementTypeLabel();
-      
-      selectedElement = null;
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-      return;
-    }
-    
-    selectedElement = target;
-    selectedElement.classList.add(selectedClass);
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (hoveredElement === target) {
-      hoveredElement.classList.remove(hoverClass);
-      hoveredElement = null;
-    }
-    
-    const elementInfo = getElementInfo(target, true);
-    selectedElement.dataset.webildSelector = elementInfo.selector;
-    showElementTypeLabel(target, elementInfo.elementType);
-    
-    window.parent.postMessage({
-      type: 'webild-element-selected',
-      data: elementInfo
-    }, '*');
-    
-    if (isTextElement(target)) {
-      setTimeout(() => makeEditable(target, e), 50);
-    }
-  };
-  
-  const handleKeyDown = (e) => {
-    if (!isActive) return;
-    if (!isEditing || !selectedElement) return;
-    
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      makeUneditable(selectedElement, true);
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      makeUneditable(selectedElement, false);
-    }
-  };
-  
-  const handleBlur = (e) => {
-    if (!isActive) return;
-    if (isEditing && selectedElement && e.target === selectedElement) {
-      makeUneditable(selectedElement, true);
-    }
-  };
-  
-  let lastMouseX = 0;
-  let lastMouseY = 0;
-
-  const handleScroll = () => {
-    if (!isActive) return;
-    
-    if (isEditing) return;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-      selectedElement.classList.remove(selectedClass);
-      if (selectedElement.dataset.webildOriginalPosition) {
-        selectedElement.style.position = selectedElement.dataset.webildOriginalPosition === 'none' ? '' : selectedElement.dataset.webildOriginalPosition;
-        delete selectedElement.dataset.webildOriginalPosition;
-      }
-      selectedElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-selected',
-        data: null
-      }, '*');
-    }
-
-    if (hoveredElement) {
-      hoveredElement.classList.remove(hoverClass);
-      if (hoveredElement.dataset.webildOriginalPosition) {
-        hoveredElement.style.position = hoveredElement.dataset.webildOriginalPosition === 'none' ? '' : hoveredElement.dataset.webildOriginalPosition;
-        delete hoveredElement.dataset.webildOriginalPosition;
-      }
-      hoveredElement = null;
-
-      window.parent.postMessage({
-        type: 'webild-element-hover',
-        data: null
-      }, '*');
-    }
-
-    removeHoverOverlay();
-    removeElementTypeLabel();
-
-    isScrolling = true;
-
-    if (scrollTimeout) {
-      clearTimeout(scrollTimeout);
-    }
-
-    scrollTimeout = setTimeout(() => {
-      isScrolling = false;
-
-      if (lastMouseX > 0 && lastMouseY > 0) {
-        const target = getMostSpecificElement(lastMouseX, lastMouseY);
-        if (target && isValidElement(target) && target !== selectedElement) {
-          hoveredElement = target;
-
-          const computedStyle = window.getComputedStyle(target);
-          const currentPosition = computedStyle.position;
-
-          if (currentPosition === 'static' || currentPosition === '') {
-            hoveredElement.dataset.webildOriginalPosition = currentPosition || 'none';
-            hoveredElement.style.position = 'relative';
-          }
-
-          hoveredElement.classList.add(hoverClass);
-          hoverOverlay = createHoverOverlay(target);
-
-          const elementType = getElementType(target);
-          showElementTypeLabel(target, elementType);
-
-          window.parent.postMessage({
-            type: 'webild-element-hover',
-            data: getElementInfo(target, false)
-          }, '*');
-        }
-      }
-    }, 150);
-
-    window.parent.postMessage({
-      type: 'webild-iframe-scroll'
-    }, '*');
-  };
-  
-  const getStorageKey = () => {
-    const url = new URL(window.location.href);
-    const pathParts = url.pathname.split('/').filter(Boolean);
-    return \`webild-changes-\${pathParts.join('-')}\`;
-  };
-
-  const saveChangeToStorage = (change) => {
-    try {
-      const storageKey = getStorageKey();
-      const existingChanges = JSON.parse(localStorage.getItem(storageKey) || '[]');
-
-      const filteredChanges = existingChanges.filter(c => {
-        return !(c.oldValue === change.oldValue && c.sectionId === change.sectionId);
-      });
-      filteredChanges.push(change);
-
-      localStorage.setItem(storageKey, JSON.stringify(filteredChanges));
-
-      window.parent.postMessage({
-        type: 'webild-change-saved-locally',
-        data: { change, allChanges: filteredChanges }
-      }, '*');
-    } catch (error) {
-      console.error('Failed to save change to localStorage:', error);
-    }
-  };
-
-  const clearLocalChanges = () => {
-    try {
-      const storageKey = getStorageKey();
-      localStorage.removeItem(storageKey);
-      window.parent.postMessage({
-        type: 'webild-local-changes-cleared',
-        data: {}
-      }, '*');
-    } catch (error) {
-      console.error('Failed to clear local changes:', error);
-    }
-  };
-
-  const handleMessage = (e) => {
-    if (!e.data || !e.data.type) return;
-
-    if (e.data.type === 'webild-activate-editor') {
-      if (!isActive) {
-        isActive = true;
-        window.parent.postMessage({ type: 'webild-editor-activated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-deactivate-editor') {
-      if (isActive) {
-        isActive = false;
-
-        if (selectedElement) {
-          makeUneditable(selectedElement, false);
-          selectedElement.classList.remove(selectedClass);
-          selectedElement = null;
-        }
-        if (hoveredElement) {
-          hoveredElement.classList.remove(hoverClass);
-          hoveredElement = null;
-        }
-
-        removeHoverOverlay();
-        removeElementTypeLabel();
-        window.parent.postMessage({ type: 'webild-editor-deactivated' }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-clear-local-changes') {
-      clearLocalChanges();
-      return;
-    }
-
-    if (e.data.type === 'webild-cancel-changes') {
-      try {
-        const storageKey = getStorageKey();
-        const savedChanges = localStorage.getItem(storageKey);
-        if (savedChanges) {
-          const changes = JSON.parse(savedChanges);
-          changes.forEach(change => {
-            try {
-              const element = document.querySelector(change.selector);
-              if (!element) return;
-
-              if (change.type === 'updateText') {
-                if (isTextElement(element)) {
-                  element.textContent = change.oldValue;
-                }
-              } else if (change.type === 'updateButton') {
-                if (isButtonElement(element)) {
-                  updateButtonText(element, change.oldValue);
-                }
-              } else if (change.type === 'replaceImage') {
-                const revertTag = element.tagName.toLowerCase();
-                const isBackground = revertTag !== 'img' && revertTag !== 'video';
-                if (isBackground) {
-                  element.style.backgroundImage = change.oldValue ? 'url(' + change.oldValue + ')' : '';
-                } else {
-                  const oldMediaType = getMediaTypeFromUrl(change.oldValue);
-                  if (revertTag === 'video' && oldMediaType === 'image') {
-                    swapMediaElement(element, 'img', change.oldValue);
-                  } else if (revertTag === 'img' && oldMediaType === 'video') {
-                    swapMediaElement(element, 'video', change.oldValue);
-                  } else if (revertTag === 'video') {
-                    element.src = change.oldValue;
-                    element.load();
-                  } else {
-                    element.src = change.oldValue;
-                  }
-                }
+              const lenis = new Lenis({
+                duration: 1.2,
+                easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
+                direction: 'vertical',
+                gestureDirection: 'vertical',
+                smooth: true,
+                mouseMultiplier: 1,
+                smoothTouch: false,
+                touchMultiplier: 2,
+                infinite: false,
+              });
+              function raf(time) {
+                lenis.raf(time);
+                requestAnimationFrame(raf);
               }
-            } catch (err) {
-              console.warn('[Webild] Failed to revert change:', err);
-            }
-          });
-        }
-        clearLocalChanges();
-      } catch (error) {
-        console.error('[Webild] Failed to cancel changes:', error);
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-text') {
-      const { selector, newValue, oldValue, sectionId } = e.data.data;
-      try {
-        let element = null;
-        
-        if (selectedElement && isTextElement(selectedElement)) {
-          element = selectedElement;
-        }
-        else if (selector) {
-          try {
-            element = document.querySelector(selector);
-          } catch (err) {
-            console.warn('[Webild] Invalid selector:', selector);
-          }
-        }
-        
-        if (!element && sectionId) {
-          const sectionElement = document.querySelector('[data-section="' + sectionId + '"]');
-          if (sectionElement) {
-            const textElements = sectionElement.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, button, div');
-            for (let i = 0; i < textElements.length; i++) {
-              const el = textElements[i];
-              if (isTextElement(el) && el.textContent.trim() === (oldValue || '').trim()) {
-                element = el;
-                const newSelector = getUniqueSelector(element, true);
-                if (newSelector) {
-                  element.dataset.webildSelector = newSelector;
-                }
-                break;
-              }
-            }
-          }
-        }
-        
-        if (element && isTextElement(element)) {
-          element.textContent = newValue;
-          const finalSelector = element.dataset.webildSelector || getUniqueSelector(element, true);
-          
-          window.parent.postMessage({
-            type: 'webild-text-update-success',
-            data: {
-              selector: finalSelector,
-              newValue: newValue
-            }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-text-update-failed',
-            data: { selector, newValue }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-text-update-failed',
-          data: { selector, newValue, error: error.message }
-        }, '*');
-      }
-      return;
-    }
-
-    if (e.data.type === 'webild-update-button') {
-      const { selector, text, href } = e.data.data;
-      try {
-        const element = document.querySelector(selector);
-        if (element && isButtonElement(element)) {
-          if (text !== undefined) {
-            updateButtonText(element, text);
-          }
-          if (href !== undefined) {
-            if (element.tagName.toLowerCase() === 'a') {
-              element.href = href;
-            } else {
-              element.setAttribute('data-href', href);
-            }
-          }
-        }
-      } catch (error) {
-        console.error('[Webild] Invalid selector for button update:', selector, error);
-      }
-      return;
-    }
-
-    if (!isActive) return;
-
-    if (e.data.type === 'webild-replace-image') {
-      const { selector, newSrc, isBackground, allowMediaTypeSwap } = e.data.data;
-      let element = null;
-
-      try {
-        element = document.querySelector(selector);
-      } catch {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Invalid selector: ' + error.message, success: false }
-        }, '*');
-        return;
-      }
-
-      if (!element) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: 'Element not found', success: false }
-        }, '*');
-        return;
-      }
-
-      try {
-        let replaced = false;
-        let oldValue = '';
-
-        if (isBackground) {
-          oldValue = window.getComputedStyle(element).backgroundImage;
-          element.style.backgroundImage = \`url('\${newSrc}')\`;
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'img') {
-          oldValue = element.src;
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          if (newMediaType === 'video' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'video', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            element.src = newSrc;
-          }
-          replaced = true;
-        } else if (element.tagName.toLowerCase() === 'video') {
-          oldValue = element.src || element.currentSrc || '';
-          const newMediaType = getMediaTypeFromUrl(newSrc);
-          const sources = element.querySelectorAll('source');
-          if (newMediaType === 'image' && allowMediaTypeSwap) {
-            const swapped = swapMediaElement(element, 'img', newSrc);
-            if (selectedElement === element) selectedElement = swapped;
-            element = swapped;
-          } else {
-            if (sources.length > 0) {
-              sources.forEach(function(source) { source.src = newSrc; });
-              element.load();
-            } else {
-              element.src = newSrc;
-              element.load();
-            }
-          }
-          replaced = true;
-        } else {
-          const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
-          if (hasBackgroundImage) {
-            oldValue = window.getComputedStyle(element).backgroundImage;
-            element.style.backgroundImage = \`url('\${newSrc}')\`;
-            replaced = true;
-          }
-        }
-
-        if (replaced) {
-          const elementInfo = getElementInfo(element);
-
-          let cleanOldValue = oldValue;
-          if (oldValue.includes('url(')) {
-            const urlMatch = oldValue.match(/url(['"]?([^'")]+)['"]?)/);
-            if (urlMatch) {
-              cleanOldValue = urlMatch[1];
-            }
-          }
-
-          cleanOldValue = extractOriginalUrl(cleanOldValue);
-
-          const change = {
-            type: 'replaceImage',
-            selector: selector,
-            oldValue: cleanOldValue,
-            newValue: newSrc,
-            elementType: elementInfo.elementType,
-            sectionId: elementInfo.sectionId,
-            timestamp: Date.now()
-          };
-
-          saveChangeToStorage(change);
-
-          window.parent.postMessage({
-            type: 'webild-element-changed',
-            data: change
-          }, '*');
-
-          window.parent.postMessage({
-            type: 'webild-image-replaced',
-            data: { selector, newSrc, success: true }
-          }, '*');
-        } else {
-          window.parent.postMessage({
-            type: 'webild-image-replacement-error',
-            data: { selector, message: 'Could not determine how to replace image', success: false }
-          }, '*');
-        }
-      } catch (error) {
-        window.parent.postMessage({
-          type: 'webild-image-replacement-error',
-          data: { selector, message: error.message || 'Failed to replace image', success: false }
-        }, '*');
-      }
-    }
-  };
-  
-  document.addEventListener('mouseover', handleMouseOver, true);
-  document.addEventListener('mouseout', handleMouseOut, true);
-  document.addEventListener('click', handleClick, true);
-  document.addEventListener('keydown', handleKeyDown, true);
-  document.addEventListener('blur', handleBlur, true);
-  window.addEventListener('scroll', handleScroll, true);
-  window.addEventListener('message', handleMessage, true);
-  
-  let lastPathname = window.location.pathname;
-  
-  const notifyPageChange = () => {
-    window.parent.postMessage({
-      type: 'webild-page-changed',
-      data: { pathname: window.location.pathname }
-    }, '*');
-  };
-  
-  window.addEventListener('popstate', () => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, true);
-  
-  const urlCheckInterval = setInterval(() => {
-    if (lastPathname !== window.location.pathname) {
-      lastPathname = window.location.pathname;
-      notifyPageChange();
-    }
-  }, 500);
-  
-  notifyPageChange();
-  
-  window.webildCleanup = () => {
-    isActive = false;
-    
-    if (selectedElement) {
-      makeUneditable(selectedElement, false);
-    }
-    
-    removeHoverOverlay();
-    removeElementTypeLabel();
-    
-    if (urlCheckInterval) {
-      clearInterval(urlCheckInterval);
-    }
-    
-    document.removeEventListener('mouseover', handleMouseOver, true);
-    document.removeEventListener('mouseout', handleMouseOut, true);
-    document.removeEventListener('click', handleClick, true);
-    document.removeEventListener('keydown', handleKeyDown, true);
-    document.removeEventListener('blur', handleBlur, true);
-    window.removeEventListener('scroll', handleScroll, true);
-    window.removeEventListener('message', handleMessage, true);
-    
-    document.querySelectorAll('.' + hoverClass).forEach(el => {
-      el.classList.remove(hoverClass);
-    });
-    document.querySelectorAll('.' + selectedClass).forEach(el => {
-      el.classList.remove(selectedClass);
-    });
-    
-    const styleEl = document.getElementById('webild-inspector-styles');
-    if (styleEl) styleEl.remove();
-    
-    hoveredElement = null;
-    selectedElement = null;
-  };
-  
-  window.parent.postMessage({ type: 'webild-editor-ready' }, '*');
-})();
-`
+              requestAnimationFrame(raf);
+            `,
           }}
         />
       
@@ -2796,7 +1423,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From d6f71d98755daa3970cdba654520fb2c7017bf27 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:44 +0000
Subject: [PATCH 4/7] Update src/app/page.tsx

---
 src/app/page.tsx | 485 ++++++-----------------------------------------
 1 file changed, 56 insertions(+), 429 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f1f78b1..ee99cf3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,445 +1,72 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
-import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
-import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
-import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import Link from "next/link";
-import { Sparkles, Hammer, Award, Heart, Zap, HelpCircle } from "lucide-react";
-
-export default function HomePage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Company",
-      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Services",
-      items: [
-        { label: "Kitchen Renovation", href: "/services" },
-        { label: "Bathroom Renovation", href: "/services" },
-        { label: "Living Space Redesign", href: "/services" },
-        { label: "Commercial Renovation", href: "/services" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-        { label: "Disclaimer", href: "#" },
-      ],
-    },
-  ];
+import { ThemeProvider } from '@/components/theme/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import { ReactLenis } from '@/components/common/ReactLenis';
 
+export default function Home() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="largeSmallSizeLargeTitles"
-      background="floatingGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="aurora"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
+      <ReactLenis root>
+        <NavbarStyleCentered
           navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
+            { name: 'Home', id: '/' },
+            { name: 'Services', id: '#services' },
+            { name: 'About', id: '#about' },
+            { name: 'Contact', id: '/contact' },
           ]}
-          brandName="Wah Wai"
-          bottomLeftText="Singapore Based"
-          bottomRightText="hello@wahwai.sg"
+          button={{ text: 'Get Started', href: '/contact' }}
         />
-      </div>
-
-      <div id="hero" data-section="hero">
-        <HeroSplitDualMedia
-          title="Transform Your Space with Expert Renovation"
-          description="Professional renovation contractor in Singapore specializing in residential and commercial projects. We bring your vision to life with quality craftsmanship and attention to detail."
-          background={{ variant: "plain" }}
-          tag="Premium Renovations"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          mediaItems={[
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-wearing-helmet_23-2149328066.jpg",
-              imageAlt: "Modern luxury kitchen renovation",
-            },
-            {
-              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-engineer-architect-looking-clipboard_23-2148233772.jpg?_wi=1",
-              imageAlt: "Professional renovation team at work",
-            },
-          ]}
-          rating={5}
-          ratingText="Trusted by Singapore homeowners"
+        <HeroLogo
+          logoText="Webild"
+          description="Building exceptional digital experiences with innovative design solutions"
           buttons={[
-            {
-              text: "Get Free Consultation",
-              href: "/contact",
-            },
-            {
-              text: "View Our Work",
-              href: "#portfolio",
-            },
+            { text: 'Get Started', href: '/contact' },
+            { text: 'Learn More', href: '#about' },
           ]}
-          buttonAnimation="slide-up"
-          mediaAnimation="slide-up"
+          imageSrc="/placeholders/placeholder5.jpg"
+          imageAlt="Hero background"
         />
-      </div>
-
-      <div id="about" data-section="about">
-        <TextSplitAbout
-          title="About Wah Wai"
-          description={[
-            "With over 15 years of experience in the Singapore renovation industry, Wah Wai has established a reputation for delivering exceptional quality and customer satisfaction.",
-            "Our team of skilled architects, designers, and craftsmen work collaboratively to transform spaces into beautiful, functional environments that exceed expectations.",
-            "We pride ourselves on transparent communication, fair pricing, and meticulous project management from consultation to completion.",
-          ]}
-          buttons={[
-            {
-              text: "Learn More",
-              href: "/about",
-            },
-          ]}
-          buttonAnimation="slide-up"
-          showBorder={true}
-          useInvertedBackground={true}
-        />
-      </div>
-
-      <div id="services" data-section="services">
-        <FeatureCardOne
-          title="Our Services"
-          description="Comprehensive renovation solutions tailored to your needs and budget"
-          tag="What We Offer"
-          tagIcon={Hammer}
-          tagAnimation="slide-up"
-          features={[
-            {
-              title: "Kitchen Renovation",
-              description: "Modern kitchen designs with premium materials and smart storage solutions.",
-              imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954770.jpg?_wi=1",
-              button: {
-                text: "Explore",
-                href: "/services",
-              },
-            },
-            {
-              title: "Bathroom Upgrade",
-              description: "Luxurious bathroom renovations with spa-like aesthetics and functionality.",
-              imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-with-bathtub-shower_23-2151995358.jpg?_wi=1",
-              button: {
-                text: "Explore",
-                href: "/services",
-              },
-            },
-            {
-              title: "Living Space Redesign",
-              description: "Transform your living areas into stylish, comfortable gathering spaces.",
-              imageSrc: "http://img.b2bpic.net/free-photo/office-workers-collaborating-together_23-2147668764.jpg?_wi=1",
-              button: {
-                text: "Explore",
-                href: "/services",
-              },
-            },
-            {
-              title: "Commercial Renovation",
-              description: "Office and retail space renovation with modern design and functionality.",
-              imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=1",
-              button: {
-                text: "Explore",
-                href: "/services",
-              },
-            },
-          ]}
-          textboxLayout="default"
-          gridVariant="two-columns-alternating-heights"
-          animationType="slide-up"
-          buttonAnimation="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="portfolio" data-section="portfolio">
-        <ProductCardTwo
-          title="Our Portfolio"
-          description="Showcase of our finest renovation projects across Singapore"
-          tag="Recent Projects"
-          tagIcon={Award}
-          tagAnimation="slide-up"
-          products={[
-            {
-              id: "1",
-              brand: "Wah Wai",
-              name: "Luxury Marina Bay Apartment",
-              price: "Completed 2024",
-              rating: 5,
-              reviewCount: "12.8k",
-              imageSrc: "http://img.b2bpic.net/free-photo/woman-with-file-posing-office_23-2147668798.jpg?_wi=1",
-              imageAlt: "Luxury apartment renovation",
-            },
-            {
-              id: "2",
-              brand: "Wah Wai",
-              name: "Tech Startup Office Renovation",
-              price: "Completed 2024",
-              rating: 5,
-              reviewCount: "9.3k",
-              imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=2",
-              imageAlt: "Commercial office space renovation",
-            },
-            {
-              id: "3",
-              brand: "Wah Wai",
-              name: "HDB Bukit Merah Modernization",
-              price: "Completed 2023",
-              rating: 5,
-              reviewCount: "15.2k",
-              imageSrc: "http://img.b2bpic.net/free-photo/coworkers-table-working-with-papers_23-2147668784.jpg?_wi=1",
-              imageAlt: "HDB flat modern renovation",
-            },
-          ]}
-          textboxLayout="default"
-          gridVariant="three-columns-all-equal-width"
-          animationType="slide-up"
-          buttonAnimation="slide-up"
-          useInvertedBackground={true}
-        />
-      </div>
-
-      <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSixteen
-          title="Client Stories"
-          description="Hear from our satisfied clients about their renovation experience with Wah Wai"
-          tag="Testimonials"
-          tagIcon={Heart}
-          tagAnimation="slide-up"
-          testimonials={[
-            {
-              id: "1",
-              name: "Rachel Tan",
-              role: "Homeowner",
-              company: "Singapore",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/business-man-smiling-portrait_23-2149280769.jpg?_wi=1",
-              imageAlt: "Rachel Tan testimonial",
-            },
-            {
-              id: "2",
-              name: "David Lim",
-              role: "Business Owner",
-              company: "Singapore",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1",
-              imageAlt: "David Lim testimonial",
-            },
-            {
-              id: "3",
-              name: "Priya Kumar",
-              role: "Interior Designer",
-              company: "Singapore",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-woman-standing-bu-office-building_1303-31732.jpg?_wi=1",
-              imageAlt: "Priya Kumar testimonial",
-            },
-            {
-              id: "4",
-              name: "James Wong",
-              role: "Architect",
-              company: "Singapore",
-              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg?_wi=1",
-              imageAlt: "James Wong testimonial",
-            },
-          ]}
-          kpiItems={[
-            {
-              value: "500+",
-              label: "Projects Completed",
-            },
-            {
-              value: "98%",
-              label: "Client Satisfaction",
-            },
-            {
-              value: "15+",
-              label: "Years Experience",
-            },
-          ]}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="process" data-section="process">
-        <MetricCardEleven
-          title="Our Renovation Process"
-          description="A systematic approach to ensure quality results and client satisfaction at every stage"
-          tag="How We Work"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          metrics={[
-            {
-              id: "1",
-              value: "Step 1",
-              title: "Free Consultation",
-              description: "We discuss your vision, requirements, and budget.",
-              imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=1",
-              imageAlt: "Renovation consultation meeting",
-            },
-            {
-              id: "2",
-              value: "Step 2",
-              title: "Design & Planning",
-              description: "Our team creates detailed designs and project timelines.",
-              imageSrc: "http://img.b2bpic.net/free-photo/man-reading-blueprint-near-colleagues_23-2147808039.jpg?_wi=2",
-              imageAlt: "Design planning process",
-            },
-            {
-              id: "3",
-              value: "Step 3",
-              title: "Expert Execution",
-              description: "Skilled craftsmen deliver quality work with transparent updates.",
-              imageSrc: "http://img.b2bpic.net/free-photo/group-professional-engineers_23-2147704204.jpg?_wi=1",
-              imageAlt: "Renovation work in progress",
-            },
-          ]}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground={true}
-        />
-      </div>
-
-      <div id="faq" data-section="faq">
-        <FaqSplitMedia
-          title="Frequently Asked Questions"
-          description="Find answers to common questions about our renovation services"
-          tag="Support"
-          tagIcon={HelpCircle}
-          tagAnimation="slide-up"
-          faqs={[
-            {
-              id: "1",
-              title: "How long does a typical renovation project take?",
-              content: "Project duration depends on scope and complexity. A typical HDB 3-room flat takes 2-3 months, while a larger residential project may take 4-6 months. We provide detailed timelines during the consultation phase.",
-            },
-            {
-              id: "2",
-              title: "Do you provide warranty on renovation work?",
-              content: "Yes, we offer a 2-year workmanship warranty on all renovation services. Additionally, materials come with their respective manufacturer warranties.",
-            },
-            {
-              id: "3",
-              title: "Can you work within a specific budget?",
-              content: "Absolutely. We believe in transparent pricing and work with clients to optimize their budget without compromising quality. We provide detailed quotes upfront.",
-            },
-            {
-              id: "4",
-              title: "Do you handle all necessary permits and approvals?",
-              content: "Yes, we manage all the necessary MCST and HDB permits required for your renovation project in Singapore, ensuring compliance with regulations.",
-            },
-            {
-              id: "5",
-              title: "What is your approach to sustainability?",
-              content: "We prioritize eco-friendly materials and waste management practices. We can recommend sustainable options that align with your environmental values.",
-            },
-            {
-              id: "6",
-              title: "How do I get started with a renovation project?",
-              content: "Simply contact us through our website or call for a free consultation. We'll discuss your needs and provide a detailed proposal at no obligation.",
-            },
-          ]}
-          textboxLayout="default"
-          imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=1"
-          imageAlt="Renovation planning consultation"
-          mediaAnimation="slide-up"
-          faqsAnimation="slide-up"
-          mediaPosition="right"
-          useInvertedBackground={false}
-        />
-      </div>
-
-      <div id="contact-cta" data-section="contact-cta">
-        <ContactSplitForm
-          title="Ready to Start Your Renovation?"
-          description="Let's discuss your project requirements and bring your vision to life. Fill out the form below and we'll get back to you within 24 hours."
-          inputs={[
-            {
-              name: "name",
-              type: "text",
-              placeholder: "Your Name",
-              required: true,
-            },
-            {
-              name: "email",
-              type: "email",
-              placeholder: "Your Email",
-              required: true,
-            },
-            {
-              name: "phone",
-              type: "tel",
-              placeholder: "Your Phone Number",
-              required: true,
-            },
-            {
-              name: "projectType",
-              type: "text",
-              placeholder: "Type of Project",
-              required: true,
-            },
-          ]}
-          textarea={{
-            name: "message",
-            placeholder: "Tell us about your project...",
-            rows: 4,
-            required: true,
-          }}
-          buttonText="Get Started"
-          useInvertedBackground={true}
-          imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=2"
-          imageAlt="Contact us for renovation consultation"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
         <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
+          columns={[
+            {
+              title: 'Product',
+              items: [
+                { label: 'Features', href: '#services' },
+                { label: 'Pricing', href: '#' },
+              ],
+            },
+            {
+              title: 'Company',
+              items: [
+                { label: 'About', href: '#about' },
+                { label: 'Blog', href: '#' },
+              ],
+            },
+            {
+              title: 'Legal',
+              items: [
+                { label: 'Privacy', href: '#' },
+                { label: 'Terms', href: '#' },
+              ],
+            },
+          ]}
+          copyrightText="© 2025 | Webild"
         />
-      </div>
+      </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 3b1cda48c8adc6ecf371d154438a13cc2f33243b Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:44 +0000
Subject: [PATCH 5/7] Add src/app/projects/page.tsx

---
 src/app/projects/page.tsx | 77 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 src/app/projects/page.tsx

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..310e45f
--- /dev/null
+++ b/src/app/projects/page.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { ThemeProvider } from "@/context/ThemeContext";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
+import { ImageIcon, Zap } from "lucide-react";
+
+export default function ProjectsPage() {
+  const projects = [
+    {
+      title: "Modern Residential Complex",      description: "Luxury residential development featuring before and after transformation of urban landscape into premium living spaces.",      icon: ImageIcon,
+      mediaItems: [
+        { imageSrc: "https://images.unsplash.com/photo-1590129476917-a3a90bc9d798?w=800&q=80", imageAlt: "Before - Urban site" },
+        { imageSrc: "https://images.unsplash.com/photo-1574901755052-e0c8c1f7d90e?w=800&q=80", imageAlt: "After - Completed residential complex" },
+      ],
+    },
+    {
+      title: "Commercial Office Building",      description: "Contemporary office space redesign showcasing architectural excellence and sustainable design principles.",      icon: Zap,
+      mediaItems: [
+        { imageSrc: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80", imageAlt: "Before - Original office building" },
+        { imageSrc: "https://images.unsplash.com/photo-1497366216548-495affb08cdc?w=800&q=80", imageAlt: "After - Modern renovated office" },
+      ],
+    },
+    {
+      title: "Boutique Retail Space",      description: "High-end retail transformation featuring luxury minimal aesthetic and cutting-edge interior design.",      icon: ImageIcon,
+      mediaItems: [
+        { imageSrc: "https://images.unsplash.com/photo-1493857671505-72967e2e2760?w=800&q=80", imageAlt: "Before - Basic retail space" },
+        { imageSrc: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80", imageAlt: "After - Luxurious retail experience" },
+      ],
+    },
+    {
+      title: "Wellness Spa Retreat",      description: "Serene wellness center renovation emphasizing clean lines, natural materials, and tranquil atmospheres.",      icon: Zap,
+      mediaItems: [
+        { imageSrc: "https://images.unsplash.com/photo-1544161515-81e2b6b773b9?w=800&q=80", imageAlt: "Before - Traditional spa design" },
+        { imageSrc: "https://images.unsplash.com/photo-1584622281867-8a748c1f66f5?w=800&q=80", imageAlt: "After - Modern minimal spa" },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="semibold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+          { name: "Home", id: "/" },
+          { name: "Projects", id: "/projects" },
+          { name: "About", id: "about" },
+          { name: "Contact", id: "contact" },
+        ]}
+        button={{ text: "Get Started", href: "contact" }}
+      />
+      <main className="min-h-screen w-full">
+        <section id="projects" data-section="projects" className="py-24">
+          <FeatureCardTwentyFive
+            features={projects}
+            animationType="slide-up"
+            title="Our Projects"
+            description="Explore our portfolio of luxury minimal transformations featuring before and after photography"
+            tag="Portfolio"
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </section>
+      </main>
+    </ThemeProvider>
+  );
+}
-- 
2.49.1


From 5781a24a2e4cc02575459ba8bdcea1054dd1d215 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:45 +0000
Subject: [PATCH 6/7] Update src/app/services/page.tsx

---
 src/app/services/page.tsx | 211 +++++++++++++++++---------------------
 1 file changed, 95 insertions(+), 116 deletions(-)

diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index bf6d9d1..eb514a1 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,139 +1,118 @@
-"use client";
+'use client';
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
-import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import Link from "next/link";
-import { Hammer } from "lucide-react";
-
-export default function ServicesPage() {
-  const footerColumns = [
-    {
-      title: "Company",      items: [
-        { label: "About Us", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-        { label: "Contact", href: "/contact" },
-      ],
-    },
-    {
-      title: "Services",      items: [
-        { label: "Kitchen Renovation", href: "/services" },
-        { label: "Bathroom Renovation", href: "/services" },
-        { label: "Living Space Redesign", href: "/services" },
-        { label: "Commercial Renovation", href: "/services" },
-      ],
-    },
-    {
-      title: "Legal",      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-        { label: "Disclaimer", href: "#" },
-      ],
-    },
-  ];
+import { ThemeProvider } from '@/components/ThemeProvider';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
 
+export default function Services() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
-      contentWidth="smallMedium"
-      sizing="largeSmallSizeLargeTitles"
-      background="floatingGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="radial-glow"
-      secondaryButtonStyle="solid"
-      headingFontWeight="extrabold"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
     >
-      <div id="nav" data-section="nav">
-        <NavbarStyleFullscreen
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Services", id: "/services" },
-            { name: "Portfolio", id: "/portfolio" },
-            { name: "About", id: "/about" },
-            { name: "Contact", id: "/contact" },
-          ]}
-          brandName="Wah Wai"
-          bottomLeftText="Singapore Based"
-          bottomRightText="hello@wahwai.sg"
-        />
-      </div>
+      <NavbarLayoutFloatingOverlay
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Services', id: '/services' },
+        ]}
+        brandName="Webild"
+        button={{ text: 'Get Started', href: '#' }}
+      />
 
       <div id="services" data-section="services">
-        <FeatureCardOne
-          title="Our Comprehensive Services"
-          description="From concept to completion, we offer a full range of renovation services tailored to meet your unique needs and budget."
-          tag="What We Offer"
-          tagIcon={Hammer}
-          tagAnimation="slide-up"
-          features={[
+        <PricingCardNine
+          plans={[
             {
-              title: "Kitchen Renovation",              description: "Transform your kitchen with modern designs, premium cabinetry, and state-of-the-art appliances. We specialize in layout optimization and smart storage solutions.",              imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954770.jpg",              button: {
-                text: "Learn More",                href: "/contact"},
+              id: 'hdb',
+              title: 'HDB Renovation',
+              price: 'Custom',
+              period: 'Quote',
+              imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&h=400&fit=crop',
+              imageAlt: 'HDB renovation project',
+              button: { text: 'Request Quote', href: '#' },
+              features: [
+                'Complete space optimization',
+                'Modern fixtures and finishes',
+                'Expert space planning',
+                'Quality materials throughout',
+              ],
             },
             {
-              title: "Bathroom Upgrade",              description: "Create your spa-like retreat with luxurious bathroom renovations featuring premium fixtures, elegant tiling, and modern lighting design.",              imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-bathroom-with-bathtub-shower_23-2151995358.jpg",              button: {
-                text: "Learn More",                href: "/contact"},
+              id: 'condo',
+              title: 'Condo Renovation',
+              price: 'Custom',
+              period: 'Quote',
+              imageSrc: 'https://images.unsplash.com/photo-1565183928294-7563f3ce68c5?w=600&h=400&fit=crop',
+              imageAlt: 'Condo renovation project',
+              button: { text: 'Request Quote', href: '#' },
+              features: [
+                'Luxury condo transformations',
+                'Premium finishes and fixtures',
+                'Structural excellence',
+                'Modern design integration',
+              ],
             },
             {
-              title: "Living Space Redesign",              description: "Maximize comfort and style in your living areas. From open-plan layouts to intimate gathering spaces, we create environments that enhance your lifestyle.",              imageSrc: "http://img.b2bpic.net/free-photo/office-workers-collaborating-together_23-2147668764.jpg",              button: {
-                text: "Learn More",                href: "/contact"},
+              id: 'carpentry',
+              title: 'Carpentry Services',
+              price: 'Custom',
+              period: 'Quote',
+              imageSrc: 'https://images.unsplash.com/photo-1565614666747-d8a40e16481f?w=600&h=400&fit=crop',
+              imageAlt: 'Carpentry craftsmanship',
+              button: { text: 'Request Quote', href: '#' },
+              features: [
+                'Custom woodwork design',
+                'Fine joinery techniques',
+                'Built-in storage solutions',
+                'Premium wood selection',
+              ],
             },
             {
-              title: "Commercial Renovation",              description: "Professional office and retail space renovations designed to boost productivity and create lasting impressions on clients and employees.",              imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899443.jpg?_wi=1",              button: {
-                text: "Learn More",                href: "/contact"},
+              id: 'kitchen',
+              title: 'Kitchen Remodel',
+              price: 'Custom',
+              period: 'Quote',
+              imageSrc: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&h=400&fit=crop',
+              imageAlt: 'Modern kitchen renovation',
+              button: { text: 'Request Quote', href: '#' },
+              features: [
+                'State-of-the-art appliances',
+                'Custom cabinetry design',
+                'Luxury countertops',
+                'Professional layout planning',
+              ],
+            },
+            {
+              id: 'bathroom',
+              title: 'Bathroom Remodel',
+              price: 'Custom',
+              period: 'Quote',
+              imageSrc: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&h=400&fit=crop',
+              imageAlt: 'Luxury bathroom design',
+              button: { text: 'Request Quote', href: '#' },
+              features: [
+                'Spa-like ambiance creation',
+                'Premium fixtures and tiles',
+                'Smart storage solutions',
+                'Water-resistant design',
+              ],
             },
           ]}
-          textboxLayout="default"
-          gridVariant="two-columns-alternating-heights"
           animationType="slide-up"
-          buttonAnimation="slide-up"
+          title="Our Premium Services"
+          description="Discover our comprehensive range of luxury renovation services tailored to transform your space with elegance and excellence."
+          textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
-
-      <div id="service-cta" data-section="service-cta">
-        <ContactSplitForm
-          title="Discuss Your Project"
-          description="Ready to bring your renovation vision to life? Our expert team is here to discuss your requirements, provide honest advice, and deliver exceptional results."
-          inputs={[
-            {
-              name: "name",              type: "text",              placeholder: "Your Name",              required: true,
-            },
-            {
-              name: "email",              type: "email",              placeholder: "Your Email",              required: true,
-            },
-            {
-              name: "phone",              type: "tel",              placeholder: "Your Phone Number",              required: true,
-            },
-            {
-              name: "service",              type: "text",              placeholder: "Service Interested In",              required: true,
-            },
-          ]}
-          textarea={{
-            name: "details",            placeholder: "Describe your project in detail...",            rows: 4,
-            required: true,
-          }}
-          buttonText="Request Consultation"
-          useInvertedBackground={true}
-          imageSrc="http://img.b2bpic.net/free-photo/working-from-home-time-management-concept_23-2149065331.jpg?_wi=1"
-          imageAlt="Service consultation planning"
-          mediaAnimation="slide-up"
-          mediaPosition="right"
-        />
-      </div>
-
-      <div id="footer" data-section="footer">
-        <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
-        />
-      </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1


From 23b433f7a87738c96b696633363058480869e18d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 8 Mar 2026 01:30:45 +0000
Subject: [PATCH 7/7] Update src/app/styles/variables.css

---
 src/app/styles/variables.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 10fb73f..2c7d2be 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
+  --background: #f5f1ed;
   --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f514c;
+  --foreground: #1a1a1a;
+  --primary-cta: #d4af37;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #2d2d2d;
   --secondary-cta-text: #1c1c1c;
-  --accent: #35c18b;
-  --background-accent: #ecebe4;
+  --accent: #8b7355;
+  --background-accent: #e8e0d8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
-- 
2.49.1