@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/app/faq/page.tsx

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