"use client"; import { useEffect, useState } from 'react'; import Link from 'next/link'; import Image from 'next/image'; interface HeroSectionV1Props { badge?: string; heading?: string; headingAccent?: string; subheading?: string; } export default function HeroSectionV1({ badge = "Trusted Partner in Digital Innovation", heading = "Enterprise Technology,", headingAccent = "Reimagined", subheading = "Empower your business with quantum-safe security and unshakeable cyber resilience. We build the intelligent infrastructure that protects modern enterprise.", }: HeroSectionV1Props) { const [mounted, setMounted] = useState(false); const [identities, setIdentities] = useState(0); const [groups, setGroups] = useState(0); const [devices, setDevices] = useState(0); const [apps, setApps] = useState(0); const [detectionRate, setDetectionRate] = useState(0); useEffect(() => { setMounted(true); // Initial reveals const reveals = document.querySelectorAll('.hero-v1-anim'); reveals.forEach((el, i) => { setTimeout(() => { el.classList.add('opacity-100', 'translate-y-0', 'translate-x-0'); el.classList.remove('opacity-0', 'translate-y-10', '-translate-x-10'); }, 100 + i * 150); }); // Smooth Number Count-up Animation const duration = 2000; const steps = 60; const intervalTime = duration / steps; let currentStep = 0; const counterInterval = setInterval(() => { currentStep++; setIdentities(Math.floor((94 / steps) * currentStep)); setGroups(Math.floor((46 / steps) * currentStep)); setDevices(Math.floor((38 / steps) * currentStep)); setApps(Math.floor((1100 / steps) * currentStep)); setDetectionRate(Math.floor((97.8 / steps) * currentStep * 10) / 10); if (currentStep >= steps) { clearInterval(counterInterval); setIdentities(94); setGroups(46); setDevices(38); setApps(1100); setDetectionRate(97.8); } }, intervalTime); // Subtle Live Ticker after initial count to show life const liveTicker = setInterval(() => { setApps(prev => prev + (Math.random() > 0.5 ? 1 : 0)); }, 5000); return () => { clearInterval(counterInterval); clearInterval(liveTicker); }; }, []); return (

{/* ═══════════ AI GENERATED SERVER CLOUD BACKGROUND ═══════════ */}

Dual Tone Server Cloud Background

{/* Deep Blue Cinematic Vignette / Overlays (Reduced on the right) */}

{/* ── Horizontal Scan Lines ── */}

{/* ── Animated Vertical Data Pulses ── */}

{[...Array(20)].map((_, i) => (

))}

{/* ── Vertical Laser Sweep Layer ── */}

{/* ── LEFT: TYPOGRAPHY & CTA ── */}

{/* Headline */}

{heading}
{headingAccent}

{/* Description */}

{subheading}

{/* CTA Buttons */}

Talk to an Expert Explore Our Services

{/* ── RIGHT: NEW IDENTITY RISK POSTURE DASHBOARD ── */}

{/* Scan Line Effect Overlay */}

{/* ── TOP SECTION: POSTURE & STATS ── */}

{/* Left: Title & Gauge */}

Identity Risk Posture

Overall Identity Risk Score

61% Medium Risk

{/* Right: Divided Stats */}

Identities

{identities}

Groups

{groups}

Devices

{devices}

Apps

{apps.toLocaleString()}

{/* ── BOTTOM SECTION: CARDS ── */}

{/* Threat Detection Rate — animated ring */}

Detection Rate

{detectionRate}%

Real-time Active

{/* Top Findings */}

Top Findings

{/* Header */}

Risk

Finding

Recommendation

{/* Finding 1 */}

1

Unclaimed DNS names susceptible to subdomain takeover

Remove affected redirect_uri from Entra portal

{/* Finding 2 */}

2

MFA not enforced for all admin roles

Enable Conditional Access policy for global admins

{/* Credential Compromise */}

Credential Compromise

4

1

1

1

1

Resolved 2

{/* ═══════════ CSS ANIMATIONS ═══════════ */}