í¹ start improving about page

app/about/page.tsx

@@ -1,4 +1,5 @@
 import { Metadata } from 'next'
+import { Navbar } from '@/components/blog/navbar'
 
 export const metadata: Metadata = {
   title: 'Despre',
@@ -7,49 +8,136 @@ export const metadata: Metadata = {
 
 export default function AboutPage() {
   return (
-    <div className="max-w-3xl mx-auto">
-      <h1 className="text-4xl font-bold mb-8">Despre Mine</h1>
+    <>
+      <Navbar />
+      <div className="min-h-screen bg-[rgb(var(--bg-primary))]">
+        <div className="max-w-4xl mx-auto px-6 py-16">
+          {/* Classification Header */}
+          <div className="border-2 border-[rgb(var(--border-primary))] p-8 mb-10">
+            <p className="text-[rgb(var(--text-muted))] font-mono text-xs uppercase tracking-widest mb-4">
+              &gt;&gt; CLASSIFIED_DOC://PUBLIC_ACCESS
+            </p>
+            <h1 className="text-4xl md:text-5xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] tracking-tight">
+              DESPRE MINE_
+            </h1>
+          </div>
 
-      <div className="prose dark:prose-invert max-w-none">
-        <p className="text-lg leading-relaxed mb-6">
-          Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat în
-          dezvoltarea web modernă cu Next.js, React și TypeScript.
-        </p>
+          {/* Main Content */}
+          <div className="space-y-8">
+            {/* Introduction Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <div className="border-l-4 border-[var(--neon-cyan)] pl-6">
+                <p className="font-mono text-base text-[rgb(var(--text-primary))] leading-relaxed mb-4">
+                  Bun venit pe blogul meu! Sunt un dezvoltator pasionat de tehnologie, specializat
+                  în dezvoltarea web modernă cu Next.js, React și TypeScript.
+                </p>
+                <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider">
+                  STATUS: ACTIVE // LEVEL: SENIOR DEV
+                </p>
+              </div>
+            </section>
 
-        <h2 className="text-2xl font-semibold mt-8 mb-4">Ce vei găsi aici</h2>
-        <ul className="space-y-2">
-          <li>Tutoriale despre dezvoltare web</li>
-          <li>Ghiduri practice pentru Next.js și React</li>
-          <li>Sfaturi despre design și UX</li>
-          <li>Experiențe din proiecte reale</li>
-        </ul>
+            {/* Content Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; CE VEI GĂSI AICI
+              </h2>
+              <ul className="space-y-3">
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Tutoriale despre dezvoltare web
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Ghiduri practice pentru Next.js și React
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Sfaturi despre design și UX
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <span className="text-[var(--neon-cyan)] font-mono font-bold">&gt;</span>
+                  <span className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed">
+                    Experiențe din proiecte reale
+                  </span>
+                </li>
+              </ul>
+            </section>
 
-        <h2 className="text-2xl font-semibold mt-8 mb-4">Tehnologii folosite</h2>
-        <p>Acest blog este construit cu:</p>
-        <ul className="space-y-2">
-          <li>
-            <strong>Next.js 15</strong> - Framework React pentru producție
-          </li>
-          <li>
-            <strong>TypeScript</strong> - Pentru type safety
-          </li>
-          <li>
-            <strong>Tailwind CSS</strong> - Pentru stilizare rapidă
-          </li>
-          <li>
-            <strong>Markdown</strong> - Pentru conținut
-          </li>
-        </ul>
+            {/* Tech Stack Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; TEHNOLOGII FOLOSITE
+              </h2>
+              <p className="font-mono text-sm text-[rgb(var(--text-muted))] uppercase tracking-wider mb-6">
+                SYSTEM STACK // VERSION 2.0
+              </p>
+              <div className="grid gap-4">
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [FRAMEWORK]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
+                    <strong>Next.js 16</strong> - Framework React pentru producție
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [LANGUAGE]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
+                    <strong>TypeScript</strong> - Pentru type safety
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [STYLING]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
+                    <strong>Tailwind CSS</strong> - Pentru stilizare rapidă
+                  </p>
+                </div>
+                <div className="border border-[rgb(var(--border-primary))] p-4">
+                  <h3 className="font-mono text-sm font-bold text-[var(--neon-cyan)] uppercase mb-2">
+                    [CONTENT]
+                  </h3>
+                  <p className="font-mono text-sm text-[rgb(var(--text-primary))]">
+                    <strong>Markdown</strong> - Pentru conținut
+                  </p>
+                </div>
+              </div>
+            </section>
 
-        <h2 className="text-2xl font-semibold mt-8 mb-4">Contact</h2>
-        <p>
-          Mă poți contacta pe{' '}
-          <a href="mailto:email@example.com" className="text-primary-600 hover:text-primary-700">
-            email@example.com
-          </a>{' '}
-          sau mă poți găsi pe rețelele sociale.
-        </p>
+            {/* Contact Section */}
+            <section className="border-2 border-[rgb(var(--border-primary))]  p-8">
+              <h2 className="text-2xl font-mono font-bold uppercase text-[rgb(var(--text-primary))] mb-6 pb-3 border-b-2 border-[rgb(var(--border-primary))]">
+                &gt; CONTACT
+              </h2>
+              <div className="border-l-4 border-[var(--neon-pink)] pl-6">
+                <p className="font-mono text-sm text-[rgb(var(--text-primary))] leading-relaxed mb-4">
+                  Mă poți contacta pe{' '}
+                  <a
+                    href="mailto:email@example.com"
+                    className="text-[var(--neon-cyan)] hover:text-[var(--neon-pink)] underline transition-colors"
+                  >
+                    email@example.com
+                  </a>{' '}
+                  sau mă poți găsi pe rețelele sociale.
+                </p>
+                <p className="font-mono text-xs text-[rgb(var(--text-muted))] uppercase tracking-wider">
+                  RESPONSE TIME: &lt; 24H // STATUS: MONITORED
+                </p>
+              </div>
+            </section>
+          </div>
+        </div>
       </div>
-    </div>
+    </>
   )
 }