From 14916ae3859a050844169281143565c5fd3bd3d9 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 10 Feb 2025 12:03:46 +0100
Subject: [PATCH 1/2] chore(frontend): migrate with tailwind's script

---
 frontend/package.json                         |    5 +-
 frontend/postcss.config.mjs                   |    2 +-
 .../ResearchSection.tsx                       |    6 +-
 .../DisputeResolutionProcess.tsx              |    4 +-
 .../LemonCashSection.tsx                      |    8 +-
 .../MethodsTable/DesktopTable.tsx             |   20 +-
 frontend/src/app/home/components/Hero.tsx     |    6 +-
 .../src/app/home/components/LearnPosts.tsx    |    4 +-
 .../src/app/home/components/TrustedBy.tsx     |   14 +-
 frontend/src/app/layout.tsx                   |    4 +-
 .../Cooperative/ReportSection/ReportCard.tsx  |    4 +-
 frontend/src/components/DownloadButton.tsx    |    2 +-
 .../JurorTabContent/EnterCourtSection.tsx     |    4 +-
 frontend/src/components/Footer.tsx            |    4 +-
 .../DAOSection/KeyChallenges/SafeSnap.tsx     |   10 +-
 .../ForBuilders/UseCasesSection/index.tsx     |    2 +-
 .../src/components/IntegrateSection/index.tsx |    8 +-
 frontend/src/components/LearnMore.tsx         |    4 +-
 .../Navbar/ResourcesDropdownContent/index.tsx |   10 +-
 frontend/src/components/Navbar/index.tsx      |    6 +-
 .../src/components/PNKToken/Explorers.tsx     |    2 +-
 .../ResearchTabContent/KlerosBook.tsx         |    6 +-
 frontend/src/components/Tab.tsx               |    8 +-
 frontend/src/styles/globals.css               |  158 +-
 frontend/tailwind.config.ts                   |   50 -
 frontend/yarn.lock                            | 1347 ++++-------------
 26 files changed, 508 insertions(+), 1190 deletions(-)
 delete mode 100644 frontend/tailwind.config.ts

diff --git a/frontend/package.json b/frontend/package.json
index da42b2e..5844881 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "react-use": "^17.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.0.0",
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.4",
     "@types/react-dom": "^19.0.2",
@@ -34,8 +35,8 @@
     "lint-staged": "^15.3.0",
     "postcss": "^8",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "tailwindcss": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "4.0.0",
     "typescript": "^5"
   },
   "volta": {
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
index 1a69fd2..5d6d845 100644
--- a/frontend/postcss.config.mjs
+++ b/frontend/postcss.config.mjs
@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
index 70aeafd..63eee2e 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ResearchSection.tsx
@@ -37,17 +37,17 @@ const ResearchSection: React.FC<IResearchSection> = ({
 
   return (
     <div className="lg:px-32">
-      <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
         {secondHeader}
       </h2>
-      <p className="mb-12 text-secondary-text lg:text-lg">{secondSubtitle}</p>
+      <p className="text-secondary-text mb-12 lg:text-lg">{secondSubtitle}</p>
 
       <div className="mb-12 grid grid-cols-1 gap-4 lg:grid-cols-3">
         {items.map((publication, index) => (
           <PublicationCard
             key={`${publication.topic}-${index}`}
             {...{ publication }}
-            className="[&>h2]:mb-4 [&>h2]:!text-lg [&>p]:mb-2"
+            className="[&>h2]:mb-4 [&>h2]:text-lg! [&>p]:mb-2"
           />
         ))}
       </div>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
index 63941bb..83b6179 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/DisputeResolutionProcess.tsx
@@ -17,8 +17,8 @@ const DisputeResolutionProcess: React.FC<IDisputeResolutionProcess> = ({
     <div className="flex flex-col gap-8 lg:px-32">
       <HighlightedText
         {...disputeResolutionProcessHeader}
-        fullTextStyle="!text-primary-text !text-lg !font-medium lg:!text-xl"
-        highlightedTextStyle="!text-lg !font-medium lg:!text-xl"
+        fullTextStyle="text-primary-text! text-lg! font-medium! lg:text-xl!"
+        highlightedTextStyle="text-lg! font-medium! lg:text-xl!"
       />
 
       <div className="relative flex w-full justify-center">
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
index 14311d5..746da68 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/LemonCashSection.tsx
@@ -21,17 +21,17 @@ const LemonCashSection: React.FC = async () => {
 
   return (
     <div className="lg:px-32">
-      <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-2xl">
+      <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-2xl">
         {header}
       </h2>
       <p className="text-primary-purple lg:text-lg">{primarySubtitle}</p>
-      <p className="mb-12 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-12 lg:text-lg">
         {secondarySubtitle}
       </p>
 
       <div
         className={clsx(
-          "rounded-2xl border border-stroke px-6 py-12 lg:px-12",
+          "border-stroke rounded-2xl border px-6 py-12 lg:px-12",
           "flex flex-col items-center gap-12 lg:flex-row lg:gap-16",
         )}
       >
@@ -40,7 +40,7 @@ const LemonCashSection: React.FC = async () => {
           height={180}
           src={icon.url}
           alt="Lemon cash"
-          className="flex-shrink-0"
+          className="shrink-0"
         />
         <div className="flex flex-col gap-4">
           <p className="text-primary-text lg:text-lg">{testimony}</p>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
index 050e892..8779a21 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/DesktopTable.tsx
@@ -10,8 +10,8 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
   return (
     <div
       className={clsx(
-        "rounded-2xl border-2 border-stroke bg-background-1",
-        "grid overflow-auto pl-8 pt-9",
+        "border-stroke bg-background-1 rounded-2xl border-2",
+        "grid overflow-auto pt-9 pl-8",
       )}
       style={{
         gridTemplateColumns: `repeat(${tableHeadings.length}, minmax(0, 1fr))`,
@@ -21,12 +21,12 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
         <div
           key={heading}
           className={clsx(
-            "border-b border-b-stroke pb-4 pl-4 pt-0",
+            "border-b-stroke border-b pt-0 pb-4 pl-4",
             index === 0 && "pl-0",
             index === tableHeadings.length - 1 && "pr-8",
           )}
         >
-          <span className="break-words text-lg font-medium text-primary-purple">
+          <span className="text-primary-purple text-lg font-medium break-words">
             {heading}
           </span>
         </div>
@@ -38,11 +38,11 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
             key={rowHeading}
             className={clsx(
               "py-4",
-              rowIndex !== tableRows.length - 1 && "border-b border-b-stroke",
+              rowIndex !== tableRows.length - 1 && "border-b-stroke border-b",
             )}
           >
             <span
-              className={"break-words text-lg font-medium text-primary-purple"}
+              className={"text-primary-purple text-lg font-medium break-words"}
             >
               {rowHeading}
             </span>
@@ -52,7 +52,7 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
             <div
               key={`${primaryValue}-${index}`}
               className={clsx(
-                "border-b border-b-stroke bg-background-2",
+                "border-b-stroke bg-background-2 border-b",
                 "flex flex-col p-4 pr-0",
                 //top-rows first element
                 index === 0 && rowIndex === 0 && "rounded-tl-2xl",
@@ -61,15 +61,15 @@ const DesktopTable: React.FC<IMethodsTable> = ({ table }) => {
                   rowIndex === tableRows.length - 1 &&
                   "rounded-bl-2xl border-none",
                 // last element of each row
-                index === rowData.length - 1 && "!pr-8",
+                index === rowData.length - 1 && "pr-8!",
                 //last row
                 rowIndex === tableRows.length - 1 && "border-none",
               )}
             >
-              <p className="break-words text-lg font-medium text-primary-text">
+              <p className="text-primary-text text-lg font-medium break-words">
                 {primaryValue}
               </p>
-              <p className="break-words text-secondary-text">
+              <p className="text-secondary-text break-words">
                 {secondaryValue}
               </p>
             </div>
diff --git a/frontend/src/app/home/components/Hero.tsx b/frontend/src/app/home/components/Hero.tsx
index f8ab394..09f1852 100644
--- a/frontend/src/app/home/components/Hero.tsx
+++ b/frontend/src/app/home/components/Hero.tsx
@@ -24,7 +24,7 @@ const Hero: React.FC = async () => {
   } = heroData.homePageHero;
 
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-20">
+    <div className="relative px-6 pt-44 pb-28 md:pt-52 lg:px-32 lg:pb-20">
       <div className="space-y-8">
         <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
@@ -45,7 +45,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           url={arrowLink.link.url}
           text={arrowLink.text}
-          className="text-start [&>span]:text-base [&>span]:text-primary-text"
+          className="[&>span]:text-primary-text text-start [&>span]:text-base"
         />
         <TokenStats {...{ tokenStats }} />
       </div>
@@ -54,7 +54,7 @@ const Hero: React.FC = async () => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/app/home/components/LearnPosts.tsx b/frontend/src/app/home/components/LearnPosts.tsx
index 9164466..d1130f4 100644
--- a/frontend/src/app/home/components/LearnPosts.tsx
+++ b/frontend/src/app/home/components/LearnPosts.tsx
@@ -22,12 +22,12 @@ const LearnPosts: React.FC = async () => {
         <p className="text-base lg:text-lg">{subtitle}</p>
         <div
           className={
-            "mx-auto mb-12 mt-16 flex flex-wrap gap-4 xl:grid xl:grid-cols-3"
+            "mx-auto mt-16 mb-12 flex flex-wrap gap-4 xl:grid xl:grid-cols-3"
           }
         >
           {cards.map(({ icon, title, subtitle, link }) => (
             <CtaCard
-              className="flex-grow"
+              className="grow"
               key={title}
               {...{ icon, title, description: subtitle, arrowLink: link }}
             />
diff --git a/frontend/src/app/home/components/TrustedBy.tsx b/frontend/src/app/home/components/TrustedBy.tsx
index f4dd972..c82b13b 100644
--- a/frontend/src/app/home/components/TrustedBy.tsx
+++ b/frontend/src/app/home/components/TrustedBy.tsx
@@ -14,7 +14,7 @@ const TrustedBy: React.FC = async () => {
 
   return (
     <div className="bg-background-2 py-12">
-      <h3 className="mx-auto mb-8 w-max text-lg text-secondary-text">
+      <h3 className="text-secondary-text mx-auto mb-8 w-max text-lg">
         Trusted By
       </h3>
       <div className="px-6 lg:px-10">
@@ -57,7 +57,7 @@ interface IPartnersCarousel {
 const PartnersCarousel: React.FC<IPartnersCarousel> = ({ partners }) => (
   <>
     {[...Array(4)].map((_, i) => (
-      <div className="h-16 animate-h-scroll" key={i}>
+      <div className="animate-h-scroll h-16" key={i}>
         {partners.map(({ name, icon_svg }) => (
           <div
             key={name}
@@ -72,7 +72,7 @@ const PartnersCarousel: React.FC<IPartnersCarousel> = ({ partners }) => (
               width="42"
               height="42"
               className={
-                "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+                "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
               }
             />
           </div>
@@ -86,14 +86,14 @@ const BlurredBorders: React.FC = () => (
   <>
     <div
       className={clsx(
-        "absolute bottom-0 left-0 right-[90%] top-0",
-        "bg-gradient-to-r from-background-2 to-transparent",
+        "absolute top-0 right-[90%] bottom-0 left-0",
+        "from-background-2 bg-linear-to-r to-transparent",
       )}
     />
     <div
       className={clsx(
-        "absolute bottom-0 left-[90%] right-0 top-0",
-        "bg-gradient-to-r from-transparent to-background-2",
+        "absolute top-0 right-0 bottom-0 left-[90%]",
+        "to-background-2 bg-linear-to-r from-transparent",
       )}
     />
   </>
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 7ad4e63..455995c 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -23,10 +23,10 @@ export default async function RootLayout({
 
   return (
     <html lang="en">
-      <body className="min-w-80 bg-background-1 antialiased">
+      <body className="bg-background-1 min-w-80 antialiased">
         <main className={clsx(urbanist.className)}>
           <Navbar {...{ navbarData }} />
-          <div className="mx-auto max-w-screen-2xl"> {children} </div>
+          <div className="mx-auto max-w-(--breakpoint-2xl)"> {children} </div>
           <Footer />
         </main>
       </body>
diff --git a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
index a28a0b5..b1fbc69 100644
--- a/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
+++ b/frontend/src/components/Cooperative/ReportSection/ReportCard.tsx
@@ -66,7 +66,7 @@ const ReportCard: React.FC<IReportCard> = ({
       )}
     >
       <div className="flex flex-col items-start gap-8">
-        <h2 className="text-xl font-medium text-primary-text md:text-3xl">
+        <h2 className="text-primary-text text-xl font-medium md:text-3xl">
           {title}
         </h2>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
@@ -92,7 +92,7 @@ const ReportCard: React.FC<IReportCard> = ({
 
       <div
         className={
-          "relative hidden h-32 w-32 flex-shrink-0 md:block md:h-56 md:w-56"
+          "relative hidden h-32 w-32 shrink-0 md:block md:h-56 md:w-56"
         }
       >
         <Image src={icon.url} alt={icon.name} fill className="object-contain" />
diff --git a/frontend/src/components/DownloadButton.tsx b/frontend/src/components/DownloadButton.tsx
index 770a672..a764091 100644
--- a/frontend/src/components/DownloadButton.tsx
+++ b/frontend/src/components/DownloadButton.tsx
@@ -38,7 +38,7 @@ const DownloadButton: React.FC<IDownloadButton> = ({ name, url }) => {
     <button
       onClick={handleDownload}
       className={clsx(
-        "rounded px-4 py-1 transition duration-75",
+        "rounded-sm px-4 py-1 transition duration-75",
         "bg-primary-blue",
         "hover:bg-primary-blue/90",
         "disabled:bg-stroke",
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
index acc1d70..d535970 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/EnterCourtSection.tsx
@@ -18,7 +18,7 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
         "relative mt-16 flex w-full flex-col items-center justify-center p-8"
       }
     >
-      <CustomLink href={button.link.url} className="z-[1] mb-8">
+      <CustomLink href={button.link.url} className="z-1 mb-8">
         <Button>
           <span className="text-background-2">{button.text}</span>
         </Button>
@@ -26,7 +26,7 @@ const EnterCourtSection: React.FC<IEnterCourtSection> = ({
       <ExternalLink
         url={arrowLink.link.url}
         text={arrowLink.text}
-        className="z-[1] flex-wrap justify-center"
+        className="z-1 flex-wrap justify-center"
       />
       <Image
         src={background.url}
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 74da489..c939b5b 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -20,7 +20,7 @@ const Footer: React.FC = async () => {
     cta: result.footerSubscribeCta,
   }));
   return (
-    <div className="mx-auto max-w-screen-2xl">
+    <div className="mx-auto max-w-(--breakpoint-2xl)">
       <div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
         <div
           className={clsx(
@@ -43,7 +43,7 @@ const Footer: React.FC = async () => {
             </div>
           ))}
         </div>
-        <hr className="mx-6 mb-6 mt-16 h-0.5 border-t-0 bg-primary-purple" />
+        <hr className="bg-primary-purple mx-6 mt-16 mb-6 h-0.5 border-t-0" />
         <div className="flex items-center justify-center gap-8">
           {socials.map(({ name, icon_white: icon, url }) => (
             <CustomLink className={hoverScaleUp} key={name} href={url}>
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
index b728081..8d1b253 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/SafeSnap.tsx
@@ -11,11 +11,11 @@ interface ISafeSnap {
 
 const SafeSnap: React.FC<ISafeSnap> = ({ useCasesData }) => {
   return (
-    <div className="rounded-2xl border border-stroke bg-background-2 p-6 pb-8 lg:p-8 lg:pb-16">
+    <div className="border-stroke bg-background-2 rounded-2xl border p-6 pb-8 lg:p-8 lg:pb-16">
       <h2 className="mb-4 text-lg font-medium lg:text-xl">
         {useCasesData.solutionSections.title}
       </h2>
-      <div className="mb-8 text-secondary-text lg:text-lg">
+      <div className="text-secondary-text mb-8 lg:text-lg">
         {useCasesData.solutionSections.description}
       </div>
 
@@ -29,16 +29,16 @@ const SafeSnap: React.FC<ISafeSnap> = ({ useCasesData }) => {
               key={useCasesData.solutionSections?.solution?.solution_name}
               solution={useCasesData.solutionSections.solution}
               variant="small"
-              className="border-gradient-purple-blue !rounded-2xl border-none before:!p-[1px]"
+              className="border-gradient-purple-blue rounded-2xl! border-none before:p-[1px]!"
             />
           </div>
         </div>
 
-        <div className="flex flex-grow flex-col gap-4">
+        <div className="flex grow flex-col gap-4">
           <div className="text-secondary-text">
             {useCasesData.solutionSections.partnersHeader}
           </div>
-          <div className="border-gradient-purple-blue flex flex-row gap-x-6 !rounded-2xl p-4 before:!p-[1px]">
+          <div className="border-gradient-purple-blue flex flex-row gap-x-6 rounded-2xl! p-4 before:p-[1px]!">
             {useCasesData.solutionSections.partners.map((partner) => (
               <CustomLink
                 key={partner?.name}
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
index bb9ddec..e01e4c6 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/index.tsx
@@ -11,7 +11,7 @@ interface IUseCasesSection {
 
 const UseCasesSection: React.FC<IUseCasesSection> = ({ useCasesData }) => {
   return (
-    <div className="relative bg-background-1 px-6 py-16 md:py-24 lg:px-32">
+    <div className="bg-background-1 relative px-6 py-16 md:py-24 lg:px-32">
       <h1 className="mb-8 text-xl font-medium lg:mb-12 lg:text-3xl">
         {useCasesData.sectionHeader}
       </h1>
diff --git a/frontend/src/components/IntegrateSection/index.tsx b/frontend/src/components/IntegrateSection/index.tsx
index a02d849..edd4048 100644
--- a/frontend/src/components/IntegrateSection/index.tsx
+++ b/frontend/src/components/IntegrateSection/index.tsx
@@ -14,13 +14,13 @@ const IntegrateSection: React.FC = async () => {
 
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h2 className="mb-8 text-base text-primary-purple lg:text-lg">
+      <h2 className="text-primary-purple mb-8 text-base lg:text-lg">
         {integrateData.header}
       </h2>
-      <h1 className="mb-8 text-xl text-primary-text lg:text-3xl">
+      <h1 className="text-primary-text mb-8 text-xl lg:text-3xl">
         {integrateData.title}
       </h1>
-      <p className="text-base text-secondary-text lg:mb-4 lg:text-lg">
+      <p className="text-secondary-text text-base lg:mb-4 lg:text-lg">
         {integrateData.description}
       </p>
       <AppsDropdownContent
@@ -31,7 +31,7 @@ const IntegrateSection: React.FC = async () => {
         background={integrateData.getInTouchSection.background}
         title={integrateData.header}
         button={integrateData.arrowLink}
-        className="!mt-12 lg:!mt-16"
+        className="mt-12! lg:mt-16!"
       />
       <ExternalLink
         className="mx-auto mt-12 lg:mt-16"
diff --git a/frontend/src/components/LearnMore.tsx b/frontend/src/components/LearnMore.tsx
index 5aeb750..aa7c0ab 100644
--- a/frontend/src/components/LearnMore.tsx
+++ b/frontend/src/components/LearnMore.tsx
@@ -30,10 +30,10 @@ const LearnMore: React.FC<ILearnMore> = ({
         className,
       )}
     >
-      <h2 className="z-[1] mb-8 text-center text-lg text-primary-text lg:text-xl">
+      <h2 className="text-primary-text z-1 mb-8 text-center text-lg lg:text-xl">
         {title}
       </h2>
-      <CustomLink href={button.link.url} className="z-[1]">
+      <CustomLink href={button.link.url} className="z-1">
         <Button>
           <span className="text-background-2">{button.text}</span>
         </Button>
diff --git a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
index 3fe386c..846a2a3 100644
--- a/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/ResourcesDropdownContent/index.tsx
@@ -16,10 +16,10 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
   closeFn,
 }) => {
   return (
-    <div className="flex flex-col items-center bg-background-2">
+    <div className="bg-background-2 flex flex-col items-center">
       <div
         className={clsx(
-          "grid w-full max-w-screen-lg grid-cols-1 divide-y-2 lg:grid-cols-3",
+          "grid w-full max-w-(--breakpoint-lg) grid-cols-1 divide-y-2 lg:grid-cols-3",
           "lg:divide-x-2 lg:divide-y-0 lg:py-8",
         )}
       >
@@ -27,11 +27,11 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
           <div
             key={section.title}
             className={clsx(
-              "flex w-full flex-col gap-4 border-stroke bg-background-2",
+              "border-stroke bg-background-2 flex w-full flex-col gap-4",
               "py-4 lg:px-4 lg:py-0",
             )}
           >
-            <h3 className="text-base font-bold text-primary-purple">
+            <h3 className="text-primary-purple text-base font-bold">
               {section.title}
             </h3>
             <ul className="flex flex-col gap-2">
@@ -54,7 +54,7 @@ const ResourcesDropdownContent: React.FC<ResourcesDropdownContentProps> = ({
       <div
         className={clsx(
           "flex w-full justify-start gap-6 py-3",
-          "lg:justify-center lg:gap-8 lg:bg-background-1 lg:py-8",
+          "lg:bg-background-1 lg:justify-center lg:gap-8 lg:py-8",
         )}
       >
         {socials?.map((social) => (
diff --git a/frontend/src/components/Navbar/index.tsx b/frontend/src/components/Navbar/index.tsx
index 411e5d2..b42b209 100644
--- a/frontend/src/components/Navbar/index.tsx
+++ b/frontend/src/components/Navbar/index.tsx
@@ -32,11 +32,11 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
   return (
     <header
       className={clsx(
-        "fixed left-0 right-0 top-0 z-50 h-20 w-screen min-w-80 bg-black/35",
+        "fixed top-0 right-0 left-0 z-50 h-20 w-screen min-w-80 bg-black/35",
         "backdrop-blur-md",
       )}
     >
-      <div className="mx-auto h-full max-w-screen-2xl px-2 md:px-16 xl:px-32">
+      <div className="mx-auto h-full max-w-(--breakpoint-2xl) px-2 md:px-16 xl:px-32">
         <div
           className={clsx(
             "flex h-full items-center justify-between",
@@ -95,7 +95,7 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
                 onClick={() => toggleMenuOpen(false)}
               >
                 <motion.div
-                  className="absolute bottom-0 top-0"
+                  className="absolute top-0 bottom-0"
                   initial={{ right: "-100%" }}
                   animate={{ right: 0 }}
                   exit={{ right: "-100%" }}
diff --git a/frontend/src/components/PNKToken/Explorers.tsx b/frontend/src/components/PNKToken/Explorers.tsx
index 0e6c599..d183e89 100644
--- a/frontend/src/components/PNKToken/Explorers.tsx
+++ b/frontend/src/components/PNKToken/Explorers.tsx
@@ -21,7 +21,7 @@ const Explorers: React.FC<IExplorers> = ({ explorers }) => {
             src={explorer.icon.url}
             fill
             alt={explorer.name}
-            className="!w-min"
+            className="w-min!"
           />
         </CustomLink>
       ))}
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
index 8dad61a..747ed80 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/KlerosBook.tsx
@@ -42,17 +42,17 @@ const KlerosBook: React.FC<IKlerosBook> = ({
     <div
       className={clsx(
         "bg-background-1",
-        "px-6 pb-[90px] pt-12 lg:flex-row lg:px-32 lg:py-24",
+        "px-6 pt-12 pb-[90px] lg:flex-row lg:px-32 lg:py-24",
         "flex flex-col items-start justify-start gap-16",
       )}
     >
-      <div className="max-w-457 relative h-[536px] w-full flex-shrink-0 lg:h-[717px] lg:w-[457px]">
+      <div className="relative h-[536px] w-full max-w-457 shrink-0 lg:h-[717px] lg:w-[457px]">
         <Image
           src={bookCover.url}
           alt="Book Cover"
           fill
           priority
-          className="!w-fit"
+          className="w-fit!"
         />
       </div>
       <div className="space-y-16">
diff --git a/frontend/src/components/Tab.tsx b/frontend/src/components/Tab.tsx
index 4c9770c..5c0510a 100644
--- a/frontend/src/components/Tab.tsx
+++ b/frontend/src/components/Tab.tsx
@@ -37,12 +37,12 @@ const Tab = ({ items, className }: ITab) => {
             key={item.text}
             className={clsx(
               "min-h-14",
-              "transition-all hover:cursor-pointer hover:border-b-[3px] hover:border-b-primary-blue hover:text-primary-blue",
-              "flex flex-grow items-center justify-center pb-6",
+              "hover:border-b-primary-blue hover:text-primary-blue transition-all hover:cursor-pointer hover:border-b-[3px]",
+              "flex grow items-center justify-center pb-6",
               "text-center font-medium lg:text-lg",
               i === activeTab
-                ? "border-b-[3px] border-b-primary-blue text-primary-blue"
-                : "border-b border-b-stroke text-secondary-text",
+                ? "border-b-primary-blue text-primary-blue border-b-[3px]"
+                : "border-b-stroke text-secondary-text border-b",
             )}
             onClick={() => setActiveTab(i)}
             onKeyDown={(e) => handleKeyDown(e, i)}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index dd8904c..7228b62 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -1,67 +1,135 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@theme {
+  --text-*: initial;
+  --text-sm: 0.9rem;
+  --text-sm--line-height: 1.063rem;
+  --text-base: 1rem;
+  --text-base--line-height: 1.188rem;
+  --text-lg: 1.5rem;
+  --text-lg--line-height: 1.813rem;
+  --text-xl: 2rem;
+  --text-xl--line-height: 2.375rem;
+  --text-2xl: 3rem;
+  --text-2xl--line-height: 3.625rem;
+  --text-3xl: 4rem;
+  --text-3xl--line-height: 4.813rem;
+  --text-4xl: 6rem;
+  --text-4xl--line-height: 7.188rem;
 
-.os-scrollbar {
-  --os-handle-bg: #42498f;
-}
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary-text: #daf0ff;
+  --color-secondary-text: #becce5;
+  --color-stroke: #42498f;
+  --color-primary-purple: #9747ff;
+  --color-secondary-purple: #ba75fe;
+  --color-dark-purple: #230079;
+  --color-primary-blue: #27cdfe;
+  --color-secondary-blue: #7ce2ff;
+  --color-background-1: #1b003f;
+  --color-background-2: #220050;
+  --color-background-dark: #13002d;
+  --color-background-translucent: rgba(34, 0, 80, 0.24);
+  --color-success: #00f068;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+  --animate-h-scroll: h-scroll 10s linear infinite;
+
+  @keyframes h-scroll {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
   }
 }
 
-html {
-  scrollbar-gutter: stable;
-
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-  ::-webkit-scrollbar-track {
-    background: transparent;
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
   }
 
-  ::-webkit-scrollbar-thumb {
-    background-color: #42498f;
-    border-radius: 16px;
-    transition:
-      opacity 0.15s,
-      background-color 0.15s,
-      border-color 0.15s,
-      width 0.15s;
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
   }
+}
 
-  scrollbar-width: thin;
-  scrollbar-color: #42498f transparent;
+@utility text-balance {
+  text-wrap: balance;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Urbanist, Helvetica, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 19px;
+@utility hover-pause-child-animation {
+  &:hover {
+    & > * {
+      animation-play-state: paused;
+    }
+  }
 }
 
 @layer utilities {
-  .text-balance {
-    text-wrap: balance;
+  :root {
+    --background: #ffffff;
+    --foreground: #171717;
   }
 
-  .hover-pause-child-animation:hover {
-    & > * {
-      animation-play-state: paused;
+  .os-scrollbar {
+    --os-handle-bg: #42498f;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: #0a0a0a;
+      --foreground: #ededed;
+    }
+  }
+
+  html {
+    scrollbar-gutter: stable;
+
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
+
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background-color: #42498f;
+      border-radius: 16px;
+      transition:
+        opacity 0.15s,
+        background-color 0.15s,
+        border-color 0.15s,
+        width 0.15s;
+    }
+
+    scrollbar-width: thin;
+    scrollbar-color: #42498f transparent;
+  }
+
+  body {
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Urbanist, Helvetica, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 19px;
   }
 }
 
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
deleted file mode 100644
index 6cd5c22..0000000
--- a/frontend/tailwind.config.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    fontSize: {
-      sm: ["0.9rem", "1.063rem"],
-      base: ["1rem", "1.188rem"],
-      lg: ["1.5rem", "1.813rem"],
-      xl: ["2rem", "2.375rem"],
-      "2xl": ["3rem", "3.625rem"],
-      "3xl": ["4rem", "4.813rem"],
-      "4xl": ["6rem", "7.188rem"],
-    },
-    extend: {
-      colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
-        "primary-text": "#DAF0FF",
-        "secondary-text": "#BECCE5",
-        stroke: "#42498F",
-        "primary-purple": "#9747FF",
-        "secondary-purple": "#BA75FE",
-        "dark-purple": "#230079",
-        "primary-blue": "#27CDFE",
-        "secondary-blue": "#7CE2FF",
-        "background-1": "#1B003F",
-        "background-2": "#220050",
-        "background-dark": "#13002D",
-        "background-translucent": "rgba(34, 0, 80, 0.24)",
-        success: "#00F068",
-      },
-      keyframes: {
-        "h-scroll": {
-          "0%": { transform: "translateX(0)" },
-          "100%": { transform: "translateX(-100%)" },
-        },
-      },
-      animation: {
-        "h-scroll": "h-scroll 10s linear infinite",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ef45748..316f3fb 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -281,71 +281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@isaacs/cliui@npm:^8.0.2":
-  version: 8.0.2
-  resolution: "@isaacs/cliui@npm:8.0.2"
-  dependencies:
-    string-width: "npm:^5.1.2"
-    string-width-cjs: "npm:string-width@^4.2.0"
-    strip-ansi: "npm:^7.0.1"
-    strip-ansi-cjs: "npm:strip-ansi@^6.0.1"
-    wrap-ansi: "npm:^8.1.0"
-    wrap-ansi-cjs: "npm:wrap-ansi@^7.0.0"
-  checksum: 10/e9ed5fd27c3aec1095e3a16e0c0cf148d1fee55a38665c35f7b3f86a9b5d00d042ddaabc98e8a1cb7463b9378c15f22a94eb35e99469c201453eb8375191f243
-  languageName: node
-  linkType: hard
-
-"@isaacs/fs-minipass@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "@isaacs/fs-minipass@npm:4.0.1"
-  dependencies:
-    minipass: "npm:^7.0.4"
-  checksum: 10/4412e9e6713c89c1e66d80bb0bb5a2a93192f10477623a27d08f228ba0316bb880affabc5bfe7f838f58a34d26c2c190da726e576cdfc18c49a72e89adabdcf5
-  languageName: node
-  linkType: hard
-
-"@jridgewell/gen-mapping@npm:^0.3.2":
-  version: 0.3.8
-  resolution: "@jridgewell/gen-mapping@npm:0.3.8"
-  dependencies:
-    "@jridgewell/set-array": "npm:^1.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
-    "@jridgewell/trace-mapping": "npm:^0.3.24"
-  checksum: 10/9d3a56ab3612ab9b85d38b2a93b87f3324f11c5130859957f6500e4ac8ce35f299d5ccc3ecd1ae87597601ecf83cee29e9afd04c18777c24011073992ff946df
-  languageName: node
-  linkType: hard
-
-"@jridgewell/resolve-uri@npm:^3.1.0":
-  version: 3.1.2
-  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
-  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
-  languageName: node
-  linkType: hard
-
-"@jridgewell/set-array@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "@jridgewell/set-array@npm:1.2.1"
-  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
-  languageName: node
-  linkType: hard
-
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
+"@jridgewell/sourcemap-codec@npm:^1.4.15":
   version: 1.5.0
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
   checksum: 10/4ed6123217569a1484419ac53f6ea0d9f3b57e5b57ab30d7c267bdb27792a27eb0e4b08e84a2680aa55cc2f2b411ffd6ec3db01c44fdc6dc43aca4b55f8374fd
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.24":
-  version: 0.3.25
-  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
-  dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
-  languageName: node
-  linkType: hard
-
 "@next/env@npm:15.1.4":
   version: 15.1.4
   resolution: "@next/env@npm:15.1.4"
@@ -452,35 +394,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@npmcli/agent@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "@npmcli/agent@npm:3.0.0"
-  dependencies:
-    agent-base: "npm:^7.1.0"
-    http-proxy-agent: "npm:^7.0.0"
-    https-proxy-agent: "npm:^7.0.1"
-    lru-cache: "npm:^10.0.1"
-    socks-proxy-agent: "npm:^8.0.3"
-  checksum: 10/775c9a7eb1f88c195dfb3bce70c31d0fe2a12b28b754e25c08a3edb4bc4816bfedb7ac64ef1e730579d078ca19dacf11630e99f8f3c3e0fd7b23caa5fd6d30a6
-  languageName: node
-  linkType: hard
-
-"@npmcli/fs@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@npmcli/fs@npm:4.0.0"
-  dependencies:
-    semver: "npm:^7.3.5"
-  checksum: 10/405c4490e1ff11cf299775449a3c254a366a4b1ffc79d87159b0ee7d5558ac9f6a2f8c0735fd6ff3873cef014cb1a44a5f9127cb6a1b2dbc408718cca9365b5a
-  languageName: node
-  linkType: hard
-
-"@pkgjs/parseargs@npm:^0.11.0":
-  version: 0.11.0
-  resolution: "@pkgjs/parseargs@npm:0.11.0"
-  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
-  languageName: node
-  linkType: hard
-
 "@pkgr/core@npm:^0.1.0":
   version: 0.1.1
   resolution: "@pkgr/core@npm:0.1.1"
@@ -518,6 +431,150 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/node@npm:^4.0.0":
+  version: 4.0.5
+  resolution: "@tailwindcss/node@npm:4.0.5"
+  dependencies:
+    enhanced-resolve: "npm:^5.18.0"
+    jiti: "npm:^2.4.2"
+    tailwindcss: "npm:4.0.5"
+  checksum: 10/2df6fbeb86f75aa050d1b7a69caf990e8e446dc94d7c06790351d67a926fb5b9a2c2472ed8a4d8f5ca41eceae506496d7bef264aebc1caf8fe14150462f5fea2
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.0.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.0.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.0.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.0.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.0.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.0.5"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.0.5"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.0.5"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.0.5"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.0.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.0.5":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.0.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:^4.0.0":
+  version: 4.0.5
+  resolution: "@tailwindcss/oxide@npm:4.0.5"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": "npm:4.0.5"
+    "@tailwindcss/oxide-darwin-arm64": "npm:4.0.5"
+    "@tailwindcss/oxide-darwin-x64": "npm:4.0.5"
+    "@tailwindcss/oxide-freebsd-x64": "npm:4.0.5"
+    "@tailwindcss/oxide-linux-arm-gnueabihf": "npm:4.0.5"
+    "@tailwindcss/oxide-linux-arm64-gnu": "npm:4.0.5"
+    "@tailwindcss/oxide-linux-arm64-musl": "npm:4.0.5"
+    "@tailwindcss/oxide-linux-x64-gnu": "npm:4.0.5"
+    "@tailwindcss/oxide-linux-x64-musl": "npm:4.0.5"
+    "@tailwindcss/oxide-win32-arm64-msvc": "npm:4.0.5"
+    "@tailwindcss/oxide-win32-x64-msvc": "npm:4.0.5"
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 10/14839344411bd54f93720ed78e1534dd104092b8c03158b47260d141a8b725390062beb64d0feef522adc75605264f74eab2f6a5aee4fbb5e592e267b7a4d0a7
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/postcss@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@tailwindcss/postcss@npm:4.0.0"
+  dependencies:
+    "@alloc/quick-lru": "npm:^5.2.0"
+    "@tailwindcss/node": "npm:^4.0.0"
+    "@tailwindcss/oxide": "npm:^4.0.0"
+    lightningcss: "npm:^1.29.1"
+    postcss: "npm:^8.4.41"
+    tailwindcss: "npm:4.0.0"
+  checksum: 10/76a232425ae75053ab501b404d3689e14f8d3ca15168fb3d0f88b3709b3b59e8c2d5a6ad5eeb88cc5f239376ba904b9fcf6424735807766f9c0e9c3a6ddeb67e
+  languageName: node
+  linkType: hard
+
 "@types/js-cookie@npm:^2.2.6":
   version: 2.2.7
   resolution: "@types/js-cookie@npm:2.2.7"
@@ -695,13 +752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "abbrev@npm:2.0.0"
-  checksum: 10/ca0a54e35bea4ece0ecb68a47b312e1a9a6f772408d5bcb9051230aaa94b0460671c5b5c9cb3240eb5b7bc94c52476550eb221f65a0bbd0145bdc9f3113a6707
-  languageName: node
-  linkType: hard
-
 "acorn-jsx@npm:^5.3.2":
   version: 5.3.2
   resolution: "acorn-jsx@npm:5.3.2"
@@ -720,13 +770,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agent-base@npm:^7.1.0, agent-base@npm:^7.1.2":
-  version: 7.1.3
-  resolution: "agent-base@npm:7.1.3"
-  checksum: 10/3db6d8d4651f2aa1a9e4af35b96ab11a7607af57a24f3bc721a387eaa3b5f674e901f0a648b0caefd48f3fd117c7761b79a3b55854e2aebaa96c3f32cf76af84
-  languageName: node
-  linkType: hard
-
 "ajv@npm:^6.12.4":
   version: 6.12.6
   resolution: "ajv@npm:6.12.6"
@@ -762,7 +805,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
+"ansi-styles@npm:^4.1.0":
   version: 4.3.0
   resolution: "ansi-styles@npm:4.3.0"
   dependencies:
@@ -771,37 +814,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^6.0.0, ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
+"ansi-styles@npm:^6.0.0, ansi-styles@npm:^6.2.1":
   version: 6.2.1
   resolution: "ansi-styles@npm:6.2.1"
   checksum: 10/70fdf883b704d17a5dfc9cde206e698c16bcd74e7f196ab821511651aee4f9f76c9514bdfa6ca3a27b5e49138b89cb222a28caf3afe4567570139577f991df32
   languageName: node
   linkType: hard
 
-"any-promise@npm:^1.0.0":
-  version: 1.3.0
-  resolution: "any-promise@npm:1.3.0"
-  checksum: 10/6737469ba353b5becf29e4dc3680736b9caa06d300bda6548812a8fee63ae7d336d756f88572fa6b5219aed36698d808fa55f62af3e7e6845c7a1dc77d240edb
-  languageName: node
-  linkType: hard
-
-"anymatch@npm:~3.1.2":
-  version: 3.1.3
-  resolution: "anymatch@npm:3.1.3"
-  dependencies:
-    normalize-path: "npm:^3.0.0"
-    picomatch: "npm:^2.0.4"
-  checksum: 10/3e044fd6d1d26545f235a9fe4d7a534e2029d8e59fa7fd9f2a6eb21230f6b5380ea1eaf55136e60cbf8e613544b3b766e7a6fa2102e2a3a117505466e3025dc2
-  languageName: node
-  linkType: hard
-
-"arg@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "arg@npm:5.0.2"
-  checksum: 10/92fe7de222054a060fd2329e92e867410b3ea260328147ee3fb7855f78efae005f4087e698d4e688a856893c56bb09951588c40f2c901cf6996cd8cd7bcfef2c
-  languageName: node
-  linkType: hard
-
 "argparse@npm:^2.0.1":
   version: 2.0.1
   resolution: "argparse@npm:2.0.1"
@@ -957,13 +976,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"binary-extensions@npm:^2.0.0":
-  version: 2.3.0
-  resolution: "binary-extensions@npm:2.3.0"
-  checksum: 10/bcad01494e8a9283abf18c1b967af65ee79b0c6a9e6fcfafebfe91dbe6e0fc7272bafb73389e198b310516ae04f7ad17d79aacf6cb4c0d5d5202a7e2e52c7d98
-  languageName: node
-  linkType: hard
-
 "brace-expansion@npm:^1.1.7":
   version: 1.1.11
   resolution: "brace-expansion@npm:1.1.11"
@@ -983,7 +995,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"braces@npm:^3.0.3, braces@npm:~3.0.2":
+"braces@npm:^3.0.3":
   version: 3.0.3
   resolution: "braces@npm:3.0.3"
   dependencies:
@@ -1001,26 +1013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^19.0.1":
-  version: 19.0.1
-  resolution: "cacache@npm:19.0.1"
-  dependencies:
-    "@npmcli/fs": "npm:^4.0.0"
-    fs-minipass: "npm:^3.0.0"
-    glob: "npm:^10.2.2"
-    lru-cache: "npm:^10.0.1"
-    minipass: "npm:^7.0.3"
-    minipass-collect: "npm:^2.0.1"
-    minipass-flush: "npm:^1.0.5"
-    minipass-pipeline: "npm:^1.2.4"
-    p-map: "npm:^7.0.2"
-    ssri: "npm:^12.0.0"
-    tar: "npm:^7.4.3"
-    unique-filename: "npm:^4.0.0"
-  checksum: 10/ea026b27b13656330c2bbaa462a88181dcaa0435c1c2e705db89b31d9bdf7126049d6d0445ba746dca21454a0cfdf1d6f47fd39d34c8c8435296b30bc5738a13
-  languageName: node
-  linkType: hard
-
 "call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
   version: 1.0.1
   resolution: "call-bind-apply-helpers@npm:1.0.1"
@@ -1060,13 +1052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase-css@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "camelcase-css@npm:2.0.1"
-  checksum: 10/1cec2b3b3dcb5026688a470b00299a8db7d904c4802845c353dbd12d9d248d3346949a814d83bfd988d4d2e5b9904c07efe76fecd195a1d4f05b543e7c0b56b1
-  languageName: node
-  linkType: hard
-
 "caniuse-lite@npm:^1.0.30001579":
   version: 1.0.30001692
   resolution: "caniuse-lite@npm:1.0.30001692"
@@ -1091,32 +1076,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:^3.6.0":
-  version: 3.6.0
-  resolution: "chokidar@npm:3.6.0"
-  dependencies:
-    anymatch: "npm:~3.1.2"
-    braces: "npm:~3.0.2"
-    fsevents: "npm:~2.3.2"
-    glob-parent: "npm:~5.1.2"
-    is-binary-path: "npm:~2.1.0"
-    is-glob: "npm:~4.0.1"
-    normalize-path: "npm:~3.0.0"
-    readdirp: "npm:~3.6.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
-  checksum: 10/c327fb07704443f8d15f7b4a7ce93b2f0bc0e6cea07ec28a7570aa22cd51fcf0379df589403976ea956c369f25aa82d84561947e227cd925902e1751371658df
-  languageName: node
-  linkType: hard
-
-"chownr@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "chownr@npm:3.0.0"
-  checksum: 10/b63cb1f73d171d140a2ed8154ee6566c8ab775d3196b0e03a2a94b5f6a0ce7777ee5685ca56849403c8d17bd457a6540672f9a60696a6137c7a409097495b82c
-  languageName: node
-  linkType: hard
-
 "cli-cursor@npm:^5.0.0":
   version: 5.0.0
   resolution: "cli-cursor@npm:5.0.0"
@@ -1193,13 +1152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.0":
-  version: 4.1.1
-  resolution: "commander@npm:4.1.1"
-  checksum: 10/3b2dc4125f387dab73b3294dbcb0ab2a862f9c0ad748ee2b27e3544d25325b7a8cdfbcc228d103a98a716960b14478114a5206b5415bd48cdafa38797891562c
-  languageName: node
-  linkType: hard
-
 "commander@npm:~12.1.0":
   version: 12.1.0
   resolution: "commander@npm:12.1.0"
@@ -1223,7 +1175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
+"cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
   version: 7.0.6
   resolution: "cross-spawn@npm:7.0.6"
   dependencies:
@@ -1253,15 +1205,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssesc@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "cssesc@npm:3.0.0"
-  bin:
-    cssesc: bin/cssesc
-  checksum: 10/0e161912c1306861d8f46e1883be1cbc8b1b2879f0f509287c0db71796e4ddfb97ac96bdfca38f77f452e2c10554e1bb5678c99b07a5cf947a12778f73e47e12
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.0.2, csstype@npm:^3.1.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -1309,7 +1252,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.7, debug@npm:~4.4.0":
+"debug@npm:^3.2.7":
+  version: 3.2.7
+  resolution: "debug@npm:3.2.7"
+  dependencies:
+    ms: "npm:^2.1.1"
+  checksum: 10/d86fd7be2b85462297ea16f1934dc219335e802f629ca9a69b63ed8ed041dda492389bb2ee039217c02e5b54792b1c51aa96ae954cf28634d363a2360c7a1639
+  languageName: node
+  linkType: hard
+
+"debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.7, debug@npm:~4.4.0":
   version: 4.4.0
   resolution: "debug@npm:4.4.0"
   dependencies:
@@ -1321,15 +1273,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:^3.2.7":
-  version: 3.2.7
-  resolution: "debug@npm:3.2.7"
-  dependencies:
-    ms: "npm:^2.1.1"
-  checksum: 10/d86fd7be2b85462297ea16f1934dc219335e802f629ca9a69b63ed8ed041dda492389bb2ee039217c02e5b54792b1c51aa96ae954cf28634d363a2360c7a1639
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -1359,6 +1302,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^2.0.3":
   version: 2.0.3
   resolution: "detect-libc@npm:2.0.3"
@@ -1366,20 +1318,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"didyoumean@npm:^1.2.2":
-  version: 1.2.2
-  resolution: "didyoumean@npm:1.2.2"
-  checksum: 10/de7f11b6a0c8c61018629b7f405bb9746d6e994ce87c1a4b7655c3c718442dc69037a3d46d804950604fd9cbe85c074f7b224a119fc1bda851690a74540c6cf8
-  languageName: node
-  linkType: hard
-
-"dlv@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "dlv@npm:1.1.3"
-  checksum: 10/836459ec6b50e43e9ed388a5fc28954be99e3481af3fa4b5d82a600762eb65ef8faacd454097ed7fc2f8a60aea2800d65a4cece5cd0d81ab82b2031f3f759e6e
-  languageName: node
-  linkType: hard
-
 "doctrine@npm:^2.1.0":
   version: 2.1.0
   resolution: "doctrine@npm:2.1.0"
@@ -1409,13 +1347,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eastasianwidth@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "eastasianwidth@npm:0.2.0"
-  checksum: 10/9b1d3e1baefeaf7d70799db8774149cef33b97183a6addceeba0cf6b85ba23ee2686f302f14482006df32df75d32b17c509c143a3689627929e4a8efaf483952
-  languageName: node
-  linkType: hard
-
 "emoji-regex@npm:^10.3.0":
   version: 10.4.0
   resolution: "emoji-regex@npm:10.4.0"
@@ -1423,13 +1354,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "emoji-regex@npm:8.0.0"
-  checksum: 10/c72d67a6821be15ec11997877c437491c313d924306b8da5d87d2a2bcc2cec9903cb5b04ee1a088460501d8e5b44f10df82fdc93c444101a7610b80c8b6938e1
-  languageName: node
-  linkType: hard
-
 "emoji-regex@npm:^9.2.2":
   version: 9.2.2
   resolution: "emoji-regex@npm:9.2.2"
@@ -1437,15 +1361,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding@npm:^0.1.13":
-  version: 0.1.13
-  resolution: "encoding@npm:0.1.13"
-  dependencies:
-    iconv-lite: "npm:^0.6.2"
-  checksum: 10/bb98632f8ffa823996e508ce6a58ffcf5856330fde839ae42c9e1f436cc3b5cc651d4aeae72222916545428e54fd0f6aa8862fd8d25bdbcc4589f1e3f3715e7f
-  languageName: node
-  linkType: hard
-
 "enhanced-resolve@npm:^5.15.0":
   version: 5.18.0
   resolution: "enhanced-resolve@npm:5.18.0"
@@ -1456,10 +1371,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-paths@npm:^2.2.0":
-  version: 2.2.1
-  resolution: "env-paths@npm:2.2.1"
-  checksum: 10/65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
+"enhanced-resolve@npm:^5.18.0":
+  version: 5.18.1
+  resolution: "enhanced-resolve@npm:5.18.1"
+  dependencies:
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: 10/50e81c7fe2239fba5670ebce78a34709906ed3a79274aa416434f7307b252e0b7824d76a7dd403eca795571dc6afd9a44183fc45a68475e8f2fdfbae6e92fcc3
   languageName: node
   linkType: hard
 
@@ -1470,13 +1388,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"err-code@npm:^2.0.2":
-  version: 2.0.3
-  resolution: "err-code@npm:2.0.3"
-  checksum: 10/1d20d825cdcce8d811bfbe86340f4755c02655a7feb2f13f8c880566d9d72a3f6c92c192a6867632e490d6da67b678271f46e01044996a6443e870331100dfdd
-  languageName: node
-  linkType: hard
-
 "error-stack-parser@npm:^2.0.6":
   version: 2.1.4
   resolution: "error-stack-parser@npm:2.1.4"
@@ -1964,13 +1875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"exponential-backoff@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "exponential-backoff@npm:3.1.1"
-  checksum: 10/2d9bbb6473de7051f96790d5f9a678f32e60ed0aa70741dc7fdc96fec8d631124ec3374ac144387604f05afff9500f31a1d45bd9eee4cdc2e4f9ad2d9b9d5dbd
-  languageName: node
-  linkType: hard
-
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -2103,16 +2007,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"foreground-child@npm:^3.1.0":
-  version: 3.3.0
-  resolution: "foreground-child@npm:3.3.0"
-  dependencies:
-    cross-spawn: "npm:^7.0.0"
-    signal-exit: "npm:^4.0.1"
-  checksum: 10/e3a60480f3a09b12273ce2c5fcb9514d98dd0e528f58656a1b04680225f918d60a2f81f6a368f2f3b937fcee9cfc0cbf16f1ad9a0bc6a3a6e103a84c9a90087e
-  languageName: node
-  linkType: hard
-
 "framer-motion@npm:^12.0.11":
   version: 12.0.11
   resolution: "framer-motion@npm:12.0.11"
@@ -2139,6 +2033,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "frontend@workspace:."
   dependencies:
+    "@tailwindcss/postcss": "npm:4.0.0"
     "@types/node": "npm:^22.10.5"
     "@types/react": "npm:^19.0.4"
     "@types/react-dom": "npm:^19.0.2"
@@ -2156,24 +2051,15 @@ __metadata:
     next: "npm:^15.1.4"
     postcss: "npm:^8"
     prettier: "npm:^3.4.2"
-    prettier-plugin-tailwindcss: "npm:^0.6.9"
+    prettier-plugin-tailwindcss: "npm:^0.6.11"
     react: "npm:^19.0.0"
     react-dom: "npm:^19.0.0"
     react-use: "npm:^17.6.0"
-    tailwindcss: "npm:^3.4.1"
+    tailwindcss: "npm:4.0.0"
     typescript: "npm:^5"
   languageName: unknown
   linkType: soft
 
-"fs-minipass@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "fs-minipass@npm:3.0.3"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10/af143246cf6884fe26fa281621d45cfe111d34b30535a475bfa38dafe343dadb466c047a924ffc7d6b7b18265df4110224ce3803806dbb07173bf2087b648d7f
-  languageName: node
-  linkType: hard
-
 "fs.realpath@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs.realpath@npm:1.0.0"
@@ -2181,25 +2067,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:~2.3.2":
-  version: 2.3.3
-  resolution: "fsevents@npm:2.3.3"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 10/4c1ade961ded57cdbfbb5cac5106ec17bc8bccd62e16343c569a0ceeca83b9dfef87550b4dc5cbb89642da412b20c5071f304c8c464b80415446e8e155a038c0
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
-  version: 2.3.3
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
-  dependencies:
-    node-gyp: "npm:latest"
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "function-bind@npm:^1.1.2":
   version: 1.1.2
   resolution: "function-bind@npm:1.1.2"
@@ -2290,7 +2157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.2":
   version: 5.1.2
   resolution: "glob-parent@npm:5.1.2"
   dependencies:
@@ -2308,22 +2175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7":
-  version: 10.4.5
-  resolution: "glob@npm:10.4.5"
-  dependencies:
-    foreground-child: "npm:^3.1.0"
-    jackspeak: "npm:^3.1.2"
-    minimatch: "npm:^9.0.4"
-    minipass: "npm:^7.1.2"
-    package-json-from-dist: "npm:^1.0.0"
-    path-scurry: "npm:^1.11.1"
-  bin:
-    glob: dist/esm/bin.mjs
-  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
-  languageName: node
-  linkType: hard
-
 "glob@npm:^7.1.3":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
@@ -2364,7 +2215,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.2.4":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
@@ -2453,33 +2304,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-cache-semantics@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "http-cache-semantics@npm:4.1.1"
-  checksum: 10/362d5ed66b12ceb9c0a328fb31200b590ab1b02f4a254a697dc796850cc4385603e75f53ec59f768b2dad3bfa1464bd229f7de278d2899a0e3beffc634b6683f
-  languageName: node
-  linkType: hard
-
-"http-proxy-agent@npm:^7.0.0":
-  version: 7.0.2
-  resolution: "http-proxy-agent@npm:7.0.2"
-  dependencies:
-    agent-base: "npm:^7.1.0"
-    debug: "npm:^4.3.4"
-  checksum: 10/d062acfa0cb82beeb558f1043c6ba770ea892b5fb7b28654dbc70ea2aeea55226dd34c02a294f6c1ca179a5aa483c4ea641846821b182edbd9cc5d89b54c6848
-  languageName: node
-  linkType: hard
-
-"https-proxy-agent@npm:^7.0.1":
-  version: 7.0.6
-  resolution: "https-proxy-agent@npm:7.0.6"
-  dependencies:
-    agent-base: "npm:^7.1.2"
-    debug: "npm:4"
-  checksum: 10/784b628cbd55b25542a9d85033bdfd03d4eda630fb8b3c9477959367f3be95dc476ed2ecbb9836c359c7c698027fc7b45723a302324433590f45d6c1706e8c13
-  languageName: node
-  linkType: hard
-
 "human-signals@npm:^5.0.0":
   version: 5.0.0
   resolution: "human-signals@npm:5.0.0"
@@ -2503,15 +2327,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:^0.6.2":
-  version: 0.6.3
-  resolution: "iconv-lite@npm:0.6.3"
-  dependencies:
-    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
-  checksum: 10/24e3292dd3dadaa81d065c6f8c41b274a47098150d444b96e5f53b4638a9a71482921ea6a91a1f59bb71d9796de25e04afd05919fa64c360347ba65d3766f10f
-  languageName: node
-  linkType: hard
-
 "ignore@npm:^5.2.0, ignore@npm:^5.3.1":
   version: 5.3.2
   resolution: "ignore@npm:5.3.2"
@@ -2573,16 +2388,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ip-address@npm:^9.0.5":
-  version: 9.0.5
-  resolution: "ip-address@npm:9.0.5"
-  dependencies:
-    jsbn: "npm:1.1.0"
-    sprintf-js: "npm:^1.1.3"
-  checksum: 10/1ed81e06721af012306329b31f532b5e24e00cb537be18ddc905a84f19fe8f83a09a1699862bf3a1ec4b9dea93c55a3fa5faf8b5ea380431469df540f38b092c
-  languageName: node
-  linkType: hard
-
 "is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5":
   version: 3.0.5
   resolution: "is-array-buffer@npm:3.0.5"
@@ -2622,15 +2427,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-binary-path@npm:~2.1.0":
-  version: 2.1.0
-  resolution: "is-binary-path@npm:2.1.0"
-  dependencies:
-    binary-extensions: "npm:^2.0.0"
-  checksum: 10/078e51b4f956c2c5fd2b26bb2672c3ccf7e1faff38e0ebdba45612265f4e3d9fc3127a1fa8370bbf09eab61339203c3d3b7af5662cbf8be4030f8fac37745b0e
-  languageName: node
-  linkType: hard
-
 "is-boolean-object@npm:^1.2.1":
   version: 1.2.1
   resolution: "is-boolean-object@npm:1.2.1"
@@ -2703,13 +2499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-fullwidth-code-point@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "is-fullwidth-code-point@npm:3.0.0"
-  checksum: 10/44a30c29457c7fb8f00297bce733f0a64cd22eca270f83e58c105e0d015e45c019491a4ab2faef91ab51d4738c670daff901c799f6a700e27f7314029e99e348
-  languageName: node
-  linkType: hard
-
 "is-fullwidth-code-point@npm:^4.0.0":
   version: 4.0.0
   resolution: "is-fullwidth-code-point@npm:4.0.0"
@@ -2738,7 +2527,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -2883,13 +2672,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"isexe@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "isexe@npm:3.1.1"
-  checksum: 10/7fe1931ee4e88eb5aa524cd3ceb8c882537bc3a81b02e438b240e47012eef49c86904d0f0e593ea7c3a9996d18d0f1f3be8d3eaa92333977b0c3a9d353d5563e
-  languageName: node
-  linkType: hard
-
 "iterator.prototype@npm:^1.1.4":
   version: 1.1.5
   resolution: "iterator.prototype@npm:1.1.5"
@@ -2904,25 +2686,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jackspeak@npm:^3.1.2":
-  version: 3.4.3
-  resolution: "jackspeak@npm:3.4.3"
-  dependencies:
-    "@isaacs/cliui": "npm:^8.0.2"
-    "@pkgjs/parseargs": "npm:^0.11.0"
-  dependenciesMeta:
-    "@pkgjs/parseargs":
-      optional: true
-  checksum: 10/96f8786eaab98e4bf5b2a5d6d9588ea46c4d06bbc4f2eb861fdd7b6b182b16f71d8a70e79820f335d52653b16d4843b29dd9cdcf38ae80406756db9199497cf3
-  languageName: node
-  linkType: hard
-
-"jiti@npm:^1.21.6":
-  version: 1.21.7
-  resolution: "jiti@npm:1.21.7"
+"jiti@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "jiti@npm:2.4.2"
   bin:
-    jiti: bin/jiti.js
-  checksum: 10/6a182521532126e4b7b5ad64b64fb2e162718fc03bc6019c21aa2222aacde6c6dfce4fc3bce9f69561a73b24ab5f79750ad353c37c3487a220d5869a39eae3a2
+    jiti: lib/jiti-cli.mjs
+  checksum: 10/e2b07eb2e3fbb245e29ad288dddecab31804967fc84d5e01d39858997d2743b5e248946defcecf99272275a00284ecaf7ec88b8c841331324f0c946d8274414b
   languageName: node
   linkType: hard
 
@@ -2951,13 +2720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsbn@npm:1.1.0":
-  version: 1.1.0
-  resolution: "jsbn@npm:1.1.0"
-  checksum: 10/bebe7ae829bbd586ce8cbe83501dd8cb8c282c8902a8aeeed0a073a89dc37e8103b1244f3c6acd60278bcbfe12d93a3f83c9ac396868a3b3bbc3c5e5e3b648ef
-  languageName: node
-  linkType: hard
-
 "json-buffer@npm:3.0.1":
   version: 3.0.1
   resolution: "json-buffer@npm:3.0.1"
@@ -3037,17 +2799,120 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lilconfig@npm:^3.0.0, lilconfig@npm:^3.1.3, lilconfig@npm:~3.1.3":
-  version: 3.1.3
-  resolution: "lilconfig@npm:3.1.3"
-  checksum: 10/b932ce1af94985f0efbe8896e57b1f814a48c8dbd7fc0ef8469785c6303ed29d0090af3ccad7e36b626bfca3a4dc56cc262697e9a8dd867623cf09a39d54e4c3
+"lightningcss-darwin-arm64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-arm64@npm:1.29.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-darwin-x64@npm:1.29.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-freebsd-x64@npm:1.29.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.29.1"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-arm64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-gnu@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-linux-x64-musl@npm:1.29.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"lines-and-columns@npm:^1.1.6":
-  version: 1.2.4
-  resolution: "lines-and-columns@npm:1.2.4"
-  checksum: 10/0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
+"lightningcss-win32-x64-msvc@npm:1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss-win32-x64-msvc@npm:1.29.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:^1.29.1":
+  version: 1.29.1
+  resolution: "lightningcss@npm:1.29.1"
+  dependencies:
+    detect-libc: "npm:^1.0.3"
+    lightningcss-darwin-arm64: "npm:1.29.1"
+    lightningcss-darwin-x64: "npm:1.29.1"
+    lightningcss-freebsd-x64: "npm:1.29.1"
+    lightningcss-linux-arm-gnueabihf: "npm:1.29.1"
+    lightningcss-linux-arm64-gnu: "npm:1.29.1"
+    lightningcss-linux-arm64-musl: "npm:1.29.1"
+    lightningcss-linux-x64-gnu: "npm:1.29.1"
+    lightningcss-linux-x64-musl: "npm:1.29.1"
+    lightningcss-win32-arm64-msvc: "npm:1.29.1"
+    lightningcss-win32-x64-msvc: "npm:1.29.1"
+  dependenciesMeta:
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 10/c6428a695ca985fa28ea899eb72471e0c6a71715291cb62f938b038596a971b6b22d83415d882dec27841169b1b773989b16df173f5ce9075c3fdc22ff764cff
+  languageName: node
+  linkType: hard
+
+"lilconfig@npm:~3.1.3":
+  version: 3.1.3
+  resolution: "lilconfig@npm:3.1.3"
+  checksum: 10/b932ce1af94985f0efbe8896e57b1f814a48c8dbd7fc0ef8469785c6303ed29d0090af3ccad7e36b626bfca3a4dc56cc262697e9a8dd867623cf09a39d54e4c3
   languageName: node
   linkType: hard
 
@@ -3125,32 +2990,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
-  version: 10.4.3
-  resolution: "lru-cache@npm:10.4.3"
-  checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a
-  languageName: node
-  linkType: hard
-
-"make-fetch-happen@npm:^14.0.3":
-  version: 14.0.3
-  resolution: "make-fetch-happen@npm:14.0.3"
-  dependencies:
-    "@npmcli/agent": "npm:^3.0.0"
-    cacache: "npm:^19.0.1"
-    http-cache-semantics: "npm:^4.1.1"
-    minipass: "npm:^7.0.2"
-    minipass-fetch: "npm:^4.0.0"
-    minipass-flush: "npm:^1.0.5"
-    minipass-pipeline: "npm:^1.2.4"
-    negotiator: "npm:^1.0.0"
-    proc-log: "npm:^5.0.0"
-    promise-retry: "npm:^2.0.1"
-    ssri: "npm:^12.0.0"
-  checksum: 10/fce0385840b6d86b735053dfe941edc2dd6468fda80fe74da1eeff10cbd82a75760f406194f2bc2fa85b99545b2bc1f84c08ddf994b21830775ba2d1a87e8bdf
-  languageName: node
-  linkType: hard
-
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -3228,92 +3067,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-collect@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "minipass-collect@npm:2.0.1"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10/b251bceea62090f67a6cced7a446a36f4cd61ee2d5cea9aee7fff79ba8030e416327a1c5aa2908dc22629d06214b46d88fdab8c51ac76bacbf5703851b5ad342
-  languageName: node
-  linkType: hard
-
-"minipass-fetch@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "minipass-fetch@npm:4.0.0"
-  dependencies:
-    encoding: "npm:^0.1.13"
-    minipass: "npm:^7.0.3"
-    minipass-sized: "npm:^1.0.3"
-    minizlib: "npm:^3.0.1"
-  dependenciesMeta:
-    encoding:
-      optional: true
-  checksum: 10/4b0772dbee77727b469dc5bfc371541d9aba1e243fbb46ddc1b9ff7efa4de4a4cf5ff3a359d6a3b3a460ca26df9ae67a9c93be26ab6417c225e49d63b52b2801
-  languageName: node
-  linkType: hard
-
-"minipass-flush@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "minipass-flush@npm:1.0.5"
-  dependencies:
-    minipass: "npm:^3.0.0"
-  checksum: 10/56269a0b22bad756a08a94b1ffc36b7c9c5de0735a4dd1ab2b06c066d795cfd1f0ac44a0fcae13eece5589b908ecddc867f04c745c7009be0b566421ea0944cf
-  languageName: node
-  linkType: hard
-
-"minipass-pipeline@npm:^1.2.4":
-  version: 1.2.4
-  resolution: "minipass-pipeline@npm:1.2.4"
-  dependencies:
-    minipass: "npm:^3.0.0"
-  checksum: 10/b14240dac0d29823c3d5911c286069e36d0b81173d7bdf07a7e4a91ecdef92cdff4baaf31ea3746f1c61e0957f652e641223970870e2353593f382112257971b
-  languageName: node
-  linkType: hard
-
-"minipass-sized@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "minipass-sized@npm:1.0.3"
-  dependencies:
-    minipass: "npm:^3.0.0"
-  checksum: 10/40982d8d836a52b0f37049a0a7e5d0f089637298e6d9b45df9c115d4f0520682a78258905e5c8b180fb41b593b0a82cc1361d2c74b45f7ada66334f84d1ecfdd
-  languageName: node
-  linkType: hard
-
-"minipass@npm:^3.0.0":
-  version: 3.3.6
-  resolution: "minipass@npm:3.3.6"
-  dependencies:
-    yallist: "npm:^4.0.0"
-  checksum: 10/a5c6ef069f70d9a524d3428af39f2b117ff8cd84172e19b754e7264a33df460873e6eb3d6e55758531580970de50ae950c496256bb4ad3691a2974cddff189f0
-  languageName: node
-  linkType: hard
-
-"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4, minipass@npm:^7.1.2":
-  version: 7.1.2
-  resolution: "minipass@npm:7.1.2"
-  checksum: 10/c25f0ee8196d8e6036661104bacd743785b2599a21de5c516b32b3fa2b83113ac89a2358465bc04956baab37ffb956ae43be679b2262bf7be15fce467ccd7950
-  languageName: node
-  linkType: hard
-
-"minizlib@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "minizlib@npm:3.0.1"
-  dependencies:
-    minipass: "npm:^7.0.4"
-    rimraf: "npm:^5.0.5"
-  checksum: 10/622cb85f51e5c206a080a62d20db0d7b4066f308cb6ce82a9644da112367c3416ae7062017e631eb7ac8588191cfa4a9a279b8651c399265202b298e98c4acef
-  languageName: node
-  linkType: hard
-
-"mkdirp@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "mkdirp@npm:3.0.1"
-  bin:
-    mkdirp: dist/cjs/src/bin.js
-  checksum: 10/16fd79c28645759505914561e249b9a1f5fe3362279ad95487a4501e4467abeb714fd35b95307326b8fd03f3c7719065ef11a6f97b7285d7888306d1bd2232ba
-  languageName: node
-  linkType: hard
-
 "motion-dom@npm:^12.0.0":
   version: 12.0.0
   resolution: "motion-dom@npm:12.0.0"
@@ -3358,17 +3111,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mz@npm:^2.7.0":
-  version: 2.7.0
-  resolution: "mz@npm:2.7.0"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-    object-assign: "npm:^4.0.1"
-    thenify-all: "npm:^1.0.0"
-  checksum: 10/8427de0ece99a07e9faed3c0c6778820d7543e3776f9a84d22cf0ec0a8eb65f6e9aee9c9d353ff9a105ff62d33a9463c6ca638974cc652ee8140cd1e35951c87
-  languageName: node
-  linkType: hard
-
 "nano-css@npm:^5.6.2":
   version: 5.6.2
   resolution: "nano-css@npm:5.6.2"
@@ -3404,13 +3146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"negotiator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "negotiator@npm:1.0.0"
-  checksum: 10/b5734e87295324fabf868e36fb97c84b7d7f3156ec5f4ee5bf6e488079c11054f818290fc33804cef7b1ee21f55eeb14caea83e7dafae6492a409b3e573153e5
-  languageName: node
-  linkType: hard
-
 "next@npm:^15.1.4":
   version: 15.1.4
   resolution: "next@npm:15.1.4"
@@ -3472,44 +3207,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-gyp@npm:latest":
-  version: 11.0.0
-  resolution: "node-gyp@npm:11.0.0"
-  dependencies:
-    env-paths: "npm:^2.2.0"
-    exponential-backoff: "npm:^3.1.1"
-    glob: "npm:^10.3.10"
-    graceful-fs: "npm:^4.2.6"
-    make-fetch-happen: "npm:^14.0.3"
-    nopt: "npm:^8.0.0"
-    proc-log: "npm:^5.0.0"
-    semver: "npm:^7.3.5"
-    tar: "npm:^7.4.3"
-    which: "npm:^5.0.0"
-  bin:
-    node-gyp: bin/node-gyp.js
-  checksum: 10/5d07430e887a906f85c7c6ed87e8facb7ecd4ce42d948a2438c471df2e24ae6af70f4def114ec1a03127988d164648dda8d75fe666f3c4b431e53856379fdf13
-  languageName: node
-  linkType: hard
-
-"nopt@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "nopt@npm:8.0.0"
-  dependencies:
-    abbrev: "npm:^2.0.0"
-  bin:
-    nopt: bin/nopt.js
-  checksum: 10/2d137f64b6f9331ec97047dd1cbbe4dcd9a61ceef4fd0f2252c0bbac1d69ba15671e6fd83a441328824b3ca78afe6ebe1694f12ebcd162b73a221582a06179ff
-  languageName: node
-  linkType: hard
-
-"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
-  version: 3.0.0
-  resolution: "normalize-path@npm:3.0.0"
-  checksum: 10/88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
-  languageName: node
-  linkType: hard
-
 "npm-run-path@npm:^5.1.0":
   version: 5.3.0
   resolution: "npm-run-path@npm:5.3.0"
@@ -3519,20 +3216,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
+"object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
   checksum: 10/fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
   languageName: node
   linkType: hard
 
-"object-hash@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-hash@npm:3.0.0"
-  checksum: 10/f498d456a20512ba7be500cef4cf7b3c183cc72c65372a549c9a0e6dd78ce26f375e9b1315c07592d3fde8f10d5019986eba35970570d477ed9a2a702514432a
-  languageName: node
-  linkType: hard
-
 "object-inspect@npm:^1.13.3":
   version: 1.13.3
   resolution: "object-inspect@npm:1.13.3"
@@ -3677,20 +3367,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-map@npm:^7.0.2":
-  version: 7.0.3
-  resolution: "p-map@npm:7.0.3"
-  checksum: 10/2ef48ccfc6dd387253d71bf502604f7893ed62090b2c9d73387f10006c342606b05233da0e4f29388227b61eb5aeface6197e166520c465c234552eeab2fe633
-  languageName: node
-  linkType: hard
-
-"package-json-from-dist@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "package-json-from-dist@npm:1.0.1"
-  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
-  languageName: node
-  linkType: hard
-
 "parent-module@npm:^1.0.0":
   version: 1.0.1
   resolution: "parent-module@npm:1.0.1"
@@ -3735,16 +3411,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.11.1":
-  version: 1.11.1
-  resolution: "path-scurry@npm:1.11.1"
-  dependencies:
-    lru-cache: "npm:^10.2.0"
-    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-  checksum: 10/5e8845c159261adda6f09814d7725683257fcc85a18f329880ab4d7cc1d12830967eae5d5894e453f341710d5484b8fdbbd4d75181b4d6e1eb2f4dc7aeadc434
-  languageName: node
-  linkType: hard
-
 "picocolors@npm:^1.0.0, picocolors@npm:^1.1.1":
   version: 1.1.1
   resolution: "picocolors@npm:1.1.1"
@@ -3752,7 +3418,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.3.1":
   version: 2.3.1
   resolution: "picomatch@npm:2.3.1"
   checksum: 10/60c2595003b05e4535394d1da94850f5372c9427ca4413b71210f437f7b2ca091dbd611c45e8b37d10036fa8eade25c1b8951654f9d3973bfa66a2ff4d3b08bc
@@ -3768,20 +3434,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^2.3.0":
-  version: 2.3.0
-  resolution: "pify@npm:2.3.0"
-  checksum: 10/9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
-  languageName: node
-  linkType: hard
-
-"pirates@npm:^4.0.1":
-  version: 4.0.6
-  resolution: "pirates@npm:4.0.6"
-  checksum: 10/d02dda76f4fec1cbdf395c36c11cf26f76a644f9f9a1bfa84d3167d0d3154d5289aacc72677aa20d599bb4a6937a471de1b65c995e2aea2d8687cbcd7e43ea5f
-  languageName: node
-  linkType: hard
-
 "possible-typed-array-names@npm:^1.0.0":
   version: 1.0.0
   resolution: "possible-typed-array-names@npm:1.0.0"
@@ -3789,76 +3441,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-import@npm:^15.1.0":
-  version: 15.1.0
-  resolution: "postcss-import@npm:15.1.0"
-  dependencies:
-    postcss-value-parser: "npm:^4.0.0"
-    read-cache: "npm:^1.0.0"
-    resolve: "npm:^1.1.7"
-  peerDependencies:
-    postcss: ^8.0.0
-  checksum: 10/33c91b7e6b794b5c33d7d7d4730e5f0729c131d2de1ada7fcc116955625a78c3ce613983f019fa9447681795cf3f851e9c38dfbe3f48a2d08a8aef917c70a32a
-  languageName: node
-  linkType: hard
-
-"postcss-js@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-js@npm:4.0.1"
-  dependencies:
-    camelcase-css: "npm:^2.0.1"
-  peerDependencies:
-    postcss: ^8.4.21
-  checksum: 10/ef2cfe8554daab4166cfcb290f376e7387964c36503f5bd42008778dba735685af8d4f5e0aba67cae999f47c855df40a1cd31ae840e0df320ded36352581045e
-  languageName: node
-  linkType: hard
-
-"postcss-load-config@npm:^4.0.2":
-  version: 4.0.2
-  resolution: "postcss-load-config@npm:4.0.2"
-  dependencies:
-    lilconfig: "npm:^3.0.0"
-    yaml: "npm:^2.3.4"
-  peerDependencies:
-    postcss: ">=8.0.9"
-    ts-node: ">=9.0.0"
-  peerDependenciesMeta:
-    postcss:
-      optional: true
-    ts-node:
-      optional: true
-  checksum: 10/e2c2ed9b7998a5b123e1ce0c124daf6504b1454c67dcc1c8fdbcc5ffb2597b7de245e3ac34f63afc928d3fd3260b1e36492ebbdb01a9ff63f16b3c8b7b925d1b
-  languageName: node
-  linkType: hard
-
-"postcss-nested@npm:^6.2.0":
-  version: 6.2.0
-  resolution: "postcss-nested@npm:6.2.0"
-  dependencies:
-    postcss-selector-parser: "npm:^6.1.1"
-  peerDependencies:
-    postcss: ^8.2.14
-  checksum: 10/d7f6ba6bfd03d42f84689a0630d4e393c421bb53723f16fe179a840f03ed17763b0fe494458577d2a015e857e0ec27c7e194909ffe209ee5f0676aec39737317
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^6.1.1, postcss-selector-parser@npm:^6.1.2":
-  version: 6.1.2
-  resolution: "postcss-selector-parser@npm:6.1.2"
-  dependencies:
-    cssesc: "npm:^3.0.0"
-    util-deprecate: "npm:^1.0.2"
-  checksum: 10/190034c94d809c115cd2f32ee6aade84e933450a43ec3899c3e78e7d7b33efd3a2a975bb45d7700b6c5b196c06a7d9acf3f1ba6f1d87032d9675a29d8bca1dd3
-  languageName: node
-  linkType: hard
-
-"postcss-value-parser@npm:^4.0.0":
-  version: 4.2.0
-  resolution: "postcss-value-parser@npm:4.2.0"
-  checksum: 10/e4e4486f33b3163a606a6ed94f9c196ab49a37a7a7163abfcd469e5f113210120d70b8dd5e33d64636f41ad52316a3725655421eb9a1094f1bcab1db2f555c62
-  languageName: node
-  linkType: hard
-
 "postcss@npm:8.4.31":
   version: 8.4.31
   resolution: "postcss@npm:8.4.31"
@@ -3870,7 +3452,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8, postcss@npm:^8.4.47":
+"postcss@npm:^8, postcss@npm:^8.4.41":
   version: 8.5.1
   resolution: "postcss@npm:8.5.1"
   dependencies:
@@ -3897,15 +3479,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-plugin-tailwindcss@npm:^0.6.9":
-  version: 0.6.9
-  resolution: "prettier-plugin-tailwindcss@npm:0.6.9"
+"prettier-plugin-tailwindcss@npm:^0.6.11":
+  version: 0.6.11
+  resolution: "prettier-plugin-tailwindcss@npm:0.6.11"
   peerDependencies:
     "@ianvs/prettier-plugin-sort-imports": "*"
     "@prettier/plugin-pug": "*"
     "@shopify/prettier-plugin-liquid": "*"
     "@trivago/prettier-plugin-sort-imports": "*"
-    "@zackad/prettier-plugin-twig-melody": "*"
+    "@zackad/prettier-plugin-twig": "*"
     prettier: ^3.0
     prettier-plugin-astro: "*"
     prettier-plugin-css-order: "*"
@@ -3927,7 +3509,7 @@ __metadata:
       optional: true
     "@trivago/prettier-plugin-sort-imports":
       optional: true
-    "@zackad/prettier-plugin-twig-melody":
+    "@zackad/prettier-plugin-twig":
       optional: true
     prettier-plugin-astro:
       optional: true
@@ -3951,7 +3533,7 @@ __metadata:
       optional: true
     prettier-plugin-svelte:
       optional: true
-  checksum: 10/ac04a35ebf7e2b76528871bf192c6c97bd20b1587251ceaed273d571ae7afb2dc5923340595686fc5f707cee0e60e4d87abaf082effbbe1e83ea1a3a30360047
+  checksum: 10/7c87d8b9c7fc6e8bd3722da5c0bd115cfc249baba339b28b56ed270f0bcb99e0196836cd7270c8ab6bc499186f41e2bac4adff7795cd523d8f63f43424a0a36d
   languageName: node
   linkType: hard
 
@@ -3964,23 +3546,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proc-log@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "proc-log@npm:5.0.0"
-  checksum: 10/35610bdb0177d3ab5d35f8827a429fb1dc2518d9e639f2151ac9007f01a061c30e0c635a970c9b00c39102216160f6ec54b62377c92fac3b7bfc2ad4b98d195c
-  languageName: node
-  linkType: hard
-
-"promise-retry@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "promise-retry@npm:2.0.1"
-  dependencies:
-    err-code: "npm:^2.0.2"
-    retry: "npm:^0.12.0"
-  checksum: 10/96e1a82453c6c96eef53a37a1d6134c9f2482f94068f98a59145d0986ca4e497bf110a410adf73857e588165eab3899f0ebcf7b3890c1b3ce802abc0d65967d4
-  languageName: node
-  linkType: hard
-
 "prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
@@ -4066,24 +3631,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-cache@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "read-cache@npm:1.0.0"
-  dependencies:
-    pify: "npm:^2.3.0"
-  checksum: 10/83a39149d9dfa38f0c482ea0d77b34773c92fef07fe7599cdd914d255b14d0453e0229ef6379d8d27d6947f42d7581635296d0cfa7708f05a9bd8e789d398b31
-  languageName: node
-  linkType: hard
-
-"readdirp@npm:~3.6.0":
-  version: 3.6.0
-  resolution: "readdirp@npm:3.6.0"
-  dependencies:
-    picomatch: "npm:^2.2.1"
-  checksum: 10/196b30ef6ccf9b6e18c4e1724b7334f72a093d011a99f3b5920470f0b3406a51770867b3e1ae9711f227ef7a7065982f6ee2ce316746b2cb42c88efe44297fe7
-  languageName: node
-  linkType: hard
-
 "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
   version: 1.0.10
   resolution: "reflect.getprototypeof@npm:1.0.10"
@@ -4142,7 +3689,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^1.1.7, resolve@npm:^1.22.4, resolve@npm:^1.22.8":
+"resolve@npm:^1.22.4":
   version: 1.22.10
   resolution: "resolve@npm:1.22.10"
   dependencies:
@@ -4168,7 +3715,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^1.1.7#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+"resolve@patch:resolve@npm%3A^1.22.4#optional!builtin<compat/resolve>":
   version: 1.22.10
   resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin<compat/resolve>::version=1.22.10&hash=c3c19d"
   dependencies:
@@ -4204,13 +3751,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"retry@npm:^0.12.0":
-  version: 0.12.0
-  resolution: "retry@npm:0.12.0"
-  checksum: 10/1f914879f97e7ee931ad05fe3afa629bd55270fc6cf1c1e589b6a99fab96d15daad0fa1a52a00c729ec0078045fe3e399bd4fd0c93bcc906957bdc17f89cb8e6
-  languageName: node
-  linkType: hard
-
 "reusify@npm:^1.0.4":
   version: 1.0.4
   resolution: "reusify@npm:1.0.4"
@@ -4236,17 +3776,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^5.0.5":
-  version: 5.0.10
-  resolution: "rimraf@npm:5.0.10"
-  dependencies:
-    glob: "npm:^10.3.7"
-  bin:
-    rimraf: dist/esm/bin.mjs
-  checksum: 10/f3b8ce81eecbde4628b07bdf9e2fa8b684e0caea4999acb1e3b0402c695cd41f28cd075609a808e61ce2672f528ca079f675ab1d8e8d5f86d56643a03e0b8d2e
-  languageName: node
-  linkType: hard
-
 "rtl-css-js@npm:^1.16.1":
   version: 1.16.1
   resolution: "rtl-css-js@npm:1.16.1"
@@ -4299,13 +3828,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safer-buffer@npm:>= 2.1.2 < 3.0.0":
-  version: 2.1.2
-  resolution: "safer-buffer@npm:2.1.2"
-  checksum: 10/7eaf7a0cf37cc27b42fb3ef6a9b1df6e93a1c6d98c6c6702b02fe262d5fcbd89db63320793b99b21cb5348097d0a53de81bd5f4e8b86e20cc9412e3f1cfb4e83
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.25.0":
   version: 0.25.0
   resolution: "scheduler@npm:0.25.0"
@@ -4329,7 +3851,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.5, semver@npm:^7.6.0, semver@npm:^7.6.3":
+"semver@npm:^7.6.0, semver@npm:^7.6.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -4515,7 +4037,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signal-exit@npm:^4.0.1, signal-exit@npm:^4.1.0":
+"signal-exit@npm:^4.1.0":
   version: 4.1.0
   resolution: "signal-exit@npm:4.1.0"
   checksum: 10/c9fa63bbbd7431066174a48ba2dd9986dfd930c3a8b59de9c29d7b6854ec1c12a80d15310869ea5166d413b99f041bfa3dd80a7947bcd44ea8e6eb3ffeabfa1f
@@ -4551,34 +4073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"smart-buffer@npm:^4.2.0":
-  version: 4.2.0
-  resolution: "smart-buffer@npm:4.2.0"
-  checksum: 10/927484aa0b1640fd9473cee3e0a0bcad6fce93fd7bbc18bac9ad0c33686f5d2e2c422fba24b5899c184524af01e11dd2bd051c2bf2b07e47aff8ca72cbfc60d2
-  languageName: node
-  linkType: hard
-
-"socks-proxy-agent@npm:^8.0.3":
-  version: 8.0.5
-  resolution: "socks-proxy-agent@npm:8.0.5"
-  dependencies:
-    agent-base: "npm:^7.1.2"
-    debug: "npm:^4.3.4"
-    socks: "npm:^2.8.3"
-  checksum: 10/ee99e1dacab0985b52cbe5a75640be6e604135e9489ebdc3048635d186012fbaecc20fbbe04b177dee434c319ba20f09b3e7dfefb7d932466c0d707744eac05c
-  languageName: node
-  linkType: hard
-
-"socks@npm:^2.8.3":
-  version: 2.8.3
-  resolution: "socks@npm:2.8.3"
-  dependencies:
-    ip-address: "npm:^9.0.5"
-    smart-buffer: "npm:^4.2.0"
-  checksum: 10/ffcb622c22481dfcd7589aae71fbfd71ca34334064d181df64bf8b7feaeee19706aba4cffd1de35cc7bbaeeaa0af96be2d7f40fcbc7bc0ab69533a7ae9ffc4fb
-  languageName: node
-  linkType: hard
-
 "source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.1":
   version: 1.2.1
   resolution: "source-map-js@npm:1.2.1"
@@ -4600,22 +4094,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sprintf-js@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "sprintf-js@npm:1.1.3"
-  checksum: 10/e7587128c423f7e43cc625fe2f87e6affdf5ca51c1cc468e910d8aaca46bb44a7fbcfa552f787b1d3987f7043aeb4527d1b99559e6621e01b42b3f45e5a24cbb
-  languageName: node
-  linkType: hard
-
-"ssri@npm:^12.0.0":
-  version: 12.0.0
-  resolution: "ssri@npm:12.0.0"
-  dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 10/7024c1a6e39b3f18aa8f1c8290e884fe91b0f9ca5a6c6d410544daad54de0ba664db879afe16412e187c6c292fd60b937f047ee44292e5c2af2dcc6d8e1a9b48
-  languageName: node
-  linkType: hard
-
 "stable-hash@npm:^0.0.4":
   version: 0.0.4
   resolution: "stable-hash@npm:0.0.4"
@@ -4674,28 +4152,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0":
-  version: 4.2.3
-  resolution: "string-width@npm:4.2.3"
-  dependencies:
-    emoji-regex: "npm:^8.0.0"
-    is-fullwidth-code-point: "npm:^3.0.0"
-    strip-ansi: "npm:^6.0.1"
-  checksum: 10/e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb
-  languageName: node
-  linkType: hard
-
-"string-width@npm:^5.0.1, string-width@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "string-width@npm:5.1.2"
-  dependencies:
-    eastasianwidth: "npm:^0.2.0"
-    emoji-regex: "npm:^9.2.2"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10/7369deaa29f21dda9a438686154b62c2c5f661f8dda60449088f9f980196f7908fc39fdd1803e3e01541970287cf5deae336798337e9319a7055af89dafa7193
-  languageName: node
-  linkType: hard
-
 "string-width@npm:^7.0.0":
   version: 7.2.0
   resolution: "string-width@npm:7.2.0"
@@ -4787,7 +4243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
+"strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
   dependencies:
@@ -4796,7 +4252,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0":
+"strip-ansi@npm:^7.1.0":
   version: 7.1.0
   resolution: "strip-ansi@npm:7.1.0"
   dependencies:
@@ -4849,24 +4305,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sucrase@npm:^3.35.0":
-  version: 3.35.0
-  resolution: "sucrase@npm:3.35.0"
-  dependencies:
-    "@jridgewell/gen-mapping": "npm:^0.3.2"
-    commander: "npm:^4.0.0"
-    glob: "npm:^10.3.10"
-    lines-and-columns: "npm:^1.1.6"
-    mz: "npm:^2.7.0"
-    pirates: "npm:^4.0.1"
-    ts-interface-checker: "npm:^0.1.9"
-  bin:
-    sucrase: bin/sucrase
-    sucrase-node: bin/sucrase-node
-  checksum: 10/bc601558a62826f1c32287d4fdfa4f2c09fe0fec4c4d39d0e257fd9116d7d6227a18309721d4185ec84c9dc1af0d5ec0e05a42a337fbb74fc293e068549aacbe
-  languageName: node
-  linkType: hard
-
 "supports-color@npm:^7.1.0":
   version: 7.2.0
   resolution: "supports-color@npm:7.2.0"
@@ -4893,36 +4331,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.4.1":
-  version: 3.4.17
-  resolution: "tailwindcss@npm:3.4.17"
-  dependencies:
-    "@alloc/quick-lru": "npm:^5.2.0"
-    arg: "npm:^5.0.2"
-    chokidar: "npm:^3.6.0"
-    didyoumean: "npm:^1.2.2"
-    dlv: "npm:^1.1.3"
-    fast-glob: "npm:^3.3.2"
-    glob-parent: "npm:^6.0.2"
-    is-glob: "npm:^4.0.3"
-    jiti: "npm:^1.21.6"
-    lilconfig: "npm:^3.1.3"
-    micromatch: "npm:^4.0.8"
-    normalize-path: "npm:^3.0.0"
-    object-hash: "npm:^3.0.0"
-    picocolors: "npm:^1.1.1"
-    postcss: "npm:^8.4.47"
-    postcss-import: "npm:^15.1.0"
-    postcss-js: "npm:^4.0.1"
-    postcss-load-config: "npm:^4.0.2"
-    postcss-nested: "npm:^6.2.0"
-    postcss-selector-parser: "npm:^6.1.2"
-    resolve: "npm:^1.22.8"
-    sucrase: "npm:^3.35.0"
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 10/b0e00533ae3800223b5b71af9cb1dd9bfea5ef5ffa01300f1ced99de9511487aa41e03106173e4168c56c8f6600ee21c98c1d75a5def23cddf9b39b4ad71210d
+"tailwindcss@npm:4.0.0":
+  version: 4.0.0
+  resolution: "tailwindcss@npm:4.0.0"
+  checksum: 10/3491d86a7c3ad08209eb988fcf36d893e5f5a4c48c63da706a8788f6111e141386e1b5c8fa46f2650b08200c1b8011251d97b6d65514bdc14aa06597871d1f7d
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.0.5":
+  version: 4.0.5
+  resolution: "tailwindcss@npm:4.0.5"
+  checksum: 10/11b7aa6f0673e70a8c0397de89e00f3a4d8367ecf9edef710c427707f3cace81cd98de63dcd0335e9de8408b4e09e39d2c8f77ee7f56c55460700c58b7c4f351
   languageName: node
   linkType: hard
 
@@ -4933,20 +4352,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar@npm:^7.4.3":
-  version: 7.4.3
-  resolution: "tar@npm:7.4.3"
-  dependencies:
-    "@isaacs/fs-minipass": "npm:^4.0.0"
-    chownr: "npm:^3.0.0"
-    minipass: "npm:^7.1.2"
-    minizlib: "npm:^3.0.1"
-    mkdirp: "npm:^3.0.1"
-    yallist: "npm:^5.0.0"
-  checksum: 10/12a2a4fc6dee23e07cc47f1aeb3a14a1afd3f16397e1350036a8f4cdfee8dcac7ef5978337a4e7b2ac2c27a9a6d46388fc2088ea7c80cb6878c814b1425f8ecf
-  languageName: node
-  linkType: hard
-
 "text-table@npm:^0.2.0":
   version: 0.2.0
   resolution: "text-table@npm:0.2.0"
@@ -4954,24 +4359,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"thenify-all@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "thenify-all@npm:1.6.0"
-  dependencies:
-    thenify: "npm:>= 3.1.0 < 4"
-  checksum: 10/dba7cc8a23a154cdcb6acb7f51d61511c37a6b077ec5ab5da6e8b874272015937788402fd271fdfc5f187f8cb0948e38d0a42dcc89d554d731652ab458f5343e
-  languageName: node
-  linkType: hard
-
-"thenify@npm:>= 3.1.0 < 4":
-  version: 3.3.1
-  resolution: "thenify@npm:3.3.1"
-  dependencies:
-    any-promise: "npm:^1.0.0"
-  checksum: 10/486e1283a867440a904e36741ff1a177faa827cf94d69506f7e3ae4187b9afdf9ec368b3d8da225c192bfe2eb943f3f0080594156bf39f21b57cd1411e2e7f6d
-  languageName: node
-  linkType: hard
-
 "throttle-debounce@npm:^3.0.1":
   version: 3.0.1
   resolution: "throttle-debounce@npm:3.0.1"
@@ -5011,13 +4398,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-interface-checker@npm:^0.1.9":
-  version: 0.1.13
-  resolution: "ts-interface-checker@npm:0.1.13"
-  checksum: 10/9f7346b9e25bade7a1050c001ec5a4f7023909c0e1644c5a96ae20703a131627f081479e6622a4ecee2177283d0069e651e507bedadd3904fc4010ab28ffce00
-  languageName: node
-  linkType: hard
-
 "tsconfig-paths@npm:^3.15.0":
   version: 3.15.0
   resolution: "tsconfig-paths@npm:3.15.0"
@@ -5145,24 +4525,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unique-filename@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "unique-filename@npm:4.0.0"
-  dependencies:
-    unique-slug: "npm:^5.0.0"
-  checksum: 10/6a62094fcac286b9ec39edbd1f8f64ff92383baa430af303dfed1ffda5e47a08a6b316408554abfddd9730c78b6106bef4ca4d02c1231a735ddd56ced77573df
-  languageName: node
-  linkType: hard
-
-"unique-slug@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "unique-slug@npm:5.0.0"
-  dependencies:
-    imurmurhash: "npm:^0.1.4"
-  checksum: 10/beafdf3d6f44990e0a5ce560f8f881b4ee811be70b6ba0db25298c31c8cf525ed963572b48cd03be1c1349084f9e339be4241666d7cf1ebdad20598d3c652b27
-  languageName: node
-  linkType: hard
-
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -5172,13 +4534,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util-deprecate@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "util-deprecate@npm:1.0.2"
-  checksum: 10/474acf1146cb2701fe3b074892217553dfcf9a031280919ba1b8d651a068c9b15d863b7303cb15bd00a862b498e6cf4ad7b4a08fb134edd5a6f7641681cb54a2
-  languageName: node
-  linkType: hard
-
 "which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1":
   version: 1.1.1
   resolution: "which-boxed-primitive@npm:1.1.1"
@@ -5250,17 +4605,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "which@npm:5.0.0"
-  dependencies:
-    isexe: "npm:^3.1.1"
-  bin:
-    node-which: bin/which.js
-  checksum: 10/6ec99e89ba32c7e748b8a3144e64bfc74aa63e2b2eacbb61a0060ad0b961eb1a632b08fb1de067ed59b002cec3e21de18299216ebf2325ef0f78e0f121e14e90
-  languageName: node
-  linkType: hard
-
 "word-wrap@npm:^1.2.5":
   version: 1.2.5
   resolution: "word-wrap@npm:1.2.5"
@@ -5268,28 +4612,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version: 7.0.0
-  resolution: "wrap-ansi@npm:7.0.0"
-  dependencies:
-    ansi-styles: "npm:^4.0.0"
-    string-width: "npm:^4.1.0"
-    strip-ansi: "npm:^6.0.0"
-  checksum: 10/cebdaeca3a6880da410f75209e68cd05428580de5ad24535f22696d7d9cab134d1f8498599f344c3cf0fb37c1715807a183778d8c648d6cc0cb5ff2bb4236540
-  languageName: node
-  linkType: hard
-
-"wrap-ansi@npm:^8.1.0":
-  version: 8.1.0
-  resolution: "wrap-ansi@npm:8.1.0"
-  dependencies:
-    ansi-styles: "npm:^6.1.0"
-    string-width: "npm:^5.0.1"
-    strip-ansi: "npm:^7.0.1"
-  checksum: 10/7b1e4b35e9bb2312d2ee9ee7dc95b8cb5f8b4b5a89f7dde5543fe66c1e3715663094defa50d75454ac900bd210f702d575f15f3f17fa9ec0291806d2578d1ddf
-  languageName: node
-  linkType: hard
-
 "wrap-ansi@npm:^9.0.0":
   version: 9.0.0
   resolution: "wrap-ansi@npm:9.0.0"
@@ -5308,29 +4630,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yallist@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "yallist@npm:4.0.0"
-  checksum: 10/4cb02b42b8a93b5cf50caf5d8e9beb409400a8a4d85e83bb0685c1457e9ac0b7a00819e9f5991ac25ffabb56a78e2f017c1acc010b3a1babfe6de690ba531abd
-  languageName: node
-  linkType: hard
-
-"yallist@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "yallist@npm:5.0.0"
-  checksum: 10/1884d272d485845ad04759a255c71775db0fac56308764b4c77ea56a20d56679fad340213054c8c9c9c26fcfd4c4b2a90df993b7e0aaf3cdb73c618d1d1a802a
-  languageName: node
-  linkType: hard
-
-"yaml@npm:^2.3.4":
-  version: 2.7.0
-  resolution: "yaml@npm:2.7.0"
-  bin:
-    yaml: bin.mjs
-  checksum: 10/c8c314c62fbd49244a6a51b06482f6d495b37ab10fa685fcafa1bbaae7841b7233ee7d12cab087bcca5a0b28adc92868b6e437322276430c28d00f1c1732eeec
-  languageName: node
-  linkType: hard
-
 "yaml@npm:~2.6.1":
   version: 2.6.1
   resolution: "yaml@npm:2.6.1"

From decac944b1c76128e37f073c52bc779215183980 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 10 Feb 2025 12:06:25 +0100
Subject: [PATCH 2/2] chore(frontend): lint all files with new tailwind order

---
 frontend/src/app/for-lawyers/components/Card.tsx |  4 ++--
 .../src/app/for-lawyers/components/Flowchart.tsx | 16 ++++++++--------
 frontend/src/app/for-lawyers/components/Hero.tsx |  6 +++---
 .../ArbitrationMethodTable/TabelCardContent.tsx  |  2 +-
 .../ArbitrationMethodTable/index.tsx             | 14 +++++++-------
 .../KlerosEscrowSection.tsx                      | 10 +++++-----
 .../KlerosDisputeResolutionSection/index.tsx     |  6 +++---
 .../KlerosEnterpriseSection/HighlightedText.tsx  |  6 +++---
 .../MethodsTable/MobileTable.tsx                 |  6 +++---
 .../components/KlerosEnterpriseSection/index.tsx |  2 +-
 .../components/KlerosFellowSection/index.tsx     |  2 +-
 .../components/KlerosMediationSection/index.tsx  |  4 ++--
 .../KlerosParticipateSection/index.tsx           |  2 +-
 .../src/app/home/components/HowKlerosWorks.tsx   |  2 +-
 frontend/src/app/home/components/TokenStats.tsx  |  2 +-
 frontend/src/app/home/components/UseCases.tsx    |  2 +-
 frontend/src/components/BrandAssets/Hero.tsx     |  4 ++--
 .../BrandAssets/KlerosBadgesSection.tsx          |  4 ++--
 .../BrandAssets/KlerosColorsSection/index.tsx    |  4 ++--
 .../BrandAssets/KlerosFontsSection.tsx           |  2 +-
 .../components/BrandAssets/KlerosLogoSection.tsx |  2 +-
 .../BrandAssets/LogosPackageSection.tsx          |  2 +-
 .../components/BrandAssets/PnkTokenSection.tsx   |  4 ++--
 .../BrandAssets/StyledImagesSection.tsx          |  4 ++--
 .../components/Community/CommunitiesSection.tsx  |  2 +-
 .../src/components/Community/CommunityCard.tsx   |  6 +++---
 frontend/src/components/Community/hero.tsx       |  4 ++--
 .../Cooperative/MemberSection/index.tsx          |  6 +++---
 .../ReportSection/DropdownContainer.tsx          |  4 ++--
 frontend/src/components/Cooperative/hero.tsx     |  6 +++---
 frontend/src/components/CtaBox.tsx               |  2 +-
 frontend/src/components/CtaCard.tsx              |  8 ++++----
 frontend/src/components/Divider.tsx              |  2 +-
 .../components/Dropdown/DropdownItemButton.tsx   |  2 +-
 frontend/src/components/Dropdown/index.tsx       |  6 +++---
 frontend/src/components/Earn/Hero.tsx            | 10 +++++-----
 .../CuratorTabContent/KlerosScoutSection.tsx     |  4 ++--
 .../Earn/TabSection/CuratorTabContent/index.tsx  |  6 +++---
 .../Earn/TabSection/JurorTabContent/index.tsx    |  4 ++--
 frontend/src/components/ExternalLink.tsx         |  2 +-
 frontend/src/components/ForBuilders/Hero.tsx     |  4 ++--
 .../UseCasesSection/DAOSection/Header.tsx        |  4 ++--
 .../DAOSection/KeyChallenges/Header.tsx          |  4 ++--
 .../KeyChallenges/HowKlerosSolvesIt.tsx          |  2 +-
 .../Navbar/AppsDropdownContent/Card.tsx          | 10 +++++-----
 .../Navbar/AppsDropdownContent/index.tsx         |  4 ++--
 frontend/src/components/Navbar/MobileMenu.tsx    |  2 +-
 .../PNKToken/BuySection/FeaturedExchange.tsx     |  2 +-
 .../src/components/PNKToken/BuySection/index.tsx |  2 +-
 frontend/src/components/PNKToken/Hero.tsx        |  4 ++--
 .../PNKToken/TokenNeedSection/index.tsx          |  4 ++--
 .../PNKToken/TokenomicsSection/Stat.tsx          |  6 +++---
 .../TokenomicsSection/TokenStatDisplay.tsx       |  2 +-
 .../PNKToken/TokenomicsSection/index.tsx         |  4 ++--
 frontend/src/components/Pagination.tsx           |  2 +-
 .../src/components/ResearchDevelopment/Hero.tsx  |  6 +++---
 .../FellowshipTabContent/Fellows/FellowCard.tsx  |  8 ++++----
 .../FellowshipTabContent/WaitlistSection.tsx     |  2 +-
 .../TabSection/FellowshipTabContent/index.tsx    |  8 ++++----
 .../PublicationsSection/PublicationCard.tsx      |  8 ++++----
 .../PublicationsSection/index.tsx                |  6 +++---
 .../ResearchSection/ResearchCard.tsx             |  4 ++--
 .../ResearchTabContent/ResearchSection/index.tsx |  6 +++---
 frontend/src/components/Tag.tsx                  |  2 +-
 64 files changed, 146 insertions(+), 146 deletions(-)

diff --git a/frontend/src/app/for-lawyers/components/Card.tsx b/frontend/src/app/for-lawyers/components/Card.tsx
index fd24a98..693d301 100644
--- a/frontend/src/app/for-lawyers/components/Card.tsx
+++ b/frontend/src/app/for-lawyers/components/Card.tsx
@@ -7,13 +7,13 @@ const Card: React.FC<ICard> = ({ title, description, icon }) => {
   return (
     <div
       className={clsx(
-        "rounded-2xl border border-stroke bg-background-2",
+        "border-stroke bg-background-2 rounded-2xl border",
         "p-6 pb-[56px] lg:pb-[60px]",
         "flex flex-col items-start gap-4",
       )}
     >
       <Image src={icon.url} width={90} height={90} alt="Card Icon" />
-      <h2 className="mb-2 text-lg font-medium text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-2 text-lg font-medium lg:text-xl">
         {title}
       </h2>
 
diff --git a/frontend/src/app/for-lawyers/components/Flowchart.tsx b/frontend/src/app/for-lawyers/components/Flowchart.tsx
index b9526d2..be6de27 100644
--- a/frontend/src/app/for-lawyers/components/Flowchart.tsx
+++ b/frontend/src/app/for-lawyers/components/Flowchart.tsx
@@ -20,7 +20,7 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
           "flex items-center justify-center p-6",
         )}
       >
-        <span className="text-center text-lg font-medium text-primary-text lg:text-xl">
+        <span className="text-primary-text text-center text-lg font-medium lg:text-xl">
           {name}
         </span>
       </div>
@@ -29,24 +29,24 @@ const FlowchartItem: React.FC<IFlowchartItem> = ({
       <div className="pr-[14px]">
         <div
           className={clsx(
-            "relative h-7 w-[100%-14px] bg-primary-blue",
+            "bg-primary-blue relative h-7 w-[100%-14px]",
             "flex items-center justify-center",
             //start-arrow
-            "before:absolute before:-left-[1px] before:top-0 before:border-b-[14px] before:border-l-[14px] before:border-t-[14px]",
-            "before:border-b-transparent before:border-t-transparent",
+            "before:absolute before:top-0 before:-left-[1px] before:border-t-[14px] before:border-b-[14px] before:border-l-[14px]",
+            "before:border-t-transparent before:border-b-transparent",
             background === "primary"
               ? "before:border-l-background-1"
               : "before:border-l-background-2",
             //end arrow
-            "after:absolute after:right-[-14px] after:top-0 after:border-b-[14px] after:border-l-[14px] after:border-t-[14px]",
-            "after:border-b-transparent after:border-l-primary-blue after:border-t-transparent",
+            "after:absolute after:top-0 after:right-[-14px] after:border-t-[14px] after:border-b-[14px] after:border-l-[14px]",
+            "after:border-l-primary-blue after:border-t-transparent after:border-b-transparent",
           )}
         >
-          <span className="text-xl text-background-2">{index}</span>
+          <span className="text-background-2 text-xl">{index}</span>
         </div>
       </div>
 
-      <div className="rounded-3xl border-2 border-stroke bg-background-2 p-6">
+      <div className="border-stroke bg-background-2 rounded-3xl border-2 p-6">
         <p className="text-secondary-text lg:text-lg">{description}</p>
       </div>
     </div>
diff --git a/frontend/src/app/for-lawyers/components/Hero.tsx b/frontend/src/app/for-lawyers/components/Hero.tsx
index de4efff..96eb41a 100644
--- a/frontend/src/app/for-lawyers/components/Hero.tsx
+++ b/frontend/src/app/for-lawyers/components/Hero.tsx
@@ -15,7 +15,7 @@ const Hero: React.FC = async () => {
   ).forLawyersPageHero;
 
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+    <div className="relative px-6 pt-44 pb-28 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -33,7 +33,7 @@ const Hero: React.FC = async () => {
         <ExternalLink
           text={arrowLink.text}
           url={arrowLink.link.url}
-          className="text-start lg:pb-9 [&>span]:text-primary-text"
+          className="[&>span]:text-primary-text text-start lg:pb-9"
         />
       </div>
       <Image
@@ -41,7 +41,7 @@ const Hero: React.FC = async () => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx
index d2da1e2..fa590aa 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/TabelCardContent.tsx
@@ -63,7 +63,7 @@ const TableCardContent: React.FC<ArbitrationMethodTableType> = ({
           width={53.251}
           height={49.259}
           alt="Kleros-icon"
-          className="absolute right-[33.75px] top-[32px]"
+          className="absolute top-[32px] right-[33.75px]"
         />
       ) : null}
     </div>
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
index 27ee32d..aa50498 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/ArbitrationMethodTable/index.tsx
@@ -19,9 +19,9 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
     >
       <div
         className={clsx(
-          "box-border rounded-3xl border-2 border-stroke bg-background-2",
-          "absolute left-0 top-0 h-full min-h-fit w-full",
-          "pb-[66.666%] lg:pb-0 lg:pr-[66.666%]",
+          "border-stroke bg-background-2 box-border rounded-3xl border-2",
+          "absolute top-0 left-0 h-full min-h-fit w-full",
+          "pb-[66.666%] lg:pr-[66.666%] lg:pb-0",
         )}
       >
         <TableCardContent {...table?.[0]} />
@@ -29,9 +29,9 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
 
       <div
         className={clsx(
-          "box-border rounded-3xl bg-background-1",
-          "absolute left-0 top-1/3 h-2/3 min-h-fit w-full lg:left-1/3 lg:top-0 lg:h-full lg:w-2/3",
-          "pb-[33.333%] lg:pb-0 lg:pr-[33.333%]",
+          "bg-background-1 box-border rounded-3xl",
+          "absolute top-1/3 left-0 h-2/3 min-h-fit w-full lg:top-0 lg:left-1/3 lg:h-full lg:w-2/3",
+          "pb-[33.333%] lg:pr-[33.333%] lg:pb-0",
         )}
       >
         <TableCardContent {...table?.[1]} />
@@ -41,7 +41,7 @@ const ArbitrationMethodTable: React.FC<IArbitrationMethodTable> = ({
         className={clsx(
           "box-border rounded-3xl",
           "bg-[linear-gradient(0deg,_#5B2B99_0%,_#27CDFE_100%)]",
-          "absolute left-0 top-2/3 h-1/3 w-full p-[6px] lg:left-2/3 lg:top-0 lg:h-full lg:w-1/3",
+          "absolute top-2/3 left-0 h-1/3 w-full p-[6px] lg:top-0 lg:left-2/3 lg:h-full lg:w-1/3",
         )}
       >
         <div
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
index eb3e405..72537ab 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/KlerosEscrowSection.tsx
@@ -25,28 +25,28 @@ const KlerosEscrowSection: React.FC = async () => {
     <div>
       <h1
         className={
-          "mb-6 text-lg font-medium text-primary-text lg:px-32 lg:text-2xl"
+          "text-primary-text mb-6 text-lg font-medium lg:px-32 lg:text-2xl"
         }
       >
         {header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:px-32 lg:text-lg">
+      <p className="text-secondary-text mb-16 lg:px-32 lg:text-lg">
         {subtitle}
       </p>
 
-      <p className="mb-12 text-primary-purple lg:px-32 lg:text-lg">
+      <p className="text-primary-purple mb-12 lg:px-32 lg:text-lg">
         {flowchartLabel}
       </p>
       <Flowchart items={flowchart} background="secondary" />
 
       <h2
         className={
-          "mb-6 mt-12 text-lg font-medium text-primary-text lg:px-32 lg:text-xl"
+          "text-primary-text mt-12 mb-6 text-lg font-medium lg:px-32 lg:text-xl"
         }
       >
         {secondHeader}
       </h2>
-      <p className="mb-8 text-secondary-text lg:px-32 lg:text-lg">
+      <p className="text-secondary-text mb-8 lg:px-32 lg:text-lg">
         {secondSubtitle}
       </p>
 
diff --git a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
index e846dc5..d0745bc 100644
--- a/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosDisputeResolutionSection/index.tsx
@@ -36,10 +36,10 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       )}
     >
       <div className="flex flex-col gap-6 lg:px-32">
-        <h3 className="mb-6 text-primary-purple lg:text-lg">
+        <h3 className="text-primary-purple mb-6 lg:text-lg">
           {headerSubtitle}
         </h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
@@ -49,7 +49,7 @@ const KlerosDisputeResolutionSection: React.FC = async () => {
       <ResearchSection {...{ secondHeader, secondSubtitle, publications }} />
 
       <div className="my-4 lg:px-32">
-        <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+        <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
           {thirdHeader}
         </h2>
         <p className="text-secondary-text lg:text-lg">{thirdSubtitle}</p>
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx
index aecf8d1..177947f 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/HighlightedText.tsx
@@ -8,7 +8,7 @@ const HighlightedText: React.FC<
   const FullText = (
     <span
       className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        "text-secondary-text text-base font-normal lg:text-lg lg:font-medium",
         fullTextStyle,
       )}
     >
@@ -28,14 +28,14 @@ const HighlightedText: React.FC<
   return (
     <span
       className={clsx(
-        "text-base font-normal text-secondary-text lg:text-lg lg:font-medium",
+        "text-secondary-text text-base font-normal lg:text-lg lg:font-medium",
         fullTextStyle,
       )}
     >
       {beforeMatch}
       <span
         className={clsx(
-          "text-base font-normal text-primary-purple lg:text-lg lg:font-medium",
+          "text-primary-purple text-base font-normal lg:text-lg lg:font-medium",
           highlightedTextStyle,
         )}
       >
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx
index 0efd117..1e2a08c 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/MethodsTable/MobileTable.tsx
@@ -16,12 +16,12 @@ const TableItem: React.FC<{
   return (
     <div
       className={clsx(
-        "rounded-2xl border-2 border-stroke bg-background-1",
-        "px-6 pb-16 pt-8",
+        "border-stroke bg-background-1 rounded-2xl border-2",
+        "px-6 pt-8 pb-16",
         "flex flex-col gap-6",
       )}
     >
-      <h2 className="text-lg font-medium text-primary-text">{heading}</h2>{" "}
+      <h2 className="text-primary-text text-lg font-medium">{heading}</h2>{" "}
       <Divider />
       {tableHeadings.slice(1).map(({ heading }, index) => (
         <div key={`${heading}-${index}`} className="flex flex-col gap-4">
diff --git a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
index d63f1f3..9e59636 100644
--- a/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosEnterpriseSection/index.tsx
@@ -39,7 +39,7 @@ const KlerosEnterpriseSection: React.FC = async () => {
     >
       <div className="flex flex-col gap-6 lg:px-32">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <HighlightedText {...subtitle} />
diff --git a/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
index 4a68b18..7d58a68 100644
--- a/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosFellowSection/index.tsx
@@ -33,7 +33,7 @@ const KlerosFellowSection: React.FC = async () => {
     >
       <div className="flex flex-col gap-8">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{firstSubtitle}</p>
diff --git a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
index adecd92..e00fc1d 100644
--- a/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosMediationSection/index.tsx
@@ -25,7 +25,7 @@ const KlerosMediationSection: React.FC = async () => {
       )}
     >
       <div className="flex flex-col gap-8 lg:px-32">
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
@@ -34,7 +34,7 @@ const KlerosMediationSection: React.FC = async () => {
       <Flowchart items={flowchart} background="primary" />
 
       <div className="flex flex-col gap-8 lg:px-32">
-        <h2 className="text-lg text-primary-text lg:text-xl">
+        <h2 className="text-primary-text text-lg lg:text-xl">
           {benefitsHeader}
         </h2>
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
diff --git a/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx b/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx
index 2182ad0..793d4e5 100644
--- a/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx
+++ b/frontend/src/app/for-lawyers/components/KlerosParticipateSection/index.tsx
@@ -18,7 +18,7 @@ const KlerosParticipateSection: React.FC = async () => {
     <div className={clsx("bg-background-1", "px-6 py-12 lg:px-32 lg:py-24")}>
       <div className="flex flex-col gap-8">
         <h3 className="text-primary-purple lg:text-lg">{headerSubtitle}</h3>
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
diff --git a/frontend/src/app/home/components/HowKlerosWorks.tsx b/frontend/src/app/home/components/HowKlerosWorks.tsx
index 050c88c..6352f88 100644
--- a/frontend/src/app/home/components/HowKlerosWorks.tsx
+++ b/frontend/src/app/home/components/HowKlerosWorks.tsx
@@ -18,7 +18,7 @@ const HowKlerosWorks: React.FC = async () => {
   return (
     <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
       <div className="flex flex-col gap-8">
-        <label className="text-base text-primary-purple lg:text-lg">
+        <label className="text-primary-purple text-base lg:text-lg">
           {label}
         </label>
         <h3 className="text-xl font-medium lg:text-3xl">{title}</h3>
diff --git a/frontend/src/app/home/components/TokenStats.tsx b/frontend/src/app/home/components/TokenStats.tsx
index ce51e06..08a6e2d 100644
--- a/frontend/src/app/home/components/TokenStats.tsx
+++ b/frontend/src/app/home/components/TokenStats.tsx
@@ -13,7 +13,7 @@ const TokenStats: React.FC<{
         <div key={key} className="flex flex-col">
           <div className="flex flex-row">
             <h3 className="text-2xl font-medium">{primaryValue}</h3>
-            <h3 className="text-2xl text-primary-blue">{secondaryValue}</h3>
+            <h3 className="text-primary-blue text-2xl">{secondaryValue}</h3>
           </div>
           <p className="font-medium">{key}</p>
         </div>
diff --git a/frontend/src/app/home/components/UseCases.tsx b/frontend/src/app/home/components/UseCases.tsx
index 1839f06..5d611b1 100644
--- a/frontend/src/app/home/components/UseCases.tsx
+++ b/frontend/src/app/home/components/UseCases.tsx
@@ -14,7 +14,7 @@ const UseCases: React.FC = async () => {
   return (
     <div
       className={
-        "space-y-8 bg-background-2 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
+        "bg-background-2 space-y-8 px-6 pb-12 lg:space-y-12 lg:px-32 lg:pb-24"
       }
     >
       <h3 className="text-xl font-medium lg:text-3xl"> {title} </h3>
diff --git a/frontend/src/components/BrandAssets/Hero.tsx b/frontend/src/components/BrandAssets/Hero.tsx
index 05b793a..7d16de1 100644
--- a/frontend/src/components/BrandAssets/Hero.tsx
+++ b/frontend/src/components/BrandAssets/Hero.tsx
@@ -13,7 +13,7 @@ interface IHero {
 
 const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-[302px]">
+    <div className="relative px-6 pt-44 pb-28 md:pt-52 lg:px-32 lg:pb-[302px]">
       <div className="space-y-6">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {heroData.header}
@@ -32,7 +32,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
index fc1b265..7e2454a 100644
--- a/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
+++ b/frontend/src/components/BrandAssets/KlerosBadgesSection.tsx
@@ -10,11 +10,11 @@ const KlerosBadgesSection: React.FC<IKlerosBadgesSection> = ({
   klerosBadgesData,
 }) => {
   return (
-    <div className="relative space-y-8 bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
+    <div className="bg-background-1 relative space-y-8 px-6 py-12 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-2xl">
         {klerosBadgesData.header}
       </h1>
-      <p className="pb-4 text-secondary-text lg:pb-8 lg:text-lg">
+      <p className="text-secondary-text pb-4 lg:pb-8 lg:text-lg">
         {klerosBadgesData.subtitle}
       </p>
       <div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
diff --git a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
index a6beff6..b4cd451 100644
--- a/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
+++ b/frontend/src/components/BrandAssets/KlerosColorsSection/index.tsx
@@ -10,11 +10,11 @@ const KlerosColorsSection: React.FC<IKlerosColorsSection> = ({
   klerosColorsData,
 }) => {
   return (
-    <div className="relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
+    <div className="bg-background-2 relative space-y-8 px-6 py-12 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-2xl">
         {klerosColorsData.header}
       </h1>
-      <p className="pb-4 text-sm font-medium text-secondary-text lg:pb-8 lg:text-lg lg:font-normal">
+      <p className="text-secondary-text pb-4 text-sm font-medium lg:pb-8 lg:text-lg lg:font-normal">
         {klerosColorsData.subtitle}
       </p>
       <div className="flex flex-row flex-wrap justify-center gap-8">
diff --git a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
index 4c5be85..a9fbccc 100644
--- a/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
+++ b/frontend/src/components/BrandAssets/KlerosFontsSection.tsx
@@ -10,7 +10,7 @@ const KlerosFontsSection: React.FC<IKlerosFontsSection> = ({
   klerosFontsData,
 }) => {
   return (
-    <div className="relative space-y-8 bg-background-1 px-6 pb-12 lg:space-y-16 lg:px-32 lg:pb-24 lg:pt-8">
+    <div className="bg-background-1 relative space-y-8 px-6 pb-12 lg:space-y-16 lg:px-32 lg:pt-8 lg:pb-24">
       <h1 className="text-xl font-medium lg:text-2xl">
         {klerosFontsData.header}
       </h1>
diff --git a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
index 2a761a9..1f20777 100644
--- a/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
+++ b/frontend/src/components/BrandAssets/KlerosLogoSection.tsx
@@ -10,7 +10,7 @@ const KlerosLogoSection: React.FC<IKlerosLogoSection> = ({
   klerosLogoData,
 }) => {
   return (
-    <div className="relative space-y-12 bg-background-1 px-6 py-12 lg:space-y-16 lg:px-32 lg:py-24">
+    <div className="bg-background-1 relative space-y-12 px-6 py-12 lg:space-y-16 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-3xl">
         {klerosLogoData.header}
       </h1>
diff --git a/frontend/src/components/BrandAssets/LogosPackageSection.tsx b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
index 3d19352..57d976f 100644
--- a/frontend/src/components/BrandAssets/LogosPackageSection.tsx
+++ b/frontend/src/components/BrandAssets/LogosPackageSection.tsx
@@ -12,7 +12,7 @@ const LogosPackageSection: React.FC<ILogosPackageSection> = ({
   logosPackageData,
 }) => {
   return (
-    <div className="relative space-y-6 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
+    <div className="bg-background-2 relative space-y-6 px-6 py-12 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-3xl">
         {logosPackageData.header}
       </h1>
diff --git a/frontend/src/components/BrandAssets/PnkTokenSection.tsx b/frontend/src/components/BrandAssets/PnkTokenSection.tsx
index 1bf4c1d..312cde0 100644
--- a/frontend/src/components/BrandAssets/PnkTokenSection.tsx
+++ b/frontend/src/components/BrandAssets/PnkTokenSection.tsx
@@ -8,9 +8,9 @@ interface IPnkTokenSection {
 
 const PnkTokenSection: React.FC<IPnkTokenSection> = ({ pnkTokenData }) => {
   return (
-    <div className="relative space-y-6 bg-background-1 px-6 py-12 lg:space-y-8 lg:px-32 lg:py-24">
+    <div className="bg-background-1 relative space-y-6 px-6 py-12 lg:space-y-8 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-3xl">{pnkTokenData.header}</h1>
-      <p className="pb-10 text-secondary-text lg:pb-16 lg:text-lg">
+      <p className="text-secondary-text pb-10 lg:pb-16 lg:text-lg">
         {pnkTokenData.subtitle}
       </p>
       <ImageDownload
diff --git a/frontend/src/components/BrandAssets/StyledImagesSection.tsx b/frontend/src/components/BrandAssets/StyledImagesSection.tsx
index e19a791..6526432 100644
--- a/frontend/src/components/BrandAssets/StyledImagesSection.tsx
+++ b/frontend/src/components/BrandAssets/StyledImagesSection.tsx
@@ -10,14 +10,14 @@ const StyledImagesSection: React.FC<IStyledImagesSection> = ({
   styledImagesData,
 }) => {
   return (
-    <div className="relative space-y-8 bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
+    <div className="bg-background-2 relative space-y-8 px-6 py-12 lg:px-32 lg:py-24">
       <h1 className="text-xl font-medium lg:text-3xl">
         {styledImagesData.header}
       </h1>
       <h1 className="text-lg lg:text-2xl">
         {styledImagesData.wallpapersHeader}
       </h1>
-      <p className="pb-8 text-secondary-text lg:pb-16 lg:text-lg">
+      <p className="text-secondary-text pb-8 lg:pb-16 lg:text-lg">
         {styledImagesData.wallpapersSubtitle}
       </p>
       <div className="flex flex-row flex-wrap justify-center gap-8 lg:gap-y-16">
diff --git a/frontend/src/components/Community/CommunitiesSection.tsx b/frontend/src/components/Community/CommunitiesSection.tsx
index d39714e..bb03333 100644
--- a/frontend/src/components/Community/CommunitiesSection.tsx
+++ b/frontend/src/components/Community/CommunitiesSection.tsx
@@ -12,7 +12,7 @@ const CommunitiesSection: React.FC<ICommunitiesSection> = ({ communities }) => {
   const rowOneCommunities = communities.slice(0, 2);
   const restCommunities = communities.slice(2);
   return (
-    <div className="w-full bg-background-2 px-6 lg:px-32">
+    <div className="bg-background-2 w-full px-6 lg:px-32">
       <div
         className={clsx(
           "-translate-y-40 lg:-translate-y-44",
diff --git a/frontend/src/components/Community/CommunityCard.tsx b/frontend/src/components/Community/CommunityCard.tsx
index f8bc6cb..a43d4c4 100644
--- a/frontend/src/components/Community/CommunityCard.tsx
+++ b/frontend/src/components/Community/CommunityCard.tsx
@@ -7,7 +7,7 @@ import CustomLink from "../CustomLink";
 const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
   return (
     <CustomLink href={url}>
-      <div className="flex min-h-[326px] flex-col items-center justify-center rounded-2xl border border-stroke bg-background-2 hover:scale-[1.01]">
+      <div className="border-stroke bg-background-2 flex min-h-[326px] flex-col items-center justify-center rounded-2xl border hover:scale-[1.01]">
         <Image
           src={icon.url}
           alt={icon.name}
@@ -15,10 +15,10 @@ const CommunityCard: React.FC<Community> = ({ title, subtitle, icon, url }) => {
           height={76}
           className="object-contain"
         />
-        <h2 className="mb-4 mt-2 text-center text-xl font-medium text-primary-text">
+        <h2 className="text-primary-text mt-2 mb-4 text-center text-xl font-medium">
           {title}
         </h2>
-        <label className="text-base text-secondary-text">{subtitle}</label>
+        <label className="text-secondary-text text-base">{subtitle}</label>
       </div>
     </CustomLink>
   );
diff --git a/frontend/src/components/Community/hero.tsx b/frontend/src/components/Community/hero.tsx
index 99e02bc..2b6631a 100644
--- a/frontend/src/components/Community/hero.tsx
+++ b/frontend/src/components/Community/hero.tsx
@@ -14,7 +14,7 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, communityButtons, background } = heroData;
   return (
-    <div className="relative px-6 pb-[277px] pt-44 lg:px-32 lg:pb-[331px]">
+    <div className="relative px-6 pt-44 pb-[277px] lg:px-32 lg:pb-[331px]">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -35,7 +35,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/Cooperative/MemberSection/index.tsx b/frontend/src/components/Cooperative/MemberSection/index.tsx
index 67e8095..251fca3 100644
--- a/frontend/src/components/Cooperative/MemberSection/index.tsx
+++ b/frontend/src/components/Cooperative/MemberSection/index.tsx
@@ -9,16 +9,16 @@ interface IMemberSection {
 const MemberSection: React.FC<IMemberSection> = ({ memberData }) => {
   return (
     <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="mb-8 text-xl font-medium text-primary-text lg:text-3xl">
+      <h1 className="text-primary-text mb-8 text-xl font-medium lg:text-3xl">
         {memberData.header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-16 lg:text-lg">
         {memberData.subtitle}
       </p>
       <LearnMore {...memberData.learnMoreSection} />
       <h1
         className={
-          "mb-8 mt-16 text-xl font-medium text-primary-text lg:text-3xl"
+          "text-primary-text mt-16 mb-8 text-xl font-medium lg:text-3xl"
         }
       >
         {memberData.secondaryHeader}
diff --git a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx b/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
index 767259f..5826fe6 100644
--- a/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
+++ b/frontend/src/components/Cooperative/ReportSection/DropdownContainer.tsx
@@ -83,7 +83,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
       className={"flex flex-col items-start gap-8 md:flex-row md:items-center"}
     >
       <div className="flex items-center gap-4">
-        <label className="text-lg text-secondary-text">
+        <label className="text-secondary-text text-lg">
           {yearDropdownLabel}
         </label>
         <Dropdown
@@ -94,7 +94,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
       </div>
       {isMonthInfo ? (
         <div className="flex items-center gap-4">
-          <label className="text-lg text-secondary-text">
+          <label className="text-secondary-text text-lg">
             {monthDropdownLabel}
           </label>
           <Dropdown
diff --git a/frontend/src/components/Cooperative/hero.tsx b/frontend/src/components/Cooperative/hero.tsx
index 0a90d6d..860344c 100644
--- a/frontend/src/components/Cooperative/hero.tsx
+++ b/frontend/src/components/Cooperative/hero.tsx
@@ -15,7 +15,7 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, buttons, arrowLink, background } = heroData;
   return (
-    <div className="relative px-6 pb-52 pt-44 lg:px-32 lg:pb-56 lg:pt-52">
+    <div className="relative px-6 pt-44 pb-52 lg:px-32 lg:pt-52 lg:pb-56">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -34,7 +34,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
           url={arrowLink.link.url}
           text={arrowLink.text}
           className={
-            "text-start lg:pb-6 [&>span]:text-base [&>span]:text-primary-text"
+            "[&>span]:text-primary-text text-start lg:pb-6 [&>span]:text-base"
           }
         />
       </div>
@@ -43,7 +43,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/CtaBox.tsx b/frontend/src/components/CtaBox.tsx
index a89b3a2..15a9d2d 100644
--- a/frontend/src/components/CtaBox.tsx
+++ b/frontend/src/components/CtaBox.tsx
@@ -35,7 +35,7 @@ const CtaBox: React.FC<ICtaBox> = ({ background, header, button }) => {
           "justify-center py-9",
         )}
       >
-        <h2 className="mb-8 text-center text-lg text-primary-text lg:text-xl">
+        <h2 className="text-primary-text mb-8 text-center text-lg lg:text-xl">
           {header}
         </h2>
         <CustomLink href={button.link.url}>
diff --git a/frontend/src/components/CtaCard.tsx b/frontend/src/components/CtaCard.tsx
index 8b64c01..5f78712 100644
--- a/frontend/src/components/CtaCard.tsx
+++ b/frontend/src/components/CtaCard.tsx
@@ -30,7 +30,7 @@ const CtaCard: React.FC<ICtaCard> = ({
     <div
       className={clsx(
         className,
-        "flex flex-col items-start rounded-2xl border border-stroke p-6",
+        "border-stroke flex flex-col items-start rounded-2xl border p-6",
       )}
     >
       {icon ? (
@@ -42,10 +42,10 @@ const CtaCard: React.FC<ICtaCard> = ({
           alt="Icon"
         />
       ) : null}
-      <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
         {title}
       </h2>
-      <p className="mb-6 text-base text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-6 text-base lg:text-lg">
         {description}
       </p>
       {typeof arrowLink !== "undefined" ? (
@@ -54,7 +54,7 @@ const CtaCard: React.FC<ICtaCard> = ({
           <ExternalLink
             text={arrowLink.text}
             url={arrowLink.link.url}
-            className="mb-1 mt-6 text-start"
+            className="mt-6 mb-1 text-start"
           />
         </div>
       ) : null}
diff --git a/frontend/src/components/Divider.tsx b/frontend/src/components/Divider.tsx
index a636a0a..1304b5a 100644
--- a/frontend/src/components/Divider.tsx
+++ b/frontend/src/components/Divider.tsx
@@ -1,4 +1,4 @@
 const Divider: React.FC = () => (
-  <div className="w-full border border-stroke"></div>
+  <div className="border-stroke w-full border"></div>
 );
 export default Divider;
diff --git a/frontend/src/components/Dropdown/DropdownItemButton.tsx b/frontend/src/components/Dropdown/DropdownItemButton.tsx
index 6ab8305..9c6be36 100644
--- a/frontend/src/components/Dropdown/DropdownItemButton.tsx
+++ b/frontend/src/components/Dropdown/DropdownItemButton.tsx
@@ -18,7 +18,7 @@ const DropdownItemButton: React.FC<IDropdownItem> = ({
       value === item.value
         ? "bg-background-2 text-primary-blue"
         : "text-secondary-text",
-      "cursor-pointer hover:bg-background-2 hover:text-primary-blue",
+      "hover:bg-background-2 hover:text-primary-blue cursor-pointer",
     )}
     onClick={() => handleClick(item.value)}
   >
diff --git a/frontend/src/components/Dropdown/index.tsx b/frontend/src/components/Dropdown/index.tsx
index 46d2160..3069ce5 100644
--- a/frontend/src/components/Dropdown/index.tsx
+++ b/frontend/src/components/Dropdown/index.tsx
@@ -46,18 +46,18 @@ const Dropdown: React.FC<IDropwdownProps> = ({ items, value, onChange }) => {
         className="flex flex-row items-center gap-2"
         onClick={toggleDropdown}
       >
-        <span className="text-lg text-primary-blue">{keyFromValue}</span>
+        <span className="text-primary-blue text-lg">{keyFromValue}</span>
         <Image
           src={DownArrowIcon}
           alt="Down Arrow"
           width={16}
           height={16}
-          className="ml-1 fill-primary-blue"
+          className="fill-primary-blue ml-1"
         />
       </button>
       <div
         className={clsx(
-          "absolute z-10 mt-2 rounded-2xl border border-stroke bg-background-1",
+          "border-stroke bg-background-1 absolute z-10 mt-2 rounded-2xl border",
           "flex max-h-[300px] w-[200px] flex-col gap-4 overflow-auto p-[10px] md:w-[348px]",
           isOpen ? "visible" : "hidden",
         )}
diff --git a/frontend/src/components/Earn/Hero.tsx b/frontend/src/components/Earn/Hero.tsx
index 7203d8b..344cfb5 100644
--- a/frontend/src/components/Earn/Hero.tsx
+++ b/frontend/src/components/Earn/Hero.tsx
@@ -12,7 +12,7 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { title, subtitle, statDisplay, background } = heroData.earnPageHero;
   return (
-    <div className="relative px-6 pb-[218px] pt-44 lg:px-32 lg:pb-72 lg:pt-56">
+    <div className="relative px-6 pt-44 pb-[218px] lg:px-32 lg:pt-56 lg:pb-72">
       <div className="space-y-8">
         <h1 className="text-2xl font-medium lg:text-4xl">{title}</h1>
         <p className="text-lg">{subtitle}</p>
@@ -31,14 +31,14 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
             className="object-contain"
           />
           <div className="flex flex-col">
-            <label className="text-base text-primary-text">
+            <label className="text-primary-text text-base">
               {statDisplay.statName}
             </label>
             <div className="flex flex-row">
-              <h2 className="text-xl font-medium text-primary-text lg:text-2xl">
+              <h2 className="text-primary-text text-xl font-medium lg:text-2xl">
                 {statDisplay.statValue}
               </h2>
-              <h2 className="text-xl text-primary-blue lg:text-2xl">
+              <h2 className="text-primary-blue text-xl lg:text-2xl">
                 {statDisplay.statValueSuffix}
               </h2>
             </div>
@@ -50,7 +50,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
index f8c875e..07e2b6a 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/KlerosScoutSection.tsx
@@ -17,7 +17,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
   return (
     <div
       className={clsx(
-        "rounded-2xl bg-background-1",
+        "bg-background-1 rounded-2xl",
         "flex flex-col gap-8 px-6 py-8 md:px-8 md:py-12",
       )}
     >
@@ -31,7 +31,7 @@ const KlerosScoutSection: React.FC<IKlerosScoutSection> = ({
         />
         <div className="flex flex-col gap-4">
           <span className="text-primary-purple lg:text-lg">{header}</span>
-          <span className="text-lg text-primary-text md:text-2xl">
+          <span className="text-primary-text text-lg md:text-2xl">
             {productName}
           </span>
         </div>
diff --git a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx b/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
index 7d3b0da..6655c68 100644
--- a/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
+++ b/frontend/src/components/Earn/TabSection/CuratorTabContent/index.tsx
@@ -13,8 +13,8 @@ const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
   klerosScoutSection,
 }) => {
   return (
-    <div className="space-y-12 pb-7 pt-[88px] lg:pb-12 lg:pt-24">
-      <div className="text-xl font-medium text-primary-text lg:text-3xl">
+    <div className="space-y-12 pt-[88px] pb-7 lg:pt-24 lg:pb-12">
+      <div className="text-primary-text text-xl font-medium lg:text-3xl">
         {title}
       </div>
       <div className="text-secondary-text lg:text-lg">{description}</div>
@@ -28,7 +28,7 @@ const CuratorTabContent: React.FC<EarnPageBecomeACuratorTab> = ({
         text={arrowLink.text}
         className="mx-auto"
       />
-      <p className="pt-8 text-secondary-text lg:text-lg">{scoutExplanation}</p>
+      <p className="text-secondary-text pt-8 lg:text-lg">{scoutExplanation}</p>
       <KlerosScoutSection {...klerosScoutSection} />
     </div>
   );
diff --git a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx b/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
index 8e3b455..df3cb09 100644
--- a/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
+++ b/frontend/src/components/Earn/TabSection/JurorTabContent/index.tsx
@@ -14,8 +14,8 @@ const JurorTabContent: React.FC<EarnPageBecomeAJurorTab> = ({
   courtsButton,
 }) => {
   return (
-    <div className="space-y-8 pb-7 pt-[88px] lg:space-y-12 lg:pb-12 lg:pt-24">
-      <div className="text-xl font-medium text-primary-text lg:text-3xl">
+    <div className="space-y-8 pt-[88px] pb-7 lg:space-y-12 lg:pt-24 lg:pb-12">
+      <div className="text-primary-text text-xl font-medium lg:text-3xl">
         {title}
       </div>
       <div className="text-secondary-text lg:text-lg">{description}</div>
diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
index bc65f7d..16fc852 100644
--- a/frontend/src/components/ExternalLink.tsx
+++ b/frontend/src/components/ExternalLink.tsx
@@ -21,7 +21,7 @@ const ExternalLink: React.FC<IExternalLink> = ({ text, url, className }) => {
         className,
       )}
     >
-      <span className="text-center text-primary-blue md:text-lg">
+      <span className="text-primary-blue text-center md:text-lg">
         <span className="mr-2 md:mr-4"> {text} </span>
         <Image
           src={LinkArrow}
diff --git a/frontend/src/components/ForBuilders/Hero.tsx b/frontend/src/components/ForBuilders/Hero.tsx
index 91ed5d7..01c6994 100644
--- a/frontend/src/components/ForBuilders/Hero.tsx
+++ b/frontend/src/components/ForBuilders/Hero.tsx
@@ -14,7 +14,7 @@ interface IHero {
 
 const Hero: React.FC<IHero> = ({ heroData }) => {
   return (
-    <div className="relative px-6 pb-28 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+    <div className="relative px-6 pt-44 pb-28 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-6">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {heroData.title}
@@ -47,7 +47,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
index 7cc0dc4..6dd5abd 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/Header.tsx
@@ -10,10 +10,10 @@ interface IHeader {
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
     <div className="mb-12 lg:mb-16">
-      <h2 className="mb-6 text-lg text-primary-purple lg:text-2xl">
+      <h2 className="text-primary-purple mb-6 text-lg lg:text-2xl">
         {useCasesData.useCaseTitle}
       </h2>
-      <p className="mb-12 text-secondary-text lg:mb-16 lg:text-xl">
+      <p className="text-secondary-text mb-12 lg:mb-16 lg:text-xl">
         {useCasesData.useCaseDescription}
       </p>
       <ResponsiveImage
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
index 981b6ee..e2909f7 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/Header.tsx
@@ -9,10 +9,10 @@ interface IHeader {
 const Header: React.FC<IHeader> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-6 text-lg text-primary-text lg:text-xl">
+      <h2 className="text-primary-text mb-6 text-lg lg:text-xl">
         {useCasesData.keyChallenges.title}
       </h2>
-      <p className="mb-12 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-12 lg:text-lg">
         {useCasesData.keyChallenges.description}
       </p>
     </div>
diff --git a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
index 7ed4584..b192021 100644
--- a/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
+++ b/frontend/src/components/ForBuilders/UseCasesSection/DAOSection/KeyChallenges/HowKlerosSolvesIt.tsx
@@ -11,7 +11,7 @@ interface IHowKlerosSolvesIt {
 const HowKlerosSolvesIt: React.FC<IHowKlerosSolvesIt> = ({ useCasesData }) => {
   return (
     <div>
-      <h2 className="mb-8 text-lg text-primary-purple lg:text-xl">
+      <h2 className="text-primary-purple mb-8 text-lg lg:text-xl">
         {useCasesData.solutionSections.header}
       </h2>
       <SafeSnap {...{ useCasesData }} />
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
index 06a27bb..86a4b34 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/Card.tsx
@@ -17,8 +17,8 @@ const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
       href={solution?.url}
       className={clsx(
         className,
-        "flex h-full w-full transform flex-row gap-4 text-wrap rounded-2xl",
-        "border border-stroke bg-background-2 p-4 transition duration-100",
+        "flex h-full w-full transform flex-row gap-4 rounded-2xl text-wrap",
+        "border-stroke bg-background-2 border p-4 transition duration-100",
         "hover:scale-[1.01] lg:items-start",
         {
           "lg:flex-col": variant === "large",
@@ -35,12 +35,12 @@ const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
         height={64}
       />
       <div className="space-y-2">
-        <h2 className="text-base font-medium text-primary-purple">
+        <h2 className="text-primary-purple text-base font-medium">
           {solution?.solution_name}
         </h2>
 
         <h3
-          className={clsx("text-base font-medium text-primary-text", {
+          className={clsx("text-primary-text text-base font-medium", {
             "md:text-lg lg:text-xl": variant === "large",
             "md:text-lg": variant === "medium",
             "md:text-lg lg:text-base": variant === "small",
@@ -51,7 +51,7 @@ const Card: React.FC<ICard> = ({ solution, variant, onClick, className }) => {
 
         {solution?.header_description && (
           <p
-            className={clsx("mt-2 text-base text-secondary-text", {
+            className={clsx("text-secondary-text mt-2 text-base", {
               hidden: true,
               "md:block": variant !== "small",
             })}
diff --git a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
index 3cb407e..0337259 100644
--- a/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
+++ b/frontend/src/components/Navbar/AppsDropdownContent/index.tsx
@@ -19,7 +19,7 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
   <div className={clsx(className, "mx-auto lg:max-w-[1172px]")}>
     <div
       className={clsx(
-        "grid w-full grid-cols-1 gap-3 bg-background-2",
+        "bg-background-2 grid w-full grid-cols-1 gap-3",
         "md:grid-cols-2 md:grid-rows-5",
         "lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4 lg:gap-4",
       )}
@@ -35,7 +35,7 @@ const AppsDropdownContent: React.FC<AppsDropdownContentProps> = ({
       ))}
     </div>
     <ExternalLink
-      className="ml-auto mt-2 w-max"
+      className="mt-2 ml-auto w-max"
       url={appsSection?.arrowLink.link.url}
       text={appsSection?.arrowLink.text}
     />
diff --git a/frontend/src/components/Navbar/MobileMenu.tsx b/frontend/src/components/Navbar/MobileMenu.tsx
index fc4326d..f7e409f 100644
--- a/frontend/src/components/Navbar/MobileMenu.tsx
+++ b/frontend/src/components/Navbar/MobileMenu.tsx
@@ -98,7 +98,7 @@ const MobileMenu: React.FC<IMobileMenu> = ({
                       initial={{ height: 0 }}
                       animate={{ height: "auto" }}
                       exit={{ height: 0 }}
-                      className="mt-2 max-h-[30dvh] overflow-y-scroll pl-2 pr-4"
+                      className="mt-2 max-h-[30dvh] overflow-y-scroll pr-4 pl-2"
                     >
                       {navLink?.title === "Apps" ? (
                         <AppsDropdownContent
diff --git a/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx b/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
index 4eba98f..d73564c 100644
--- a/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
+++ b/frontend/src/components/PNKToken/BuySection/FeaturedExchange.tsx
@@ -13,7 +13,7 @@ const FeaturedExchange: React.FC<IFeaturedExchange> = ({ exchange }) => {
     <CustomLink href={exchange.url}>
       <div
         className={clsx(
-          "flex h-40 flex-col items-center justify-center gap-5 rounded-2xl border border-stroke px-2",
+          "border-stroke flex h-40 flex-col items-center justify-center gap-5 rounded-2xl border px-2",
           hoverEffect,
         )}
       >
diff --git a/frontend/src/components/PNKToken/BuySection/index.tsx b/frontend/src/components/PNKToken/BuySection/index.tsx
index 141a713..a7628dd 100644
--- a/frontend/src/components/PNKToken/BuySection/index.tsx
+++ b/frontend/src/components/PNKToken/BuySection/index.tsx
@@ -10,7 +10,7 @@ interface IBuySection {
 const BuySection: React.FC<IBuySection> = ({ buyData }) => {
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="mb-12 text-xl font-medium text-primary-text lg:mb-16 lg:text-3xl">
+      <h1 className="text-primary-text mb-12 text-xl font-medium lg:mb-16 lg:text-3xl">
         {buyData.header}
       </h1>
       <div className="mb-12 grid grid-cols-1 gap-6 lg:grid-cols-3">
diff --git a/frontend/src/components/PNKToken/Hero.tsx b/frontend/src/components/PNKToken/Hero.tsx
index e4c165d..dc8638f 100644
--- a/frontend/src/components/PNKToken/Hero.tsx
+++ b/frontend/src/components/PNKToken/Hero.tsx
@@ -16,7 +16,7 @@ interface IHero {
 const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, buyButton, background } = heroData.pnkTokenPageHero;
   return (
-    <div className="relative px-6 pb-52 pt-44 md:pt-52 lg:px-32 lg:pb-60">
+    <div className="relative px-6 pt-44 pb-52 md:pt-52 lg:px-32 lg:pb-60">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -36,7 +36,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/PNKToken/TokenNeedSection/index.tsx b/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
index 7c73647..4625d89 100644
--- a/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
+++ b/frontend/src/components/PNKToken/TokenNeedSection/index.tsx
@@ -9,10 +9,10 @@ interface ITokenNeedSection {
 const TokenNeedSection: React.FC<ITokenNeedSection> = ({ tokenNeedData }) => {
   return (
     <div className="bg-background-1 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="mb-8 text-xl font-medium text-primary-text lg:text-3xl">
+      <h1 className="text-primary-text mb-8 text-xl font-medium lg:text-3xl">
         {tokenNeedData.header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-16 lg:text-lg">
         {tokenNeedData.subtitle}
       </p>
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
diff --git a/frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx b/frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx
index 9007530..eb1dc80 100644
--- a/frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx
+++ b/frontend/src/components/PNKToken/TokenomicsSection/Stat.tsx
@@ -7,12 +7,12 @@ const Stat: React.FC<TokenStat & { label: string }> = ({
 }) => {
   return (
     <div className="flex flex-col">
-      <label className="text-base text-primary-text">{label}</label>
+      <label className="text-primary-text text-base">{label}</label>
       <div className="flex flex-row gap-4">
-        <h2 className="text-xl font-medium text-primary-text lg:text-2xl">
+        <h2 className="text-primary-text text-xl font-medium lg:text-2xl">
           {primaryValue}
         </h2>
-        <h2 className="text-xl text-primary-blue lg:text-2xl">
+        <h2 className="text-primary-blue text-xl lg:text-2xl">
           {secondaryValue}
         </h2>
       </div>
diff --git a/frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx b/frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx
index c162a92..c181a19 100644
--- a/frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx
+++ b/frontend/src/components/PNKToken/TokenomicsSection/TokenStatDisplay.tsx
@@ -6,7 +6,7 @@ import Stat from "./Stat";
 
 const TokenStatDisplay: React.FC<ITokenStatDisplay> = ({ icon, stats }) => {
   return (
-    <div className="flex flex-col gap-8 rounded-2xl bg-background-1 p-6 md:w-fit md:flex-row md:rounded-full md:p-4 md:pr-8">
+    <div className="bg-background-1 flex flex-col gap-8 rounded-2xl p-6 md:w-fit md:flex-row md:rounded-full md:p-4 md:pr-8">
       <Image
         src={icon.url}
         alt="icon"
diff --git a/frontend/src/components/PNKToken/TokenomicsSection/index.tsx b/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
index 6afe06e..e6be104 100644
--- a/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
+++ b/frontend/src/components/PNKToken/TokenomicsSection/index.tsx
@@ -12,10 +12,10 @@ const TokenomicsSection: React.FC<ITokenomicsSection> = ({
 }) => {
   return (
     <div className="bg-background-2 px-6 py-12 lg:px-32 lg:py-24">
-      <h1 className="mb-8 text-2xl font-medium text-primary-text lg:text-3xl">
+      <h1 className="text-primary-text mb-8 text-2xl font-medium lg:text-3xl">
         {tokenomicsData.header}
       </h1>
-      <p className="mb-16 text-secondary-text lg:text-lg">
+      <p className="text-secondary-text mb-16 lg:text-lg">
         {tokenomicsData.subtitle}
       </p>
       <TokenStatDisplay {...tokenomicsData.tokenStatDisplay} />
diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 7abadd3..598d751 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -28,7 +28,7 @@ const Pagination: React.FC<IPagination> = ({
           className={clsx(
             "h-4 w-4 rounded-full transition-all",
             currentPage === index + 1
-              ? "scale-110 bg-primary-blue"
+              ? "bg-primary-blue scale-110"
               : "bg-stroke",
           )}
           onClick={() => callback(index + 1)}
diff --git a/frontend/src/components/ResearchDevelopment/Hero.tsx b/frontend/src/components/ResearchDevelopment/Hero.tsx
index dda1c4f..415911e 100644
--- a/frontend/src/components/ResearchDevelopment/Hero.tsx
+++ b/frontend/src/components/ResearchDevelopment/Hero.tsx
@@ -16,7 +16,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
   const { header, subtitle, buttons, arrowLink, background } =
     heroData.rAndDPageHero;
   return (
-    <div className="relative px-6 pb-36 pt-44 md:pt-52 lg:px-32 lg:pb-72">
+    <div className="relative px-6 pt-44 pb-36 md:pt-52 lg:px-32 lg:pb-72">
       <div className="space-y-8">
         <h1 className="pt-1 text-2xl font-medium lg:pt-3 lg:text-4xl">
           {header}
@@ -38,7 +38,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
               text={link.text}
               url={link.link.url}
               className={
-                "text-start [&>span]:text-base [&>span]:text-primary-text"
+                "[&>span]:text-primary-text text-start [&>span]:text-base"
               }
             />
           ))}
@@ -49,7 +49,7 @@ const Hero: React.FC<IHero> = ({ heroData }) => {
         alt="Hero Image Background"
         fill
         priority
-        className="absolute left-0 top-0 z-[-1] h-full object-cover"
+        className="absolute top-0 left-0 z-[-1] h-full object-cover"
       />
     </div>
   );
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
index 051bcfa..3d81627 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/Fellows/FellowCard.tsx
@@ -15,7 +15,7 @@ const FellowCard: React.FC<Fellow> = ({
   return (
     <div
       className={
-        "flex flex-col items-start rounded-2xl border border-stroke p-8"
+        "border-stroke flex flex-col items-start rounded-2xl border p-8"
       }
     >
       <Image
@@ -26,13 +26,13 @@ const FellowCard: React.FC<Fellow> = ({
         alt="Profile pic"
       />
 
-      <h2 className="mb-4 text-lg font-medium text-primary-text">{name}</h2>
-      <label className="mb-6 font-medium text-secondary-text">
+      <h2 className="text-primary-text mb-4 text-lg font-medium">{name}</h2>
+      <label className="text-secondary-text mb-6 font-medium">
         {profession}
       </label>
       <Divider />
 
-      <p className="mb-8 mt-6 text-lg text-primary-text lg:mb-12 lg:text-xl">
+      <p className="text-primary-text mt-6 mb-8 text-lg lg:mb-12 lg:text-xl">
         {workText}
       </p>
       <div className="mt-auto w-full">
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
index 86dbe64..85f966c 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/WaitlistSection.tsx
@@ -15,7 +15,7 @@ const WaitlistSection: React.FC<RAndDPageWaitlistSection> = ({
   return (
     <div
       className={clsx(
-        "flex flex-col gap-16 bg-background-1 px-6 py-12 md:flex-row md:gap-4",
+        "bg-background-1 flex flex-col gap-16 px-6 py-12 md:flex-row md:gap-4",
         "lg:px-32 lg:py-24",
       )}
     >
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx
index 81e8b73..689fbd0 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/FellowshipTabContent/index.tsx
@@ -22,18 +22,18 @@ const FellowshipTabContent: React.FC<IFellowshipTabContent> = ({
 }) => {
   return (
     <div className="bg-background-2 px-6 lg:px-32">
-      <div className="flex flex-col gap-8 pb-12 pt-[88px] lg:py-24">
-        <h1 className="text-xl font-medium text-primary-text lg:text-3xl">
+      <div className="flex flex-col gap-8 pt-[88px] pb-12 lg:py-24">
+        <h1 className="text-primary-text text-xl font-medium lg:text-3xl">
           {header}
         </h1>
         <p className="text-secondary-text lg:text-lg">{subtitle}</p>
 
-        <h3 className="my-8 text-lg text-secondary-text lg:text-xl">
+        <h3 className="text-secondary-text my-8 text-lg lg:text-xl">
           {testimonialsHeader}
         </h3>
         <Testimonials {...{ testimonials }} />
 
-        <h3 className="my-4 text-lg text-secondary-text lg:text-xl">
+        <h3 className="text-secondary-text my-4 text-lg lg:text-xl">
           {fellowsHeader}
         </h3>
         <Fellows {...{ fellows }} />
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
index 534d766..462990c 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/PublicationCard.tsx
@@ -19,20 +19,20 @@ const PublicationCard: React.FC<IPublicationCard> = ({
   return (
     <div
       className={clsx(
-        "rounded-2xl border border-stroke p-6",
+        "border-stroke rounded-2xl border p-6",
         "flex flex-col items-start",
         className,
       )}
     >
       {isTeamPublication(publication) ? (
         <>
-          <h2 className="mb-6 text-lg font-medium text-primary-text lg:text-xl">
+          <h2 className="text-primary-text mb-6 text-lg font-medium lg:text-xl">
             {publication.topic}
           </h2>
-          <p className="mb-8 text-secondary-text">{publication.authors}</p>
+          <p className="text-secondary-text mb-8">{publication.authors}</p>
         </>
       ) : (
-        <p className="mb-8 text-secondary-text">{publication.topic}</p>
+        <p className="text-secondary-text mb-8">{publication.topic}</p>
       )}
       <div className="mt-auto w-full">
         <Divider />
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx
index b586631..00d6bab 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/PublicationsSection/index.tsx
@@ -27,16 +27,16 @@ const PublicationSection: React.FC<IPublicationSection> = ({
 }) => {
   return (
     <div className="py-12 lg:py-24">
-      <h1 className="mb-8 text-xl text-primary-text lg:text-3xl lg:font-medium">
+      <h1 className="text-primary-text mb-8 text-xl lg:text-3xl lg:font-medium">
         {publicationsHeader}
       </h1>
 
-      <h3 className="mb-16 text-lg text-secondary-text lg:text-xl">
+      <h3 className="text-secondary-text mb-16 text-lg lg:text-xl">
         {publicationsTeamHeader}
       </h3>
       <TeamPublications {...{ teamPublications }} />
 
-      <h3 className="my-12 text-lg text-secondary-text lg:text-xl">
+      <h3 className="text-secondary-text my-12 text-lg lg:text-xl">
         {publications3rdPartyHeader}
       </h3>
       <ThirdPartyPublications {...{ thirdPartyPublications }} />
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
index f3ee6fa..899cfbb 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/ResearchCard.tsx
@@ -8,8 +8,8 @@ const ResearchCard: React.FC<Research> = ({ field, icon }) => {
     <div
       className={clsx(
         "relative min-h-[185px] w-full",
-        "rounded-2xl border border-stroke bg-background-2",
-        "before:absolute before:left-[-1px] before:top-1/2 before:h-[146px] before:-translate-y-1/2 before:border-r-2 before:border-primary-purple",
+        "border-stroke bg-background-2 rounded-2xl border",
+        "before:border-primary-purple before:absolute before:top-1/2 before:left-[-1px] before:h-[146px] before:-translate-y-1/2 before:border-r-2",
         "flex items-center justify-start gap-4 p-6",
       )}
     >
diff --git a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx
index 087ecda..65cdb82 100644
--- a/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx
+++ b/frontend/src/components/ResearchDevelopment/TabSection/ResearchTabContent/ResearchSection/index.tsx
@@ -24,11 +24,11 @@ const ResearchSection: React.FC<IResearchSection> = ({
   researches,
 }) => {
   return (
-    <div className="flex flex-col gap-6 pb-12 pt-[88px] lg:gap-8 lg:py-24">
-      <h1 className="text-xl font-medium text-primary-text md:text-3xl lg:mb-2">
+    <div className="flex flex-col gap-6 pt-[88px] pb-12 lg:gap-8 lg:py-24">
+      <h1 className="text-primary-text text-xl font-medium md:text-3xl lg:mb-2">
         {researchHeader}
       </h1>
-      <h3 className="text-lg text-secondary-text lg:text-xl">
+      <h3 className="text-secondary-text text-lg lg:text-xl">
         {researchSecondaryHeader}
       </h3>
       <p className="text-secondary-text lg:text-lg">{researchParagraph}</p>
diff --git a/frontend/src/components/Tag.tsx b/frontend/src/components/Tag.tsx
index a20fe22..4112bac 100644
--- a/frontend/src/components/Tag.tsx
+++ b/frontend/src/components/Tag.tsx
@@ -13,7 +13,7 @@ const Tag: React.FC<ITag> = ({ text, selected, className }) => {
         "lg:px-8 lg:py-4 lg:text-base",
         selected
           ? "bg-primary-purple text-lg text-white"
-          : "border-gradient-purple-blue text-lg text-secondary-text",
+          : "border-gradient-purple-blue text-secondary-text text-lg",
         className,
       )}
     >