feat: added faq section

README.md

@@ -2,8 +2,13 @@
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
 
+<<<<<<< HEAD
+[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)
+=======
 [![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)
 
+> > > > > > > 1ce6253ee6b0a7c46056b97f6c990c10f2f9970b
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![Contributors][contributors-shield]][contributors-url]

src/components/FaqSection/faq.jsx

@@ -1,44 +1,58 @@
+import { useState } from 'react';
 import faqData from '../../config/content/faqData.js';
 import { PersonalizedText, Heading, Paragraph } from '../shared/index.js';
 
 function FAQ() {
 	const Header1 = faqData.Header1;
 	const Header2 = faqData.Header2;
+	const [openQuestion, setOpenQuestion] = useState(null);
+
+	const toggleQuestion = id => {
+		if (openQuestion === id) {
+			setOpenQuestion(null);
+		} else {
+			setOpenQuestion(id);
+		}
+	};
 
 	return (
 		<div className='md:w-[76%] w-[92%] justify-items-center mt-[10px] mb-[44px] mx-auto'>
-			<div className='flex flex-col items-center justify-center mb-[30px] md:mb-[40px]'>
+			<div className='flex flex-col items-center justify-center mb-[40px]'>
 				<Heading
 					variant='h1'
-					className='text-4.5xl md:text-13xl text-primary-yellow'
 					style={{
-						textShadow:
-							'5px 5px black, -2px -2px black, 2px -2px black, -2px 2px black, 2px 2px black, 0px 2px black, 2px 0px black, -2px 0px black, 0px -2px black',
+						color: '#F2DA05',
+						textShadow: '4.608px 4.608px 0px #000',
+						WebkitTextStrokeWidth: '0px',
+						WebkitTextStrokeColor: '#252525',
 					}}>
 					{Header1}
 				</Heading>
-				<PersonalizedText className='text-primary-foreground text-sm md:text-base font-normal'>{Header2}</PersonalizedText>
+				<PersonalizedText style={{ color: 'var(--orange-dash, #FF4409)' }}>{Header2}</PersonalizedText>
 			</div>
-			<div className='flex flex-col items-start gap-[15px] md:gap-[38px]'>
+			<div className='flex flex-col items-start gap-[38px]'>
 				{faqData.questions.map(({ id, question, answer }) => (
-					<div className='flex flex-col justify-center gap-[5px] md:gap-[10px]' key={id}>
-						<div className='flex gap-[5px] sm:gap-[10px] md:gap-[12px] flex-row'>
+					<div
+						key={id}
+						className='flex flex-col justify-center gap-[10px] pb-[20px] w-full border-b-2 border-solid border-[#252525]'>
+						<div className='flex gap-[10px] md:gap-[12px] flex-row cursor-pointer' onClick={() => toggleQuestion(id)}>
 							<img className='h-[18px] md:h-[32px] aspect-square' src={faqData.img.src} alt={faqData.img.alt} />
 							<Heading variant='h3'>{question}</Heading>
 						</div>
-						{answer instanceof Array ? (
-							<ul className='list-[square] px-7'>
-								{answer.map(({ key, content, bulleted }) => (
-									<li key={key} className={bulleted ? '' : 'list-none'}>
-										<Paragraph variant='body3'> {content}</Paragraph>
-									</li>
-								))}
-							</ul>
-						) : (
-							<Paragraph variant='body3' className='ml-[18]'>
-								{answer}
-							</Paragraph>
-						)}
+						{openQuestion === id &&
+							(answer instanceof Array ? (
+								<ul className='list-[square] px-7'>
+									{answer.map(({ key, content, bulleted }) => (
+										<li key={key} className={bulleted ? '' : 'list-none'}>
+											<Paragraph variant='body3'>{content}</Paragraph>
+										</li>
+									))}
+								</ul>
+							) : (
+								<Paragraph variant='body3' className='ml-[18]'>
+									{answer}
+								</Paragraph>
+							))}
 					</div>
 				))}
 			</div>

src/components/Gallery/gallery.jsx

@@ -0,0 +1,46 @@
+import galleryData from '../../config/content/galleryData.js';
+import { Heading, Text } from '../shared/index.js';
+
+function Gallery2() {
+	return (
+		<div className='w-[90%] mx-auto flex flex-col items-center mb-[40px] gap-y-[105px]'>
+			<Heading
+				variant='h1'
+				style={{
+					fontSize: '80px',
+					color: '#F2DA05',
+					textShadow: '4.608px 4.608px 0px #000',
+					webkitTextStrokeWidth: '2.71052622795105',
+					webkitTextStrokeColor: '#252525',
+				}}>
+				{galleryData.headerText}
+			</Heading>
+			<div className='w-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-[45px] gap-y-[70px]'>
+				{galleryData.images.map(({ id, src, alt }) => (
+					<div
+						key={id}
+						style={{
+							borderRadius: '4.5px',
+							border: '0.75px solid #000',
+							padding: '10.2px 9px 55.3px 9px',
+							background: '#FFF',
+							boxShadow: '1.5px 2.25px 0px 0px #000',
+						}}>
+						<img src={src} alt={alt} className='w-full h-auto object-cover' />
+					</div>
+				))}
+			</div>
+			<div className='w-full flex justify-end'>
+				<button
+					className='px-[18px] py-[12px] rounded-[14px] border-[3px] border-solid border-[#000]'
+					style={{
+						background: 'var(--Accent-Yellow, #F2DA05)',
+					}}>
+					<Text variant='navButton'>{galleryData.buttonText}</Text>
+				</button>
+			</div>
+		</div>
+	);
+}
+
+export default Gallery2;

src/components/Gallery/galleryMain.jsx

@@ -0,0 +1,22 @@
+import { Heading } from '../shared/index.js';
+
+function GalleryMain() {
+	return (
+		<div className='w-[90%] mx-auto flex flex-col items-center mb-[40px] gap-y-[105px]'>
+			<Heading
+				variant='h1'
+				style={{
+					fontSize: '80px',
+					color: '#F2DA05',
+					textShadow: '4.608px 4.608px 0px #000',
+					webkitTextStrokeWidth: '2.71052622795105',
+					webkitTextStrokeColor: '#252525',
+				}}>
+				25 YEARS SINCE....
+			</Heading>
+			<div></div>
+		</div>
+	);
+}
+
+export default GalleryMain();

src/config/content/galleryData.js

@@ -0,0 +1,87 @@
+export default {
+	id: 'Gallery',
+	headerText: 'GALLERY',
+	buttonText: 'Back',
+	images: [
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+		{
+			id: 1,
+			src: 'https://res.cloudinary.com/dv1src8un/image/upload/v1711788300/gallery_z7ofs5.png',
+			alt: '',
+		},
+	],
+};

src/pages/playground.jsx

@@ -1,4 +1,9 @@
-import Hero from '../components/Hero';
+import FAQ from '../components/FaqSection/faq.jsx';
+
 export default function Playground() {
-	return <Hero />;
+	return (
+		<>
+			<FAQ />
+		</>
+	);
 }