feat: Implement a common header component to replace AgentHeader and introduce a new contact page with associated assets.
This commit is contained in:
pradeepkumar
4
public/assets/icons/email-icon.svg
Normal file
4
public/assets/icons/email-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke="#00293D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M22 6L12 13L2 6" stroke="#00293D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 397 B |
4
public/assets/icons/email-orange-icon.svg
Normal file
4
public/assets/icons/email-orange-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" fill="#E58625"/>
|
||||||
|
<path d="M22 6L12 13L2 6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 328 B |
4
public/assets/icons/location-orange-icon.svg
Normal file
4
public/assets/icons/location-orange-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" fill="#E58625"/>
|
||||||
|
<circle cx="12" cy="10" r="3" fill="#fff"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 363 B |
4
public/assets/icons/notification-bell-icon.svg
Normal file
4
public/assets/icons/notification-bell-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke="#E58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke="#E58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 665 B |
3
public/assets/icons/phone-icon.svg
Normal file
3
public/assets/icons/phone-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4742 21.8325 20.7294C21.7209 20.9845 21.5573 21.2136 21.3521 21.4019C21.1468 21.5901 20.9046 21.7335 20.6407 21.8227C20.3769 21.9119 20.0974 21.9451 19.82 21.92C16.7428 21.5856 13.787 20.5341 11.19 18.85C8.77383 17.3147 6.72533 15.2662 5.19 12.85C3.49998 10.2412 2.44824 7.27099 2.12 4.18C2.09501 3.90347 2.12787 3.62476 2.2165 3.36162C2.30513 3.09849 2.44757 2.85669 2.63477 2.65162C2.82196 2.44655 3.04981 2.28271 3.30379 2.17052C3.55778 2.05833 3.83234 2.00026 4.11 2H7.11C7.59531 1.99522 8.06579 2.16708 8.43376 2.48353C8.80173 2.79999 9.04207 3.23945 9.11 3.72C9.23662 4.68007 9.47145 5.62273 9.81 6.53C9.94454 6.88792 9.97366 7.27691 9.89391 7.65088C9.81415 8.02485 9.62886 8.36811 9.36 8.64L8.09 9.91C9.51356 12.4135 11.5865 14.4864 14.09 15.91L15.36 14.64C15.6319 14.3711 15.9752 14.1858 16.3491 14.1061C16.7231 14.0263 17.1121 14.0555 17.47 14.19C18.3773 14.5286 19.3199 14.7634 20.28 14.89C20.7658 14.9585 21.2094 15.2032 21.5265 15.5775C21.8437 15.9518 22.0122 16.4296 22 16.92Z" stroke="#00293D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
3
public/assets/icons/phone-orange-icon.svg
Normal file
3
public/assets/icons/phone-orange-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22 16.92V19.92C22.0011 20.1985 21.9441 20.4742 21.8325 20.7294C21.7209 20.9845 21.5573 21.2136 21.3521 21.4019C21.1468 21.5901 20.9046 21.7335 20.6407 21.8227C20.3769 21.9119 20.0974 21.9451 19.82 21.92C16.7428 21.5856 13.787 20.5341 11.19 18.85C8.77383 17.3147 6.72533 15.2662 5.19 12.85C3.49998 10.2412 2.44824 7.27099 2.12 4.18C2.09501 3.90347 2.12787 3.62476 2.2165 3.36162C2.30513 3.09849 2.44757 2.85669 2.63477 2.65162C2.82196 2.44655 3.04981 2.28271 3.30379 2.17052C3.55778 2.05833 3.83234 2.00026 4.11 2H7.11C7.59531 1.99522 8.06579 2.16708 8.43376 2.48353C8.80173 2.79999 9.04207 3.23945 9.11 3.72C9.23662 4.68007 9.47145 5.62273 9.81 6.53C9.94454 6.88792 9.97366 7.27691 9.89391 7.65088C9.81415 8.02485 9.62886 8.36811 9.36 8.64L8.09 9.91C9.51356 12.4135 11.5865 14.4864 14.09 15.91L15.36 14.64C15.6319 14.3711 15.9752 14.1858 16.3491 14.1061C16.7231 14.0263 17.1121 14.0555 17.47 14.19C18.3773 14.5286 19.3199 14.7634 20.28 14.89C20.7658 14.9585 21.2094 15.2032 21.5265 15.5775C21.8437 15.9518 22.0122 16.4296 22 16.92Z" fill="#E58625"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
4
public/assets/icons/profile-icon.svg
Normal file
4
public/assets/icons/profile-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="16" cy="10" r="6" stroke="#00293D" stroke-width="2"/>
|
||||||
|
<path d="M4 28C4 21.3726 9.37258 16 16 16C22.6274 16 28 21.3726 28 28" stroke="#00293D" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 299 B |
BIN
public/assets/images/agent-illustration.png
Normal file
BIN
public/assets/images/agent-illustration.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
public/assets/images/contact-map.jpg
Normal file
BIN
public/assets/images/contact-map.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 MiB |
@@ -4,7 +4,7 @@ import { useSession } from 'next-auth/react';
|
|||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { Footer } from '@/components/layout/Footer';
|
import { Footer } from '@/components/layout/Footer';
|
||||||
import { AgentHeader } from '@/components/layout/AgentHeader';
|
import { CommonHeader } from '@/components/layout/CommonHeader';
|
||||||
|
|
||||||
export default function AgentLayout({
|
export default function AgentLayout({
|
||||||
children,
|
children,
|
||||||
@@ -43,10 +43,7 @@ export default function AgentLayout({
|
|||||||
<main className="flex-1">
|
<main className="flex-1">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||||
{/* Header Bar */}
|
{/* Header Bar */}
|
||||||
<AgentHeader
|
<CommonHeader />
|
||||||
userName={session?.user?.name}
|
|
||||||
userEmail={session?.user?.email}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Page Content */}
|
{/* Page Content */}
|
||||||
<div className="mt-6">
|
<div className="mt-6">
|
||||||
|
|||||||
295
src/app/contact/page.tsx
Normal file
295
src/app/contact/page.tsx
Normal file
@@ -0,0 +1,295 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { CommonHeader } from '@/components/layout/CommonHeader';
|
||||||
|
import { Footer } from '@/components/layout/Footer';
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
message: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
setFormData(prev => ({ ...prev, [name]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// Handle form submission
|
||||||
|
console.log('Form submitted:', formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
setFormData({ name: '', phone: '', email: '', message: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 w-full">
|
||||||
|
<CommonHeader />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 w-full">
|
||||||
|
{/* Contact Section */}
|
||||||
|
<div className="border border-[#00293d]/20 rounded-[15px] p-8 mb-10">
|
||||||
|
{/* Title */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="font-fractul font-bold text-[25px] text-[#00293d] mb-4">
|
||||||
|
Get In Touch
|
||||||
|
</h1>
|
||||||
|
<p className="font-serif text-[14px] text-[#00293d] max-w-[633px] mx-auto">
|
||||||
|
Have a question about a property or need assistance? Fill out the form below and our team will get back to you shortly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col lg:flex-row gap-8">
|
||||||
|
{/* Contact Form */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
{/* Your Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block font-fractul font-medium text-[14px] text-[#00293d] mb-2">
|
||||||
|
Your Name
|
||||||
|
</label>
|
||||||
|
<div className="border border-[#00293d]/10 rounded-[15px] h-[52px] px-4 flex items-center">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Brian Neeland"
|
||||||
|
className="w-full font-fractul text-[14px] text-black placeholder:text-black/50 bg-transparent outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Phone Number */}
|
||||||
|
<div>
|
||||||
|
<label className="block font-fractul font-medium text-[14px] text-[#00293d] mb-2">
|
||||||
|
Phone Number
|
||||||
|
</label>
|
||||||
|
<div className="border border-[#00293d]/10 rounded-[15px] h-[52px] px-4 flex items-center gap-3">
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/phone-icon.svg"
|
||||||
|
alt="Phone"
|
||||||
|
width={22}
|
||||||
|
height={22}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
name="phone"
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="12345678990"
|
||||||
|
className="w-full font-fractul text-[14px] text-black placeholder:text-black/50 bg-transparent outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email Address */}
|
||||||
|
<div>
|
||||||
|
<label className="block font-fractul font-medium text-[14px] text-[#00293d] mb-2">
|
||||||
|
Email Address
|
||||||
|
</label>
|
||||||
|
<div className="border border-[#00293d]/10 rounded-[15px] h-[52px] px-4 flex items-center gap-3">
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/email-icon.svg"
|
||||||
|
alt="Email"
|
||||||
|
width={22}
|
||||||
|
height={22}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="123@gmail.com"
|
||||||
|
className="w-full font-fractul text-[14px] text-black placeholder:text-black/50 bg-transparent outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message */}
|
||||||
|
<div>
|
||||||
|
<label className="block font-fractul font-medium text-[14px] text-[#00293d] mb-2">
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<div className="border border-[#00293d]/10 rounded-[15px] h-[149px] p-4">
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
value={formData.message}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Type your message here..."
|
||||||
|
className="w-full h-full font-fractul text-[14px] text-black placeholder:text-black/50 bg-transparent outline-none resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Buttons */}
|
||||||
|
<div className="flex items-center justify-center gap-4 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleCancel}
|
||||||
|
className="w-[163px] h-[46px] border border-[#00293d]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-[163px] h-[46px] bg-[#e58625] rounded-[15px] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#d47720] transition-colors"
|
||||||
|
>
|
||||||
|
Send Message
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Details Sidebar */}
|
||||||
|
<div className="lg:w-[319px]">
|
||||||
|
<div className="border border-[#00293d]/10 rounded-[20px] overflow-hidden">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="p-4 border-b border-[#00293d]/10">
|
||||||
|
<h2 className="font-fractul font-medium text-[14px] text-[#00293d] text-center">
|
||||||
|
Contact Details
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email Support */}
|
||||||
|
<div className="p-4 border-b border-[#00293d]/10">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/email-orange-icon.svg"
|
||||||
|
alt="Email"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="mt-0.5"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="font-serif font-light text-[14px] text-[#00293d]">
|
||||||
|
Email Support
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[14px] text-[#00293d]">
|
||||||
|
123support@gmail.com
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Phone */}
|
||||||
|
<div className="p-4 border-b border-[#00293d]/10">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/phone-orange-icon.svg"
|
||||||
|
alt="Phone"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="mt-0.5"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="font-serif font-light text-[14px] text-[#00293d]">
|
||||||
|
Phone
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[14px] text-[#00293d]">
|
||||||
|
1234567890
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[10px] text-[#00293d]">
|
||||||
|
Mon-Fri 9am-6pm
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Office */}
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<Image
|
||||||
|
src="/assets/icons/location-orange-icon.svg"
|
||||||
|
alt="Location"
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="mt-0.5"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="font-serif font-light text-[14px] text-[#00293d]">
|
||||||
|
Office
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[14px] text-[#00293d]">
|
||||||
|
123 Market Street
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[14px] text-[#00293d]">
|
||||||
|
New York CA 234737
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map */}
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
<div className="rounded-[20px] overflow-hidden h-[166px] bg-gray-200">
|
||||||
|
<Image
|
||||||
|
src="/assets/images/contact-map.jpg"
|
||||||
|
alt="Office location map"
|
||||||
|
width={260}
|
||||||
|
height={166}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Get Directions Button */}
|
||||||
|
<div className="px-4 pb-4">
|
||||||
|
<button className="w-[117px] h-[35px] border border-[#e58625] rounded-[15px] font-serif text-[14px] text-[#e58625] hover:bg-[#e58625]/10 transition-colors mx-auto block">
|
||||||
|
Get Directions
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* CTA Section - Ready to find an agent */}
|
||||||
|
<div className="max-w-4xl mx-auto border border-[#00293d]/20 rounded-[15px] p-8 lg:p-10 mb-10">
|
||||||
|
<div className="flex flex-col lg:flex-row items-center justify-between gap-6">
|
||||||
|
<div className="lg:max-w-[400px]">
|
||||||
|
<h2 className="font-fractul font-bold text-[24px] lg:text-[28px] text-[#00293d] mb-3">
|
||||||
|
Ready to find an agent?
|
||||||
|
</h2>
|
||||||
|
<p className="font-serif text-[13px] text-[#00293d] mb-5">
|
||||||
|
Discover trusted agents and start your property journey with confidence.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/agents"
|
||||||
|
className="inline-flex items-center gap-2 bg-[#e58625] text-white px-5 py-2.5 rounded-full font-fractul font-medium text-[13px] hover:bg-[#d47720] transition-colors"
|
||||||
|
>
|
||||||
|
Start Your Search
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="w-[140px] lg:w-[160px]">
|
||||||
|
<Image
|
||||||
|
src="/assets/images/agent-illustration.png"
|
||||||
|
alt="Find an agent"
|
||||||
|
width={160}
|
||||||
|
height={160}
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,134 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import Link from 'next/link';
|
|
||||||
import Image from 'next/image';
|
|
||||||
import { signOut } from 'next-auth/react';
|
|
||||||
|
|
||||||
interface AgentHeaderProps {
|
|
||||||
userName?: string | null;
|
|
||||||
userEmail?: string | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const navLinks = [
|
|
||||||
{ label: 'Education', href: '/education' },
|
|
||||||
{ label: 'About Us', href: '/about' },
|
|
||||||
{ label: "FAQ's", href: '/faq' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function AgentHeader({ userName, userEmail }: AgentHeaderProps) {
|
|
||||||
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className="bg-[#648188] rounded-[20px] px-8">
|
|
||||||
<div className="flex justify-between items-center h-[70px]">
|
|
||||||
{/* Logo */}
|
|
||||||
<Link href="/agent/dashboard">
|
|
||||||
<Image
|
|
||||||
src="/assets/logo.svg"
|
|
||||||
alt="RE-QuestN"
|
|
||||||
width={150}
|
|
||||||
height={40}
|
|
||||||
className="h-10 w-auto"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{/* Navigation */}
|
|
||||||
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
|
||||||
{navLinks.map((link) => (
|
|
||||||
<Link
|
|
||||||
key={link.href}
|
|
||||||
href={link.href}
|
|
||||||
className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
|
||||||
>
|
|
||||||
{link.label}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Right Side Icons */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{/* Notification Bell */}
|
|
||||||
<button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
|
|
||||||
<Image
|
|
||||||
src="/assets/notification-icon.svg"
|
|
||||||
alt="Notifications"
|
|
||||||
width={20}
|
|
||||||
height={22}
|
|
||||||
/>
|
|
||||||
{/* Notification Dot */}
|
|
||||||
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Profile Icon with Dropdown */}
|
|
||||||
<div className="relative">
|
|
||||||
<button
|
|
||||||
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
|
||||||
className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src="/assets/profile-icon.svg"
|
|
||||||
alt="Profile"
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Profile Dropdown Menu */}
|
|
||||||
{showProfileMenu && (
|
|
||||||
<div className="absolute right-0 mt-2 w-56 bg-white rounded-[15px] border border-[#00293d]/10 py-3 z-50">
|
|
||||||
<div className="px-4 py-2 border-b border-[#00293d]/10">
|
|
||||||
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
|
|
||||||
{userName || 'Agent'}
|
|
||||||
</p>
|
|
||||||
<p className="font-serif text-[12px] leading-[16px] text-[#00293D]/50">{userEmail}</p>
|
|
||||||
</div>
|
|
||||||
<div className="py-2">
|
|
||||||
<Link
|
|
||||||
href="/agent/dashboard"
|
|
||||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
|
||||||
onClick={() => setShowProfileMenu(false)}
|
|
||||||
>
|
|
||||||
Dashboard
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/agent/settings"
|
|
||||||
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
|
||||||
onClick={() => setShowProfileMenu(false)}
|
|
||||||
>
|
|
||||||
Settings
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
<div className="border-t border-[#00293d]/10 pt-2">
|
|
||||||
<button
|
|
||||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
|
||||||
className="w-full text-left px-4 py-2 font-serif text-[14px] leading-[19px] text-[#e58625] hover:bg-[#00293d]/5 transition-colors"
|
|
||||||
>
|
|
||||||
Sign Out
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Mobile Menu Button */}
|
|
||||||
<button className="md:hidden p-2 hover:opacity-80 transition-opacity">
|
|
||||||
<svg
|
|
||||||
className="w-6 h-6 text-[#00293d]"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M4 6h16M4 12h16M4 18h16"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
156
src/components/layout/CommonHeader.tsx
Normal file
156
src/components/layout/CommonHeader.tsx
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useSession, signOut } from 'next-auth/react';
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ label: 'Education', href: '/education' },
|
||||||
|
{ label: 'About Us', href: '/about' },
|
||||||
|
{ label: "FAQ's", href: '/faq' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function CommonHeader() {
|
||||||
|
const { data: session } = useSession();
|
||||||
|
const [showProfileMenu, setShowProfileMenu] = useState(false);
|
||||||
|
|
||||||
|
const userName = session?.user?.name;
|
||||||
|
const userEmail = session?.user?.email;
|
||||||
|
const userRole = (session?.user as any)?.role;
|
||||||
|
|
||||||
|
// Determine dashboard link based on user role
|
||||||
|
const dashboardLink = userRole === 'AGENT' ? '/agent/dashboard' : '/user/userprofile';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="bg-[#648188] rounded-[20px] px-8">
|
||||||
|
<div className="flex justify-between items-center h-[70px]">
|
||||||
|
{/* Logo */}
|
||||||
|
<Link href="/">
|
||||||
|
<Image
|
||||||
|
src="/assets/logo.svg"
|
||||||
|
alt="RE-QuestN"
|
||||||
|
width={150}
|
||||||
|
height={40}
|
||||||
|
className="h-10 w-auto"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="hidden md:flex items-center gap-8 ml-auto mr-8">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.href}
|
||||||
|
href={link.href}
|
||||||
|
className="font-fractul font-bold text-[20px] leading-[24px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{/* Right Side Icons */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{session ? (
|
||||||
|
<>
|
||||||
|
{/* Notification Bell */}
|
||||||
|
<button className="relative w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity">
|
||||||
|
<Image
|
||||||
|
src="/assets/notification-icon.svg"
|
||||||
|
alt="Notifications"
|
||||||
|
width={20}
|
||||||
|
height={22}
|
||||||
|
/>
|
||||||
|
{/* Notification Dot */}
|
||||||
|
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Profile Icon with Dropdown */}
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowProfileMenu(!showProfileMenu)}
|
||||||
|
className="w-6 h-6 flex items-center justify-center hover:opacity-80 transition-opacity"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/assets/profile-icon.svg"
|
||||||
|
alt="Profile"
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Profile Dropdown Menu */}
|
||||||
|
{showProfileMenu && (
|
||||||
|
<div className="absolute right-0 mt-2 w-56 bg-white rounded-[15px] border border-[#00293d]/10 py-3 z-50">
|
||||||
|
<div className="px-4 py-2 border-b border-[#00293d]/10">
|
||||||
|
<p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
|
||||||
|
{userName || 'User'}
|
||||||
|
</p>
|
||||||
|
<p className="font-serif text-[12px] leading-[16px] text-[#00293D]/50">{userEmail}</p>
|
||||||
|
</div>
|
||||||
|
<div className="py-2">
|
||||||
|
<Link
|
||||||
|
href={dashboardLink}
|
||||||
|
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||||
|
onClick={() => setShowProfileMenu(false)}
|
||||||
|
>
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href={userRole === 'AGENT' ? '/agent/settings' : '/user/settings'}
|
||||||
|
className="block px-4 py-2 font-serif text-[14px] leading-[19px] text-[#00293D] hover:bg-[#00293d]/5 transition-colors"
|
||||||
|
onClick={() => setShowProfileMenu(false)}
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-[#00293d]/10 pt-2">
|
||||||
|
<button
|
||||||
|
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||||
|
className="w-full text-left px-4 py-2 font-serif text-[14px] leading-[19px] text-[#e58625] hover:bg-[#00293d]/5 transition-colors"
|
||||||
|
>
|
||||||
|
Sign Out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="font-fractul font-bold text-[14px] text-[#00293D] hover:text-[#e58625] transition-colors"
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/signup"
|
||||||
|
className="bg-[#e58625] text-[#00293D] px-4 py-2 rounded-[15px] font-fractul font-bold text-[14px] hover:bg-[#d47720] transition-colors"
|
||||||
|
>
|
||||||
|
Sign Up
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<button className="md:hidden p-2 hover:opacity-80 transition-opacity">
|
||||||
|
<svg
|
||||||
|
className="w-6 h-6 text-[#00293d]"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={2}
|
||||||
|
d="M4 6h16M4 12h16M4 18h16"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user