Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement: Addition of two FAQ templates #94

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Enhancement: Addition of two FAQ templates #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f3f466
Adding FAQ-A Block & Icon
mohitm15 Jul 18, 2022
4a47ac1
Adding FAQ-B Block & Icon
mohitm15 Jul 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 116 additions & 0 deletions src/blocks/faq/dark/a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React from "react";
import PropTypes from "prop-types";

function DarkFAQA(props) {
return (
<section className="text-gray-400 bg-gray-900 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
Frequently Asked Questions
</h1>
<p className="lg:w-1/2 w-full leading-relaxed text-opacity-80">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical.
</p>
</div>
<div className="-my-8 divide-y-2 divide-gray-800">
<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 p-2 md:mb-0 mb-6 bg-gray-800 items-center justify-center flex flex-col ">
<span
className={`text-gray-400 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-white title-font leading-none">
01
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-white title-font mb-2">
Bitters hashtag waistcoat fashion axe chia unicorn ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>

<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 md:mb-0 p-2 mb-6 bg-gray-800 items-center justify-center flex flex-col ">
<span
className={`text-gray-400 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-white title-font leading-none">
02
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-white title-font mb-2">
Meditation bushwick direct trade taxidermy shaman ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>

<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 md:mb-0 p-2 mb-6 bg-gray-800 items-center justify-center flex flex-col ">
<span
className={`text-gray-400 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-white title-font leading-none">
03
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-white title-font mb-2">
Woke master cleanse drinking vinegar salvia ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>


</div>
</div>
</section>
);
}

DarkFAQA.defaultProps = {
theme: "indigo",
};

DarkFAQA.propTypes = {
theme: PropTypes.string.isRequired,
};

export default DarkFAQA;
132 changes: 132 additions & 0 deletions src/blocks/faq/dark/b.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import React from "react";
import PropTypes from "prop-types";

function DarkFAQB(props) {
return (
<section className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-white">
Frequently Asked Questions
</h1>
<p className="lg:w-1/2 w-full leading-relaxed text-opacity-80">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical.
</p>
</div>
<div className="flex flex-wrap -m-4">
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-8 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
QUESTION 1
</h2>
<h1 className="title-font text-left text-xl font-medium text-white mb-3">
Pinterest DIY dreamcatcher gentrify single-origin coffee ?
</h1>
<p className="leading-relaxed mb-3 text-justify">
Photo booth fam kinfolk cold-pressed sriracha leggings jianbing
microdosing tousled waistcoat. Plaid fixie chambray 90's,
slow-carb etsy tumeric. Cray pug you probably haven't heard of
them.
</p>
<a
href
className={`text-${props.theme}-400 flex items-center justify-start`}
>
Learn More
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-8 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
QUESTION 2
</h2>
<h1 className="title-font text-left text-xl font-medium text-white mb-3">
Ennui Snackwave Thundercats Hotplace SuperSonic ?
</h1>
<p className="leading-relaxed mb-3 text-justify">
Live-edge letterpress cliche, salvia fanny pack humblebrag
narwhal portland. VHS man braid palo santo hoodie brunch trust
fund. Bitters hashtag waistcoat fashion axe chia unicorn.
</p>
<a
href
className={`text-${props.theme}-400 flex items-center justify-start`}
>
Learn More
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
<div className="p-4 lg:w-1/3">
<div className="h-full bg-gray-800 bg-opacity-40 px-8 pt-16 pb-8 rounded-lg overflow-hidden text-center relative">
<h2 className="tracking-widest text-xs title-font font-medium text-gray-500 mb-1">
QUESTION 3
</h2>
<h1 className="title-font text-left text-xl font-medium text-white mb-3">
Roof party normcore before they sold out, cornhole vape ?
</h1>
<p className="leading-relaxed mb-3 text-justify">
Franzen you probably haven't heard of them man bun deep jianbing
selfies heirloom prism food truck ugh squid celiac humblebrag.
Cold-pressed sriracha leggings jianbing microdosing tousled
waistcoat.
</p>
<a
href
className={`text-${props.theme}-400 flex items-center justify-start`}
>
Learn More
<svg
className="w-4 h-4 ml-2"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
);
}

DarkFAQB.defaultProps = {
theme: "indigo",
};

DarkFAQB.propTypes = {
theme: PropTypes.string.isRequired,
};

export default DarkFAQB;
116 changes: 116 additions & 0 deletions src/blocks/faq/light/a.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import React from "react";
import PropTypes from "prop-types";

function LightFAQA(props) {
return (
<section className="text-gray-600 body-font overflow-hidden">
<div className="container px-5 py-24 mx-auto">
<div className="flex flex-wrap w-full mb-20 flex-col items-center text-center">
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
Frequently Asked Questions
</h1>
<p className="lg:w-1/2 w-full leading-relaxed text-gray-500">
Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical.
</p>
</div>
<div className="-my-8 divide-y-2 divide-gray-100">
<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 p-2 md:mb-0 mb-6 bg-gray-100 items-center justify-center flex flex-col ">
<span
className={`text-gray-500 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-gray-800 title-font leading-none">
01
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
Bitters hashtag waistcoat fashion axe chia unicorn ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>

<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 md:mb-0 p-2 mb-6 bg-gray-100 items-center justify-center flex flex-col ">
<span
className={`text-gray-500 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-gray-800 title-font leading-none">
02
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
Meditation bushwick direct trade taxidermy shaman ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>

<div className="py-8 flex flex-wrap md:space-x-24 md:flex-nowrap">
<div className="md:w-16 md:mb-0 p-2 mb-6 bg-gray-100 items-center justify-center flex flex-col ">
<span
className={`text-gray-500 pb-2 mb-2 border-b-2 border-${props.theme}-200 text-xl`}
>
Ques
</span>
<span className="font-medium text-lg md:text-xl text-gray-800 title-font leading-none">
03
</span>
</div>
<div className="md:flex-grow">
<h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
Woke master cleanse drinking vinegar salvia ?
</h2>
<p className="leading-relaxed">
Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft
beer.Glossier echo park pug, church-key sartorial biodiesel
vexillologist pop-up snackwave ramps cornhole. Marfa 3 wolf moon
party messenger bag selfies, poke vaporware kombucha
lumbersexual pork belly polaroid hoodie portland craft beer.
</p>
</div>
</div>


</div>
</div>
</section>
);
}

LightFAQA.defaultProps = {
theme: "indigo",
};

LightFAQA.propTypes = {
theme: PropTypes.string.isRequired,
};

export default LightFAQA;
Loading