From 0c7239d7a8dfb15475ad150e4e950811284e811c Mon Sep 17 00:00:00 2001 From: pradeepkumar Date: Sun, 11 Jan 2026 22:09:41 +0530 Subject: [PATCH] main layout --- public/assets/notification-icon.svg | 3 + public/assets/profile-icon.svg | 4 + src/app/(agent)/agent/dashboard/page.tsx | 618 +++++++++++++++----- src/app/(agent)/layout.tsx | 121 +--- src/app/(user)/layout.tsx | 8 +- src/app/(user)/user/dashboard/page.tsx | 115 ---- src/app/(user)/user/userprofile/page.tsx | 19 + src/app/globals.css | 93 ++- src/app/page.tsx | 4 +- src/components/home/FeaturedAgents.tsx | 68 +++ src/components/home/FeaturesSection.tsx | 78 +++ src/components/home/HeroSection.tsx | 153 +++++ src/components/home/TestimonialsSection.tsx | 105 ++++ src/components/home/TopProfessionals.tsx | 169 ++++++ src/components/layout/AgentHeader.tsx | 131 +++++ src/components/layout/Footer.tsx | 220 +++++++ src/components/layout/Header.tsx | 82 +++ src/components/ui/AgentCard.tsx | 104 ++++ src/components/ui/Button.tsx | 40 ++ src/components/ui/Input.tsx | 29 + src/components/ui/Select.tsx | 43 ++ src/middleware.ts | 9 +- 22 files changed, 1847 insertions(+), 369 deletions(-) create mode 100644 public/assets/notification-icon.svg create mode 100644 public/assets/profile-icon.svg delete mode 100644 src/app/(user)/user/dashboard/page.tsx create mode 100644 src/app/(user)/user/userprofile/page.tsx create mode 100644 src/components/home/FeaturedAgents.tsx create mode 100644 src/components/home/FeaturesSection.tsx create mode 100644 src/components/home/HeroSection.tsx create mode 100644 src/components/home/TestimonialsSection.tsx create mode 100644 src/components/home/TopProfessionals.tsx create mode 100644 src/components/layout/AgentHeader.tsx create mode 100644 src/components/layout/Footer.tsx create mode 100644 src/components/layout/Header.tsx create mode 100644 src/components/ui/AgentCard.tsx create mode 100644 src/components/ui/Button.tsx create mode 100644 src/components/ui/Input.tsx create mode 100644 src/components/ui/Select.tsx diff --git a/public/assets/notification-icon.svg b/public/assets/notification-icon.svg new file mode 100644 index 0000000..a2defd7 --- /dev/null +++ b/public/assets/notification-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/profile-icon.svg b/public/assets/profile-icon.svg new file mode 100644 index 0000000..e1b81ae --- /dev/null +++ b/public/assets/profile-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx index 40ce30d..56723e6 100644 --- a/src/app/(agent)/agent/dashboard/page.tsx +++ b/src/app/(agent)/agent/dashboard/page.tsx @@ -1,145 +1,501 @@ 'use client'; import { useSession } from 'next-auth/react'; +import Image from 'next/image'; +import { useState } from 'react'; + +// Mock agent data - in production, this would come from API +const agentData = { + name: 'Brian Neeland', + isVerified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian brings eight years of hands-on experience helping clients confidently buy, sell, and invest in real estate. He combines strong analytical skills with deep market knowledge to identify the right opportunities and guide clients through every step of the process. With a data-driven approach and clear communication, Brian ensures smooth transactions and informed decisions tailored to each client\'s goals.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural', 'FHA', 'Conventional', 'USDA', 'Retirement'], + email: 'brian@gmail.com', + phone: '+91*******7493', + profileImage: '/assets/agent-placeholder.jpg', + experience: { + years: '10+ years', + contracts: '10+ Contracts', + licensingAreas: ['Colorado Springs', 'Monument', 'Falcon', 'Castle Rock', 'Fountain', 'Momentum'], + expertiseYears: [ + { area: 'Colorado', years: '10 yrs' }, + { area: 'Falcon', years: '10 yrs' }, + { area: 'Colorado', years: '10 yrs' }, + { area: 'Colorado', years: '10 yrs' }, + ], + certifications: [ + { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' }, + { name: 'Certified Residential Specialist (CRS)', org: 'RESIDENTIAL REAL ESTATE COUNCIL' }, + ], + }, + availability: { + type: 'Full-time', + days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], + }, + preferredWorkEnvironment: 'Preferred work environment includes on-site property visits, in-depth market research, client consultations, property tours, and active involvement in negotiations to ensure the best outcomes', + testimonialHighlight: "The most amazing experience I've had as a real estate professional is helping a family secure their dream home and seeing their happiness when they received the keys.", + specialization: { + types: ['Buyers', 'Sellers', 'First time Buyers', 'First time Sellers', 'Divorce'], + loanTypes: ['Conventional', 'FHA', 'VA', 'USDA'], + propertyTypes: ['SFR', 'Town home', 'Rural', 'Luxury', 'Condo'], + hobbies: ['Boating', 'Horses', 'RV', 'Automotive', 'Aviation'], + pricePoints: ['Under $100K', '$100K – $300K', '$300K – $500K', '$500K – $1M', '$1M and above'], + }, + testimonials: [ + { + id: 1, + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.', + author: 'Kennedy Kenney', + role: 'Chief Operations Officer', + rating: 5, + }, + { + id: 2, + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.', + author: 'Kennedy Kenney', + role: 'Chief Operations Officer', + rating: 5, + }, + { + id: 3, + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo ligula eget dolor. Sed dignissim, nisleget tincidunt vulputate, lacus justo bibendum ipsum, vitae tempus risus lorem at nunc.', + author: 'Kennedy Kenney', + role: 'Chief Operations Officer', + rating: 5, + }, + ], +}; + +// Star Rating Component +function StarRating({ rating }: { rating: number }) { + return ( +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ ); +} + +// Tag Component +function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) { + return ( + + {children} + + ); +} + +// Specialization Card Component +function SpecializationCard({ + title, + items, + icon, +}: { + title: string; + items: string[]; + icon: React.ReactNode; +}) { + return ( +
+
{icon}
+

{title}

+
+ {items.map((item, idx) => ( +

+ {item} +

+ ))} +
+ +
+ ); +} + +// Info Card Component +function InfoCard({ + title, + content, + icon, +}: { + title: string; + content: React.ReactNode; + icon: React.ReactNode; +}) { + return ( +
+
{icon}
+ {title &&

{title}

} +
{content}
+
+ ); +} export default function AgentDashboard() { const { data: session } = useSession(); return (
- {/* Welcome Section */} -
-

- Welcome back, {session?.user?.name?.split(' ')[0] || 'Agent'}! -

-

- Here's an overview of your real estate business today. + {/* Main Profile Section with Left Sidebar */} +

+ {/* Left Sidebar - Status & Contact */} +
+ {/* Profile Image */} +
+
+
+ + + +
+
+ +
+ + {/* Status Buttons */} +
+
+
+ + Available. +
+ +
+
+
+ + Unavailable. +
+ +
+
+ + {/* Contact Info */} +
+
+ Email: + *****brian@gmail.com +
+
+ Ph.No: + {agentData.phone} + +
+
+
+ + {/* Right Content - Profile Info */} +
+ {/* Profile Header Card */} +
+ {/* Name and Actions Row */} +
+
+ {/* Name and Verification */} +
+

+ {agentData.name.split(' ')[0]}{' '} + {agentData.name.split(' ')[1]} +

+ {agentData.isVerified && ( + + (Verified Expert) + + + + + )} + +
+ + {/* Title */} +

{agentData.title}

+ + {/* Location and Member Since */} +
+ + + + + + {agentData.location} + + + + + + Member Since {agentData.memberSince} + +
+
+ + {/* Action Buttons */} +
+ + +
+
+ + {/* Bio */} +

{agentData.bio}

+ + {/* Expertise Tags */} +
+

Expertise:

+
+ {agentData.expertise.map((tag, idx) => ( + {tag} + ))} +
+
+
+
+
+ + {/* Experience Section */} +
+

Experience

+
+ {/* Left Column */} +
+
+

Years in Experience

+
    +
  • {agentData.experience.years}
    • +
+
+
+

Number of contract coised

+
    +
  • {agentData.experience.contracts}
    • +
+
+
+

Licensing & Areas

+
+ {agentData.experience.licensingAreas.slice(0, 5).map((area, idx) => ( + + {area} + + ))} + {agentData.experience.licensingAreas.length > 5 && ( + +{agentData.experience.licensingAreas.length - 5} More + )} +
+
+
+ + {/* Divider */} +
+ + {/* Right Column */} +
+
+

Areas in expertise & Years

+
+ {agentData.experience.expertiseYears.slice(0, 3).map((item, idx) => ( + + {item.area} – {item.years} + + ))} + {agentData.experience.expertiseYears.length > 3 && ( + +{agentData.experience.expertiseYears.length - 3}More + )} +
+
+
+

Certifications

+
    + {agentData.experience.certifications.map((cert, idx) => ( +
  • + • {cert.name} +

    {cert.org}

    +
    • + ))} +
+
+
+
+
+ + {/* Info Cards Section */} +
+ + + + } + content={ +
+

{agentData.availability.type}

+
+ {agentData.availability.days.map((day) => ( +

{day}

+ ))} +
+
+ } + /> + + + + + } + content={

{agentData.preferredWorkEnvironment}

} + /> + + + + } + content={

“{agentData.testimonialHighlight}”

} + /> +
+ + {/* Specialization Section - Light Gray Background */} +
+
+

Specialization

+

Area Of Expertise and Focus

+
+
+ + + + } + /> + + + + } + /> + + + + + } + /> +
+
+ + + + } + /> + + + + } + /> +
+
+ + {/* Testimonials Section */} +
+

Testimonials

+

+ Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.

-
- - {/* Stats Grid */} -
-
-
-
- - - +
+ {agentData.testimonials.map((testimonial) => ( +
+
+
+ “ +
+

I have been working with Lorem .

+
+

{testimonial.text}

+
+
+ + + +
+
+ +

{testimonial.author}

+

{testimonial.role}

+
+
-
-

12

-

Active Listings

-
- -
-
-
- - - -
-
-

48

-

Total Clients

-
- -
-
-
- - - -
-
-

5

-

Upcoming Appointments

-
- -
-
-
- - - -
-
-

8

-

Unread Messages

-
-
- - {/* Quick Actions */} -
-

Quick Actions

-
- - - - - -
-
- - {/* Recent Activity */} -
-

Recent Activity

-
-
-
- - - -
-
-

New inquiry for 123 Main Street

-

2 hours ago

-
-
- -
-
- - - -
-
-

Appointment scheduled with John Doe

-

5 hours ago

-
-
- -
-
- - - -
-
-

Property price updated: 456 Oak Avenue

-

Yesterday

-
-
+ ))}
diff --git a/src/app/(agent)/layout.tsx b/src/app/(agent)/layout.tsx index ebdf98f..f51eefd 100644 --- a/src/app/(agent)/layout.tsx +++ b/src/app/(agent)/layout.tsx @@ -1,52 +1,10 @@ 'use client'; -import { useSession, signOut } from 'next-auth/react'; -import { useRouter, usePathname } from 'next/navigation'; +import { useSession } from 'next-auth/react'; +import { useRouter } from 'next/navigation'; import { useEffect } from 'react'; -import Link from 'next/link'; - -const agentNavItems = [ - { href: '/agent/dashboard', label: 'Dashboard', icon: 'home' }, - { href: '/agent/properties', label: 'My Properties', icon: 'building' }, - { href: '/agent/clients', label: 'Clients', icon: 'users' }, - { href: '/agent/appointments', label: 'Appointments', icon: 'calendar' }, - { href: '/agent/messages', label: 'Messages', icon: 'message' }, - { href: '/agent/settings', label: 'Settings', icon: 'settings' }, -]; - -const icons: Record = { - home: ( - - - - ), - building: ( - - - - ), - users: ( - - - - ), - calendar: ( - - - - ), - message: ( - - - - ), - settings: ( - - - - - ), -}; +import { Footer } from '@/components/layout/Footer'; +import { AgentHeader } from '@/components/layout/AgentHeader'; export default function AgentLayout({ children, @@ -55,7 +13,6 @@ export default function AgentLayout({ }) { const { data: session, status } = useSession(); const router = useRouter(); - const pathname = usePathname(); useEffect(() => { if (status === 'loading') return; @@ -68,72 +25,38 @@ export default function AgentLayout({ // Redirect non-agents to user dashboard const userRole = (session.user as any)?.role; if (userRole !== 'AGENT') { - router.replace('/user/dashboard'); + router.replace('/user/userprofile'); } }, [session, status, router]); if (status === 'loading' || !session) { return ( -
+
); } return ( -
- {/* Header */} -
-
-
- - RE-QuestN - -
- - {session?.user?.name || session?.user?.email} - - - Agent - - -
+
+ {/* Main Content Area */} +
+
+ {/* Header Bar */} + + + {/* Page Content */} +
+ {children}
-
+ -
- {/* Sidebar */} - - - {/* Main Content */} -
{children}
-
+ {/* Footer */} +
); } diff --git a/src/app/(user)/layout.tsx b/src/app/(user)/layout.tsx index 6780e06..69e0daf 100644 --- a/src/app/(user)/layout.tsx +++ b/src/app/(user)/layout.tsx @@ -2,11 +2,11 @@ import { useSession, signOut } from 'next-auth/react'; import { useRouter, usePathname } from 'next/navigation'; -import { useEffect } from 'react'; +import { useEffect, ReactElement } from 'react'; import Link from 'next/link'; const userNavItems = [ - { href: '/user/dashboard', label: 'Dashboard', icon: 'home' }, + { href: '/user/userprofile', label: 'Dashboard', icon: 'home' }, { href: '/user/properties', label: 'Browse Properties', icon: 'building' }, { href: '/user/favorites', label: 'Favorites', icon: 'heart' }, { href: '/user/inquiries', label: 'My Inquiries', icon: 'message' }, @@ -14,7 +14,7 @@ const userNavItems = [ { href: '/user/settings', label: 'Settings', icon: 'settings' }, ]; -const icons: Record = { +const icons: Record = { home: ( @@ -86,7 +86,7 @@ export default function UserLayout({
- + RE-QuestN
diff --git a/src/app/(user)/user/dashboard/page.tsx b/src/app/(user)/user/dashboard/page.tsx deleted file mode 100644 index 138318f..0000000 --- a/src/app/(user)/user/dashboard/page.tsx +++ /dev/null @@ -1,115 +0,0 @@ -'use client'; - -import { useSession } from 'next-auth/react'; - -export default function UserDashboard() { - const { data: session } = useSession(); - - return ( -
- {/* Welcome Section */} -
-

- Welcome, {session?.user?.name?.split(' ')[0] || 'User'}! -

-

- Your real estate journey starts here. Explore properties, connect with agents, and find your dream home. -

-
- - {/* Quick Actions */} -
-
-
- - - -
-

Search Properties

-

Find your perfect home from thousands of listings

-
- -
-
- - - -
-

Find Agents

-

Connect with top real estate professionals

-
- -
-
- - - -
-

Saved Favorites

-

View your saved properties and searches

-
-
- - {/* Stats */} -
-
-

0

-

Saved Properties

-
-
-

0

-

Active Inquiries

-
-
-

0

-

Scheduled Tours

-
-
-

0

-

Messages

-
-
- - {/* Featured Properties */} -
-
-

Featured Properties

- -
- -
- {/* Property Card Placeholder */} -
-
- - - -
-

No featured properties yet

- -
-
-
- - {/* Recent Activity */} -
-

Recent Activity

-
-
- - - -
-

No recent activity

-

- Start exploring properties to see your activity here -

-
-
-
- ); -} diff --git a/src/app/(user)/user/userprofile/page.tsx b/src/app/(user)/user/userprofile/page.tsx new file mode 100644 index 0000000..8308d8a --- /dev/null +++ b/src/app/(user)/user/userprofile/page.tsx @@ -0,0 +1,19 @@ +'use client'; + +import { HeroSection } from '@/components/home/HeroSection'; +import { FeaturesSection } from '@/components/home/FeaturesSection'; +import { FeaturedAgents } from '@/components/home/FeaturedAgents'; +import { TopProfessionals } from '@/components/home/TopProfessionals'; +import { TestimonialsSection } from '@/components/home/TestimonialsSection'; + +export default function UserDashboard() { + return ( +
+ + + + + +
+ ); +} diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..a30e025 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,95 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; + /* RE-Quest Design Tokens */ + --color-primary-dark: #00293d; + --color-primary-light: #c4d9d4; + --color-accent-orange: #f5a623; + --color-accent-orange-hover: #e09620; + --color-background: #ffffff; + --color-background-alt: #f5f9f8; + --color-foreground: #171717; + --color-text-gray: #666666; + --color-text-muted: #9ca3af; + --color-border: #e5e7eb; + + /* Spacing */ + --spacing-section: 6rem; + --spacing-section-sm: 4rem; + + /* Border Radius */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 1rem; + --radius-xl: 1.5rem; + --radius-2xl: 2rem; + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } @theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); + --color-background: var(--color-background); + --color-foreground: var(--color-foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; +/* Disable dark mode for consistent branding */ +body { + background: var(--color-background); + color: var(--color-foreground); + font-family: Arial, Helvetica, sans-serif; +} + +/* Custom utilities */ +.section-padding { + padding-top: var(--spacing-section-sm); + padding-bottom: var(--spacing-section-sm); +} + +@media (min-width: 768px) { + .section-padding { + padding-top: var(--spacing-section); + padding-bottom: var(--spacing-section); } } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +/* Gradient backgrounds */ +.gradient-hero { + background: linear-gradient(to bottom, #e8f0ee, #f5f9f8); +} + +/* Card hover effects */ +.card-hover { + transition: all 0.3s ease; +} + +.card-hover:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-xl); +} + +/* Focus states */ +.focus-ring { + outline: none; +} + +.focus-ring:focus { + box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary-dark); +} + +/* Smooth scrolling */ +html { + scroll-behavior: smooth; +} + +/* Selection styling */ +::selection { + background-color: var(--color-primary-light); + color: var(--color-primary-dark); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 960ec61..8ad8a5e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -22,7 +22,7 @@ export default function Home() { if (userRole === 'AGENT') { router.replace('/agent/dashboard'); } else { - router.replace('/user/dashboard'); + router.replace('/user/userprofile'); } }, [session, status, router]); @@ -32,7 +32,7 @@ export default function Home() {
RE-QuestN
diff --git a/src/components/home/FeaturedAgents.tsx b/src/components/home/FeaturedAgents.tsx new file mode 100644 index 0000000..6b1c182 --- /dev/null +++ b/src/components/home/FeaturedAgents.tsx @@ -0,0 +1,68 @@ +'use client'; + +import { AgentCard } from '../ui/AgentCard'; + +// Sample featured agents data +const featuredAgents = [ + { + id: '1', + name: 'Andrew Collins', + title: 'Rental & Investment Consultant', + location: 'New York', + rating: 4.8, + reviewCount: 124, + experience: '8+ years in the real estate industry', + expertise: ['Residential', 'Commercial', 'Investment'], + imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '2', + name: 'Dempsi', + title: 'Real Estate & Investment Consultant', + location: 'Atlanta', + rating: 4.9, + reviewCount: 98, + experience: '5+ years in the real estate industry', + expertise: ['Luxury Homes', 'First-time Buyers'], + imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '3', + name: 'Daniel', + title: 'Rental & Investment Consultant', + location: 'San Diego', + rating: 4.7, + reviewCount: 156, + experience: '7 years in the real estate industry', + expertise: ['Property Management', 'Rentals'], + imageUrl: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop', + isVerified: true, + }, +]; + +export function FeaturedAgents() { + return ( +
+
+
+ {featuredAgents.map((agent) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/home/FeaturesSection.tsx b/src/components/home/FeaturesSection.tsx new file mode 100644 index 0000000..f147ac2 --- /dev/null +++ b/src/components/home/FeaturesSection.tsx @@ -0,0 +1,78 @@ +'use client'; + +const features = [ + { + icon: ( + + + + ), + title: 'Hire Quickly', + description: 'Connect with experienced local real estate agents who match your needs and preferences. Get answers quickly and move forward on your property decisions.', + }, + { + icon: ( + + + + ), + title: 'Verified Agents', + description: 'All agents are carefully vetted and background checked to ensure that you work with professionals who meet quality and reliability standards.', + }, + { + icon: ( + + + + ), + title: 'Top Rated', + description: 'Find highly rated agents based on positive client feedback. Their credentials and contributions have made them standout performers in the industry.', + }, + { + icon: ( + + + + ), + title: 'Trusted by Thousands', + description: 'Thousands of buyers, sellers, and investors have relied on our platform. Our professionals help people navigate property tax-free gift exchanges.', + }, +]; + +export function FeaturesSection() { + return ( +
+
+ {/* Section Header */} +
+

+ Find Trusted Real Estate Professionals On Demand +

+

+ Quickly connect with the right agents exactly when you need them. +

+
+ + {/* Features Grid */} +
+ {features.map((feature, index) => ( +
+
+ {feature.icon} +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx new file mode 100644 index 0000000..6d7ad1f --- /dev/null +++ b/src/components/home/HeroSection.tsx @@ -0,0 +1,153 @@ +'use client'; + +import { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { Button } from '../ui/Button'; + +const propertyTypes = [ + { value: 'residential', label: 'Residential' }, + { value: 'commercial', label: 'Commercial' }, + { value: 'luxury', label: 'Luxury Homes' }, + { value: 'rentals', label: 'Rentals' }, +]; + +const categories = [ + { value: 'buying', label: 'Buying Agent' }, + { value: 'selling', label: 'Selling Agent' }, + { value: 'investment', label: 'Investment' }, + { value: 'property-management', label: 'Property Management' }, +]; + +export function HeroSection() { + const router = useRouter(); + const [searchParams, setSearchParams] = useState({ + type: '', + name: '', + location: '', + category: '', + }); + + const handleSearch = () => { + const params = new URLSearchParams(); + if (searchParams.type) params.set('type', searchParams.type); + if (searchParams.name) params.set('name', searchParams.name); + if (searchParams.location) params.set('location', searchParams.location); + if (searchParams.category) params.set('category', searchParams.category); + router.push(`/agents?${params.toString()}`); + }; + + return ( +
+ {/* Background Pattern */} +
+ + {/* City Skyline Pattern */} + + + + + + + + + + + +
+ +
+ {/* Headline */} +
+

+ “Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.” +

+

+ Discover verified, top-rated real estate professionals +

+
+ + {/* Search Form */} +
+
+ {/* Type Select */} +
+ + +
+ + {/* Name Input */} +
+ + setSearchParams({ ...searchParams, name: e.target.value })} + className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all" + /> +
+ + {/* Location Input */} +
+ + setSearchParams({ ...searchParams, location: e.target.value })} + className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#00293d] focus:ring-2 focus:ring-[#00293d]/20 outline-none transition-all" + /> +
+ + {/* Category Select */} +
+ + +
+
+ + {/* Quick Links */} +
+ + | + +
+ + {/* Search Button */} +
+ +
+ + {/* Helper Text */} +

+ Connect with trusted local agents to explore homes, compare options, and make smarter decisions. +

+
+
+
+ ); +} diff --git a/src/components/home/TestimonialsSection.tsx b/src/components/home/TestimonialsSection.tsx new file mode 100644 index 0000000..1803869 --- /dev/null +++ b/src/components/home/TestimonialsSection.tsx @@ -0,0 +1,105 @@ +'use client'; + +const testimonials = [ + { + id: '1', + rating: 5, + title: 'I have been working with Lorem...', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.', + author: 'Caren Robert', + role: 'Chief Operations Officer', + }, + { + id: '2', + rating: 5, + title: 'I have been working with Lorem...', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.', + author: 'Caren Robert', + role: 'Chief Operations Officer', + }, + { + id: '3', + rating: 5, + title: 'I have been working with Lorem...', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in nulla lorem. Fusce dui diam, auctor nec ligula vel. Congue pharetra leo. Praesent scelerisque diam, sed lacinia mauris commodo in. Fusce dui diam, auctor nec.', + author: 'Caren Robert', + role: 'Chief Operations Officer', + }, +]; + +function StarRating({ rating }: { rating: number }) { + return ( +
+ {[...Array(5)].map((_, i) => ( + + + + ))} +
+ ); +} + +export function TestimonialsSection() { + return ( +
+
+ {/* Section Header */} +
+

+ Our Clients' Trust Is Our Foundation +

+

+ We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction. +

+

+ Clients rate our real estate services an average of 4.8 on average, based on recent client reviews. +

+
+ + {/* Rating Summary */} +
+
+ 4.8 / 5 Stars +
+
+ 1,200+ Happy Clients +
+
+ + {/* Testimonials Grid */} +
+ {testimonials.map((testimonial) => ( +
+ {/* Rating */} +
+ +
+ + {/* Title */} +

{testimonial.title}

+ + {/* Content */} +

+ {testimonial.content} +

+ + {/* Author */} +
+

{testimonial.author}

+

{testimonial.role}

+
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/home/TopProfessionals.tsx b/src/components/home/TopProfessionals.tsx new file mode 100644 index 0000000..3e0c152 --- /dev/null +++ b/src/components/home/TopProfessionals.tsx @@ -0,0 +1,169 @@ +'use client'; + +import { useState } from 'react'; +import Link from 'next/link'; +import { AgentCard } from '../ui/AgentCard'; +import { Button } from '../ui/Button'; + +// Sample agents data for tabs +const agentsData = [ + { + id: '1', + name: 'Arjun Mehta', + title: 'Professional/General Agent', + location: 'San Francisco, CA', + rating: 4.9, + reviewCount: 87, + experience: '6+ years in the real estate industry', + expertise: ['Residential', 'Luxury', 'Commercial'], + imageUrl: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '2', + name: 'Arjun Mehta', + title: 'Top-tier Real Agent', + location: 'San Francisco, CA', + rating: 4.8, + reviewCount: 65, + experience: '8+ years in the real estate industry', + expertise: ['Investment', 'Commercial', 'Property Management'], + imageUrl: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '3', + name: 'Arjun Mehta', + title: 'Verified Real Agent', + location: 'San Francisco, CA', + rating: 4.7, + reviewCount: 42, + experience: '6+ years in the real estate industry', + expertise: ['Residential', 'First-time Buyers', 'Rentals'], + imageUrl: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=400&h=400&fit=crop', + isVerified: true, + }, +]; + +const lendersData = [ + { + id: '4', + name: 'Sarah Johnson', + title: 'Mortgage Specialist', + location: 'Los Angeles, CA', + rating: 4.9, + reviewCount: 112, + experience: '10+ years in mortgage lending', + expertise: ['FHA Loans', 'Conventional', 'VA Loans'], + imageUrl: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '5', + name: 'Michael Chen', + title: 'Senior Loan Officer', + location: 'Seattle, WA', + rating: 4.8, + reviewCount: 89, + experience: '7+ years in lending', + expertise: ['Jumbo Loans', 'Refinancing', 'Investment'], + imageUrl: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop', + isVerified: true, + }, + { + id: '6', + name: 'Emily Davis', + title: 'Home Loan Advisor', + location: 'Austin, TX', + rating: 4.7, + reviewCount: 76, + experience: '5+ years in mortgage industry', + expertise: ['First-time Buyers', 'FHA', 'USDA Loans'], + imageUrl: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop', + isVerified: true, + }, +]; + +export function TopProfessionals() { + const [activeTab, setActiveTab] = useState<'agents' | 'lenders'>('agents'); + const displayData = activeTab === 'agents' ? agentsData : lendersData; + + return ( +
+
+ {/* Section Header */} +
+

+ “Meet top real estate professionals” +

+
+ + {/* Tabs */} +
+ + +
+ + {/* Cards Grid */} +
+ {displayData.map((professional) => ( + + ))} + + {/* Browse Experts CTA Card */} +
+

+ Discover 6,000+ Top Real Estate Agents in Our Network +

+ + + +
+
+ + {/* Pagination Dots */} +
+ {[0, 1, 2, 3].map((dot) => ( +
+
+
+ ); +} diff --git a/src/components/layout/AgentHeader.tsx b/src/components/layout/AgentHeader.tsx new file mode 100644 index 0000000..4696f47 --- /dev/null +++ b/src/components/layout/AgentHeader.tsx @@ -0,0 +1,131 @@ +'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 ( +
+
+ {/* Logo */} + + RE-QuestN + + + {/* Navigation */} + + + {/* Right Side Icons */} +
+ {/* Notification Bell */} + + + {/* Profile Icon with Dropdown */} +
+ + + {/* Profile Dropdown Menu */} + {showProfileMenu && ( +
+
+

+ {userName || 'Agent'} +

+

{userEmail}

+
+ setShowProfileMenu(false)} + > + Dashboard + + setShowProfileMenu(false)} + > + Settings + + +
+ )} +
+ + {/* Mobile Menu Button */} + +
+
+
+ ); +} diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx new file mode 100644 index 0000000..3566bac --- /dev/null +++ b/src/components/layout/Footer.tsx @@ -0,0 +1,220 @@ +'use client'; + +import Link from 'next/link'; +import Image from 'next/image'; + +const footerLinks = { + services: { + title: 'Services', + links: [ + { label: 'Neighborhood Guides', href: '/neighborhood-guides' }, + { label: 'Home Loan & EMI Calculator', href: '/calculator' }, + ], + }, + serviceProviders: { + title: 'Service Providers', + links: [ + { label: 'Agent', href: '/agents' }, + { label: 'Lenders', href: '/lenders' }, + ], + }, + resources: { + title: 'Resources', + links: [ + { label: "Buyer's Guide", href: '/buyers-guide' }, + { label: "Seller's Guide", href: '/sellers-guide' }, + { label: 'FAQs', href: '/faq' }, + { label: 'Blogs', href: '/blogs' }, + { label: 'Legal & Documentation Help', href: '/legal-help' }, + ], + }, + aboutContact: { + title: 'About & Contact', + links: [ + { label: 'About Our Agency', href: '/about' }, + { label: 'Our Agents', href: '/agents' }, + { label: 'Testimonials', href: '/testimonials' }, + { label: 'Careers', href: '/careers' }, + { label: 'Contact Us', href: '/contact' }, + { label: 'Privacy Policy', href: '/privacy-policy' }, + { label: 'Terms & Conditions', href: '/terms' }, + ], + }, +}; + +const socialLinks = [ + { + name: 'LinkedIn', + href: '#', + icon: ( + + + + ), + bgColor: 'bg-[#0077b5]', + }, + { + name: 'Instagram', + href: '#', + icon: ( + + + + ), + bgColor: 'bg-gradient-to-br from-[#f09433] via-[#e6683c] to-[#bc1888]', + }, + { + name: 'Facebook', + href: '#', + icon: ( + + + + ), + bgColor: 'bg-[#1877f2]', + }, + { + name: 'Twitter', + href: '#', + icon: ( + + + + ), + bgColor: 'bg-[#1da1f2]', + }, +]; + +export function Footer() { + return ( +
+ {/* Main Footer Content */} +
+
+ {/* Services */} +
+

+ {footerLinks.services.title} +

+
    + {footerLinks.services.links.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Service Providers */} +
+

+ {footerLinks.serviceProviders.title} +

+
    + {footerLinks.serviceProviders.links.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Resources */} +
+

+ {footerLinks.resources.title} +

+
    + {footerLinks.resources.links.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* About & Contact */} +
+

+ {footerLinks.aboutContact.title} +

+
    + {footerLinks.aboutContact.links.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+
+
+ + {/* Logo and Social Section */} +
+
+
+ {/* Logo and Tagline */} +
+ RE-Quest + + "Your Trusted Real Estate Partner" + +
+ + {/* Social Links */} +
+ {socialLinks.map((social) => ( + + {social.icon} + + ))} +
+
+
+
+ + {/* Copyright Section */} +
+
+
+

Copyright © 2025 Your Agency Name. All rights reserved.

+ + Privacy Policy + +
+
+
+
+ ); +} diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx new file mode 100644 index 0000000..a27ff11 --- /dev/null +++ b/src/components/layout/Header.tsx @@ -0,0 +1,82 @@ +'use client'; + +import Link from 'next/link'; +import Image from 'next/image'; +import { useSession } from 'next-auth/react'; +import { Button } from '../ui/Button'; + +export function Header() { + const { data: session } = useSession(); + + return ( +
+
+
+ {/* Logo */} + + RE-Quest + + + {/* Navigation */} + + + {/* Right Side */} +
+ {session ? ( + <> + {/* Notification Bell */} + + {/* Profile */} + + + + + + + ) : ( +
+ + + + + + +
+ )} + + {/* Mobile Menu Button */} + +
+
+
+
+ ); +} diff --git a/src/components/ui/AgentCard.tsx b/src/components/ui/AgentCard.tsx new file mode 100644 index 0000000..0171161 --- /dev/null +++ b/src/components/ui/AgentCard.tsx @@ -0,0 +1,104 @@ +'use client'; + +import Image from 'next/image'; + +interface AgentCardProps { + name: string; + title: string; + location: string; + rating?: number; + reviewCount?: number; + experience: string; + expertise: string[]; + imageUrl: string; + isVerified?: boolean; + isFeatured?: boolean; +} + +export function AgentCard({ + name, + title, + location, + rating, + reviewCount, + experience, + expertise, + imageUrl, + isVerified = false, + isFeatured = false, +}: AgentCardProps) { + return ( +
+ {/* Image */} +
+ {name} + {isVerified && ( +
+ + + + Verified Agent +
+ )} +
+ + {/* Content */} +
+

{name}

+

{title}

+ + {/* Location */} +
+ + + + + {location} +
+ + {/* Rating */} + {rating && ( +
+
+ {[...Array(5)].map((_, i) => ( + + + + ))} +
+ {reviewCount && ( + ({reviewCount} reviews) + )} +
+ )} + + {/* Expertise Tags */} +
+ {expertise.slice(0, 3).map((tag) => ( + + {tag} + + ))} +
+ + {/* Experience */} +

+ Experience: {experience} +

+
+
+ ); +} diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx new file mode 100644 index 0000000..6fe4732 --- /dev/null +++ b/src/components/ui/Button.tsx @@ -0,0 +1,40 @@ +'use client'; + +import { ButtonHTMLAttributes, ReactNode } from 'react'; + +interface ButtonProps extends ButtonHTMLAttributes { + variant?: 'primary' | 'secondary' | 'outline'; + size?: 'sm' | 'md' | 'lg'; + children: ReactNode; +} + +export function Button({ + variant = 'primary', + size = 'md', + children, + className = '', + ...props +}: ButtonProps) { + const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center'; + + const variants = { + primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c]', + secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e]', + outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white', + }; + + const sizes = { + sm: 'px-4 py-2 text-sm', + md: 'px-6 py-3 text-base', + lg: 'px-8 py-4 text-lg', + }; + + return ( + + ); +} diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx new file mode 100644 index 0000000..11d7464 --- /dev/null +++ b/src/components/ui/Input.tsx @@ -0,0 +1,29 @@ +'use client'; + +import { InputHTMLAttributes, ReactNode } from 'react'; + +interface InputProps extends InputHTMLAttributes { + label?: string; + icon?: ReactNode; +} + +export function Input({ label, icon, className = '', ...props }: InputProps) { + return ( +
+ {label && ( + + )} +
+ {icon && ( + + {icon} + + )} + +
+
+ ); +} diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx new file mode 100644 index 0000000..98f16a6 --- /dev/null +++ b/src/components/ui/Select.tsx @@ -0,0 +1,43 @@ +'use client'; + +import { SelectHTMLAttributes } from 'react'; + +interface SelectOption { + value: string; + label: string; +} + +interface SelectProps extends SelectHTMLAttributes { + label?: string; + options: SelectOption[]; + placeholder?: string; +} + +export function Select({ + label, + options, + placeholder = 'Select...', + className = '', + ...props +}: SelectProps) { + return ( +
+ {label && ( + + )} + +
+ ); +} diff --git a/src/middleware.ts b/src/middleware.ts index 6b3631d..a5ebad8 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -28,11 +28,8 @@ export default auth((req) => { // Redirect logged-in users away from public routes (login, signup) if (isLoggedIn && isPublicRoute) { - // Redirect to appropriate dashboard based on role - if (userRole === "AGENT") { - return NextResponse.redirect(new URL("/agent/dashboard", nextUrl.origin)); - } - return NextResponse.redirect(new URL("/user/dashboard", nextUrl.origin)); + // Redirect to home page instead of dashboard + return NextResponse.redirect(new URL("/", nextUrl.origin)); } // Redirect non-logged-in users to login page for protected routes @@ -46,7 +43,7 @@ export default auth((req) => { if (isLoggedIn) { // Prevent regular users from accessing agent routes if (isAgentRoute && userRole !== "AGENT") { - return NextResponse.redirect(new URL("/user/dashboard", nextUrl.origin)); + return NextResponse.redirect(new URL("/user/userprofile", nextUrl.origin)); } // Prevent agents from accessing user routes