style: refined blockquote styling

frontend/src/pages/About.tsx

@@ -15,6 +15,7 @@ import {
   PeaceIcon,
   PersonArmsSpreadIcon,
   PersonIcon,
+  QuotesIcon,
   ScrollIcon,
   SmileyIcon,
   SparkleIcon,
@@ -348,13 +349,13 @@ function OSSSection() {
         is{" "}
         <span className="line-through decoration-6 text-neutral-content/50 decoration-error">
           &nbsp;private
-                </span>{" "}
           <span className="absolute -translate-y-2 -translate-x-42 md:-translate-x-72 font-hand text-xs md:text-xl opacity-70 rotate-8 tracking-normal inline-flex items-center not-italic w-48 md:w-100 flex-wrap">
             only for
             <span className="text-primary">&nbsp;your letters&nbsp;</span>{" "}
             <SmileyIcon weight="duotone" className="text-primary" />
             <ArrowArcLeftIcon className="text-accent inline rotate-45 -translate-y" />
           </span>
+        </span>{" "}
         <span className="text-success -rotate-3">open source !</span>
       </h1>
       <div className="flex flex-col items-center shrink-0 max-w-11/12 w-220 gap-4 p-4 md:p-6 text-neutral-content/80">
@@ -652,6 +653,7 @@ function ArchetypesSection() {
       >
         The Archetypes
       </h1>
+      <p className="font-hand text-xs md:text-xl">of writing</p>
       <div className="flex flex-col items-center shrink-0 w-220 max-w-11/12 gap-2 md:gap-8 my-4">
         <div className="relative w-full">
           <details
@@ -671,7 +673,7 @@ function ArchetypesSection() {
                 finished.
                 <br />
               </p>
-                            <p className="font-serif font-medium opacity-70">
+              <p className="font-tamil font-medium opacity-70">
                 Write the letter anyway. Keep it close.
               </p>
             </div>
@@ -701,7 +703,7 @@ function ArchetypesSection() {
                 noise of a conversation already in motion. A letter slows it
                 down.
               </p>
-                            <p className="font-serif font-medium opacity-70">
+              <p className="font-tamil font-medium opacity-70">
                 Give people their due flowers while they can still smell them.
               </p>
             </div>
@@ -738,7 +740,7 @@ function ArchetypesSection() {
                 Ask yourself of the healed wounds, forgotten fears, or the
                 things you finally learned to live with.
               </p>
-                            <p className="font-serif font-medium opacity-70">
+              <p className="font-tamil font-medium opacity-70">
                 Set a date and let a letter surprise you when you've long
                 forgotten writing it.
               </p>
@@ -764,7 +766,7 @@ function ArchetypesSection() {
                 putting it somewhere outside of yourself. <br />
                 That's sometimes enough.
               </p>
-                            <p className="font-serif font-medium opacity-70">
+              <p className="font-tamil font-medium opacity-70">
                 Say it once. All of it. Then let it fade.
               </p>
             </div>
@@ -964,10 +966,18 @@ function AttributionSection() {
             <span className="font-hand">(get it?)</span>
           </p>
         </div>
-                <blockquote className="text-base-200 italic mt-8 md:mt-12 mx-auto border-l-neutral-content/50 leading-relaxed border-l-4 pl-4 max-w-11/12 text-lg">
-                    "I think we forget things if there is nobody to tell them."
+        <blockquote className="text-base-300 italic mt-8 md:mt-12 mx-auto border-l-neutral-content/50 leading-relaxed border-l-4 pl-4 max-w-11/12 text-lg">
+          <QuotesIcon
+            weight="duotone"
+            size={48}
+            className="rotate-180 text-neutral-content"
+          />{" "}
+          I think we forget things if there is nobody to tell them.
           <span className="block mt-2 text-sm not-italic text-base-200/70 w-full text-right">
-                        ~ Saajan Fernandes, <span className="italic">The Lunchbox</span>
+            ~ Saajan Fernandes,{" "}
+            <span className="italic underline decoration-dotted">
+              The Lunchbox
+            </span>
           </span>
         </blockquote>
       </div>