Skip to content

Commit 720712d

Browse files
092vk092vk
authored
Merge pull request #113 from GoBuildOrg/dev2
Dev2
2 parents 8b64a2a + 0b5e4fc commit 720712d

File tree

6 files changed

+1201
-36
lines changed

6 files changed

+1201
-36
lines changed

‎src/App.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import UpdatePassword from "./pages/auth/UpdatePassword.tsx";
4545

4646
// Import i18n configuration
4747
import './i18n';
48+
import DeveloperDetail from "./pages/categories/DeveloperDetail.tsx";
4849

4950
const queryClient = new QueryClient();
5051

@@ -72,6 +73,8 @@ const AppRoutes = () => {
7273
<Route path="architect-detail/:id" element={<ArchitectDetail />} />
7374
<Route path="material-supplier-detail/:id" element={<MaterialSupplierDetail />} />
7475
<Route path="/categories/contractor-detail/:id" element={<ContractorDetail />} />
76+
<Route path="/categories/builder-detail/:id" element={<DeveloperDetail />}
77+
/>
7578

7679

7780
</Route>

‎src/components/BestDeveloperSection.tsx‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React, { useState, useEffect } from "react";
2+
import { Loader2 } from "lucide-react";
3+
import { useNavigate } from "react-router-dom";
4+
import { supabase } from "@/integrations/supabase/client";
5+
6+
interface Developer {
7+
id: number;
8+
name: string | null;
9+
specialization: string | null;
10+
description: string | null;
11+
image_url: string | null;
12+
}
13+
14+
const BestDevelopersSection: React.FC = () => {
15+
const navigate = useNavigate();
16+
const [search, setSearch] = useState("");
17+
const [loading, setLoading] = useState(true);
18+
const [developers, setDevelopers] = useState<Developer[]>([]);
19+
20+
// FETCH FROM SUPABASE
21+
useEffect(() => {
22+
const fetchDevelopers = async () => {
23+
const { data, error } = await supabase
24+
.from("Developer_Registered")
25+
.select("id, name, specialization, description, image_url");
26+
27+
if (error) {
28+
console.error("Supabase Fetch Error:", error);
29+
alert("Error: " + error.message);
30+
setLoading(false);
31+
return;
32+
}
33+
34+
console.log("Developers Loaded:", data);
35+
setDevelopers(data || []);
36+
setLoading(false);
37+
};
38+
39+
fetchDevelopers();
40+
}, []);
41+
42+
const filteredDevelopers = developers.filter((dev) => {
43+
if (!dev.name) return false;
44+
45+
return (
46+
dev.name.toLowerCase().includes(search.toLowerCase()) ||
47+
(dev.specialization ?? "")
48+
.toLowerCase()
49+
.includes(search.toLowerCase())
50+
);
51+
});
52+
53+
return (
54+
<>
55+
{/* Heading */}
56+
<section className="max-w-6xl mx-auto px-4 mt-16 mb-10 text-center">
57+
<h2 className="text-4xl md:text-5xl font-extrabold text-gray-900">
58+
Find Trusted <span className="text-blue-600">Real Estate Developers</span>
59+
</h2>
60+
</section>
61+
62+
{/* Search */}
63+
<div className="max-w-4xl mx-auto mt-8 px-4">
64+
<input
65+
type="text"
66+
placeholder="Search developers or builders..."
67+
value={search}
68+
onChange={(e) => setSearch(e.target.value)}
69+
className="w-full pl-4 pr-4 py-3 border border-blue-400 rounded-xl text-lg"
70+
/>
71+
</div>
72+
73+
{/* Grid */}
74+
<section className="max-w-6xl mx-auto px-4 mt-10 mb-20">
75+
{loading ? (
76+
<div className="flex justify-center items-center h-40">
77+
<Loader2 className="animate-spin w-10 h-10 text-blue-600" />
78+
</div>
79+
) : filteredDevelopers.length === 0 ? (
80+
<p className="text-center text-gray-500">No developers found.</p>
81+
) : (
82+
<div className="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
83+
{filteredDevelopers.map((dev) => (
84+
<div
85+
key={dev.id}
86+
className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all hover:scale-[1.02] overflow-hidden"
87+
>
88+
<img
89+
src={dev.image_url || "https://placehold.co/600x400?text=No+Image"}
90+
alt={dev.name || "Developer"}
91+
className="w-full h-56 object-cover"
92+
/>
93+
94+
<div className="p-5">
95+
<h3 className="text-xl font-bold text-gray-900 mb-2">
96+
{dev.name}
97+
</h3>
98+
99+
<p className="text-blue-600 text-sm mb-2">
100+
{dev.specialization || "Specialization not provided"}
101+
</p>
102+
103+
<p className="text-gray-600 text-sm line-clamp-3 mb-4">
104+
{dev.description || "No description available"}
105+
</p>
106+
107+
<button
108+
onClick={() =>
109+
navigate(`/categories/builder-detail/${dev.id}`)
110+
}
111+
className="bg-blue-600 text-white px-4 py-2 rounded-lg w-full hover:bg-blue-700"
112+
>
113+
View Company Profile
114+
</button>
115+
</div>
116+
</div>
117+
))}
118+
</div>
119+
)}
120+
</section>
121+
</>
122+
);
123+
};
124+
125+
export default BestDevelopersSection;

‎src/components/BmodelDeveloper.tsx‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
import React from 'react';
2+
import { Link } from "react-router-dom";
3+
4+
function BmodelDeveloper() {
5+
const stakeholders = [
6+
{ name: 'Residential Developer', position: 'left-top', side: 'left', icon: '🏡', color: 'from-orange-400 to-red-500' },
7+
{ name: 'Commercial Developer', position: 'left-middle', side: 'left', icon: '🏢', color: 'from-green-400 to-emerald-500' },
8+
{ name: 'Township Planner', position: 'left-bottom', side: 'left', icon: '🏘️', color: 'from-purple-400 to-violet-500' },
9+
{ name: 'Smart City Developer', position: 'right-top', side: 'right', icon: '🌆', color: 'from-yellow-400 to-amber-500' },
10+
{ name: 'Industrial Contractor', position: 'right-middle', side: 'right', icon: '🏭', color: 'from-blue-400 to-cyan-500'},
11+
{ name: 'Mega Project Builder', position: 'right-bottom', side: 'right', icon: '🏗️', color: 'from-teal-400 to-green-500' }
12+
]
13+
14+
15+
const getPositionClasses = (position: string) => {
16+
switch (position) {
17+
case 'left-top': return 'top-[25%] sm:top-[15%] left-[15%] sm:left-0 -translate-x-1/2 -translate-y-1/2';
18+
case 'left-middle': return 'top-1/2 left-[15%] sm:left-0 -translate-x-1/2 -translate-y-1/2';
19+
case 'left-bottom': return 'bottom-[25%] sm:bottom-[15%] left-[15%] sm:left-0 -translate-x-1/2 translate-y-1/2';
20+
case 'right-top': return 'top-[25%] sm:top-[15%] right-[15%] sm:right-0 translate-x-1/2 -translate-y-1/2';
21+
case 'right-middle': return 'top-1/2 right-[15%] sm:right-0 translate-x-1/2 -translate-y-1/2';
22+
case 'right-bottom': return 'bottom-[25%] sm:bottom-[15%] right-[15%] sm:right-0 translate-x-1/2 translate-y-1/2';
23+
default: return '';
24+
}
25+
};
26+
27+
const getLineClasses = (position: string) => {
28+
switch (position) {
29+
case 'left-top': return 'top-[32%] sm:top-[15%] left-[27%] sm:left-[8%] w-[20%] sm:w-[34%] h-0.5 origin-left rotate-[10deg] sm:rotate-[25deg]';
30+
case 'left-middle': return 'top-1/2 left-[27%] sm:left-[8%] w-[20%] sm:w-[34%] h-0.5 -translate-y-1/2';
31+
case 'left-bottom': return 'bottom-[30%] sm:bottom-[15%] left-[27%] sm:left-[8%] w-[20%] sm:w-[34%] h-0.5 origin-left -rotate-[10deg] sm:-rotate-[25deg]';
32+
case 'right-top': return 'top-[32%] sm:top-[15%] right-[27%] sm:right-[8%] w-[20%] sm:w-[34%] h-0.5 origin-right -rotate-[10deg] sm:-rotate-[25deg]';
33+
case 'right-middle': return 'top-1/2 right-[27%] sm:right-[8%] w-[20%] sm:w-[34%] h-0.5 -translate-y-1/2';
34+
case 'right-bottom': return 'bottom-[30%] sm:bottom-[15%] right-[27%] sm:right-[8%] w-[20%] sm:w-[34%] h-0.5 origin-right rotate-[10deg] sm:rotate-[25deg]';
35+
default: return '';
36+
}
37+
};
38+
39+
return (
40+
<div className="py-10 sm:py-16 lg:py-20 hero-pattern relative overflow-hidden">
41+
{/* Background animated elements - adjusted for light theme */}
42+
<div className="absolute inset-0 overflow-hidden">
43+
<div className="absolute top-10 left-10 w-16 h-16 sm:w-24 sm:h-24 lg:w-32 lg:h-32 bg-blue-400/5 rounded-full blur-xl animate-pulse"></div>
44+
<div className="absolute top-40 right-20 w-12 h-12 sm:w-18 sm:h-18 lg:w-24 lg:h-24 bg-purple-400/5 rounded-full blur-xl animate-pulse" style={{ animationDelay: '2s' }}></div>
45+
<div className="absolute bottom-20 left-20 w-20 h-20 sm:w-32 sm:h-32 lg:w-40 lg:h-40 bg-teal-400/5 rounded-full blur-xl animate-pulse" style={{ animationDelay: '4s' }}></div>
46+
<div className="absolute bottom-40 right-10 w-14 h-14 sm:w-20 sm:h-20 lg:w-28 lg:h-28 bg-orange-400/5 rounded-full blur-xl animate-pulse" style={{ animationDelay: '6s' }}></div>
47+
48+
{/* Geometric patterns */}
49+
<div className="absolute top-1/4 left-1/4 w-1 h-1 sm:w-1.5 sm:h-1.5 lg:w-2 lg:h-2 bg-blue-400/20 rotate-45 animate-ping" style={{ animationDelay: '1s' }}></div>
50+
<div className="absolute top-3/4 right-1/4 w-1 h-1 sm:w-1.5 sm:h-1.5 lg:w-2 lg:h-2 bg-purple-400/20 rotate-45 animate-ping" style={{ animationDelay: '3s' }}></div>
51+
<div className="absolute top-1/2 left-1/6 w-0.5 h-0.5 sm:w-1 sm:h-1 lg:w-1 lg:h-1 bg-teal-400/30 rounded-full animate-ping" style={{ animationDelay: '5s' }}></div>
52+
</div>
53+
54+
<div className="container mx-auto px-4 relative z-10">
55+
<div className="text-center mb-8 sm:mb-12 lg:mb-16">
56+
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold bg-purple-600 bg-clip-text text-transparent mb-4 sm:mb-6">
57+
GoBuild Best Developer
58+
</h2>
59+
<p className="text-base sm:text-lg lg:text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed px-4">
60+
We connect developers, contractors, investors, and clients through a unified digital ecosystem.
61+
</p>
62+
</div>
63+
64+
<div className="relative w-full max-w-6xl mx-auto">
65+
{/* Main container with aspect ratio */}
66+
<div className="relative w-full h-[400px] sm:h-[500px] lg:h-[600px] mx-auto">
67+
68+
{/* Central Logo/Platform Circle */}
69+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-20 group cursor-pointer">
70+
<div className="relative">
71+
{/* Outer energy rings */}
72+
<div className="absolute inset-0 w-40 h-40 sm:w-52 sm:h-52 lg:w-60 lg:h-60 rounded-full border-2 border-blue-400/20 -m-4 sm:-m-5 lg:-m-6 animate-ping"></div>
73+
<div className="absolute inset-0 w-36 h-36 sm:w-48 sm:h-48 lg:w-56 lg:h-56 rounded-full border border-purple-400/15 -m-3 sm:-m-4 lg:-m-4 animate-ping" style={{ animationDelay: '1s' }}></div>
74+
75+
{/* Hover glow effect for center */}
76+
<div className="absolute inset-0 w-32 h-32 sm:w-44 sm:h-44 lg:w-52 lg:h-52 rounded-full bg-gradient-to-r from-blue-400/30 via-purple-400/30 to-teal-400/30 opacity-0 group-hover:opacity-100 transition-all duration-700 scale-125 blur-2xl -m-1 sm:-m-2 lg:-m-2"></div>
77+
78+
{/* Multiple rotating rings */}
79+
<div className="absolute inset-0 w-28 h-28 sm:w-40 sm:h-40 lg:w-48 lg:h-48 rounded-full bg-gradient-to-r from-blue-400/60 via-cyan-400/40 to-purple-400/60 opacity-60 transition-all duration-500 group-hover:opacity-80 group-hover:scale-110"
80+
style={{ animation: 'spin 12s linear infinite' }}></div>
81+
<div className="absolute inset-1 w-26 h-26 sm:w-38 sm:h-38 lg:w-46 lg:h-46 rounded-full bg-gradient-to-r from-purple-400/40 via-pink-400/30 to-blue-400/40 opacity-40"
82+
style={{ animation: 'spin 8s linear infinite reverse' }}></div>
83+
84+
{/* Inner circle with glass effect */}
85+
<div className="relative w-28 h-28 sm:w-36 sm:h-36 lg:w-44 lg:h-44 m-1 sm:m-2 lg:m-2 bg-white/90 backdrop-blur-lg rounded-full shadow-2xl flex items-center justify-center border border-gray-200/50 transition-all duration-500 group-hover:shadow-blue-500/30 group-hover:scale-105">
86+
<div className="text-center">
87+
<div className="text-2xl sm:text-4xl lg:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 bg-clip-text text-transparent mb-1 sm:mb-2 lg:mb-2 transition-all duration-500 group-hover:scale-110">D</div>
88+
<div className="text-sm sm:text-lg lg:text-xl font-bold bg-gradient-to-r from-blue-800 to-purple-800 bg-clip-text text-transparent transition-all duration-500">Developer</div>
89+
</div>
90+
</div>
91+
92+
{/* Orbiting dots - hide on mobile */}
93+
<div className="hidden sm:block absolute top-1/2 left-1/2 w-1.5 h-1.5 lg:w-2 lg:h-2 bg-blue-400 rounded-full -translate-x-1/2 -translate-y-1/2"
94+
style={{ animation: 'orbit 6s linear infinite', transformOrigin: '0 0' }}></div>
95+
<div className="hidden sm:block absolute top-1/2 left-1/2 w-1 h-1 lg:w-1.5 lg:h-1.5 bg-purple-400 rounded-full -translate-x-1/2 -translate-y-1/2"
96+
style={{ animation: 'orbit 8s linear infinite reverse', transformOrigin: '0 0' }}></div>
97+
</div>
98+
</div>
99+
100+
{/* Connecting Lines with Pulse Animation */}
101+
{stakeholders.map((stakeholder, index) => (
102+
<div key={`line-${index}`}
103+
className={`absolute ${getLineClasses(stakeholder.position)} z-10`}>
104+
<div className="w-full h-full relative overflow-hidden rounded-full">
105+
{/* Base line with gradient */}
106+
<div className={`w-full h-full bg-gradient-to-r ${stakeholder.color} opacity-50 rounded-full shadow-md`}></div>
107+
108+
{/* Energy pulse effects */}
109+
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/90 to-transparent opacity-70 rounded-full"
110+
style={{
111+
animation: `pulseForward 4s ease-in-out infinite ${index * 0.7}s`,
112+
width: '25%'
113+
}}></div>
114+
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-300/70 to-transparent opacity-50 rounded-full"
115+
style={{
116+
animation: `pulseBackward 4s ease-in-out infinite ${index * 0.7 + 2}s`,
117+
width: '20%'
118+
}}></div>
119+
120+
{/* Sparkle effects */}
121+
<div className="absolute top-1/2 w-1 h-1 bg-white/80 rounded-full opacity-60 animate-ping"
122+
style={{
123+
left: `${20 + (index * 15)}%`,
124+
animationDelay: `${index * 0.5}s`
125+
}}></div>
126+
</div>
127+
</div>
128+
))}
129+
130+
{/* Stakeholder Circles */}
131+
{stakeholders.map((stakeholder, index) => (
132+
<Link
133+
key={index}
134+
to={stakeholder.link}
135+
className={`absolute ${getPositionClasses(stakeholder.position)} z-30 group cursor-pointer`}
136+
>
137+
<div className="relative">
138+
{/* Outer glow ring */}
139+
<div className={`absolute inset-0 w-24 h-24 sm:w-36 sm:h-36 lg:w-40 lg:h-40 rounded-full bg-gradient-to-r ${stakeholder.color} opacity-0 group-hover:opacity-40 transition-all duration-700 scale-125 blur-xl -m-1 sm:-m-3 lg:-m-4`}></div>
140+
141+
{/* Animated border ring */}
142+
<div className={`absolute inset-0 w-22 h-22 sm:w-32 sm:h-32 lg:w-36 lg:h-36 rounded-full bg-gradient-to-r ${stakeholder.color} opacity-15 animate-pulse -m-0.5 sm:-m-2 lg:-m-2`}
143+
style={{ animationDelay: `${index * 0.5}s` }}></div>
144+
145+
{/* Glass morphism circle */}
146+
<div className="relative w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 bg-white/80 backdrop-blur-md rounded-full shadow-xl border border-gray-200/40 flex flex-col items-center justify-center
147+
transform transition-all duration-500 group-hover:scale-110 group-hover:shadow-2xl
148+
group-hover:bg-white/90 group-hover:border-gray-300/50 group-hover:-translate-y-2 sm:group-hover:-translate-y-3">
149+
150+
{/* Icon */}
151+
<div className="text-lg sm:text-2xl lg:text-3xl mb-0.5 sm:mb-1 lg:mb-1 transition-all duration-300 group-hover:scale-125 group-hover:animate-bounce">
152+
{stakeholder.icon}
153+
</div>
154+
155+
{/* Text */}
156+
<div className="text-center px-0.5 sm:px-2">
157+
<div className="text-xs sm:text-sm lg:text-sm font-bold text-gray-800 leading-tight whitespace-pre-line group-hover:text-gray-900 transition-all duration-300">
158+
{stakeholder.name}
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</Link>
164+
))}
165+
166+
{/* Artistic decorative elements */}
167+
<div className="absolute top-[8%] left-[42%] sm:left-[45%] w-8 h-8 sm:w-10 sm:h-10 lg:w-12 lg:h-12 opacity-20">
168+
<div className="relative w-full h-full">
169+
<div className="absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-lg rotate-45 animate-pulse blur-sm opacity-60"></div>
170+
<div className="absolute inset-1 bg-gradient-to-r from-yellow-300 to-orange-300 rounded-lg rotate-45 opacity-80"></div>
171+
<svg className="absolute inset-2 text-white" viewBox="0 0 24 24" fill="currentColor">
172+
<path d="M12 2L15.5 8.5L22 9L17 14L18.5 22L12 18.5L5.5 22L7 14L2 9L8.5 8.5L12 2Z"/>
173+
</svg>
174+
</div>
175+
</div>
176+
177+
{/* Construction crane silhouette */}
178+
<div className="absolute top-[5%] right-[10%] sm:right-[15%] w-12 h-16 sm:w-14 sm:h-18 lg:w-16 lg:h-20 opacity-15">
179+
<svg viewBox="0 0 64 80" fill="currentColor" className="text-gray-400 animate-pulse">
180+
<rect x="30" y="0" width="4" height="60"/>
181+
<rect x="10" y="15" width="40" height="3"/>
182+
<rect x="8" y="18" width="8" height="2"/>
183+
<rect x="25" y="60" width="14" height="20"/>
184+
<rect x="20" y="75" width="24" height="5"/>
185+
</svg>
186+
</div>
187+
188+
{/* Building blocks pattern */}
189+
<div className="absolute bottom-[8%] left-[8%] sm:left-[12%] w-8 h-8 sm:w-10 sm:h-10 lg:w-10 lg:h-10 opacity-20">
190+
<div className="grid grid-cols-2 gap-1 w-full h-full">
191+
<div className="bg-gradient-to-br from-teal-400 to-cyan-500 rounded animate-pulse opacity-60"></div>
192+
<div className="bg-gradient-to-br from-purple-400 to-violet-500 rounded animate-pulse opacity-60" style={{ animationDelay: '0.5s' }}></div>
193+
<div className="bg-gradient-to-br from-orange-400 to-red-500 rounded animate-pulse opacity-60" style={{ animationDelay: '1s' }}></div>
194+
<div className="bg-gradient-to-br from-green-400 to-emerald-500 rounded animate-pulse opacity-60" style={{ animationDelay: '1.5s' }}></div>
195+
</div>
196+
</div>
197+
198+
{/* Network nodes */}
199+
<div className="absolute top-[35%] left-[5%] sm:left-[8%] w-2 h-2 sm:w-2.5 sm:h-2.5 lg:w-3 lg:h-3 bg-blue-400/60 rounded-full animate-ping opacity-40"></div>
200+
<div className="absolute top-[65%] right-[5%] sm:right-[8%] w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-2 lg:h-2 bg-purple-400/60 rounded-full animate-ping opacity-40" style={{ animationDelay: '1s' }}></div>
201+
<div className="absolute bottom-[25%] left-[20%] sm:left-[25%] w-1.5 h-1.5 sm:w-2 sm:h-2 lg:w-2 lg:h-2 bg-teal-400/60 rounded-full animate-ping opacity-40" style={{ animationDelay: '2s' }}></div>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
);
207+
}
208+
209+
export default BmodelDeveloper;

0 commit comments

Comments
 (0)