diff --git a/package-lock.json b/package-lock.json index 0199ad4..24efebd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-router-dom": "^6.23.1", "react-scripts": "^5.0.1", "react-scroll": "^1.9.0", + "react-toastify": "^10.0.5", "styled-components": "^6.1.11" }, "devDependencies": { @@ -53,7 +54,7 @@ "rimraf": "^5.0.7", "svgo": "^3.3.2", "tailwindcss": "^3.4.3", - "vite": "^5.3.3", + "vite": "^5.3.5", "webpack": "^5.92.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" @@ -7639,6 +7640,14 @@ "node": ">=6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -18751,6 +18760,18 @@ "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", @@ -21534,9 +21555,9 @@ } }, "node_modules/vite": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz", - "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==", + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz", + "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==", "dev": true, "dependencies": { "esbuild": "^0.21.3", diff --git a/package.json b/package.json index 0058237..4ae8377 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-scripts": "^5.0.1", "react-scroll": "^1.9.0", "sass": "^1.77.8", + "react-toastify": "^10.0.5", "styled-components": "^6.1.11" }, "devDependencies": { @@ -57,7 +58,7 @@ "rimraf": "^5.0.7", "svgo": "^3.3.2", "tailwindcss": "^3.4.3", - "vite": "^5.3.3", + "vite": "^5.3.5", "webpack": "^5.92.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" diff --git a/public/bot.gif b/public/bot.gif new file mode 100644 index 0000000..b47712a Binary files /dev/null and b/public/bot.gif differ diff --git a/public/botavtar.png b/public/botavtar.png new file mode 100644 index 0000000..6408e5d Binary files /dev/null and b/public/botavtar.png differ diff --git a/public/user.png b/public/user.png new file mode 100644 index 0000000..4f68853 Binary files /dev/null and b/public/user.png differ diff --git a/src/App.jsx b/src/App.jsx index 98905f8..624c8dc 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -48,14 +48,14 @@ import Pay from "./Pages/pay/pay.jsx"; // Ensure you import the correct Pay comp const ThemeContext = createContext(); const App = () => { - const theme = useSelector((state) => state.theme.value) ? "dark" : "light"; - const [currentTheme, setTheme] = useState(theme); + const theme = useSelector((state) => state.theme.value) ? "dark" : "light"; + const [currentTheme, setTheme] = useState(theme); - const toggleTheme = () => { - const newTheme = currentTheme === 'light' ? 'dark' : 'light'; - setTheme(newTheme); - localStorage.setItem('theme', newTheme); - }; + const toggleTheme = () => { + const newTheme = currentTheme === 'light' ? 'dark' : 'light'; + setTheme(newTheme); + localStorage.setItem('theme', newTheme); + }; useEffect(() => { AOS.init({ diff --git a/src/Components/ChatAssistant/Avatar.jsx b/src/Components/ChatAssistant/Avatar.jsx index 3025bcb..e2b659c 100644 --- a/src/Components/ChatAssistant/Avatar.jsx +++ b/src/Components/ChatAssistant/Avatar.jsx @@ -4,7 +4,7 @@ import "../ChatAssistant/ChatAssistant.css"; export default function Avatar() { return (
- +
) } diff --git a/src/Components/ChatAssistant/ChatAssistant.css b/src/Components/ChatAssistant/ChatAssistant.css index 844bf11..2383241 100644 --- a/src/Components/ChatAssistant/ChatAssistant.css +++ b/src/Components/ChatAssistant/ChatAssistant.css @@ -14,19 +14,15 @@ .chatbot-scroll { ::-webkit-scrollbar { width: 8px; - /* Width of the scrollbar */ } ::-webkit-scrollbar-track { background: #f1f1f1; - /* Color of the track */ } ::-webkit-scrollbar-thumb { background: #007bff; - /* Color of the thumb */ border-radius: 6px; - /* Roundness of the thumb */ } } @@ -34,14 +30,26 @@ outline: none; } +.react-chatbot-kit-chat-input { + width: 100% !important; + padding: 12.5px !important; + border: none !important; + font-size: 0.85rem !important; + border-top: 1px solid #d8d8d8 !important; + border-bottom-left-radius: 5px !important; + margin-bottom: 64px !important; + margin-left: 10px !important;} + .react-chatbot-kit-chat-message-container { overflow-x: hidden; - padding: 0.5px 5px 25px 5.5px; + padding: 0.5px 1px 0px 6.5px; } .react-chatbot-kit-user-chat-message { padding: 15px; margin-right: 9px; + border-radius: 10px; + } .react-chatbot-kit-chat-input-form { @@ -56,16 +64,21 @@ } .react-chatbot-kit-chat-container { - width: 350px; - height: 450px; + width: 90vw; + max-width: 349px; + height: 173vh; + max-height: 508px; border: 2px solid blue; - border-radius: 5px; + border-radius: 22px; + overflow: hidden; + margin-bottom: 49px; } .react-chatbot-kit-chat-bot-message { margin-left: 10px; background-color: #2977f5; color: #f1f1f1; + border-radius: 13px; } .react-chatbot-kit-chat-bot-message-arrow { @@ -82,27 +95,26 @@ width: 90px; margin: 0px 10px; } -.Logo:hover { - - transition : 1s ; - box-shadow: 2px 2px 2px #76a0cc; - transform: scale(1.2); +.Logo:hover { + transition: 1s; + transform: scale(1.1); } .Logo { cursor: pointer; - height: 50px; - width: 50px; + height: 70px; + width: 69px; border-radius: 50px; right: 12px; + margin-bottom: 4px; } .Avatar { height: 50px; width: 50px; border-radius: 50px; - margin-bottom: 30px; + margin-bottom: 10px; } .userAvatar { @@ -123,14 +135,13 @@ } .chatbot-container { - width: 350px; + width: 90vw; + max-width: 350px; overflow: hidden; - /* Hide overflow content */ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateY(100%); opacity: 0; pointer-events: none; - /* Prevent interaction when hidden */ } .chatbot-container.open { @@ -140,11 +151,45 @@ pointer-events: auto; } +.tooltip { + position: relative; + display: inline-block; +} + +.hidden .tooltiptext { + display: none; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 260px; + background-color: #007bff; + color: #fff; + text-align: center; + border-radius: 13px; + padding: 11px 10px; + position: absolute; + z-index: 50; + bottom: 105%; + left: -7%; + margin-left: -197px; + opacity: 0; + transition: opacity 0.3s; + font-size: 14px; +} + +.tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; +} + /* Responsive styles */ @media (max-width: 768px) { .react-chatbot-kit-chat-container { - width: 300px; - height: 400px; + width: 80vw; + height: 80vh; + max-width: 300px; + max-height: 400px; } .chatbot { @@ -173,7 +218,7 @@ .react-chatbot-kit-chat-message-container { padding: 0.5px 3px 15px 3.5px; - max-height: 200px; /* Adjust height for medium screens */ + max-height: 200px; } .react-chatbot-kit-user-chat-message { @@ -184,8 +229,10 @@ @media (max-width: 480px) { .react-chatbot-kit-chat-container { - width: 250px; - height: 350px; + width: 70vw; + height: 70vh; + max-width: 250px; + max-height: 350px; border-width: 1px; } @@ -201,7 +248,7 @@ .react-chatbot-kit-chat-message-container { padding: 0.5px 3px 15px 3.5px; - max-height: 150px; /* Adjust height for small screens */ + max-height: 150px; } .react-chatbot-kit-chat-input-form { diff --git a/src/Components/ChatAssistant/ChatAssistant.jsx b/src/Components/ChatAssistant/ChatAssistant.jsx index df37434..6298f5f 100644 --- a/src/Components/ChatAssistant/ChatAssistant.jsx +++ b/src/Components/ChatAssistant/ChatAssistant.jsx @@ -16,12 +16,15 @@ const ChatAssistant = () => { return (
- Logo +
+ Logo + Welcome to Start Connect-Hub.
How can I help you? +
{isOpen && - +
) } \ No newline at end of file diff --git a/src/Components/ChatBot/ActionProvider.jsx b/src/Components/ChatBot/ActionProvider.jsx index ab7e2e2..4a431eb 100644 --- a/src/Components/ChatBot/ActionProvider.jsx +++ b/src/Components/ChatBot/ActionProvider.jsx @@ -1,16 +1,8 @@ import React from 'react'; -import {createChatBotMessage} from 'react-chatbot-kit' +import { createChatBotMessage } from 'react-chatbot-kit'; +import { shuffleArray } from './utils'; const ActionProvider = ({ createChatBotMessage, setState, children }) => { - const questions = [ - "What services do you offer?", - "Can you tell me about your pricing?", - "How can I contact your support team?", - "What is the mission of your company?", - "Where are you located?", - "How long have you been in business?" - ]; - const updateState = (message) => { setState((prev) => ({ ...prev, @@ -18,80 +10,116 @@ const ActionProvider = ({ createChatBotMessage, setState, children }) => { })); }; - const handleHello = () => { - const message = createChatBotMessage('Hello, I am InvestIQ, type in your query.'); - updateState(message); - }; - - const companyDetails = () => { - const message = createChatBotMessage('At StartConnect-Hub, our mission is to create a thriving ecosystem where entrepreneurs and investors can come together to turn ideas into reality. We understand the challenges that startups face, from securing funding to navigating the complexities of the business world. With our platform, entrepreneurs can bring their visions to life and take their businesses to new heights.'); - updateState(message); - }; - - const contactUs = () => { - const message = createChatBotMessage('Contact details can be viewed on our CONTACT US section. Feel free to drop us your query.'); - updateState(message); - }; - - const handleServices = () => { - const message = createChatBotMessage("Our services include investor management, financial services,full service funds, and more. You can visit our website for a detailed list of services."); - updateState(message); - }; - - const handleCost = () => { - const message = createChatBotMessage("Our pricing varies depending on the scope of the project and specific requirements. Please contact our sales team for detailed pricing information tailored to your needs."); - updateState(message); - }; - - - const handleMore = () => { - const message = createChatBotMessage("Our mission is to empower businesses with innovative technology solutions and help them achieve their goals efficiently and effectively."); - updateState(message); - }; - - const handleLocation = () => { - const message = createChatBotMessage("We are located in India. You can visit contact details for more"); - updateState(message); - }; - - const handleExperience = () => { - const message = createChatBotMessage("We have been in business for more than 2 years, serving clients worldwide."); - updateState(message); - }; - - const handleThank = () => { - const message = createChatBotMessage("Hope I could help! Stay connected and thank you."); - updateState(message); - }; - - const defaultResponse = () => { - const message = createChatBotMessage("I'm not sure about that. Can you ask something else? Or You can feel free to checkout Frequently asked questions") ; - updateState(message) ; - } - - const suggestQuestions = () => { - const questionsMessage = questions.map((question, idx) => `${idx + 1}. ${question}`).join('\n'); - const message = createChatBotMessage(`Here are some questions you can ask:\n\n${questionsMessage}`); - updateState(message); + const actions = { + services: () => { + const message = createChatBotMessage('Our services include investor management, financial services, full-service funds, and more.', { + widget: 'options' + }); + updateState(message); + }, + pricing: () => { + const message = createChatBotMessage('Our pricing varies depending on the project. Please contact our sales team for detailed information.', { + widget: 'options' + }); + updateState(message); + }, + contact: () => { + const message = createChatBotMessage('You can contact us through the Contact Us section on our website.', { + widget: 'options' + }); + updateState(message); + }, + mission: () => { + const message = createChatBotMessage('Our mission is to create a thriving ecosystem for entrepreneurs and investors.', { + widget: 'options' + }); + updateState(message); + }, + location: () => { + const message = createChatBotMessage('We are located in India.', { + widget: 'options' + }); + updateState(message); + }, + experience: () => { + const message = createChatBotMessage('We have been in business for over 2 years.', { + widget: 'options' + }); + updateState(message); + }, + startups: () => { + const message = createChatBotMessage('We work with a diverse range of startups across various industries.', { + widget: 'options' + }); + updateState(message); + }, + featured: () => { + const message = createChatBotMessage('To get featured, submit your startup profile through our platform.', { + widget: 'options' + }); + updateState(message); + }, + benefits: () => { + const message = createChatBotMessage('Joining StartConnectHub offers numerous benefits including access to investors and mentors.', { + widget: 'options' + }); + updateState(message); + }, + resources: () => { + const message = createChatBotMessage('We offer resources like mentorship programs, funding opportunities, and business development guides.', { + widget: 'options' + }); + updateState(message); + }, + collaboration: () => { + const message = createChatBotMessage('We encourage collaboration among startups.', { + widget: 'options' + }); + updateState(message); + }, + contactSupport: () => { + const message = createChatBotMessage('Contact our support team through the Contact Us section on our website.', { + widget: 'options' + }); + updateState(message); + }, + SuccessStories: () => { + const message = createChatBotMessage('We feature success stories from startups on our website.', { + widget: 'options' + }); + updateState(message); + }, + investors: () => { + const message = createChatBotMessage('Investors can sign up on our platform to explore investment opportunities.', { + widget: 'options' + }); + updateState(message); + }, + handleHello: () => { + const message = createChatBotMessage('Hello, I am InvestIQ. Type in your query or Here are some options you can choose from:', { + widget: 'options' + }); + updateState(message); + }, + handleThank: () => { + const message = createChatBotMessage('You are Welcome! If you have any more questions or need further assistance, feel free to ask.', { + widget: 'options' + }); + updateState(message); + }, + defaultResponse: () => { + const message = createChatBotMessage("I'm not sure about that. Can you ask something else? Here are some options you can choose from Or feel free to check out the Frequently Asked Questions.", { + widget: 'options' + }); + updateState(message); + } }; return (
{React.Children.map(children, (child) => { return React.cloneElement(child, { - actions: { - handleHello, - companyDetails, - contactUs, - suggestQuestions , - handleCost, - handleExperience, - handleLocation, - handleServices, - handleMore, - handleThank, - defaultResponse - }, + actions, }); })}
diff --git a/src/Components/ChatBot/MessageParser.jsx b/src/Components/ChatBot/MessageParser.jsx index 017da4a..3da9d98 100644 --- a/src/Components/ChatBot/MessageParser.jsx +++ b/src/Components/ChatBot/MessageParser.jsx @@ -1,81 +1,83 @@ import React from 'react'; const MessageParser = ({ children, actions }) => { - + const parse = (message) => { - message = message.toLowerCase().trim(); // Added trim to remove leading/trailing spaces + message = message.toLowerCase().trim(); + + const options = [ + 'services', 'pricing', 'contact', 'mission', 'location', + 'experience', 'startups', 'featured', 'benefits', 'resources', + 'collaboration', 'contact', 'SuccessStories', 'investors' + ]; + + const foundOption = options.find(option => message.includes(option)); - if ( - message.includes('company') || - message.includes('website') || - message.includes('mission') || - message.includes('what does this company do') || - message.includes('startconnect-hub') || - message.includes('startconnect') || - message.includes('site') - - ) { - actions.companyDetails(); - - } else if ( - message.includes('hello') || - message.includes('hi') || - message.includes('hey') || - message.includes('who are you') - ) { - actions.handleHello(); - } else if ( - message.includes('how to reach') || - message.includes('contact') || - message.includes('phone') - ) { - actions.contactUs(); - } else if ( - message.includes('price') || - message.includes('pricing') || - message.includes('cost') - ) { - actions.handleCost(); - } else if ( - message.includes('how long') || - message.includes('experience') - ) { - actions.handleExperience(); - } else if ( - message.includes('where') || - message.includes('located') - ) { - actions.handleLocation(); - } else if ( - message.includes('services') || - message.includes('service') || - message.includes('what can you do') - ) { - actions.handleServices(); - } else if ( - message.includes('more details') || - message.includes('tell more') - ) { - actions.handleMore(); - }else if ( - message.includes('graet') || - message.includes('okay') || - message.includes('fine') || - message.includes('thankyou') || - message.includes('thanks') - ) { - actions.handleThank(); - } else if ( - message.includes('suggest questions') || - message.includes('give me questions') || - message.includes('what should i ask') || - message.includes('questions') - ) { - actions.suggestQuestions(); + if (foundOption) { + switch (foundOption) { + case 'services': + actions.handleServices(); + break; + case 'pricing': + actions.handleCost(); + break; + case 'contact': + case 'contact support': + actions.contactUs(); + break; + case 'mission': + actions.companyDetails(); + break; + case 'location': + actions.handleLocation(); + break; + case 'experience': + actions.handleExperience(); + break; + case 'startups': + actions.handleStartups(); + break; + case 'featured': + actions.handleFeatured(); + break; + case 'benefits': + actions.handleBenefits(); + break; + case 'resources': + actions.handleResources(); + break; + case 'collaboration': + actions.handleCollaboration(); + break; + case 'success stories': + actions.handleSuccessStories(); + break; + case 'investors': + actions.handleInvestors(); + break; + default: + actions.defaultResponse(); + } } else { - actions.defaultResponse(); + if ( + message.includes('hello') || + message.includes('hi') || + message.includes('hey') || + message.includes('who are you') + ) { + actions.handleHello(); + }else if ( + message.includes('thank you') || + message.includes('thanks') || + message.includes('okay') || + message.includes('hmm') + ) { + actions.handleThank(); + } else { + actions.defaultResponse(); + } } - } + } return (
@@ -89,4 +91,4 @@ const MessageParser = ({ children, actions }) => { ); }; -export default MessageParser; \ No newline at end of file +export default MessageParser; diff --git a/src/Components/ChatBot/Options.jsx b/src/Components/ChatBot/Options.jsx new file mode 100644 index 0000000..78c62cc --- /dev/null +++ b/src/Components/ChatBot/Options.jsx @@ -0,0 +1,63 @@ +import React, { useState, useEffect } from 'react'; +import { shuffleArray } from './utils'; + +const Options = ({ actions }) => { + const [currentOptions, setCurrentOptions] = useState([]); + + const allOptions = [ + 'services', 'pricing', 'contact', 'mission', + 'location', 'experience', 'startups', 'featured', + 'benefits', 'resources', 'collaboration', 'contact', + 'SuccessStories', 'investors' + ]; + + useEffect(() => { + + const shuffledOptions = shuffleArray(allOptions); + setCurrentOptions(shuffledOptions.slice(0, 4)); + }, []); + + const handleOptionClick = (option) => { + actions[option](); + + const shuffledOptions = shuffleArray(allOptions); + setCurrentOptions(shuffledOptions.slice(0, 4)); + }; + + return ( +
+ {currentOptions.map((option, index) => ( +
handleOptionClick(option)} + style={styles.option} + > + {option.charAt(0).toUpperCase() + option.slice(1)} +
+ ))} +
+ ); +}; + +const styles = { + optionsContainer: { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + padding: '10px', + }, + option: { + backgroundColor: '#007bff', + color: '#fff', + padding: '8px 16px', + margin: '5px', + borderRadius: '16px', + cursor: 'pointer', + textAlign: 'center', + width: '100%', + maxWidth: '180px', + fontSize: '14px', + }, +}; + +export default Options; diff --git a/src/Components/ChatBot/config.jsx b/src/Components/ChatBot/config.jsx index 26c41ca..a71fbf1 100644 --- a/src/Components/ChatBot/config.jsx +++ b/src/Components/ChatBot/config.jsx @@ -1,21 +1,41 @@ +import React from 'react'; import { createChatBotMessage } from 'react-chatbot-kit'; import Avatar from "../ChatAssistant/Avatar"; -import UserAvatar from "../ChatAssistant/UserAvatar" +import UserAvatar from "../ChatAssistant/UserAvatar"; +import Options from './Options'; + const config = { - botName: "InvestIQ", - initialMessages: [createChatBotMessage(`Welcome to StartConnect-Hub! ๐Ÿ™Œ`)], - customComponents:{ - botAvatar: (props) => , - userAvatar: (props) => , - header: () =>
- StartConnect Hub Bot- InvestIQ -
+ botName: 'InvestIQ', + initialMessages: [ + createChatBotMessage('Welcome to StartConnect-Hub! ๐Ÿ™Œ How can I help you?', { + widget: 'options' + }), + ], + customComponents: { + botAvatar: (props) => , + userAvatar: (props) => , + header: () => ( +
+ StartConnect Hub Bot - InvestIQ +
+ ), + }, + widgets: [ + { + widgetName: 'options', + widgetFunc: (props) => , }, -} -export default config; \ No newline at end of file + ], +}; + +export default config; diff --git a/src/Components/ChatBot/utils.jsx b/src/Components/ChatBot/utils.jsx new file mode 100644 index 0000000..49124ba --- /dev/null +++ b/src/Components/ChatBot/utils.jsx @@ -0,0 +1,15 @@ +export const shuffleArray = (array) => { + let currentIndex = array.length, temporaryValue, randomIndex; + + while (currentIndex !== 0) { + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + + temporaryValue = array[currentIndex]; + array[currentIndex] = array[randomIndex]; + array[randomIndex] = temporaryValue; + } + + return array; + }; + \ No newline at end of file diff --git a/src/Components/Contact/Contact.css b/src/Components/Contact/Contact.css index eb18be4..e7e34d8 100644 --- a/src/Components/Contact/Contact.css +++ b/src/Components/Contact/Contact.css @@ -66,11 +66,10 @@ margin: 20px 0; } /*Added the hover effct here on submit button */ -.btn-div .btn:hover{ - +.btn-div .btn:hover { display: flex; - background-color:rgb(111, 111, 160); - color:white; + background-color: rgb(111, 111, 160); + color: white; justify-content: center; } @@ -85,9 +84,9 @@ width:70vw; } */ - .btn:hover{ - background-color:rgb(111, 111, 160); - color:white; +.btn:hover { + background-color: rgb(111, 111, 160); + color: white; } /* Media query for Smart Phone */ @media (max-width: 600px) { @@ -134,13 +133,14 @@ } */ } +/* ToastStyles.css */ + @media (max-width: 370px) { - .contact-col form{ + .contact-col form { width: 80vw; - } - .contact-col form input, .contact-col form textarea{ + } + .contact-col form input, + .contact-col form textarea { width: 80vw; - } - - + } } diff --git a/src/Components/Contact/Contact.jsx b/src/Components/Contact/Contact.jsx index e43b766..8c691e6 100644 --- a/src/Components/Contact/Contact.jsx +++ b/src/Components/Contact/Contact.jsx @@ -1,17 +1,21 @@ import React from "react"; -import "./Contact.css"; -import msg_icon from "../../assets/msg-icon.png"; +import { useSelector } from "react-redux"; +import { Slide, ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import black_arrow from "../../assets/dark-arrow.png"; +import location_icon from "../../assets/location-icon.png"; import mail_icon from "../../assets/mail-icon.png"; +import msg_icon from "../../assets/msg-icon.png"; import phone_icon from "../../assets/phone-icon.png"; -import location_icon from "../../assets/location-icon.png"; import white_arrow from "../../assets/white-arrow.png"; -import black_arrow from "../../assets/dark-arrow.png"; -import { useSelector } from "react-redux"; +import "./Contact.css"; const Contact = () => { const theme = useSelector((state) => state.theme.value) ? "dark" : "light"; - const reversetheme = useSelector((state) => state.theme.value) ? "light" : "dark"; - const arrowImage = theme === 'light' ? white_arrow : black_arrow; + const reversetheme = useSelector((state) => state.theme.value) + ? "light" + : "dark"; + const arrowImage = theme === "light" ? white_arrow : black_arrow; const [emailError, setEmailError] = React.useState(""); const [result, setResult] = React.useState(""); @@ -38,9 +42,9 @@ const Contact = () => { const email = formData.get("email"); if (!validateEmail(email)) { - setEmailError("Please enter a valid email address."); - setResult(""); - return; + setEmailError("Please enter a valid email address."); + setResult(""); + return; } formData.append("access_key", "5759d7fc-28f1-473a-a904-ab8d5f981280"); @@ -54,15 +58,54 @@ const Contact = () => { if (data.success) { setResult("Form Submitted Successfully"); + toast("โœ…Form Submitted Successfully!", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + pauseOnHover: true, + draggable: true, + progress: undefined, + theme: "light", + closeButton: false, + transition: Slide, + className: "custom-toast", + bodyClassName: "custom-toast-body", + }); event.target.reset(); } else { console.log("Error", data); setResult(data.message); + toast.error("๐Ÿšซ Form Submission Failed!", { + position: "top-center", + autoClose: 5000, + hideProgressBar: false, + pauseOnHover: true, + draggable: true, + progress: undefined, + closeButton: false, + theme: "light", + transition: Slide, + className: "custom-toast", + bodyClassName: "custom-toast-body", + }); } }; return (
+

Send us a message diff --git a/src/Components/FAQ/accordian.css b/src/Components/FAQ/accordian.css index 5d0d114..e825aab 100644 --- a/src/Components/FAQ/accordian.css +++ b/src/Components/FAQ/accordian.css @@ -1,10 +1,12 @@ +/* accordian.css */ + h2 { text-align: center; font-weight: 600; display: flex; justify-content: center; margin-bottom: 15px; - + color: #212eA0; /* Added a color for the heading */ } .question { @@ -14,12 +16,11 @@ h2 { background-color: rgb(33,46,160); border: 2px solid whitesmoke; color: azure; - border-radius: 10px; - padding-top: 15px; - padding-right: 20px; - padding-bottom: 15px; - padding-left: 10px; -} + border-radius: 10px 10px 0 0; /* Rounded corners at the top */ + padding: 15px 20px 15px 10px; /* Consolidated padding properties */ + cursor: pointer; /* Added cursor pointer for better UX */ + transition: background-color 0.3s ease-in-out; /* Smooth background color transition */ +} .accordian .question:hover { background-color: #000c7c; @@ -35,27 +36,38 @@ h2 { h3 { padding: 10px; + margin: 0; /* Removed default margin */ + font-size: 1.1em; /* Increased font size */ } .item { - padding: 10px; + margin-bottom: 10px; } .content { - transition: max-height 1s ease-in-out; + transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out; justify-content: center; box-sizing: content-box; - /* padding: 20px; */ - /* border: 3px solid black; */ - border-radius: 10px; - /* margin: 10px; */ - font-family: "Outfit", sans-serif; max-height: 0; overflow: hidden; - transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, border 0.5s ease-in-out; + background-color: #1d1d35; /* Dark background color for answer section */ + padding: 0 20px; /* Padding for content area */ + border-left: 2px solid whitesmoke; + border-right: 2px solid whitesmoke; + border-bottom: 2px solid whitesmoke; + color: #fff; /* White text for dark mode */ + border-radius: 0 0 10px 10px; /* Rounded corners at the bottom */ } + .content.show { max-height: 500px; /* Set a reasonable max-height to allow transition */ padding-top: 20px; padding-bottom: 20px; } + +.no-data { + text-align: center; + padding: 20px; + color: #777; + font-size: 1.2em; +} diff --git a/src/Components/FAQ/accordian.jsx b/src/Components/FAQ/accordian.jsx index 9abbbaf..1f11349 100644 --- a/src/Components/FAQ/accordian.jsx +++ b/src/Components/FAQ/accordian.jsx @@ -49,16 +49,9 @@ function Accordian() {
(refs.current[index] = el)} - className="content" + className={`content ${selected === dataItem.id ? "show" : ""}`} style={{ - maxHeight: - selected === dataItem.id - ? // dataItem.id gives content height dynamycally and 100 added for extra space if needed - `${heights[dataItem.id] + 100}px` - : "0", - padding: selected === dataItem.id ? "20px" : "", - border: selected === dataItem.id ? "3px solid black" : "", - margin: selected === dataItem.id ? "10px" : "", + maxHeight: selected === dataItem.id ? `${heights[dataItem.id]}px` : "0", }} > {dataItem.answer} @@ -66,7 +59,7 @@ function Accordian() {
)) ) : ( -
No data present
+
No data present
)}

diff --git a/src/Components/FAQ/data.js b/src/Components/FAQ/data.js index 5453fa0..522457d 100644 --- a/src/Components/FAQ/data.js +++ b/src/Components/FAQ/data.js @@ -22,7 +22,38 @@ const data = [ question: "How can I contact customer support?", answer: "You can reach our customer support team by emailing startconnecthub@gmail.com. Weโ€™re here to help!", + }, + { + id : '5', + question: "How can StartConnect Hub help startups succeed?", + answer: + "StartConnect Hub empowers startups by providing access to resources such as mentorship, networking opportunities,and funding guidance. We facilitate connections with investors and industry experts to support growth and innovation.", + }, + { + id : '6', + question: "What types of support do investors receive through StartConnect Hub?", + answer: + "Investors using StartConnect Hub gain access to a curated platform showcasing promising startup opportunities. Our platform offers insights into market trends, due diligence support, and networking opportunities with other investors.", + }, + { + id : '7', + question: "How does StartConnect Hub foster collaboration within the entrepreneurial ecosystem?", + answer: + "StartConnect Hub fosters collaboration by creating a vibrant community where startups, investors, and industry professionals can connect, share ideas, and collaborate on projects. Our events and networking sessions facilitate meaningful interactions and partnerships.", + }, + { + id : '8', + question: "What makes StartConnect Hub different from other startup platforms?", + answer: + "StartConnect Hub stands out by offering a comprehensive suite of resources tailored to both startups and investors. We prioritize personalized support, curated networking opportunities, and a focus on long-term success for all parties involved.", + }, + { + id : '9', + question: "How can startups and investors get involved with StartConnect Hub?", + answer: + "Startups and investors can get involved by creating profiles on our platform, attending networking events, participating in mentorship programs, and exploring funding opportunities. Join our community to start making meaningful connections today!", } + ]; export default data; \ No newline at end of file diff --git a/src/Components/Footer/Components/faq.jsx b/src/Components/Footer/Components/faq.jsx index 348b260..718d4e7 100644 --- a/src/Components/Footer/Components/faq.jsx +++ b/src/Components/Footer/Components/faq.jsx @@ -12,7 +12,7 @@ function Faq () { return ( <> -

FAQ's

+

FAQs

{data && data.length > 0 ? ( diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 5b4d26a..ae94ab8 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -179,7 +179,7 @@ const Footer = () => {
- © 2024 StartConnect-Hub. All rights reserved. + © {new Date().getFullYear()} StartConnect-Hub. All rights reserved.
diff --git a/src/Components/Login/Login.css b/src/Components/Login/Login.css index 551acde..958420f 100644 --- a/src/Components/Login/Login.css +++ b/src/Components/Login/Login.css @@ -3,7 +3,7 @@ justify-content: center; align-items: center; height: auto; - margin-top: 100px; /* Adjust this value to move the login box down */ + margin-top: 100px; padding-bottom: 10px; } @@ -12,93 +12,94 @@ background-image: linear-gradient(315deg, #ffffff 0%, #91a6ff 74%); width: 400px; margin: 0 auto; - padding: 10px 10px 20px 10px; + padding: 20px; border: 1px solid #ccc; border-radius: 20px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } -.login-container > input { - outline: none; -} - -.input { - padding: 20px; - border: none; -} - h2 { font-size: 28px; - margin-bottom: 10px; - padding: 20px; + margin-bottom: 20px; + padding: 10px 0; +} + +.input-container { + width: 100%; + position: relative; + margin-bottom: 5px; } input { width: 100%; - margin-bottom: 20px; - padding: 8px; + padding: 10px; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; - border: none; outline: none; } button { - width: 50%; - padding: 20px; + width: 90%; + padding: 15px; border: none; border-radius: 10px; background-color: #007bff; color: #fff; cursor: pointer; + font-size: 16px; + margin-bottom: 20px; } button:hover { - background-color: #007bff; + background-color: #0056b3; } .login-container p { margin-top: 10px; text-align: center; - padding-bottom: 20px; + padding-bottom: 10px; } p a { color: #007bff; text-decoration: none; - margin-top: 12px; } p a:hover { color: #0056b3; text-decoration: underline; } + .googlelogin { - padding: 20px; - margin-top: 12px; - width: 50%; - text-align: center; - margin-left: 50px; + width: 100%; + justify-content: center; + margin-top: 10px; +} + +.googlelogin button:hover, +.googlelogin div:hover { + background-color: #dbedf8b9; + transition: background-color 0.3s ease; } + .warningmsg { - margin: 0; + margin: 3px 0; text-align: left; - padding: 0; - margin-bottom: 10px; - /* justify-content: center; - display: flex; */ + color: red; } + .eye { float: right; - left:-9px; + left: -9px; margin-top: -45px; + margin-right: 10px; position: relative; - z-index: 2; - width: 14px; /*Desired width*/ - height: 14px; /*Desired height*/ + width: 14px; + height: 14px; } + .eye:hover { color: #007efc; cursor: pointer; diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx index 466ac95..d0f0bd9 100644 --- a/src/Components/Login/Login.jsx +++ b/src/Components/Login/Login.jsx @@ -1,25 +1,20 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate, NavLink } from "react-router-dom"; import "./Login.css"; import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google'; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; /*react libraries used - for importing eye icon */ -import { faEye } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"; - -const Login = () => { +const Login = ({ isDarkMode }) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [warnings, setWarnings] = useState({ email: "", password: "" }); - const [isVisible,setVisible] = useState(false); + const [isVisible, setVisible] = useState(false); const navigate = useNavigate(); - const eye = ; - - const togglePasswordFunction=()=>{ //toggling function for visibility of password - setVisible(isVisible?false:true) + const togglePasswordFunction = () => { + setVisible(!isVisible); }; - const handleLogin = () => { let emailWarning = ""; @@ -57,12 +52,21 @@ const Login = () => { console.log("Login Failed"); }; + useEffect(() => { + const body = document.body; + if (isDarkMode) { + body.classList.add("dark-mode"); + } else { + body.classList.remove("dark-mode"); + } + }, [isDarkMode]); + return (
-
+

Login

-
+
{ }} /> {warnings.email &&

{warnings.email}

} - - { - setPassword(e.target.value); - setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" })); - }} - onBlur={(e) => { - if (!e.target.value) { - setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" })); - } - }} - /> - {eye}{" "} +
+ { + setPassword(e.target.value); + setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" })); + }} + onBlur={(e) => { + if (!e.target.value) { + setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" })); + } + }} + /> + + + +
{warnings.password &&

{warnings.password}

}

- Forgot your password? Reset it here -

+ Forgot your password? Reset it here +

Don't have an account? Sign up

- +
+ +
); }; -export default Login; +export default Login; \ No newline at end of file diff --git a/src/Pages/Blogs.jsx b/src/Pages/Blogs.jsx index 059cb21..5ca811d 100644 --- a/src/Pages/Blogs.jsx +++ b/src/Pages/Blogs.jsx @@ -122,13 +122,13 @@ const BlogsWrapper = styled.div` max-width: 1200px; margin: 0 auto; line-height: 1.6; - background-color: #e3f2fd; + h1 { font-size: 2.5rem; margin-top: 80px; text-align: center; - color: #212ea0; + } `; diff --git a/src/Pages/Contributors.css b/src/Pages/Contributors.css index 090bf8b..9ecac62 100644 --- a/src/Pages/Contributors.css +++ b/src/Pages/Contributors.css @@ -1,10 +1,15 @@ - .contributors-container { width: 100%; height: 100%; padding-top: 2rem; overflow: hidden; - background-color: rgb(221, 229, 246); /* Change background color to white or any light color */ + +} + +.github-icon { + margin-right: 0.5rem; + vertical-align: middle; + fill: white; /* Adjust color as needed */ } @@ -13,7 +18,6 @@ text-align: center; font-size: 2.5rem; font-weight: 600; - color: #1f2937; margin-bottom: 2rem; text-transform: uppercase; } @@ -23,7 +27,7 @@ flex-wrap: wrap; justify-content: center; gap: 2rem; - margin-bottom: 1rem; + margin-bottom: 4rem; } .contributor-card { @@ -32,8 +36,8 @@ display: flex; flex-direction: column; align-items: center; - background-color: #1f2937; - border: 1px solid #d1d5db; + background-color: rgb(0, 0, 85); + border: 2px solid #6969ff; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 1rem; @@ -55,6 +59,7 @@ border-radius: 50%; object-fit: cover; margin-bottom: 1rem; + border: 2.5px solid #9e9eff; } .contributor-name { diff --git a/src/Pages/Contributors.jsx b/src/Pages/Contributors.jsx index 1156037..e257703 100644 --- a/src/Pages/Contributors.jsx +++ b/src/Pages/Contributors.jsx @@ -37,7 +37,18 @@ function Contributors() { className="contributor-avatar" /> -

{contributor.login}

+

+ + + + {contributor.login} +

Contributions: {contributor.contributions}

diff --git a/src/Pages/Licensing.jsx b/src/Pages/Licensing.jsx index 47fe02b..91b2593 100644 --- a/src/Pages/Licensing.jsx +++ b/src/Pages/Licensing.jsx @@ -8,7 +8,6 @@ const Container = styled.div` margin-top: 60px; padding: 20px; font-family: Arial, sans-serif; - background-color: #f9f9f9; border-radius: 5px; `; diff --git a/src/Pages/feedback.css b/src/Pages/feedback.css index f1dd362..ea2ee3d 100644 --- a/src/Pages/feedback.css +++ b/src/Pages/feedback.css @@ -13,12 +13,12 @@ align-items: center; justify-content: center; padding: 20px; - background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 100%; max-width: 600px; box-sizing: border-box; + margin-top: 55px; } .feedback-form h2 { @@ -29,7 +29,7 @@ } .feedback-form p { - color: #666; + font-size: 16px; margin-bottom: 20px; text-align: center; @@ -58,7 +58,7 @@ .feedback-form label { font-size: 14px; margin-bottom: 5px; - color: #333; + } .feedback-form input[type="text"],