Skip to content

Commit

Permalink
fixed arrow in faq
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abhi9shinde
Abhi9shinde committed Jan 14, 2025
1 parent 02a2c20 commit f76234d
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 237 deletions.
16 changes: 15 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"openai": "^4.78.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-locomotive-scroll": "^0.2.2",
"react-redux": "^9.1.2",
"react-router-dom": "^6.26.2",
Expand Down
188 changes: 70 additions & 118 deletions src/Pages/Faq.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import React, { useState } from "react";
import styled from "styled-components";
import { motion } from "framer-motion";
import { FaChevronDown, FaChevronUp } from "react-icons/fa"; // Importing arrows from react-icons

const FAQContainer = styled.div`
padding: 6rem 2rem 4rem 2rem;
Expand All @@ -15,7 +16,7 @@ const FAQHeading = styled(motion.h1)`
margin-bottom: 2rem;
text-align: center;
color: #78350f;
font-family: 'Playfair Display', serif;
font-family: "Playfair Display", serif;
display: flex;
flex-wrap: wrap;
flex-direction: column;
Expand Down Expand Up @@ -54,30 +55,52 @@ const FAQItem = styled(motion.div)`
&:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
background-color:rgb(241, 224, 198)/* Coffee color */
background-color: rgb(241, 224, 198); /* Coffee color */
}
`;

const Question = styled(motion.h3)`
font-size: 1.5rem;
margin-bottom: 1rem;
color: #78350f;
font-family: 'Playfair Display', serif;
font-family: "Playfair Display", serif;
cursor: pointer;
font-weight: 550;
display: flex;
align-items: center; /* Aligns text and arrow horizontally */
justify-content: space-between; /* Distributes space between question text and arrow */
width: 100%; /* Ensure the question occupies full width */
`;

const Answer = styled(motion.p)`
font-size: 1.1rem;
color: #6b4423;
line-height: 1.6;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
`;

const ArrowIcon = styled.div`
font-size: 2rem; /* Ensures arrow is large enough */
transition: transform 1s ease;
transform: ${({ isOpen }) => (isOpen ? "rotate(180deg)" : "rotate(180deg)")};
margin-left: 1rem;
display: inline-block;
vertical-align: middle;
`;

function FAQ() {
const [isOpen, setIsOpen] = useState({}); // state to track which FAQ is open

const toggleAnswer = (index) => {
setIsOpen((prevState) => ({
...prevState,
[index]: !prevState[index],
}));
};

return (
<FAQContainer>
<FAQHeading
Expand All @@ -88,121 +111,50 @@ function FAQ() {
Frequently Asked Questions (FAQs)
</FAQHeading>
<FAQContent>
<FAQItem
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
onClick={() => {
const answer = document.getElementById('answer1');
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
}
}}
>
<Question
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
How do I place an order?
</Question>
<Answer id="answer1"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
To place an order, browse our collection and click the 'Add to Cart' button. When you're ready, proceed to checkout.
</Answer>
</FAQItem>
<FAQItem
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
onClick={() => {
const answer = document.getElementById('answer2');
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
}
}}
>
<Question
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 , delay: 0.4 }}
>
Can I modify my order after placing it?
</Question>
<Answer id="answer2"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed.
</Answer>
</FAQItem>
<FAQItem
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
onClick={() => {
const answer = document.getElementById('answer3');
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
}
}}
>
<Question
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
{[1, 2, 3, 4].map((index) => (
<FAQItem
key={index}
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
onClick={() => toggleAnswer(index)}
>
What payment methods do you accept?
</Question>
<Answer id="answer3"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
We accept various payment methods including credit cards, PayPal, and bank transfers.
</Answer>
</FAQItem>
<FAQItem
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.8 }}
onClick={() => {
const answer = document.getElementById('answer4');
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
}
}}
>
<Question
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
How can I track my order?
</Question>
<Answer id="answer4"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
>
After your order is shipped, you will receive a tracking number via email to monitor your shipment.
</Answer>
</FAQItem>
<Question
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
{index === 1 && "How do I place an order?"}
{index === 2 && "Can I modify my order after placing it?"}
{index === 3 && "What payment methods do you accept?"}
{index === 4 && "How can I track my order?"}
<ArrowIcon isOpen={isOpen[index]}>
{isOpen[index] ? <FaChevronDown /> : <FaChevronUp />}
</ArrowIcon>
</Question>
<Answer
id={`answer${index}`}
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.6 }}
style={{
maxHeight: isOpen[index] ? "200px" : "0", // max-height for opening/closing
}}
>
{index === 1 &&
'To place an order, browse our collection and click the "Add to Cart" button. When you\'re ready, proceed to checkout.'}
{index === 2 &&
"Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed."}
{index === 3 &&
"We accept various payment methods including credit cards, PayPal, and bank transfers."}
{index === 4 &&
"After your order is shipped, you will receive a tracking number via email to monitor your shipment."}
</Answer>
</FAQItem>
))}
</FAQContent>
</FAQContainer>
);
}

export default FAQ;
export default FAQ;
Loading

0 comments on commit f76234d

Please sign in to comment.