diff --git a/.gitignore b/.gitignore index 5ef6a52..00a54a7 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,4 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts +CLAUDE.md diff --git a/public/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg b/public/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg new file mode 100644 index 0000000..98ddb73 Binary files /dev/null and b/public/assets/demo_images/8f017153a7b4a239a4f0691234ef97dd55092282.jpg differ diff --git a/public/assets/demo_images/Rectangle 52.png b/public/assets/demo_images/Rectangle 52.png new file mode 100644 index 0000000..fc03e53 Binary files /dev/null and b/public/assets/demo_images/Rectangle 52.png differ diff --git a/public/assets/icons/calendar-icon.svg b/public/assets/icons/calendar-icon.svg new file mode 100644 index 0000000..6887c86 --- /dev/null +++ b/public/assets/icons/calendar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/chart-icon.svg b/public/assets/icons/chart-icon.svg new file mode 100644 index 0000000..1c6d9e1 --- /dev/null +++ b/public/assets/icons/chart-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/chevron-down-icon.svg b/public/assets/icons/chevron-down-icon.svg new file mode 100644 index 0000000..4d2b6f2 --- /dev/null +++ b/public/assets/icons/chevron-down-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/clipboard-icon.svg b/public/assets/icons/clipboard-icon.svg new file mode 100644 index 0000000..dca96b4 --- /dev/null +++ b/public/assets/icons/clipboard-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/clock-icon.svg b/public/assets/icons/clock-icon.svg new file mode 100644 index 0000000..d78c9a4 --- /dev/null +++ b/public/assets/icons/clock-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/dollar-icon.svg b/public/assets/icons/dollar-icon.svg new file mode 100644 index 0000000..dda447d --- /dev/null +++ b/public/assets/icons/dollar-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/edit-icon.svg b/public/assets/icons/edit-icon.svg new file mode 100644 index 0000000..2a264a2 --- /dev/null +++ b/public/assets/icons/edit-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/edit-pencil-icon.svg b/public/assets/icons/edit-pencil-icon.svg new file mode 100644 index 0000000..254d9ca --- /dev/null +++ b/public/assets/icons/edit-pencil-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/heart-icon.svg b/public/assets/icons/heart-icon.svg new file mode 100644 index 0000000..f6be979 --- /dev/null +++ b/public/assets/icons/heart-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/home-icon.svg b/public/assets/icons/home-icon.svg new file mode 100644 index 0000000..2c0f337 --- /dev/null +++ b/public/assets/icons/home-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/location-icon.svg b/public/assets/icons/location-icon.svg new file mode 100644 index 0000000..aa634e5 --- /dev/null +++ b/public/assets/icons/location-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/location-large-icon.svg b/public/assets/icons/location-large-icon.svg new file mode 100644 index 0000000..937d066 --- /dev/null +++ b/public/assets/icons/location-large-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/message-icon.svg b/public/assets/icons/message-icon.svg new file mode 100644 index 0000000..90d046c --- /dev/null +++ b/public/assets/icons/message-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/quote-icon.svg b/public/assets/icons/quote-icon.svg new file mode 100644 index 0000000..23e43b5 --- /dev/null +++ b/public/assets/icons/quote-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/star-empty-icon.svg b/public/assets/icons/star-empty-icon.svg new file mode 100644 index 0000000..707e762 --- /dev/null +++ b/public/assets/icons/star-empty-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/star-filled-icon.svg b/public/assets/icons/star-filled-icon.svg new file mode 100644 index 0000000..c95c4e3 --- /dev/null +++ b/public/assets/icons/star-filled-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/star-icon.svg b/public/assets/icons/star-icon.svg new file mode 100644 index 0000000..c3e1d3b --- /dev/null +++ b/public/assets/icons/star-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/user-placeholder-icon.svg b/public/assets/icons/user-placeholder-icon.svg new file mode 100644 index 0000000..8d16416 --- /dev/null +++ b/public/assets/icons/user-placeholder-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/verified-icon.svg b/public/assets/icons/verified-icon.svg new file mode 100644 index 0000000..2302698 --- /dev/null +++ b/public/assets/icons/verified-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/assets/icons/wallet-icon.svg b/public/assets/icons/wallet-icon.svg new file mode 100644 index 0000000..292f0bb --- /dev/null +++ b/public/assets/icons/wallet-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/(agent)/agent/dashboard/page.tsx b/src/app/(agent)/agent/dashboard/page.tsx index 56723e6..435c9bb 100644 --- a/src/app/(agent)/agent/dashboard/page.tsx +++ b/src/app/(agent)/agent/dashboard/page.tsx @@ -3,6 +3,7 @@ import { useSession } from 'next-auth/react'; import Image from 'next/image'; import { useState } from 'react'; +import { Button } from '@/components/ui/Button'; // Mock agent data - in production, this would come from API const agentData = { @@ -74,14 +75,13 @@ function StarRating({ rating }: { rating: number }) { return (
{[1, 2, 3, 4, 5].map((star) => ( - - - + src={star <= rating ? '/assets/icons/star-filled-icon.svg' : '/assets/icons/star-empty-icon.svg'} + alt={star <= rating ? 'Filled star' : 'Empty star'} + width={16} + height={16} + /> ))}
); @@ -91,13 +91,12 @@ function StarRating({ rating }: { rating: number }) { function Tag({ children, variant = 'default' }: { children: React.ReactNode; variant?: 'default' | 'light' | 'orange' }) { return ( {children} @@ -116,7 +115,7 @@ function SpecializationCard({ }) { return (
-
{icon}
+
{icon}

{title}

{items.map((item, idx) => ( @@ -127,9 +126,12 @@ function SpecializationCard({
); @@ -146,9 +148,9 @@ function InfoCard({ icon: React.ReactNode; }) { return ( -
-
{icon}
- {title &&

{title}

} +
+
{icon}
+ {title &&

{title}

}
{content}
); @@ -164,18 +166,25 @@ export default function AgentDashboard() { {/* Left Sidebar - Status & Contact */}
{/* Profile Image */} -
-
-
- - - -
+
+ {/* Profile Image */} +
+ Profile
-
@@ -211,9 +220,12 @@ export default function AgentDashboard() { Ph.No: {agentData.phone}
@@ -228,22 +240,30 @@ export default function AgentDashboard() {
{/* Name and Verification */}
-

+

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

{agentData.isVerified && ( - - (Verified Expert) - - - - + <> + Verified + + (Verified Expert) + + )}
@@ -253,35 +273,56 @@ export default function AgentDashboard() { {/* Location and Member Since */}
- - - - + Location {agentData.location} - - - + Calendar Member Since {agentData.memberSince}
{/* Action Buttons */} -
- - + +
@@ -372,9 +413,12 @@ export default function AgentDashboard() { - - + Availability } content={
@@ -390,19 +434,24 @@ export default function AgentDashboard() { - - - + Work environment } content={

{agentData.preferredWorkEnvironment}

} /> - - + Testimonial } content={

“{agentData.testimonialHighlight}”

} /> @@ -419,28 +468,36 @@ export default function AgentDashboard() { title="Specialization" items={agentData.specialization.types} icon={ - - - + Specialization } /> - - + Loan Type } /> - - - + Property Type } />
@@ -449,18 +506,24 @@ export default function AgentDashboard() { title="Hobbies & Interests" items={agentData.specialization.hobbies} icon={ - - - + Hobbies } /> - - + Price Point } />
@@ -484,9 +547,12 @@ export default function AgentDashboard() {

{testimonial.text}

- - - + User
diff --git a/src/app/globals.css b/src/app/globals.css index a30e025..ae045f9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -37,6 +37,7 @@ --color-foreground: var(--color-foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); + --font-serif: var(--font-source-serif-4); } /* Disable dark mode for consistent branding */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 3194080..493aeb1 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Source_Serif_4 } from "next/font/google"; import { SessionProvider } from "@/components/providers/session-provider"; import "./globals.css"; @@ -13,6 +13,12 @@ const geistMono = Geist_Mono({ subsets: ["latin"], }); +const sourceSerif4 = Source_Serif_4({ + variable: "--font-source-serif-4", + subsets: ["latin"], + weight: ["400", "500", "600", "700"], +}); + export const metadata: Metadata = { title: "Real Estate Platform", description: "Find your dream property with trusted agents", @@ -26,7 +32,7 @@ export default function RootLayout({ return ( {children} diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 6fe4732..32bab8c 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -3,24 +3,27 @@ import { ButtonHTMLAttributes, ReactNode } from 'react'; interface ButtonProps extends ButtonHTMLAttributes { - variant?: 'primary' | 'secondary' | 'outline'; + variant?: 'primary' | 'secondary' | 'outline' | 'action'; size?: 'sm' | 'md' | 'lg'; + leftIcon?: ReactNode; children: ReactNode; } export function Button({ variant = 'primary', size = 'md', + leftIcon, children, className = '', ...props }: ButtonProps) { - const baseStyles = 'font-medium rounded-lg transition-all duration-200 inline-flex items-center justify-center'; + const baseStyles = 'font-medium 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', + primary: 'bg-[#f5a623] text-white hover:bg-[#e09620] active:bg-[#c98a1c] rounded-lg', + secondary: 'bg-[#00293d] text-white hover:bg-[#003a57] active:bg-[#001f2e] rounded-lg', + outline: 'border-2 border-[#00293d] text-[#00293d] hover:bg-[#00293d] hover:text-white rounded-lg', + action: 'bg-[#e58625] text-white border-[0.1px] border-[#00293d] rounded-[15px] hover:bg-[#d47920] active:bg-[#c26e1b]', }; const sizes = { @@ -34,6 +37,7 @@ export function Button({ className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} {...props} > + {leftIcon && {leftIcon}} {children} );