Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added plans page #1469

Closed
wants to merge 4 commits into from
Closed

Added plans page #1469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d3c1b6
added page
Ayushmaanagarwal1211 Jan 13, 2025
114e109
Removed footer and header Links
Ayushmaanagarwal1211 Jan 13, 2025
c3c8b40
fixed bug and changed to infrawise
Ayushmaanagarwal1211 Jan 13, 2025
9980f21
fixed
Ayushmaanagarwal1211 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion website3.0/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,13 @@ function Footer() {
const isProfile = pathname && pathname.startsWith("/profile"); // Check if path starts with '/admin'
const isDevopsForum = pathname && pathname.startsWith("/devopsforum");
const isCreateForum = pathname && pathname.startsWith("/createforum");
const isPremium = pathname && pathname.startsWith("/infrawise");

let { theme } = useContext(Context);
return (
<div
className={`${theme ? "bg-gray-100" : "bg-[#1e1d1d]"} ${
isAdmin || isProfile || isDevopsForum || isCreateForum ? "hidden" : "block"
isAdmin || isProfile || isDevopsForum || isCreateForum ||isPremium? "hidden" : "block"
} pt-12 pb-6 flex flex-col items-center justify-center text-center w-full transition-colors duration-500`}
>
{/* Social media icons */}
Expand Down
14 changes: 8 additions & 6 deletions website3.0/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const Header = () => {
const isProfile = pathname && pathname.startsWith("/profile"); // Check if path starts with '/profile'
const isCreateBlog = pathname && pathname.startsWith("/createblog"); // Check if path starts with '/createblog'
const isDevopsForum = pathname && pathname.startsWith("/devopsforum");
const isPremium = pathname && pathname.startsWith("/infrawise");

const isCreateForum = pathname && pathname.startsWith("/createforum");
let { theme, isAdminShow, isLogin, setIsPopup, setMsg, setSearchedBlog } =
useContext(Context);
Expand Down Expand Up @@ -107,7 +109,7 @@ const Header = () => {
} z-50 fixed top-0 transition-all overflow-hidden py-2 ${
show ? "top-0" : "top-[-550px]"
} ${isAdmin ? "hidden" : "block"} ${
isBlogs || isCreateBlog || isProfile || isDevopsForum || isCreateForum
isBlogs || isCreateBlog || isProfile || isDevopsForum || isCreateForum
? "hidden"
: "block"
} `}
Expand All @@ -132,7 +134,7 @@ const Header = () => {
theme
? "bg-white shadow-gray-300"
: "bg-[#393838] shadow-[#000000a6]"
} 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`}
} ${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`}
>
<li
className={`${
Expand Down Expand Up @@ -164,8 +166,8 @@ const Header = () => {
</li>
</ul>
{/* Navigation actions (sponsor button and toggle switch) */}
<div className="flex items-center gap-2">
{isAdminShow ? (
<div className={`${isPremium?"hidden":""} flex items-center gap-2 `}>
{(isAdminShow ? (
<a href="https://www.helpopshub.com/admin" target="_blank">
<button
className={`${
Expand All @@ -192,7 +194,7 @@ const Header = () => {
Sponsor
</button>
</a>
)}
))}
<div className="block max-xl:hidden">
<AuthButton />
</div>
Expand All @@ -204,7 +206,7 @@ const Header = () => {
</div>
{/* Hamburger menu icon for mobile */}
<div
className={`hamburger ${isActive ? "open" : ""}`}
className={`hamburger ${isActive ? "open" : ""} ${isPremium?"hidden":""}`}
id="hamburger"
onClick={toggleMenu}
>
Expand Down
306 changes: 306 additions & 0 deletions website3.0/src/app/infrawise/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,306 @@
"use client"
import React, { useState } from 'react';
import {
Users,
CheckCircle2,
Video,
Star,
ChevronRight,
Search,
Github,
Linkedin,
Mail,
Twitter,
Instagram,
Filter
} from 'lucide-react';



const experts = [
{
id: 1,
name: "Sanya Gupta",
title: "CI/CD Specialist",
experience: "5+ Years of Expertise",
price: 500,
skills: ["Docker", "Jenkins", "GitLab CI"],
image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
rating: 4.9,
social: {
linkedin: "#",
github: "#",
email: "[email protected]",
twitter: "#",
instagram: "#"
}
},
{
id: 2,
name: "Raj Patel",
title: "Cloud Architecture Expert",
experience: "7+ Years of Expertise",
price: 300,
skills: ["AWS", "Terraform", "Kubernetes"],
image: "https://images.unsplash.com/photo-1556157382-97eda2d62296",
rating: 5.0,
social: {
linkedin: "#",
github: "#",
email: "[email protected]",
twitter: "#",
instagram: "#"
}
},
{
id: 3,
name: "Lisa Chen",
title: "DevSecOps Engineer",
experience: "6+ Years of Expertise",
price: 250,
skills: ["Security", "Ansible", "Vault"],
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956",
rating: 4.8,
social: {
linkedin: "#",
github: "#",
email: "[email protected]",
twitter: "#",
instagram: "#"
}
},
{
id: 4,
name: "Alex Kumar",
title: "SRE Specialist",
experience: "4+ Years of Expertise",
price: 200,
skills: ["Prometheus", "Grafana", "SLOs"],
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
rating: 4.9,
social: {
linkedin: "#",
github: "#",
email: "[email protected]",
twitter: "#",
instagram: "#"
}
}
];

const skillCategories = [
"All",
"CI/CD",
"Cloud Infrastructure",
"Kubernetes",
"DevSecOps",
"SRE",
"Automation"
];

function page() {
const [selectedExpert, setSelectedExpert] = useState(null);
const [showPayment, setShowPayment] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
const [selectedSkill, setSelectedSkill] = useState("All");

const handleConnect = (expert) => {
setSelectedExpert(expert);
setShowPayment(true);
};

const filteredExperts = experts.filter(expert => {
console.log(expert)
const matchesSearch = expert.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
expert.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesSkill = selectedSkill === "All" || expert.skills.some(skill => skill.includes(selectedSkill));
return matchesSearch && matchesSkill;
});

return (
<div className="min-h-screen bg-gradient-to-br from-blue-500 via-teal-400 to-white">
{/* Hero Section */}
<section className="px-6 py-20 pt-[10rem] text-center text-white relative overflow-hidden">
<div className="max-w-4xl mx-auto relative z-10">
<h1 className="text-5xl font-bold mb-6">
Find Your DevOps Expert – Solve Problems Faster
</h1>
<p className="text-xl mb-8 opacity-90">
Connect with skilled professionals to streamline your DevOps tasks effortlessly
</p>
<button
onClick={() => document.getElementById('experts')?.scrollIntoView({ behavior: 'smooth' })}
className="bg-white text-blue-600 px-8 py-3 rounded-full font-semibold hover:bg-opacity-90 transition-all"
>
Explore Experts <ChevronRight className="inline ml-2" size={20} />
</button>
</div>
</section>

{/* Expert Search and Filter */}
<section className="px-6 py-16 bg-gray-50">
<div className="max-w-6xl mx-auto">
<div className="flex flex-col md:flex-row gap-4 mb-8">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
<input
type="text"
placeholder="Search experts by name or skill..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
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"
/>
</div>
<div className="flex items-center gap-2">
<Filter size={20} className="text-gray-600" />
<select
value={selectedSkill}
onChange={(e) => setSelectedSkill(e.target.value)}
className="px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
{skillCategories.map((skill) => (
<option key={skill} value={skill}>{skill}</option>
))}
</select>
</div>
</div>
</div>
</section>

{/* Expert Showcase */}
<section id="experts" className="px-6 py-16 bg-white">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">Our DevOps Experts</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{filteredExperts.map((expert) => (
<div key={expert.id} className="bg-white rounded-xl shadow-lg p-6 transform hover:scale-105 transition-all">
<img
src={expert.image}
alt={expert.name}
className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
/>
<h3 className="text-xl font-semibold text-center">{expert.name}</h3>
<p className="text-blue-600 text-center mb-2">{expert.title}</p>
<p className="text-gray-600 text-center text-sm mb-4">{expert.experience}</p>
<div className="flex items-center justify-between mb-4">
<div className="flex items-center">
<Star className="text-yellow-400 fill-current" size={16} />
<span className="ml-1 text-gray-700">{expert.rating}</span>
</div>
<span className="font-semibold">₹{expert.price}</span>
</div>
{/* Social Media Links */}
<div className="flex justify-center gap-3 mb-4">
<a href={expert.social.linkedin} className="text-gray-600 hover:text-blue-600">
<Linkedin size={18} />
</a>
<a href={expert.social.github} className="text-gray-600 hover:text-blue-600">
<Github size={18} />
</a>
<a href={`mailto:${expert.social.email}`} className="text-gray-600 hover:text-blue-600">
<Mail size={18} />
</a>
<a href={expert.social.twitter} className="text-gray-600 hover:text-blue-600">
<Twitter size={18} />
</a>
<a href={expert.social.instagram} className="text-gray-600 hover:text-blue-600">
<Instagram size={18} />
</a>
</div>
<button
onClick={() => handleConnect(expert)}
className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors"
>
Connect Now
</button>
</div>
))}
</div>
</div>
</section>

{/* How It Works */}
<section className="px-6 py-16 bg-gray-50">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center">
<Users className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<h3 className="text-xl font-semibold mb-2">Choose an Expert</h3>
<p className="text-gray-600">Browse profiles and select the expert who fits your needs</p>
</div>
<div className="text-center">
<CheckCircle2 className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<h3 className="text-xl font-semibold mb-2">Make Payment</h3>
<p className="text-gray-600">Complete secure payment to book your session</p>
</div>
<div className="text-center">
<Video className="w-16 h-16 mx-auto mb-4 text-blue-600" />
<h3 className="text-xl font-semibold mb-2">Collaborate Easily</h3>
<p className="text-gray-600">Get a Google Meet link for your live session</p>
</div>
</div>
</div>
</section>

{/* Payment Modal */}
{showPayment && selectedExpert && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
<div className="bg-white rounded-xl p-6 max-w-md w-full">
<h3 className="text-2xl font-bold mb-4">Complete Your Booking</h3>
<div className="flex items-center mb-6">
<img
src={selectedExpert.image}
alt={selectedExpert.name}
className="w-16 h-16 rounded-full object-cover"
/>
<div className="ml-4">
<h4 className="font-semibold">{selectedExpert.name}</h4>
<p className="text-gray-600">{selectedExpert.title}</p>
</div>
</div>
<div className="border-t border-b py-4 mb-6">
<div className="flex justify-between mb-2">
<span>Session Fee</span>
<span className="font-semibold">₹{selectedExpert.price}</span>
</div>
<p className="text-sm text-gray-600">
After payment, you'll receive a Google Meet link for your session
</p>
</div>
<div className="flex gap-4">
<button
onClick={() => setShowPayment(false)}
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50"
>
Cancel
</button>
<button
className="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Pay ₹{selectedExpert.price}
</button>
</div>
</div>
</div>
)}

{/* Footer */}
<footer className="bg-gray-900 text-white px-6 py-12">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-2xl font-bold mb-4">
Simplifying DevOps Collaboration – One Expert at a Time
</h2>
<p className="text-gray-400 mb-6">
Part of HelpOps-Hub | Contact: [email protected]
</p>
<p className="text-sm text-gray-500">
© 2024 helpops. All payments are secure and processed by trusted payment partners.
</p>
</div>
</footer>
</div>
);
}

export default page;
Loading