fix: build error

README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/about/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import CTA from "@/components/CTASection";
 import { motion } from "framer-motion";
 import { Film, Target, TrendingUp, Users, Lightbulb, Heart } from "lucide-react";
 
@@ -151,6 +152,7 @@ export default function AboutPage() {
           </div>
         </motion.div>
       </motion.div>
+      <CTA />
     </main>
   );
 }

app/contact/page.tsx

@@ -3,9 +3,12 @@
 import { motion } from "framer-motion";
 import { Mail, Phone, Clock, MessageCircle, ArrowRight } from "lucide-react";
 import Link from "next/link";
-import { useEffect } from "react";
+import { useEffect, useState, useRef } from "react";
 
 export default function ContactPage() {
+  const [firstFormSubmitted, setFirstFormSubmitted] = useState(false);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
   useEffect(() => {
     // Load Tally embed script
     const script = document.createElement("script");
@@ -14,7 +17,56 @@ export default function ContactPage() {
     document.body.appendChild(script);
 
     return () => {
-      document.body.removeChild(script);
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+    };
+  }, []);
+
+
+  useEffect(() => {
+    // Listen for Tally form submission events
+    const handleMessage = (event: MessageEvent) => {
+      // Validate origin for security (Tally forms are served from tally.so)
+      if (!event.origin.includes("tally.so")) {
+        return;
+      }
+
+      // Check if the message contains the form submission event
+      if (typeof event.data === "string" && event.data.includes("Tally.FormSubmitted")) {
+        try {
+          const data = JSON.parse(event.data);
+
+          // Check for both 'event' and 'type' properties (Tally may use either)
+          if (data.event === "Tally.FormSubmitted" || data.type === "Tally.FormSubmitted") {
+            // Check if it's the first form (Bza7LN)
+            if (data.payload?.formId === "Bza7LN") {
+              setFirstFormSubmitted((prev) => {
+                if (!prev) {
+                  return true;
+                }
+                return prev;
+              });
+            }
+          }
+        } catch (error) {
+          // If parsing fails, try checking if it's a simple string match
+          if (event.data.includes("Tally.FormSubmitted")) {
+            setFirstFormSubmitted((prev) => {
+              if (!prev) {
+                return true;
+              }
+              return prev;
+            });
+          }
+        }
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+
+    return () => {
+      window.removeEventListener("message", handleMessage);
     };
   }, []);
   const contactMethods = [
@@ -157,17 +209,34 @@ export default function ContactPage() {
             transition={{ duration: 0.6, delay: 0.2, ease: "easeOut" }}
             className="order-1 md:order-2"
           >
-            <div className="bg-gradient-to-br from-brand-silver via-brand-silver/70 to-brand-silver/80 rounded-3xl p-6 md:p-8 min-h-[600px]">
-              <iframe
-                data-tally-src="https://tally.so/embed/Bza7LN?transparentBackground=1&dynamicHeight=1"
-                loading="lazy"
-                width="100%"
-                height="100%"
-                frameBorder="0"
-                marginHeight={0}
-                marginWidth={0}
-                title="Contact Form"
-              />
+            <div className="bg-white rounded-3xl p-6 h-auto md: p-8">
+              {!firstFormSubmitted ? (
+                <iframe
+                  ref={iframeRef}
+                  data-tally-src="https://tally.so/embed/Bza7LN?transparentBackground=1&dynamicHeight=1"
+                  loading="lazy"
+                  width="100%"
+                  height="100%"
+                  frameBorder="0"
+                  marginHeight={0}
+                  marginWidth={0}
+                  title="Contact Form"
+                  key="first-form"
+                />
+              ) : (
+                <iframe
+                  ref={iframeRef}
+                  src="https://tally.so/embed/obEMg1?transparentBackground=1&dynamicHeight=1"
+                  loading="lazy"
+                  width="100%"
+                  height="100%"
+                  frameBorder="0"
+                  marginHeight={0}
+                  marginWidth={0}
+                  title="Get a Faster Quote"
+                  key="second-form"
+                />
+              )}
             </div>
           </motion.div>
         </div>

app/layout.tsx

@@ -18,7 +18,7 @@ const inter = Inter({
 
 export const metadata: Metadata = {
   title: "PixelPro Studios | One-stop AV Systems, Photography & Videography Singapore",
-  description: "Your reliable one-stop partner for events, media, and AV production. Professional audio systems, stage lighting, LED walls, photography, videography, and talent services in Singapore.",
+  description: "Your reliable one-stop partner for events, media, and AV productions. Professional audio systems, stage lighting, LED walls, photography, videography, and talent services in Singapore.",
   keywords: [
     "AV systems Singapore",
     "event photography Singapore",
@@ -43,7 +43,7 @@ export const metadata: Metadata = {
     locale: "en_SG",
     url: "https://pixelprostudios.com",
     title: "PixelPro Studios | Premium AV Systems, Photography & Videography Singapore",
-    description: "Your reliable one-stop partner for events, media, and AV production. Professional audio systems, stage lighting, LED walls, photography, videography, and talent services in Singapore.",
+    description: "Your reliable one-stop partner for events, media, and AV productions. Professional audio systems, stage lighting, LED walls, photography, videography, and talent services in Singapore.",
     siteName: "PixelPro Studios",
     images: [
       {
@@ -57,7 +57,7 @@ export const metadata: Metadata = {
   twitter: {
     card: "summary_large_image",
     title: "PixelPro Studios | Premium AV Systems, Photography & Videography Singapore",
-    description: "Your reliable one-stop partner for events, media, and AV production in Singapore.",
+    description: "Your reliable one-stop partner for events, media, and AV productions in Singapore.",
     images: ["/photos/pixelpro-studios-singapore-sound-system-rental.jpg"],
     creator: "@pixelprostudiossg",
   },