feat: responsive copy adaptation for bout page

frontend/src/pages/About.tsx

@@ -224,8 +224,8 @@ function SpecsSection() {
         <DetectiveIcon weight="duotone" className="text-neutral" />
         Specs
       </h1>
-      <div className="flex flex-col items-center shrink-0 gap-6 max-w-11/12 w-220 mt-4 md:mt-12 text-neutral-content/80">
-        <h2 className="text-xl md:text-3xl text-center mx-auto">
+      <div className="flex flex-col items-center shrink-0 gap-2 md:gap-6 max-w-11/12 w-220 mt-4 md:mt-12 text-neutral-content/80">
+        <h2 className="text-lg md:text-3xl text-center mx-auto leading-tight md:leading-normal">
           <Logo type={"inline"} /> uses&nbsp;
           <span className="text-accent font-mono">Zero Knowledge</span>&nbsp;
           <button
@@ -263,12 +263,12 @@ function SpecsSection() {
           </a>
           &nbsp; for the <span className="font-hand text-primary">keys</span>.
         </h2>
-        <div className="text-sm md:text-xl leading-relaxed">
+        <div className="text-sm md:text-xl md:leading-relaxed">
           This means, both the&nbsp;
           <span className="font-display text-info">encryption</span> and&nbsp;
           <span className="font-display text-info">decryption</span> runs on
           your device, in your browser.
-          <ul className="list-decimal ml-6 md:ml-10 list-outside text-neutral marker:text-primary/30 marker:font-mono marker:text-xs marker:md:text-base">
+          <ul className="list-decimal ml-6 md:ml-10 list-outside text-neutral marker:text-primary/30 marker:font-mono marker:text-xs marker:md:text-base leading-tight">
             <li>
               Every letter has a&nbsp;
               <span className="font-mono text-primary/50 font-bold">
@@ -313,7 +313,7 @@ function SpecsSection() {
               &nbsp;(unless this happens)
             </a>
           </span>
-          <div className="flex shrink-0 items-center justify-end bg-success/20 rounded-full p-4 ">
+          <div className="hidden md:flex shrink-0 items-center justify-end bg-success/20 rounded-full p-4 ">
             <VaultIcon
               size={36}
               weight="duotone"
@@ -357,7 +357,7 @@ function SpecsSection() {
 
 function OSSSection() {
   return (
-    <section className="flex flex-col h-screen w-screen items-center justify-center py-18 gap-4">
+    <section className="flex flex-col h-screen w-screen items-center justify-center md:py-18 md:gap-4">
       <h1
         className={
           "relative tracking-tighter text-4xl md:text-8xl text-neutral-content/80 font-extrabold italic font-serif text-center"
@@ -377,7 +377,7 @@ function OSSSection() {
         &nbsp;
         <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">
+      <div className="flex flex-col items-center shrink-0 max-w-11/12 w-220 gap-2 md:gap-4 p-2 md:p-6 text-neutral-content/80">
         <p className="text-sm md:text-xl">
           <Logo type={"mono"} /> is
           <span className="font-hand"> ...uhhh... pretty </span>
@@ -385,13 +385,14 @@ function OSSSection() {
           about privacy and encryption is publicly available in the code so you
           don't have to take my word at it.
         </p>
-        <p className="text-sm md:text-lg">
+        <p className="text-xs md:text-lg">
           You can also&nbsp;
           <span className="uppercase font-mono text-primary">Self-host</span>
           &nbsp;
-          <Logo type={"inline"} /> in just 4 steps.
+          <Logo type={"inline"} /> in just &nbsp;
+          <span className="font-mono text-primary">4 steps</span>.
         </p>
-        <div className="mockup-code w-110 max-w-11/12 text-xs">
+        <div className="mockup-code w-120 max-w-11/12 text-xs md:text-sm before:hidden before:md:block py-0 md:py-4">
           <pre data-prefix="$">
             <code>git clone https://git.ramvignesh.dev/me/pi-ku.git</code>
           </pre>
@@ -406,7 +407,7 @@ function OSSSection() {
           </pre>
         </div>
 
-        <div className="flex flex-wrap gap-4 w-full items-center justify-center">
+        <div className="flex flex-wrap md:gap-4 w-full items-center justify-center">
           <a
             href="https://git.ramvignesh.dev/me/pi-ku"
             target="_blank"
@@ -430,7 +431,7 @@ function OSSSection() {
 
         <div className="divider opacity-30 my-0"></div>
 
-        <p className="text-xxs md:text-sm tracking-widester font-semibold uppercase text-accent">
+        <p className="text-xxs md:text-sm tracking-widester font-semibold uppercase text-accent text-center">
           Built on the shoulders of open source.
         </p>
 
@@ -438,7 +439,9 @@ function OSSSection() {
           <Logo type={"mono"} /> wouldn't exist without the work of people who
           chose to build in the open.
         </p>
-        <p className="divider font-display opacity-30 my-0">a big thanks to</p>
+        <p className="divider font-display opacity-30 my-0 text-xs md:text-lg">
+          a big thanks to
+        </p>
         <p className="text-sm md:text-lg">
           <a
             href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API"
@@ -479,7 +482,7 @@ function OSSSection() {
           experience instead of re-inventing the wheel.
         </p>
 
-        <p className="text-sm md:text-lg mt-2 md:mt-4 text-neutral">
+        <p className="hidden md:block text-sm md:text-lg mt-2 md:mt-4 text-neutral">
           Open source is what made <Logo type={"inline"} /> possible. It always
           feels right to give it back the same way.
         </p>
@@ -515,7 +518,10 @@ function StorySection() {
           </button>
           <ArrowBendDownLeftIcon className={"text-primary"} />
           <ArrowBendDownRightIcon className="ml-8 text-primary" />
-          <div className={"flex flex-col flex-wrap group ul-wavy"}>
+          <button
+            type="button"
+            className={"flex flex-col flex-wrap group ul-wavy"}
+          >
             குறிப்பு
             <span
               className={
@@ -524,7 +530,7 @@ function StorySection() {
             >
               note. remark.
             </span>
-          </div>
+          </button>
         </div>
         {/* Dict Card */}
         <div className="hover-3d -my-8 md:m-4 scale-75 md:scale-100 md:my-12 cursor-pointer">
@@ -681,7 +687,7 @@ function ArchetypesSection() {
       >
         The Archetypes
       </h1>
-      <p className="font-hand text-xs md:text-xl">of writing</p>
+      <p className="font-hand text-sm 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
@@ -689,7 +695,7 @@ function ArchetypesSection() {
             name="my-accordion-det-1"
             open
           >
-            <summary className="collapse-title md:text-xl leading-tight font-hand flex items-center gap-4">
+            <summary className="collapse-title text-lg md:text-xl leading-tight font-hand flex items-center gap-4">
               <GhostIcon weight="duotone" className="text-accent" size={32} />
               &nbsp; To someone you can't reach anymore.
             </summary>
@@ -701,7 +707,8 @@ function ArchetypesSection() {
                 finished.
                 <br />
               </p>
-              <p className="font-ink font-medium opacity-70">
+              <p className="font-mono text-xs md:text-base italic text-center font-medium text-neutral">
+                <QuotesIcon className="-scale-100" />
                 Write the letter anyway. Keep it close.
               </p>
             </div>
@@ -731,7 +738,8 @@ function ArchetypesSection() {
                 noise of a conversation already in motion. A letter slows it
                 down.
               </p>
-              <p className="font-ink font-medium opacity-70">
+              <p className="font-mono text-xs md:text-base italic text-center font-medium text-neutral">
+                <QuotesIcon className="-scale-100" />
                 Give people their due flowers while they can still smell them.
               </p>
             </div>
@@ -769,7 +777,8 @@ function ArchetypesSection() {
                 Ask yourself of the healed wounds, forgotten fears, or the
                 things you finally learned to live with.
               </p>
-              <p className="font-ink font-medium opacity-70">
+              <p className="font-mono text-xs md:text-base italic text-center font-medium text-neutral">
+                <QuotesIcon className="-scale-100" />
                 Set a date and let a letter surprise you when you've long
                 forgotten writing it.
               </p>
@@ -795,7 +804,8 @@ function ArchetypesSection() {
                 putting it somewhere outside of yourself. <br />
                 That's sometimes enough.
               </p>
-              <p className="font-ink font-medium opacity-70">
+              <p className="font-mono text-xs md:text-base italic text-center font-medium text-neutral">
+                <QuotesIcon className="-scale-100" />
                 Say it once. All of it. Then let it fade.
               </p>
             </div>