From ca4edeb7f7378a4658add2b1bfc1f9392d9275f2 Mon Sep 17 00:00:00 2001 From: sayanChaterjee Date: Wed, 25 Jun 2025 01:53:03 +0530 Subject: [PATCH] [added]/contact-page --- Frontend/package-lock.json | 10 + Frontend/package.json | 1 + Frontend/src/App.tsx | 2 + Frontend/src/pages/Contact.tsx | 358 +++++++++++++++++++++++++++++++++ 4 files changed, 371 insertions(+) create mode 100644 Frontend/src/pages/Contact.tsx diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index deae757..5f3cf11 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -33,6 +33,7 @@ "react": "^19.0.0", "react-day-picker": "^8.10.1", "react-dom": "^19.0.0", + "react-icons": "^5.5.0", "react-redux": "^9.2.0", "react-router-dom": "^7.2.0", "recharts": "^2.15.1", @@ -5416,6 +5417,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", diff --git a/Frontend/package.json b/Frontend/package.json index 1f4ad6f..943d8a9 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -35,6 +35,7 @@ "react": "^19.0.0", "react-day-picker": "^8.10.1", "react-dom": "^19.0.0", + "react-icons": "^5.5.0", "react-redux": "^9.2.0", "react-router-dom": "^7.2.0", "recharts": "^2.15.1", diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx index 15b8bc6..d51f8ec 100644 --- a/Frontend/src/App.tsx +++ b/Frontend/src/App.tsx @@ -15,6 +15,7 @@ import { AuthProvider } from "./context/AuthContext"; import ProtectedRoute from "./components/ProtectedRoute"; import Dashboard from "./pages/Brand/Dashboard"; import BasicDetails from "./pages/BasicDetails"; +import Contact from "./pages/Contact"; function App() { return ( @@ -23,6 +24,7 @@ function App() { {/* Public Routes */} } /> + } /> } /> } /> } /> diff --git a/Frontend/src/pages/Contact.tsx b/Frontend/src/pages/Contact.tsx new file mode 100644 index 0000000..2a12934 --- /dev/null +++ b/Frontend/src/pages/Contact.tsx @@ -0,0 +1,358 @@ +import React, { useState, useRef, useEffect } from "react"; +import { + Github, + MessageCircle, + Twitter, + Linkedin, + Users, + Send, + ChevronDown, + Star, +} from "lucide-react"; +import { CiChat1 } from "react-icons/ci"; +interface SocialLink { + name: string; + description: string; + icon: React.ReactNode; + href: string; + bgColor: string; + hoverColor: string; +} + +const InPactCommunity: React.FC = () => { + const [formData, setFormData] = useState({ + name: "", + email: "", + messageType: "Praise & Thanks", + message: "", + }); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const dropdownRef = useRef(null); + + const messageTypes = [ + "Praise & Thanks", + "Feature Request", + "Bug Report", + "General Feedback", + "Partnership Inquiry", + ]; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsDropdownOpen(false); + } + }; + + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + + const socialLinks: SocialLink[] = [ + { + name: "GitHub", + description: "View source code", + icon: , + href: "https://github.com/inpact-community", + bgColor: "bg-gray-900", + hoverColor: "hover:bg-gray-800", + }, + { + name: "Discord", + description: "Join community", + icon: , + href: "https://discord.gg/inpact", + bgColor: "bg-indigo-600", + hoverColor: "hover:bg-indigo-700", + }, + { + name: "Twitter", + description: "Latest updates", + icon: , + href: "https://twitter.com/inpact", + bgColor: "bg-blue-500", + hoverColor: "hover:bg-blue-600", + }, + { + name: "LinkedIn", + description: "Professional updates", + icon: , + href: "https://linkedin.com/company/inpact", + bgColor: "bg-blue-700", + hoverColor: "hover:bg-blue-800", + }, + ]; + + const handleLinkClick = (href: string, name: string) => { + console.log(`Clicked ${name} link: ${href}`); + window.open(href, "_blank", "noopener,noreferrer"); + }; + + const handleInputChange = ( + e: React.ChangeEvent + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleMessageTypeSelect = (type: string) => { + setFormData((prev) => ({ + ...prev, + messageType: type, + })); + setIsDropdownOpen(false); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Form submitted:", formData); + setFormData({ + name: "", + email: "", + messageType: "Praise & Thanks", + message: "", + }); + alert( + "Thank you for your feedback! Your message has been sent to our Discord community." + ); + }; + + return ( +
+
+
+
+
+ + Open Source + +
+ + Community Driven + +
+
+ +
+

+ Join the{" "} + + inPact + {" "} + Community +

+ +

+ Connect with creators, brands, and developers building the future of + AI-powered influencer marketing. Your ideas shape our platform. +

+
+
+
+
+ +

+ Connect With Us +

+
+ +
+ {socialLinks.map((link, index) => ( + + ))} +
+
+ +
+
+

+ Share Your Thoughts +

+

+ Your feedback helps us improve and build better features for + everyone +

+
+ +
+
+
+ +

+ Send us a message +

+
+

+ Messages are sent directly to our Discord community for quick + response +

+
+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+ + + {isDropdownOpen && ( +
+ {messageTypes.map((type) => ( + + ))} +
+ )} +
+
+ +
+ +