@devvistatech/devvista-kit 0.0.1

package/app/contact/page.tsx

@@ -0,0 +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 "../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>
+  );
+}

package/app/faq/page.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { motion } from "framer-motion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/other/accordion";
+import { useEffect, useState } from "react";
+import { FAQ_PAGE } from "../constants/faq";
+
+export default function FAQPage() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const faqs = [
+    {
+      question: FAQ_PAGE.UI.FAQ_1_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_1_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_2_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_2_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_3_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_3_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_4_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_4_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_5_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_5_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_6_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_6_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_7_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_7_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_8_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_8_ANSWER,
+    },
+    {
+      question: FAQ_PAGE.UI.FAQ_9_QUESTION,
+      answer: FAQ_PAGE.UI.FAQ_9_ANSWER,
+    },
+  ];
+
+  return (
+    <div className="min-h-screen w-full bg-[#F7F7F7] 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", -apple-system, BlinkMacSystemFont, "Segoe UI",
+            Roboto, 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 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+          transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+        }
+
+        @supports not (backdrop-filter: blur(12px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.3);
+          }
+        }
+
+        .glassmorphism:hover {
+          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            padding: 1rem;
+          }
+          .gradient-text {
+            font-size: 2.5rem;
+          }
+        }
+      `}</style>
+
+      <div
+        className="w-full px-6 py-20 lg:px-12 lg:py-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"
+        >
+          {FAQ_PAGE.UI.MAIN_HEADING}
+        </motion.h1>
+
+        <motion.div
+          variants={sectionVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.2 }}
+          className="max-w-4xl mx-auto"
+        >
+          <Accordion type="single" collapsible className="w-full">
+            {faqs.map((faq, index) => (
+              <AccordionItem
+                key={index}
+                value={`item-${index}`}
+                className="mb-6 border-none"
+              >
+                <AccordionTrigger
+                  className="text-left text-lg sm:text-xl lg:text-2xl font-extrabold uppercase tracking-tight text-gray-800 p-6 rounded-3xl glassmorphism hover:shadow-2xl transition-all duration-200"
+                  style={{
+                    fontSize: "clamp(1.125rem, 4vw, 1.5rem)",
+                  }}
+                >
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent
+                  className="text-gray-800 text-base sm:text-lg leading-relaxed font-medium p-6 rounded-b-3xl glassmorphism"
+                  style={{
+                    fontSize: "clamp(0.875rem, 3vw, 1.125rem)",
+                  }}
+                >
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </motion.div>
+      </div>
+    </div>
+  );
+}