Refactor package inspector and vuln database

package.json

@@ -34,7 +34,7 @@
     },
     "homepage": "https://github.com/l3montree-dev/devguard-documentation",
     "dependencies": {
-        "@document-writing-tools/kernux-theme": "2.0.0-rc.12",
+        "@document-writing-tools/kernux-theme": "2.0.0-rc.14",
         "@ltonetwork/http-message-signatures": "^0.1.12",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-separator": "^1.1.8",

src/components/package-inspector/Hero.tsx

@@ -3,6 +3,7 @@ import { HeroSection } from '@/components/ui/hero-input'
 import AnimatedContent from '@/components/ui/animated-content'
 import CenterFlow from '@/components/animated-blocks/center-flow'
 import PackageSearch from '@/components/package-inspector/PackageSearch'
+import LightRaysComponent from '../ui/lightRays'
 
 const ECOSYSTEM_NODES = [
     { src: '/icons/eco-logos/npm-icon.svg', alt: 'npm' },
@@ -56,8 +57,8 @@ export function PackageInspectorHero({
     isSearching,
 }: PackageInspectorHeroProps) {
     return (
-        <div className="relative px-12 max-sm:px-0">
-            <div className="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:items-center lg:gap-x-8 lg:py-40">
+        <div className="hero-outer">
+            <div className="hero-inner">
                 <HeroSection
                     title="Package Inspector"
                     subtitle={
@@ -76,40 +77,42 @@ export function PackageInspectorHero({
                         className="mt-5"
                     />
                 </HeroSection>
-
-                <AnimatedContent
-                    distance={40}
-                    direction="vertical"
-                    duration={0.7}
-                    delay={0.15}
-                >
-                    <div className="hidden h-[400px] w-full lg:block">
-                        <CenterFlow
-                            nodeItems={nodeItems}
-                            centerContent={centerContent}
-                            centerSize={100}
-                            nodeSize={48}
-                            pulseDuration={5}
-                            pulseInterval={10}
-                            pulseLength={0.4}
-                            lineWidth={1}
-                            pulseWidth={1}
-                            pulseSoftness={10}
-                            lineColor="#323232"
-                            lineColorLight="#e0e0e0"
-                            pulseColor="#ffffff"
-                            pulseColorLight="#f9bd24"
-                            glowColor="#f9bd24"
-                            glowColorLight="#f9bd24"
-                            maxGlowIntensity={25}
-                            glowDecay={0.95}
-                            borderRadius={35}
-                            nodeDistance={0.7}
-                            disableBlinking={false}
-                        />
-                    </div>
-                </AnimatedContent>
+                <div>
+                    <AnimatedContent
+                        distance={40}
+                        direction="vertical"
+                        duration={0.7}
+                        delay={0.15}
+                    >
+                        <div className="hidden h-[400px] w-full lg:block">
+                            <CenterFlow
+                                nodeItems={nodeItems}
+                                centerContent={centerContent}
+                                centerSize={100}
+                                nodeSize={48}
+                                pulseDuration={5}
+                                pulseInterval={10}
+                                pulseLength={0.4}
+                                lineWidth={1}
+                                pulseWidth={1}
+                                pulseSoftness={10}
+                                lineColor="#323232"
+                                lineColorLight="#e0e0e0"
+                                pulseColor="#ffffff"
+                                pulseColorLight="#f9bd24"
+                                glowColor="#f9bd24"
+                                glowColorLight="#f9bd24"
+                                maxGlowIntensity={25}
+                                glowDecay={0.95}
+                                borderRadius={35}
+                                nodeDistance={0.7}
+                                disableBlinking={false}
+                            />
+                        </div>
+                    </AnimatedContent>
+                </div>
             </div>
+            <LightRaysComponent />
         </div>
     )
 }

src/components/package-inspector/PackageInspectorPage.tsx

@@ -38,7 +38,7 @@ export function PackageInspectorPage() {
     }
 
     return (
-        <Container className="relative py-16 max-sm:py-8">
+        <Container showTopGrid={true} className="section-outer">
             <div className="z-10">
                 <PackageInspectorHero
                     onSearch={handleSearch}

src/components/package-inspector/PackageSearch.tsx

@@ -8,7 +8,7 @@ const ECOSYSTEMS = [
     { label: 'Crates.io', value: 'crates.io' },
     { label: 'Debian', value: 'debian' },
     { label: 'Git', value: 'git' },
-    { label: 'Go', value: 'go' },
+    { label: 'Go', value: 'golang' },
     { label: 'Hex', value: 'hex' },
     { label: 'Maven', value: 'maven' },
     { label: 'npm', value: 'npm' },
@@ -128,7 +128,7 @@ export default function PackageSearch({
                         <button
                             type="submit"
                             disabled={isSearching}
-                            className="bg-primary text-primary-foreground hover:bg-primary/90 mr-1.5 inline-flex h-9 shrink-0 items-center gap-1.5 rounded-sm px-3 text-sm font-medium transition-colors disabled:opacity-50"
+                            className="hero-button"
                         >
                             {isSearching ? (
                                 <Loader2 className="h-4 w-4 animate-spin" />
@@ -169,14 +169,14 @@ export default function PackageSearch({
                                 setLocalError(null)
                             }}
                             placeholder="pkg:eco/name@version"
-                            className="placeholder:text-muted-foreground h-12 min-w-0 flex-1 rounded-l-md bg-transparent pr-2.5 pl-3 text-base outline-none md:text-lg"
+                            className="placeholder:text-muted-foreground h-12 min-w-0 flex-1 rounded-l-md bg-transparent pr-2.5 pl-3 text-base outline-none"
                             disabled={isSearching}
                             autoFocus={autoFocus}
                         />
                         <button
                             type="submit"
                             disabled={isSearching}
-                            className="bg-primary text-primary-foreground hover:bg-primary/90 mr-1.5 inline-flex h-9 shrink-0 items-center gap-1.5 rounded-sm px-3 text-sm font-medium transition-colors disabled:opacity-50"
+                            className="hero-button"
                         >
                             {isSearching ? (
                                 <Loader2 className="h-4 w-4 animate-spin" />

src/components/package-inspector/VulnerabilityList.tsx

@@ -55,7 +55,7 @@ export default function VulnerabilityList({
     return (
         <div>
             {vulns.length === 0 ? (
-                <p className="rounded-md border px-4 py-3 text-base text-muted-foreground">
+                <p className="text-muted-foreground rounded-md border px-4 py-3 text-base">
                     None found
                 </p>
             ) : (
@@ -66,10 +66,10 @@ export default function VulnerabilityList({
                             <Link
                                 key={vuln.cveId}
                                 href={`/vulnerability-database/${vuln.cveId}`}
-                                className="block rounded-md border p-3 transition-colors hover:bg-accent/50"
+                                className="hover:bg-muted block rounded-md border p-3 transition-colors"
                             >
                                 <div className="flex items-center justify-between">
-                                    <span className="text-base font-semibold text-foreground">
+                                    <span className="text-foreground text-base font-semibold">
                                         {vuln.cveId}
                                     </span>
                                     {details && (
@@ -81,7 +81,7 @@ export default function VulnerabilityList({
                                         </span>
                                     )}
                                 </div>
-                                <div className="mt-1 flex items-center gap-3 text-sm text-muted-foreground">
+                                <div className="text-muted-foreground mt-1 flex items-center gap-3 text-sm">
                                     <span>Fixed in: v{vuln.fixedVersion}</span>
                                     {details && (
                                         <span>
@@ -104,7 +104,7 @@ export default function VulnerabilityList({
             {hasMore && !expanded && (
                 <button
                     onClick={() => setExpanded(true)}
-                    className="mt-3 flex w-full items-center justify-center gap-1 rounded-md border py-1.5 text-base text-muted-foreground hover:bg-accent/50"
+                    className="text-muted-foreground hover:bg-muted mt-3 flex w-full items-center justify-center gap-1 rounded-md border py-1.5 text-base"
                 >
                     <ChevronDown className="h-4 w-4" />
                     {vulns.length - 3} more

src/components/package-inspector/purlPage.tsx

@@ -139,11 +139,6 @@ export default function PurlPageComponent({ purl }: { purl?: string }) {
                         not be retrieved. Please verify the package URL and try
                         again.
                     </p>
-                    <Button asChild>
-                        <Link href="/package-inspector">
-                            Back to Package Inspector
-                        </Link>
-                    </Button>
                 </div>
             </Container>
         )
@@ -235,11 +230,6 @@ export default function PurlPageComponent({ purl }: { purl?: string }) {
 
             {/* Bottom buttons */}
             <div className="mt-6 flex flex-col justify-end gap-3 sm:flex-row">
-                <Button asChild>
-                    <Link href="/package-inspector">
-                        Back to Package Inspector
-                    </Link>
-                </Button>
                 <Button asChild className="hidden sm:inline-flex">
                     <a
                         target="_blank"

src/components/ui/input.tsx

@@ -34,7 +34,7 @@ function Input({
                     type="submit"
                     disabled={isLoading}
                     onClick={onSearchClick}
-                    className="bg-primary text-primary-foreground hover:bg-primary/90 absolute top-1/2 right-1.5 inline-flex h-9 -translate-y-1/2 items-center gap-1.5 rounded-sm px-3 text-sm font-medium transition-colors disabled:opacity-50"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 absolute top-1/2 right-1.5 inline-flex h-9 -translate-y-1/2 items-center gap-1.5 rounded-sm px-3 font-medium transition-colors disabled:opacity-50"
                 >
                     {isLoading ? (
                         <Loader2 className="h-4 w-4 animate-spin" />

src/components/ui/lightRays.tsx

@@ -0,0 +1,43 @@
+// Copyright 2026 refaeishikho
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     https://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import LightRays from '@/components/vulnerability-database/light-rays'
+export default function LightRaysComponent() {
+    return (
+        <div className="mt-20 flex items-center justify-center sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0">
+            <div
+                style={{
+                    width: '100vw',
+                    height: '80vh',
+                }}
+                className="from-background pointer-events-none absolute inset-x-0 inset-y-0 right-1 bottom-0 -z-20 h-1/3 bg-linear-to-t to-transparent opacity-70"
+            >
+                <LightRays
+                    raysOrigin="top-center"
+                    raysColor="#ffffff"
+                    raysSpeed={0.5}
+                    lightSpread={0.5}
+                    rayLength={3}
+                    followMouse={true}
+                    mouseInfluence={0.1}
+                    noiseAmount={0.1}
+                    distortion={0}
+                    className="custom-rays"
+                    pulsating={false}
+                    fadeDistance={1}
+                    saturation={1}
+                />
+            </div>
+        </div>
+    )
+}

src/components/vulnerability-database/cve-detail.tsx

@@ -209,11 +209,6 @@ export default function CVEDetailComponent({ cveId }: { cveId?: string }) {
                         The requested CVE could not be loaded. It may not exist
                         or the service is temporarily unavailable.
                     </p>
-                    <Button asChild className="mt-6">
-                        <Link href="/vulnerability-database">
-                            Back to Vulnerability Database
-                        </Link>
-                    </Button>
                 </div>
             </Container>
         )
@@ -502,7 +497,7 @@ export default function CVEDetailComponent({ cveId }: { cveId?: string }) {
                         <div
                             className={`relative overflow-hidden ${!descExpanded ? 'max-h-24' : ''}`}
                         >
-                            <p className="text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap">
+                            <p className="text-muted-foreground leading-relaxed whitespace-pre-wrap">
                                 {data.description}
                             </p>
                             {!descExpanded && (
@@ -667,11 +662,6 @@ export default function CVEDetailComponent({ cveId }: { cveId?: string }) {
 
                 {/* Bottom buttons */}
                 <div className="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-end">
-                    <Button asChild>
-                        <Link href="/vulnerability-database">
-                            Back to Vulnerability Database
-                        </Link>
-                    </Button>
                     <Button asChild className="hidden sm:inline-flex">
                         <a
                             target="_blank"

src/components/vulnerability-database/hero.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { Input } from '@/components/ui/input'
 import { HeroSection } from '@/components/ui/hero-input'
-import LightRays from '@/components/vulnerability-database/light-rays'
 import { ChartRadarDots } from '@/components/vulnerability-database/radar-chart'
+import LightRaysComponent from '../ui/lightRays'
 
 const VULN_SEARCH_PATTERN = /^[A-Za-z0-9\-:.\s]+$/
 const MIN_SEARCH_LENGTH = 2
@@ -48,8 +48,8 @@ export default function VulnDBHero({
 
     return (
         <>
-            <div className="isolate mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:py-40">
-                <div className="grid grid-cols-1 gap-y-12 lg:grid-cols-2 lg:items-center lg:gap-x-20">
+            <div className="hero-outer">
+                <div className="hero-inner">
                     <HeroSection
                         title="Vulnerability Database"
                         subtitle={
@@ -95,35 +95,11 @@ export default function VulnDBHero({
                             )}
                         </form>
                     </HeroSection>
-                    <div className="card-blue">
+                    <div className="hidden w-full lg:block">
                         <ChartRadarDots />
                     </div>
                 </div>
-                <div className="mt-20 flex items-center justify-center sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0">
-                    <div
-                        style={{
-                            width: '100vw',
-                            height: '80vh',
-                        }}
-                        className="from-background pointer-events-none absolute inset-x-0 inset-y-0 right-1 bottom-0 -z-20 h-1/3 bg-linear-to-t to-transparent opacity-70"
-                    >
-                        <LightRays
-                            raysOrigin="top-center"
-                            raysColor="#ffffff"
-                            raysSpeed={0.5}
-                            lightSpread={0.5}
-                            rayLength={3}
-                            followMouse={true}
-                            mouseInfluence={0.1}
-                            noiseAmount={0.1}
-                            distortion={0}
-                            className="custom-rays"
-                            pulsating={false}
-                            fadeDistance={1}
-                            saturation={1}
-                        />
-                    </div>
-                </div>
+                <LightRaysComponent />
             </div>
         </>
     )

src/components/vulnerability-database/radar-chart.tsx

@@ -72,7 +72,7 @@ export function ChartRadarDots() {
     }
 
     return (
-        <Card>
+        <Card className="border-none bg-transparent shadow-none">
             <CardHeader className="items-center">
                 <CardTitle className="text-center">
                     Vulnerability Distribution in Database

src/components/vulnerability-database/vulnerability-database-page.tsx

@@ -69,12 +69,7 @@ export default function VulnerabilityDatabasePage() {
 
     return (
         <>
-            <Container
-                showTopGrid={true}
-                className={
-                    !queryParam ? 'flex min-h-[60vh] items-center' : undefined
-                }
-            >
+            <Container showTopGrid={true} className="section-outer">
                 <VulnDBHero
                     searchTerm={searchTerm}
                     setSearchTerm={setSearchTerm}

src/pages/package-inspector/[purl].mdx

@@ -21,6 +21,7 @@ export const PurlPage = () => {
         <>
             <style jsx global>{`
                 #sidebar { display: none !important; }
+                #toc { display: none !important; }
             `}</style>
             <PurlPageComponent purl={purlString} />
         </>

src/pages/vulnerability-database/[ID].mdx

@@ -21,6 +21,7 @@ export const CVEDetail = () => {
         <>
             <style jsx global>{`
                 #sidebar { display: none !important; }
+                #toc { display: none !important; }
             `}</style>
             <CVEDetailComponent cveId={cveId} />
         </>