[Feature] [Mono]: enhance template details experience and add navigation improvements

apps/portfolio/app/preview/[documentId]/page.tsx

@@ -35,7 +35,7 @@ export async function generateMetadata({
     // Fail silently
   }
   return {
-    title: "Private Portfolio Preview | VeriWorkly",
+    title: "Private Portfolio Preview",
     robots: { index: false, follow: false },
   };
 }

apps/portfolio/app/templates/[id]/preview/page.tsx

@@ -1,6 +1,8 @@
-import { notFound } from "next/navigation";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
 import { DraftPreview } from "@/components/DraftPreview";
+
 import { isTemplateId, templates } from "@/templates/catalog/templates";
 
 export async function generateMetadata({
@@ -9,16 +11,16 @@ export async function generateMetadata({
   params: Promise<{ id: string }>;
 }): Promise<Metadata> {
   const { id } = await params;
+
   const template = templates.find((t) => t.id === id);
 
-  if (!template) {
+  if (!template)
     return {
-      title: "Template Preview | VeriWorkly",
+      title: "Template Preview",
       robots: { index: true, follow: true },
     };
-  }
 
-  const title = `${template.name} Template Live Preview | VeriWorkly`;
+  const title = `${template.name} Template Live Preview`;
   const description = `See a live interactive preview of the ${template.name} template. Switch styles, layouts, and visualize your portfolio.`;
 
   const imageUrl = `/og/templates/preview/${template.id}-preview-page-og.png`;
@@ -59,6 +61,8 @@ export async function generateMetadata({
 
 export default async function Preview({ params }: { params: Promise<{ id: string }> }) {
   const { id } = await params;
+
   if (!isTemplateId(id)) notFound();
+
   return <DraftPreview templateId={id} />;
 }

apps/portfolio/components/PortfolioPublicFooter.tsx

@@ -32,7 +32,7 @@ const products = [
 
 const PortfolioPublicFooter = () => {
   return (
-    <footer className="bg-[#11110f] dark:bg-panel text-[#f5f4ef]">
+    <footer className="dark:bg-panel bg-[#11110f] text-[#f5f4ef]">
       <div className="mx-auto grid w-[min(1360px,calc(100%-48px))] gap-12 py-16 max-sm:w-[min(calc(100%-30px),1360px)] lg:grid-cols-[1.1fr_1.4fr]">
         <div>
           <Link href="/" className="flex items-center gap-3 text-sm font-medium tracking-[-.04em]">

apps/portfolio/components/dashboard/editor/SectionEditor.tsx

@@ -44,6 +44,30 @@ export function SectionEditor({ section }: SectionEditorProps) {
           The contact section uses your public email and availability from Introduction.
         </p>
       ) : null}
+      {section.type === "writing" ? (
+        <div className="border-line bg-panel mb-4 rounded-xl border p-4">
+          <label className="flex cursor-pointer items-start gap-3 select-none">
+            <input
+              type="checkbox"
+              className="border-line bg-paper text-accent focus:ring-accent mt-0.5 rounded"
+              checked={section.settings?.showNewsletter !== false}
+              onChange={(e) =>
+                updateSection(section.id, {
+                  settings: { ...section.settings, showNewsletter: e.target.checked },
+                })
+              }
+            />
+            <div>
+              <span className="text-ink block text-sm font-semibold">
+                Include newsletter signup
+              </span>
+              <span className="text-muted text-xs">
+                Display a subscription card at the bottom of your writing section.
+              </span>
+            </div>
+          </label>
+        </div>
+      ) : null}
       <div className="space-y-3">
         {section.items.map((item, index) => (
           <div

apps/portfolio/components/landing/CtaSection.tsx

@@ -10,7 +10,7 @@ const CtaSection = () => {
       <div className="mx-auto w-[min(1360px,calc(100%-48px))] max-sm:w-[min(calc(100%-30px),1360px)]">
         <div
           data-reveal
-          className="bg-[#11110f] dark:bg-panel relative grid min-h-170 place-content-center overflow-hidden rounded-[28px] px-8 py-16 text-center text-[#f5f4ef]"
+          className="dark:bg-panel relative grid min-h-170 place-content-center overflow-hidden rounded-[28px] bg-[#11110f] px-8 py-16 text-center text-[#f5f4ef]"
         >
           <div
             aria-hidden="true"
@@ -19,7 +19,7 @@ const CtaSection = () => {
             className="bg-accent absolute top-1/2 left-1/2 h-[42vw] w-[42vw] -translate-x-1/2 -translate-y-1/2 rounded-full opacity-25 blur-[100px]"
           />
 
-          <p className="relative z-2 mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] dark:text-accent uppercase">
+          <p className="dark:text-accent relative z-2 mb-5 text-[0.72rem] font-bold tracking-[0.16em] text-[#93c5fd] uppercase">
             You already did the work.
           </p>
 

apps/portfolio/components/landing/FaqSection.tsx

@@ -33,7 +33,7 @@ const FaqSection = () => {
         <div className="mt-10">
           <Link
             href="/faq"
-            className="border-ink-2 bg-ink-2 hover:text-ink-2 inline-flex min-h-12 items-center justify-center gap-2 rounded-full border-2 px-6 text-sm font-bold text-white transition-all duration-300 hover:-translate-y-1 hover:bg-transparent active:scale-[0.97]"
+            className="border-ink-2 bg-ink-2 hover:text-ink-2 text-paper inline-flex min-h-12 items-center justify-center gap-2 rounded-full border-2 px-6 text-sm font-bold transition-all duration-300 hover:-translate-y-1 hover:bg-transparent active:scale-[0.97]"
           >
             Browse all FAQs <ArrowRight size={15} />
           </Link>

apps/portfolio/components/landing/FeatureGridSection.tsx

@@ -2,7 +2,7 @@ import { Check, Globe2, MousePointer2, PencilLine, Search, Sparkles } from "luci
 
 const FeatureGridSection = () => {
   return (
-    <section className="bg-[#11110f] dark:bg-paper-2 py-32 text-[#f4f2e9] md:py-48">
+    <section className="dark:bg-paper-2 bg-[#11110f] py-32 text-[#f4f2e9] md:py-48">
       <div className="mx-auto w-[min(1360px,calc(100%-48px))] max-sm:w-[min(calc(100%-30px),1360px)]">
         <div className="mb-18 space-y-8" data-reveal>
           <p className="mb-5 text-[0.72rem] font-bold tracking-[0.16em] uppercase">
@@ -18,7 +18,7 @@ const FeatureGridSection = () => {
         <div className="grid grid-flow-dense auto-rows-[430px] grid-cols-12 gap-3 max-lg:auto-rows-auto max-lg:grid-cols-1">
           <article
             data-reveal
-            className="hover:border-accent relative col-span-7 flex overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="hover:border-accent dark:bg-panel relative col-span-7 flex overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
             <div className="flex items-start gap-4">
               <PencilLine size={20} aria-hidden="true" />
@@ -34,7 +34,7 @@ const FeatureGridSection = () => {
               </div>
             </div>
 
-            <div className="text-[#11110f] absolute right-8 -bottom-16.25 left-[10%] -rotate-2 rounded-t-2xl bg-[#f4f2e9] p-6 max-sm:right-6 max-sm:left-6">
+            <div className="absolute right-8 -bottom-16.25 left-[10%] -rotate-2 rounded-t-2xl bg-[#f4f2e9] p-6 text-[#11110f] max-sm:right-6 max-sm:left-6">
               <span className="mb-2 flex justify-between text-[9px] font-bold uppercase">
                 Headline <span>64 / 80</span>
               </span>
@@ -61,9 +61,9 @@ const FeatureGridSection = () => {
 
           <article
             data-reveal
-            className="bg-accent border-accent/25 relative col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border p-8 text-accent-ink transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="bg-accent border-accent/25 text-accent-ink relative col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
-            <div className="self-end rounded-full border border-accent-ink/25 p-6">
+            <div className="border-accent-ink/25 self-end rounded-full border p-6">
               <Globe2 size={88} strokeWidth={1} aria-hidden="true" />
             </div>
 
@@ -72,11 +72,11 @@ const FeatureGridSection = () => {
                 A subdomain with your name on it
               </h3>
 
-              <p className="mt-3 text-xs leading-7 text-accent-ink/70">
+              <p className="text-accent-ink/70 mt-3 text-xs leading-7">
                 Claim a clean address the moment you publish.
               </p>
 
-              <div className="mt-5 inline-flex items-center gap-2 rounded-full border border-accent-ink/25 bg-accent-ink/15 px-3 py-2 text-[10px] font-bold">
+              <div className="border-accent-ink/25 bg-accent-ink/15 mt-5 inline-flex items-center gap-2 rounded-full border px-3 py-2 text-[10px] font-bold">
                 <span className="size-1.75 rounded-full bg-[#50d672]" aria-hidden="true" />
                 gautam.veriworkly.com
               </div>
@@ -85,7 +85,7 @@ const FeatureGridSection = () => {
 
           <article
             data-reveal
-            className="hover:border-accent col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
+            className="hover:border-accent dark:bg-panel col-span-5 flex flex-col justify-between overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-107.5"
           >
             <div>
               <Search size={20} aria-hidden="true" />
@@ -99,20 +99,20 @@ const FeatureGridSection = () => {
               </p>
             </div>
 
-            <div className="text-[#11110f] rotate-2 rounded-2xl bg-white p-5">
+            <div className="rotate-2 rounded-2xl bg-white p-5 text-[#11110f]">
               <span className="text-[10px] text-[#237b38]">gautam.veriworkly.com</span>
 
               <b className="text-accent mt-2 block text-base">Gautam Raj - Builder of VeriWorkly</b>
 
-              <p className="text-[#11110f]/60 mt-1 text-xs leading-6">
+              <p className="mt-1 text-xs leading-6 text-[#11110f]/60">
                 Portfolio builder, resume tools, publishing workflows, and product experiments.
               </p>
             </div>
           </article>
 
           <article
             data-reveal
-            className="hover:border-accent col-span-7 flex items-end gap-3 overflow-hidden rounded-3xl border border-white/10 bg-[#191916] dark:bg-panel p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-130 max-sm:flex-wrap"
+            className="hover:border-accent dark:bg-panel col-span-7 flex items-end gap-3 overflow-hidden rounded-3xl border border-white/10 bg-[#191916] p-8 transition-all! duration-500 hover:-translate-y-1.5 max-lg:col-auto max-lg:min-h-130 max-sm:flex-wrap"
           >
             <div className="w-[35%] self-start max-sm:w-full">
               <Sparkles size={20} aria-hidden="true" />
@@ -126,12 +126,12 @@ const FeatureGridSection = () => {
               </p>
             </div>
 
-            <div className="text-[#11110f] flex h-3/4 w-[27%] -rotate-3 flex-col justify-between rounded-2xl bg-[#f2efe5] p-5 transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
+            <div className="flex h-3/4 w-[27%] -rotate-3 flex-col justify-between rounded-2xl bg-[#f2efe5] p-5 text-[#11110f] transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
               <span className="text-[9px] font-bold uppercase">Signal</span>
               <strong className="text-6xl tracking-[-0.08em]">Aa</strong>
             </div>
 
-            <div className="bg-accent flex h-3/4 w-[27%] rotate-3 flex-col justify-between rounded-2xl p-5 text-accent-ink transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
+            <div className="bg-accent text-accent-ink flex h-3/4 w-[27%] rotate-3 flex-col justify-between rounded-2xl p-5 transition duration-500 hover:-translate-y-3 max-sm:h-64 max-sm:w-[calc(50%-0.5rem)]">
               <span className="text-[9px] font-bold uppercase">Atelier</span>
               <strong className="text-6xl tracking-[-0.08em]">Aa</strong>
             </div>

apps/portfolio/components/landing/HeroPortfolio.tsx

@@ -8,25 +8,25 @@ const HeroPortfolio = () => {
       data-tilt-base="rotate(-2deg)"
       className="relative z-4 mx-auto mt-14 w-[min(1080px,84vw)] -rotate-2 transition-transform duration-300 max-lg:w-[92vw]"
     >
-      <div className="border-ink-2 overflow-hidden rounded-3xl border-8 bg-panel shadow-[25px_30px_0_rgba(17,17,15,0.13)] max-sm:rounded-2xl max-sm:border-[3px]">
-        <div className="border-ink-2 flex h-12 items-center justify-between gap-4 border-b-2 bg-panel px-4 text-[10px] font-medium">
+      <div className="border-ink-2 bg-panel overflow-hidden rounded-3xl border-8 shadow-[25px_30px_0_rgba(17,17,15,0.13)] max-sm:rounded-2xl max-sm:border-[3px]">
+        <div className="border-ink-2 bg-panel flex h-12 items-center justify-between gap-4 border-b-2 px-4 text-[10px] font-medium">
           <span className="flex gap-1.5">
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
             <i className="border-ink-2 size-2 rounded-full border" aria-hidden="true" />
           </span>
 
-          <span className="rounded-full bg-paper px-6 py-1.5 max-sm:hidden">
+          <span className="bg-paper rounded-full px-6 py-1.5 max-sm:hidden">
             gautam.veriworkly.com
           </span>
 
           <span className="bg-accent size-2 rounded-full" aria-hidden="true" />
         </div>
 
-        <div className="relative h-135 overflow-hidden bg-paper-2 p-8 max-lg:h-105 max-lg:p-5 max-sm:h-92.5">
+        <div className="bg-paper-2 relative h-135 overflow-hidden p-8 max-lg:h-105 max-lg:p-5 max-sm:h-92.5">
           <div className="text-ink-2/55 flex items-center justify-between text-[10px] font-medium tracking-[0.16em] uppercase">
             <span>Builder console</span>
-            <span className="rounded-full bg-panel px-3 py-1">Live draft</span>
+            <span className="bg-panel rounded-full px-3 py-1">Live draft</span>
           </div>
 
           <div className="mt-12 grid gap-8 max-lg:mt-8 lg:grid-cols-[1.02fr_0.98fr]">
@@ -42,7 +42,7 @@ const HeroPortfolio = () => {
               <div className="mt-8 grid max-w-lg gap-3 sm:grid-cols-3">
                 {["Projects", "SEO title", "Subdomain"].map((item, index) => (
                   <div
-                    className="border-ink-2/15 rounded-2xl border bg-panel/72 p-4 text-left shadow-[6px_7px_0_rgba(17,17,15,0.08)]"
+                    className="border-ink-2/15 bg-panel/72 rounded-2xl border p-4 text-left shadow-[6px_7px_0_rgba(17,17,15,0.08)]"
                     key={item}
                   >
                     <span className="text-accent text-[10px] font-medium" aria-hidden="true">
@@ -61,7 +61,7 @@ const HeroPortfolio = () => {
                 aria-hidden="true"
               />
 
-              <div className="text-ink-2 relative z-2 rounded-3xl bg-panel p-5">
+              <div className="text-ink-2 bg-panel relative z-2 rounded-3xl p-5">
                 <div className="flex items-center justify-between text-[10px] font-medium uppercase">
                   <span>VeriWorkly</span>
                   <span>Signal</span>
@@ -92,7 +92,7 @@ const HeroPortfolio = () => {
 
       <div
         data-parallax="0.08"
-        className="border-ink-2 absolute bottom-[-8%] -left-4 flex h-fit items-center gap-2.5 rounded-2xl border-2 bg-panel px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:bottom-0 sm:-left-2 lg:top-[26%] lg:bottom-auto lg:left-[-4%] xl:left-[-8%]"
+        className="border-ink-2 bg-panel absolute bottom-[-8%] -left-4 flex h-fit items-center gap-2.5 rounded-2xl border-2 px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:bottom-0 sm:-left-2 lg:top-[26%] lg:bottom-auto lg:left-[-4%] xl:left-[-8%]"
       >
         <WandSparkles size={17} />
 
@@ -103,7 +103,7 @@ const HeroPortfolio = () => {
 
       <div
         data-parallax="-0.07"
-        className="border-ink-2 absolute top-[-15%] right-[-2%] z-10 flex h-fit items-center gap-2.5 rounded-2xl border-2 bg-panel px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:top-[28%] sm:right-[-2%] lg:top-auto lg:right-[-7%] lg:bottom-[25%]"
+        className="border-ink-2 bg-panel absolute top-[-15%] right-[-2%] z-10 flex h-fit items-center gap-2.5 rounded-2xl border-2 px-3.5 py-3 text-[10px] shadow-[7px_7px_0_#11110f] sm:top-[28%] sm:right-[-2%] lg:top-auto lg:right-[-7%] lg:bottom-[25%]"
       >
         <span className="size-1.75 rounded-full bg-[#50d672] shadow-[0_0_0_4px_rgba(80,214,114,0.18)]" />
         <span>

apps/portfolio/components/landing/HeroSection.tsx

@@ -8,9 +8,7 @@ const action =
 
 const HeroSection = () => {
   return (
-    <section
-      className="relative flex min-h-svh flex-col items-center overflow-hidden bg-[radial-gradient(circle_at_var(--pointer-x,78%)_var(--pointer-y,18%),rgba(37,99,235,0.24),transparent_31%),radial-gradient(circle_at_10%_70%,rgba(255,255,255,0.12),transparent_28%),var(--color-paper-2)] px-6 pt-52 pb-28 max-sm:px-4 md:pt-44 md:pb-20"
-    >
+    <section className="relative flex min-h-svh flex-col items-center overflow-hidden bg-[radial-gradient(circle_at_var(--pointer-x,78%)_var(--pointer-y,18%),rgba(37,99,235,0.24),transparent_31%),radial-gradient(circle_at_10%_70%,rgba(255,255,255,0.12),transparent_28%),var(--color-paper-2)] px-6 pt-52 pb-28 max-sm:px-4 md:pt-44 md:pb-20">
       <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(#11110f_0.7px,transparent_0.7px)] mask-[linear-gradient(to_bottom,black,transparent_75%)] bg-size-[7px_7px] opacity-[0.18]" />
       <div className="border-ink-2/10 absolute top-[-30vw] left-[-15vw] h-[54vw] w-[54vw] rounded-full border" />
       <div className="border-ink-2/10 absolute top-[15vw] right-[-33vw] h-[45vw] w-[45vw] rounded-full border" />
@@ -41,7 +39,7 @@ const HeroSection = () => {
 
           <Link
             href="/templates"
-            className={`${action} border-ink-2/20 text-ink-2 border bg-panel/65`}
+            className={`${action} border-ink-2/20 text-ink-2 bg-panel/65 border`}
           >
             Check live templates <ArrowDownRight size={16} aria-hidden="true" />
           </Link>

apps/portfolio/components/landing/SeoSection.tsx

@@ -49,7 +49,7 @@ const SeoSection = () => {
           <article
             data-reveal
             key={topic.title}
-            className="border-ink-2/15 rounded-4xl border bg-panel/72 p-7 shadow-[10px_12px_0_rgba(37,99,235,0.08)]"
+            className="border-ink-2/15 bg-panel/72 rounded-4xl border p-7 shadow-[10px_12px_0_rgba(37,99,235,0.08)]"
           >
             <span className="text-accent text-xs font-medium" aria-hidden="true">
               0{index + 1}
@@ -67,7 +67,7 @@ const SeoSection = () => {
           {proofPoints.map((point) => (
             <div
               key={point.id}
-              className="border-ink-2/12 bg-ink-2 flex items-center gap-3 rounded-2xl border px-4 py-4 text-sm font-medium text-paper"
+              className="border-ink-2/12 bg-ink-2 text-paper flex items-center gap-3 rounded-2xl border px-4 py-4 text-sm font-medium"
             >
               <Check className="size-4 text-[#93c5fd] dark:text-[#2563eb]" aria-hidden="true" />
               {point.text}