From 50cf8e3e6933313da889edddf73a627fd256a28d Mon Sep 17 00:00:00 2001 From: Sayyad Aslam Date: Wed, 24 Jul 2024 20:53:01 +0530 Subject: [PATCH 1/5] Update FAQ.tsx --- frontend/src/components/FAQ.tsx | 46 +++++++++++++++++++++++++-------- package-lock.json | 6 +++++ 2 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 package-lock.json diff --git a/frontend/src/components/FAQ.tsx b/frontend/src/components/FAQ.tsx index 08059806..d50be247 100644 --- a/frontend/src/components/FAQ.tsx +++ b/frontend/src/components/FAQ.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import bgHero from "../assets/bgHero.png"; import { BiChevronDown, BiChevronUp } from 'react-icons/bi'; +import "../styles/faq.css"; interface FAQItem { question: string; @@ -31,6 +32,26 @@ const FAQ: React.FC = () => { question: "How do I contribute to Style Share ?", answer: "You can contribute by creating your own components and sharing them on the platform. You can also help improve existing components.", }, + { + question: "Can I use Style Share for commercial projects?", + answer: "Yes, you can use the components shared on Style Share for both personal and commercial projects without any restrictions.", + }, + { + question: "How do I get started with Tailwind CSS?", + answer: "To get started with Tailwind CSS, visit the official Tailwind CSS documentation. You can also explore the components on Style Share for inspiration and examples.", + }, + { + question: "Can I request specific components on Style Share?", + answer: "Yes, you can request specific components by posting in the 'Requests' section. The community can then create and share the requested components.", + }, + { + question: "Are there any guidelines for contributing components?", + answer: "Yes, please follow the contribution guidelines provided on the platform. This ensures that all components meet the quality standards and are consistent with the platform's design principles.", + }, + { + question: "How can I give feedback or suggest improvements?", + answer: "You can provide feedback or suggest improvements by using the 'Feedback' section on the platform. We value your input and strive to continuously improve Style Share.", + } ]; const handleToggle = (index: number) => { @@ -42,26 +63,27 @@ const FAQ: React.FC = () => { }; return ( -
-
-

🤔 Frequently Asked Questions 🤔

-
+
+
+

Frequently Asked Questions !

+ +
{faqs.map((faq, index) => ( -
-
+
+
-
{faq.answer}
+
{faq.answer}
))} @@ -72,3 +94,5 @@ const FAQ: React.FC = () => { }; export default FAQ; + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..d6002f11 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "StyleShare", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 65f72ee183538b81a1b3b4e46ea6375a79212c10 Mon Sep 17 00:00:00 2001 From: Sayyad Aslam Date: Wed, 24 Jul 2024 20:53:13 +0530 Subject: [PATCH 2/5] Created faq.css --- frontend/src/styles/faq.css | 120 ++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 frontend/src/styles/faq.css diff --git a/frontend/src/styles/faq.css b/frontend/src/styles/faq.css new file mode 100644 index 00000000..c2b273af --- /dev/null +++ b/frontend/src/styles/faq.css @@ -0,0 +1,120 @@ +.faq-section { + text-align: center; + color: #000435; + } + + .faq-container { + max-width: 70%; + + margin: 0 auto; + padding: 2rem; + color: #000435; + } + + .faq-title { + font-size: 37px; + margin-bottom: 3.5rem; + + font-weight: bold; + color: white; + + text-shadow: 1px 1px 2px rgb(255, 0, 200), 0 0 1em rgb(0, 255, 208), 0 0 0.2em rgb(255, 0, 200); + transition: text-shadow 0.3s ease-in-out; + } + .faq-title:hover { + text-shadow: 1px 1px 5px rgb(0, 255, 208), 0 0 1em rgb(238, 71, 224), 0 0 0.2em rgb(255, 0, 200); + } + + .faq-list { + display: flex; + flex-direction: column; + align-items: center; + } + + .faq-item { + width: 83%; + margin-bottom: 8px; + + transition: transform 0.3s ease-in-out; + } + + + + .faq-item:hover{ + + transform: translateY(2px); + } + + .faq-question-container { + + border-radius: 0.5rem; + border: 2px solid transparent; + transition: all 0.3s; + +} +.faq-question:hover{ + background: linear-gradient(135deg, #823fffc2, #7e00ec); +} +.faq-question-container.active { + border-color: #000435; +} + +.faq-question { + + + border-radius: 11px; + background: linear-gradient(to right, #8e2de2, #4a00e0); + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + + font-size: 1.25rem; + font-weight: medium; + color: white; + border: none; + cursor: pointer; + text-align: left; + + transition: text-shadow 0.3s; + } + + .faq-question:hover .faq-question-text { + + text-shadow: 1px 1px 2px rgb(255, 0, 225), 0 0 1em rgb(0, 255, 251), 0 0 0.2em rgb(0, 255, 242); + color: rgb(236, 255, 249); + /* transform: translateY(-1px); */ + } + + .icon { + width: 1.25rem; + + height: 1.25rem; + } + + + .faq-answer { + + transition: all 1s ease-in-out; + overflow: hidden; + margin-top: 3px; + } + + .faq-answer-text { + margin-left: 3px; + border-radius: 11px; + + font-size: 17px; + color: white; + text-align: left; + padding: 4px 13px; + + background: linear-gradient(to right, #8d2de23d, #b700e07f); + } + + .faq-answer-text:hover{ + + background: linear-gradient(to right, #8d2de257, #b700e0b3); + } + \ No newline at end of file From 96cda0bc29566e7b28f837181f9ab819226bb8c6 Mon Sep 17 00:00:00 2001 From: Sayyad Aslam Date: Wed, 24 Jul 2024 22:59:12 +0530 Subject: [PATCH 3/5] Removed faq.css --- frontend/src/styles/faq.css | 120 ------------------------------------ 1 file changed, 120 deletions(-) delete mode 100644 frontend/src/styles/faq.css diff --git a/frontend/src/styles/faq.css b/frontend/src/styles/faq.css deleted file mode 100644 index c2b273af..00000000 --- a/frontend/src/styles/faq.css +++ /dev/null @@ -1,120 +0,0 @@ -.faq-section { - text-align: center; - color: #000435; - } - - .faq-container { - max-width: 70%; - - margin: 0 auto; - padding: 2rem; - color: #000435; - } - - .faq-title { - font-size: 37px; - margin-bottom: 3.5rem; - - font-weight: bold; - color: white; - - text-shadow: 1px 1px 2px rgb(255, 0, 200), 0 0 1em rgb(0, 255, 208), 0 0 0.2em rgb(255, 0, 200); - transition: text-shadow 0.3s ease-in-out; - } - .faq-title:hover { - text-shadow: 1px 1px 5px rgb(0, 255, 208), 0 0 1em rgb(238, 71, 224), 0 0 0.2em rgb(255, 0, 200); - } - - .faq-list { - display: flex; - flex-direction: column; - align-items: center; - } - - .faq-item { - width: 83%; - margin-bottom: 8px; - - transition: transform 0.3s ease-in-out; - } - - - - .faq-item:hover{ - - transform: translateY(2px); - } - - .faq-question-container { - - border-radius: 0.5rem; - border: 2px solid transparent; - transition: all 0.3s; - -} -.faq-question:hover{ - background: linear-gradient(135deg, #823fffc2, #7e00ec); -} -.faq-question-container.active { - border-color: #000435; -} - -.faq-question { - - - border-radius: 11px; - background: linear-gradient(to right, #8e2de2, #4a00e0); - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 1rem; - - font-size: 1.25rem; - font-weight: medium; - color: white; - border: none; - cursor: pointer; - text-align: left; - - transition: text-shadow 0.3s; - } - - .faq-question:hover .faq-question-text { - - text-shadow: 1px 1px 2px rgb(255, 0, 225), 0 0 1em rgb(0, 255, 251), 0 0 0.2em rgb(0, 255, 242); - color: rgb(236, 255, 249); - /* transform: translateY(-1px); */ - } - - .icon { - width: 1.25rem; - - height: 1.25rem; - } - - - .faq-answer { - - transition: all 1s ease-in-out; - overflow: hidden; - margin-top: 3px; - } - - .faq-answer-text { - margin-left: 3px; - border-radius: 11px; - - font-size: 17px; - color: white; - text-align: left; - padding: 4px 13px; - - background: linear-gradient(to right, #8d2de23d, #b700e07f); - } - - .faq-answer-text:hover{ - - background: linear-gradient(to right, #8d2de257, #b700e0b3); - } - \ No newline at end of file From 9629efc9446d4bcb4d79193da2525f96865101f0 Mon Sep 17 00:00:00 2001 From: Sayyad Aslam Date: Wed, 24 Jul 2024 22:59:28 +0530 Subject: [PATCH 4/5] Update Faq.tsx --- frontend/src/components/FAQ.tsx | 49 ++++++++++++++------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/frontend/src/components/FAQ.tsx b/frontend/src/components/FAQ.tsx index d50be247..3393fb61 100644 --- a/frontend/src/components/FAQ.tsx +++ b/frontend/src/components/FAQ.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import bgHero from "../assets/bgHero.png"; import { BiChevronDown, BiChevronUp } from 'react-icons/bi'; -import "../styles/faq.css"; interface FAQItem { question: string; @@ -13,23 +12,23 @@ const FAQ: React.FC = () => { const faqs: FAQItem[] = [ { - question: "What is Style Share ?", + question: "What is Style Share?", answer: "Style Share is a simple web-based platform where users can contribute, create, explore, and share web design components, focusing on Tailwind CSS.", }, { - question: "How does it work ?", + question: "How does it work?", answer: "Users can search any component with search bar from various developers, contribute to open source for more Tailwind components, create their own component to help other developers, and create posts from the 'New Posts' section.", }, { - question: "Who can use Style Share ?", + question: "Who can use Style Share?", answer: "Whether you are a seasoned developer looking for inspiration or a beginner taking your first steps into the world of web design, Style Share offers a wealth of resources tailored to your needs.", }, { - question: "Is there a cost to use Style Share ?", + question: "Is there a cost to use Style Share?", answer: "No, Style Share is completely free to use.", }, { - question: "How do I contribute to Style Share ?", + question: "How do I contribute to Style Share?", answer: "You can contribute by creating your own components and sharing them on the platform. You can also help improve existing components.", }, { @@ -55,35 +54,31 @@ const FAQ: React.FC = () => { ]; const handleToggle = (index: number) => { - if (activeIndex === index) { - setActiveIndex(null); - } else { - setActiveIndex(index); - } + setActiveIndex(activeIndex === index ? null : index); }; return ( -
-
-

Frequently Asked Questions !

- -
+
+
+

+ Frequently Asked Questions! +

+
{faqs.map((faq, index) => ( -
-
+
+
-
-
{faq.answer}
+
+
+ {faq.answer} +
))} @@ -94,5 +89,3 @@ const FAQ: React.FC = () => { }; export default FAQ; - - From 7c44fd1dc1e93609d288eb55eb497e30bfa0a10a Mon Sep 17 00:00:00 2001 From: Sayyad Aslam <131389695+aslams2020@users.noreply.github.com> Date: Wed, 24 Jul 2024 23:01:02 +0530 Subject: [PATCH 5/5] Delete package-lock.json --- package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 package-lock.json diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index d6002f11..00000000 --- a/package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "StyleShare", - "lockfileVersion": 3, - "requires": true, - "packages": {} -}