src/components/ui/HeroHeader.tsx

"use client";
import Image from "next/image";

export default function HeroHeader() {
  return (
    <div className="relative overflow-hidden rounded-3xl mb-6">
      <div className="absolute inset-0 bg-gradient-to-r from-emerald-100 via-sky-100 to-indigo-100 animate-gradient" />
      <div className="relative z-10 flex items-center gap-6 px-8 py-6">
        <div className="h-14 w-14 flex items-center justify-center rounded-full bg-white/80 shadow">
          <Image src="/sgs-logo.png" alt="SGS" width={40} height={40} />
        </div>
        <div>
          <h1 className="text-2xl font-semibold text-slate-900">
            Psychometrics Assessment
          </h1>
          <p className="text-slate-600">
            Saudi Ground Services (SGS)
          </p>
        </div>
      </div>
    </div>
  );
}