From b1a65cf1f04cbf3ecdcb2c10971011fb19b4f02e Mon Sep 17 00:00:00 2001
From: Grayash <k_2684@naver.com>
Date: Mon, 9 Sep 2024 10:10:05 +0900
Subject: [PATCH] Add ContactSection component to page layout

---
 src/app/components/ContactSection/Contact.tsx | 45 +++++++++++++++++++
 src/app/components/ContactSection/index.tsx   | 38 ++++++++++++++++
 src/app/components/FAQSection/index.tsx       |  2 +-
 src/app/page.tsx                              |  2 +
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/ContactSection/Contact.tsx
 create mode 100644 src/app/components/ContactSection/index.tsx

diff --git a/src/app/components/ContactSection/Contact.tsx b/src/app/components/ContactSection/Contact.tsx
new file mode 100644
index 0000000..bca7254
--- /dev/null
+++ b/src/app/components/ContactSection/Contact.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import FadeIn from "../FadeIn";
+
+export default function Contact() {
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  return (
+    <FadeIn className="relative flex w-full flex-col justify-center px-4 pt-10">
+      {isLoaded ? undefined : (
+        <div className="absolute inset-0 flex h-auto w-full items-center justify-center bg-gray-100">
+          <svg
+            className="h-8 w-8 animate-spin text-gray-900"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        </div>
+      )}
+      <iframe
+        src="https://tally.so/embed/w447O5?alignLeft=1&hideTitle=1&transparentBackground=1"
+        width="100%"
+        height="480"
+        title="AUSG로 문의하기"
+        className="z-10"
+        onLoad={() => setIsLoaded(true)}
+      />
+    </FadeIn>
+  );
+}
diff --git a/src/app/components/ContactSection/index.tsx b/src/app/components/ContactSection/index.tsx
new file mode 100644
index 0000000..b6ac7a3
--- /dev/null
+++ b/src/app/components/ContactSection/index.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { motion, Variants } from "framer-motion";
+import { useInView } from "react-intersection-observer";
+import SectionTitle from "../SectionTitle";
+import Contact from "./Contact";
+
+const container: Variants = {
+  visible: {
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.15,
+    },
+  },
+};
+
+export default function ContactSection() {
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+  });
+
+  return (
+    <motion.section
+      className="relative"
+      ref={ref}
+      animate={inView ? "visible" : "hidden"}
+      variants={container}
+    >
+      <div className="container m-auto flex flex-col items-center px-5 pb-16">
+        <SectionTitle
+          title="Contact"
+          description={`궁금한게 있다면 언제든지 질문 받습니다`}
+        />
+        <Contact />
+      </div>
+    </motion.section>
+  );
+}
diff --git a/src/app/components/FAQSection/index.tsx b/src/app/components/FAQSection/index.tsx
index 41a91cc..6200dcc 100644
--- a/src/app/components/FAQSection/index.tsx
+++ b/src/app/components/FAQSection/index.tsx
@@ -26,7 +26,7 @@ export default function FAQSection() {
       animate={inView ? "visible" : "hidden"}
       variants={container}
     >
-      <div className="container m-auto flex flex-col items-center px-5 pb-16">
+      <div className="container m-auto flex flex-col items-center px-5 pb-44">
         <SectionTitle title="FAQ" description={`자주 묻는 질문을 모았습니다`} />
         <FAQList />
       </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 730433a..bbec6e1 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Backdrop from "./components/Backdrop";
 import Background from "./components/Background";
+import ContactSection from "./components/ContactSection";
 import FAQSection from "./components/FAQSection";
 import Footer from "./components/Footer";
 import HeroSection from "./components/HeroSection";
@@ -16,6 +17,7 @@ export default function Home() {
         <SponsorSection />
         <MapSection />
         <FAQSection />
+        <ContactSection />
         <Background />
         <Footer />
       </Backdrop>