Skip to content

Commit 0319f1f

Browse files
092vk092vk
authored
Merge pull request #24 from MYSTICxSAM/platform1
Changes in Platform Section of Home page
2 parents 05985dd + 7eddddd commit 0319f1f

9 files changed

Lines changed: 381 additions & 47 deletions

File tree

‎src/App.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,13 @@ import ContactUs from "./pages/ContactUs";
1717
import ScrollToTop from "./components/ScrollToTop";
1818
import Profile from "./pages/Profile";
1919
import ForgotPassword from "./pages/auth/Forgot";
20-
20+
import Workers from "./pages/categories/Workers";
21+
import Suppliers from "./pages/categories/Suppliers";
22+
import HouseOwner from "./pages/categories/HouseOwner";
23+
import Developers from "./pages/categories/Developers";
24+
import Architects from "./pages/categories/Architects";
25+
import Contractors from "./pages/categories/Contractors";
26+
import CategoriesLayout from "./pages/categories/CategoriesLayout";
2127
// Import i18n configuration
2228
import './i18n';
2329

@@ -35,6 +41,14 @@ const AppRoutes = () => {
3541
<Route path="/about" element={<AboutUs />} />
3642
<Route path="/contact" element={<ContactUs />} />
3743
<Route path="/profile" element={<Profile />} />
44+
<Route path="/categories" element={<CategoriesLayout />}>
45+
<Route path="workers" element={<Workers />} />
46+
<Route path="suppliers" element={<Suppliers />} />
47+
<Route path="houseowners" element={<HouseOwner />} />
48+
<Route path="developers" element={<Developers />} />
49+
<Route path="architects" element={<Architects />} />
50+
<Route path="contractors" element={<Contractors />} />
51+
</Route>
3852
<Route path="/auth" element={<AuthLayout />}>
3953
<Route path="login" element={<Login />} />
4054
<Route path="register" element={<Register />} />

‎src/components/Bmodel.tsx‎

Lines changed: 39 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react';
2+
import { Link } from "react-router-dom";
23

34
function Bmodel() {
45
const stakeholders = [
5-
{ name: 'Workers', position: 'left-top', side: 'left', icon: '👷', color: 'from-orange-400 to-red-500' },
6-
{ name: 'Home Owners', position: 'left-middle', side: 'left', icon: '🏠', color: 'from-green-400 to-emerald-500' },
7-
{ name: 'Architects/\nDesigners', position: 'left-bottom', side: 'left', icon: '📐', color: 'from-purple-400 to-violet-500' },
8-
{ name: 'Contractors', position: 'right-top', side: 'right', icon: '🔨', color: 'from-yellow-400 to-amber-500' },
9-
{ name: 'Developers', position: 'right-middle', side: 'right', icon: '🏗️', color: 'from-blue-400 to-cyan-500' },
10-
{ name: 'Material\nSuppliers', position: 'right-bottom', side: 'right', icon: '📦', color: 'from-teal-400 to-green-500' }
6+
{ name: 'Workers', position: 'left-top', side: 'left', icon: '👷', color: 'from-orange-400 to-red-500',link: '/categories/workers' },
7+
{ name: 'Home Owners', position: 'left-middle', side: 'left', icon: '🏠', color: 'from-green-400 to-emerald-500',link: '/categories/houseowners' },
8+
{ name: 'Architects/\nDesigners', position: 'left-bottom', side: 'left', icon: '📐', color: 'from-purple-400 to-violet-500',link: '/categories/architects' },
9+
{ name: 'Contractors', position: 'right-top', side: 'right', icon: '🔨', color: 'from-yellow-400 to-amber-500',link: '/categories/contractors' },
10+
{ name: 'Developers', position: 'right-middle', side: 'right', icon: '🏗️', color: 'from-blue-400 to-cyan-500',link: '/categories/developers' },
11+
{ name: 'Material\nSuppliers', position: 'right-bottom', side: 'right', icon: '📦', color: 'from-teal-400 to-green-500',link: '/categories/suppliers' }
1112
];
1213

1314
const getPositionClasses = (position: string) => {
@@ -126,49 +127,41 @@ function Bmodel() {
126127
</div>
127128
))}
128129

129-
{/* Stakeholder Circles */}
130-
{stakeholders.map((stakeholder, index) => (
131-
<div key={index}
132-
className={`absolute ${getPositionClasses(stakeholder.position)} z-30 group cursor-pointer`}>
133-
<div className="relative">
134-
{/* Outer glow ring */}
135-
<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>
136-
137-
{/* Animated border ring */}
138-
<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`}
139-
style={{ animationDelay: `${index * 0.5}s` }}></div>
140-
141-
{/* Glass morphism circle */}
142-
<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
143-
transform transition-all duration-500 group-hover:scale-110 group-hover:shadow-2xl
144-
group-hover:bg-white/90 group-hover:border-gray-300/50 group-hover:-translate-y-2 sm:group-hover:-translate-y-3">
145-
146-
{/* Icon */}
147-
<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">
148-
{stakeholder.icon}
149-
</div>
150-
151-
{/* Text */}
152-
<div className="text-center px-0.5 sm:px-2">
153-
<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">
154-
{stakeholder.name}
155-
</div>
156-
</div>
157-
158-
{/* Connection dots */}
159-
<div className={`absolute -top-0.5 -right-0.5 sm:-top-1 sm:-right-1 w-1.5 h-1.5 sm:w-2.5 sm:h-2.5 lg:w-3 lg:h-3 bg-gradient-to-r ${stakeholder.color} rounded-full animate-ping`}
160-
style={{ animationDelay: `${index * 0.8}s` }}></div>
161-
</div>
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>
162140

163-
{/* Floating animation with trail effect */}
164-
<div className="absolute inset-0 w-20 h-20 sm:w-28 sm:h-28 lg:w-32 lg:h-32 rounded-full"
165-
style={{ animation: `float 5s ease-in-out infinite ${index * 0.8}s` }}>
166-
<div className={`w-1 h-1 sm:w-2 sm:h-2 lg:w-2 lg:h-2 bg-gradient-to-r ${stakeholder.color} rounded-full absolute top-0 left-1/2 transform -translate-x-1/2 opacity-40 animate-ping`}
167-
style={{ animationDelay: `${index * 0.3}s` }}></div>
168-
</div>
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}
169159
</div>
170160
</div>
171-
))}
161+
</div>
162+
</div>
163+
</Link>
164+
))}
172165

173166
{/* Artistic decorative elements */}
174167
<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">

‎src/pages/categories/Architects.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
import Navbar from '@/components/Navbar';
4+
import Footer from '@/components/Footer';
5+
6+
const accentColor = 'text-purple-600';
7+
8+
const Architecture: React.FC = () => {
9+
const navigate = useNavigate();
10+
11+
return (
12+
<div className="bg-white min-h-screen font-sans relative">
13+
<Navbar />
14+
15+
<div className="max-w-6xl mx-auto w-full pt-20 mt-4 px-4 md:px-0 flex flex-col items-center">
16+
<div className="flex flex-col-reverse md:flex-row md:gap-16 items-center justify-between w-full">
17+
<div className="w-full md:w-1/2 mb-8 md:mb-0">
18+
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6 animate-fade-in">
19+
<span className="text-black">Find </span>
20+
<span className={accentColor}>Expert Architects</span>
21+
<span className="text-black"> for Your Project</span>
22+
</h1>
23+
<p className="text-gray-700 text-lg mb-6">
24+
Connect with top architects to design your dream home or commercial space. Creative, practical, and professional architecture services tailored to your needs.
25+
</p>
26+
27+
<button
28+
onClick={() => navigate('/services')}
29+
className="bg-purple-600 text-white px-6 py-4 rounded-lg font-bold flex items-center justify-center gap-3 hover:bg-blue-700 transition text-lg shadow-lg min-w-[200px]"
30+
>
31+
Book a Service
32+
</button>
33+
</div>
34+
35+
<div className="w-full md:w-1/2 flex justify-center items-center animate-fade-in animation-delay-200">
36+
<img
37+
src="https://thearchitectsdiary.com/wp-content/uploads/2019/12/architect-construction-plans.jpg"
38+
alt="Modern architecture building facade"
39+
className="rounded-2xl shadow-xl object-cover w-full h-[340px] md:max-w-[420px]"
40+
/>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div className="mt-20">
46+
<Footer />
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export default Architecture;

‎src/pages/categories/CategoriesLayout.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Outlet } from 'react-router-dom';
3+
import Navbar from '@/components/Navbar'; // Adjust the path as needed
4+
5+
const CategoriesLayout = () => {
6+
return (
7+
<div className="min-h-screen flex flex-col">
8+
<Navbar />
9+
<main className="flex-1 p-0 bg-gray-50">
10+
<Outlet />
11+
</main>
12+
</div>
13+
);
14+
};
15+
16+
export default CategoriesLayout;

‎src/pages/categories/Contractors.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
import Navbar from '@/components/Navbar';
4+
import Footer from '@/components/Footer';
5+
6+
const accentColor = 'text-yellow-600';
7+
8+
const Contractors: React.FC = () => {
9+
const navigate = useNavigate();
10+
11+
return (
12+
<div className="bg-white min-h-screen font-sans relative">
13+
<Navbar />
14+
15+
<div className="max-w-6xl mx-auto w-full pt-20 mt-4 px-4 md:px-0 flex flex-col items-center">
16+
<div className="flex flex-col-reverse md:flex-row md:gap-16 items-center justify-between w-full">
17+
<div className="w-full md:w-1/2 mb-8 md:mb-0 animate-fade-in">
18+
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6">
19+
<span className="text-black">Hire Reliable </span>
20+
<span className={accentColor}>Contractors</span>
21+
<span className="text-black"> for Your Needs</span>
22+
</h1>
23+
<p className="text-gray-700 text-lg mb-6">
24+
Find skilled contractors for construction, renovation, and repair projects. Trusted professionals delivering quality work on time and budget.
25+
</p>
26+
27+
<button
28+
onClick={() => navigate('/services')}
29+
className="bg-yellow-600 text-white px-6 py-4 rounded-lg font-bold flex items-center justify-center gap-3 hover:bg-green-700 transition text-lg shadow-lg min-w-[200px]"
30+
>
31+
Book a Service
32+
</button>
33+
</div>
34+
35+
<div className="w-full md:w-1/2 flex justify-center items-center animate-fade-in animation-delay-200">
36+
<img
37+
src="https://mccoymart.com/post/wp-content/webp-express/webp-images/uploads/Centring-Shuttering-Contractors.jpg.webp"
38+
alt="Contractor working on construction site"
39+
className="rounded-2xl shadow-xl object-cover w-full h-[340px] md:max-w-[420px]"
40+
/>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div className="mt-20">
46+
<Footer />
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export default Contractors;

‎src/pages/categories/Developers.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
import Navbar from '@/components/Navbar';
4+
import Footer from '@/components/Footer';
5+
6+
const accentColor = 'text-blue-600';
7+
8+
const Developers: React.FC = () => {
9+
const navigate = useNavigate();
10+
11+
return (
12+
<div className="bg-white min-h-screen font-sans relative">
13+
<Navbar />
14+
15+
<div className="max-w-6xl mx-auto w-full pt-20 mt-4 px-4 md:px-0 flex flex-col items-center">
16+
<div className="flex flex-col-reverse md:flex-row md:gap-16 items-center justify-between w-full">
17+
<div className="w-full md:w-1/2 mb-8 md:mb-0 animate-fade-in">
18+
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6">
19+
<span className="text-black">Hire Skilled </span>
20+
<span className={accentColor}>Developers</span>
21+
<span className="text-black"> for Your Projects</span>
22+
</h1>
23+
<p className="text-gray-700 text-lg mb-6">
24+
Connect with talented software developers experienced in web, mobile, and software applications. Get your projects delivered with efficiency and quality.
25+
</p>
26+
27+
<button
28+
onClick={() => navigate('/services')}
29+
className="bg-blue-600 text-white px-6 py-4 rounded-lg font-bold flex items-center justify-center gap-3 hover:bg-purple-700 transition text-lg shadow-lg min-w-[200px]"
30+
>
31+
Book a Service
32+
</button>
33+
</div>
34+
35+
<div className="w-full md:w-1/2 flex justify-center items-center animate-fade-in animation-delay-200">
36+
<img
37+
src="https://media.istockphoto.com/id/1451456915/photo/female-freelance-developer-coding-and-programming-coding-on-two-with-screens-with-code.jpg?s=612x612&w=0&k=20&c=BFFIc-xOwzeRyR8ui9VkFKEqqqQFBbISJzr-ADN6hS8="
38+
alt="Software developers working together"
39+
className="rounded-2xl shadow-xl object-cover w-full h-[340px] md:max-w-[420px]"
40+
/>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div className="mt-20">
46+
<Footer />
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export default Developers;

‎src/pages/categories/HouseOwner.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
import Navbar from '@/components/Navbar';
4+
import Footer from '@/components/Footer';
5+
6+
const accentColor = 'text-green-600';
7+
8+
const HomeOwners: React.FC = () => {
9+
const navigate = useNavigate();
10+
11+
return (
12+
<div className="bg-white min-h-screen font-sans relative">
13+
<Navbar />
14+
15+
<div className="max-w-6xl mx-auto w-full pt-20 mt-4 px-4 md:px-0 flex flex-col items-center">
16+
<div className="flex flex-col-reverse md:flex-row md:gap-16 items-center justify-between w-full">
17+
<div className="w-full md:w-1/2 mb-8 md:mb-0 animate-fade-in">
18+
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6">
19+
<span className="text-black">Find Your </span>
20+
<span className={accentColor}>Perfect Home</span>
21+
<span className="text-black"> for Rent</span>
22+
</h1>
23+
<p className="text-gray-700 text-lg mb-6">
24+
Search and discover quality rental homes tailored to your preferences. Explore verified listings to find a comfortable and affordable place to call home.
25+
</p>
26+
27+
<button
28+
onClick={() => navigate('/services')}
29+
className="bg-green-600 text-white px-6 py-4 rounded-lg font-bold flex items-center justify-center gap-3 hover:bg-orange-700 transition text-lg shadow-lg min-w-[200px]"
30+
>
31+
Explore Rentals
32+
</button>
33+
</div>
34+
35+
<div className="w-full md:w-1/2 flex justify-center items-center animate-fade-in animation-delay-200">
36+
<img
37+
src="https://i.pinimg.com/736x/3c/eb/83/3ceb83c7dc6cc67617668fdd1ef19e77.jpg"
38+
alt="Cozy home available for rent"
39+
className="rounded-2xl shadow-xl object-cover w-full h-[340px] md:max-w-[420px]"
40+
/>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div className="mt-20">
46+
<Footer />
47+
</div>
48+
</div>
49+
);
50+
};
51+
52+
export default HomeOwners;

0 commit comments

Comments
 (0)