@devvistatech/devvista-kit 0.0.9 → 0.0.10

package/app/contact/page.tsx

@@ -1,285 +1,285 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import * as z from "zod";
-import { Card } from "@/components/other/card";
-import { toast } from "@/hooks/use-toast";
-import { MapPin, Phone, Mail } from "lucide-react";
-import { useEffect, useState, useRef } from "react";
-import { motion } from "framer-motion";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import ContactForm from "@/components/addOns/functional/ContactForm";
-import { CONTACT_PAGE } from "../../lib/constants/contact";
-
-const formSchema = z.object({
-  name: z.string().min(2, { message: CONTACT_PAGE.ERRORS.NAME_VALIDATION_ERROR }),
-  email: z.string().email({ message: CONTACT_PAGE.ERRORS.EMAIL_VALIDATION_ERROR }),
-  message: z.string().min(10, { message: CONTACT_PAGE.ERRORS.MESSAGE_VALIDATION_ERROR }),
-});
-
-type FormValues = z.infer<typeof formSchema>;
-
-export default function ContactPage() {
-  const [isIframeLoading, setIsIframeLoading] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsIframeLoading(false);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, []);
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: { name: "", email: "", message: "" },
-  });
-
-  function onSubmit(values: FormValues) {
-    toast({
-      title: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_TITLE,
-      description: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_DESCRIPTION,
-    });
-    form.reset();
-  }
-
-  if (isLoading) {
-    return <Spinner />;
-  }
-
-  return (
-    <div className="min-h-screen w-full relative overflow-hidden flex flex-col">
-      <style jsx>{`
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
-
-        :root {
-          --jubilee: #F47C7C;
-          --natural-white: #F7F7F7;
-          --caviar: #2D2D2D;
-          --storm-cloud: #4A636E;
-          --exuberant-blue: #FF69B4;
-          --modern-purple: #D946EF;
-        }
-
-        * {
-          font-family: 'Inter', system-ui, sans-serif;
-        }
-
-        .gradient-text {
-          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
-          -webkit-background-clip: text;
-          background-clip: text;
-          color: transparent;
-          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          backdrop-filter: blur(10px);
-          -webkit-backdrop-filter: blur(10px);
-          border: 2px solid transparent;
-          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
-          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
-        }
-
-        .iframe-container {
-          overflow: hidden;
-          padding: 0;
-          margin: 0;
-          width: 100%;
-          height: 110%;
-          min-height: 600px;
-        }
-
-        .iframe-container iframe {
-          display: block;
-          object-fit: contain;
-          overflow: hidden;
-          padding: 0;
-          margin: 0;
-          border: none;
-          width: 105%;
-          height: 100%;
-        }
-
-        .map-container {
-          width: 100%;
-          height: 500px;
-          border-radius: 1.5rem;
-          overflow: hidden;
-          position: relative;
-        }
-
-        .map-container iframe {
-          width: 100%;
-          height: 100%;
-          border: none;
-        }
-
-          .main-heading {
-            font-size: 3rem;
-            margin-bottom: 3rem;
-          }
-
-          .section-heading {
-            font-size: 2.5rem;
-          }
-
-          .iframe-container {
-            min-height: 600px; 
-          }
-
-          .map-container {
-            height: 400px;
-          }
-
-          .contact-text {
-            font-size: 1.25rem;
-          }
-
-          .hours-heading {
-            font-size: 1.75rem;
-          }
-        }
-
-          .main-heading {
-            font-size: 2.5rem;
-          }
-
-          .section-heading {
-            font-size: 2rem;
-          }
-
-          .iframe-container {
-            min-height: 600px;
-            padding: 0;
-            margin: 0;
-            width: 100%;
-          }
-
-          .iframe-container iframe {
-            padding: 0;
-            margin: 0;
-            width: 100%;
-            height: 100%;
-            transform: none;
-          }
-
-        .map-container {
-          max-width: 100%;
-          margin-left: 0;
-          margin-right: 0;
-        }
-
-          .contact-text {
-            font-size: 1rem;
-          }
-
-          .hours-heading {
-            font-size: 1.5rem;
-          }
-        }
-      `}</style>
-      <div
-        className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white"
-      >
-        <motion.h1
-          initial={{ opacity: 0, y: -50 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
-        >
-          {CONTACT_PAGE.UI.MAIN_HEADING}
-        </motion.h1>
-
-        <div className="grid lg:grid-cols-2 gap-8 bg-gradient-to-b rounded-[2rem] lg:p-12 h-full mb-40 px-4">
-          {/* Contact Form */}
-          <div>
-            <div className="relative w-full iframe-container">
-              {isIframeLoading && (
-                <div className="absolute inset-0 flex flex-col items-center justify-center bg-[#F7F7F7]/90 rounded-[1.5rem] z-20">
-                  <div className="w-10 h-10 border-4 border-t-4 border-gray-300 border-t-[#FF69B4] rounded-full animate-spin"></div>
-                  <p className="text-gray-700 mt-3 text-xl font-bold">{CONTACT_PAGE.UI.LOADING_TEXT}</p>
-                </div>
-              )}
-              {/* <iframe
-                src="https://contact-form-devvista-kit.netlify.app/"
-                className={`w-full h-full rounded-[1.5rem] border-0 transition-opacity duration-500 ${isIframeLoading ? "opacity-0" : "opacity-100"}`}
-                title="Contact Form"
-                allowFullScreen
-                loading="lazy"
-              ></iframe> */}
-              <ContactForm />
-            </div>
-          </div>
-          {/* Contact Info */}
-          <div className="px-4">
-            <h2 className="text-4xl sm:text-5xl font-black mb-8 lg:mb-12 uppercase section-heading pt-24 pl-4">
-              {CONTACT_PAGE.UI.CONTACT_INFO_HEADING}
-            </h2>
-            <Card className="p-8 lg:p-12 glassmorphism rounded-[2rem] shadow-4xl w-full">
-              <div className="space-y-6">
-                <div className="flex items-center space-x-4">
-                  <MapPin className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
-                  <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
-                    {CONTACT_PAGE.UI.ADDRESS}
-                  </p>
-                </div>
-                <div className="flex items-center space-x-4">
-                  <Phone className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
-                  <div className="space-y-2">
-                    <a
-                      href={`tel:${CONTACT_PAGE.UI.PHONE_1}`}
-                      className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
-                    >
-                      {CONTACT_PAGE.UI.PHONE_1}
-                    </a>
-                    <br />
-                    <a
-                      href={`tel:${CONTACT_PAGE.UI.PHONE_2}`}
-                      className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
-                    >
-                      {CONTACT_PAGE.UI.PHONE_2}
-                    </a>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-4">
-                  <Mail className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
-                  <a
-                    href={`mailto:${CONTACT_PAGE.UI.SUPPORT_EMAIL}`}
-                    className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
-                    >
-                    {CONTACT_PAGE.UI.SUPPORT_EMAIL}
-                  </a>
-                </div>
-              </div>
-              <div className="mt-6">
-                <h3 className="text-2xl sm:text-3xl font-black mb-4 uppercase pb-2 hours-heading">
-                  {CONTACT_PAGE.UI.HOURS_HEADING}
-                </h3>
-                <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
-                  {CONTACT_PAGE.UI.HOURS_TEXT}
-                </p>
-              </div>
-            </Card>
-          </div>
-        </div>
-
-        {/* Map Section */}
-        <div className="py-32 lg:mt-20 bg-[#1B2743] w-full">
-          <div className="map-container glassmorphism w-full max-w-[95%] mx-auto">
-            <iframe
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.8248046145767!2d-76.07309392369562!3d43.06558317113779!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d9f3b7c0a5b8f5%3A0x7f0b47a6628a12e0!2s215%20W%20Manlius%20St%2C%20East%20Syracuse%2C%20NY%2013057%2C%20USA!5e0!3m2!1sen!2s!4v1698675309866!5m2!1sen!2s"
-              allowFullScreen
-              loading="lazy"
-              title={CONTACT_PAGE.UI.MAP_TITLE}
-              className="w-full h-[1000px] lg:h-[1200px]"
-            ></iframe>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Card } from "@/components/other/card";
+import { toast } from "@/hooks/use-toast";
+import { MapPin, Phone, Mail } from "lucide-react";
+import { useEffect, useState, useRef } from "react";
+import { motion } from "framer-motion";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import ContactForm from "@/components/addOns/functional/ContactForm";
+import { CONTACT_PAGE } from "../../lib/constants/contact";
+
+const formSchema = z.object({
+  name: z.string().min(2, { message: CONTACT_PAGE.ERRORS.NAME_VALIDATION_ERROR }),
+  email: z.string().email({ message: CONTACT_PAGE.ERRORS.EMAIL_VALIDATION_ERROR }),
+  message: z.string().min(10, { message: CONTACT_PAGE.ERRORS.MESSAGE_VALIDATION_ERROR }),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+export default function ContactPage() {
+  const [isIframeLoading, setIsIframeLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsIframeLoading(false);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: { name: "", email: "", message: "" },
+  });
+
+  function onSubmit(values: FormValues) {
+    toast({
+      title: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_TITLE,
+      description: CONTACT_PAGE.ERRORS.TOAST_SUCCESS_DESCRIPTION,
+    });
+    form.reset();
+  }
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <div className="min-h-screen w-full relative overflow-hidden flex flex-col">
+      <style jsx>{`
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
+
+        :root {
+          --jubilee: #F47C7C;
+          --natural-white: #F7F7F7;
+          --caviar: #2D2D2D;
+          --storm-cloud: #4A636E;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+        }
+
+        * {
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .gradient-text {
+          background: linear-gradient(135deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple));
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+        }
+
+        .iframe-container {
+          overflow: hidden;
+          padding: 0;
+          margin: 0;
+          width: 100%;
+          height: 110%;
+          min-height: 600px;
+        }
+
+        .iframe-container iframe {
+          display: block;
+          object-fit: contain;
+          overflow: hidden;
+          padding: 0;
+          margin: 0;
+          border: none;
+          width: 105%;
+          height: 100%;
+        }
+
+        .map-container {
+          width: 100%;
+          height: 500px;
+          border-radius: 1.5rem;
+          overflow: hidden;
+          position: relative;
+        }
+
+        .map-container iframe {
+          width: 100%;
+          height: 100%;
+          border: none;
+        }
+
+          .main-heading {
+            font-size: 3rem;
+            margin-bottom: 3rem;
+          }
+
+          .section-heading {
+            font-size: 2.5rem;
+          }
+
+          .iframe-container {
+            min-height: 600px; 
+          }
+
+          .map-container {
+            height: 400px;
+          }
+
+          .contact-text {
+            font-size: 1.25rem;
+          }
+
+          .hours-heading {
+            font-size: 1.75rem;
+          }
+        }
+
+          .main-heading {
+            font-size: 2.5rem;
+          }
+
+          .section-heading {
+            font-size: 2rem;
+          }
+
+          .iframe-container {
+            min-height: 600px;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+          }
+
+          .iframe-container iframe {
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            transform: none;
+          }
+
+        .map-container {
+          max-width: 100%;
+          margin-left: 0;
+          margin-right: 0;
+        }
+
+          .contact-text {
+            font-size: 1rem;
+          }
+
+          .hours-heading {
+            font-size: 1.5rem;
+          }
+        }
+      `}</style>
+      <div
+        className="w-full pt-20 lg:pt-40 flex-grow relative z-10 container-padding bg-white"
+      >
+        <motion.h1
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-4xl sm:text-5xl lg:text-7xl font-black mb-20 lg:mb-20 gradient-text text-center uppercase drop-shadow-lg main-heading pt-36 sm:pt-32"
+        >
+          {CONTACT_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        <div className="grid lg:grid-cols-2 gap-8 bg-gradient-to-b rounded-[2rem] lg:p-12 h-full mb-40 px-4">
+          {/* Contact Form */}
+          <div>
+            <div className="relative w-full iframe-container">
+              {isIframeLoading && (
+                <div className="absolute inset-0 flex flex-col items-center justify-center bg-[#F7F7F7]/90 rounded-[1.5rem] z-20">
+                  <div className="w-10 h-10 border-4 border-t-4 border-gray-300 border-t-[#FF69B4] rounded-full animate-spin"></div>
+                  <p className="text-gray-700 mt-3 text-xl font-bold">{CONTACT_PAGE.UI.LOADING_TEXT}</p>
+                </div>
+              )}
+              {/* <iframe
+                src="https://contact-form-devvista-kit.netlify.app/"
+                className={`w-full h-full rounded-[1.5rem] border-0 transition-opacity duration-500 ${isIframeLoading ? "opacity-0" : "opacity-100"}`}
+                title="Contact Form"
+                allowFullScreen
+                loading="lazy"
+              ></iframe> */}
+              <ContactForm />
+            </div>
+          </div>
+          {/* Contact Info */}
+          <div className="px-4">
+            <h2 className="text-4xl sm:text-5xl font-black mb-8 lg:mb-12 uppercase section-heading pt-24 pl-4">
+              {CONTACT_PAGE.UI.CONTACT_INFO_HEADING}
+            </h2>
+            <Card className="p-8 lg:p-12 glassmorphism rounded-[2rem] shadow-4xl w-full">
+              <div className="space-y-6">
+                <div className="flex items-center space-x-4">
+                  <MapPin className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
+                  <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
+                    {CONTACT_PAGE.UI.ADDRESS}
+                  </p>
+                </div>
+                <div className="flex items-center space-x-4">
+                  <Phone className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
+                  <div className="space-y-2">
+                    <a
+                      href={`tel:${CONTACT_PAGE.UI.PHONE_1}`}
+                      className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
+                    >
+                      {CONTACT_PAGE.UI.PHONE_1}
+                    </a>
+                    <br />
+                    <a
+                      href={`tel:${CONTACT_PAGE.UI.PHONE_2}`}
+                      className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
+                    >
+                      {CONTACT_PAGE.UI.PHONE_2}
+                    </a>
+                  </div>
+                </div>
+                <div className="flex items-center space-x-4">
+                  <Mail className="h-6 w-6 text-[#FF69B4] drop-shadow-lg" />
+                  <a
+                    href={`mailto:${CONTACT_PAGE.UI.SUPPORT_EMAIL}`}
+                    className="text-gray-700 text-xl sm:text-2xl font-bold hover:text-[#FF69B4] transition-all duration-200 drop-shadow-md contact-text"
+                    >
+                    {CONTACT_PAGE.UI.SUPPORT_EMAIL}
+                  </a>
+                </div>
+              </div>
+              <div className="mt-6">
+                <h3 className="text-2xl sm:text-3xl font-black mb-4 uppercase pb-2 hours-heading">
+                  {CONTACT_PAGE.UI.HOURS_HEADING}
+                </h3>
+                <p className="text-gray-700 text-xl sm:text-2xl font-bold drop-shadow-md contact-text">
+                  {CONTACT_PAGE.UI.HOURS_TEXT}
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* Map Section */}
+        <div className="py-32 lg:mt-20 bg-[#1B2743] w-full">
+          <div className="map-container glassmorphism w-full max-w-[95%] mx-auto">
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2914.8248046145767!2d-76.07309392369562!3d43.06558317113779!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89d9f3b7c0a5b8f5%3A0x7f0b47a6628a12e0!2s215%20W%20Manlius%20St%2C%20East%20Syracuse%2C%20NY%2013057%2C%20USA!5e0!3m2!1sen!2s!4v1698675309866!5m2!1sen!2s"
+              allowFullScreen
+              loading="lazy"
+              title={CONTACT_PAGE.UI.MAP_TITLE}
+              className="w-full h-[1000px] lg:h-[1200px]"
+            ></iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 }