feat(components): add the component planets with the first scheme

- aws, docker, jest, mongo, nextjs, node, playwright, postgres, tailwind

Author: raferdev

src/components/Planets/aws.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Aws = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[80px] w-[80px] rotate-6 justify-center rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-green-300 via-yellow-300 to-pink-300 p-2 blur-sm sm:h-[85px] sm:w-[85px] lg:h-[100px] lg:w-[100px]  ',
+      'absolute flex h-[80px] w-[80px] rotate-6 justify-center rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-white from-40% via-yellow-300 to-pink-300 p-2 opacity-50 blur-sm sm:h-[85px] sm:w-[85px] lg:h-[100px] lg:w-[100px]  ',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Aws = ({ className }: OptClassName) => (
       className="object-contain"
       width="auto"
       src="./logos/aws.png"
-      alt="AWS"
+      alt=""
     />
   </div>
 )

src/components/Planets/docker.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Docker = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[75px] w-[75px] rotate-6 justify-center rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-gray-400 via-gray-600 to-blue-800 p-1 blur-sm sm:h-[80px] sm:w-[80px] lg:h-[100px] lg:w-[100px]',
+      'absolute flex h-[75px] w-[75px] rotate-6 justify-center rounded-full bg-[conic-gradient(at_bottom_right,_var(--tw-gradient-stops))] from-white from-70% via-gray-600 to-blue-800 p-1 opacity-50 blur-sm sm:h-[80px] sm:w-[80px] lg:h-[200px] lg:w-[200px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Docker = ({ className }: OptClassName) => (
       className="object-contain"
       decoding="async"
       src="./logos/docker.png"
-      alt="Docker"
+      alt=""
     />
   </div>
 )

src/components/Planets/jest.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Jest = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute hidden h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))] from-red-800 via-yellow-600 to-yellow-500 p-2 blur-sm sm:flex lg:h-[100px] lg:w-[100px]',
+      'absolute hidden h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-white from-40% via-yellow-600 to-yellow-500 p-2 opacity-50 blur-sm sm:flex lg:h-[100px] lg:w-[100px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Jest = ({ className }: OptClassName) => (
       width="auto"
       className=" m-[10px] object-contain"
       src="./logos/jest.png"
-      alt="Jest"
+      alt=""
     />
   </div>
 )

src/components/Planets/mongo.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const MongoDB = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-gradient-to-b from-emerald-500 to-lime-600 p-1 blur-sm lg:h-[100px] lg:w-[100px]',
+      'from-20 absolute flex h-[70px] w-[70px] -rotate-45 justify-center  rounded-full bg-[conic-gradient(at_top,_var(--tw-gradient-stops))] from-white from-10% via-emerald-500 to-lime-800 p-1 opacity-50 blur-sm lg:h-[120px] lg:w-[120px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const MongoDB = ({ className }: OptClassName) => (
       decoding="async"
       className="object-contain"
       src="./logos/mongo.png"
-      alt="Mongodb"
+      alt=""
     />
   </div>
 )

src/components/Planets/nextjs.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const NextJs = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[60px] w-[60px] rotate-12 justify-center rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-gray-700 via-gray-900 to-black p-1 blur-sm sm:h-[70px] sm:w-[70px] lg:h-[90px] lg:w-[90px]',
+      'absolute flex h-[60px] w-[60px] rotate-12 justify-center rounded-full bg-[conic-gradient(at_top,_var(--tw-gradient-stops))] from-black via-gray-900 to-white p-1 opacity-70 blur-sm sm:h-[70px] sm:w-[70px] lg:h-[90px] lg:w-[90px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const NextJs = ({ className }: OptClassName) => (
       decoding="async"
       className="object-contain"
       src="./logos/nextjs.png"
-      alt="Nextjs"
+      alt=""
     />
   </div>
 )

src/components/Planets/node.tsx

@@ -4,18 +4,18 @@ import { cn } from '@/utils/cn'
 const Node = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute hidden h-[100px] w-[100px] justify-center rounded-full bg-green-100 bg-[conic-gradient(at_top,_var(--tw-gradient-stops))] from-emerald-500 to-lime-600 p-2 blur-sm md:flex',
+      'absolute hidden h-[150px] w-[150px] items-center justify-center rounded-full bg-green-300 bg-[conic-gradient(at_top_right,_var(--tw-gradient-stops))] from-white from-50% via-emerald-600 to-lime-800 p-2 pt-4 opacity-50 blur-sm md:flex',
       className
     )}
   >
     <img
-      height="50px"
-      width="auto"
+      height="auto"
+      width="130px"
       loading="lazy"
       decoding="async"
-      className="m-2 object-contain"
+      className="rotate-6 object-contain"
       src="./logos/nodejs.png"
-      alt="Nodejs"
+      alt=""
     />
   </div>
 )

src/components/Planets/playwright.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Playwright = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-red-200 to-green-400 p-1 blur-sm lg:h-[100px] lg:w-[100px]',
+      'absolute flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-indigo-200 via-red-200 to-green-400 p-1 opacity-50 blur-sm lg:h-[150px] lg:w-[150px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Playwright = ({ className }: OptClassName) => (
       decoding="async"
       className="object-contain"
       src="./logos/playwright.png"
-      alt="Playwright"
+      alt=""
     />
   </div>
 )

src/components/Planets/postgres.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Postgres = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute -z-10 flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-gradient-to-tr from-sky-400 to-blue-800 p-[12px] blur-sm',
+      'absolute -z-10 flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-gradient-to-tr from-sky-400 to-blue-800 p-[12px] opacity-60 blur-sm',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Postgres = ({ className }: OptClassName) => (
       decoding="async"
       className="object-contain"
       src="./logos/postgresql.png"
-      alt="Postgresql"
+      alt=""
     />
   </div>
 )

src/components/Planets/tailwind.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/utils/cn'
 const Tailwind = ({ className }: OptClassName) => (
   <div
     className={cn(
-      'absolute flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-gradient-to-tr from-green-300 via-blue-500 to-purple-600 p-1 blur-sm lg:h-[100px] lg:w-[100px]',
+      'absolute flex h-[90px] w-[90px] rotate-12 justify-center rounded-full bg-[conic-gradient(at_top_left,_var(--tw-gradient-stops))] from-white via-blue-800 to-purple-600 p-2 opacity-60 blur-sm lg:h-[130px] lg:w-[130px]',
       className
     )}
   >
@@ -15,7 +15,7 @@ const Tailwind = ({ className }: OptClassName) => (
       className="object-contain"
       decoding="async"
       src="./logos/tailwind.png"
-      alt="Tailwind"
+      alt=""
     />
   </div>
 )