FAQ

1"use client";
2import React, { useRef, useState } from "react";
3import { motion, useInView } from "framer-motion";
4import Image from "next/image";
5
6const FAQPhoto = () => {
7  return (
8    <section className="flex gap-8 flex-col-reverse lg:flex-row items-center justify-center lg:max-w-[90vw] mx-auto p-4 mt-8">
9      <FAQ />
10      <Image
11        width={900}
12        height={900}
13        className="w-[35rem] aspect-square rounded-xl"
14        src="https://images.unsplash.com/photo-1564227503787-ad186f508e6f?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
15        alt="FAQ LunarisWeb"
16      />
17    </section>
18  );
19};
20
21function generateRandomString() {
22  const characters =
23    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
24  let result = "";
25  const charactersLength = characters.length;
26  for (let i = 0; i < 12; i++) {
27    result += characters.charAt(Math.floor(Math.random() * charactersLength));
28  }
29  return result;
30}
31
32const FAQ = () => {
33  return (
34    <div className="p-4 flex-1 flex flex-col gap-4 w-full lg:max-w-[50rem]">
35      {data.map((faq) => (
36        <FaqElement
37          title={faq.title}
38          answer={faq.answer}
39          key={generateRandomString()}
40        />
41      ))}
42    </div>
43  );
44};
45
46const FaqElement = ({ title, answer }: { title: string; answer: string }) => {
47  const [accordionOpen, setAccordionOpen] = useState(false);
48  const ref: any = useRef();
49
50  const IsInView = useInView(ref, { once: true, amount: 0.2 });
51
52  const rotate = () => {
53    return accordionOpen && "!rotate-180";
54  };
55
56  const acordion = () => {
57    return accordionOpen
58      ? "grid-rows-[1fr] opacity-100 p-4 border-l-2 py-2 my-2"
59      : "grid-rows-[0fr] opacity-0";
60  };
61
62  return (
63    <motion.div
64      ref={ref}
65      variants={{
66        hidden: {
67          opacity: 0,
68          x: -100,
69        },
70        visible: {
71          opacity: 1,
72          x: 0,
73        },
74      }}
75      animate={IsInView ? "visible" : "hidden"}
76      transition={{ duration: 0.35, ease: "easeInOut" }}
77      className="p-4 border-2 border-base rounded-xl text-lg"
78    >
79      <button
80        onClick={() => setAccordionOpen(!accordionOpen)}
81        className="flex justify-between items-center  w-full text-start"
82      >
83        <p>{title}</p>
84        <svg
85          className="fill-emerald-500 shrink-0 ml-2 "
86          width="16"
87          height="16"
88          xmlns="http://www.w3.org/2000/svg"
89        >
90          <rect
91            y="7"
92            width="16"
93            height="2"
94            rx="1"
95            className={
96              "transform origin-center transition duration-200 ease-out " +
97              rotate()
98            }
99          />
100          <rect
101            y="7"
102            width="16"
103            height="2"
104            rx="1"
105            className={
106              "transform origin-center rotate-90 transition duration-200 ease-out " +
107              rotate()
108            }
109          />
110        </svg>
111      </button>
112      <div
113        className={
114          "grid overflow-hidden transition-all duration-300 ease-in-out " +
115          acordion()
116        }
117      >
118        <div className="overflow-hidden">{answer}</div>
119      </div>
120    </motion.div>
121  );
122};
123
124export default FAQPhoto;
125
126const data = [
127  {
128    title: "What is the return policy?",
129    answer:
130      "We offer a 30-day return policy for all unused items in their original packaging. To initiate a return, please contact our customer service team.",
131  },
132  {
133    title: "How long does shipping take?",
134    answer:
135      "Standard shipping typically takes 5-7 business days. Expedited shipping options are also available at checkout.",
136  },
137  {
138    title: "Do you offer international shipping?",
139    answer:
140      "Yes, we ship to most countries worldwide. Shipping times and costs vary depending on the destination.",
141  },
142  {
143    title: "Can I track my order?",
144    answer:
145      "Yes, once your order is shipped, you will receive an email with a tracking number that you can use to monitor the delivery status.",
146  },
147  {
148    title: "What payment methods do you accept?",
149    answer:
150      "We accept major credit cards, PayPal, and Apple Pay. All payments are processed securely.",
151  },
152];
153

1"use client";
2import { motion } from "framer-motion";
3import { useState } from "react";
4import { FiChevronDown } from "react-icons/fi";
5import useMeasure from "react-use-measure";
6import Image from "next/image";
7import React from "react";
8import { FaCheck } from "react-icons/fa";
9
10interface Question {
11  question: string;
12  answer: string;
13}
14
15const FAQPhotoInfo = () => {
16  return (
17    <section className="flex flex-col lg:flex-row gap-8 items-center justify-center max-w-6xl mx-auto p-4">
18      <div className="flex-1 flex flex-col justify-end items-start w-full lg:w-[30rem] aspect-square relative p-8 rounded-xl overflow-hidden">
19        <ul className="flex flex-col gap-4">
20          <li className="bg-white p-[2px] px-2 flex items-center gap-2 font-semibold text-neutral-600 text-lg rounded-lg whitespace-nowrap w-fit">
21            <p className="text-orange-400">
22              <FaCheck />
23            </p>
24            +1 111(123)-1234
25          </li>
26          <li className="bg-white p-[2px] px-2 flex items-center gap-2 font-semibold text-neutral-600 text-lg rounded-lg whitespace-nowrap w-fit">
27            <p className="text-orange-400">
28              <FaCheck />
29            </p>
30            +1 111(123)-1234
31          </li>
32
33          <li className="bg-white p-[2px] px-2 flex items-center gap-2 font-semibold text-neutral-600 text-lg rounded-lg whitespace-nowrap w-fit">
34            <p className="text-orange-400">
35              <FaCheck />
36            </p>
37            contact@contact.com
38          </li>
39        </ul>
40        <Image
41          width={800}
42          height={800}
43          src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?q=80&w=2103&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
44          alt=""
45          className="absolute top-0 left-0 w-full h-full object-cover z-[-1]"
46        />
47      </div>
48
49      <div className="px-4 py-12 flex-1">
50        <h6 className="mb-4 text-5xl font-bold">
51          Frequently Asked Questions About Hiking
52        </h6>
53        <p className="text-xl font-neutral-600">
54          Whether you're a seasoned hiker or just starting out, our FAQ section
55          is here to help you prepare for your next adventure.
56        </p>
57        {data.map((question: Question, index: number) => (
58          <FAQItem title={question.question} key={index}>
59            {question.answer}
60          </FAQItem>
61        ))}
62      </div>
63    </section>
64  );
65};
66
67const FAQItem = ({
68  title,
69  children,
70  defaultOpen = false,
71}: {
72  title: string;
73  children: string;
74  defaultOpen?: boolean;
75}) => {
76  const [ref, { height }] = useMeasure();
77  const [open, setOpen] = useState(defaultOpen);
78
79  return (
80    <motion.div
81      animate={open ? "open" : "closed"}
82      className="border-b-[1px] border-b-slate-300"
83    >
84      <button
85        onClick={() => setOpen((pv) => !pv)}
86        className="flex w-full items-center justify-between gap-4 py-6"
87      >
88        <motion.p
89          variants={{
90            open: {
91              color: "#ff9c1d",
92            },
93            closed: {
94              color: "black",
95            },
96          }}
97          className="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-left text-lg font-medium w-full"
98        >
99          {title}
100        </motion.p>
101        <motion.p
102          variants={{
103            open: {
104              rotate: "180deg",
105              color: "rgb(124 58 237)",
106            },
107            closed: {
108              rotate: "0deg",
109              color: "#030617",
110            },
111          }}
112          className="w-min"
113        >
114          <FiChevronDown className="text-2xl w-min" />
115        </motion.p>
116      </button>
117      <motion.div
118        initial={false}
119        animate={{
120          height: open ? height : "0px",
121          marginBottom: open ? "24px" : "0px",
122        }}
123        className="overflow-hidden text-slate-600"
124      >
125        <p ref={ref}>{children}</p>
126      </motion.div>
127    </motion.div>
128  );
129};
130
131export default FAQPhotoInfo;
132
133const data = [
134  {
135    question: "What should I bring on a day hike?",
136    answer:
137      "For a day hike, it's important to bring water, snacks, a map or GPS, a first aid kit, sunscreen, and appropriate clothing. It's also a good idea to carry a multi-tool and a flashlight.",
138  },
139  {
140    question: "How do I choose the right hiking trail?",
141    answer:
142      "Choose a trail based on your fitness level and experience. Research the trail's difficulty, length, and elevation gain. Always check recent trail conditions and weather forecasts before heading out.",
143  },
144  {
145    question: "Is it safe to hike alone?",
146    answer:
147      "Hiking alone can be safe if you're well-prepared and experienced. Make sure to inform someone of your plans, carry a fully charged phone, and stick to well-marked trails. However, it's generally safer to hike with a partner.",
148  },
149];
150