Skip to content

Commit bcce2c7

Browse files
092vk092vk
authored
Merge pull request #33 from MYSTICxSAM/devsam
Solution Component on Home Page
2 parents 77eba23 + 679728b commit bcce2c7

4 files changed

Lines changed: 154 additions & 5 deletions

File tree

‎src/components/Hero.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const Hero: React.FC = () => {
9191
</svg>
9292
</div>
9393
<div className="text-white">
94-
<p className="font-semibold text-lg">{t('hero.carpentryServices')}</p>
94+
<p className="font-semibold text-lg">{t('hero.Services')}</p>
9595
<p className="text-white/80 text-sm">{t('hero.professionalsAvailable')}</p>
9696
</div>
9797
</div>

‎src/components/Solutions.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import React from "react";
2+
import { Card, CardContent } from "@/components/ui/card";
3+
import { Link } from "react-router-dom";
4+
import { HardHat, Truck, Building2, Hammer, Users } from "lucide-react";
5+
6+
const ArchitectPageCards: React.FC = () => {
7+
const cards = [
8+
{
9+
title: "Worker",
10+
link: "/categories/workers",
11+
icon: <Users size={36} className="text-red-600 mb-2" />,
12+
img: "https://www.shutterstock.com/image-photo/uttar-pradesh-india-feb-18-600nw-2056375556.jpg",
13+
},
14+
{
15+
title: "Material Supplier",
16+
link: "/categories/suppliers",
17+
icon: <Truck size={36} className="text-green-600 mb-2" />,
18+
img: "https://5.imimg.com/data5/ANDROID/Default/2024/7/435955371/OY/II/MI/199425361/product-jpeg.jpg",
19+
},
20+
{
21+
title: "Architect",
22+
link: "/categories/architects",
23+
icon: <Building2 size={36} className="text-blue-600 mb-2" />,
24+
img: "https://media.istockphoto.com/id/473849812/photo/female-architect.jpg?s=612x612&w=0&k=20&c=sn4gWawpyE_wPQyl7tURhnj6sIsmrGitbpuHDTOEnDc=",
25+
},
26+
{
27+
title: "Contractor",
28+
link: "/categories/contractors",
29+
icon: <Hammer size={36} className="text-purple-600 mb-2" />,
30+
img: "https://media.istockphoto.com/id/2158230802/photo/happy-home-owner-and-construction-site-worker-handshaking-at-renovating-house.jpg?s=612x612&w=0&k=20&c=6DZv143Y_FE58cowOF0iWV6cvxnys8kzRwE0zkLgXkE=",
31+
},
32+
{
33+
title: "Developer",
34+
link: "/categories/developers",
35+
icon: <HardHat size={36} className="text-yellow-600 mb-2" />,
36+
img: "https://cdn-employer-wp.arc.dev/wp-content/uploads/2022/04/good-software-developer-1128x635.jpg",
37+
},
38+
];
39+
40+
return (
41+
<section className="py-10 bg-white">
42+
<style>
43+
{`
44+
@keyframes borderAnimation {
45+
0% { background-position: 0% 50%; }
46+
50% { background-position: 100% 50%; }
47+
100% { background-position: 0% 50%; }
48+
}
49+
50+
.animated-border {
51+
padding: 3px; /* thickness */
52+
border-radius: 1rem;
53+
background: conic-gradient(red, orange, yellow, green, blue, indigo, violet, red);
54+
background-size: 300% 300%;
55+
animation: borderAnimation 5s linear infinite;
56+
}
57+
58+
.card-inner {
59+
border-radius: 1rem;
60+
overflow: hidden;
61+
background: white;
62+
}
63+
`}
64+
</style>
65+
66+
<div className="container mx-auto px-4">
67+
<h2 className="text-4xl font-bold text-center mb-14 text-gray-800">
68+
<span className="text-blue-600">GoBuild</span> Solutions
69+
</h2>
70+
71+
{/* Desktop */}
72+
<div className="hidden md:grid grid-cols-2 lg:grid-cols-5 gap-8">
73+
{cards.map((card, idx) => (
74+
<Link key={idx} to={card.link}>
75+
<div className="animated-border">
76+
<Card className="card-inner transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
77+
<div className="h-28 w-full">
78+
<img
79+
src={card.img}
80+
alt={card.title}
81+
className="w-full h-full object-cover"
82+
/>
83+
</div>
84+
<CardContent className="flex flex-col items-center justify-center py-6 bg-gradient-to-b from-white to-gray-50">
85+
{card.icon}
86+
<h3 className="text-xl font-semibold text-gray-700 mt-2">
87+
{card.title}
88+
</h3>
89+
</CardContent>
90+
</Card>
91+
</div>
92+
</Link>
93+
))}
94+
</div>
95+
96+
{/* Mobile */}
97+
<div className="md:hidden flex flex-col items-center gap-5">
98+
<Link to={cards[0].link} className="w-full">
99+
<div className="animated-border">
100+
<Card className="card-inner transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
101+
<div className="h-40 w-full">
102+
<img
103+
src={cards[0].img}
104+
alt={cards[0].title}
105+
className="w-full h-full object-cover"
106+
/>
107+
</div>
108+
<CardContent className="flex flex-col items-center justify-center py-5 bg-gradient-to-b from-white to-gray-50">
109+
{cards[0].icon}
110+
<h3 className="text-lg font-semibold text-gray-700 mt-2">
111+
{cards[0].title}
112+
</h3>
113+
</CardContent>
114+
</Card>
115+
</div>
116+
</Link>
117+
118+
<div className="grid grid-cols-2 gap-4 w-full">
119+
{cards.slice(1).map((card, idx) => (
120+
<Link key={idx} to={card.link}>
121+
<div className="animated-border">
122+
<Card className="card-inner transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
123+
<div className="h-24 w-full">
124+
<img
125+
src={card.img}
126+
alt={card.title}
127+
className="w-full h-full object-cover"
128+
/>
129+
</div>
130+
<CardContent className="flex flex-col items-center justify-center py-4 bg-gradient-to-b from-white to-gray-50">
131+
{card.icon}
132+
<h3 className="text-base font-semibold text-gray-700 mt-2">
133+
{card.title}
134+
</h3>
135+
</CardContent>
136+
</Card>
137+
</div>
138+
</Link>
139+
))}
140+
</div>
141+
</div>
142+
</div>
143+
</section>
144+
);
145+
};
146+
147+
export default ArchitectPageCards;

‎src/locales/en.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@
1616
"popularServices": "Popular Services:"
1717
},
1818
"hero": {
19-
"t1":"Find",
20-
"title": " Expert Professionals",
21-
"t2":" for Any Job",
19+
"t1":"Hire",
20+
"title": "Skilled Workers",
21+
"t2":"in Minutes",
2222
"subtitle": "Connect with skilled professionals for all your home and office needs - from carpentry to architecture, plumbing to electrical work, all in one place.",
2323
"searchPlaceholder": "Search services",
2424
"searchButton": "Search",
2525
"verifiedExperts": "Verified Experts",
2626
"backgroundChecked": "Background Checked",
2727
"happyCustomers": "Happy Customers",
28-
"carpentryServices": "Carpentry Services",
28+
"Services": "Worker Services",
2929
"professionalsAvailable": "20+ Skilled Professionals Available Now"
3030
},
3131
"services": {

‎src/pages/Index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import HeroForm from "@/components/HeroForm";
1212
import FAQ from "../components/FAQ";
1313
import Bmodel from "@/components/Bmodel";
1414
import VideoTestimonials from "@/components/VideoTestimonials";
15+
import Solutions from "@/components/Solutions";
1516
// import { Banner } from "@/components/Banner";
1617

1718
const Index: React.FC = () => {
@@ -50,6 +51,7 @@ const Index: React.FC = () => {
5051
{/* <Banner/> */}
5152
<Bmodel/>
5253
<HeroForm/>
54+
<Solutions/>
5355
<WorkerCategories />
5456
{/* <ServiceCategories /> */}
5557
<HowItWorks />

0 commit comments

Comments
 (0)