main layout

2026-01-11 22:09:41 +05:30
parent 500c8b6e5d
commit 0c7239d7a8
22 changed files with 1847 additions and 369 deletions
--- a/src/components/home/HeroSection.tsx
+++ 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 (
+    <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>
+  );
+}