main layout

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 (
+    <section className="py-16 md:py-24 bg-[#f5f9f8]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {featuredAgents.map((agent) => (
+            <AgentCard
+              key={agent.id}
+              name={agent.name}
+              title={agent.title}
+              location={agent.location}
+              rating={agent.rating}
+              reviewCount={agent.reviewCount}
+              experience={agent.experience}
+              expertise={agent.expertise}
+              imageUrl={agent.imageUrl}
+              isVerified={agent.isVerified}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/home/FeaturesSection.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+const features = [
+  {
+    icon: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    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: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+    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: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+      </svg>
+    ),
+    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: (
+      <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+      </svg>
+    ),
+    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 className="py-16 md:py-24 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
+            Find Trusted Real Estate Professionals On Demand
+          </h2>
+          <p className="text-gray-600 max-w-2xl mx-auto">
+            Quickly connect with the right agents exactly when you need them.
+          </p>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div
+              key={index}
+              className="text-center p-6 rounded-xl hover:bg-[#f5f9f8] transition-colors"
+            >
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#c4d9d4]/30 text-[#00293d] mb-4">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-bold text-[#00293d] mb-3">
+                {feature.title}
+              </h3>
+              <p className="text-gray-600 text-sm leading-relaxed">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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 (
+    <section className="relative bg-gradient-to-b from-[#e8f0ee] to-[#f5f9f8] overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <svg className="w-full h-full" viewBox="0 0 1440 600" fill="none">
+          {/* City Skyline Pattern */}
+          <rect x="100" y="400" width="60" height="200" fill="#00293d"/>
+          <rect x="180" y="350" width="80" height="250" fill="#00293d"/>
+          <rect x="280" y="380" width="50" height="220" fill="#00293d"/>
+          <rect x="350" y="300" width="100" height="300" fill="#00293d"/>
+          <rect x="470" y="420" width="40" height="180" fill="#00293d"/>
+          <rect x="900" y="380" width="70" height="220" fill="#00293d"/>
+          <rect x="990" y="320" width="90" height="280" fill="#00293d"/>
+          <rect x="1100" y="400" width="60" height="200" fill="#00293d"/>
+          <rect x="1180" y="350" width="80" height="250" fill="#00293d"/>
+          <rect x="1280" y="420" width="50" height="180" fill="#00293d"/>
+        </svg>
+      </div>
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
+        {/* Headline */}
+        <div className="text-center mb-10">
+          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#00293d] mb-4 leading-tight">
+            &ldquo;Discover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.&rdquo;
+          </h1>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Discover verified, top-rated real estate professionals
+          </p>
+        </div>
+
+        {/* Search Form */}
+        <div className="bg-white rounded-2xl shadow-xl p-6 md:p-8 max-w-5xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            {/* Type Select */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Types</label>
+              <select
+                value={searchParams.type}
+                onChange={(e) => setSearchParams({ ...searchParams, type: 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 bg-white"
+              >
+                <option value="">Professionals</option>
+                {propertyTypes.map((type) => (
+                  <option key={type.value} value={type.value}>{type.label}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Name Input */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Name or Nickname</label>
+              <input
+                type="text"
+                placeholder="Name or Nickname"
+                value={searchParams.name}
+                onChange={(e) => 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"
+              />
+            </div>
+
+            {/* Location Input */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Location</label>
+              <input
+                type="text"
+                placeholder="Location"
+                value={searchParams.location}
+                onChange={(e) => 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"
+              />
+            </div>
+
+            {/* Category Select */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">Categories</label>
+              <select
+                value={searchParams.category}
+                onChange={(e) => setSearchParams({ ...searchParams, category: 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 bg-white"
+              >
+                <option value="">Select Category</option>
+                {categories.map((cat) => (
+                  <option key={cat.value} value={cat.value}>{cat.label}</option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Quick Links */}
+          <div className="flex flex-wrap gap-2 mb-6">
+            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
+              Professionals
+            </button>
+            <span className="text-gray-300">|</span>
+            <button className="text-sm text-[#00293d] hover:text-[#f5a623] transition-colors">
+              Lenders
+            </button>
+          </div>
+
+          {/* Search Button */}
+          <div className="flex justify-center">
+            <Button variant="primary" size="lg" onClick={handleSearch}>
+              See All Agents
+            </Button>
+          </div>
+
+          {/* Helper Text */}
+          <p className="text-center text-gray-500 text-sm mt-4">
+            Connect with trusted local agents to explore homes, compare options, and make smarter decisions.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}

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 (
+    <div className="flex gap-1">
+      {[...Array(5)].map((_, i) => (
+        <svg
+          key={i}
+          className={`w-5 h-5 ${i < rating ? 'text-[#f5a623]' : 'text-gray-300'}`}
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+export function TestimonialsSection() {
+  return (
+    <section className="py-16 md:py-24 bg-[#f5f9f8]">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
+            Our Clients&apos; Trust Is Our Foundation
+          </h2>
+          <p className="text-gray-600 max-w-2xl mx-auto mb-6">
+            We help buyers, sellers, and investors close successful real estate deals with confidence in every transaction.
+          </p>
+          <p className="text-gray-600">
+            Clients rate our real estate services an average of 4.8 on average, based on recent client reviews.
+          </p>
+        </div>
+
+        {/* Rating Summary */}
+        <div className="flex justify-center items-center gap-8 mb-12">
+          <div className="flex items-center gap-2">
+            <span className="text-3xl font-bold text-[#00293d]">4.8 / 5 Stars</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-gray-600">1,200+ Happy Clients</span>
+          </div>
+        </div>
+
+        {/* Testimonials Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((testimonial) => (
+            <div
+              key={testimonial.id}
+              className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow"
+            >
+              {/* Rating */}
+              <div className="mb-4">
+                <StarRating rating={testimonial.rating} />
+              </div>
+
+              {/* Title */}
+              <h3 className="font-bold text-[#00293d] mb-3">{testimonial.title}</h3>
+
+              {/* Content */}
+              <p className="text-gray-600 text-sm mb-6 leading-relaxed">
+                {testimonial.content}
+              </p>
+
+              {/* Author */}
+              <div className="border-t pt-4">
+                <p className="font-semibold text-[#00293d]">{testimonial.author}</p>
+                <p className="text-sm text-gray-500">{testimonial.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

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 className="py-16 md:py-24 bg-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="text-center mb-10">
+          <h2 className="text-3xl md:text-4xl font-bold text-[#00293d] mb-4">
+            &ldquo;Meet top real estate professionals&rdquo;
+          </h2>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex justify-center gap-4 mb-10">
+          <button
+            onClick={() => setActiveTab('agents')}
+            className={`px-8 py-3 rounded-full font-medium transition-all ${
+              activeTab === 'agents'
+                ? 'bg-[#00293d] text-white'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }`}
+          >
+            Agents
+          </button>
+          <button
+            onClick={() => setActiveTab('lenders')}
+            className={`px-8 py-3 rounded-full font-medium transition-all ${
+              activeTab === 'lenders'
+                ? 'bg-[#00293d] text-white'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            }`}
+          >
+            Lenders
+          </button>
+        </div>
+
+        {/* Cards Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
+          {displayData.map((professional) => (
+            <AgentCard
+              key={professional.id}
+              name={professional.name}
+              title={professional.title}
+              location={professional.location}
+              rating={professional.rating}
+              reviewCount={professional.reviewCount}
+              experience={professional.experience}
+              expertise={professional.expertise}
+              imageUrl={professional.imageUrl}
+              isVerified={professional.isVerified}
+            />
+          ))}
+
+          {/* Browse Experts CTA Card */}
+          <div className="bg-[#f5a623]/10 rounded-2xl p-8 flex flex-col items-center justify-center text-center">
+            <p className="text-[#00293d] font-medium mb-2">
+              Discover 6,000+ Top Real Estate Agents in Our Network
+            </p>
+            <Link href="/agents">
+              <Button variant="primary" size="md">
+                Browse Experts
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        {/* Pagination Dots */}
+        <div className="flex justify-center gap-2">
+          {[0, 1, 2, 3].map((dot) => (
+            <button
+              key={dot}
+              className={`w-2 h-2 rounded-full transition-all ${
+                dot === 0 ? 'bg-[#f5a623] w-8' : 'bg-gray-300 hover:bg-gray-400'
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}