styling: icons makeover

frontend/src/pages/About.tsx

@@ -9,6 +9,7 @@ import {
     GhostIcon,
     GithubLogoIcon,
     InfoIcon,
+    LockKeyOpenIcon,
     LockLaminatedIcon,
     LockOpenIcon,
     PasswordIcon,
@@ -125,8 +126,8 @@ function PrivacySection() {
                                     B@z1ng4A
                                 </p>
                             </div>
-              <div className="divider divider-neutral opacity-50 w-1/2 mx-auto">
-                <LockOpenIcon size={48} />
+                            <div className="divider divider-neutral w-1/2 mx-auto">
+                                <LockKeyOpenIcon weight="duotone" className="-scale-x-100 text-base-200 w-full rounded-full bg-info/50" size={36} />
                             </div>
                             <div className="flex flex-col items-center md:gap-2">
                                 <ScrollIcon
@@ -138,7 +139,7 @@ function PrivacySection() {
                                 </h2>
                                 <div className="p-6 bg-paper w-82 md:w-150 h-200 flex flex-col gap-4 text-xs md:text-lg overflow-hidden max-h-68 md:max-h-full">
                                     <p className="wrap-anywhere">Hello friend,</p>
-                  <p>I've never told this to anyone...</p>
+                                    <p>I've never told anyone this...</p>
                                     <p className="font-redact">
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
                                         semper, justo eget vehicula vestibulum, enim enim suscipit
@@ -178,8 +179,8 @@ function PrivacySection() {
                                     9e54d05f88bdd67a675b03bf1cd0a1647e2109b5aa18185ff6a9ba4c6959a19d
                                 </p>
                             </div>
-              <div className="divider divider-neutral opacity-50 w-1/2 mx-auto">
-                <LockLaminatedIcon size={48} />
+                            <div className="divider divider-neutral w-1/2 mx-auto">
+                                <LockLaminatedIcon weight="duotone" className="text-success-content w-full rounded-full bg-success" size={36} />
                             </div>
                             <div className="flex flex-col items-center md:gap-2">
                                 <ScrollIcon
@@ -296,8 +297,10 @@ function SpecsSection() {
                             (unless this happens)
                         </a>
                     </span>
+                    <div className="w-18 h-18 flex shrink-0 items-center justify-center bg-success/20 rounded-full p-0 ">
+                        <VaultIcon size={36} weight="duotone" className="text-neutral-content" />
+                    </div>
 
-          <VaultIcon size={48} weight="duotone" />
                 </p>
 
                 <button