Skip to content

Commit c456467

Browse files
mdazfar2mdazfar2
authored
Merge pull request #1470 from Ayushmaanagarwal1211/Auth1
Added Page
2 parents 5683c57 + 9980f21 commit c456467

File tree

3 files changed

+317
-7
lines changed

3 files changed

+317
-7
lines changed

‎website3.0/components/Footer.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@ function Footer() {
1414
const isProfile = pathname && pathname.startsWith("/profile"); // Check if path starts with '/admin'
1515
const isDevopsForum = pathname && pathname.startsWith("/devopsforum");
1616
const isCreateForum = pathname && pathname.startsWith("/createforum");
17+
const isPremium = pathname && pathname.startsWith("/infrawise");
18+
1719
let { theme } = useContext(Context);
1820
return (
1921
<div
2022
className={`${theme ? "bg-gray-100" : "bg-[#1e1d1d]"} ${
21-
isAdmin || isProfile || isDevopsForum || isCreateForum ? "hidden" : "block"
23+
isAdmin || isProfile || isDevopsForum || isCreateForum ||isPremium? "hidden" : "block"
2224
} pt-12 pb-6 flex flex-col items-center justify-center text-center w-full transition-colors duration-500`}
2325
>
2426
{/* Social media icons */}

‎website3.0/components/Header.js

+8-6
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ const Header = () => {
2727
const isProfile = pathname && pathname.startsWith("/profile"); // Check if path starts with '/profile'
2828
const isCreateBlog = pathname && pathname.startsWith("/createblog"); // Check if path starts with '/createblog'
2929
const isDevopsForum = pathname && pathname.startsWith("/devopsforum");
30+
const isPremium = pathname && pathname.startsWith("/infrawise");
31+
3032
const isCreateForum = pathname && pathname.startsWith("/createforum");
3133
let { theme, isAdminShow, isLogin, setIsPopup, setMsg, setSearchedBlog } =
3234
useContext(Context);
@@ -107,7 +109,7 @@ const Header = () => {
107109
} z-50 fixed top-0 transition-all overflow-hidden py-2 ${
108110
show ? "top-0" : "top-[-550px]"
109111
} ${isAdmin ? "hidden" : "block"} ${
110-
isBlogs || isCreateBlog || isProfile || isDevopsForum || isCreateForum
112+
isBlogs || isCreateBlog || isProfile || isDevopsForum || isCreateForum
111113
? "hidden"
112114
: "block"
113115
} `}
@@ -132,7 +134,7 @@ const Header = () => {
132134
theme
133135
? "bg-white shadow-gray-300"
134136
: "bg-[#393838] shadow-[#000000a6]"
135-
} list-none flex gap-5 py-2 px-5 nav_links rounded-3xl flex-wrap justify-center shadow-md justify-self-end max-xl:hidden transition-colors duration-500`}
137+
} ${isPremium?"opacity-0":""} list-none flex gap-5 py-2 px-5 nav_links rounded-3xl flex-wrap justify-center shadow-md justify-self-end max-xl:hidden transition-colors duration-500`}
136138
>
137139
<li
138140
className={`${
@@ -164,8 +166,8 @@ const Header = () => {
164166
</li>
165167
</ul>
166168
{/* Navigation actions (sponsor button and toggle switch) */}
167-
<div className="flex items-center gap-2">
168-
{isAdminShow ? (
169+
<div className={`${isPremium?"hidden":""} flex items-center gap-2 `}>
170+
{(isAdminShow ? (
169171
<a href="https://www.helpopshub.com/admin" target="_blank">
170172
<button
171173
className={`${
@@ -192,7 +194,7 @@ const Header = () => {
192194
Sponsor
193195
</button>
194196
</a>
195-
)}
197+
))}
196198
<div className="block max-xl:hidden">
197199
<AuthButton />
198200
</div>
@@ -204,7 +206,7 @@ const Header = () => {
204206
</div>
205207
{/* Hamburger menu icon for mobile */}
206208
<div
207-
className={`hamburger ${isActive ? "open" : ""}`}
209+
className={`hamburger ${isActive ? "open" : ""} ${isPremium?"hidden":""}`}
208210
id="hamburger"
209211
onClick={toggleMenu}
210212
>

‎website3.0/src/app/infrawise/page.js

+306
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
"use client"
2+
import React, { useState } from 'react';
3+
import {
4+
Users,
5+
CheckCircle2,
6+
Video,
7+
Star,
8+
ChevronRight,
9+
Search,
10+
Github,
11+
Linkedin,
12+
Mail,
13+
Twitter,
14+
Instagram,
15+
Filter
16+
} from 'lucide-react';
17+
18+
19+
20+
const experts = [
21+
{
22+
id: 1,
23+
name: "Sanya Gupta",
24+
title: "CI/CD Specialist",
25+
experience: "5+ Years of Expertise",
26+
price: 500,
27+
skills: ["Docker", "Jenkins", "GitLab CI"],
28+
image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
29+
rating: 4.9,
30+
social: {
31+
linkedin: "#",
32+
github: "#",
33+
email: "[email protected]",
34+
twitter: "#",
35+
instagram: "#"
36+
}
37+
},
38+
{
39+
id: 2,
40+
name: "Raj Patel",
41+
title: "Cloud Architecture Expert",
42+
experience: "7+ Years of Expertise",
43+
price: 300,
44+
skills: ["AWS", "Terraform", "Kubernetes"],
45+
image: "https://images.unsplash.com/photo-1556157382-97eda2d62296",
46+
rating: 5.0,
47+
social: {
48+
linkedin: "#",
49+
github: "#",
50+
email: "[email protected]",
51+
twitter: "#",
52+
instagram: "#"
53+
}
54+
},
55+
{
56+
id: 3,
57+
name: "Lisa Chen",
58+
title: "DevSecOps Engineer",
59+
experience: "6+ Years of Expertise",
60+
price: 250,
61+
skills: ["Security", "Ansible", "Vault"],
62+
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956",
63+
rating: 4.8,
64+
social: {
65+
linkedin: "#",
66+
github: "#",
67+
email: "[email protected]",
68+
twitter: "#",
69+
instagram: "#"
70+
}
71+
},
72+
{
73+
id: 4,
74+
name: "Alex Kumar",
75+
title: "SRE Specialist",
76+
experience: "4+ Years of Expertise",
77+
price: 200,
78+
skills: ["Prometheus", "Grafana", "SLOs"],
79+
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
80+
rating: 4.9,
81+
social: {
82+
linkedin: "#",
83+
github: "#",
84+
email: "[email protected]",
85+
twitter: "#",
86+
instagram: "#"
87+
}
88+
}
89+
];
90+
91+
const skillCategories = [
92+
"All",
93+
"CI/CD",
94+
"Cloud Infrastructure",
95+
"Kubernetes",
96+
"DevSecOps",
97+
"SRE",
98+
"Automation"
99+
];
100+
101+
function page() {
102+
const [selectedExpert, setSelectedExpert] = useState(null);
103+
const [showPayment, setShowPayment] = useState(false);
104+
const [searchTerm, setSearchTerm] = useState("");
105+
const [selectedSkill, setSelectedSkill] = useState("All");
106+
107+
const handleConnect = (expert) => {
108+
setSelectedExpert(expert);
109+
setShowPayment(true);
110+
};
111+
112+
const filteredExperts = experts.filter(expert => {
113+
console.log(expert)
114+
const matchesSearch = expert.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
115+
expert.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()));
116+
const matchesSkill = selectedSkill === "All" || expert.skills.some(skill => skill.includes(selectedSkill));
117+
return matchesSearch && matchesSkill;
118+
});
119+
120+
return (
121+
<div className="min-h-screen bg-gradient-to-br from-blue-500 via-teal-400 to-white">
122+
{/* Hero Section */}
123+
<section className="px-6 py-20 pt-[10rem] text-center text-white relative overflow-hidden">
124+
<div className="max-w-4xl mx-auto relative z-10">
125+
<h1 className="text-5xl font-bold mb-6">
126+
Find Your DevOps Expert – Solve Problems Faster
127+
</h1>
128+
<p className="text-xl mb-8 opacity-90">
129+
Connect with skilled professionals to streamline your DevOps tasks effortlessly
130+
</p>
131+
<button
132+
onClick={() => document.getElementById('experts')?.scrollIntoView({ behavior: 'smooth' })}
133+
className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all"
134+
>
135+
Explore Experts <ChevronRight className="inline ml-2" size={20} />
136+
</button>
137+
</div>
138+
</section>
139+
140+
{/* Expert Search and Filter */}
141+
<section className="px-6 py-16 bg-gray-50">
142+
<div className="max-w-6xl mx-auto">
143+
<div className="flex flex-col md:flex-row gap-4 mb-8">
144+
<div className="flex-1 relative">
145+
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
146+
<input
147+
type="text"
148+
placeholder="Search experts by name or skill..."
149+
value={searchTerm}
150+
onChange={(e) => setSearchTerm(e.target.value)}
151+
className="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
152+
/>
153+
</div>
154+
<div className="flex items-center gap-2">
155+
<Filter size={20} className="text-gray-600" />
156+
<select
157+
value={selectedSkill}
158+
onChange={(e) => setSelectedSkill(e.target.value)}
159+
className="px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
160+
>
161+
{skillCategories.map((skill) => (
162+
<option key={skill} value={skill}>{skill}</option>
163+
))}
164+
</select>
165+
</div>
166+
</div>
167+
</div>
168+
</section>
169+
170+
{/* Expert Showcase */}
171+
<section id="experts" className="px-6 py-16 bg-white">
172+
<div className="max-w-6xl mx-auto">
173+
<h2 className="text-3xl font-bold text-center mb-12">Our DevOps Experts</h2>
174+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
175+
{filteredExperts.map((expert) => (
176+
<div key={expert.id} className="bg-white rounded-xl shadow-lg p-6 transform hover:scale-105 transition-all">
177+
<img
178+
src={expert.image}
179+
alt={expert.name}
180+
className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
181+
/>
182+
<h3 className="text-xl font-semibold text-center">{expert.name}</h3>
183+
<p className="text-blue-600 text-center mb-2">{expert.title}</p>
184+
<p className="text-gray-600 text-center text-sm mb-4">{expert.experience}</p>
185+
<div className="flex items-center justify-between mb-4">
186+
<div className="flex items-center">
187+
<Star className="text-yellow-400 fill-current" size={16} />
188+
<span className="ml-1 text-gray-700">{expert.rating}</span>
189+
</div>
190+
<span className="font-semibold">₹{expert.price}</span>
191+
</div>
192+
{/* Social Media Links */}
193+
<div className="flex justify-center gap-3 mb-4">
194+
<a href={expert.social.linkedin} className="text-gray-600 hover:text-blue-600">
195+
<Linkedin size={18} />
196+
</a>
197+
<a href={expert.social.github} className="text-gray-600 hover:text-blue-600">
198+
<Github size={18} />
199+
</a>
200+
<a href={`mailto:${expert.social.email}`} className="text-gray-600 hover:text-blue-600">
201+
<Mail size={18} />
202+
</a>
203+
<a href={expert.social.twitter} className="text-gray-600 hover:text-blue-600">
204+
<Twitter size={18} />
205+
</a>
206+
<a href={expert.social.instagram} className="text-gray-600 hover:text-blue-600">
207+
<Instagram size={18} />
208+
</a>
209+
</div>
210+
<button
211+
onClick={() => handleConnect(expert)}
212+
className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
213+
>
214+
Connect Now
215+
</button>
216+
</div>
217+
))}
218+
</div>
219+
</div>
220+
</section>
221+
222+
{/* How It Works */}
223+
<section className="px-6 py-16 bg-gray-50">
224+
<div className="max-w-4xl mx-auto">
225+
<h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
226+
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
227+
<div className="text-center">
228+
<Users className="w-16 h-16 mx-auto mb-4 text-blue-600" />
229+
<h3 className="text-xl font-semibold mb-2">Choose an Expert</h3>
230+
<p className="text-gray-600">Browse profiles and select the expert who fits your needs</p>
231+
</div>
232+
<div className="text-center">
233+
<CheckCircle2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
234+
<h3 className="text-xl font-semibold mb-2">Make Payment</h3>
235+
<p className="text-gray-600">Complete secure payment to book your session</p>
236+
</div>
237+
<div className="text-center">
238+
<Video className="w-16 h-16 mx-auto mb-4 text-blue-600" />
239+
<h3 className="text-xl font-semibold mb-2">Collaborate Easily</h3>
240+
<p className="text-gray-600">Get a Google Meet link for your live session</p>
241+
</div>
242+
</div>
243+
</div>
244+
</section>
245+
246+
{/* Payment Modal */}
247+
{showPayment && selectedExpert && (
248+
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
249+
<div className="bg-white rounded-xl p-6 max-w-md w-full">
250+
<h3 className="text-2xl font-bold mb-4">Complete Your Booking</h3>
251+
<div className="flex items-center mb-6">
252+
<img
253+
src={selectedExpert.image}
254+
alt={selectedExpert.name}
255+
className="w-16 h-16 rounded-full object-cover"
256+
/>
257+
<div className="ml-4">
258+
<h4 className="font-semibold">{selectedExpert.name}</h4>
259+
<p className="text-gray-600">{selectedExpert.title}</p>
260+
</div>
261+
</div>
262+
<div className="border-t border-b py-4 mb-6">
263+
<div className="flex justify-between mb-2">
264+
<span>Session Fee</span>
265+
<span className="font-semibold">₹{selectedExpert.price}</span>
266+
</div>
267+
<p className="text-sm text-gray-600">
268+
After payment, you'll receive a Google Meet link for your session
269+
</p>
270+
</div>
271+
<div className="flex gap-4">
272+
<button
273+
onClick={() => setShowPayment(false)}
274+
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
275+
>
276+
Cancel
277+
</button>
278+
<button
279+
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
280+
>
281+
Pay ₹{selectedExpert.price}
282+
</button>
283+
</div>
284+
</div>
285+
</div>
286+
)}
287+
288+
{/* Footer */}
289+
<footer className="bg-gray-900 text-white px-6 py-12">
290+
<div className="max-w-4xl mx-auto text-center">
291+
<h2 className="text-2xl font-bold mb-4">
292+
Simplifying DevOps Collaboration – One Expert at a Time
293+
</h2>
294+
<p className="text-gray-400 mb-6">
295+
Part of HelpOps-Hub | Contact: [email protected]
296+
</p>
297+
<p className="text-sm text-gray-500">
298+
© 2024 helpops. All payments are secure and processed by trusted payment partners.
299+
</p>
300+
</div>
301+
</footer>
302+
</div>
303+
);
304+
}
305+
306+
export default page;

0 commit comments

Comments
 (0)