Skip to content

Commit 068b71a

Browse files
092vk092vk
authored
Merge pull request #36 from Ansh-2222/anshDev
Redesign Architects page
2 parents bcce2c7 + a6ea574 commit 068b71a

5 files changed

Lines changed: 182 additions & 86 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# Code base for GoBuild Website
22

3+
## Steps to Update the types from Supabase
4+
> npx supabase gen types typescript --project-id ___ID___ --schema public > ./src/integrations/supabase/types.ts
5+
36
## To run in local follow the given below steps:
47
1. Clone the repo - git clone https://github.com/092vk/GoBuildMain.git
58
2. cd GoBuildMain

‎src/components/HeroForm.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const [startDate, setStartDate] = useState<Date>();
1717
const [location, setLocation] = useState<string>('');
1818
const [phoneNumber, setPhoneNumber] = useState<string>('');
1919
const [serviceType, setServiceType] = useState<string>('');
20+
const [referralCode, setReferralCode] = useState<string>('');
2021
const [hdfu, setHdfu] = useState<string>('');
2122
const [mapCenter, setMapCenter] = useState({ lat: 32.7266, lng: 74.8570 });
2223
const [showSuccessDialog, setShowSuccessDialog] = useState(false);
@@ -73,6 +74,7 @@ const handleSubmit = async () => {
7374
Phone: phoneNumber,
7475
ServiceType: serviceType,
7576
hdfu: hdfu,
77+
ReferalCode: referralCode,
7678
});
7779

7880
if (error) {
@@ -88,6 +90,7 @@ const handleSubmit = async () => {
8890
setPhoneNumber('');
8991
setServiceType('');
9092
setHdfu('');
93+
setReferralCode('');
9194
} catch (error: any) {
9295
console.error('Error submitting form:', error);
9396
toast({
@@ -112,9 +115,10 @@ return(
112115

113116
<div className="space-y-6">
114117
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
118+
115119
<div className="space-y-2">
116120
<label className="text-sm font-medium text-sky-900">Start Date</label>
117-
<Popover open={dateOpen} onOpenChange={setDateOpen} >
121+
<Popover open={dateOpen} onOpenChange={setDateOpen}>
118122
<PopoverTrigger asChild>
119123
<Button
120124
variant="outline"
@@ -132,7 +136,7 @@ return(
132136
<Calendar
133137
mode="single"
134138
selected={startDate}
135-
onSelect={(date)=>{
139+
onSelect={(date) => {
136140
setStartDate(date);
137141
setDateOpen(false);
138142
}}
@@ -143,6 +147,17 @@ return(
143147
</PopoverContent>
144148
</Popover>
145149
</div>
150+
151+
<div className="space-y-2">
152+
<label className="text-sm font-medium text-sky-900">Referral Code</label>
153+
<Input
154+
type="text"
155+
placeholder="Enter referral code (Optional)"
156+
className="bg-white"
157+
value={referralCode}
158+
onChange={(e) => setReferralCode(e.target.value)}
159+
/>
160+
</div>
146161
</div>
147162

148163
<div className="space-y-2">

‎src/integrations/supabase/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ export type Database = {
298298
Location: string | null
299299
Name: string | null
300300
Phone: string | null
301+
ReferalCode: number | null
301302
Results: boolean | null
302303
Results_description: string | null
303304
ServiceType: string | null
@@ -310,6 +311,7 @@ export type Database = {
310311
Location?: string | null
311312
Name?: string | null
312313
Phone?: string | null
314+
ReferalCode?: number | null
313315
Results?: boolean | null
314316
Results_description?: string | null
315317
ServiceType?: string | null
@@ -322,6 +324,7 @@ export type Database = {
322324
Location?: string | null
323325
Name?: string | null
324326
Phone?: string | null
327+
ReferalCode?: number | null
325328
Results?: boolean | null
326329
Results_description?: string | null
327330
ServiceType?: string | null

‎src/pages/categories/Architects.tsx‎

Lines changed: 158 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,187 @@
1-
import React from 'react';
2-
import { useNavigate } from 'react-router-dom';
1+
import React, { useState } from 'react';
2+
import { useNavigate, Link } from 'react-router-dom';
33
import Navbar from '@/components/Navbar';
44
import Footer from '@/components/Footer';
55

6-
import { Description } from '@radix-ui/react-toast';
7-
import { sub } from 'date-fns';
8-
96
const accentColor = 'text-purple-600';
107

11-
// Gallery data organized by groups
12-
const gallerySections = [
8+
const architects = [
139
{
14-
title: 'Aviral Design Studio Jammu',
15-
description: 'Leading architectural firm known for innovative designs and sustainable solutions',
16-
images: [
17-
'../../../architects/Aviral_Design_Studio/image01.png',
18-
'../../../architects/Aviral_Design_Studio/image02.png',
19-
'../../../architects/Aviral_Design_Studio/image03.png',
20-
'../../../architects/Aviral_Design_Studio/image04.png',
21-
'../../../architects/Aviral_Design_Studio/image05.png',
22-
'../../../architects/Aviral_Design_Studio/image06.png',
23-
],
10+
id: 1,
11+
name: 'Aviral Design Studio Jammu',
12+
location: 'Jammu, India',
13+
pincode: '180001',
14+
category: 'Residential',
15+
shortDesc: 'Innovative designs and sustainable solutions.',
16+
fullDesc:
17+
'Aviral Design Studio is a leading architectural firm based in Jammu, renowned for its innovative and sustainable designs. The firm focuses on residential, commercial, and institutional projects with a modern, eco-friendly approach.',
18+
image: '/architects/Aviral_Design_Studio/image01.png',
2419
},
2520
{
26-
title: 'Aashiana Architects',
27-
subtitle: 'Specialized in Modular kitchen and Bathroom',
28-
description: 'Renowned for blending traditional aesthetics with modern functionality in residential projects',
29-
images: [
30-
'https://images.pexels.com/photos/7587861/pexels-photo-7587861.jpeg',
31-
'https://images.pexels.com/photos/27065116/pexels-photo-27065116.jpeg',
32-
'https://images.pexels.com/photos/7031580/pexels-photo-7031580.jpeg',
33-
34-
35-
],
36-
}
21+
id: 2,
22+
name: 'Aashiana Architects',
23+
location: 'Jammu, India',
24+
pincode: '180002',
25+
category: 'Interior',
26+
shortDesc: 'Blending traditional aesthetics with modern functionality.',
27+
fullDesc:
28+
'Aashiana Architects specializes in modular kitchens and bathrooms, offering a perfect blend of traditional aesthetics with contemporary design. Known for detail-oriented residential projects and elegant interior concepts.',
29+
image: 'https://images.pexels.com/photos/7587861/pexels-photo-7587861.jpeg',
30+
},
31+
{
32+
id: 3,
33+
name: 'UrbanNest Architects',
34+
location: 'Pune, India',
35+
pincode: '411001',
36+
category: 'Residential',
37+
shortDesc: 'Eco-friendly homes with smart space optimization.',
38+
fullDesc:
39+
'UrbanNest focuses on sustainable architecture, with a strong emphasis on energy efficiency, natural light, and environmental harmony.',
40+
image: 'https://images.pexels.com/photos/7031580/pexels-photo-7031580.jpeg',
41+
},
42+
{
43+
id: 4,
44+
name: 'Studio Zenith',
45+
location: 'Jaipur, India',
46+
pincode: '302001',
47+
category: 'Commercial',
48+
shortDesc: 'Creative designs for luxury and modern living.',
49+
fullDesc:
50+
'Studio Zenith is known for creating bespoke architectural experiences that blend cultural heritage with contemporary aesthetics.',
51+
image: 'https://images.pexels.com/photos/27065116/pexels-photo-27065116.jpeg',
52+
},
53+
{
54+
id: 5,
55+
name: 'DesignWorks Studio',
56+
location: 'Mumbai, India',
57+
pincode: '400001',
58+
category: 'Commercial',
59+
shortDesc: 'Award-winning firm for commercial and urban design.',
60+
fullDesc:
61+
'DesignWorks Studio specializes in large-scale commercial projects and has received multiple awards for innovation in sustainable city planning.',
62+
image: 'https://images.pexels.com/photos/269077/pexels-photo-269077.jpeg',
63+
},
64+
{
65+
id: 6,
66+
name: 'Form & Function Architects',
67+
location: 'Delhi, India',
68+
pincode: '110001',
69+
category: 'Residential',
70+
shortDesc: 'Minimalist spaces that balance art and utility.',
71+
fullDesc:
72+
'Form & Function is a Delhi-based architecture firm known for minimalist and timeless commercial and residential designs.',
73+
image: 'https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg',
74+
},
3775
];
3876

77+
const categories = ['Featured', 'Residential', 'Commercial', 'Interior'];
78+
3979
const Architecture: React.FC = () => {
4080
const navigate = useNavigate();
81+
const [search, setSearch] = useState('');
82+
83+
// Filter architects based on search input (name or pincode)
84+
const filteredArchitects = architects.filter(
85+
(arch) =>
86+
arch.name.toLowerCase().includes(search.toLowerCase()) ||
87+
arch.pincode.includes(search)
88+
);
4189

4290
return (
43-
<div className="bg-white min-h-screen font-sans relative">
91+
<div className="bg-white min-h-screen font-sans">
4492
<Navbar />
4593

46-
<div className="max-w-6xl mx-auto w-full pt-20 mt-4 px-4 md:px-0 flex flex-col items-center">
47-
<div className="flex flex-col-reverse md:flex-row md:gap-16 items-center justify-between w-full">
48-
<div className="w-full md:w-1/2 mb-8 md:mb-0">
49-
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6 animate-fade-in">
50-
<span className="text-black">Find </span>
51-
<span className={accentColor}>Expert Architects</span>
52-
<span className="text-black"> for Your Project</span>
53-
</h1>
54-
<p className="text-gray-700 text-lg mb-6">
55-
Connect with top architects to design your dream home or commercial space. Creative, practical, and professional architecture services tailored to your needs.
56-
</p>
57-
58-
<button
59-
onClick={() => navigate('/services')}
60-
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]"
61-
>
62-
Book a Service
63-
</button>
64-
</div>
65-
66-
<div className="w-full md:w-1/2 flex justify-center items-center animate-fade-in animation-delay-200">
67-
<img
68-
src="https://thearchitectsdiary.com/wp-content/uploads/2019/12/architect-construction-plans.jpg"
69-
alt="Modern architecture building facade"
70-
className="rounded-2xl shadow-xl object-cover w-full h-[340px] md:max-w-[420px]"
71-
/>
72-
</div>
94+
{/* Hero Section */}
95+
<section className="max-w-6xl mx-auto px-4 md:px-0 pt-12 sm:pt-20 flex flex-col md:flex-row items-center justify-between gap-10 mt-4">
96+
<div className="md:w-1/2 mt-4 sm:mt-8">
97+
<h1 className="text-4xl sm:text-5xl font-extrabold mb-6 leading-snug">
98+
<span className="text-black">Find </span>
99+
<span className={accentColor}>Top Architects</span>
100+
<span className="text-black"> for Your Project</span>
101+
</h1>
73102
</div>
74-
</div>
75-
76-
{/* Gallery Sections */}
77-
<div className="max-w-6xl mx-auto px-4 md:px-0 mt-20">
78-
{gallerySections.map((section, secIndex) => (
79-
<div key={secIndex} className="mb-16">
80-
<h2 className="text-4xl sm:text-5xl font-bold mb-2 text-center animate-fade-in">
81-
<span className={accentColor}>{section.title}</span>
103+
104+
{/* Hero image hidden on mobile */}
105+
<div className="md:w-1/2 flex justify-center hidden md:flex mt-4">
106+
<img
107+
src="https://thearchitectsdiary.com/wp-content/uploads/2019/12/architect-construction-plans.jpg"
108+
alt="Architectural planning"
109+
className="rounded-2xl shadow-xl object-cover w-full h-[300px] sm:h-[340px] md:max-w-[420px]"
110+
/>
111+
</div>
112+
</section>
113+
114+
{/* Search Bar */}
115+
<section className="max-w-6xl mx-auto px-4 md:px-0 mt-8">
116+
<input
117+
type="text"
118+
placeholder="Search architects by name or pincode"
119+
className="w-full sm:w-1/2 px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-600 focus:outline-none mb-6"
120+
value={search}
121+
onChange={(e) => setSearch(e.target.value)}
122+
/>
123+
</section>
124+
125+
{/* Architect Cards Section */}
126+
{categories.map((cat) => {
127+
const catArchitects =
128+
cat === 'Featured'
129+
? filteredArchitects.slice(0, 3) // top 3 as featured
130+
: filteredArchitects.filter((arch) => arch.category === cat);
131+
132+
if (catArchitects.length === 0) return null;
133+
134+
return (
135+
<section key={cat} className="max-w-6xl mx-auto px-4 md:px-0 mt-8 mb-20">
136+
<h2 className="text-3xl sm:text-4xl font-bold mb-10 text-center mt-4">
137+
<span className={accentColor}>{cat} Architects</span>
82138
</h2>
83-
<p className="text-center text-gray-600 mb-6 text-lg">
84-
85-
{section.description}
86-
</p>
87-
88-
89-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
90-
{section.images.map((img, index) => (
139+
140+
<div className="grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
141+
{catArchitects.map((arch) => (
91142
<div
92-
key={index}
93-
className="overflow-hidden rounded-2xl transform transition hover:scale-105 shadow-md hover:shadow-[0_0_25px_rgba(128,0,128,0.5)]"
143+
key={arch.id}
144+
className="bg-white rounded-2xl shadow-md hover:shadow-[0_0_25px_rgba(128,0,128,0.3)] transition-transform transform hover:scale-105 overflow-hidden flex flex-col"
94145
>
95146
<img
96-
src={img}
97-
alt={`${section.title} Project ${index + 1}`}
98-
className="w-full h-60 object-cover"
147+
src={arch.image}
148+
alt={arch.name}
149+
className="w-full h-56 sm:h-64 object-cover"
150+
loading="lazy"
99151
/>
152+
<div className="p-5 flex flex-col justify-between flex-1">
153+
<div>
154+
<h3 className="text-xl font-bold mb-1 text-gray-900 line-clamp-2">
155+
{arch.name}
156+
</h3>
157+
<p className="text-sm text-gray-500 mb-3">{arch.location}</p>
158+
<p className="text-gray-700 mb-5 text-sm line-clamp-3">{arch.shortDesc}</p>
159+
</div>
160+
161+
<div className="flex flex-col sm:flex-row justify-between items-center gap-3 mt-auto">
162+
<Link
163+
to={`/architect/${arch.id}`}
164+
className="text-purple-600 font-semibold hover:text-purple-800 transition underline text-sm text-center w-full sm:w-auto"
165+
>
166+
View Details
167+
</Link>
168+
169+
<button
170+
onClick={() => navigate('/services')}
171+
className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition text-sm font-semibold w-full sm:w-auto"
172+
>
173+
Book Now
174+
</button>
175+
</div>
176+
</div>
100177
</div>
101178
))}
102179
</div>
103-
</div>
104-
))}
105-
</div>
180+
</section>
181+
);
182+
})}
106183

107-
<div className="mt-20">
108-
<Footer />
109-
</div>
184+
<Footer />
110185
</div>
111186
);
112187
};

‎supabase/.temp/cli-latest‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v2.45.5
1+
v2.51.0

0 commit comments

Comments
 (0)