Skip to content

Commit b1b09e7

Browse files
092vk092vk
authored
Merge pull request #27 from MYSTICxSAM/platform1
Created a Solutions dropdown in the navbar and added description in Architecture page
2 parents fc7e48b + 6dca5d9 commit b1b09e7

9 files changed

Lines changed: 123 additions & 34 deletions

File tree

‎public/architects/Aviral_Design_Studio/image01.png‎

526 KB
Loading

‎public/architects/Aviral_Design_Studio/image02.png‎

570 KB
Loading

‎public/architects/Aviral_Design_Studio/image03.png‎

494 KB
Loading

‎public/architects/Aviral_Design_Studio/image04.png‎

324 KB
Loading

‎public/architects/Aviral_Design_Studio/image05.png‎

1.81 MB
Loading

‎public/architects/Aviral_Design_Studio/image06.png‎

17.8 MB
Loading

‎src/components/Navbar.tsx‎

Lines changed: 60 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import { useNavigate } from 'react-router-dom';
1212
const Navbar: React.FC = () => {
1313
const [isOpen, setIsOpen] = useState(false);
1414
const [isScrolled, setIsScrolled] = useState(false);
15-
const { user, signOut } = useAuth();
15+
const [isServicesOpen, setIsServicesOpen] = useState(false); // Desktop dropdown
16+
const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false); // Mobile dropdown
17+
const { user } = useAuth();
1618
const { t } = useTranslation();
1719
const navigate = useNavigate();
1820

@@ -74,6 +76,34 @@ const Navbar: React.FC = () => {
7476
</div>
7577
<Link to="/" className="text-foreground hover:text-primary transition-colors">{t('common.home')}</Link>
7678
<Link to="/services" className="text-foreground hover:text-primary transition-colors">{t('common.services')}</Link>
79+
80+
{/* New "All Services" dropdown button */}
81+
<div
82+
className="relative"
83+
onMouseEnter={() => setIsServicesOpen(true)}
84+
onMouseLeave={() => setIsServicesOpen(false)}
85+
>
86+
<button
87+
className="text-foreground hover:text-primary px-1 py-2 rounded-md text-base font-low transition-colors "
88+
>
89+
{t('common.solutions')}
90+
</button>
91+
<div
92+
className={`absolute top-full left-0 mt-2 w-48 bg-white shadow-lg rounded-md border border-gray-200 z-50
93+
overflow-hidden transition-all duration-300 ease-in-out
94+
${isServicesOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}
95+
onMouseEnter={() => setIsServicesOpen(true)}
96+
onMouseLeave={() => setIsServicesOpen(false)}
97+
>
98+
<Link to="/categories/workers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Worker</Link>
99+
{/* <Link to="/categories/houseowners" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Home Owners</Link> */}
100+
<Link to="/categories/architects" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Architects/Designers</Link>
101+
<Link to="/categories/contractors" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Contractors</Link>
102+
<Link to="/categories/developers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Developers</Link>
103+
<Link to="/categories/suppliers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Material Suppliers</Link>
104+
</div>
105+
</div>
106+
77107
<Link to="/blog" className="text-foreground hover:text-primary transition-colors">{t('common.blog')}</Link>
78108
<Link to="/about" className="text-foreground hover:text-primary transition-colors">{t('common.about')}</Link>
79109
<Link to="/contact" className="text-foreground hover:text-primary transition-colors">{t('common.contact')}</Link>
@@ -129,40 +159,36 @@ const Navbar: React.FC = () => {
129159
}}
130160
/>
131161
</div>
132-
<Link
133-
to="/"
134-
className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors"
135-
onClick={() => setIsOpen(false)}
136-
>
137-
{"Home"}
138-
</Link>
139-
<Link
140-
to="/services"
141-
className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors"
142-
onClick={() => setIsOpen(false)}
143-
>
144-
{t('common.services')}
145-
</Link>
146-
<Link to="/blog"
147-
className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors"
148-
onClick={() => setIsOpen(false)}
149-
>
150-
{t('common.blog')}
151-
</Link>
152-
<Link
153-
to="/about"
154-
className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors"
155-
onClick={() => setIsOpen(false)}
156-
>
157-
{t('common.about')}
158-
</Link>
159-
<Link
160-
to="/contact"
161-
className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors"
162-
onClick={() => setIsOpen(false)}
162+
163+
<Link to="/" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Home</Link>
164+
165+
{/* Services main link (redirect only) */}
166+
<Link to="/services" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Services</Link>
167+
168+
{/* New "All Services" mobile button */}
169+
<button
170+
className="w-full text-left px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors flex justify-between items-center"
171+
onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
163172
>
164-
{t('common.contact')}
165-
</Link>
173+
{t('common.solutions')}
174+
<span className={`transform transition-transform duration-200 ${isMobileServicesOpen ? 'rotate-180' : 'rotate-0'}`}>▼</span>
175+
</button>
176+
177+
{isMobileServicesOpen && (
178+
<div className="pl-4 mt-2 space-y-1">
179+
<Link to="/categories/workers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Worker</Link>
180+
{/* <Link to="/categories/houseowners" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Home Owners</Link> */}
181+
<Link to="/categories/architects" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Architects/Designers</Link>
182+
<Link to="/categories/contractors" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Contractors</Link>
183+
<Link to="/categories/developers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Developers</Link>
184+
<Link to="/categories/suppliers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Material Suppliers</Link>
185+
</div>
186+
)}
187+
188+
<Link to="/blog" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Blog</Link>
189+
<Link to="/about" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>About</Link>
190+
<Link to="/contact" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Contact</Link>
191+
166192
<div className="pt-2 space-y-2">
167193

168194
{/* Profile Button added above sign out */}

‎src/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"common": {
33
"home": "Home",
44
"services": "Services",
5+
"solutions": "Solutions",
56
"blog": "Blog",
67
"about": "About",
78
"contact": "Contact",

‎src/pages/categories/Architects.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,39 @@ import { useNavigate } 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+
69
const accentColor = 'text-purple-600';
710

11+
// Gallery data organized by groups
12+
const gallerySections = [
13+
{
14+
title: 'Aviral Group',
15+
description: 'Leading architectural firm known for innovative designs and sustainable solutions',
16+
images: [
17+
'../../../public/architects/Aviral_Design_Studio/image01.png',
18+
'../../../public/architects/Aviral_Design_Studio/image02.png',
19+
'../../../public/architects/Aviral_Design_Studio/image03.png',
20+
'../../../public/architects/Aviral_Design_Studio/image04.png',
21+
'../../../public/architects/Aviral_Design_Studio/image05.png',
22+
'../../../public/architects/Aviral_Design_Studio/image06.png',
23+
],
24+
},
25+
{
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+
}
37+
];
38+
839
const Architecture: React.FC = () => {
940
const navigate = useNavigate();
1041

@@ -42,6 +73,37 @@ const Architecture: React.FC = () => {
4273
</div>
4374
</div>
4475

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>
82+
</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) => (
91+
<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)]"
94+
>
95+
<img
96+
src={img}
97+
alt={`${section.title} Project ${index + 1}`}
98+
className="w-full h-60 object-cover"
99+
/>
100+
</div>
101+
))}
102+
</div>
103+
</div>
104+
))}
105+
</div>
106+
45107
<div className="mt-20">
46108
<Footer />
47109
</div>

0 commit comments

Comments
 (0)