feat: add new contact page with form and contact details

This commit is contained in:
pradeepkumar
2026-01-19 00:23:46 +05:30
parent 2bca1ff0c0
commit 3ceb3dc866
2 changed files with 139 additions and 138 deletions

View File

@@ -41,40 +41,41 @@ interface SettingsSidebarProps {
export function SettingsSidebar({
profileImage = '/assets/icons/user-placeholder-icon.svg',
name = 'Brain Nooland',
name = 'Brain Neeland',
title = 'Top Real Estate Agent',
}: SettingsSidebarProps) {
const pathname = usePathname();
return (
<div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
{/* Profile Section */}
<div className="p-6 flex flex-col items-center">
<div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
<Image
src={profileImage}
alt={name}
width={80}
height={80}
className="w-full h-full object-cover"
/>
<div className="w-full lg:w-[300px] space-y-4">
{/* Profile Card */}
<div className="bg-white rounded-[15px] border border-[#00293D]/20 p-5">
<div className="flex items-center gap-4">
<div className="w-[70px] h-[70px] rounded-full overflow-hidden border-2 border-[#00293D]/20 flex-shrink-0">
<Image
src={profileImage}
alt={name}
width={70}
height={70}
className="w-full h-full object-cover"
/>
</div>
<div>
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
{name}
</h3>
<p className="font-serif font-normal text-[13px] leading-[17px] text-[#00293D]/60 mt-1">
{title}
</p>
</div>
</div>
<h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
{name}
</h3>
<p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
{title}
</p>
</div>
{/* Divider */}
<div className="w-full h-[1px] bg-[#00293d]/10" />
{/* Categories Section */}
<div className="p-4">
{/* Categories Card */}
<div className="bg-white rounded-[15px] border border-[#00293D]/20 overflow-hidden">
{/* Categories Header */}
<div className="flex items-center justify-between mb-4 px-2">
<h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
<div className="flex items-center justify-between px-5 py-4 border-b border-[#00293D]/10">
<h4 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
Categories
</h4>
<Image
@@ -86,38 +87,32 @@ export function SettingsSidebar({
</div>
{/* Navigation Items */}
<nav className="space-y-1">
<nav className="py-2">
{navItems.map((item) => {
const isActive = pathname === item.href;
return (
<Link
key={item.href}
href={item.href}
className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
className={`flex items-center gap-4 py-3 px-5 transition-colors cursor-pointer ${
isActive
? 'bg-[#e58625]/10'
? 'bg-[#e58625]'
: 'hover:bg-[#00293d]/5'
}`}
>
<div
className={`w-5 h-5 flex items-center justify-center ${
isActive ? 'text-[#e58625]' : 'text-[#00293D]'
}`}
style={{ color: isActive ? '#e58625' : '#00293D' }}
>
<div className="w-5 h-5 flex items-center justify-center flex-shrink-0">
<Image
src={item.icon}
alt={item.label}
width={20}
height={20}
className={isActive ? 'brightness-0 saturate-100' : ''}
style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
style={isActive ? { filter: 'brightness(0) invert(1)' } : { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' }}
/>
</div>
<span
className={`font-serif text-[14px] leading-[19px] ${
isActive
? 'font-medium text-[#e58625]'
? 'font-medium text-white'
: 'font-normal text-[#00293D]'
}`}
>