diff --git a/client/src/assets/images/contact.png b/client/src/assets/images/contact.png new file mode 100644 index 0000000..e1af34f Binary files /dev/null and b/client/src/assets/images/contact.png differ diff --git a/client/src/assets/images/faqs.jpg b/client/src/assets/images/faqs.jpg new file mode 100644 index 0000000..2a617d6 Binary files /dev/null and b/client/src/assets/images/faqs.jpg differ diff --git a/client/src/component/About.jsx b/client/src/component/About.jsx index 5daa715..1894efb 100644 --- a/client/src/component/About.jsx +++ b/client/src/component/About.jsx @@ -1,14 +1,14 @@ import "../css/About.css"; -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; // import { useEffect } from "react"; import img1 from "../assets/images/Anuj.png"; import img2 from "../assets/images/Jitendra.png"; import img3 from "../assets/images/Harshit.png"; import AboutImgHero from "../assets/images/Others/heroimg.png"; -import '@fortawesome/fontawesome-free/css/all.css'; -import { faCoffee } from '@fortawesome/free-solid-svg-icons'; -import { faUser } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import "@fortawesome/fontawesome-free/css/all.css"; +import { faCoffee } from "@fortawesome/free-solid-svg-icons"; +import { faUser } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; // import {Contri} from './Contributers' // import { Link } from "react-router-dom"; @@ -50,17 +50,18 @@ export default function About(props) { About Us

- Bitbox is like a friendly community where people working on projects - can come together. If you’re stuck or need advice, you can ask for help. - And if you know something, you can share your knowledge with others. - It’s all about supporting each other and building a helpful community. 🌟 + Bitbox is like a friendly community where people working on + projects can come together. If you’re stuck or need advice, you + can ask for help. And if you know something, you can share your + knowledge with others. It’s all about supporting each other and + building a helpful community. 🌟

- Welcome to our open-source platform, where innovation knows no bounds - and collaboration is key. Dive into our repository of code, where - creativity flourishes and solutions come to life. Join our vibrant - community of developers, enthusiasts, and visionaries as we build the - future together, one line at a time. + Welcome to our open-source platform, where innovation knows no + bounds and collaboration is key. Dive into our repository of code, + where creativity flourishes and solutions come to life. Join our + vibrant community of developers, enthusiasts, and visionaries as + we build the future together, one line at a time.

@@ -106,81 +107,233 @@ export default function About(props) {

-
Our Team
+
+ Our{" "} + + Team + +

{/* card 1 */} -
-
- Anuj Verma is a tech-savvy person who loves working with AI and building websites. He's gained experience through internships and projects, showing that he's ready to do great things in the tech world. +
+
+ Anuj Verma is a tech-savvy person who loves working + with AI and building websites. He's gained experience + through internships and projects, showing that he's ready + to do great things in the tech world.
-

+

Anuj Verma

-

+

BTech CSE AIML
3rd Year

{/* card 2 */} -
-
- Jitendra Kumar: Tech enthusiast skilled in web development and database management, showcasing expertise in projects like weather app and algorithm analyzer, poised for impactful contributions in the tech industry. +
+
+ Jitendra Kumar: Tech enthusiast skilled in web + development and database management, showcasing expertise in + projects like weather app and algorithm analyzer, poised for + impactful contributions in the tech industry.
-

+

Jitendra Kumar

-

+

BTech CSE AIML
3rd Year

{/* card 3 */} -
-
- Harshit Singh: Entry-level software engineer skilled in C, C++, Python, HTML, CSS, and JavaScript. Eager to leverage abilities in problem-solving and project development for organizational growth. +
+
+ Harshit Singh: Entry-level software engineer skilled in + C, C++, Python, HTML, CSS, and JavaScript. Eager to leverage + abilities in problem-solving and project development for + organizational growth.
-

+

Harshit Singh

-

+

BTech CSE AIML
3rd Year

@@ -194,47 +347,117 @@ export default function About(props) {
-

+

Visitors

-
+
- 876K+ + + 876K+ +

VisitorCount

-
+
-
+
{/* */}
- 876K+ -

Registrations

+ + 876K+ + +

+ Registrations +

-
+
- 876K+ + + 876K+ +

Participants

-
+
-
+
{/* */}
- 828K+ -

Total Projects

+ + 828K+ + +

+ Total Projects +

@@ -244,50 +467,65 @@ export default function About(props) {
{/* FAQ */}
-

- Frequently Asked Questions + + Frequently Asked Questions +

{[ { - question: "Will a beginner, with absolutely no knowledge of GitHub, gain anything fruitful?", - answer: "Absolutely! This program is designed to guide beginners, with projects and support for all experience levels." + question: + "Will a beginner, with absolutely no knowledge of GitHub, gain anything fruitful?", + answer: + "Absolutely! This program is designed to guide beginners, with projects and support for all experience levels.", }, { question: "Are there any charges for registration?", - answer: "No, participating in this program is entirely free with no hidden costs." + answer: + "No, participating in this program is entirely free with no hidden costs.", }, { - question: "Is there a specific age requirement for participation?", - answer: "There are no age restrictions! People of all ages are welcome to join and contribute." + question: + "Is there a specific age requirement for participation?", + answer: + "There are no age restrictions! People of all ages are welcome to join and contribute.", }, { question: "What are the project requirements?", - answer: "Projects are open-ended, allowing mentors to share ideas in their fields of expertise without restrictions." + answer: + "Projects are open-ended, allowing mentors to share ideas in their fields of expertise without restrictions.", }, { - question: "As a beginner, where should we begin to contribute effectively to projects?", - answer: "The resources on our website, including GitHub links and tutorials, will help you contribute effectively." + question: + "As a beginner, where should we begin to contribute effectively to projects?", + answer: + "The resources on our website, including GitHub links and tutorials, will help you contribute effectively.", }, ].map((item, index) => (
-

+

{item.answer}

))}
-
{/* Info */} {/*
@@ -297,10 +535,9 @@ export default function About(props) { ); } - // Props Validation About.propTypes = { mode: PropTypes.string, toggleMode: PropTypes.func, showAlert: PropTypes.func, -}; \ No newline at end of file +}; diff --git a/client/src/component/Contributors.jsx b/client/src/component/Contributors.jsx index 84ffb66..f62b649 100644 --- a/client/src/component/Contributors.jsx +++ b/client/src/component/Contributors.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { motion } from "framer-motion"; import PropTypes from "prop-types"; +import "../css/Contributers.css"; const ContributorCard = ({ login, @@ -13,10 +14,11 @@ const ContributorCard = ({ @@ -24,43 +26,50 @@ const ContributorCard = ({ {login}

{login}

{type}

{contributions} contributions
( - ( +// +// +// +//); + +const IssueCard = ({ title, number, html_url, user, state, mode }) => { + const [isHovered, setIsHovered] = useState(false); + + // Hover styles based on the `isHovered` state + const hoverStyles = isHovered + ? { boxShadow: "1px 1px 12px 4px blue", transform: "translateY(-5px)" } + : {}; + + return ( +
-
-
- {user.login} setIsHovered(true)} // When mouse enters + onMouseLeave={() => setIsHovered(false)} // When mouse leaves + data-aos="fade-up" + data-aos-duration="1500" + > +
+
+ {user.login} -

- {title} -

-

- Status: {state} -

-
- - Issue : #{number} - -
-
- +
- -); + ); +}; IssueCard.propTypes = { title: PropTypes.string.isRequired, @@ -186,29 +331,32 @@ const StatCard = ({ label, value, icon, mode, onClick }) => ( initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} - className={`rounded-lg p-6 flex items-center border transition-all duration-300 cup ${mode === 'dark' - ? 'bg-black/30 backdrop-blur-md border-white/10' - : 'bg-white backdrop-blur-sm border-gray-300' - }`} + className={`rounded-lg p-6 flex items-center border transition-all duration-300 cup ${ + mode === "dark" + ? "bg-black/30 backdrop-blur-md border-white/10" + : "bg-white backdrop-blur-sm border-gray-300" + }`} onClick={onClick} - >
{icon}

{value}

{label}

@@ -237,12 +385,13 @@ export default function Contributor(props) { openIssues: 0, }); - useEffect(() => { const fetchData = async () => { try { // Fetch contributors - const contributorsResponse = await fetch("https://api.github.com/repos/Bitbox-Connect/Bitbox/contributors?page=1&per_page=100"); + const contributorsResponse = await fetch( + "https://api.github.com/repos/Bitbox-Connect/Bitbox/contributors?page=1&per_page=100" + ); if (!contributorsResponse.ok) { throw new Error("Failed to fetch contributors data"); @@ -250,9 +399,10 @@ export default function Contributor(props) { const contributorsData = await contributorsResponse.json(); setContributors(contributorsData); - // Fetch repo stats - const repoResponse = await fetch('https://api.github.com/repos/Bitbox-Connect/Bitbox'); + const repoResponse = await fetch( + "https://api.github.com/repos/Bitbox-Connect/Bitbox" + ); const repoData = await repoResponse.json(); setRepoStats({ @@ -262,7 +412,9 @@ export default function Contributor(props) { }); // Fetch issues - const issueResponse = await fetch('https://api.github.com/repos/Bitbox-Connect/Bitbox/issues'); + const issueResponse = await fetch( + "https://api.github.com/repos/Bitbox-Connect/Bitbox/issues" + ); const issueData = await issueResponse.json(); setOpenIssues(issueData); } catch (error) { @@ -280,70 +432,87 @@ export default function Contributor(props) { const indexOfFirstItem = indexOfLastItem - itemsPerPage; // Get current items based on selected section - const currentItems = showIssue ? openIssues.slice(indexOfFirstItem, indexOfLastItem) : contributors.slice(indexOfFirstItem, indexOfLastItem); + const currentItems = showIssue + ? openIssues.slice(indexOfFirstItem, indexOfLastItem) + : contributors.slice(indexOfFirstItem, indexOfLastItem); // Determine total pages - const totalPages = showIssue ? Math.ceil(openIssues.length / itemsPerPage) : Math.ceil(contributors.length / itemsPerPage); + const totalPages = showIssue + ? Math.ceil(openIssues.length / itemsPerPage) + : Math.ceil(contributors.length / itemsPerPage); const paginate = (pageNumber) => setCurrentPage(pageNumber); - return (
{/* Hero Section */}
Our Amazing Contributors Shaping the future of Bitbox, one commit at a time + +
+ +

Project Statistics

{/* Contributors */} -
+
- {/* Repository Stars */} - - - - - } - /> - - - {/* Repository Forks */} - - - - - } - /> - +
+ {/* Repository Stars */} + + + + + } + /> + +
+
+ {/* Repository Forks */} + + + + + } + /> + +
{/* Open Issues */} -
+
-
-

{showIssue ? 'Your contribution is valuable see all Issues' : 'Contributors'}

+
+

+ {showIssue + ? "Your contribution is valuable see all Issues" + : "Contributors"} +

- {currentItems.map(item => showIssue ? ( - - ) : ( - - ))} + {currentItems.map((item) => + showIssue ? ( + + ) : ( + + ) + )}
{Array.from({ length: totalPages }, (_, i) => ( @@ -477,8 +665,6 @@ export default function Contributor(props) {
-
- - +
); } diff --git a/client/src/component/Faq.jsx b/client/src/component/Faq.jsx index 15e299f..6b38457 100644 --- a/client/src/component/Faq.jsx +++ b/client/src/component/Faq.jsx @@ -1,51 +1,78 @@ -// component/FAQ.jsx -import { useState } from 'react'; -import '../css/Faq.css'; +// eslint-disable-next-line no-unused-vars +import React, { useState } from "react"; +import "../css/Faq.css"; // Ensure your path is correct +import img1 from "../assets/images/faqs.jpg"; // Uncomment if you're using an image const FAQ = () => { const [activeIndex, setActiveIndex] = useState(null); + const faqData = [ + { + question: "What is BitBox?", + answer: + "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.", + }, + { + question: "How does BitBox enhance collaboration?", + answer: + "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.", + }, + { + question: "How do I get started with BitBox?", + answer: + "You can sign up for an account on BitBox and start managing your projects right away.", + }, + { + question: "Is BitBox compatible with modern development workflows?", + answer: + "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.", + }, + { + question: "How can I contact support if I need help?", + answer: + "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.", + }, + ]; + const toggleAnswer = (index) => { setActiveIndex(activeIndex === index ? null : index); }; return (
-

Frequently Asked Questions

- {faqData.map((item, index) => ( -
-

toggleAnswer(index)} className="faq-question"> - {item.question} -

- {activeIndex === index &&

{item.answer}

} + {/* Flex container for image and FAQ list */} +
+ {/* Image on the left */} +
+ FAQ-related +
+
+ + {/* FAQ list on the right */} +
+
+

Frequently Asked Questions

- ))} +
    + {faqData.map((item, index) => ( +
  • +
    toggleAnswer(index)}> + {item.question} + + {activeIndex === index ? "-" : "+"} + +
    + {activeIndex === index && ( +
    +

    {item.answer}

    +
    + )} +
    • + ))} +
+
); }; -const faqData = [ - { - question: "What is BitBox?", - answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.", - }, - { - question: "How does BitBox enhance collaboration?", - answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.", - }, - { - question: "How do I get started with BitBox?", - answer: "You can sign up for an account on BitBox and start managing your projects right away.", - }, - { - question: "Is BitBox compatible with modern development workflows?", - answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.", - }, - { - question: "How can I contact support if I need help?", - answer: "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.", - }, -]; - - export default FAQ; diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx index 8af9ebf..e1a90bc 100644 --- a/client/src/component/Footer.jsx +++ b/client/src/component/Footer.jsx @@ -1,246 +1,324 @@ -import '../css/Footer.css'; -import PropTypes from 'prop-types'; -import { Link } from 'react-router-dom'; +import "../css/Footer.css"; +import PropTypes from "prop-types"; +import { Link } from "react-router-dom"; import { FaXTwitter } from "react-icons/fa6"; -import { FaGithub, FaLinkedin, FaYoutube } from 'react-icons/fa'; -import { useEffect, useState } from 'react'; +import { FaGithub, FaLinkedin, FaYoutube } from "react-icons/fa"; +import { useEffect, useState } from "react"; const Footer = (props) => { - const [email, setEmail] = useState(""); - const [message, setMessage] = useState(""); - const [isError, setIsError] = useState(false); // Flag to handle message color - const [stars, setStars] = useState(0); - - const handleSubscribe = async (e) => { - e.preventDefault(); - setMessage(""); // Reset message - - if (!email) { - setIsError(true); - setMessage("Please enter a valid email."); - clearMessageAndResetEmail(); - return; - } + const [email, setEmail] = useState(""); + const [message, setMessage] = useState(""); + const [isError, setIsError] = useState(false); // Flag to handle message color + const [stars, setStars] = useState(0); + + const handleSubscribe = async (e) => { + e.preventDefault(); + setMessage(""); // Reset message + + if (!email) { + setIsError(true); + setMessage("Please enter a valid email."); + clearMessageAndResetEmail(); + return; + } - try { - const response = await fetch("http://localhost:5000/api/profile/subscribe", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ email }), - }); - - const data = await response.json(); - - if (response.ok) { - setIsError(false); - setMessage("Thank you for subscribing!"); - } else { - setIsError(true); - setMessage(data.message || "Subscription failed, please try again."); - } - - clearMessageAndResetEmail(); - } catch (error) { - console.error("Error subscribing:", error); - setIsError(true); - setMessage("An error occurred, please try again later."); - clearMessageAndResetEmail(); + try { + const response = await fetch( + "http://localhost:5000/api/profile/subscribe", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email }), } + ); + + const data = await response.json(); + + if (response.ok) { + setIsError(false); + setMessage("Thank you for subscribing!"); + } else { + setIsError(true); + setMessage(data.message || "Subscription failed, please try again."); + } + + clearMessageAndResetEmail(); + } catch (error) { + console.error("Error subscribing:", error); + setIsError(true); + setMessage("An error occurred, please try again later."); + clearMessageAndResetEmail(); + } + }; + + const clearMessageAndResetEmail = () => { + setTimeout(() => { + setMessage(""); + setEmail(""); + }, 7000); + }; + useEffect(() => { + // Configure the chatbot settings + window.embeddedChatbotConfig = { + chatbotId: "GzK_h2kRkJ8e-jLXJVgmy", + domain: "www.chatbase.co", + }; + + // Create the script element + const script = document.createElement("script"); + script.src = "https://www.chatbase.co/embed.min.js"; + script.defer = true; + script.setAttribute("chatbotId", "GzK_h2kRkJ8e-jLXJVgmy"); + script.setAttribute("domain", "www.chatbase.co"); + + // Append the script to the body + document.body.appendChild(script); + + // Cleanup function to remove the script on component unmount + return () => { + document.body.removeChild(script); }; + }, []); - const clearMessageAndResetEmail = () => { - setTimeout(() => { - setMessage(""); - setEmail(""); - }, 7000); + useEffect(() => { + const fetchGitHubStars = async () => { + const response = await fetch( + "https://api.github.com/repos/Bitbox-Connect/Bitbox" + ); + const data = await response.json(); + setStars(data.stargazers_count); }; - useEffect(() => { - // Configure the chatbot settings - window.embeddedChatbotConfig = { - chatbotId: "GzK_h2kRkJ8e-jLXJVgmy", - domain: "www.chatbase.co" - }; - - // Create the script element - const script = document.createElement('script'); - script.src = "https://www.chatbase.co/embed.min.js"; - script.defer = true; - script.setAttribute("chatbotId", "GzK_h2kRkJ8e-jLXJVgmy"); - script.setAttribute("domain", "www.chatbase.co"); - - // Append the script to the body - document.body.appendChild(script); - - // Cleanup function to remove the script on component unmount - return () => { - document.body.removeChild(script); - }; - }, []); - - useEffect(() => { - const fetchGitHubStars = async () => { - const response = await fetch('https://api.github.com/repos/Bitbox-Connect/Bitbox'); - const data = await response.json(); - setStars(data.stargazers_count); - }; - fetchGitHubStars(); - }, []); - - - return ( - <> - {/* Divider line */} -
- - {/* Footer container with dynamic background color */} -
-
-
-

Subscribe to our Newsletter

-
- setEmail(e.target.value)} - required - className="px-4 py-2 border border-gray-300 rounded-md w-full max-w-xs focus:outline-none" - - /> - -
- {message && ( -

- {message} -

- )} -
- - -
- {/* Left section with branding and social icons */} -
-

- BITBOX -

-

- Empowering Developers,
- Where Projects Find Solutions Together -

-
- {/* Social media icons with links */} - - - - - - - - - - - - -
-
- - {/* Middle section with About links */} -
-
About
-
    -
  • - Contact Us -
    • -
  • - Code of Conduct -
    • -
  • - Our contributors -
    • -
  • - Blog -
    • - -
  • - FAQ -
    • - -
-
- - {/* Right section with Legal links */} -
-
Legals
-
    -
  • - Feedback -
    • -
  • - Privacy Policy -
    • -
  • - Terms of use -
    • -
-
-
-
+ fetchGitHubStars(); + }, []); + + return ( + <> + {/* Divider line */} +
+ + {/* Footer container with dynamic background color */} +
+
+
+

+ Subscribe to our Newsletter +

+
+ setEmail(e.target.value)} + required + className="px-4 py-2 border border-gray-300 rounded-md w-full max-w-xs focus:outline-none mt-3 border-2 border-black" + /> + +
+ {message && ( +

+ {message} +

+ )} +
+ + +
+ {/* Left section with branding and social icons */} +
+

+ BIT + + BOX + +

+

+ Empowering Developers, +
+ Where Projects Find Solutions Together +

+
+ {/* Social media icons with links */} + + + + + + + + + + + + +
- {/* Last footer section with copyright info */} -
-

- © 2024 Bitbox.  Made with 🤍 by Bitbox India.  All rights reserved. -

+ {/* Middle section with About links */} +
+
About
+
    +
  • + Contact Us +
    • +
  • + Code of Conduct +
    • +
  • + Our contributors +
    • +
  • + Blog +
    • + +
  • + FAQ +
    • +
+
+ + {/* Right section with Legal links */} +
+
Legals
+
    +
  • + Feedback +
    • +
  • + Privacy Policy +
    • +
  • + Terms of use +
    • +
- - ); -} +
+
+
+ + {/* Last footer section with copyright info */} +
+

+ © 2024 Bitbox.  Made with 🤍 by Bitbox India.  All rights + reserved. +

+
+ + ); +}; // Prop types for validation Footer.propTypes = { - showAlert: PropTypes.func, - mode: PropTypes.string, + showAlert: PropTypes.func, + mode: PropTypes.string, }; export default Footer; diff --git a/client/src/component/Footers/Contactus.jsx b/client/src/component/Footers/Contactus.jsx index 4082bba..f1d2b44 100644 --- a/client/src/component/Footers/Contactus.jsx +++ b/client/src/component/Footers/Contactus.jsx @@ -1,16 +1,16 @@ -import '../../css/Main.css'; -import PropTypes from 'prop-types'; -import { useState } from 'react'; -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; +import "../../css/Main.css"; +import PropTypes from "prop-types"; +import { useState } from "react"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; function ContactUs(props) { const [isSubmitting, setIsSubmitting] = useState(false); - const [email, setEmail] = useState(''); - const [name, setName] = useState(''); - const [message, setMessage] = useState(''); - const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com'; - + const [email, setEmail] = useState(""); + const [name, setName] = useState(""); + const [message, setMessage] = useState(""); + const VITE_SERVER_PORT = + import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com"; const handleSubmit = async (e) => { e.preventDefault(); @@ -39,62 +39,101 @@ function ContactUs(props) { return; } - try { - const response = await fetch(`${VITE_SERVER_PORT}/api/contact/submitContactForm`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ name, email, message }), - }); + const response = await fetch( + `${VITE_SERVER_PORT}/api/contact/submitContactForm`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name, email, message }), + } + ); const result = await response.json(); // Check if the request was successful if (response.ok) { - toast.success('Message Sent Successfully!'); - setName(''); - setEmail(''); - setMessage(''); + toast.success("Message Sent Successfully!"); + setName(""); + setEmail(""); + setMessage(""); } else { - toast.error(result.message || 'Error in submission!'); + toast.error(result.message || "Error in submission!"); } } catch (error) { // Handle network or other fetch-related errors - toast.error('Something went wrong. Please try again.'); + toast.error("Something went wrong. Please try again."); } finally { // Reset the submitting state regardless of the outcome setIsSubmitting(false); } }; - return (
-

Contact Us

-
+

Contact Us

+
- - setName(e.target.value)} /> + + setName(e.target.value)} + />
- + setEmail(e.target.value)} // Update email state />
- - + +
-
diff --git a/client/src/component/Footers/Feedback.jsx b/client/src/component/Footers/Feedback.jsx index d706813..e4a399a 100644 --- a/client/src/component/Footers/Feedback.jsx +++ b/client/src/component/Footers/Feedback.jsx @@ -1,12 +1,13 @@ -import PropTypes from 'prop-types'; -import { useState } from 'react'; -import { ToastContainer, toast } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; +// import PropTypes from "prop-types"; +import { useState } from "react"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; -function Feedback(props) { +function Feedback() { const [isSubmitting, setIsSubmitting] = useState(false); const [rating, setRating] = useState(0); // State to manage rating - const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || 'https://bitbox-uxbo.onrender.com'; + const VITE_SERVER_PORT = + import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com"; const handleRatingChange = (value) => { setRating(value); // Update the rating state @@ -25,79 +26,145 @@ function Feedback(props) { const formValues = Object.fromEntries(formData.entries()); // Convert form data to an object try { - const response = await fetch(`${VITE_SERVER_PORT}/api/feedback/submitFeedback`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify(formValues), - }); + const response = await fetch( + `${VITE_SERVER_PORT}/api/feedback/submitFeedback`, + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formValues), + } + ); const result = await response.json(); // Check if the request was successful - if (response.status === 200) { // Updated to check response status properly - toast.success('Feedback Sent Successfully!'); - setIsSubmitting(false) + if (response.status === 200) { + // Updated to check response status properly + toast.success("Feedback Sent Successfully!"); + setIsSubmitting(false); } else { - toast.error(result.message || 'Error in submission!'); + toast.error(result.message || "Error in submission!"); } } catch (error) { // Handle network or other fetch-related errors - toast.error('Something went wrong. Please try again.'); + toast.error("Something went wrong. Please try again."); } finally { // Reset the submitting state regardless of the outcome setIsSubmitting(false); } }; - - return ( -
+ backdropFilter: "blur(10px)", + backgroundColor: "rgba(255, 255, 255, 0.85)", // Frosted glass effect + border: "1px solid rgba(255, 255, 255, 0.2)", + boxShadow: "0 4px 15px rgba(0, 0, 0, 0.2)", + }} + > -

We Value Your Feedback

- -
+

+ We Value Your Feedback +

+ {/* Name and Email Fields */}
- - + +
- - + +
{/* Subject or Topic and Date of Visit Fields */}
- - + +
- - + +
{/* Device Used and Priority Level */}
- - @@ -105,8 +172,18 @@ function Feedback(props) {
- - @@ -116,19 +193,48 @@ function Feedback(props) { {/* Suggestions for Improvement */}
- - + +
{/* Feedback Text */}
- - + +
{/* Rating System */}
- +
{Array.from({ length: 10 }, (_, index) => ( @@ -137,7 +243,11 @@ function Feedback(props) { type="button" onClick={() => handleRatingChange(index + 1)} className={`flex items-center justify-center w-12 h-12 rounded-full transition duration-300 focus:outline-none - ${rating === index + 1 ? 'bg-indigo-600 text-white transform scale-110' : 'bg-gray-300 text-gray-600 hover:bg-indigo-500 hover:text-white'} + ${ + rating === index + 1 + ? "bg-indigo-600 text-white transform scale-110" + : "bg-gray-300 text-gray-600 hover:bg-indigo-500 hover:text-white" + } shadow-md hover:shadow-lg`} > {index + 1} @@ -149,20 +259,21 @@ function Feedback(props) {
{/* Submit Button */} - -
- - ); } -Feedback.propTypes = { - showAlert: PropTypes.func, - mode: PropTypes.string, -}; +// Feedback.propTypes = { +// showAlert: PropTypes.func, +// mode: PropTypes.string, +// }; export default Feedback; diff --git a/client/src/component/Footers/Privacypolicy.jsx b/client/src/component/Footers/Privacypolicy.jsx index 8162943..7947266 100644 --- a/client/src/component/Footers/Privacypolicy.jsx +++ b/client/src/component/Footers/Privacypolicy.jsx @@ -1,33 +1,38 @@ -import '../../css/Main.css'; -import PropTypes from 'prop-types'; +import "../../css/Main.css"; +import PropTypes from "prop-types"; -export default function PrivacyPolicy() { +export default function PrivacyPolicy(props) { const VITE_CLIENT_PORT = import.meta.env.VITE_CLIENT_PORT; return ( -
-

+

Privacy Policy

@@ -41,35 +46,44 @@ export default function PrivacyPolicy() { you.
-

+

Interpretation

- Words with capitalized initials have meanings defined under the following - conditions. These definitions shall apply whether they appear in singular - or plural. + Words with capitalized initials have meanings defined under the + following conditions. These definitions shall apply whether they + appear in singular or plural.

-

+

Definitions

  • - Account: A unique account created for you to access - our Service or parts of our Service. + Account: A unique account created for you to + access our Service or parts of our Service.
  • - Company: Refers to BitBox (also referred to as "the - Company", "We", "Us", or "Our"). + Company: Refers to BitBox (also referred to as + "the Company", "We", "Us", or "Our").
  • - Cookies: Small files placed on your device (computer, - mobile, or tablet) that store details of your browsing history. + Cookies: Small files placed on your device + (computer, mobile, or tablet) that store details of your browsing + history.
  • - Device: Any device that can access the Service, such - as a computer, cellphone, or tablet. + Device: Any device that can access the Service, + such as a computer, cellphone, or tablet.
  • Personal Data: Information that relates to an @@ -79,15 +93,15 @@ export default function PrivacyPolicy() { Service: Refers to the Website.
  • - Service Provider: Any person or company who processes - data on behalf of the Company. + Service Provider: Any person or company who + processes data on behalf of the Company.
  • - Usage Data: Data collected automatically (such as the - duration of a page visit). + Usage Data: Data collected automatically (such as + the duration of a page visit).
  • - Website: Refers to BitBox, accessible from{' '} + Website: Refers to BitBox, accessible from{" "}
  • - You: The individual using the Service, or the company - represented by that individual. + You: The individual using the Service, or the + company represented by that individual.
-

+

Collecting and Using Your Personal Data

-

+

Types of Data Collected

-

+

Personal Data

- We may ask you to provide personally identifiable information to contact - or identify you, including: + We may ask you to provide personally identifiable information to + contact or identify you, including:

  • Email address
    • @@ -139,8 +165,8 @@ export default function PrivacyPolicy() {

    We use cookies and similar tracking technologies (beacons, tags, and - scripts) to collect and analyze information to improve our Service. The - types of tracking we use include: + scripts) to collect and analyze information to improve our Service. + The types of tracking we use include:

    • @@ -154,13 +180,17 @@ export default function PrivacyPolicy() {
-
- - ); } PrivacyPolicy.propTypes = { VITE_CLIENT_PORT: PropTypes.string, }; + +// Props Validation +PrivacyPolicy.propTypes = { + mode: PropTypes.string, + toggleMode: PropTypes.func, + showAlert: PropTypes.func, +}; diff --git a/client/src/css/Contributers.css b/client/src/css/Contributers.css index 615f01e..b873865 100644 --- a/client/src/css/Contributers.css +++ b/client/src/css/Contributers.css @@ -1,3 +1,8 @@ +/* Add this to your CSS */ +.contributor-card:hover { + box-shadow: 1px 1px 12px 4px blue !important; +} + .card { width: 280px; height: 280px; @@ -175,4 +180,4 @@ .card:hover .profile-pic svg { transform: scale(2.5); transition: all 0.5s ease-in-out 0.5s; -} \ No newline at end of file +} diff --git a/client/src/css/Faq.css b/client/src/css/Faq.css index 0e92737..5a841f7 100644 --- a/client/src/css/Faq.css +++ b/client/src/css/Faq.css @@ -1,72 +1,98 @@ +/* Container for the FAQ section */ .faq-container { - max-width: 700px; - margin: 40px auto; - padding: 30px; - background-color: #ffffff; - border-radius: 12px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); - } - - h2 { - margin-top: 60px; - text-align: center; - color: #333; - margin-bottom: 30px; - font-size: 2rem; - font-family: 'Arial', sans-serif; - } - - .faq-list { - display: flex; - flex-direction: column; - gap: 15px; - } - - .faq-card { - background-color: #f7f7f7; - border-radius: 8px; - padding: 15px 20px; - transition: background-color 0.3s ease, transform 0.3s ease; - border-left: 4px solid #01356d; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - } - .view-more { - margin-top: 1rem; - padding: 10px 20px; - background-color: #003064; /* Bootstrap primary color */ - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - transition: background-color 0.3s; - - } - - .view-more:hover { - background-color: #054486; /* Darker shade on hover */ - } - - .faq-card:hover { - background-color: #f5faff; - transform: translateY(-3px); - } - - .faq-question { - cursor: pointer; - font-size: 1.1em; - color: #003a77; - margin: 0; - font-family: 'Arial', sans-serif; - } - - .faq-question:hover { - color: #0056b3; - } - - .faq-answer { - margin-top: 10px; - font-size: 0.95em; - color: #555; - line-height: 1.6; - } - \ No newline at end of file + display: flex; /* Using Flexbox to create a two-column layout */ + justify-content: space-between; + align-items: flex-start; + margin-top: 180px !important; + max-width: 1200px; + height: 750px; + margin: 40px auto; + padding: 30px; + /* background-color: #ffffff; */ + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + font-family: Arial, sans-serif; +} + +h1 { + margin-top: 30px; + font-size: 2rem; + margin-right: 40px; +} +/* Left side - for image */ +.faq-left { + flex: 0 0 460px; /* Width for the image section */ + display: flex; + justify-content: center; /* Center the image horizontally */ +} + +/* Image styling */ +.faq-image-container { + margin-top: 40px; +} + +.faq-image { + width: 100%; /* Makes the image responsive */ + max-width: 550px; /* Maximum width for the image */ + height: 550px; + margin-left: 50px; + /* margin-top: 50px; */ +} + +/* Right side - for FAQ list */ +.faq-right { + flex: 1; /* Takes up the remaining space */ + margin-left: 100px; /* Adds space between image and FAQ list */ + padding: 15px; +} + +/* FAQ List styles */ +.faq-list { + list-style: none; + padding: 0; + /* margin: 0; */ +} + +/* Individual FAQ item styling */ +.faq-item { + margin-top: 20px; + border-bottom: 1px solid #ddd; + padding: 15px 0; + font-size: 16px; + font-weight: bold; +} + +/* Question styling */ +.faq-question { + display: flex; + justify-content: space-between; + cursor: pointer; + font-size: 1.1em; + color: #003a77; + margin: 0; + font-family: "Arial", sans-serif; +} + +.faq-question:hover { + color: #0056b3; +} + +/* Icon for showing + or - */ +.faq-icon { + font-size: 20px; +} + +/* Answer styling */ +.faq-answer { + margin-top: 10px; + color: #0056b3; + font-size: 0.95em; + line-height: 1.6; +} + +/* Optional: To make the entire FAQ item more visually engaging on hover */ +/* .faq-item:hover { + background-color: #f5faff; + transform: translateY(-2px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} */ diff --git a/client/src/css/Footer.css b/client/src/css/Footer.css index 5fdb38b..280d666 100644 --- a/client/src/css/Footer.css +++ b/client/src/css/Footer.css @@ -18,7 +18,9 @@ padding: 15px; width: 100vw; font-weight: 500; - background-color: var(--bg-color); /* Use CSS variable for easy theme change */ + background-color: var( + --bg-color + ); /* Use CSS variable for easy theme change */ transition: background-color 0.3s ease-in-out; /* Smooth transition for theme changes */ } @@ -48,7 +50,7 @@ h1 { } .code { - color: #0D92F4; + color: #0d92f4; } p { @@ -78,7 +80,9 @@ p { .footer-container .social a:hover { color: #0d0d0e; /* Hover color for light mode */ - transform: scale(1.1); /* Scale up icons slightly for a more interactive feel */ + transform: scale( + 1.1 + ); /* Scale up icons slightly for a more interactive feel */ } /* Dark mode styles */ @@ -185,7 +189,7 @@ nav_ul li { } .ft-1 span { - color: #0D92F4; + color: #0d92f4; } .ft-1 p { @@ -207,7 +211,7 @@ nav_ul li { .footer-icons i { padding: 0.4rem 0.5rem; background: #e1e1e1; - color: #0D92F4; + color: #0d92f4; border-radius: 80%; } @@ -217,17 +221,20 @@ nav_ul li { color: #091057; } -.ft-2 ul, .ft-3 ul { +.ft-2 ul, +.ft-3 ul { list-style: none; padding-left: 0; } -.ft-2 ul li, .ft-3 ul li { +.ft-2 ul li, +.ft-3 ul li { padding: 0.35rem 0; font-weight: 500; } -.ft-2 ul a, .ft-3 ul a { +.ft-2 ul a, +.ft-3 ul a { text-decoration: none; color: #000; font-size: 1.06rem; @@ -244,7 +251,7 @@ nav_ul li { } .Last-footer { - background: #0D92F4; + background: #0d92f4; text-align: center; padding: 1rem 0; } @@ -265,7 +272,8 @@ nav_ul li { font-size: 0.9rem; } - .btn1, .btn2 { + .btn1, + .btn2 { padding: 0.4rem 1rem; font-size: 0.9rem; } @@ -292,11 +300,13 @@ nav_ul li { margin-top: 1.5rem; } - .ft-2 ul, .ft-3 ul { + .ft-2 ul, + .ft-3 ul { text-align: center; } - .ft-2 ul a, .ft-3 ul a { + .ft-2 ul a, + .ft-3 ul a { font-size: 0.95rem; } @@ -320,7 +330,8 @@ nav_ul li { font-size: 0.85rem; } - .btn1, .btn2 { + .btn1, + .btn2 { padding: 0.3rem 0.8rem; font-size: 0.85rem; } diff --git a/client/src/css/Main.css b/client/src/css/Main.css index fe7e682..efd60ce 100644 --- a/client/src/css/Main.css +++ b/client/src/css/Main.css @@ -46,7 +46,6 @@ ul { color: #374151; } - .lists { padding: 5px; margin-top: 2rem; @@ -67,14 +66,20 @@ ul { /* Contact Us */ .contactus-container { - margin-top: 100px; - margin-bottom: 40px; + margin-top: 120px; + margin-bottom: 60px; } .contactus-main-box { - border: 2px solid #ccc; - padding: 20px; + border: 2px solid #b9b2b2; + padding: 40px; border-radius: 8px; + + max-width: 920px; /* Max width, if needed */ + height: 500px; + padding: 40px; + border-radius: 8px; + margin: 0 auto; /* Centers the form */ } .header { @@ -87,7 +92,7 @@ ul { background-image: linear-gradient(120deg, #bfbdbd 0%, #e0eaef 100%); } -.image-bx { +.image-box { width: 60px; height: 60px; border-radius: 50%; @@ -157,6 +162,7 @@ ul { .privacy-policy-container { padding-left: 15%; padding-right: 15%; + margin-top: 110px; } /* Term of Use */ @@ -183,4 +189,4 @@ ul { .stars-testimonial { color: #ffd700 !important; -} \ No newline at end of file +} diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 5f7d043..e5f738d 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -1,16 +1,12 @@ /** @type {import('tailwindcss').Config} */ export default { - content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - ], + content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { - colors:{ - "blue-main":"#0000ff", - } + colors: { + "blue-main": "#0000ff", + }, }, }, plugins: [], -} - +};