Chore: Upgrade Tailwind (#29)

* chore: run npx @tailwindcss/upgrade

* chore: upgrade other deps

Author: haricnugraha

app/(inferenceai)/inferenceai/[lang]/home.tsx

@@ -119,7 +119,7 @@ function HowItWorks({ lang }: { lang: SupportedLanguage }) {
                       <div className="mb-4 text-left font-medium text-[#AFB0C3]">
                         {item.description}
                       </div>
-                      <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
+                      <div className="relative aspect-4/3 w-full overflow-hidden rounded-xl">
                         <Image
                           src={item.image}
                           alt={item.title}
@@ -149,13 +149,13 @@ function HowItWorks({ lang }: { lang: SupportedLanguage }) {
                 className={cn(
                   "transform cursor-pointer bg-transparent p-6 transition-all duration-300 ease-in-out hover:-translate-y-1 hover:shadow-xl",
                   i === activeIndex
-                    ? "border-white/20 bg-[#1B1728] shadow-md shadow-white/10 ring-1 ring-white/10"
+                    ? "border-white/20 bg-[#1B1728] shadow-md ring-1 shadow-white/10 ring-white/10"
                     : "border-[#4E4566] hover:border-white/20 hover:bg-[#1f1a2f]/40 hover:ring-1 hover:ring-white/10"
                 )}>
                 <h3 className="mb-1 text-xl font-semibold text-white">
                   {item.title}
                 </h3>
-                <p className="text-base text-[#AFB0C3] text-muted-foreground">
+                <p className="text-muted-foreground text-base text-[#AFB0C3]">
                   {item.description}
                 </p>
               </Card>
@@ -164,7 +164,7 @@ function HowItWorks({ lang }: { lang: SupportedLanguage }) {
         </div>
 
         <div className="flex min-h-[100%] items-center justify-center rounded-2xl bg-[#302A43] p-3">
-          <div className="relative aspect-[3/3] w-full max-w-md md:aspect-[4/3]">
+          <div className="relative aspect-3/3 w-full max-w-md md:aspect-4/3">
             <Image
               src={getHowItWorks(lang)[activeIndex].image}
               alt={getHowItWorks(lang)[activeIndex].title}
@@ -196,7 +196,7 @@ function WhatYouGet({ lang }: { lang: SupportedLanguage }) {
             transition={{ duration: 0.6 }}
             key={idx}
             className="relative flex flex-col items-start justify-start gap-4 pl-6">
-            <div className="absolute left-0 top-0 h-full w-[2px] bg-gradient-to-b from-transparent via-white/20 to-transparent" />
+            <div className="absolute top-0 left-0 h-full w-[2px] bg-linear-to-b from-transparent via-white/20 to-transparent" />
             <Image src={item.icon} alt={item.title} width={32} height={32} />
             <p className="text-base font-semibold text-white/90 md:text-xl">
               {item.title}
@@ -330,7 +330,7 @@ function CTASection({ lang }: { lang: SupportedLanguage }) {
 
   return (
     <section className="w-full px-4 py-5 md:py-8">
-      <div className="custom-glow-border relative mx-auto max-w-5xl overflow-hidden rounded-3xl bg-inferenceai-indigo p-6 text-center md:p-10">
+      <div className="custom-glow-border bg-inferenceai-indigo relative mx-auto max-w-5xl overflow-hidden rounded-3xl p-6 text-center md:p-10">
         <div className="absolute inset-0 z-0">
           <Image
             src="/images/inferenceai/cta-background.png"
@@ -341,7 +341,7 @@ function CTASection({ lang }: { lang: SupportedLanguage }) {
           <div className="absolute inset-0 bg-black/30" />
         </div>
         <div className="relative z-20 space-y-4 text-white md:space-y-6">
-          <h2 className="text-center text-2xl font-semibold leading-8 md:text-4xl xl:text-[48px]">
+          <h2 className="text-center text-2xl leading-8 font-semibold md:text-4xl xl:text-[48px]">
             {inferenceaiCtaHeading(lang)}
           </h2>
           <p className="mx-auto max-w-xl text-lg md:text-[22px]">

app/(inferenceai)/inferenceai/components/hero.tsx

@@ -36,14 +36,14 @@ export default function Hero({
       </motion.div>
 
       {/* Overlay */}
-      <div className="absolute inset-0 z-10 bg-gradient-to-t from-black/70 to-transparent" />
+      <div className="absolute inset-0 z-10 bg-linear-to-t from-black/70 to-transparent" />
       <article className="relative z-20 mt-16 flex items-center justify-center px-4 md:mt-28 md:px-20">
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1, ease: "easeOut" }}
           className="flex w-full flex-col items-center justify-center">
-          <h1 className="mb-4 mt-28 text-center text-5xl font-semibold md:mb-6 md:max-w-4xl md:text-6xl">
+          <h1 className="mt-28 mb-4 text-center text-5xl font-semibold md:mb-6 md:max-w-4xl md:text-6xl">
             {type === "inferenceai"
               ? inferenceaiHeroHeading(lang)
               : ragChatbotHeroHeading(lang)}
@@ -80,7 +80,7 @@ export default function Hero({
           className="object-cover object-center md:object-top"
         />
 
-        <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-[#020F15] to-transparent md:h-32" />
+        <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-24 bg-linear-to-t from-[#020F15] to-transparent md:h-32" />
       </motion.div>
     </section>
   );

app/(inferenceai)/inferenceai/components/nav.tsx

@@ -48,7 +48,7 @@ export default function Nav({
                   <NavigationMenuItem key={href} className="text-center">
                     <Link
                       href={href}
-                      className="text-lg font-medium transition-colors group-[[data-scroll=false]]:text-white group-[[data-scroll=true]]:text-inferenceai-indigo group-[[data-scroll=false]]:hover:text-hyperjump-blue group-[[data-scroll=true]]:hover:text-hyperjump-blue xl:text-xl">
+                      className="group-data-[scroll=true]:text-inferenceai-indigo hover:group-data-[scroll=false]:text-hyperjump-blue hover:group-data-[scroll=true]:text-hyperjump-blue text-lg font-medium transition-colors group-data-[scroll=false]:text-white xl:text-xl">
                       {label}
                     </Link>
                   </NavigationMenuItem>
@@ -72,7 +72,7 @@ export default function Nav({
                   "h-6 w-6",
                   isOpen
                     ? "stroke-black"
-                    : "stroke-white group-[[data-scroll=true]]:stroke-black"
+                    : "stroke-white group-data-[scroll=true]:stroke-black"
                 )}
                 fill="none"
                 viewBox="0 0 24 24"
@@ -109,7 +109,7 @@ export default function Nav({
               <Link
                 key={href}
                 href={href}
-                className="text-2xl text-inferenceai-indigo hover:text-hyperjump-blue"
+                className="text-inferenceai-indigo hover:text-hyperjump-blue text-2xl"
                 onClick={() => setIsOpen(false)}>
                 {label}
               </Link>

app/(inferenceai)/inferenceai/rag-chatbot/[lang]/home.tsx

@@ -105,7 +105,7 @@ function WhatIsIncluded({ lang }: { lang: SupportedLanguage }) {
             transition={{ duration: 0.6 }}
             key={idx}
             className="relative flex flex-col items-start justify-start gap-4 pl-6">
-            <div className="absolute left-0 top-0 h-full w-[2px] bg-gradient-to-b from-transparent via-white/20 to-transparent" />
+            <div className="absolute top-0 left-0 h-full w-[2px] bg-linear-to-b from-transparent via-white/20 to-transparent" />
             {item.icon}
             <p className="text-base font-semibold text-white/90 md:text-xl">
               {item.title}

app/(inferenceai)/inferenceai/rag-chatbot/[lang]/layout.tsx

@@ -1,23 +1,27 @@
 import ScrollObserver from "@/app/components/scroll-observer";
-import { SupportedLanguage } from "@/locales/.generated/types";
+import type { SupportedLanguage } from "@/locales/.generated/types";
 import Footer from "../../components/footer";
 import Hero from "../../components/hero";
 import Nav from "../../components/nav";
 
-export default function ChatbotLangLayout({
+type ChatbotLangLayoutProps = {
+  children: React.ReactNode;
+  params: Promise<{ lang: SupportedLanguage }>;
+};
+
+export default async function ChatbotLangLayout({
   children,
   params
-}: {
-  children: React.ReactNode;
-  params: { lang: string };
-}) {
+}: ChatbotLangLayoutProps) {
+  const { lang } = await params;
+
   return (
     <>
       <ScrollObserver />
-      <Nav lang={params.lang as SupportedLanguage} type="rag-chatbot" />
-      <Hero lang={params.lang as SupportedLanguage} type="rag-chatbot" />
+      <Nav lang={lang} type="rag-chatbot" />
+      <Hero lang={lang} type="rag-chatbot" />
       {children}
-      <Footer lang={params.lang as SupportedLanguage} type="rag-chatbot" />
+      <Footer lang={lang} type="rag-chatbot" />
     </>
   );
 }

app/(inferenceai)/inferenceai/rag-chatbot/[lang]/page.tsx

@@ -5,10 +5,10 @@ export const generateStaticParams = async () => {
   return [{ lang: "en" }, { lang: "id" }];
 };
 
-export default function RagChatbotPage({
-  params
-}: {
-  params: { lang: SupportedLanguage };
-}) {
-  return <Home lang={params.lang} />;
+type RagChatbotProps = {
+  params: Promise<{ lang: SupportedLanguage }>;
+};
+
+export default async function RagChatbotPage({ params }: RagChatbotProps) {
+  return <Home lang={(await params).lang} />;
 }

app/(inferenceai)/inferenceai/rag-chatbot/page.tsx

@@ -1,12 +1,10 @@
-"use client";
-
 import RagChatbotLangLayout from "./[lang]/layout";
 import RagChatbotPage from "./[lang]/page";
 
 export default function NoLangRagChatbot() {
   return (
-    <RagChatbotLangLayout params={{ lang: "en" }}>
-      <RagChatbotPage params={{ lang: "en" }} />
+    <RagChatbotLangLayout params={Promise.resolve({ lang: "en" })}>
+      <RagChatbotPage params={Promise.resolve({ lang: "en" })} />
     </RagChatbotLangLayout>
   );
 }

app/(main)/[lang]/home.tsx

@@ -157,14 +157,14 @@ function Faqs({ lang }: { lang: SupportedLanguage }) {
             className="mx-auto w-full max-w-5xl space-y-4">
             {getFaqs(lang).map((item, i) => (
               <AccordionItem key={i} value={`faq-${i}`} asChild>
-                <Card className="w-full border border-gray-200 bg-white shadow-sm transition-all duration-300">
+                <Card className="w-full border border-gray-200 bg-white shadow-xs transition-all duration-300">
                   <CardHeader className="px-4 py-2">
                     <AccordionTrigger className="flex w-full items-center justify-between gap-2 text-left text-xl font-medium text-[#020F15] no-underline transition hover:no-underline focus:no-underline">
                       {item.question}
                     </AccordionTrigger>
                   </CardHeader>
                   <AccordionContent asChild>
-                    <CardContent className="px-4 pb-4 pt-0 text-base text-[#61656E] lg:text-lg">
+                    <CardContent className="px-4 pt-0 pb-4 text-base text-[#61656E] lg:text-lg">
                       {item.answer}
                     </CardContent>
                   </AccordionContent>

app/(main)/[lang]/location.tsx

@@ -22,15 +22,15 @@ export function Location({ lang }: LocationProps) {
   return (
     <GridItemsContainer>
       <GridItemsTitle title={mainOurLocation(lang)} layout="vertical" />
-      <div className="mb-6 mt-8 grid w-full grid-cols-1 overflow-hidden rounded shadow-lg lg:grid-cols-4">
+      <div className="mt-8 mb-6 grid w-full grid-cols-1 overflow-hidden rounded shadow-lg lg:grid-cols-4">
         <div className="relative col-span-1 overflow-hidden p-6 text-white">
           <div className="absolute inset-0 z-0">
             <Image
               src="/images/swatch.svg"
               alt="Location background"
               width={1440}
               height={308}
-              className="pointer-events-none h-full select-none object-cover"
+              className="pointer-events-none h-full object-cover select-none"
               style={{
                 background:
                   "linear-gradient(134.7deg, #5954DA 3.43%, #0B0B0D 48.93%)"
@@ -44,11 +44,11 @@ export function Location({ lang }: LocationProps) {
                 <p key={index}>{line}</p>
               ))}
             </div>
-            <p className="mb-2 mt-4 text-sm">
+            <p className="mt-4 mb-2 text-sm">
               Email:{" "}
               <a
                 href={`mailto:${email}`}
-                className="transition-colors hover:text-hyperjump-blue">
+                className="hover:text-hyperjump-blue transition-colors">
                 {email}
               </a>
             </p>

app/(main)/components/case-studies-cta.tsx

@@ -23,7 +23,7 @@ export function CaseStudiesCTA({ lang }: { lang: SupportedLanguage }) {
           alt="Footer background"
           width={1440}
           height={308}
-          className="pointer-events-none h-full select-none object-cover"
+          className="pointer-events-none h-full object-cover select-none"
           style={{
             background:
               "linear-gradient(134.7deg, #5954DA 3.43%, #0B0B0D 48.93%)"