Add Contact Page with Social Links and Message Form

Frontend/package.json

@@ -38,6 +38,7 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.2.0",
     "recharts": "^2.15.1",
+    "sonner": "^2.0.5",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.16",
     "tw-animate-css": "^1.2.4"

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 ContactPage from "./pages/Contact";
 
 function App() {
   return (
@@ -30,6 +31,7 @@ function App() {
           <Route path="/brand/dashboard" element={<Dashboard />} />
           <Route path="/basicDetails/:user" element={<BasicDetails />} />
           <Route path="/creator/messages" element={<MessagesPage />} />
+          <Route path="/contact" element={<ContactPage />} />
 
           {/* Protected Routes*/}
           <Route

Frontend/src/components/FeedbackForm.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Send, MessageSquare, Lightbulb, Bug, Star } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { toast } from 'sonner'
+import axios from 'axios';
+
+
+const FeedbackForm = () => {
+
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        type: '',
+        message: '',
+        role: ''
+    });
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const feedbackTypes = [
+        { value: 'feedback', label: 'General Feedback', icon: MessageSquare, color: 'text-blue-500' },
+        { value: 'suggestion', label: 'Feature Suggestion', icon: Lightbulb, color: 'text-yellow-500' },
+        { value: 'bug', label: 'Bug Report', icon: Bug, color: 'text-red-500' },
+        { value: 'praise', label: 'Praise & Thanks', icon: Star, color: 'text-green-500' }
+    ];
+
+    const rolesTypes = [
+        { value: "creater", label: "Content Creator" },
+        { value: "brand/agency", label: "Brand/Agency" },
+    ]
+
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+
+        try {
+            const res = await axios.post(`https://formspree.io/f/${import.meta.env.VITE_FROMSPEE_ID}`, {
+                name: formData.name,
+                email: formData.email,
+                type: formData.type,
+                message: formData.message,
+                role : formData.role
+            })
+
+            if (res.status === 200) {
+                toast.success('Message sent successfully')
+                setFormData({
+                    name: '',
+                    email: '',
+                    type: '',
+                    message: '',
+                    role: ''
+                })
+            }
+        } catch (error) {
+            toast.error('Error sending message')
+
+        } finally {
+            setIsSubmitting(false);
+        }
+    }
+    return (
+        <div className="space-y-8 mb-10">
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="text-center"
+            >
+                <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
+                    Share <span className='text-purple-600'>Your</span> Thoughts
+                </h2>
+                <p className="text-lg text-gray-600">
+                    Your feedback helps us improve and build better features for everyone
+                </p>
+            </motion.div>
+
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.2 }}
+                className="max-w-2xl mx-auto"
+            >
+                <Card className="border-2 border-purple-100 shadow-xl">
+                    <CardHeader className="bg-gradient-to-r from-purple-50 to-blue-50 rounded-t-lg">
+                        <CardTitle className="text-2xl text-center flex items-center justify-center gap-2">
+                            <MessageSquare className="h-6 w-6 text-purple-600" />
+                            Send us a message
+                        </CardTitle>
+                        <CardDescription className="text-center">
+                            Messages are sent directly to our team for quick response
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="p-6">
+                        <form onSubmit={handleSubmit} className="space-y-6">
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div className="space-y-2">
+                                    <Label htmlFor="name">Name</Label>
+                                    <Input
+                                        id="name"
+                                        placeholder="Your name"
+                                        value={formData.name}
+                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                                        required
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label htmlFor="email">Email</Label>
+                                    <Input
+                                        id="email"
+                                        type="email"
+                                        placeholder="[email protected]"
+                                        value={formData.email}
+                                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                                        required
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="type">Message Type</Label>
+                                <Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select message type" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {feedbackTypes.map((type) => (
+                                            <SelectItem key={type.value} value={type.value}>
+                                                <div className="flex items-center gap-2">
+                                                    <type.icon className={`h-4 w-4 ${type.color}`} />
+                                                    {type.label}
+                                                </div>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="role">I am</Label>
+                                <Select value={formData.role} onValueChange={(value) => setFormData({ ...formData, role: value })}>
+                                    <SelectTrigger>
+                                        <SelectValue placeholder="Select message type" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        {rolesTypes.map((type) => (
+                                            <SelectItem key={type.value} value={type.value}>
+                                                <div className="flex items-center gap-2">
+                                                    {type.label}
+                                                </div>
+                                            </SelectItem>
+                                        ))}
+                                    </SelectContent>
+                                </Select>
+                            </div>
+
+                            <div className="space-y-2">
+                                <Label htmlFor="message">Message</Label>
+                                <Textarea
+                                    id="message"
+                                    placeholder="Tell us what's on your mind..."
+                                    rows={10}
+                                    value={formData.message}
+                                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+                                    required
+                                />
+                            </div>
+
+                            <Button
+                                type="submit"
+                                disabled={isSubmitting}
+                                className="w-full bg-purple-600 hover:bg-purple-700 text-white"
+                            >
+                                {isSubmitting ? 'Sending...' : 'Send Message'}
+                            </Button>
+                        </form>
+                    </CardContent>
+                </Card>
+            </motion.div>
+        </div>
+    );
+};
+
+export default FeedbackForm;

Frontend/src/components/Footer.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+
+
+const Footer = () => {
+    const footerRef = useRef(null);
+    const [isFooterVisible, setIsFooterVisible] = useState(false);
+
+    useEffect(() => {
+
+        const footerObserver = new IntersectionObserver(
+            (entries) => {
+                const [entry] = entries;
+                setIsFooterVisible(entry.isIntersecting);
+            },
+            {
+                root: null,
+                rootMargin: "0px",
+                threshold: 0.1,
+            }
+        );
+
+        if (footerRef.current) {
+            footerObserver.observe(footerRef.current);
+        }
+
+        return () => {
+            if (footerRef.current) {
+                footerObserver.unobserve(footerRef.current);
+            }
+        };
+    }, [])
+
+
+    return (
+       <footer ref={footerRef} className="w-full border-t border-gray-200 bg-gray-50 py-6">
+            <div
+                className={`container px-10 flex flex-col md:flex-row items-center justify-between text-gray-600 transition-all duration-1000 transform ${isFooterVisible
+                    ? "opacity-100 translate-y-0"
+                    : "opacity-0 translate-y-10"
+                    }`}
+            >
+                <p>© 2024 Inpact. All rights reserved.</p>
+                <div className="flex gap-4 mt-4 md:mt-0">
+                    <Link to="/terms" className="hover:underline">
+                        Terms
+                    </Link>
+                    <Link to="/privacy" className="hover:underline">
+                        Privacy
+                    </Link>
+                </div>
+            </div>
+        </footer>
+    )
+}
+
+export default Footer;

Frontend/src/components/TopNav.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import {
+    Rocket,
+    Users,
+} from "lucide-react";
+import { Button } from "../components/ui/button";
+import { MainNav } from "../components/main-nav";
+import { ModeToggle } from "../components/mode-toggle";
+import { UserNav } from "../components/user-nav";
+
+
+const TopNav = () => {
+    return (
+        <header className="fixed top-0 z-50 w-full border-b border-gray-200 bg-white/80 backdrop-blur-lg px-6">
+            <div className="container flex h-16 items-center justify-between">
+                <div className="flex items-center gap-6 md:gap-10">
+                    <Link to="/" className="flex items-center space-x-2">
+                        <Rocket className="h-6 w-6 text-purple-600" />
+                        <span className="font-bold text-xl text-gray-900">Inpact</span>
+                    </Link>
+                    <MainNav />
+                </div>
+                <div className="flex items-center gap-4">
+                    <ModeToggle />
+                    <div className="hidden md:flex gap-2">
+                        <Button variant="ghost">
+                            <Link to="/login" className="text-gray-900">
+                                Login
+                            </Link>
+                        </Button>
+                        <Button className="bg-purple-600 text-white hover:bg-purple-700">
+                            <Link to="/signup">Sign Up</Link>
+                        </Button>
+                    </div>
+                    <UserNav />
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default TopNav;

Frontend/src/main.tsx

@@ -4,10 +4,12 @@ import "./index.css";
 import { Provider } from "react-redux";
 import App from "./App.tsx";
 import store from "./redux/store.ts";
+import { Toaster } from 'sonner'
 
 createRoot(document.getElementById("root")!).render(
   // <StrictMode>
   <Provider store={store}>
+    <Toaster richColors />
     <App />
   </Provider>
   // </StrictMode>,