diff --git a/src/app/(user)/user/profiles/page.tsx b/src/app/(user)/user/profiles/page.tsx new file mode 100644 index 0000000..e7dc15f --- /dev/null +++ b/src/app/(user)/user/profiles/page.tsx @@ -0,0 +1,409 @@ +'use client'; + +import { useState } from 'react'; +import { useSearchParams } from 'next/navigation'; +import Image from 'next/image'; +import Link from 'next/link'; + +// Sample profile data +const profilesData = [ + { + id: '1', + name: 'Brian Noseland', + verified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian has eight years of experience helping clients buy, sell, and invest in properties. He combines strong analytical skills with market insight to deliver smooth, data-driven real estate transactions.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural'], + certifications: ['FHA', 'Conventional', 'USDA'], + matchPercentage: 95, + imageUrl: '/assets/images/professional-1.jpg', + }, + { + id: '2', + name: 'Brian Noseland', + verified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian has eight years of experience helping clients buy, sell, and invest in properties. He combines strong analytical skills with market insight to deliver smooth, data-driven real estate transactions.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo'], + certifications: ['FHA', 'Conventional', 'USDA'], + matchPercentage: 95, + imageUrl: '/assets/images/professional-2.jpg', + }, + { + id: '3', + name: 'Brian Noseland', + verified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian has eight years of experience helping clients buy, sell, and invest in properties. He combines strong analytical skills with market insight to deliver smooth, data-driven real estate transactions.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural'], + certifications: ['FHA', 'Conventional', 'USDA'], + matchPercentage: 95, + imageUrl: '/assets/images/professional-3.jpg', + }, + { + id: '4', + name: 'Brian Noseland', + verified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian has eight years of experience helping clients buy, sell, and invest in properties. He combines strong analytical skills with market insight to deliver smooth, data-driven real estate transactions.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural'], + certifications: ['FHA', 'Conventional', 'USDA'], + matchPercentage: 95, + imageUrl: '/assets/images/professional-1.jpg', + }, + { + id: '5', + name: 'Brian Noseland', + verified: true, + title: 'Licensed Real Estate Agent', + location: 'Colorado', + memberSince: 'March 2020', + bio: 'Brian has eight years of experience helping clients buy, sell, and invest in properties. He combines strong analytical skills with market insight to deliver smooth, data-driven real estate transactions.', + expertise: ['Buyers', 'Sellers', 'Divorce', 'Luxury', 'Retirement', 'Historical', 'condo', 'Rural'], + certifications: ['FHA', 'Conventional', 'USDA'], + matchPercentage: 95, + imageUrl: '/assets/images/professional-2.jpg', + }, +]; + +// Filter options +const clientSpecializations = [ + 'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate' +]; + +const loanTypes = [ + 'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs' +]; + +const propertyTypes = [ + 'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily', + 'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing', + 'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property' +]; + +const pricePoints = [ + 'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above' +]; + +const categoryTabs = [ + { id: 'residential', label: 'Residential' }, + { id: 'analytics', label: 'Analytics' }, + { id: 'commercial', label: 'Commercial' }, + { id: 'property', label: 'Property' }, +]; + +interface FilterSectionProps { + title: string; + options: string[]; + selectedOptions: string[]; + onToggle: (option: string) => void; + showMore?: boolean; +} + +function FilterSection({ title, options, selectedOptions, onToggle, showMore }: FilterSectionProps) { + const [expanded, setExpanded] = useState(false); + const displayOptions = expanded ? options : options.slice(0, 6); + + return ( +
+
+

{title}

+ +
+
+ {displayOptions.map((option) => ( + + ))} +
+ {showMore && options.length > 6 && ( + + )} +
+ ); +} + +interface ProfileCardProps { + profile: typeof profilesData[0]; +} + +function ProfileCard({ profile }: ProfileCardProps) { + const [showFullBio, setShowFullBio] = useState(false); + const truncatedBio = profile.bio.length > 150 ? profile.bio.slice(0, 150) + '...' : profile.bio; + + return ( +
+ {/* Profile Image */} +
+
+ {profile.name} +
+ + + +
+ + {/* Profile Info */} +
+ {/* Header */} +
+
+
+

{profile.name}

+ {profile.verified && ( + + Verified + (Verified Expert) + + )} +
+

{profile.title}

+
+
+ {profile.matchPercentage}% Match +
+
+ + {/* Location & Member Since */} +
+
+ Location + {profile.location} +
+
+ Member Since + Member Since {profile.memberSince} +
+
+ + {/* Bio */} +

+ {showFullBio ? profile.bio : truncatedBio} + {profile.bio.length > 150 && ( + + )} +

+ + {/* Expertise */} +
+

Expertise:

+
+ {profile.expertise.map((tag, index) => ( + + {tag} + + ))} +
+
+ + {/* Certifications */} +
+ {profile.certifications.map((cert, index) => ( + + {cert} + + ))} +
+
+
+ ); +} + +export default function ProfilesPage() { + const searchParams = useSearchParams(); + const [searchQuery, setSearchQuery] = useState(''); + const [activeTab, setActiveTab] = useState('residential'); + const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents'); + const [filters, setFilters] = useState({ + clientSpecialization: [] as string[], + loanType: [] as string[], + propertyType: [] as string[], + pricePoint: [] as string[], + }); + + const toggleFilter = (category: keyof typeof filters, option: string) => { + setFilters(prev => ({ + ...prev, + [category]: prev[category].includes(option) + ? prev[category].filter(o => o !== option) + : [...prev[category], option] + })); + }; + + return ( +
+
+
+ {/* Left Sidebar */} +
+ {/* Listing Type */} +
+

Listing Type

+
+ + +
+
+ + {/* Filters */} +
+
+

Filters

+ +
+ + toggleFilter('clientSpecialization', option)} + /> + + toggleFilter('loanType', option)} + /> + + toggleFilter('propertyType', option)} + showMore + /> + + toggleFilter('pricePoint', option)} + /> +
+
+ + {/* Main Content */} +
+ {/* Search Bar */} +
+
+ setSearchQuery(e.target.value)} + className="w-full h-[44px] px-4 pr-12 rounded-[10px] border border-[#00293d]/20 bg-white font-serif text-[14px] text-[#00293d] placeholder:text-[#00293d]/50 focus:outline-none focus:border-[#e58625]" + /> + +
+
+ + {/* Category Tabs */} +
+ {categoryTabs.map((tab) => ( + + ))} +
+ + {/* Profile Cards */} +
+ {profilesData.map((profile) => ( + + ))} +
+
+
+
+
+ ); +} diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx index 65ba315..90fa434 100644 --- a/src/components/home/HeroSection.tsx +++ b/src/components/home/HeroSection.tsx @@ -34,11 +34,11 @@ export function HeroSection() { 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()}`); + router.push(`/user/profiles?${params.toString()}`); }; const handleSeeAllAgents = () => { - router.push('/agents'); + router.push('/user/profiles'); }; const toggleDropdown = (dropdown: string) => {