Replace color hex codes with Tailwind color palette

Replaced all custom color hex codes used in various component classes with their corresponding color names from the expanded Tailwind color palette. This ensures consistent styling across components and enhances readability and maintainability of the code.

src/components/ThemeIcon.astro

@@ -2,7 +2,7 @@
 <button
   type="button"
   aria-label="Dark Theme Toggle"
-  class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  class="hs-dark-mode group flex h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-orange-400 hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-orange-300 dark:focus:outline-none"
   data-hs-theme-click-value="dark"
 >
   <!-- The SVG displayed shows an abstract icon that represents the moon (dark theme) -->
@@ -24,7 +24,7 @@
 <button
   type="button"
   aria-label="Light Theme Toggle"
-  class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  class="hs-dark-mode group hidden h-8 w-8 items-center justify-center rounded-full font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 hs-dark-mode-active:flex dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-none"
   data-hs-theme-click-value="light"
 >
   <!-- The SVG displayed shows a standard sun icon that stands for the light theme -->

src/components/sections/FooterSection.astro

@@ -44,7 +44,7 @@ const crafted: string = Astro.currentLocale === "fr" ? "Fabriqué par" : "Crafte
                     {link.name}
                   </a>
                   {section.section === "Company" && index === 2 ? (
-                    <span class="ms-1 inline rounded-lg bg-[#e14d0b] px-2 py-1 text-xs font-bold text-neutral-50">
+                    <span class="ms-1 inline rounded-lg bg-orange-500 px-2 py-1 text-xs font-bold text-neutral-50">
                       We're hiring!
                     </span>
                   ) : null}

src/components/sections/features/FeaturesStatsAlt.astro

@@ -13,7 +13,7 @@ interface Props {
 }
 
 // Define SVG marker to be used in the component
-const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-[#fa5a15] dark:text-[#fb713b]"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
+const ListItemMarker: string = `<svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mt-0.5 h-6 w-6 text-orange-400 dark:text-orange-300"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>`;
 ---
 
 <section

src/components/ui/LanguagePicker.astro

@@ -8,7 +8,7 @@ import Icon from "./icons/Icon.astro";
     id="hs-dropdown-default"
     type="button"
     aria-label="Change language"
-    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
+    class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text--orange-400 dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-none"
   >
     <Icon name="earth" />
     <svg

src/components/ui/blocks/IconBlock.astro

@@ -8,7 +8,7 @@ interface Props {
 }
 // Define classes for heading and content
 const headingClasses =
-  "text-balance text-lg font-bold text-gray-800 dark:text-neutral-200";
+  "text-balance text-lg font-bold text-neutral-800 dark:text-neutral-200";
 const contentClasses =
   "mt-1 text-pretty text-neutral-700 dark:text-neutral-300";
 ---

src/components/ui/blocks/StatsBig.astro

@@ -10,7 +10,7 @@ interface Props {
 
 <!-- Container for the title and subtitle -->
 <div class="lg:pe-6 xl:pe-12">
-  <p class="text-6xl font-bold leading-10 text-[#fa5a15] dark:text-[#fb713b]">
+  <p class="text-6xl font-bold leading-10 text-orange-400 dark:text-orange-300">
     {title}
   </p>
   <p class="mt-2 text-neutral-600 dark:text-neutral-400 sm:mt-3">{subTitle}</p>

src/components/ui/blocks/StatsSmall.astro

@@ -10,6 +10,6 @@ interface Props {
 
 <!-- Container for title and subtitle -->
 <div>
-  <p class="text-3xl font-bold text-[#fa5a15] dark:text-[#fb713b]">{title}</p>
+  <p class="text-3xl font-bold text-orange-400 dark:text-orange-300">{title}</p>
   <p class="mt-1 text-neutral-600 dark:text-neutral-400">{subTitle}</p>
 </div>

src/components/ui/buttons/Btn404.astro

@@ -13,7 +13,7 @@ const baseClasses =
   "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
 const borderClasses = "border border-transparent";
 const bgColorClasses =
-  "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none";
+  "bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none";
 const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
 const fontSizeClasses = "2xl:text-base";
 const ringClasses = "dark:ring-zinc-200";

src/components/ui/buttons/LoginBtn.astro

@@ -7,7 +7,7 @@ interface Props {
 
 const baseClasses =
   "flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
-const hoverClasses = "hover:text-[#fa5a15] dark:hover:text-[#fb713b]";
+const hoverClasses = "hover:text-orange-400 dark:hover:text-orange-300";
 const darkClasses =
   "dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:focus:outline-none";
 const mdClasses = "md:my-6 md:border-s md:border-neutral-300 md:ps-6";

src/components/ui/buttons/PrimaryCTA.astro

@@ -13,7 +13,7 @@ const baseClasses =
   "group inline-flex items-center justify-center gap-x-2 rounded-lg px-4 py-3 text-sm font-bold text-neutral-50 ring-zinc-500 transition duration-300 focus-visible:ring outline-none";
 const borderClasses = "border border-transparent";
 const bgColorClasses =
-  "bg-[#fa5a15] hover:bg-[#e14d0b] active:bg-[#e14d0b] dark:focus:outline-none";
+  "bg-orange-400 hover:bg-orange-500 active:bg-orange-500 dark:focus:outline-none";
 const disableClasses = "disabled:pointer-events-none disabled:opacity-50";
 const fontSizeClasses = "2xl:text-base";
 const ringClasses = "dark:ring-zinc-200";

src/components/ui/buttons/ProductTabBtn.astro

@@ -27,7 +27,7 @@ const INACTIVE_HEADING_CLASS = "text-neutral-800 dark:text-neutral-200";
 >
   <!-- Tab text -->
   <span
-    class={`${HEADING_CLASS} ${first ? "text-[#fa5a15] dark:text-[#fb713b]" : INACTIVE_HEADING_CLASS}`}
+    class={`${HEADING_CLASS} ${first ? "text-orange-400 dark:text-orange-300" : INACTIVE_HEADING_CLASS}`}
   >
     {title}
   </span>

src/components/ui/buttons/SocialShare.astro

@@ -87,7 +87,7 @@ const socialPlatforms: SocialPlatform[] = [
         </svg>
 
         <svg
-          class="js-clipboard-success text-primary-accent-light dark:text-primary-accent-dark hidden h-4 w-4"
+          class="js-clipboard-success text-neutral-700 dark:text-neutral-300 hidden h-4 w-4"
           width="24"
           height="24"
           viewBox="0 0 24 24"

src/components/ui/cards/CardBlogRecent.astro

@@ -34,7 +34,7 @@ interface Props {
       class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight"
     >
       <a
-        class="outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
+        class="outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
         href={`/blog/${blogEntry.slug}/`}
       >
         {blogEntry.data.description}

src/components/ui/cards/CardInsight.astro

@@ -40,7 +40,7 @@ interface Props {
     </p>
     <!-- The "Read More" hyperlink going to the full insight. With an arrow icon -->
     <p
-      class="mt-5 inline-flex items-center gap-x-1 font-medium text-[#fa5a15] decoration-2 group-hover:underline dark:text-[#fb713b]"
+      class="mt-5 inline-flex items-center gap-x-1 font-medium text-orange-400 decoration-2 group-hover:underline dark:text-orange-300"
     >
       Read more
       <Icon name="arrowRightStatic" />

src/components/ui/cards/CardRelated.astro

@@ -26,7 +26,7 @@ interface Props {
     />
     <!-- The title of the blog post -->
     <h3
-      class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-[#fa5a15] dark:text-neutral-300 dark:group-hover:text-neutral-50"
+      class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-orange-400 dark:text-neutral-300 dark:group-hover:text-neutral-50"
     >
       {blogEntry.data.title}
     </h3>

src/components/ui/forms/LoginModal.astro

@@ -38,7 +38,7 @@ const config = {
             <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
               {config.subTitle}
               <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
+                class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
                 data-hs-overlay={config.registerBtnDataHS}
               >
                 {config.registerBtn}

src/components/ui/forms/RecoverModal.astro

@@ -38,7 +38,7 @@ const config = {
               {config.subTitle}
               <!-- Button that, when clicked, opens the login modal -->
               <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
+                class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
                 data-hs-overlay={config.loginBtnDataHS}
               >
                 {config.loginBtn}

src/components/ui/forms/RegisterModal.astro

@@ -38,7 +38,7 @@ const config = {
               {config.subTitle}
               <!-- Button to toggle login modal -->
               <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
+                class="rounded-lg p-1 font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none"
                 data-hs-overlay={config.loginBtnDataHS}
               >
                 {config.loginBtn}
@@ -76,7 +76,7 @@ const config = {
                 <!-- Checkbox with a label and a link for accepting the terms and conditions -->
                 <Checkbox label="I accept the " , id="terms-agree">
                   <a
-                    class="font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none"
+                    class="font-medium text-orange-400 decoration-2 hover:underline dark:text-orange-400 dark:focus:outline-none"
                     href="#">Terms and Conditions</a
                   >
                 </Checkbox>

src/components/ui/forms/input/EmailFooterInput.astro

@@ -23,12 +23,12 @@ const placeholder = Astro.currentLocale === "fr" ? "Entrez votre email" : "Enter
       type="text"
       id={id}
       name="footer-input"
-      class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-[#fa5a15] focus:ring-[#fa5a15] disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300 dark:placeholder:text-neutral-300"
+      class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-orange-400 focus:ring-orange-400 disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300 dark:placeholder:text-neutral-300"
       placeholder={placeholder}
     />
   </div>
   <a
-    class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-[#fa5a15] p-3 text-sm font-bold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
+    class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-orange-400 p-3 text-sm font-bold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-orange-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
     href="#"
   >
     {title}

src/components/ui/forms/input/PasswordInput.astro

@@ -26,7 +26,7 @@ interface Props {
     {
       forgot ? (
         <button
-          class="rounded-lg text-sm font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
+          class="rounded-lg text-sm font-medium text-orange-400 decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-orange-400 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1"
           data-hs-overlay="#hs-toggle-between-modals-recover-modal"
         >
           Forgot password?

src/components/ui/icons/icons.ts

@@ -5,7 +5,7 @@ export const Icons = {
         d: "m150-400 82-80-82-82-80 82 80 80Zm573-10 87-140 88 140H723Zm-243-70q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm.351-180Q455-660 437.5-642.851t-17.5 42.5Q420-575 437.351-557.5t43 17.5Q506-540 523-557.351t17-43Q540-626 522.851-643t-42.5-17ZM480-600ZM0-240v-53q0-39.464 42-63.232T150.398-380q12.158 0 23.38.5T196-377.273q-8 17.273-12 34.842-4 17.57-4 37.431v65H0Zm240 0v-65q0-65 66.5-105T480-450q108 0 174 40t66 105v65H240Zm570-140q67.5 0 108.75 23.768T960-293v53H780v-65q0-19.861-3.5-37.431Q773-360 765-377.273q11-1.727 22.171-2.227 11.172-.5 22.829-.5Zm-330.2-10Q400-390 350-366q-50 24-50 61v5h360v-6q0-36-49.5-60t-130.7-24Zm.2 90Z",
       },
     ],
-    class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
+    class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -16,7 +16,7 @@ export const Icons = {
         d: "M343-420h225v-60H343v60Zm0-90h395v-60H343v60Zm0-90h395v-60H343v60Zm-83 400q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260Zm0-60h560v-560H260v560ZM140-80q-24 0-42-18t-18-42v-620h60v620h620v60H140Zm120-740v560-560Z",
       },
     ],
-    class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
+    class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -27,7 +27,7 @@ export const Icons = {
         d: "m346-60-76-130-151-31 17-147-96-112 96-111-17-147 151-31 76-131 134 62 134-62 77 131 150 31-17 147 96 111-96 112 17 147-150 31-77 130-134-62-134 62Zm27-79 107-45 110 45 67-100 117-30-12-119 81-92-81-94 12-119-117-28-69-100-108 45-110-45-67 100-117 28 12 119-81 94 81 92-12 121 117 28 70 100Zm107-341Zm-43 133 227-225-45-41-182 180-95-99-46 45 141 140Z",
       },
     ],
-    class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
+    class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -38,7 +38,7 @@ export const Icons = {
         d: "M480-480q-51 0-85.5-34.5T360-600q0-50 34.5-85t85.5-35q50 0 85 35t35 85q0 51-35 85.5T480-480Zm-.351-60Q505-540 522.5-557.149t17.5-42.5Q540-625 522.649-642.5t-43-17.5Q454-660 437-642.649t-17 43Q420-574 437.149-557t42.5 17ZM240-240v-76q0-27 17.5-47.5T300-397q42-22 86.943-32.5 44.942-10.5 93-10.5Q528-440 573-429.5t87 32.5q25 13 42.5 33.5T720-316v76H240Zm240-140q-47.546 0-92.773 13T300-328v28h360v-28q-42-26-87.227-39-45.227-13-92.773-13Zm0-220Zm0 300h180-360 180ZM140-80q-24 0-42-18t-18-42v-172h60v172h172v60H140ZM80-648v-172q0-24 18-42t42-18h172v60H140v172H80ZM648-80v-60h172v-172h60v172q0 24-18 42t-42 18H648Zm172-568v-172H648v-60h172q24 0 42 18t18 42v172h-60Z",
       },
     ],
-    class: "mt-1 h-8 w-8 flex-shrink-0 fill-[#fa5a15] dark:fill-[#fb713b]",
+    class: "mt-1 h-8 w-8 flex-shrink-0 fill-orange-400 dark:fill-orange-300",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -50,7 +50,7 @@ export const Icons = {
       },
     ],
     class:
-      "mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7",
+      "mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -62,7 +62,7 @@ export const Icons = {
       },
     ],
     class:
-      "mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-[#fa5a15] dark:fill-neutral-300 dark:hs-tab-active:fill-[#fb713b] md:h-7 md:w-7",
+      "mt-2 h-6 w-6 flex-shrink-0 fill-neutral-700 hs-tab-active:fill-orange-400 dark:fill-neutral-300 dark:hs-tab-active:fill-orange-300 md:h-7 md:w-7",
     width: 48,
     height: 48,
     viewBox: "0 -960 960 960",
@@ -74,7 +74,7 @@ export const Icons = {
       },
     ],
     class:
-      "h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-[#fa5a15] dark:text-neutral-300 dark:hs-tab-active:text-[#fb713b] md:h-7 md:w-7",
+      "h-6 w-6 flex-shrink-0 text-neutral-700 hs-tab-active:text-orange-400 dark:text-neutral-300 dark:hs-tab-active:text-orange-300 md:h-7 md:w-7",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
@@ -93,7 +93,7 @@ export const Icons = {
         d: "M12 19V5",
       },
     ],
-    class: "h-5 w-5 flex-shrink-0 text-[#fa5a15] dark:text-[#fb713b]",
+    class: "h-5 w-5 flex-shrink-0 text-orange-400 dark:text-orange-300",
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",

src/pages/insights/[...slug].astro

@@ -38,7 +38,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
           </div>
           <div
             id="progress-mobile"
-            class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-[#fa5a15]/30 to-[#fa5a15] md:hidden"
+            class="fixed left-0 top-0 h-2 w-full bg-gradient-to-r from-orange-400/30 to-orange-400 md:hidden"
           >
           </div>
           <div id="pin" class="mt-10 hidden space-y-4 md:block">
@@ -47,7 +47,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
             >
               <div
                 id="progress"
-                class="h-px w-full bg-gradient-to-r from-[#fa5a15]/30 to-[#fa5a15]"
+                class="h-px w-full bg-gradient-to-r from-orange-400/30 to-orange-400"
               >
               </div>
             </div>

tailwind.config.mjs

@@ -7,11 +7,66 @@ export default {
   ],
   darkMode: "class",
   theme: {
+    colors: {
+      transparent: "transparent",
+      current: "currentColor",
+      black: "#000000",
+      white: "#ffffff",
+      gray: {
+        100: "#f3f4f6",
+        300: "#d1d5db",
+        500: "#6b7280",
+        600: "#4b5563",
+        800: "#1f2937",
+      },
+      indigo: {
+        200: "#c7d2fe",
+        300: "#a5b4fc",
+      },
+      neutral: {
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        900: "#171717",
+      },
+      yellow: {
+        50: "#fefce8",
+        100: "#fef9c3",
+        400: "#facc15",
+        500: "#eab308",
+      },
+      orange: {
+        100: "#ffedd5",
+        200: "#fed7aa",
+        300: "#fb713b",
+        400: "#fa5a15",
+        500: "#e14d0b",
+        600: "#ea580c",
+      },
+      red: {
+        400: "#f87171",
+        500: "#ef4444",
+      },
+      zinc: {
+        200: "#e4e4e7",
+        500: "#71717a",
+        600: "#52525b",
+        700: "#3f3f46",
+        800: "#27272a",
+        900: "#18181b",
+      },
+    },
     extend: {},
   },
   plugins: [
     require("tailwindcss/nesting"),
     require("preline/plugin"),
-    require("@tailwindcss/forms")
+    require("@tailwindcss/forms"),
   ],
 };