fix: resolve @eslint errors and remove unnecessary ignorePatterns

Author: ladunjexa

.eslintrc.json

@@ -1,9 +1,3 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "standard",
-    "plugin:tailwindcss/recommended",
-    "prettier"
-  ],
-  "ignorePatterns": ["/components/ui/*"]
+  "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier"]
 }

components/design/hero.tsx

@@ -49,7 +49,7 @@ export const BackgroundCircles = ({
   }, []);
 
   return (
-    <div className="absolute -top-[42.375rem] left-1/2 aspect-square w-[78rem] -translate-x-1/2 rounded-full border border-n-2/5 md:-top-[38.5rem] xl:-top-[32rem]">
+    <div className="absolute left-1/2 top-[-42.375rem] aspect-square w-[78rem] -translate-x-1/2 rounded-full border border-n-2/5 md:top-[-38.5rem] xl:top-[-32rem]">
       <Rings />
 
       {/* Moving background colored circle balls */}
@@ -62,7 +62,7 @@ export const BackgroundCircles = ({
           />
         </div>
 
-        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom -rotate-[56deg]">
+        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom rotate-[-56deg]">
           <div
             className={`-ml-1 -mt-32 size-4 rounded-full bg-gradient-to-b from-[#DD734F] to-[#1A1A32] transition-transform duration-500 ease-out ${
               mounted ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
@@ -72,21 +72,21 @@ export const BackgroundCircles = ({
 
         <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom rotate-[54deg]">
           <div
-            className={`transit -ml-1 mt-[12.9rem] hidden size-4 rounded-full bg-gradient-to-b from-[#B9AEDF] to-[#1A1A32] transition-transform duration-500 ease-out xl:block ${
+            className={`-ml-1 mt-[12.9rem] hidden size-4 rounded-full bg-gradient-to-b from-[#B9AEDF] to-[#1A1A32] transition-transform duration-500 ease-out xl:block ${
               mounted ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
             }`}
           />
         </div>
 
-        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom -rotate-[65deg]">
+        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom rotate-[-65deg]">
           <div
             className={`-ml-1.5 mt-52 size-3 rounded-full bg-gradient-to-b from-[#B9AEDF] to-[#1A1A32] transition-transform duration-500 ease-out ${
               mounted ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"
             }`}
           />
         </div>
 
-        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom -rotate-[85deg]">
+        <div className="absolute bottom-1/2 left-1/2 h-1/2 w-0.25 origin-bottom rotate-[-85deg]">
           <div
             className={`-ml-3 -mt-3 size-6 rounded-full bg-gradient-to-b from-[#88E5BE] to-[#1A1A32] transition-transform duration-500 ease-out ${
               mounted ? "translate-y-0 opacity-100" : "translate-y-10 opacity-0"

components/design/roadmap.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 
 export const Gradient = () => {
   return (
-    <div className="pointer-events-none absolute -left-[30.375rem] top-[18.25rem] w-[56.625rem] opacity-60 mix-blend-color-dodge">
+    <div className="pointer-events-none absolute left-[-30.375rem] top-[18.25rem] w-[56.625rem] opacity-60 mix-blend-color-dodge">
       <div className="absolute left-1/2 top-1/2 size-[58.85rem] -translate-x-3/4 -translate-y-1/2">
         <Image className="w-full" src={images.gradient} width={942} height={942} alt="Gradient" />
       </div>

components/design/services.tsx

@@ -29,7 +29,7 @@ export const VideoChatMessage = () => {
   return (
     <div className="absolute left-[3.125rem] top-8 w-full max-w-56 rounded-t-xl rounded-br-xl bg-n-6 pb-7 pl-5 pr-2.5 pt-2.5 font-code text-base md:max-w-[17.5rem]">
       Video generated!
-      <div className="absolute -bottom-[1.125rem] left-5 flex size-9 items-center justify-center rounded-xl bg-color-1">
+      <div className="absolute bottom-[-1.125rem] left-5 flex size-9 items-center justify-center rounded-xl bg-color-1">
         <Image src={images.brainwaveWhiteSymbol} width={26} height={26} alt="Brainwave" />
       </div>
       <p className="tagline absolute bottom-1 right-2.5 text-[0.625rem] uppercase text-n-3">

components/sections/benefits/index.tsx

@@ -22,7 +22,7 @@ const Benefits = (props: Props) => {
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="relative block bg-[length:100%_100%] bg-no-repeat p-0.5 md:max-w-[24rem]"
+              className="relative block bg-[length:100%_100%] bg-no-repeat p-0.5 md:max-w-sm"
               style={{
                 backgroundImage: `url(${item.backgroundUrl})`,
               }}

components/sections/hero/index.tsx

@@ -61,14 +61,14 @@ const Hero = (props: Props) => {
                   src={images.robot}
                   width={1024}
                   height={490}
-                  className="w-full translate-y-[8%] scale-[1.7] md:-translate-y-[10%] md:scale-100 lg:-translate-y-[23%]"
+                  className="w-full translate-y-[8%] scale-[1.7] md:translate-y-[-10%] md:scale-100 lg:translate-y-[-23%]"
                   alt="AI"
                 />
 
                 <Generating className="absolute inset-x-4 bottom-5 md:bottom-8 md:left-1/2 md:right-auto md:w-[31rem] md:-translate-x-1/2" />
 
                 <ScrollParallax isAbsolutelyPositioned>
-                  <ul className="absolute -left-[5.5rem] bottom-[7.5rem] hidden rounded-2xl border border-n-1/10 bg-n-9/40 p-1 backdrop-blur xl:flex">
+                  <ul className="absolute bottom-[7.5rem] left-[-5.5rem] hidden rounded-2xl border border-n-1/10 bg-n-9/40 p-1 backdrop-blur xl:flex">
                     {heroIcons.map((icon, index) => (
                       <li className="p-5" key={index}>
                         <Image src={icon} height={24} width={25} alt={icon} />
@@ -79,7 +79,7 @@ const Hero = (props: Props) => {
 
                 <ScrollParallax isAbsolutelyPositioned>
                   <Notification
-                    className="absolute -right-[5.5rem] bottom-44 hidden w-72 xl:flex"
+                    className="absolute bottom-44 right-[-5.5rem] hidden w-72 xl:flex"
                     title="Code generation"
                   />
                 </ScrollParallax>