diff --git a/website3.0/components/Footer.js b/website3.0/components/Footer.js index b0f1a7ff..79f3c880 100644 --- a/website3.0/components/Footer.js +++ b/website3.0/components/Footer.js @@ -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 (
{/* Social media icons */} diff --git a/website3.0/components/Header.js b/website3.0/components/Header.js index ced36829..6ca8b566 100644 --- a/website3.0/components/Header.js +++ b/website3.0/components/Header.js @@ -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); @@ -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" } `} @@ -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`} >
  • {
    • {/* Navigation actions (sponsor button and toggle switch) */} -
    - {isAdminShow ? ( +
    + {(isAdminShow ? ( - )} + ))}
    @@ -204,7 +206,7 @@ const Header = () => {
    {/* Hamburger menu icon for mobile */}
    diff --git a/website3.0/src/app/infrawise/page.js b/website3.0/src/app/infrawise/page.js new file mode 100644 index 00000000..6de4ee3e --- /dev/null +++ b/website3.0/src/app/infrawise/page.js @@ -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: "sanya@example.com", + 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: "raj@example.com", + 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: "lisa@example.com", + 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: "alex@example.com", + 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 ( +
    + {/* Hero Section */} +
    +
    +

    + Find Your DevOps Expert – Solve Problems Faster +

    +

    + Connect with skilled professionals to streamline your DevOps tasks effortlessly +

    + +
    +
    + + {/* Expert Search and Filter */} +
    +
    +
    +
    + + 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" + /> +
    +
    + + +
    +
    +
    +
    + + {/* Expert Showcase */} +
    +
    +

    Our DevOps Experts

    +
    + {filteredExperts.map((expert) => ( +
    + {expert.name} +

    {expert.name}

    +

    {expert.title}

    +

    {expert.experience}

    +
    +
    + + {expert.rating} +
    + ₹{expert.price} +
    + {/* Social Media Links */} + + +
    + ))} +
    +
    +
    + + {/* How It Works */} +
    +
    +

    How It Works

    +
    +
    + +

    Choose an Expert

    +

    Browse profiles and select the expert who fits your needs

    +
    +
    + +

    Make Payment

    +

    Complete secure payment to book your session

    +
    +
    +
    +
    +
    +
    + + {/* Payment Modal */} + {showPayment && selectedExpert && ( +
    +
    +

    Complete Your Booking

    +
    + {selectedExpert.name} +
    +

    {selectedExpert.name}

    +

    {selectedExpert.title}

    +
    +
    +
    +
    + Session Fee + ₹{selectedExpert.price} +
    +

    + After payment, you'll receive a Google Meet link for your session +

    +
    +
    + + +
    +
    +
    + )} + + {/* Footer */} + +
    + ); +} + +export default page; \ No newline at end of file