{"id":1460,"date":"2025-10-12T12:03:43","date_gmt":"2025-10-12T06:33:43","guid":{"rendered":"https:\/\/salasarnews.com\/?page_id=1460"},"modified":"2025-10-12T13:35:01","modified_gmt":"2025-10-12T08:05:01","slug":"our-team-2","status":"publish","type":"page","link":"https:\/\/salasarnews.com\/?page_id=1460","title":{"rendered":"Our Leaders"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1460\" class=\"elementor elementor-1460\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b79e9c e-flex e-con-boxed e-con e-parent\" data-id=\"9b79e9c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4406f25 elementor-widget elementor-widget-html\" data-id=\"4406f25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Our Team - Salasar News<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <style>\r\n        \/* CSS Reset & Base Styles *\/\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n        }\r\n\r\n        :root {\r\n            --primary: #d52b1e;\r\n            --primary-dark: #a81c12;\r\n            --primary-light: #fbeaea;\r\n            --secondary: #f8f9fa;\r\n            --text: #333;\r\n            --text-light: #666;\r\n            --border: #e0e0e0;\r\n            --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\r\n            --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);\r\n            --transition: all 0.3s ease;\r\n            --radius: 12px;\r\n            --radius-sm: 8px;\r\n        }\r\n\r\n        body {\r\n            background-color: #f5f7fa;\r\n            color: var(--text);\r\n            line-height: 1.6;\r\n            font-size: 16px;\r\n            padding: 0;\r\n        }\r\n\r\n        .container {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 16px;\r\n        }\r\n\r\n        \/* Main Content *\/\r\n        .team-section {\r\n            padding: 2rem 0;\r\n        }\r\n\r\n        .section-title {\r\n            text-align: center;\r\n            margin-bottom: 1.5rem;\r\n            position: relative;\r\n        }\r\n\r\n        .section-title h2 {\r\n            font-size: 1.5rem;\r\n            color: var(--primary-dark);\r\n            display: inline-block;\r\n            padding-bottom: 8px;\r\n        }\r\n\r\n        .section-title h2:after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 60px;\r\n            height: 3px;\r\n            background: var(--primary);\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        \/* Mobile-First Layout *\/\r\n        .team-container {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n        }\r\n\r\n        \/* Search Box *\/\r\n        .search-box {\r\n            padding: 16px;\r\n            border-bottom: 1px solid var(--border);\r\n            position: sticky;\r\n            top: 0;\r\n            background: white;\r\n            z-index: 10;\r\n        }\r\n\r\n        .search-box input {\r\n            width: 100%;\r\n            padding: 12px 15px 12px 45px;\r\n            border: 1px solid var(--border);\r\n            border-radius: var(--radius-sm);\r\n            font-size: 1rem;\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .search-box input:focus {\r\n            outline: none;\r\n            border-color: var(--primary);\r\n            box-shadow: 0 0 0 2px rgba(213, 43, 30, 0.2);\r\n        }\r\n\r\n        .search-box i {\r\n            position: absolute;\r\n            left: 30px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            color: var(--text-light);\r\n        }\r\n\r\n        \/* Team List - Mobile Optimized *\/\r\n        .team-list {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            overflow: hidden;\r\n            max-height: 50vh;\r\n            display: flex;\r\n            flex-direction: column;\r\n        }\r\n\r\n        .team-members {\r\n            overflow-y: auto;\r\n            flex: 1;\r\n        }\r\n\r\n        .member-item {\r\n            padding: 16px;\r\n            border-bottom: 1px solid var(--border);\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n\r\n        .member-item:last-child {\r\n            border-bottom: none;\r\n        }\r\n\r\n        .member-item:hover {\r\n            background-color: var(--primary-light);\r\n        }\r\n\r\n        .member-item.active {\r\n            background-color: var(--primary-light);\r\n            border-left: 4px solid var(--primary);\r\n        }\r\n\r\n        .member-avatar {\r\n            width: 44px;\r\n            height: 44px;\r\n            border-radius: 50%;\r\n            overflow: hidden;\r\n            margin-right: 12px;\r\n            background-color: #e0e0e0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-weight: bold;\r\n            color: var(--primary);\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .member-info h3 {\r\n            font-size: 1rem;\r\n            margin-bottom: 4px;\r\n        }\r\n\r\n        .member-info p {\r\n            color: var(--text-light);\r\n            font-size: 0.85rem;\r\n        }\r\n\r\n        \/* Team Detail - Mobile Optimized *\/\r\n        .team-detail {\r\n            background: white;\r\n            border-radius: var(--radius);\r\n            box-shadow: var(--shadow);\r\n            overflow: hidden;\r\n            display: flex;\r\n            flex-direction: column;\r\n            min-height: 60vh;\r\n        }\r\n\r\n        .detail-header {\r\n            background: white;\r\n            color: var(--text);\r\n            padding: 20px;\r\n            text-align: center;\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .detail-avatar {\r\n            width: 100px;\r\n            height: 100px;\r\n            border-radius: 50%;\r\n            margin: 0 auto 12px;\r\n            overflow: hidden;\r\n            border: 4px solid var(--primary-light);\r\n            background-color: #e0e0e0;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 2rem;\r\n            color: var(--primary);\r\n        }\r\n\r\n        .detail-header h2 {\r\n            font-size: 1.4rem;\r\n            margin-bottom: 5px;\r\n            color: var(--primary-dark);\r\n        }\r\n\r\n        .detail-header p {\r\n            color: var(--text-light);\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .detail-content {\r\n            padding: 20px;\r\n            flex-grow: 1;\r\n            overflow-y: auto;\r\n        }\r\n\r\n        .detail-section {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .detail-section h3 {\r\n            font-size: 1.1rem;\r\n            color: var(--primary);\r\n            margin-bottom: 8px;\r\n            padding-bottom: 6px;\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .detail-section p {\r\n            color: var(--text-light);\r\n            margin-bottom: 8px;\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .info-row {\r\n            display: flex;\r\n            flex-direction: column;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .info-label {\r\n            font-weight: 600;\r\n            color: var(--text);\r\n            font-size: 0.9rem;\r\n            margin-bottom: 2px;\r\n        }\r\n\r\n        .info-value {\r\n            color: var(--text-light);\r\n            font-size: 0.95rem;\r\n        }\r\n\r\n        .social-links {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 16px;\r\n        }\r\n\r\n        .social-links a {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 36px;\r\n            height: 36px;\r\n            border-radius: 50%;\r\n            background: var(--secondary);\r\n            color: var(--primary);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .social-links a:hover {\r\n            background: var(--primary);\r\n            color: white;\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .skills {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 8px;\r\n            margin-top: 8px;\r\n        }\r\n\r\n        .skill-tag {\r\n            background: var(--primary-light);\r\n            color: var(--primary);\r\n            padding: 4px 10px;\r\n            border-radius: 16px;\r\n            font-size: 0.8rem;\r\n        }\r\n\r\n        .no-member-selected {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            height: 100%;\r\n            padding: 30px;\r\n            text-align: center;\r\n            color: var(--text-light);\r\n        }\r\n\r\n        .no-member-selected i {\r\n            font-size: 3rem;\r\n            margin-bottom: 16px;\r\n            color: #e0e0e0;\r\n        }\r\n\r\n        \/* Footer *\/\r\n        footer {\r\n            background: #2c3e50;\r\n            color: white;\r\n            text-align: center;\r\n            padding: 1.5rem 0;\r\n            margin-top: 2rem;\r\n        }\r\n\r\n        footer p {\r\n            margin-bottom: 8px;\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        \/* Tablet Styles *\/\r\n        @media (min-width: 768px) {\r\n            .container {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .team-section {\r\n                padding: 2.5rem 0;\r\n            }\r\n            \r\n            .section-title h2 {\r\n                font-size: 1.75rem;\r\n            }\r\n            \r\n            .team-container {\r\n                flex-direction: row;\r\n                gap: 25px;\r\n            }\r\n            \r\n            .team-list {\r\n                flex: 1;\r\n                max-height: 70vh;\r\n            }\r\n            \r\n            .team-detail {\r\n                flex: 2;\r\n                min-height: 70vh;\r\n            }\r\n            \r\n            .member-item {\r\n                padding: 18px 16px;\r\n            }\r\n            \r\n            .member-avatar {\r\n                width: 48px;\r\n                height: 48px;\r\n            }\r\n            \r\n            .detail-header {\r\n                padding: 25px;\r\n            }\r\n            \r\n            .detail-avatar {\r\n                width: 110px;\r\n                height: 110px;\r\n            }\r\n            \r\n            .detail-header h2 {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .detail-content {\r\n                padding: 25px;\r\n            }\r\n            \r\n            .info-row {\r\n                flex-direction: row;\r\n            }\r\n            \r\n            .info-label {\r\n                min-width: 100px;\r\n                margin-bottom: 0;\r\n            }\r\n        }\r\n\r\n        \/* Desktop Styles *\/\r\n        @media (min-width: 1024px) {\r\n            .container {\r\n                padding: 0 24px;\r\n            }\r\n            \r\n            .team-section {\r\n                padding: 3rem 0;\r\n            }\r\n            \r\n            .section-title h2 {\r\n                font-size: 2rem;\r\n            }\r\n            \r\n            .team-container {\r\n                gap: 30px;\r\n            }\r\n            \r\n            .search-box {\r\n                padding: 20px;\r\n            }\r\n            \r\n            .member-item {\r\n                padding: 18px 20px;\r\n            }\r\n            \r\n            .member-avatar {\r\n                width: 50px;\r\n                height: 50px;\r\n                margin-right: 15px;\r\n            }\r\n            \r\n            .member-info h3 {\r\n                font-size: 1.1rem;\r\n            }\r\n            \r\n            .detail-header {\r\n                padding: 25px;\r\n            }\r\n            \r\n            .detail-avatar {\r\n                width: 120px;\r\n                height: 120px;\r\n                margin-bottom: 15px;\r\n            }\r\n            \r\n            .detail-header h2 {\r\n                font-size: 1.8rem;\r\n            }\r\n            \r\n            .detail-content {\r\n                padding: 25px;\r\n            }\r\n            \r\n            .detail-section h3 {\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .social-links a {\r\n                width: 40px;\r\n                height: 40px;\r\n            }\r\n        }\r\n\r\n        \/* Large Desktop Styles *\/\r\n        @media (min-width: 1200px) {\r\n            .container {\r\n                padding: 0 30px;\r\n            }\r\n        }\r\n\r\n        \/* Accessibility Improvements *\/\r\n        @media (prefers-reduced-motion: reduce) {\r\n            * {\r\n                transition: none !important;\r\n            }\r\n        }\r\n\r\n        \/* High Contrast Mode Support *\/\r\n        @media (prefers-contrast: high) {\r\n            :root {\r\n                --primary: #000000;\r\n                --primary-dark: #000000;\r\n                --text: #000000;\r\n                --text-light: #333333;\r\n                --border: #000000;\r\n            }\r\n            \r\n            .member-item.active {\r\n                border-left-width: 6px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <section class=\"team-section\">\r\n        <div class=\"container\">\r\n            <div class=\"section-title\">\r\n                <h2>Our Team<\/h2>\r\n            <\/div>\r\n            \r\n            <div class=\"team-container\">\r\n                <div class=\"team-list\">\r\n                    <div class=\"search-box\">\r\n                        <i class=\"fas fa-search\"><\/i>\r\n                        <input type=\"text\" id=\"searchInput\" placeholder=\"Search team members...\">\r\n                    <\/div>\r\n                    <div class=\"team-members\" id=\"teamMembers\">\r\n                        <!-- Team members will be dynamically inserted here -->\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"team-detail\">\r\n                    <div class=\"detail-header\">\r\n                        <div class=\"detail-avatar\">\r\n                            <i class=\"fas fa-user\"><\/i>\r\n                        <\/div>\r\n                        <h2 id=\"memberName\">Select a Team Member<\/h2>\r\n                        <p id=\"memberPosition\">Click on a team member to view their details<\/p>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"detail-content\" id=\"memberDetails\">\r\n                        <div class=\"no-member-selected\">\r\n                            <i class=\"fas fa-user-friends\"><\/i>\r\n                            <h3>No Member Selected<\/h3>\r\n                            <p>Please select a team member from the list to view their profile and details.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <footer>\r\n        <div class=\"container\">\r\n            <p>&copy; 2023 Salasar News. All rights reserved.<\/p>\r\n            <p>Bringing you the latest news with accuracy and integrity.<\/p>\r\n        <\/div>\r\n    <\/footer>\r\n\r\n    <script>\r\n        \/\/ Team data based on provided information\r\n        const teamMembers = [\r\n            {\r\n                id: 1,\r\n                name: \"Vinay Prajapati\",\r\n                position: \"Founder (CEO)\",\r\n                email: \"Not provided\",\r\n                idNo: \"Not provided\",\r\n                bio: \"As the Founder and CEO of Salasar News, Vinay Prajapati provides strategic leadership and vision for the organization. He oversees all operations and ensures the company's mission is carried out effectively.\",\r\n                skills: [\"Strategic Planning\", \"Leadership\", \"Business Development\", \"Media Management\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 2,\r\n                name: \"Manoj Chauhan\",\r\n                position: \"Co-Editor In Chief\",\r\n                email: \"chauhanmanoj716@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0004\",\r\n                bio: \"Manoj Chauhan serves as Co-Editor In Chief, working closely with the editorial team to ensure content quality and journalistic integrity. He brings extensive experience in news editing and content management.\",\r\n                skills: [\"Editorial Management\", \"Content Strategy\", \"News Editing\", \"Team Coordination\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 3,\r\n                name: \"Ashish Prajapati\",\r\n                position: \"H.R Head (Co-Founder)\",\r\n                email: \"akp123418@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0003\",\r\n                bio: \"Ashish Prajapati heads the Human Resources department while also serving as a Co-Founder. He focuses on talent acquisition, employee development, and maintaining a positive organizational culture.\",\r\n                skills: [\"Human Resources\", \"Talent Management\", \"Employee Relations\", \"Organizational Development\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 4,\r\n                name: \"Anjani Sharma\",\r\n                position: \"South Gujarat Bureau Chief\",\r\n                email: \"anjani.vapi@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0005\",\r\n                bio: \"Anjani Sharma leads our South Gujarat bureau, overseeing regional news coverage and managing correspondents in the area. Her local expertise ensures comprehensive coverage of South Gujarat.\",\r\n                skills: [\"Bureau Management\", \"Regional Reporting\", \"Team Leadership\", \"Local News Coverage\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 5,\r\n                name: \"Ashwani Rai\",\r\n                position: \"Cameraman\",\r\n                email: \"Ashwani.gzp1992@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0006\",\r\n                bio: \"Ashwani Rai is a skilled cameraman who captures compelling visuals for our news stories. His technical expertise and creative eye enhance our visual storytelling.\",\r\n                skills: [\"Videography\", \"Camera Operation\", \"Visual Storytelling\", \"Technical Setup\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 6,\r\n                name: \"Asha Kumari\",\r\n                position: \"News Anchor\",\r\n                email: \"np450707@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0007\",\r\n                bio: \"Asha Kumari is a professional news anchor who presents news with clarity and confidence. Her engaging presentation style keeps our audience informed and connected.\",\r\n                skills: [\"News Presentation\", \"Broadcasting\", \"Public Speaking\", \"On-Camera Performance\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 7,\r\n                name: \"Vikram Kumar\",\r\n                position: \"Cameraman\",\r\n                email: \"vray5762@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0016\",\r\n                bio: \"Vikram Kumar is an experienced cameraman who specializes in field reporting and live coverage. His technical skills ensure high-quality visual content for our news programs.\",\r\n                skills: [\"Field Camera Work\", \"Live Coverage\", \"Equipment Management\", \"Visual Composition\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 8,\r\n                name: \"Rakesh Salve\",\r\n                position: \"Reporter\",\r\n                email: \"rakeshsalve@redifdmail.com\",\r\n                idNo: \"IND\/GUJ\/0021\",\r\n                bio: \"Rakesh Salve is a diligent reporter who covers various news beats with accuracy and attention to detail. His investigative approach brings depth to our news coverage.\",\r\n                skills: [\"Investigative Reporting\", \"News Gathering\", \"Source Development\", \"Fact Verification\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 9,\r\n                name: \"Neeraj Kumar\",\r\n                position: \"Jalaun Bureau Chief\",\r\n                email: \"vermaneerajkumar01@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0014\",\r\n                bio: \"Neeraj Kumar heads our Jalaun bureau, providing comprehensive coverage of local news and events. His regional expertise ensures relevant and timely reporting for our audience.\",\r\n                skills: [\"Bureau Management\", \"Local News\", \"Community Engagement\", \"Regional Reporting\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            },\r\n            {\r\n                id: 10,\r\n                name: \"Umesh Gupta\",\r\n                position: \"Cameraman\",\r\n                email: \"umeshg0007@gmail.com\",\r\n                idNo: \"IND\/GUJ\/0015\",\r\n                bio: \"Umesh Gupta is a professional cameraman with expertise in various shooting environments. His technical proficiency and creative approach enhance our visual news presentation.\",\r\n                skills: [\"Camera Operation\", \"Lighting\", \"Composition\", \"Technical Troubleshooting\"],\r\n                social: {\r\n                    twitter: \"#\",\r\n                    linkedin: \"#\",\r\n                    facebook: \"#\"\r\n                }\r\n            }\r\n        ];\r\n\r\n        \/\/ DOM elements\r\n        const teamMembersContainer = document.getElementById('teamMembers');\r\n        const searchInput = document.getElementById('searchInput');\r\n        const memberName = document.getElementById('memberName');\r\n        const memberPosition = document.getElementById('memberPosition');\r\n        const memberDetails = document.getElementById('memberDetails');\r\n\r\n        \/\/ Initialize team list\r\n        function initializeTeamList() {\r\n            teamMembersContainer.innerHTML = '';\r\n            \r\n            teamMembers.forEach(member => {\r\n                const memberItem = document.createElement('div');\r\n                memberItem.className = 'member-item';\r\n                memberItem.dataset.id = member.id;\r\n                \r\n                \/\/ Create avatar with initials\r\n                const initials = member.name.split(' ').map(n => n[0]).join('');\r\n                \r\n                memberItem.innerHTML = `\r\n                    <div class=\"member-avatar\">${initials}<\/div>\r\n                    <div class=\"member-info\">\r\n                        <h3>${member.name}<\/h3>\r\n                        <p>${member.position}<\/p>\r\n                    <\/div>\r\n                `;\r\n                \r\n                memberItem.addEventListener('click', () => showMemberDetails(member.id));\r\n                teamMembersContainer.appendChild(memberItem);\r\n            });\r\n        }\r\n\r\n        \/\/ Show member details\r\n        function showMemberDetails(memberId) {\r\n            const member = teamMembers.find(m => m.id === memberId);\r\n            if (!member) return;\r\n            \r\n            \/\/ Update active state in list\r\n            document.querySelectorAll('.member-item').forEach(item => {\r\n                item.classList.remove('active');\r\n                if (parseInt(item.dataset.id) === memberId) {\r\n                    item.classList.add('active');\r\n                }\r\n            });\r\n            \r\n            \/\/ Update header\r\n            memberName.textContent = member.name;\r\n            memberPosition.textContent = member.position;\r\n            \r\n            \/\/ Update details\r\n            const initials = member.name.split(' ').map(n => n[0]).join('');\r\n            \r\n            memberDetails.innerHTML = `\r\n                <div class=\"detail-section\">\r\n                    <h3>About<\/h3>\r\n                    <p>${member.bio}<\/p>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-section\">\r\n                    <h3>Contact Information<\/h3>\r\n                    <div class=\"info-row\">\r\n                        <span class=\"info-label\">Email:<\/span>\r\n                        <span class=\"info-value\">${member.email}<\/span>\r\n                    <\/div>\r\n                    <div class=\"info-row\">\r\n                        <span class=\"info-label\">ID No:<\/span>\r\n                        <span class=\"info-value\">${member.idNo}<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-section\">\r\n                    <h3>Areas of Expertise<\/h3>\r\n                    <div class=\"skills\">\r\n                        ${member.skills.map(skill => `<span class=\"skill-tag\">${skill}<\/span>`).join('')}\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"detail-section\">\r\n                    <h3>Connect<\/h3>\r\n                    <div class=\"social-links\">\r\n                        <a href=\"${member.social.twitter}\" title=\"Twitter\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n                        <a href=\"${member.social.linkedin}\" title=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n                        <a href=\"${member.social.facebook}\" title=\"Facebook\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            `;\r\n        }\r\n\r\n        \/\/ Search functionality\r\n        searchInput.addEventListener('input', function() {\r\n            const searchTerm = this.value.toLowerCase();\r\n            \r\n            document.querySelectorAll('.member-item').forEach(item => {\r\n                const name = item.querySelector('h3').textContent.toLowerCase();\r\n                const position = item.querySelector('p').textContent.toLowerCase();\r\n                \r\n                if (name.includes(searchTerm) || position.includes(searchTerm)) {\r\n                    item.style.display = 'flex';\r\n                } else {\r\n                    item.style.display = 'none';\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Initialize the page\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            initializeTeamList();\r\n            \r\n            \/\/ Select first member by default\r\n            if (teamMembers.length > 0) {\r\n                showMemberDetails(teamMembers[0].id);\r\n            }\r\n        });\r\n\r\n        \/\/ Handle window resize for better mobile experience\r\n        window.addEventListener('resize', function() {\r\n            \/\/ Adjust heights for better mobile view\r\n            if (window.innerWidth < 768) {\r\n                document.querySelector('.team-list').style.maxHeight = '50vh';\r\n                document.querySelector('.team-detail').style.minHeight = '60vh';\r\n            } else {\r\n                document.querySelector('.team-list').style.maxHeight = '70vh';\r\n                document.querySelector('.team-detail').style.minHeight = '70vh';\r\n            }\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Team &#8211; Salasar News Our Team Select a Team Member Click on a team member to view their details No Member Selected Please select a team member from the list to view their profile and details. &copy; 2023 Salasar News. All rights reserved. Bringing you the latest news with accuracy and integrity.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1460","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"salasarnewsnetwork@gmail.com","author_link":"https:\/\/salasarnews.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Our Team &#8211; Salasar News Our Team Select a Team Member Click on a team member to view their details No Member Selected Please select a team member from the list to view their profile and details. &copy; 2023 Salasar News. All rights reserved. Bringing you the latest news with accuracy and integrity.","_links":{"self":[{"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/pages\/1460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/salasarnews.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1460"}],"version-history":[{"count":5,"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/pages\/1460\/revisions"}],"predecessor-version":[{"id":1465,"href":"https:\/\/salasarnews.com\/index.php?rest_route=\/wp\/v2\/pages\/1460\/revisions\/1465"}],"wp:attachment":[{"href":"https:\/\/salasarnews.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}