Merge version_2 into main

Merge version_2 into main

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 '@/providers/themeProvider/ThemeProvider';
+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>
   );
-}
+};
+
+export default page;

src/app/contact/page.tsx

@@ -1,130 +1,150 @@
-"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 '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+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
-          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"
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Services', id: '/#services' },
+          { name: 'About', id: '/#about' },
+          { name: 'Contact', id: '/contact' },
+        ]}
+        button={{ text: 'Get Started', href: '/contact' }}
+      />
+
+      {/* Contact Form Section */}
+      <div id="contact-form" data-section="contact-form" className="py-24">
+        <ContactCenter
+          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}
+          inputPlaceholder="your@email.com"
+          onSubmit={(email) => console.log('Email submitted:', email)}
         />
       </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"
-        />
+      {/* 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>
 
-      <div id="footer" data-section="footer">
-        <FooterBaseReveal
-          columns={footerColumns}
-          copyrightText="© 2024 Wah Wai Renovation. All rights reserved. Singapore."
-        />
+      {/* 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>
+
+      <FooterBaseReveal
+        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"
+      />
     </ThemeProvider>
   );
-}
+}

src/app/page.tsx

@@ -1,445 +1,69 @@
-"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 '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 
+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
-          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>
-
-      <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"
-          buttons={[
-            {
-              text: "Get Free Consultation",
-              href: "/contact",
-            },
-            {
-              text: "View Our Work",
-              href: "#portfolio",
-            },
-          ]}
-          buttonAnimation="slide-up"
-          mediaAnimation="slide-up"
-        />
-      </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."
-        />
-      </div>
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Services', id: '#services' },
+          { name: 'About', id: '#about' },
+          { name: 'Contact', id: '/contact' },
+        ]}
+        button={{ text: 'Get Started', href: '/contact' }}
+      />
+      <HeroLogo
+        logoText="Webild"
+        description="Building exceptional digital experiences with innovative design solutions"
+        buttons={[
+          { text: 'Get Started', href: '/contact' },
+          { text: 'Learn More', href: '#about' },
+        ]}
+        imageSrc="/placeholders/placeholder5.jpg"
+        imageAlt="Hero background"
+      />
+      <FooterBaseReveal
+        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"
+      />
     </ThemeProvider>
   );
-}
+}

src/app/projects/page.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+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&_wi=1", imageAlt: "Before - Urban site" },
+        { imageSrc: "https://images.unsplash.com/photo-1574901755052-e0c8c1f7d90e?w=800&q=80&_wi=1", 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&_wi=1", imageAlt: "Before - Original office building" },
+        { imageSrc: "https://images.unsplash.com/photo-1497366216548-495affb08cdc?w=800&q=80&_wi=1", 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&_wi=1", imageAlt: "Before - Basic retail space" },
+        { imageSrc: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80&_wi=1", 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&_wi=1", imageAlt: "Before - Traditional spa design" },
+        { imageSrc: "https://images.unsplash.com/photo-1584622281867-8a748c1f66f5?w=800&q=80&_wi=1", 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={[
+              {
+                icon: ImageIcon,
+                title: "Modern Residential Complex",                description: "Luxury residential development featuring before and after transformation of urban landscape into premium living spaces.",                mediaItems: [
+                  { imageSrc: "https://images.unsplash.com/photo-1590129476917-a3a90bc9d798?w=800&q=80&_wi=2", imageAlt: "Before - Urban site" },
+                  { imageSrc: "https://images.unsplash.com/photo-1574901755052-e0c8c1f7d90e?w=800&q=80&_wi=2", imageAlt: "After - Completed residential complex" },
+                ],
+              },
+              {
+                icon: Zap,
+                title: "Commercial Office Building",                description: "Contemporary office space redesign showcasing architectural excellence and sustainable design principles.",                mediaItems: [
+                  { imageSrc: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&q=80&_wi=2", imageAlt: "Before - Original office building" },
+                  { imageSrc: "https://images.unsplash.com/photo-1497366216548-495affb08cdc?w=800&q=80&_wi=2", imageAlt: "After - Modern renovated office" },
+                ],
+              },
+              {
+                icon: ImageIcon,
+                title: "Boutique Retail Space",                description: "High-end retail transformation featuring luxury minimal aesthetic and cutting-edge interior design.",                mediaItems: [
+                  { imageSrc: "https://images.unsplash.com/photo-1493857671505-72967e2e2760?w=800&q=80&_wi=2", imageAlt: "Before - Basic retail space" },
+                  { imageSrc: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800&q=80&_wi=2", imageAlt: "After - Luxurious retail experience" },
+                ],
+              },
+              {
+                icon: Zap,
+                title: "Wellness Spa Retreat",                description: "Serene wellness center renovation emphasizing clean lines, natural materials, and tranquil atmospheres.",                mediaItems: [
+                  { imageSrc: "https://images.unsplash.com/photo-1544161515-81e2b6b773b9?w=800&q=80&_wi=2", imageAlt: "Before - Traditional spa design" },
+                  { imageSrc: "https://images.unsplash.com/photo-1584622281867-8a748c1f66f5?w=800&q=80&_wi=2", imageAlt: "After - Modern minimal spa" },
+                ],
+              },
+            ]}
+            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>
+  );
+}

src/app/services/page.tsx

@@ -1,139 +1,117 @@
-"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 '@/providers/themeProvider/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+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>
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Services', id: '/services' },
+        ]}
+        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>
   );
-}
+}

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);