feat: refresh hero copy, social row, and reading theme

- Rewrite hero with a personal intro and move social icons below the copy
- Restyle HeroSocials as a clean brand-icon row instead of inline mentions
- Switch dark background to pure black and lighten prose body weight
- Round the scrolled navbar to a pill and tidy separators

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: sankalpaacharya

app/blog/[slug]/page.tsx

@@ -95,7 +95,7 @@ export default async function BlogPost({
 
   const articleClass = isScrolly
     ? "prose prose-invert max-w-none prose-headings:font-medium prose-headings:tracking-tight prose-p:text-muted-foreground prose-p:leading-relaxed prose-strong:text-foreground prose-strong:font-medium prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-a:text-primary prose-a:underline hover:prose-a:text-primary/80"
-    : "font-[family-name:var(--font-poppins)] prose prose-invert max-w-none pb-8 prose-headings:font-medium prose-headings:tracking-tight prose-headings:text-foreground prose-h1:text-[1.875rem] prose-h1:mt-16 prose-h1:mb-8 prose-h2:text-[1.375rem] prose-h2:mt-14 prose-h2:mb-6 prose-h3:text-lg prose-h3:mt-10 prose-h3:mb-4 prose-p:text-[1.0625rem] prose-p:text-foreground/90 prose-p:leading-[1.9] prose-p:my-7 prose-strong:text-foreground prose-strong:font-medium prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-a:text-[#e8a87c] prose-a:no-underline hover:prose-a:underline prose-a:transition-colors prose-li:text-[1.0625rem] prose-li:text-foreground/90 prose-li:my-3 prose-li:leading-[1.8] prose-ul:my-7 prose-ol:my-7 prose-blockquote:border-l-[#e8a87c] prose-blockquote:text-foreground/70 prose-blockquote:italic prose-blockquote:pl-6 prose-blockquote:my-8 prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent prose-pre:my-8 prose-img:my-10 prose-img:rounded-lg prose-hr:my-16 prose-hr:border-muted-foreground/15";
+    : "font-[family-name:var(--font-poppins)] prose prose-invert max-w-none pb-8 prose-headings:font-medium prose-headings:tracking-tight prose-headings:text-foreground prose-h1:text-[1.875rem] prose-h1:mt-16 prose-h1:mb-8 prose-h2:text-[1.375rem] prose-h2:mt-14 prose-h2:mb-6 prose-h3:text-lg prose-h3:mt-10 prose-h3:mb-4 prose-p:text-[1.0625rem] prose-p:text-foreground/90 prose-p:leading-[1.9] prose-p:my-7 prose-p:font-light prose-strong:text-foreground prose-strong:font-medium prose-code:text-sm prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none prose-a:text-[#e8a87c] prose-a:no-underline hover:prose-a:underline prose-a:transition-colors prose-li:text-[1.0625rem] prose-li:text-foreground/90 prose-li:my-3 prose-li:leading-[1.8] prose-li:font-light prose-ul:my-7 prose-ol:my-7 prose-blockquote:border-l-[#e8a87c] prose-blockquote:text-foreground/70 prose-blockquote:italic prose-blockquote:pl-6 prose-blockquote:my-8 prose-pre:p-0 prose-pre:m-0 prose-pre:bg-transparent prose-pre:my-8 prose-img:my-10 prose-img:rounded-lg prose-hr:my-16 prose-hr:border-muted-foreground/15";
 
   return (
     <>
@@ -148,7 +148,7 @@ export default async function BlogPost({
               <AskAIButtons slug={slug} title={post.frontmatter.title} />
 
               {/* Elegant separator */}
-              <div className="mt-12 w-16 h-px bg-muted-foreground/20 mx-auto" />
+              <div className="mt-10 w-full h-px bg-muted-foreground/15" />
             </header>
           </div>
         )}

app/globals.css

@@ -70,8 +70,8 @@
 
 .dark {
   /* Premium bluish reading experience - inspired by GAIA */
-  --background: oklch(0.145 0.008 265);
-  /* Deep dark with a cool blue undertone */
+  --background: oklch(0 0 0);
+  /* Pure black */
   --foreground: oklch(0.93 0.006 250);
   /* Cool off-white for crisp, premium reading */
   --card: oklch(0.18 0.008 265);

app/page.tsx

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import { getAllPosts } from "@/lib/mdx-data";
 import { PostsGrid, ContentWrapper } from "@/components/home/posts-list";
 import { HeroSocials } from "@/components/home/hero-socials";
@@ -22,21 +21,16 @@ export default function Home() {
       {/* Hero */}
       <section className="pt-6 pb-24 md:pt-12 md:pb-36">
         <p className="max-w-2xl text-base md:text-xl text-muted-foreground leading-relaxed md:leading-relaxed">
-          Where I dig into how React actually works under the hood: Fiber,
-          reconciliation, and server components. Find me on <HeroSocials />{" "}
-          where I share deep dives every week.
+          Hey, I&apos;m{" "}
+          <span className="font-medium text-foreground">Sanku</span> — a developer
+          who got a little obsessed with how React actually works under the
+          hood. This is where I share deep dives into Fiber, reconciliation,
+          server components, and the machinery behind the framework you use
+          every day.
         </p>
 
-        <div className="mt-9 flex flex-wrap items-center gap-3">
-          {posts.length > 0 && (
-            <Link
-              href={`/blog/${posts[0].slug}`}
-              className="btn-raised px-5 py-2.5 rounded-lg bg-primary hover:bg-primary/90 text-primary-foreground font-medium text-sm transition-all duration-150 hover:-translate-y-px active:translate-y-0.5 flex items-center gap-2"
-            >
-              Read the latest
-              <span>→</span>
-            </Link>
-          )}
+        <div className="mt-4">
+          <HeroSocials />
         </div>
       </section>
 

components/blog/ask-ai-buttons.tsx

@@ -17,7 +17,7 @@ Help me understand the concepts explained in this article. Be ready to explain c
   const claudeUrl = `https://claude.ai/new?q=${encodedPrompt}`;
 
   return (
-    <div className="flex items-center justify-center gap-3 mt-8 pt-6 border-t border-muted-foreground/15">
+    <div className="flex items-center justify-center gap-3 mt-8">
       <a
         href={chatGPTUrl}
         target="_blank"

components/home/hero-socials.tsx

@@ -18,33 +18,28 @@ const socials = [
   },
 ];
 
-/**
- * Inline social mentions — brand icon tile + name woven into the hero copy,
- * the way Spectrum highlights iMessage / WhatsApp / Discord in its tagline.
- */
+/** Clean row of brand social icons shown under the hero copy. */
 export function HeroSocials() {
   return (
-    <>
-      {socials.map((social, i) => (
-        <span key={social.name} className="whitespace-nowrap">
-          <a
-            href={social.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="group inline-flex items-center gap-1.5 align-middle font-semibold text-foreground transition-opacity duration-200 hover:opacity-80"
-          >
-            <Image
-              src={social.icon}
-              alt={social.name}
-              width={22}
-              height={22}
-              className="rounded-[5px] transition-transform duration-200 group-hover:-translate-y-px"
-            />
-            {social.name}
-          </a>
-          {i < socials.length - 1 ? <span>,&nbsp;</span> : null}
-        </span>
+    <div className="flex items-center gap-2 -ml-2">
+      {socials.map((social) => (
+        <a
+          key={social.name}
+          href={social.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={social.name}
+          className="rounded-lg p-2 transition-colors duration-200 hover:bg-muted/50"
+        >
+          <Image
+            src={social.icon}
+            alt={social.name}
+            width={28}
+            height={28}
+            className="h-7 w-7 rounded-md"
+          />
+        </a>
       ))}
-    </>
+    </div>
   );
 }

components/navbar-withmenu.tsx

@@ -254,9 +254,9 @@ export function NavbarWithMenu({
           className={cn(
             "navbar_content relative flex h-14 w-full items-center justify-between border transition-[border-radius,background-color,border-color] duration-300",
             activeDropdown
-              ? "rounded-t-lg border-border border-b-transparent bg-background backdrop-blur-md"
+              ? "rounded-t-full border-border border-b-transparent bg-background backdrop-blur-md"
               : scrolled
-                ? "rounded-lg border-border bg-card/40 backdrop-blur-md"
+                ? "rounded-full border-border bg-card/40 backdrop-blur-md"
                 : "rounded-none border-transparent bg-transparent",
           )}
           animate={{
@@ -298,7 +298,9 @@ export function NavbarWithMenu({
                     setActiveDropdown(null);
                   }}
                 >
-                  {item.icon ?? <span className="relative z-10">{item.label}</span>}
+                  {item.icon ?? (
+                    <span className="relative z-10">{item.label}</span>
+                  )}
                 </Link>
               ) : (
                 <button
@@ -312,8 +314,7 @@ export function NavbarWithMenu({
                   )}
                   <div className="relative z-10 flex items-center gap-2">
                     <span>
-                      {item.label.charAt(0).toUpperCase() +
-                        item.label.slice(1)}
+                      {item.label.charAt(0).toUpperCase() + item.label.slice(1)}
                     </span>
                     <HugeiconsIcon
                       icon={ArrowDown01Icon}