// pns-1.jsx — Design Tokens · Shared Components · Nav · Hero · Services const { useState, useEffect, useRef } = React; const wpS = window.pnsWP?.settings || {}; const P1_SITE = (window.pnsWP && window.pnsWP.siteUrl) || ''; const CONTACT_URL = P1_SITE ? P1_SITE + 'contact/' : 'Contact.html'; const SERVICES_URL = P1_SITE ? P1_SITE + 'services/' : 'Services.html'; /* ── DESIGN TOKENS ──────────────────────────────────────────────── */ const PNST = { n950: '#07090f', n900: '#0c1220', n800: '#0d1829', n700: '#152040', n600: '#1e2d52', n500: '#253368', n400: '#2e3d7a', coral: '#e8714a', coralL: '#f0896b', coralPale: 'rgba(232,113,74,0.12)', teal: '#2bb5a0', tealL: '#35c9b3', tealPale: 'rgba(43,181,160,0.12)', blue: '#3b82f6', bluePale: 'rgba(59,130,246,0.12)', white: '#ffffff', g50: '#f7f9fc', g100: '#edf0f7', g200: '#d8dce8', g400: '#8b96aa', g500: '#6b7689', g700: '#3a4455', g900: '#0f1624', hd: "'Sora', sans-serif", bd: "'DM Sans', sans-serif" }; window.PNST = PNST; /* ── SHARED: EyebrowBadge ──────────────────────────────────────── */ function EyebrowBadge({ children, variant = 'ghost' }) { const s = { ghost: { bg: 'rgba(255,255,255,0.07)', color: PNST.g400, border: '1px solid rgba(255,255,255,0.1)' }, teal: { bg: PNST.tealPale, color: PNST.teal, border: `1px solid rgba(43,181,160,0.3)` }, coral: { bg: PNST.coralPale, color: PNST.coral, border: `1px solid rgba(232,113,74,0.3)` }, dark: { bg: 'rgba(0,0,0,0.06)', color: PNST.g500, border: '1px solid rgba(0,0,0,0.1)' } }[variant]; return ( {children} ); } window.EyebrowBadge = EyebrowBadge; /* ── SHARED: SectionTitle ──────────────────────────────────────── */ function SectionTitle({ children, light = false, size = 'lg', style: sx = {} }) { const txt = typeof children === 'string' ? children : ''; const hasDot = txt.endsWith('.'); const main = hasDot ? txt.slice(0, -1) : txt; const fs = size === 'xl' ? 'clamp(44px,5.5vw,80px)' : size === 'lg' ? 'clamp(32px,3.8vw,52px)' : 'clamp(26px,2.8vw,38px)'; return (

{main}{hasDot && .}

); } window.SectionTitle = SectionTitle; /* ── SHARED: ImgPlaceholder ────────────────────────────────────── */ function ImgPlaceholder({ height = 400, label = '', bg = '#152040', style: sx = {}, br = 20 }) { const uid = useRef('p' + Math.random().toString(36).slice(2)).current; return (
{label && ↕ {label} }
); } window.ImgPlaceholder = ImgPlaceholder; /* ── SERVICE ICONS ─────────────────────────────────────────────── */ function ServiceIcon({ type, hov = false }) { const c1 = hov ? PNST.coralL : PNST.coral; const c2 = hov ? PNST.tealL : PNST.teal; const p = { fill: 'none', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' }; const icons = { managed: <>, ai: <>, cyber: <>, m365: <>, network: <>, webdev: <>, seo: <>, consulting: <>, backup: <> }; return {icons[type]}; } /* ── SERVICES DATA ──────────────────────────────────────────────── */ const SERVICES = [ { id: 1, icon: 'managed', pageId: 'managed-it', title: 'Managed IT Services', desc: 'Proactive monitoring, maintenance, and 24/7 helpdesk support to keep your business running without interruption.' }, { id: 2, icon: 'ai', pageId: 'ai-solutions', title: 'AI Solutions', desc: 'Intelligent automation to streamline workflows, reduce manual tasks, and unlock new efficiencies across your organization.' }, { id: 3, icon: 'cyber', pageId: 'cybersecurity', title: 'Cybersecurity', desc: 'Multi-layered protection with endpoint security, threat detection, compliance management, and rapid incident response.' }, { id: 4, icon: 'm365', pageId: 'microsoft-365', title: 'Microsoft 365', desc: 'Full deployment and management of Microsoft 365—Teams, SharePoint, Exchange, OneDrive, and Azure Active Directory.' }, { id: 5, icon: 'network', pageId: 'network-infrastructure', title: 'Network Infrastructure', desc: 'Design, installation, and management of wired/wireless networks, VoIP systems, and unified communications platforms.' }, { id: 6, icon: 'webdev', pageId: 'web-development', title: 'Website Development', desc: 'Custom websites built for performance, security, and lead generation—engineered to scale with your business goals.' }, { id: 7, icon: 'seo', pageId: 'seo-services', title: 'SEO Services', desc: 'Data-driven search engine optimization to increase organic visibility, drive qualified traffic, and generate business leads.' }, { id: 8, icon: 'consulting', pageId: 'it-consulting', title: 'IT Consulting', desc: 'Strategic technology planning, roadmapping, and vCIO services to align your IT investments with your business objectives.' }, { id: 9, icon: 'backup', pageId: 'backup-monitoring', title: 'Backup & Monitoring', desc: 'Automated cloud backup, disaster recovery planning, and 24/7 infrastructure monitoring to protect your critical data.' }]; window.SERVICES = SERVICES; /* ── NAV ────────────────────────────────────────────────────────── */ function PNSNav() { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); const _p = window.location.pathname; const isService = (_p.includes('service.html') || _p.includes('/service')); const isContactPage = /contact/i.test(_p); const SITE = window.pnsWP?.siteUrl || ''; const HOME = (isService || isContactPage) ? (SITE || 'Premier%20Network%20Solutions.html') : ''; const CONTACT = SITE ? SITE + 'contact/' : 'Contact.html'; const links = [ { label: 'Home', href: SITE || 'Premier%20Network%20Solutions.html' }, { label: 'About', href: SITE ? SITE+'about/' : 'About.html' }, { label: 'Portfolio', href: SITE ? SITE+'portfolio/' : 'Portfolio.html' }, { label: 'Services', href: SITE ? SITE+'services/' : 'Services.html' }, { label: 'Pricing', href: SITE ? SITE+'pricing/' : 'Pricing.html' }, { label: 'Team', href: SITE ? SITE+'team/' : 'Team.html' }, { label: 'Why Us', href: SITE ? SITE+'why-us/' : 'Why%20Us.html' }, { label: 'Contact', href: CONTACT }]; return ( <> {menuOpen && } ); } window.PNSNav = PNSNav; /* ── NOC DASHBOARD (Hero Visual) ───────────────────────────────── */ function NOCDashboard() { const [tick, setTick] = useState(0); useEffect(() => { const t = setInterval(() => setTick((n) => n + 1), 1000); return () => clearInterval(t); }, []); const now = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); const bars = [ { label: 'Security Score', val: 94, color: PNST.teal }, { label: 'Network Health', val: 78, color: PNST.coral }, { label: 'Backup Status', val: 100, color: PNST.blue }]; const activity = [ { dot: PNST.teal, text: 'Patch applied — 15 devices', ago: '2m ago' }, { dot: PNST.teal, text: 'Backup completed successfully', ago: '14m ago' }, { dot: PNST.coral, text: 'Phishing attempt blocked', ago: '1h ago' }]; return (
{/* Header */}
Network Operations
System Dashboard
LIVE {now}
{/* Stats */}
{[{ l: 'Uptime', v: '99.9%', c: PNST.teal }, { l: 'Devices', v: '47', c: PNST.coral }, { l: 'Blocked', v: '12', c: PNST.blue }].map((s) =>
{s.v}
{s.l}
)}
{/* Bars */}
{bars.map((b) =>
{b.label} {b.val}%
)}
{/* Activity */}
Recent Activity
{activity.map((a, i) =>
{a.text} {a.ago}
)}
); } /* ── HERO BACKGROUND SLIDER ────────────────────────────────────── */ const HERO_BG_IMGS = [ '1558494949-ef010cbdcc31', '1639066648921-82d4500abf1a', '1702478475268-aa8ef54c084e', '1584169417032-d34e8d805e8b', ]; function HeroBgSlider() { const [cur, setCur] = useState(0); useEffect(() => { const t = setInterval(() => setCur(c => (c + 1) % HERO_BG_IMGS.length), 6000); return () => clearInterval(t); }, []); return (
{HERO_BG_IMGS.map((id, i) => (
))}
); } /* ── HERO ────────────────────────────────────────────────────────── */ function PNSHero() { return (
{/* BG blobs */}
{/* TEXT COLUMN */}
{wpS.heroEyebrow||'Your Trusted Technology Partner'}

{wpS.heroHeadline ?<>{wpS.heroHeadline.replace(/\.+$/,'')}. :<>Technology That Works.{' '}Support That Never Sleeps.}

{wpS.heroSub||'Empowering Southern California businesses with Managed IT, Cybersecurity, Cloud Solutions, Microsoft 365, AI Automation, Network Infrastructure, Web Development, and SEO—delivered by experts who keep your business secure, connected, and productive 24/7.'}

🔒 {wpS.heroBadge||'Trusted Technology Partner for SMBs Across Southern California'}
Follow Us {[ { label: 'LI', url: wpS.socialLI||'#' }, { label: 'TW', url: wpS.socialTW||'#' }, { label: 'FB', url: wpS.socialFB||'#' }]. map((s) => e.currentTarget.style.color = PNST.teal} onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.35)'}> {s.label} )}
{/* VISUAL COLUMN */}
24/7 Monitoring Active
99.9%
Uptime Guarantee
{/* Wave divider */}
); } window.PNSHero = PNSHero; /* ── SERVICE CARD PHOTOS ────────────────────────────────────────── */ const SVC_CARD_PHOTOS = { 'managed-it': '1558494949-ef010cbdcc31', // server rack / cable network 'ai-solutions': '1680992046615-065f58bcb4d8', // computer rack close-up 'cybersecurity': '1680992046626-418f7e910589', // equipment rack in dark room 'microsoft-365': '1460925895917-afdab827c52f', // analytics screen 'network-infrastructure': '1558618666-fcd25c85cd64', // fiber / ethernet cables 'web-development': '1695668548342-c0c1ad479aee', // server rack in server room 'seo-services': '1506399558188-acca6f8cbf41', // server / rig room 'it-consulting': '1663596990274-3fc2f5a4ce27', // datacenter hallway glass 'backup-monitoring': '1580368393720-393aeacbc2a4', // white USB / connectivity }; /* ── SERVICE CARD ───────────────────────────────────────────────── */ function ServiceCard({ svc }) { const [hov, setHov] = useState(false); return (
setHov(true)} onMouseLeave={() => setHov(false)} onClick={() => {if (svc.pageId) window.location.href = (window.pnsWP?.serviceUrls?.[svc.pageId]) || ((window.pnsWP?.serviceUrl||'service.html')+'?id='+svc.pageId);}} style={{ position: 'relative', padding: '16px 12px 10px', cursor: 'pointer' }}> {/* Teal layer */}
{/* Blue layer */}
{/* Card */}
{/* Photo strip */}
{`${svc.title}
{/* Text area */}

{svc.title}

{svc.desc}

); } /* ── SERVICES SECTION ───────────────────────────────────────────── */ function PNSServices() { const _wpSvc = window.pnsWP?.services; const EFF_SERVICES = (Array.isArray(_wpSvc) && _wpSvc.length > 0) ? _wpSvc : SERVICES; const [rawPage, setPage] = useState(0); const timerRef = useRef(null); const perPage = 3; const total = Math.max(1, Math.ceil(EFF_SERVICES.length / perPage)); const page = Math.min(Math.max(0, rawPage), total - 1); const visible = EFF_SERVICES.slice(page * perPage, (page + 1) * perPage); const goPage = (p) => { setPage(p); clearInterval(timerRef.current); timerRef.current = setInterval(() => setPage(n => (n + 1) % total), 5500); }; useEffect(() => { timerRef.current = setInterval(() => setPage(p => (p + 1) % total), 5500); return () => clearInterval(timerRef.current); }, [total]); return (
{/* Header */}
Our Services Complete Technology Solutions.

From daily IT management to strategic technology consulting—everything your business needs under one roof.

{/* Slider */}
{visible.map((s, i) => )}
{/* Nav */}
{Array.from({ length: total }).map((_, i) =>
); } window.PNSServices = PNSServices;